DynamicDialog, Ripple, Tooltip unstyled demos added

doc/dynamicdialog/theming/UnstyledDoc.vue

@@ -0,0 +1,353 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" :extFiles="extFiles" :service="['ProductService']" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+
+<DynamicDialog />`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import { markRaw, defineAsyncComponent } from 'vue';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
+
+export default {
+    methods: {
+        showProducts() {
+            const dialogRef = this.$dialog.open(ProductListDemo, {
+                props: {
+                    header: 'Product List',
+                    style: {
+                        width: '50vw'
+                    },
+                    breakpoints: {
+                        '960px': '75vw',
+                        '640px': '90vw'
+                    },
+                    modal: true
+                },
+                templates: {
+                    footer: markRaw(FooterDemo)
+                },
+                onClose: (options) => {
+                    const data = options.data;
+
+                    if (data) {
+                        const buttonType = data.buttonType;
+                        const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
+
+                        this.$toast.add({ severity: 'info', ...summary_and_detail, life: 3000 });
+                    }
+                }
+            });
+        }
+    }
+}
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Select a Product" icon="pi pi-search" @click="showProducts" />
+        <Toast />
+        <DynamicDialog />
+    </div>
+</template>
+
+<script setup>
+import { markRaw, defineAsyncComponent } from 'vue';
+import { useDialog } from 'primevue/usedialog';
+import { useToast } from 'primevue/usetoast';
+import Button from 'primevue/button';
+const ProductListDemo = defineAsyncComponent(() => import('./components/ProductListDemo.vue'));
+const FooterDemo = defineAsyncComponent(() => import('./components/FooterDemo.vue'));
+
+const dialog = useDialog();
+const toast = useToast();
+
+const showProducts = () => {
+    const dialogRef = dialog.open(ProductListDemo, {
+        props: {
+            header: 'Product List',
+            style: {
+                width: '50vw',
+            },
+            breakpoints:{
+                '960px': '75vw',
+                '640px': '90vw'
+            },
+            modal: true
+        },
+        templates: {
+            footer: markRaw(FooterDemo)
+        },
+        onClose: (options) => {
+            const data = options.data;
+            if (data) {
+                const buttonType = data.buttonType;
+                const summary_and_detail = buttonType ? { summary: 'No Product Selected', detail: \`Pressed '\${buttonType}' button\` } : { summary: 'Product Selected', detail: data.name };
+
+                toast.add({ severity:'info', ...summary_and_detail, life: 3000 });
+            }
+        }
+    });
+}
+<\/script>`,
+                data: `
+/* ProductService */        
+{
+    id: '1000',
+    code: 'f230fh0g3',
+    name: 'Bamboo Watch',
+    description: 'Product Description',
+    image: 'bamboo-watch.jpg',
+    price: 65,
+    category: 'Accessories',
+    quantity: 24,
+    inventoryStatus: 'INSTOCK',
+    rating: 5
+},
+...`
+            },
+            extFiles: {
+                options: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-content-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script>
+import { ProductService } from '@/service/ProductService';
+import InfoDemo from './InfoDemo.vue';
+
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            products: null
+        }
+    },
+    mounted() {
+        ProductService.getProductsSmall().then(data => this.products = data.slice(0,5));
+    },
+    methods: {
+        selectProduct(data) {
+            this.dialogRef.close(data);
+        },
+        showInfo() {
+            this.$dialog.open(InfoDemo, {
+                props: {
+                    header: 'Information',
+                    modal: true,
+                    dismissableMask: true
+                },
+                data: {
+                    totalProducts: this.products ? this.products.length : 0
+                }
+            });
+        }
+    }
+}
+<\/script>`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
+        <div class="flex justify-content-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    data() {
+        return {
+            totalProducts: 0
+        }
+    },
+    mounted() {
+        this.totalProducts = this.dialogRef.data.totalProducts;
+    },
+    methods: {
+        closeDialog() {
+            this.dialogRef.close();
+        }
+    }
+}
+<\/script>
+                            `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
+    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
+</template>
+
+<script>
+export default {
+    inject: ['dialogRef'],
+    methods: {
+        closeDialog(e) {
+            this.dialogRef.close(e);
+        }
+    }
+};
+<\/script>`
+                    }
+                },
+                composition: {
+                    'src/components/ProductListDemo.vue': {
+                        content: `
+<template>
+	<div>
+        <div class="flex justify-end mt-1 mb-3">
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
+        </div>
+        <DataTable :value="products">
+			<Column field="code" header="Code"></Column>
+			<Column field="name" header="Name"></Column>
+            <Column header="Image">
+                <template #body="slotProps">
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                </template>
+            </Column>
+			<Column field="category" header="Category"></Column>
+			<Column field="quantity" header="Quantity"></Column>
+            <Column style="width:5rem">
+                <template #body="slotProps">
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
+                </template>
+            </Column>
+		</DataTable>
+
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+import { useDialog } from "primevue/usedialog";
+import { ProductService } from "@/service/ProductService";
+import InfoDemo from "./InfoDemo.vue";
+
+const dialogRef = inject("dialogRef");
+const dialog = useDialog();
+const products = ref(null);
+
+onMounted(() => {
+    ProductService
+        .getProductsSmall()
+        .then((data) => (products.value = data.slice(0, 5)));
+});
+
+const selectProduct = (data) => {
+    dialogRef.value.close(data);
+};
+
+const showInfo = () => {
+    dialog.open(InfoDemo, {
+        props: {
+            header: "Information",
+            modal: true,
+            dismissableMask: true,
+        },
+        data: {
+            totalProducts: products.value ? products.value.length : 0,
+        }
+    });
+};
+<\/script>`
+                    },
+                    'src/components/InfoDemo.vue': {
+                        content: `
+<template>
+    <div>
+        <p>There are <strong>{{totalProducts}}</strong> products in total in this list.</p>
+        <div class="flex justify-end">
+            <Button type="button" label="Close" @click="closeDialog"></Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+const totalProducts = ref(0);
+const dialogRef = inject("dialogRef");
+
+onMounted(() => {
+    totalProducts.value = dialogRef.value.data.totalProducts;
+});
+
+const closeDialog = () => {
+    dialogRef.value.close();
+};
+<\/script>
+                            `
+                    },
+                    'src/components/FooterDemo.vue': {
+                        content: `
+<template>
+    <Button type="button" label="No" icon="pi pi-times" @click="closeDialog({ buttonType: 'No' })" text></Button>
+    <Button type="button" label="Yes" icon="pi pi-check" @click="closeDialog({ buttonType: 'Yes' })" autofocus></Button>
+</template>
+
+<script setup>
+import { inject } from "vue";
+
+const dialogRef = inject("dialogRef");
+
+const closeDialog = (e) => {
+    dialogRef.value.close(e);
+};
+<\/script>`
+                    }
+                }
+            }
+        };
+    }
+};
+</script>

doc/dynamicdialog/theming/index.vue

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

doc/ripple/theming/UnstyledDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Submit" />
+    </div>
+</template>
+
+<script setup>
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/ripple/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Ripple 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/tooltip/theming/UnstyledDoc.vue

@@ -0,0 +1,26 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Theming is implemented with the pass through properties in unstyled mode. Example below demonstrates the built-in Tailwind theme.</p>
+    </DocSectionText>
+    <DocSectionCode :code="code" embedded />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                composition: `
+<template>
+    <div class="card flex flex-wrap justify-center gap-2">
+        <InputText v-tooltip="'Enter your username'" type="text" placeholder="Right" />
+        <InputText v-tooltip.top="'Enter your username'" type="text" placeholder="Top" />
+        <InputText v-tooltip.bottom="'Enter your username'" type="text" placeholder="Bottom" />
+        <InputText v-tooltip.left="'Enter your username'" type="text" placeholder="Left" />
+    </div>
+</template>`
+            }
+        };
+    }
+};
+</script>

doc/tooltip/theming/index.vue

@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Tooltip 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/dynamicdialog/index.vue

@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -20,6 +21,7 @@ import OpenDialogDoc from '@/doc/dynamicdialog/OpenDialogDoc';
 import PassingDataDoc from '@/doc/dynamicdialog/PassingDataDoc';
 import UsageDoc from '@/doc/dynamicdialog/UsageDoc';
 import PTComponent from '@/doc/dynamicdialog/pt/index.vue';
+import ThemingDoc from '@/doc/dynamicdialog/theming/index.vue';
 
 export default {
     data() {
@@ -71,7 +73,8 @@ export default {
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };

pages/ripple/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Ripple Component" header="Ripple" description="Ripple directive adds ripple effect to the host element." :componentDocs="docs" :apiDocs="['Ripple']" />
+    <DocComponent title="Vue Ripple Component" header="Ripple" description="Ripple directive adds ripple effect to the host element." :componentDocs="docs" :apiDocs="['Ripple']" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -8,7 +8,7 @@ import ConfigurationDoc from '@/doc/ripple/ConfigurationDoc.vue';
 import CustomDoc from '@/doc/ripple/CustomDoc';
 import DefaultDoc from '@/doc/ripple/DefaultDoc';
 import ImportDoc from '@/doc/ripple/ImportDoc';
-import StyleDoc from '@/doc/ripple/StyleDoc';
+import ThemingDoc from '@/doc/ripple/theming/index.vue';
 
 export default {
     data() {
@@ -34,17 +34,13 @@ export default {
                     label: 'Custom',
                     component: CustomDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            themingDoc: ThemingDoc
         };
     }
 };

pages/tooltip/index.vue

@@ -1,15 +1,15 @@
 <template>
-    <DocComponent title="Vue Tooltip Directive" header="Tooltip" description="Tooltip directive provides advisory information for a component." :componentDocs="docs" :apiDocs="['Tooltip']" />
+    <DocComponent title="Vue Tooltip Directive" header="Tooltip" description="Tooltip directive provides advisory information for a component." :componentDocs="docs" :apiDocs="['Tooltip']" :themingDocs="themingDoc" />
 </template>
 
 <script>
 import AccessibilityDoc from '@/doc/tooltip/AccessibilityDoc';
+import DelayDoc from '@/doc/tooltip/DelayDoc';
 import EventDoc from '@/doc/tooltip/EventDoc';
 import ImportDoc from '@/doc/tooltip/ImportDoc';
 import PositionDoc from '@/doc/tooltip/PositionDoc';
-import StyleDoc from '@/doc/tooltip/StyleDoc';
 import TemplateDoc from '@/doc/tooltip/TemplateDoc';
-import DelayDoc from '@/doc/tooltip/DelayDoc';
+import ThemingDoc from '@/doc/tooltip/theming/index.vue';
 
 export default {
     data() {
@@ -40,17 +40,13 @@ export default {
                     label: 'Delay',
                     component: DelayDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            themingDoc: ThemingDoc
         };
     }
 };