Breadcrumb, ContextMenu, Dock unstyled demo updates

doc/breadcrumb/theming/UnstyledDoc.vue

@@ -0,0 +1,45 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Breadcrumb requires a collection of menuitems as its <i>model</i>.</p>
+    </DocSectionText>
+
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                to: '/'
+            },
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Breadcrumb :home="home" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    to: '/',
+});
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/breadcrumb/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Breadcrumb Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/contextmenu/theming/UnstyledDoc.vue

@@ -0,0 +1,48 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using the <i>contextmenu</i> event of the target to display the menu.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'View', icon: 'pi pi-fw pi-search' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="menu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const menu = ref();
+const items = ref([
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' }
+]);
+
+const onImageRightClick = (event) => {
+    menu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.menu.show(event);
+        }
+    }
+};
+</script>

doc/contextmenu/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ContextMenu Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/dock/theming/UnstyledDoc.vue

@@ -0,0 +1,131 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Menu requires a collection of menuitems as its <i>model</i>. Default location is <i>bottom</i> and other sides are also available when defined with the <i>position</i> property.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Finder',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+                },
+                {
+                    label: 'App Store',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+                },
+                {
+                    label: 'Photos',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+                },
+                {
+                    label: 'Trash',
+                    icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+                }
+            ],
+            position: 'bottom',
+            positions: [
+                {
+                    label: 'Bottom',
+                    value: 'bottom'
+                },
+                {
+                    label: 'Top',
+                    value: 'top'
+                },
+                {
+                    label: 'Left',
+                    value: 'left'
+                },
+                {
+                    label: 'Right',
+                    value: 'right'
+                }
+            ],
+            code: {
+                composition: `
+<template>
+    <div class="card dock-demo">
+        <div class="flex flex-wrap gap-3 mb-5">
+            <div v-for="pos of positions" :key="pos.label" class="flex items-center">
+                <RadioButton v-model="position" :value="pos.value" :inputId="pos.label" name="dock" />
+                <label :for="pos.label" class="ml-2"> {{ pos.label }} </label>
+            </div>
+        </div>
+        <div class="dock-window" style="backgroundimage: 'url(https://primefaces.org/cdn/primevue/images/dock/window.jpg))'">
+            <Dock :model="items" :position="position">
+                <template #icon="{ item }">
+                    <img :alt="item.label" :src="item.icon" style="width: 100%" />
+                </template>
+            </Dock>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Finder',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/finder.svg'
+    },
+    {
+        label: 'App Store',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/appstore.svg'
+    },
+    {
+        label: 'Photos',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/photos.svg'
+    },
+    {
+        label: 'Trash',
+        icon: 'https://primefaces.org/cdn/primevue/images/dock/trash.png'
+    }
+]);
+const position = ref('bottom');
+const positions = ref([
+    {
+        label: 'Bottom',
+        value: 'bottom'
+    },
+    {
+        label: 'Top',
+        value: 'top'
+    },
+    {
+        label: 'Left',
+        value: 'left'
+    },
+    {
+        label: 'Right',
+        value: 'right'
+    }
+]);
+
+<\/script>
+
+<style scoped>
+.dock-demo > .dock-window {
+    width: 100%;
+    height: 450px;
+    position: relative;
+    background-image: url("https://primefaces.org/cdn/primevue/images/dock/window.jpg");
+    background-repeat: no-repeat;
+    background-size: cover;
+    z-index: 1;
+}
+
+.dock-demo > .p-dock {
+    z-index: 1000;
+}
+</style>`
+            }
+        };
+    }
+};
+</script>

doc/dock/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dock Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import UnstyledDoc from './UnstyledDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'unstyled',
+                    label: 'Unstyled',
+                    component: UnstyledDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/breadcrumb/index.vue

@@ -1,14 +1,22 @@
 <template>
-    <DocComponent title="Vue Breadcrumb Component" header="Breadcrumb" description="Breadcrumb provides contextual information about page hierarchy." :componentDocs="docs" :apiDocs="['Breadcrumb', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue Breadcrumb Component"
+        header="Breadcrumb"
+        description="Breadcrumb provides contextual information about page hierarchy."
+        :componentDocs="docs"
+        :apiDocs="['Breadcrumb', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc';
 import BasicDoc from '@/doc/breadcrumb/BasicDoc';
 import ImportDoc from '@/doc/breadcrumb/ImportDoc';
-import StyleDoc from '@/doc/breadcrumb/StyleDoc';
 import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
 import PTComponent from '@/doc/breadcrumb/pt/index.vue';
+import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };

pages/contextmenu/index.vue

@@ -1,5 +1,13 @@
 <template>
-    <DocComponent title="Vue ContextMenu Component" header="ContextMenu" description="ContextMenu displays an overlay menu on right click of its target." :componentDocs="docs" :apiDocs="['ContextMenu', 'MenuItem']" :ptTabComponent="ptComponent" />
+    <DocComponent
+        title="Vue ContextMenu Component"
+        header="ContextMenu"
+        description="ContextMenu displays an overlay menu on right click of its target."
+        :componentDocs="docs"
+        :apiDocs="['ContextMenu', 'MenuItem']"
+        :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
+    />
 </template>
 
 <script>
@@ -7,8 +15,8 @@ import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc';
 import BasicDoc from '@/doc/contextmenu/BasicDoc';
 import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
 import ImportDoc from '@/doc/contextmenu/ImportDoc';
-import StyleDoc from '@/doc/contextmenu/StyleDoc';
 import PTComponent from '@/doc/contextmenu/pt/index.vue';
+import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +37,14 @@ export default {
                     label: 'Document',
                     component: DocumentDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };

pages/dock/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" :ptTabComponent="ptComponent" />
+    <DocComponent title="Vue Dock Component" header="Dock" description="Dock is a navigation component consisting of menuitems." :componentDocs="docs" :apiDocs="['Dock']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -7,8 +7,8 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc';
 import AdvancedDoc from '@/doc/dock/AdvancedDoc';
 import BasicDoc from '@/doc/dock/BasicDoc';
 import ImportDoc from '@/doc/dock/ImportDoc';
-import StyleDoc from '@/doc/dock/StyleDoc';
 import PTComponent from '@/doc/dock/pt/index.vue';
+import ThemingDoc from '@/doc/dock/theming/index.vue';
 
 export default {
     data() {
@@ -29,18 +29,14 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };