primevue 3.26.1 → 3.28.0

package/blockui/blockui.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),o={name:"BlockUI",emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let t="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(t+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",t),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",t),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&e.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){e.ZIndexUtils.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const n=["aria-busy"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===o&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),o.render=function(e,o,s,i,l,a){return t.openBlock(),t.createElementBlock("div",{ref:"container",class:"p-blockui-container","aria-busy":l.isBlocked},[t.renderSlot(e.$slots,"default")],8,n)},module.exports=o;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/utils"),o=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"BlockUI",extends:n(e).default,emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let e="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(e+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",e),document.body.appendChild(this.mask),t.DomHandler.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",e),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&t.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){t.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){t.ZIndexUtils.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),t.DomHandler.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const s=["aria-busy"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),i.render=function(e,t,n,i,l,a){return o.openBlock(),o.createElementBlock("div",o.mergeProps({ref:"container",class:"p-blockui-container","aria-busy":l.isBlocked},e.ptm("root")),[o.renderSlot(e.$slots,"default")],16,s)},module.exports=i;

package/blockui/blockui.esm.js

@@ -1,8 +1,10 @@
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler, ZIndexUtils } from 'primevue/utils';
-import { openBlock, createElementBlock, renderSlot } from 'vue';
+import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 
 var script = {
     name: 'BlockUI',
+    extends: BaseComponent,
     emits: ['block', 'unblock'],
     props: {
         blocked: {
@@ -88,13 +90,13 @@ var script = {
 const _hoisted_1 = ["aria-busy"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
+  return (openBlock(), createElementBlock("div", mergeProps({
     ref: "container",
     class: "p-blockui-container",
     "aria-busy": $data.isBlocked
-  }, [
+  }, _ctx.ptm('root')), [
     renderSlot(_ctx.$slots, "default")
-  ], 8, _hoisted_1))
+  ], 16, _hoisted_1))
 }
 
 function styleInject(css, ref) {

package/blockui/blockui.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e,ZIndexUtils as t}from"primevue/utils";import{openBlock as o,createElementBlock as n,renderSlot as i}from"vue";var s={name:"BlockUI",emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let o="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(o+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",o),document.body.appendChild(this.mask),e.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",o),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&t.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){e.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){t.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),e.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const l=["aria-busy"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),s.render=function(e,t,s,a,d,c){return o(),n("div",{ref:"container",class:"p-blockui-container","aria-busy":d.isBlocked},[i(e.$slots,"default")],8,l)};export{s as default};
+import e from"primevue/basecomponent";import{DomHandler as t,ZIndexUtils as o}from"primevue/utils";import{openBlock as n,createElementBlock as i,mergeProps as s,renderSlot as a}from"vue";var l={name:"BlockUI",extends:e,emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let e="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(e+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",e),document.body.appendChild(this.mask),t.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",e),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&o.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){t.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){o.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),t.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const d=["aria-busy"];!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),l.render=function(e,t,o,l,c,m){return n(),i("div",s({ref:"container",class:"p-blockui-container","aria-busy":c.isBlocked},e.ptm("root")),[a(e.$slots,"default")],16,d)};export{l as default};

package/blockui/blockui.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.blockui = (function (utils, vue) {
+this.primevue.blockui = (function (BaseComponent, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'BlockUI',
+        extends: BaseComponent__default["default"],
         emits: ['block', 'unblock'],
         props: {
             blocked: {
@@ -89,13 +94,13 @@ this.primevue.blockui = (function (utils, vue) {
     const _hoisted_1 = ["aria-busy"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
         class: "p-blockui-container",
         "aria-busy": $data.isBlocked
-      }, [
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default")
-      ], 8, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -132,4 +137,4 @@ this.primevue.blockui = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.basecomponent, primevue.utils, Vue);

package/blockui/blockui.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.blockui=function(e,t){"use strict";var o={name:"BlockUI",emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let t="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(t+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",t),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",t),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&e.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){e.ZIndexUtils.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const n=["aria-busy"];return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),o.render=function(e,o,i,s,l,a){return t.openBlock(),t.createElementBlock("div",{ref:"container",class:"p-blockui-container","aria-busy":l.isBlocked},[t.renderSlot(e.$slots,"default")],8,n)},o}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.blockui=function(e,t,o){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"BlockUI",extends:n(e).default,emits:["block","unblock"],props:{blocked:{type:Boolean,default:!1},fullScreen:{type:Boolean,default:!1},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0}},mask:null,data:()=>({isBlocked:!1}),watch:{blocked(e){!0===e?this.block():this.unblock()}},mounted(){this.blocked&&this.block()},methods:{block(){let e="p-blockui p-component-overlay p-component-overlay-enter";this.fullScreen?(e+=" p-blockui-document",this.mask=document.createElement("div"),this.mask.setAttribute("class",e),document.body.appendChild(this.mask),t.DomHandler.addClass(document.body,"p-overflow-hidden"),document.activeElement.blur()):(this.mask=document.createElement("div"),this.mask.setAttribute("class",e),this.$refs.container.appendChild(this.mask)),this.autoZIndex&&t.ZIndexUtils.set("modal",this.mask,this.baseZIndex+this.$primevue.config.zIndex.modal),this.isBlocked=!0,this.$emit("block")},unblock(){t.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.removeMask()}))},removeMask(){t.ZIndexUtils.clear(this.mask),this.fullScreen?(document.body.removeChild(this.mask),t.DomHandler.removeClass(document.body,"p-overflow-hidden")):this.$refs.container.removeChild(this.mask),this.isBlocked=!1,this.$emit("unblock")}}};const s=["aria-busy"];return function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===o&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-blockui-container {\n    position: relative;\n}\n.p-blockui {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n}\n.p-blockui.p-component-overlay {\n    position: absolute;\n}\n.p-blockui-document.p-component-overlay {\n    position: fixed;\n}\n"),i.render=function(e,t,n,i,l,a){return o.openBlock(),o.createElementBlock("div",o.mergeProps({ref:"container",class:"p-blockui-container","aria-busy":l.isBlocked},e.ptm("root")),[o.renderSlot(e.$slots,"default")],16,s)},i}(primevue.basecomponent,primevue.utils,Vue);

package/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;
 }
 
 /**
@@ -52,6 +112,24 @@ export interface BreadcrumbSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom separator template.
+     */
+    separator(): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

package/breadcrumb/Breadcrumb.vue

@@ -1,22 +1,27 @@
 <template>
-    <nav class="p-breadcrumb p-component">
-        <ol class="p-breadcrumb-list">
-            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :template="$slots.item" :exact="exact" />
+    <nav class="p-breadcrumb p-component" v-bind="ptm('root')">
+        <ol class="p-breadcrumb-list" v-bind="ptm('menu')">
+            <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">
-                    <span class="pi pi-chevron-right" aria-hidden="true"></span>
+                <li v-if="home || i !== 0" class="p-menuitem-separator" v-bind="ptm('separator')">
+                    <slot name="separator">
+                        <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
+                    </slot>
                 </li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
+                <BreadcrumbItem :item="item" :index="i" :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,
@@ -32,7 +37,8 @@ export default {
         }
     },
     components: {
-        BreadcrumbItem: BreadcrumbItem
+        BreadcrumbItem: BreadcrumbItem,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>

package/breadcrumb/BreadcrumbItem.vue

@@ -1,28 +1,34 @@
 <template>
-    <li v-if="visible()" :class="containerClass()">
-        <template v-if="!template">
+    <li v-if="visible()" :class="containerClass()" v-bind="ptm('menuitem')">
+        <template v-if="!templates || !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)">
-                    <span v-if="item.icon" :class="iconClass"></span>
-                    <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+                <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]" v-bind="ptm('icon')" />
+                    <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">
-                <span v-if="item.icon" :class="iconClass"></span>
-                <span v-if="item.label" class="p-menuitem-text">{{ label() }}</span>
+            <a v-else :href="item.url || '#'" :class="linkClass()" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('action')">
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" class="p-menuitem-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" v-bind="ptm('label')">{{ label() }}</span>
             </a>
         </template>
-        <component v-else :is="template" :item="item"></component>
+        <component v-else :is="templates.item" :item="item"></component>
     </li>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'BreadcrumbItem',
+    extends: BaseComponent,
     props: {
         item: null,
-        template: null,
-        exact: null
+        templates: null,
+        exact: null,
+        index: null
     },
     methods: {
         onClick(event, navigate) {
@@ -64,11 +70,6 @@ export default {
 
             return to === lastPath || url === lastPath ? 'page' : undefined;
         }
-    },
-    computed: {
-        iconClass() {
-            return ['p-menuitem-icon', this.item.icon];
-        }
     }
 };
 </script>

package/breadcrumb/breadcrumb.cjs.js

@@ -1,13 +1,22 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var ChevronRightIcon = require('primevue/icons/chevronright');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
+
 var script$1 = {
     name: 'BreadcrumbItem',
+    extends: BaseComponent__default["default"],
     props: {
         item: null,
-        template: null,
-        exact: null
+        templates: null,
+        exact: null,
+        index: null
     },
     methods: {
         onClick(event, navigate) {
@@ -49,34 +58,21 @@ var script$1 = {
 
             return to === lastPath || url === lastPath ? 'page' : undefined;
         }
-    },
-    computed: {
-        iconClass() {
-            return ['p-menuitem-icon', this.item.icon];
-        }
     }
 };
 
-const _hoisted_1$1 = ["href", "aria-current", "onClick"];
-const _hoisted_2$1 = {
-  key: 1,
-  class: "p-menuitem-text"
-};
-const _hoisted_3$1 = ["href", "target", "aria-current"];
-const _hoisted_4$1 = {
-  key: 1,
-  class: "p-menuitem-text"
-};
+const _hoisted_1 = ["href", "aria-current", "onClick"];
+const _hoisted_2 = ["href", "target", "aria-current"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_router_link = vue.resolveComponent("router-link");
 
   return ($options.visible())
-    ? (vue.openBlock(), vue.createElementBlock("li", {
+    ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
         key: 0,
-        class: vue.normalizeClass($options.containerClass())
-      }, [
-        (!$props.template)
+        class: $options.containerClass()
+      }, _ctx.ptm('menuitem')), [
+        (!$props.templates || !$props.templates.item)
           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               ($props.item.to)
                 ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -85,49 +81,67 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     custom: ""
                   }, {
                     default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                      vue.createElementVNode("a", {
+                      vue.createElementVNode("a", vue.mergeProps({
                         href: href,
-                        class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                        class: $options.linkClass({ isActive, isExactActive }),
                         "aria-current": $options.isCurrentUrl(),
                         onClick: $event => ($options.onClick($event, navigate))
-                      }, [
-                        ($props.item.icon)
-                          ? (vue.openBlock(), vue.createElementBlock("span", {
+                      }, _ctx.ptm('action')), [
+                        ($props.templates.itemicon)
+                          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                               key: 0,
-                              class: vue.normalizeClass($options.iconClass)
-                            }, null, 2))
-                          : vue.createCommentVNode("", true),
+                              item: $props.item,
+                              class: "p-menuitem-icon"
+                            }, null, 8, ["item"]))
+                          : ($props.item.icon)
+                            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                key: 1,
+                                class: ['p-menuitem-icon', $props.item.icon]
+                              }, _ctx.ptm('icon')), null, 16))
+                            : vue.createCommentVNode("", true),
                         ($props.item.label)
-                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1))
+                          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                              key: 2,
+                              class: "p-menuitem-text"
+                            }, _ctx.ptm('label')), vue.toDisplayString($options.label()), 17))
                           : vue.createCommentVNode("", true)
-                      ], 10, _hoisted_1$1)
+                      ], 16, _hoisted_1)
                     ]),
                     _: 1
                   }, 8, ["to"]))
-                : (vue.openBlock(), vue.createElementBlock("a", {
+                : (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                     key: 1,
                     href: $props.item.url || '#',
-                    class: vue.normalizeClass($options.linkClass()),
+                    class: $options.linkClass(),
                     target: $props.item.target,
                     "aria-current": $options.isCurrentUrl(),
                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args)))
-                  }, [
-                    ($props.item.icon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                  }, _ctx.ptm('action')), [
+                    ($props.templates && $props.templates.itemicon)
+                      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                           key: 0,
-                          class: vue.normalizeClass($options.iconClass)
-                        }, null, 2))
-                      : vue.createCommentVNode("", true),
+                          item: $props.item,
+                          class: "p-menuitem-icon"
+                        }, null, 8, ["item"]))
+                      : ($props.item.icon)
+                        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                            key: 1,
+                            class: ['p-menuitem-icon', $props.item.icon]
+                          }, _ctx.ptm('icon')), null, 16))
+                        : vue.createCommentVNode("", true),
                     ($props.item.label)
-                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.label()), 1))
+                      ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                          key: 2,
+                          class: "p-menuitem-text"
+                        }, _ctx.ptm('label')), vue.toDisplayString($options.label()), 17))
                       : vue.createCommentVNode("", true)
-                  ], 10, _hoisted_3$1))
+                  ], 16, _hoisted_2))
             ], 64))
-          : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+          : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
               key: 1,
               item: $props.item
             }, null, 8, ["item"]))
-      ], 2))
+      ], 16))
     : vue.createCommentVNode("", true)
 }
 
@@ -135,6 +149,7 @@ script$1.render = render$1;
 
 var script = {
     name: 'Breadcrumb',
+    extends: BaseComponent__default["default"],
     props: {
         model: {
             type: Array,
@@ -150,54 +165,52 @@ var script = {
         }
     },
     components: {
-        BreadcrumbItem: script$1
+        BreadcrumbItem: script$1,
+        ChevronRightIcon: ChevronRightIcon__default["default"]
     }
 };
 
-const _hoisted_1 = { class: "p-breadcrumb p-component" };
-const _hoisted_2 = { class: "p-breadcrumb-list" };
-const _hoisted_3 = {
-  key: 0,
-  class: "p-menuitem-separator"
-};
-const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("span", {
-  class: "pi pi-chevron-right",
-  "aria-hidden": "true"
-}, null, -1);
-const _hoisted_5 = [
-  _hoisted_4
-];
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_BreadcrumbItem = vue.resolveComponent("BreadcrumbItem");
+  const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
 
-  return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
-    vue.createElementVNode("ol", _hoisted_2, [
+  return (vue.openBlock(), vue.createElementBlock("nav", vue.mergeProps({ class: "p-breadcrumb p-component" }, _ctx.ptm('root')), [
+    vue.createElementVNode("ol", vue.mergeProps({ class: "p-breadcrumb-list" }, _ctx.ptm('menu')), [
       ($props.home)
         ? (vue.openBlock(), vue.createBlock(_component_BreadcrumbItem, {
             key: 0,
             item: $props.home,
             class: "p-breadcrumb-home",
-            template: _ctx.$slots.item,
-            exact: $props.exact
-          }, null, 8, ["item", "template", "exact"]))
+            templates: _ctx.$slots,
+            exact: $props.exact,
+            pt: _ctx.pt
+          }, null, 8, ["item", "templates", "exact", "pt"]))
         : vue.createCommentVNode("", true),
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: item.label
         }, [
           ($props.home || i !== 0)
-            ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3, _hoisted_5))
+            ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                key: 0,
+                class: "p-menuitem-separator"
+              }, _ctx.ptm('separator')), [
+                vue.renderSlot(_ctx.$slots, "separator", {}, () => [
+                  vue.createVNode(_component_ChevronRightIcon, vue.mergeProps({ "aria-hidden": "true" }, _ctx.ptm('separatorIcon')), null, 16)
+                ])
+              ], 16))
             : vue.createCommentVNode("", true),
           vue.createVNode(_component_BreadcrumbItem, {
             item: item,
-            template: _ctx.$slots.item,
-            exact: $props.exact
-          }, null, 8, ["item", "template", "exact"])
+            index: i,
+            templates: _ctx.$slots,
+            exact: $props.exact,
+            pt: _ctx.pt
+          }, null, 8, ["item", "index", "templates", "exact", "pt"])
         ], 64))
       }), 128))
-    ])
-  ]))
+    ], 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/breadcrumb/breadcrumb.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),t={name:"BreadcrumbItem",props:{item:null,template:null,exact:null},methods:{onClick(e,t){this.item.command&&this.item.command({originalEvent:e,item:this.item}),this.item.to&&t&&t(e)},containerClass(){return["p-menuitem",{"p-disabled":this.disabled()},this.item.class]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label},isCurrentUrl(){const{to:e,url:t}=this.item;let n=this.$router?this.$router.currentRoute.path:"";return e===n||t===n?"page":void 0}},computed:{iconClass(){return["p-menuitem-icon",this.item.icon]}}};const n=["href","aria-current","onClick"],l={key:1,class:"p-menuitem-text"},i=["href","target","aria-current"],a={key:1,class:"p-menuitem-text"};t.render=function(t,r,o,c,m,s){const p=e.resolveComponent("router-link");return s.visible()?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(s.containerClass())},[o.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.template),{key:1,item:o.item},null,8,["item"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o.item.to?(e.openBlock(),e.createBlock(p,{key:0,to:o.item.to,custom:""},{default:e.withCtx((({navigate:t,href:i,isActive:a,isExactActive:r})=>[e.createElementVNode("a",{href:i,class:e.normalizeClass(s.linkClass({isActive:a,isExactActive:r})),"aria-current":s.isCurrentUrl(),onClick:e=>s.onClick(e,t)},[o.item.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(s.iconClass)},null,2)):e.createCommentVNode("",!0),o.item.label?(e.openBlock(),e.createElementBlock("span",l,e.toDisplayString(s.label()),1)):e.createCommentVNode("",!0)],10,n)])),_:1},8,["to"])):(e.openBlock(),e.createElementBlock("a",{key:1,href:o.item.url||"#",class:e.normalizeClass(s.linkClass()),target:o.item.target,"aria-current":s.isCurrentUrl(),onClick:r[0]||(r[0]=(...e)=>s.onClick&&s.onClick(...e))},[o.item.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(s.iconClass)},null,2)):e.createCommentVNode("",!0),o.item.label?(e.openBlock(),e.createElementBlock("span",a,e.toDisplayString(s.label()),1)):e.createCommentVNode("",!0)],10,i))],64))],2)):e.createCommentVNode("",!0)};var r={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:t}};const o={class:"p-breadcrumb p-component"},c={class:"p-breadcrumb-list"},m={key:0,class:"p-menuitem-separator"},s=[e.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-breadcrumb {\n    overflow-x: auto;\n}\n.p-breadcrumb .p-breadcrumb-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n}\n.p-breadcrumb .p-menuitem-text {\n    line-height: 1;\n}\n.p-breadcrumb .p-menuitem-link {\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb .p-menuitem-separator {\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb::-webkit-scrollbar {\n    display: none;\n}\n"),r.render=function(t,n,l,i,a,r){const p=e.resolveComponent("BreadcrumbItem");return e.openBlock(),e.createElementBlock("nav",o,[e.createElementVNode("ol",c,[l.home?(e.openBlock(),e.createBlock(p,{key:0,item:l.home,class:"p-breadcrumb-home",template:t.$slots.item,exact:l.exact},null,8,["item","template","exact"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,((n,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n.label},[l.home||0!==i?(e.openBlock(),e.createElementBlock("li",m,s)):e.createCommentVNode("",!0),e.createVNode(p,{item:n,template:t.$slots.item,exact:l.exact},null,8,["item","template","exact"])],64)))),128))])])},module.exports=r;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/icons/chevronright"),n=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(e),o=l(t),r={name:"BreadcrumbItem",extends:i.default,props:{item:null,templates:null,exact:null,index:null},methods:{onClick(e,t){this.item.command&&this.item.command({originalEvent:e,item:this.item}),this.item.to&&t&&t(e)},containerClass(){return["p-menuitem",{"p-disabled":this.disabled()},this.item.class]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label},isCurrentUrl(){const{to:e,url:t}=this.item;let n=this.$router?this.$router.currentRoute.path:"";return e===n||t===n?"page":void 0}}};const m=["href","aria-current","onClick"],a=["href","target","aria-current"];r.render=function(e,t,l,i,o,r){const c=n.resolveComponent("router-link");return r.visible()?(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:0,class:r.containerClass()},e.ptm("menuitem")),[l.templates&&l.templates.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.templates.item),{key:1,item:l.item},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[l.item.to?(n.openBlock(),n.createBlock(c,{key:0,to:l.item.to,custom:""},{default:n.withCtx((({navigate:t,href:i,isActive:o,isExactActive:a})=>[n.createElementVNode("a",n.mergeProps({href:i,class:r.linkClass({isActive:o,isExactActive:a}),"aria-current":r.isCurrentUrl(),onClick:e=>r.onClick(e,t)},e.ptm("action")),[l.templates.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:["p-menuitem-icon",l.item.icon]},e.ptm("icon")),null,16)):n.createCommentVNode("",!0),l.item.label?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:2,class:"p-menuitem-text"},e.ptm("label")),n.toDisplayString(r.label()),17)):n.createCommentVNode("",!0)],16,m)])),_:1},8,["to"])):(n.openBlock(),n.createElementBlock("a",n.mergeProps({key:1,href:l.item.url||"#",class:r.linkClass(),target:l.item.target,"aria-current":r.isCurrentUrl(),onClick:t[0]||(t[0]=(...e)=>r.onClick&&r.onClick(...e))},e.ptm("action")),[l.templates&&l.templates.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:["p-menuitem-icon",l.item.icon]},e.ptm("icon")),null,16)):n.createCommentVNode("",!0),l.item.label?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:2,class:"p-menuitem-text"},e.ptm("label")),n.toDisplayString(r.label()),17)):n.createCommentVNode("",!0)],16,a))],64))],16)):n.createCommentVNode("",!0)};var c={name:"Breadcrumb",extends:i.default,props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:r,ChevronRightIcon:o.default}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-breadcrumb {\n    overflow-x: auto;\n}\n.p-breadcrumb .p-breadcrumb-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n}\n.p-breadcrumb .p-menuitem-text {\n    line-height: 1;\n}\n.p-breadcrumb .p-menuitem-link {\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb .p-menuitem-separator {\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb::-webkit-scrollbar {\n    display: none;\n}\n"),c.render=function(e,t,l,i,o,r){const m=n.resolveComponent("BreadcrumbItem"),a=n.resolveComponent("ChevronRightIcon");return n.openBlock(),n.createElementBlock("nav",n.mergeProps({class:"p-breadcrumb p-component"},e.ptm("root")),[n.createElementVNode("ol",n.mergeProps({class:"p-breadcrumb-list"},e.ptm("menu")),[l.home?(n.openBlock(),n.createBlock(m,{key:0,item:l.home,class:"p-breadcrumb-home",templates:e.$slots,exact:l.exact,pt:e.pt},null,8,["item","templates","exact","pt"])):n.createCommentVNode("",!0),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(l.model,((t,i)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:t.label},[l.home||0!==i?(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:0,class:"p-menuitem-separator"},e.ptm("separator")),[n.renderSlot(e.$slots,"separator",{},(()=>[n.createVNode(a,n.mergeProps({"aria-hidden":"true"},e.ptm("separatorIcon")),null,16)]))],16)):n.createCommentVNode("",!0),n.createVNode(m,{item:t,index:i,templates:e.$slots,exact:l.exact,pt:e.pt},null,8,["item","index","templates","exact","pt"])],64)))),128))],16)],16)},module.exports=c;