Refactor #3907 - For Breadcrumb

api-generator/components/breadcrumb.js

@@ -16,6 +16,12 @@ const BreadcrumbProps = [
         type: 'boolean',
         default: 'true',
         description: "Whether to apply 'router-link-active-exact' class if route exactly matches the item path."
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/breadcrumb/Breadcrumb.d.ts

@@ -11,6 +11,61 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BreadcrumbPassThroughMethodOptions {
+    props: BreadcrumbProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BreadcrumbProps.pt}
+ */
+export interface BreadcrumbPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: BreadcrumbPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator icon's DOM element.
+     */
+    separatorIcon?: BreadcrumbPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BreadcrumbPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Breadcrumb component.
  */
@@ -36,6 +91,11 @@ export interface BreadcrumbProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {BreadcrumbPassThroughOptions}
+     */
+    pt?: BreadcrumbPassThroughOptions;
 }
 
 /**

components/lib/breadcrumb/Breadcrumb.vue

@@ -1,25 +1,27 @@
 <template>
-    <nav class="p-breadcrumb p-component">
+    <nav class="p-breadcrumb p-component" v-bind="ptm('root')">
-        <ol class="p-breadcrumb-list">
+        <ol class="p-breadcrumb-list" v-bind="ptm('menu')">
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" />
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" :pt="pt" />
             <template v-for="(item, i) of model" :key="item.label">
-                <li v-if="home || i !== 0" class="p-menuitem-separator">
+                <li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
                     <slot name="separator">
-                        <ChevronRightIcon aria-hidden="true" />
+                        <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
                     </slot>
                 </li>
-                <BreadcrumbItem :item="item" :templates="$slots" :exact="exact" />
+                <BreadcrumbItem :item="item" :templates="$slots" :exact="exact" :pt="pt" />
             </template>
         </ol>
     </nav>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import ChevronRightIcon from 'primevue/icons/chevronright';
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
     name: 'Breadcrumb',
+    extends: BaseComponent,
     props: {
         model: {
             type: Array,

components/lib/breadcrumb/BreadcrumbItem.vue

@@ -1,17 +1,17 @@
 <template>
-    <li v-if="visible()" :class="containerClass()">
+    <li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
         <template v-if="!templates.item">
             <router-link v-if="item.to" v-slot="{ navigate, href, isActive, isExactActive }" :to="item.to" custom>
-                <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)">
+                <a :href="href" :class="linkClass({ isActive, isExactActive })" :aria-current="isCurrentUrl()" @click="onClick($event, navigate)" v-bind="ptm('action')">
                     <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
-                    <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
+                    <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
-                    <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+                    <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
                 </a>
             </router-link>
-            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick">
+            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-icon" />
-                <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" />
+                <span v-else-if="item.icon" :class="['p-menuitem-icon', item.icon]" v-bind="ptm('icon')" />
-                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+                <span v-if="item.label" class="p-menuitem-text" v-bind="ptm('label')">{{ label() }}</span>
             </a>
         </template>
         <component v-else :is="templates.item" :item="item"></component>
@@ -19,8 +19,11 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'BreadcrumbItem',
+    extends: BaseComponent,
     props: {
         item: null,
         templates: null,