Dialog & DynamicDialog pt demos added

doc/dialog/pt/PTDoc.vue

@@ -0,0 +1,100 @@
+<template>
+    <DocSectionText v-bind="$attrs"> </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Dialog
+    v-model:visible="visible"
+    modal
+    header="Header"
+    :pt="{
+        root: { class: 'w-12 sm:w-9 md:w-6' }
+    }"
+>
+    <p>Lorem ipsum </p>
+</Dialog>`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog
+            v-model:visible="visible"
+            modal
+            header="Header"
+            :pt="{
+                root: { class: 'w-12 sm:w-9 md:w-6' }
+            }"
+        >
+            <p>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>

doc/dialog/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/dialog/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dialog',
+                    label: 'Dialog PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('Dialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

doc/dynamicdialog/pt/PTDoc.vue

@@ -0,0 +1,37 @@
+<template>
+    <DocSectionText v-bind="$attrs"></DocSectionText>
+    <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+<DynamicDialog
+    :pt="{
+        root: { class: 'w-12 sm:w-9 md:w-6' }
+    }"
+/>`,
+                options: `
+<template>
+    <DynamicDialog
+        :pt="{
+            root: { class: 'w-12 sm:w-9 md:w-6' }
+        }"
+    />
+</template>`,
+                composition: `
+<template>
+    <DynamicDialog
+        :pt="{
+            root: { class: 'w-12 sm:w-9 md:w-6' }
+        }"
+    />
+</template>`
+            }
+        };
+    }
+};
+</script>

doc/dynamicdialog/pt/PTImage.vue

@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/wireframe-placeholder.jpg" />
+    </div>
+</template>

doc/dynamicdialog/pt/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dynamic Dialog Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PtDoc from './PTDoc.vue';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.dynamicdialog',
+                    label: 'Dialog Elements',
+                    component: DocApiTable,
+                    data: getPTOption('Dialog')
+                },
+                {
+                    id: 'pt.demo',
+                    label: 'Demo',
+                    component: PtDoc
+                }
+            ]
+        };
+    }
+};
+</script>

pages/dialog/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" />
+    <DocComponent title="Vue Dialog Component" header="Dialog" description="Dialog is a container to display content in an overlay window" :componentDocs="docs" :apiDocs="['Dialog']" :ptTabComponent="ptComponent" />
 </template>
 
 <script>
@@ -13,6 +13,7 @@ import PositionDoc from '@/doc/dialog/PositionDoc';
 import ResponsiveDoc from '@/doc/dialog/ResponsiveDoc';
 import StyleDoc from '@/doc/dialog/StyleDoc';
 import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
+import PTComponent from '@/doc/dialog/pt/index.vue';
 
 export default {
     data() {
@@ -68,7 +69,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };

pages/dynamicdialog/index.vue

@@ -5,6 +5,7 @@
         description="Dialogs can be created dynamically with any component as the content using a DialogService."
         :componentDocs="docs"
         :apiDocs="['DynamicDialog', 'Dialog', 'DialogService-UseDialog', 'DynamicDialogOptions']"
+        :ptTabComponent="ptComponent"
     />
 </template>
 
@@ -18,6 +19,7 @@ import ImportDoc from '@/doc/dynamicdialog/ImportDoc';
 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';
 
 export default {
     data() {
@@ -68,7 +70,8 @@ export default {
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
-            ]
+            ],
+            ptComponent: PTComponent
         };
     }
 };