From e3b0999f56a5ed56c767c3cf1ca54a8b66615818 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 20 Sep 2024 15:48:52 +0300
Subject: [PATCH] Drawer pt viewer demo added

---
 apps/showcase/doc/drawer/pt/PTImage.vue  |  8 ----
 apps/showcase/doc/drawer/pt/PTViewer.vue | 56 ++++++++++++++++++++++++
 apps/showcase/doc/drawer/pt/index.vue    |  8 ++--
 apps/showcase/doc/toast/pt/PTViewer.vue  |  2 +-
 4 files changed, 61 insertions(+), 13 deletions(-)
 delete mode 100644 apps/showcase/doc/drawer/pt/PTImage.vue
 create mode 100644 apps/showcase/doc/drawer/pt/PTViewer.vue

diff --git a/apps/showcase/doc/drawer/pt/PTImage.vue b/apps/showcase/doc/drawer/pt/PTImage.vue
deleted file mode 100644
index 5f4489a0e..000000000
--- a/apps/showcase/doc/drawer/pt/PTImage.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<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/sidebar.jpg" />
-    </div>
-</template>
diff --git a/apps/showcase/doc/drawer/pt/PTViewer.vue b/apps/showcase/doc/drawer/pt/PTViewer.vue
new file mode 100644
index 000000000..819ed29cb
--- /dev/null
+++ b/apps/showcase/doc/drawer/pt/PTViewer.vue
@@ -0,0 +1,56 @@
+<template>
+    <DocPTViewer :docs="docs" class="!justify-start">
+        <div class="">
+            <div class="p-drawer p-component h-[450px] w-80" role="complementary" aria-modal="true" data-pc-name="drawer" data-pc-section="root">
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="firstfocusableelement"></span>
+                <div class="p-drawer-header" data-pc-section="header">
+                    <div class="p-drawer-title" data-pc-section="title">Drawer</div>
+                    <button
+                        class="p-button p-component p-button-icon-only p-button-secondary p-button-rounded p-button-text p-drawer-close-button"
+                        type="button"
+                        aria-label="Close"
+                        data-pc-name="pcclosebutton"
+                        data-p-disabled="false"
+                        data-p-severity="secondary"
+                        data-pc-group-section="iconcontainer"
+                        data-pc-extend="button"
+                        data-pc-section="root"
+                    >
+                        <TimesIcon class="p-button-icon" />
+                    </button>
+                </div>
+                <div class="p-drawer-content" data-pc-section="content">
+                    <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>
+                </div>
+                <div class="p-drawer-footer" data-pc-section="footer">Footer</div>
+                <span class="p-hidden-accessible p-hidden-focusable" tabindex="0" role="presentation" aria-hidden="true" data-p-hidden-accessible="true" data-p-hidden-focusable="true" data-pc-section="lastfocusableelement"></span>
+            </div>
+        </div>
+    </DocPTViewer>
+</template>
+
+<script>
+import { getPTOptions } from '@/components/doc/helpers';
+import TimesIcon from '@primevue/icons/times';
+import { markRaw } from 'vue';
+
+export default {
+    data() {
+        return {
+            visible: true,
+            docs: [
+                {
+                    data: getPTOptions('Drawer'),
+                    key: 'Drawer'
+                }
+            ]
+        };
+    },
+    components: {
+        TimesIcon: markRaw(TimesIcon)
+    }
+};
+</script>
diff --git a/apps/showcase/doc/drawer/pt/index.vue b/apps/showcase/doc/drawer/pt/index.vue
index 3e5778b96..fc6d7922a 100644
--- a/apps/showcase/doc/drawer/pt/index.vue
+++ b/apps/showcase/doc/drawer/pt/index.vue
@@ -11,16 +11,16 @@
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
 import { getPTOptions } from '@/components/doc/helpers';
-import PTImage from './PTImage.vue';
+import PTViewer from './PTViewer.vue';
 
 export default {
     data() {
         return {
             docs: [
                 {
-                    id: 'pt.image',
-                    label: 'Wireframe',
-                    component: PTImage
+                    id: 'pt.viewer',
+                    label: 'Viewer',
+                    component: PTViewer
                 },
                 {
                     id: 'pt.doc.drawer',
diff --git a/apps/showcase/doc/toast/pt/PTViewer.vue b/apps/showcase/doc/toast/pt/PTViewer.vue
index 315039b02..341912cbf 100644
--- a/apps/showcase/doc/toast/pt/PTViewer.vue
+++ b/apps/showcase/doc/toast/pt/PTViewer.vue
@@ -1,6 +1,6 @@
 <template>
     <DocPTViewer :docs="docs">
-        <div class="p-toast p-component" data-pc-name="toast">
+        <div class="p-toast p-component" data-pc-name="toast" data-pc-section="root">
             <div>
                 <div class="p-toast-message p-toast-message-info" data-pc-section="message">
                     <div class="p-toast-message-content" data-pc-section="messagecontent">