From d515205ca8c8c753cce5a09d4d1f935eb1ff15b9 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: Thu, 27 Jul 2023 12:32:27 +0300
Subject: [PATCH] ConfirmDialog, ConfirmPopup, Dialog unstyled demo updates

---
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/confirmdialog/theming/UnstyledDoc.vue     | 63 +++++++++++++++++++
 doc/confirmdialog/theming/index.vue           | 33 ++++++++++
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/confirmpopup/theming/UnstyledDoc.vue      | 63 +++++++++++++++++++
 doc/confirmpopup/theming/index.vue            | 33 ++++++++++
 .../{StyleDoc.vue => theming/StyledDoc.vue}   |  0
 doc/dialog/theming/UnstyledDoc.vue            | 36 +++++++++++
 doc/dialog/theming/index.vue                  | 33 ++++++++++
 pages/confirmdialog/index.vue                 | 11 ++--
 pages/confirmpopup/index.vue                  | 11 ++--
 pages/dialog/index.vue                        | 12 ++--
 12 files changed, 273 insertions(+), 22 deletions(-)
 rename doc/confirmdialog/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/confirmdialog/theming/UnstyledDoc.vue
 create mode 100644 doc/confirmdialog/theming/index.vue
 rename doc/confirmpopup/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/confirmpopup/theming/UnstyledDoc.vue
 create mode 100644 doc/confirmpopup/theming/index.vue
 rename doc/dialog/{StyleDoc.vue => theming/StyledDoc.vue} (100%)
 create mode 100644 doc/dialog/theming/UnstyledDoc.vue
 create mode 100644 doc/dialog/theming/index.vue

diff --git a/doc/confirmdialog/StyleDoc.vue b/doc/confirmdialog/theming/StyledDoc.vue
similarity index 100%
rename from doc/confirmdialog/StyleDoc.vue
rename to doc/confirmdialog/theming/StyledDoc.vue
diff --git a/doc/confirmdialog/theming/UnstyledDoc.vue b/doc/confirmdialog/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..facdb0cad
--- /dev/null
+++ b/doc/confirmdialog/theming/UnstyledDoc.vue
@@ -0,0 +1,63 @@
+<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>
+    <Toast />
+    <ConfirmDialog></ConfirmDialog>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = () => {
+    confirm.require({
+        message: 'Are you sure you want to proceed?',
+        header: 'Confirmation',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = () => {
+    confirm.require({
+        message: 'Do you want to delete this record?',
+        header: 'Delete Confirmation',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/confirmdialog/theming/index.vue b/doc/confirmdialog/theming/index.vue
new file mode 100644
index 000000000..c0be5f500
--- /dev/null
+++ b/doc/confirmdialog/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmDialog 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>
diff --git a/doc/confirmpopup/StyleDoc.vue b/doc/confirmpopup/theming/StyledDoc.vue
similarity index 100%
rename from doc/confirmpopup/StyleDoc.vue
rename to doc/confirmpopup/theming/StyledDoc.vue
diff --git a/doc/confirmpopup/theming/UnstyledDoc.vue b/doc/confirmpopup/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..6b7fc4ed3
--- /dev/null
+++ b/doc/confirmpopup/theming/UnstyledDoc.vue
@@ -0,0 +1,63 @@
+<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>
+    <Toast />
+    <ConfirmPopup></ConfirmPopup>
+    <div class="card flex flex-wrap gap-2 justify-center">
+        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
+    </div>
+</template>
+
+<script setup>
+import { useConfirm } from "primevue/useconfirm";
+import { useToast } from "primevue/usetoast";
+
+const confirm = useConfirm();
+const toast = useToast();
+
+const confirm1 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Are you sure you want to proceed?',
+        icon: 'pi pi-exclamation-triangle',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+
+const confirm2 = (event) => {
+    confirm.require({
+        target: event.currentTarget,
+        message: 'Do you want to delete this record?',
+        icon: 'pi pi-info-circle',
+        acceptClass: 'p-button-danger',
+        accept: () => {
+            toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
+        },
+        reject: () => {
+            toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
+        }
+    });
+};
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/confirmpopup/theming/index.vue b/doc/confirmpopup/theming/index.vue
new file mode 100644
index 000000000..5aee86f44
--- /dev/null
+++ b/doc/confirmpopup/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>ConfirmPopup 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>
diff --git a/doc/dialog/StyleDoc.vue b/doc/dialog/theming/StyledDoc.vue
similarity index 100%
rename from doc/dialog/StyleDoc.vue
rename to doc/dialog/theming/StyledDoc.vue
diff --git a/doc/dialog/theming/UnstyledDoc.vue b/doc/dialog/theming/UnstyledDoc.vue
new file mode 100644
index 000000000..247fa2e6c
--- /dev/null
+++ b/doc/dialog/theming/UnstyledDoc.vue
@@ -0,0 +1,36 @@
+<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 {
+            visible: false,
+            code: {
+                composition: `
+<template>
+    <div class="card flex justify-center">
+        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }">
+            <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/theming/index.vue b/doc/dialog/theming/index.vue
new file mode 100644
index 000000000..96292b7f7
--- /dev/null
+++ b/doc/dialog/theming/index.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>Dialog 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>
diff --git a/pages/confirmdialog/index.vue b/pages/confirmdialog/index.vue
index c375443b3..b7e2ed136 100644
--- a/pages/confirmdialog/index.vue
+++ b/pages/confirmdialog/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['ConfirmDialog', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -15,9 +16,9 @@ import BasicDoc from '@/doc/confirmdialog/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmdialog/ConfirmationServiceDoc.vue';
 import ImportDoc from '@/doc/confirmdialog/ImportDoc.vue';
 import PositionDoc from '@/doc/confirmdialog/PositionDoc.vue';
-import StyleDoc from '@/doc/confirmdialog/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmdialog/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmdialog/pt/index.vue';
+import ThemingDoc from '@/doc/confirmdialog/theming/index.vue';
 
 export default {
     data() {
@@ -48,18 +49,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
         };
     }
 };
diff --git a/pages/confirmpopup/index.vue b/pages/confirmpopup/index.vue
index 1d061ea34..a152e9765 100644
--- a/pages/confirmpopup/index.vue
+++ b/pages/confirmpopup/index.vue
@@ -6,6 +6,7 @@
         :componentDocs="docs"
         :apiDocs="['ConfirmPopup', 'ConfirmationService-UseConfirm', 'ConfirmationOptions']"
         :ptTabComponent="ptComponent"
+        :themingDocs="themingDoc"
     />
 </template>
 
@@ -14,9 +15,9 @@ import AccessibilityDoc from '@/doc/confirmpopup/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/confirmpopup/BasicDoc.vue';
 import ConfirmationServiceDoc from '@/doc/confirmpopup/ConfirmationServiceDoc.vue';
 import ImportDoc from '@/doc/confirmpopup/ImportDoc.vue';
-import StyleDoc from '@/doc/confirmpopup/StyleDoc.vue';
 import TemplateDoc from '@/doc/confirmpopup/TemplateDoc.vue';
 import PTComponent from '@/doc/confirmpopup/pt/index.vue';
+import ThemingDoc from '@/doc/confirmpopup/theming/index.vue';
 
 export default {
     data() {
@@ -42,18 +43,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
         };
     }
 };
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index b9b7eb288..1bd405b33 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']" :ptTabComponent="ptComponent" />
+    <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" :themingDocs="themingDoc" />
 </template>
 
 <script>
@@ -11,9 +11,9 @@ import LongContentDoc from '@/doc/dialog/LongContentDoc';
 import MaximizableDoc from '@/doc/dialog/MaximizableDoc';
 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';
+import ThemingDoc from '@/doc/dialog/theming/index.vue';
 
 export default {
     data() {
@@ -59,18 +59,14 @@ export default {
                     label: 'Maximizable',
                     component: MaximizableDoc
                 },
-                {
-                    id: 'style',
-                    label: 'Style',
-                    component: StyleDoc
-                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
                     component: AccessibilityDoc
                 }
             ],
-            ptComponent: PTComponent
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
         };
     }
 };