From c2c7c9362ddbbc083cd7a974633880ca5c780cb0 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 8 Apr 2024 18:26:46 +0300
Subject: [PATCH] Use drawer convention

---
 components/lib/sidebar/Sidebar.vue            |  2 +-
 components/lib/sidebar/style/SidebarStyle.js  | 20 ++---
 .../lib/themes/primeone/base/sidebar/index.js | 84 +++++++++----------
 3 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index f1052fd59..0ea45a489 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal>
         <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
-            <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
+            <transition name="p-drawer" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" v-bind="ptmi('root')">
                     <slot v-if="$slots.container" name="container" :onClose="hide" :closeCallback="hide"></slot>
                     <template v-else>
diff --git a/components/lib/sidebar/style/SidebarStyle.js b/components/lib/sidebar/style/SidebarStyle.js
index 3ccb4b2e9..f997688a8 100644
--- a/components/lib/sidebar/style/SidebarStyle.js
+++ b/components/lib/sidebar/style/SidebarStyle.js
@@ -19,26 +19,26 @@ const classes = {
         const pos = positions.find((item) => item === props.position);
 
         return [
-            'p-sidebar-mask',
+            'p-drawer-mask',
             {
                 'p-component-overlay p-component-overlay-enter': props.modal,
-                'p-sidebar-open': instance.containerVisible,
-                'p-sidebar-full': instance.fullScreen
+                'p-drawer-open': instance.containerVisible,
+                'p-drawer-full': instance.fullScreen
             },
-            pos ? `p-sidebar-${pos}` : ''
+            pos ? `p-drawer-${pos}` : ''
         ];
     },
     root: ({ instance }) => [
-        'p-sidebar p-component',
+        'p-drawer p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false,
-            'p-sidebar-full': instance.fullScreen
+            'p-drawer-full': instance.fullScreen
         }
     ],
-    header: 'p-sidebar-header',
-    title: 'p-sidebar-title',
-    closeButton: 'p-sidebar-close-button',
-    content: 'p-sidebar-content'
+    header: 'p-drawer-header',
+    title: 'p-drawer-title',
+    closeButton: 'p-drawer-close-button',
+    content: 'p-drawer-content'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/themes/primeone/base/sidebar/index.js b/components/lib/themes/primeone/base/sidebar/index.js
index ed85d28a0..f6c748161 100644
--- a/components/lib/themes/primeone/base/sidebar/index.js
+++ b/components/lib/themes/primeone/base/sidebar/index.js
@@ -1,6 +1,6 @@
 export default {
     css: ({ dt }) => `
-.p-sidebar {
+.p-drawer {
     display: flex;
     flex-direction: column;
     pointer-events: auto;
@@ -13,13 +13,13 @@ export default {
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
 }
 
-.p-sidebar-content {
+.p-drawer-content {
     overflow-y: auto;
     flex-grow: 1;
     padding: 0 1.125rem 1.125rem 1.125rem;
 }
 
-.p-sidebar-header {
+.p-drawer-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -27,12 +27,12 @@ export default {
     padding: 1.125rem;
 }
 
-.p-sidebar-title {
+.p-drawer-title {
     font-weight: 600;
     font-size: 1.25rem;
 }
 
-.p-sidebar-full .p-sidebar {
+.p-drawer-full .p-drawer {
     transition: none;
     transform: none;
     width: 100vw !important;
@@ -43,108 +43,108 @@ export default {
     border-width: 1px;
 }
 
-.p-sidebar-left .p-sidebar-enter-from,
-.p-sidebar-left .p-sidebar-leave-to {
+.p-drawer-left .p-drawer-enter-from,
+.p-drawer-left .p-drawer-leave-to {
     transform: translateX(-100%);
 }
 
-.p-sidebar-right .p-sidebar-enter-from,
-.p-sidebar-right .p-sidebar-leave-to {
+.p-drawer-right .p-drawer-enter-from,
+.p-drawer-right .p-drawer-leave-to {
     transform: translateX(100%);
 }
 
-.p-sidebar-top .p-sidebar-enter-from,
-.p-sidebar-top .p-sidebar-leave-to {
+.p-drawer-top .p-drawer-enter-from,
+.p-drawer-top .p-drawer-leave-to {
     transform: translateY(-100%);
 }
 
-.p-sidebar-bottom .p-sidebar-enter-from,
-.p-sidebar-bottom .p-sidebar-leave-to {
+.p-drawer-bottom .p-drawer-enter-from,
+.p-drawer-bottom .p-drawer-leave-to {
     transform: translateY(100%);
 }
 
-.p-sidebar-full .p-sidebar-enter-from,
-.p-sidebar-full .p-sidebar-leave-to {
+.p-drawer-full .p-drawer-enter-from,
+.p-drawer-full .p-drawer-leave-to {
     opacity: 0;
 }
 
-.p-sidebar-full .p-sidebar-enter-active,
-.p-sidebar-full .p-sidebar-leave-active {
+.p-drawer-full .p-drawer-enter-active,
+.p-drawer-full .p-drawer-leave-active {
     transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.p-sidebar-left .p-sidebar {
+.p-drawer-left .p-drawer {
     width: 20rem;
     height: 100%;
     border-right-width: 1px;
 }
 
-.p-sidebar-right .p-sidebar {
+.p-drawer-right .p-drawer {
     width: 20rem;
     height: 100%;
     border-left-width: 1px;
 }
 
-.p-sidebar-top .p-sidebar {
+.p-drawer-top .p-drawer {
     height: 10rem;
     width: 100%;
     border-bottom-width: 1px;
 }
 
-.p-sidebar-bottom .p-sidebar {
+.p-drawer-bottom .p-drawer {
     height: 10rem;
     width: 100%;
     border-top-width: 1px;
 }
 
-.p-sidebar-left .p-sidebar-sm,
-.p-sidebar-right .p-sidebar-sm {
+.p-drawer-left .p-drawer-sm,
+.p-drawer-right .p-drawer-sm {
     width: 20rem;
 }
 
-.p-sidebar-left .p-sidebar-md,
-.p-sidebar-right .p-sidebar-md {
+.p-drawer-left .p-drawer-md,
+.p-drawer-right .p-drawer-md {
     width: 40rem;
 }
 
-.p-sidebar-left .p-sidebar-lg,
-.p-sidebar-right .p-sidebar-lg {
+.p-drawer-left .p-drawer-lg,
+.p-drawer-right .p-drawer-lg {
     width: 60rem;
 }
 
-.p-sidebar-top .p-sidebar-sm,
-.p-sidebar-bottom .p-sidebar-sm {
+.p-drawer-top .p-drawer-sm,
+.p-drawer-bottom .p-drawer-sm {
     height: 10rem;
 }
 
-.p-sidebar-top .p-sidebar-md,
-.p-sidebar-bottom .p-sidebar-md {
+.p-drawer-top .p-drawer-md,
+.p-drawer-bottom .p-drawer-md {
     height: 20rem;
 }
 
-.p-sidebar-top .p-sidebar-lg,
-.p-sidebar-bottom .p-sidebar-lg {
+.p-drawer-top .p-drawer-lg,
+.p-drawer-bottom .p-drawer-lg {
     height: 30rem;
 }
 
-.p-sidebar-left .p-sidebar-content,
-.p-sidebar-right .p-sidebar-content,
-.p-sidebar-top .p-sidebar-content,
-.p-sidebar-bottom .p-sidebar-content {
+.p-drawer-left .p-drawer-content,
+.p-drawer-right .p-drawer-content,
+.p-drawer-top .p-drawer-content,
+.p-drawer-bottom .p-drawer-content {
     width: 100%;
     height: 100%;
 }
 
 @media screen and (max-width: 64em) {
-    .p-sidebar-left .p-sidebar-lg,
-    .p-sidebar-left .p-sidebar-md,
-    .p-sidebar-right .p-sidebar-lg,
-    .p-sidebar-right .p-sidebar-md {
+    .p-drawer-left .p-drawer-lg,
+    .p-drawer-left .p-drawer-md,
+    .p-drawer-right .p-drawer-lg,
+    .p-drawer-right .p-drawer-md {
         width: 20rem;
     }
 }
 
-.p-sidebar-open {
+.p-drawer-open {
     display: flex;
 }
 `