From ceb42fdecdbcd780e8df206be0bebd6b510a09c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 28 Apr 2023 11:54:50 +0300
Subject: [PATCH] Dialog & DynamicDialog pt demos added

---
 doc/dialog/pt/PTDoc.vue          | 100 +++++++++++++++++++++++++++++++
 doc/dialog/pt/PTImage.vue        |   8 +++
 doc/dialog/pt/index.vue          |  41 +++++++++++++
 doc/dynamicdialog/pt/PTDoc.vue   |  37 ++++++++++++
 doc/dynamicdialog/pt/PTImage.vue |   8 +++
 doc/dynamicdialog/pt/index.vue   |  41 +++++++++++++
 pages/dialog/index.vue           |   6 +-
 pages/dynamicdialog/index.vue    |   5 +-
 8 files changed, 243 insertions(+), 3 deletions(-)
 create mode 100644 doc/dialog/pt/PTDoc.vue
 create mode 100644 doc/dialog/pt/PTImage.vue
 create mode 100644 doc/dialog/pt/index.vue
 create mode 100644 doc/dynamicdialog/pt/PTDoc.vue
 create mode 100644 doc/dynamicdialog/pt/PTImage.vue
 create mode 100644 doc/dynamicdialog/pt/index.vue

diff --git a/doc/dialog/pt/PTDoc.vue b/doc/dialog/pt/PTDoc.vue
new file mode 100644
index 000000000..2ab64fe65
--- /dev/null
+++ b/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>
diff --git a/doc/dialog/pt/PTImage.vue b/doc/dialog/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/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>
diff --git a/doc/dialog/pt/index.vue b/doc/dialog/pt/index.vue
new file mode 100644
index 000000000..bc6133c8d
--- /dev/null
+++ b/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>
diff --git a/doc/dynamicdialog/pt/PTDoc.vue b/doc/dynamicdialog/pt/PTDoc.vue
new file mode 100644
index 000000000..b58499063
--- /dev/null
+++ b/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>
diff --git a/doc/dynamicdialog/pt/PTImage.vue b/doc/dynamicdialog/pt/PTImage.vue
new file mode 100644
index 000000000..9ac50d6b4
--- /dev/null
+++ b/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>
diff --git a/doc/dynamicdialog/pt/index.vue b/doc/dynamicdialog/pt/index.vue
new file mode 100644
index 000000000..d801dc37a
--- /dev/null
+++ b/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>
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index 196157b19..b9b7eb288 100755
--- a/pages/dialog/index.vue
+++ b/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
         };
     }
 };
diff --git a/pages/dynamicdialog/index.vue b/pages/dynamicdialog/index.vue
index e06efc641..918ac6aff 100644
--- a/pages/dynamicdialog/index.vue
+++ b/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
         };
     }
 };