Refactor #3907 - For Dock

api-generator/components/dock.js

@@ -34,6 +34,12 @@ const DockProps = [
         type: 'object',
         default: 'null',
         description: "Whether to display the tooltip on items. The modifiers of tooltip can be used like an object in it. Valid keys are 'event' and 'position'."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/dock/Dock.d.ts

@@ -11,6 +11,83 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DockPassThroughOptionType = DockPassThroughAttributes | ((options: DockPassThroughMethodOptions) => DockPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DockPassThroughMethodOptions {
+    props: DockProps;
+    state: DockState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DockProps.pt}
+ */
+export interface DockPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: DockPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: DockPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DockPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Dock component.
+ */
+export interface DockState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current index as a number.
+     * @defaultvalue -3
+     */
+    currentIndex: number;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item index as a number.
+     * @defaultvalue -1
+     */
+    focusedOptionIndex: number;
+}
+
 /**
  * Defines tooltip options
  */
@@ -77,6 +154,11 @@ export interface DockProps {
      * Establishes a string value that labels the component.
      */
     'aria-label'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DockPassThroughOptions}
+     */
+    pt?: DockPassThroughOptions;
 }
 
 /**

components/lib/dock/Dock.vue

@@ -1,14 +1,16 @@
 <template>
-    <div :class="containerClass" :style="style">
-        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex"></DockSub>
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
+        <DockSub :model="model" :templates="$slots" :exact="exact" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt"></DockSub>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import DockSub from './DockSub.vue';
 
 export default {
     name: 'Dock',
+    extends: BaseComponent,
     props: {
         position: {
             type: String,

components/lib/dock/DockSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-dock-list-container">
+    <div class="p-dock-list-container" v-bind="ptm('container')">
         <ul
             ref="list"
             :id="id"
@@ -14,6 +14,7 @@
             @blur="onListBlur"
             @keydown="onListKeyDown"
             @mouseleave="onListMouseLeave"
+            v-bind="ptm('menu')"
         >
             <template v-for="(processedItem, index) of model" :key="index">
                 <li
@@ -24,8 +25,9 @@
                     :aria-disabled="disabled(processedItem)"
                     @click="onItemClick($event, processedItem)"
                     @mouseenter="onItemMouseEnter(index)"
+                    v-bind="ptm('menuitem')"
                 >
-                    <div class="p-menuitem-content">
+                    <div class="p-menuitem-content" v-bind="ptm('content')">
                         <template v-if="!templates['item']">
                             <router-link v-if="processedItem.to && !disabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="processedItem.to" custom>
                                 <a
@@ -36,16 +38,26 @@
                                     tabindex="-1"
                                     aria-hidden="true"
                                     @click="onItemActionClick($event, processedItem, navigate)"
+                                    v-bind="ptm('action')"
                                 >
                                     <template v-if="!templates['icon']">
-                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                        <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
                                     </template>
                                     <component v-else :is="templates['icon']" :item="processedItem"></component>
                                 </a>
                             </router-link>
-                            <a v-else v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }" :href="processedItem.url" :class="linkClass()" :target="processedItem.target" tabindex="-1" aria-hidden="true">
+                            <a
+                                v-else
+                                v-tooltip:[tooltipOptions]="{ value: processedItem.label, disabled: !tooltipOptions }"
+                                :href="processedItem.url"
+                                :class="linkClass()"
+                                :target="processedItem.target"
+                                tabindex="-1"
+                                aria-hidden="true"
+                                v-bind="ptm('action')"
+                            >
                                 <template v-if="!templates['icon']">
-                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]"></span>
+                                    <span v-ripple :class="['p-dock-icon', processedItem.icon]" v-bind="ptm('icon')"></span>
                                 </template>
                                 <component v-else :is="templates['icon']" :item="processedItem"></component>
                             </a>
@@ -59,12 +71,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'DockSub',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         position: {