From 2f2f0451cff186ac04a87486480f569fefe0c2a6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sat, 25 May 2024 16:52:39 +0300
Subject: [PATCH] Fixed size demo, add footer sample

---
 doc/drawer/SizeDoc.vue     | 10 +++++-----
 doc/drawer/TemplateDoc.vue | 26 +++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/doc/drawer/SizeDoc.vue b/doc/drawer/SizeDoc.vue
index c6ab89bba..1053071ea 100644
--- a/doc/drawer/SizeDoc.vue
+++ b/doc/drawer/SizeDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
+        <p>Drawer dimension can be defined with <i>style</i> or <i>class</i> properties, this responsive example utilizes Tailwind.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <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.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -19,7 +19,7 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-center">
-    <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+    <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
         <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.</p>
     </Drawer>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -28,7 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <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.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -48,7 +48,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Drawer v-model:visible="visible" header="Drawer" class="w-full md:w-80 lg:w-[30rem]">
+        <Drawer v-model:visible="visible" header="Drawer" class="!w-full md:!w-80 lg:!w-[30rem]">
             <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.</p>
         </Drawer>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
diff --git a/doc/drawer/TemplateDoc.vue b/doc/drawer/TemplateDoc.vue
index 82487bb9d..e6ad80d30 100644
--- a/doc/drawer/TemplateDoc.vue
+++ b/doc/drawer/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Additional content at the header section is provided using the <i>header</i> template.</p>
+        <p>Custom content at the header and footer sections is displayed with templating.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Drawer v-model:visible="visible">
@@ -11,6 +11,12 @@
                 </div>
             </template>
             <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.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
@@ -32,6 +38,12 @@ export default {
         </div>
     </template>
     <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.</p>
+    <template #footer>
+        <div class="flex items-center gap-2">
+            <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+            <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+        </div>
+    </template>
 </Drawer>
 <Button icon="pi pi-plus" @click="visible = true" />
 `,
@@ -46,6 +58,12 @@ export default {
                 </div>
             </template>
             <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.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
@@ -72,6 +90,12 @@ export default {
                 </div>
             </template>
             <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.</p>
+            <template #footer>
+                <div class="flex items-center gap-2">
+                    <Button label="Account" icon="pi pi-user" class="flex-auto" outlined></Button>
+                    <Button label="Logout" icon="pi pi-sign-out" class="flex-auto" severity="danger" text></Button>
+                </div>
+            </template>
         </Drawer>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>