From 3be7dcd5392930608db450e26f8fab4aa37bcaa9 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: Wed, 20 Sep 2023 10:49:14 +0300
Subject: [PATCH] container slot demo for Dialog and Message

---
 doc/dialog/TemplateDoc.vue  | 144 ++++++++++++++++++++++++++++++++++++
 doc/message/TemplateDoc.vue | 129 +++++++++++++++++++++++++-------
 pages/dialog/index.vue      |   6 ++
 3 files changed, 253 insertions(+), 26 deletions(-)
 create mode 100644 doc/dialog/TemplateDoc.vue

diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
new file mode 100644
index 000000000..504ecc6b1
--- /dev/null
+++ b/doc/dialog/TemplateDoc.vue
@@ -0,0 +1,144 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p><i>container</i> templating allows customizing the Dialog component.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
+            <template #container="slotProps">
+                <div class="surface-card border-round shadow-2 p-4">
+                    <div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
+                    <p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
+                    <div class="flex mb-4 flex-column lg:flex-row">
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Guests</div>
+                            <span class="text-blue-600 font-medium text-xl">4</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
+                            <div class="text-600 mb-3">Date</div>
+                            <span class="text-blue-600 font-medium text-xl">24/05/2024</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Time</div>
+                            <span class="text-blue-600 font-medium text-xl">14:30</span>
+                        </div>
+                    </div>
+                    <Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `<Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
+
+<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
+    <template #container="slotProps">
+        <div class="surface-card border-round shadow-2 p-4">
+            <div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
+            <p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
+            <div class="flex mb-4 flex-column lg:flex-row">
+                <div class="surface-50 p-3 flex-auto">
+                    <div class="text-600 mb-3">Guests</div>
+                    <span class="text-blue-600 font-medium text-xl">4</span>
+                </div>
+                <div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
+                    <div class="text-600 mb-3">Date</div>
+                    <span class="text-blue-600 font-medium text-xl">24/05/2024</span>
+                </div>
+                <div class="surface-50 p-3 flex-auto">
+                    <div class="text-600 mb-3">Time</div>
+                    <span class="text-blue-600 font-medium text-xl">14:30</span>
+                </div>
+            </div>
+            <Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
+        </div>
+    </template>
+</Dialog>`,
+                options: `<template>
+    <div class="card flex justify-content-center">
+        <Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
+            <template #container="slotProps">
+                <div class="surface-card border-round shadow-2 p-4">
+                    <div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
+                    <p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
+                    <div class="flex mb-4 flex-column lg:flex-row">
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Guests</div>
+                            <span class="text-blue-600 font-medium text-xl">4</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
+                            <div class="text-600 mb-3">Date</div>
+                            <span class="text-blue-600 font-medium text-xl">24/05/2024</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Time</div>
+                            <span class="text-blue-600 font-medium text-xl">14:30</span>
+                        </div>
+                    </div>
+                    <Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        };
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card flex justify-content-center">
+        <Button label="Reservation" icon="pi pi-external-link" @click="visible = true" />
+
+        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '40vw' }">
+            <template #container="slotProps">
+                <div class="surface-card border-round shadow-2 p-4">
+                    <div class="text-900 font-medium mb-2 text-xl">Title Placeholder</div>
+                    <p class="mt-0 mb-4 p-0 line-height-3">Nunc mi ipsum faucibus vitae aliquet nec. Lacus sed viverra tellus in hac habitasse platea dictumst.</p>
+                    <div class="flex mb-4 flex-column lg:flex-row">
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Guests</div>
+                            <span class="text-blue-600 font-medium text-xl">4</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto mx-0 my-3 lg:my-0 lg:mx-3">
+                            <div class="text-600 mb-3">Date</div>
+                            <span class="text-blue-600 font-medium text-xl">24/05/2024</span>
+                        </div>
+                        <div class="surface-50 p-3 flex-auto">
+                            <div class="text-600 mb-3">Time</div>
+                            <span class="text-blue-600 font-medium text-xl">14:30</span>
+                        </div>
+                    </div>
+                    <Button icon="pi pi-check" label="Confirm Reservation" @click="slotProps.onClose"></Button>
+                </div>
+            </template>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/message/TemplateDoc.vue b/doc/message/TemplateDoc.vue
index ebf9c64b0..c03f7fe8f 100644
--- a/doc/message/TemplateDoc.vue
+++ b/doc/message/TemplateDoc.vue
@@ -1,31 +1,53 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>Custom content inside a message is defined with the <i>default</i> slot.</p>
+        <div class="card">
+            <Message
+                :style="{
+                    border: 'solid #696cff',
+                    borderWidth: '0 0 0 6px',
+                    color: '#696cff'
+                }"
+                class="border-primary w-full justify-content-start"
+                severity="info"
+            >
+                <div class="flex align-items-center">
+                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
+                    <div class="ml-2">Always bet on Prime.</div>
+                </div>
+            </Message>
+        </div>
+        <DocSectionCode :code="code1" />
+
+        <p><i>container</i> templating allows customizing the Dialog component.</p>
+        <div class="card">
+            <Message style="border: none">
+                <template #container>
+                    <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
+                        <div class="flex align-items-start">
+                            <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
+                            <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
+                                <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
+                                <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
+                            </div>
+                        </div>
+                        <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
+                            <span>Learn More</span>
+                            <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
+                        </a>
+                    </div>
+                </template>
+            </Message>
+        </div>
+        <DocSectionCode :code="code2" />
     </DocSectionText>
-    <div class="card">
-        <Message
-            :style="{
-                border: 'solid #696cff',
-                borderWidth: '0 0 0 6px',
-                color: '#696cff'
-            }"
-            class="border-primary w-full justify-content-start"
-            severity="info"
-        >
-            <div class="flex align-items-center">
-                <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" width="20" />
-                <div class="ml-2">Always bet on Prime.</div>
-            </div>
-        </Message>
-    </div>
-    <DocSectionCode :code="code" />
 </template>
 
 <script>
 export default {
     data() {
         return {
-            code: {
+            code1: {
                 basic: `<Message
     :style="{
         border: 'solid #696cff',
@@ -57,10 +79,7 @@ export default {
             </div>
         </Message>
     </div>
-</template>
-
-<script>
-<\/script>`,
+</template>`,
                 composition: `<template>
     <div class="card">
         <Message
@@ -78,10 +97,68 @@ export default {
             </div>
         </Message>
     </div>
-</template>
-
-<script setup>
-<\/script>`
+</template>`
+            },
+            code2: {
+                basic: `<Message style="border: none">
+    <template #container>
+        <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
+            <div class="flex align-items-start">
+                <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
+                <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
+                    <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
+                    <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
+                </div>
+            </div>
+            <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
+                <span>Learn More</span>
+                <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
+            </a>
+        </div>
+    </template>
+</Message>`,
+                options: `<template>
+    <div class="card">
+        <Message style="border: none">
+            <template #container>
+                <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
+                    <div class="flex align-items-start">
+                        <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
+                        <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
+                            <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
+                            <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
+                        </div>
+                    </div>
+                    <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
+                        <span>Learn More</span>
+                        <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
+                    </a>
+                </div>
+            </template>
+        </Message>
+    </div>
+</template>`,
+                composition: `<template>
+    <div class="card">
+        <Message style="border: none">
+            <template #container>
+                <div class="flex lg:align-items-start flex-column lg:flex-row p-4 bg-blue-100 border-round border-1 border-blue-300">
+                    <div class="flex align-items-start">
+                        <i class="pi pi-check-circle text-blue-900 text-2xl mr-3"></i>
+                        <div class="mr-3 flex lg:align-items-start flex-column lg:flex-row">
+                            <div class="text-blue-900 font-medium mr-0 lg:mr-2 mb-2 lg:mb-0 line-height-3">Information</div>
+                            <p class="m-0 p-0 text-blue-700 line-height-3">Bibendum enim facilisis gravida neque convallis a cras semper.</p>
+                        </div>
+                    </div>
+                    <a v-ripple class="flex align-items-center ml-auto no-underline text-blue-900 font-medium mt-3 lg:mt-0 cursor-pointer p-ripple">
+                        <span>Learn More</span>
+                        <i class="pi pi-arrow-right text-blue-900 ml-2"></i>
+                    </a>
+                </div>
+            </template>
+        </Message>
+    </div>
+</template>`
             }
         };
     }
diff --git a/pages/dialog/index.vue b/pages/dialog/index.vue
index 1bd405b33..f2b3aa6fc 100755
--- a/pages/dialog/index.vue
+++ b/pages/dialog/index.vue
@@ -11,6 +11,7 @@ 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 TemplateDoc from '@/doc/dialog/TemplateDoc';
 import WithoutModalDoc from '@/doc/dialog/WithoutModalDoc';
 import PTComponent from '@/doc/dialog/pt/index.vue';
 import ThemingDoc from '@/doc/dialog/theming/index.vue';
@@ -44,6 +45,11 @@ export default {
                     label: 'Without Modal',
                     component: WithoutModalDoc
                 },
+                {
+                    id: 'template',
+                    label: 'Template',
+                    component: TemplateDoc
+                },
                 {
                     id: 'responsive',
                     label: 'Responsive',