Refactor #3885 - For Sidebar

api-generator/components/sidebar.js

@@ -58,6 +58,12 @@ const SidebarProps = [
         type: 'string',
         default: 'undefined',
         description: 'Icon to display in the sidebar close button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/sidebar/Sidebar.d.ts

@@ -10,6 +10,69 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SidebarPassThroughOptionType = SidebarPassThroughAttributes | ((options: SidebarPassThroughMethodOptions) => SidebarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SidebarPassThroughMethodOptions {
+    props: SidebarProps;
+    state: SidebarState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SidebarProps.pt}
+ */
+export interface SidebarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the mask's DOM element.
+     */
+    mask?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close button's DOM element.
+     */
+    closeButton?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the close icon's DOM element.
+     */
+    closeIcon?: SidebarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: SidebarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SidebarPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Sidebar component.
+ */
+export interface SidebarState {
+    /**
+     * Current container visible state as a boolean.
+     * @defaultValue false
+     */
+    containerVisible: boolean;
+}
+
 /**
  * Defines valid properties in Sidebar component.
  */
@@ -59,6 +122,11 @@ export interface SidebarProps {
      * @defaultValue false
      */
     blockScroll?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SidebarPassThroughOptions}
+     */
+    pt?: SidebarPassThroughOptions;
 }
 
 /**

components/lib/sidebar/Sidebar.vue

@@ -1,19 +1,19 @@
 <template>
     <Portal>
-        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick">
+        <div v-if="containerVisible" :ref="maskRef" :class="maskClass" @mousedown="onMaskClick" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear>
-                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="$attrs">
-                    <div :ref="headerContainerRef" class="p-sidebar-header">
-                        <div v-if="$slots.header" class="p-sidebar-header-content">
+                <div v-if="visible" :ref="containerRef" v-focustrap :class="containerClass" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
+                    <div :ref="headerContainerRef" class="p-sidebar-header" v-bind="ptm('header')">
+                        <div v-if="$slots.header" class="p-sidebar-header-content" v-bind="ptm('headerContent')">
                             <slot name="header"></slot>
                         </div>
-                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide">
+                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" class="p-sidebar-close p-sidebar-icon p-link" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')">
                             <slot name="closeicon">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]"></component>
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-sidebar-close-icon ', closeIcon]" v-bind="ptm('closeIcon')"></component>
                             </slot>
                         </button>
                     </div>
-                    <div :ref="contentRef" class="p-sidebar-content">
+                    <div :ref="contentRef" class="p-sidebar-content" v-bind="ptm('content')">
                         <slot></slot>
                     </div>
                 </div>
@@ -23,6 +23,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 import Portal from 'primevue/portal';
@@ -31,6 +32,7 @@ import { DomHandler, ZIndexUtils } from 'primevue/utils';
 
 export default {
     name: 'Sidebar',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['update:visible', 'show', 'hide', 'after-hide'],
     props: {