primevue 3.26.1 → 3.27.0

package/baseicon/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "./baseicon.cjs.js",
+  "module": "./baseicon.esm.js",
+  "unpkg": "./baseicon.min.js",
+  "browser": {
+    "./sfc": "./BaseIcon.vue"
+  }
+}

package/breadcrumb/Breadcrumb.d.ts

@@ -52,6 +52,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,18 +1,21 @@
 <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" />
+            <BreadcrumbItem v-if="home" :item="home" class="p-breadcrumb-home" :templates="$slots" :exact="exact" />
             <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>
+                    <slot name="separator">
+                        <ChevronRightIcon aria-hidden="true" />
+                    </slot>
                 </li>
-                <BreadcrumbItem :item="item" :template="$slots.item" :exact="exact" />
+                <BreadcrumbItem :item="item" :templates="$slots" :exact="exact" />
             </template>
         </ol>
     </nav>
 </template>
 
 <script>
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import BreadcrumbItem from './BreadcrumbItem.vue';
 
 export default {
@@ -32,7 +35,8 @@ export default {
         }
     },
     components: {
-        BreadcrumbItem: BreadcrumbItem
+        BreadcrumbItem: BreadcrumbItem,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 </script>

package/breadcrumb/BreadcrumbItem.vue

@@ -1,18 +1,20 @@
 <template>
     <li v-if="visible()" :class="containerClass()">
-        <template v-if="!template">
+        <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)">
-                    <span v-if="item.icon" :class="iconClass"></span>
+                    <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-if="item.label" class="p-menuitem-text">{{ 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>
+                <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-if="item.label" class="p-menuitem-text">{{ label() }}</span>
             </a>
         </template>
-        <component v-else :is="template" :item="item"></component>
+        <component v-else :is="templates.item" :item="item"></component>
     </li>
 </template>
 
@@ -21,7 +23,7 @@ export default {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null
     },
     methods: {
@@ -64,11 +66,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,12 +1,17 @@
 'use strict';
 
+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 ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
+
 var script$1 = {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null
     },
     methods: {
@@ -49,22 +54,17 @@ 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,
+  key: 2,
   class: "p-menuitem-text"
 };
 const _hoisted_3$1 = ["href", "target", "aria-current"];
-const _hoisted_4$1 = {
-  key: 1,
+const _hoisted_4 = {
+  key: 2,
   class: "p-menuitem-text"
 };
 
@@ -76,7 +76,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: vue.normalizeClass($options.containerClass())
       }, [
-        (!$props.template)
+        (!$props.templates.item)
           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
               ($props.item.to)
                 ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -91,12 +91,18 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                         "aria-current": $options.isCurrentUrl(),
                         onClick: $event => ($options.onClick($event, navigate))
                       }, [
-                        ($props.item.icon)
-                          ? (vue.openBlock(), vue.createElementBlock("span", {
+                        ($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", {
+                                key: 1,
+                                class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : vue.createCommentVNode("", true),
                         ($props.item.label)
                           ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1))
                           : vue.createCommentVNode("", true)
@@ -112,18 +118,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     "aria-current": $options.isCurrentUrl(),
                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args)))
                   }, [
-                    ($props.item.icon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                    ($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", {
+                            key: 1,
+                            class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                          }, null, 2))
+                        : vue.createCommentVNode("", true),
                     ($props.item.label)
-                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.label()), 1))
+                      ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.label()), 1))
                       : vue.createCommentVNode("", true)
                   ], 10, _hoisted_3$1))
             ], 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"]))
@@ -150,7 +162,8 @@ var script = {
         }
     },
     components: {
-        BreadcrumbItem: script$1
+        BreadcrumbItem: script$1,
+        ChevronRightIcon: ChevronRightIcon__default["default"]
     }
 };
 
@@ -160,16 +173,10 @@ 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, [
@@ -178,22 +185,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             item: $props.home,
             class: "p-breadcrumb-home",
-            template: _ctx.$slots.item,
+            templates: _ctx.$slots,
             exact: $props.exact
-          }, null, 8, ["item", "template", "exact"]))
+          }, null, 8, ["item", "templates", "exact"]))
         : 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", _hoisted_3, [
+                vue.renderSlot(_ctx.$slots, "separator", {}, () => [
+                  vue.createVNode(_component_ChevronRightIcon, { "aria-hidden": "true" })
+                ])
+              ]))
             : vue.createCommentVNode("", true),
           vue.createVNode(_component_BreadcrumbItem, {
             item: item,
-            template: _ctx.$slots.item,
+            templates: _ctx.$slots,
             exact: $props.exact
-          }, null, 8, ["item", "template", "exact"])
+          }, null, 8, ["item", "templates", "exact"])
         ], 64))
       }), 128))
     ])

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/icons/chevronright"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e),i={name:"BreadcrumbItem",props:{item:null,templates: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}}};const o=["href","aria-current","onClick"],a={key:2,class:"p-menuitem-text"},r=["href","target","aria-current"],c={key:2,class:"p-menuitem-text"};i.render=function(e,n,l,i,m,s){const p=t.resolveComponent("router-link");return s.visible()?(t.openBlock(),t.createElementBlock("li",{key:0,class:t.normalizeClass(s.containerClass())},[l.templates.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.item),{key:1,item:l.item},null,8,["item"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[l.item.to?(t.openBlock(),t.createBlock(p,{key:0,to:l.item.to,custom:""},{default:t.withCtx((({navigate:e,href:n,isActive:i,isExactActive:r})=>[t.createElementVNode("a",{href:n,class:t.normalizeClass(s.linkClass({isActive:i,isExactActive:r})),"aria-current":s.isCurrentUrl(),onClick:t=>s.onClick(t,e)},[l.templates.itemicon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["p-menuitem-icon",l.item.icon])},null,2)):t.createCommentVNode("",!0),l.item.label?(t.openBlock(),t.createElementBlock("span",a,t.toDisplayString(s.label()),1)):t.createCommentVNode("",!0)],10,o)])),_:1},8,["to"])):(t.openBlock(),t.createElementBlock("a",{key:1,href:l.item.url||"#",class:t.normalizeClass(s.linkClass()),target:l.item.target,"aria-current":s.isCurrentUrl(),onClick:n[0]||(n[0]=(...e)=>s.onClick&&s.onClick(...e))},[l.templates.itemicon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["p-menuitem-icon",l.item.icon])},null,2)):t.createCommentVNode("",!0),l.item.label?(t.openBlock(),t.createElementBlock("span",c,t.toDisplayString(s.label()),1)):t.createCommentVNode("",!0)],10,r))],64))],2)):t.createCommentVNode("",!0)};var m={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:i,ChevronRightIcon:l.default}};const s={class:"p-breadcrumb p-component"},p={class:"p-breadcrumb-list"},u={key:0,class:"p-menuitem-separator"};!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"),m.render=function(e,n,l,i,o,a){const r=t.resolveComponent("BreadcrumbItem"),c=t.resolveComponent("ChevronRightIcon");return t.openBlock(),t.createElementBlock("nav",s,[t.createElementVNode("ol",p,[l.home?(t.openBlock(),t.createBlock(r,{key:0,item:l.home,class:"p-breadcrumb-home",templates:e.$slots,exact:l.exact},null,8,["item","templates","exact"])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(l.model,((n,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:n.label},[l.home||0!==i?(t.openBlock(),t.createElementBlock("li",u,[t.renderSlot(e.$slots,"separator",{},(()=>[t.createVNode(c,{"aria-hidden":"true"})]))])):t.createCommentVNode("",!0),t.createVNode(r,{item:n,templates:e.$slots,exact:l.exact},null,8,["item","templates","exact"])],64)))),128))])])},module.exports=m;

package/breadcrumb/breadcrumb.esm.js

@@ -1,10 +1,11 @@
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, withCtx, createElementVNode, createCommentVNode, toDisplayString, resolveDynamicComponent, renderList, createVNode } from 'vue';
+import ChevronRightIcon from 'primevue/icons/chevronright';
+import { resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, createBlock, withCtx, createElementVNode, resolveDynamicComponent, createCommentVNode, toDisplayString, renderList, renderSlot, createVNode } from 'vue';
 
 var script$1 = {
     name: 'BreadcrumbItem',
     props: {
         item: null,
-        template: null,
+        templates: null,
         exact: null
     },
     methods: {
@@ -47,22 +48,17 @@ 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,
+  key: 2,
   class: "p-menuitem-text"
 };
 const _hoisted_3$1 = ["href", "target", "aria-current"];
-const _hoisted_4$1 = {
-  key: 1,
+const _hoisted_4 = {
+  key: 2,
   class: "p-menuitem-text"
 };
 
@@ -74,7 +70,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
         key: 0,
         class: normalizeClass($options.containerClass())
       }, [
-        (!$props.template)
+        (!$props.templates.item)
           ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
               ($props.item.to)
                 ? (openBlock(), createBlock(_component_router_link, {
@@ -89,12 +85,18 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                         "aria-current": $options.isCurrentUrl(),
                         onClick: $event => ($options.onClick($event, navigate))
                       }, [
-                        ($props.item.icon)
-                          ? (openBlock(), createElementBlock("span", {
+                        ($props.templates.itemicon)
+                          ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.itemicon), {
                               key: 0,
-                              class: normalizeClass($options.iconClass)
-                            }, null, 2))
-                          : createCommentVNode("", true),
+                              item: $props.item,
+                              class: "p-menuitem-icon"
+                            }, null, 8, ["item"]))
+                          : ($props.item.icon)
+                            ? (openBlock(), createElementBlock("span", {
+                                key: 1,
+                                class: normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : createCommentVNode("", true),
                         ($props.item.label)
                           ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString($options.label()), 1))
                           : createCommentVNode("", true)
@@ -110,18 +112,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     "aria-current": $options.isCurrentUrl(),
                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args)))
                   }, [
-                    ($props.item.icon)
-                      ? (openBlock(), createElementBlock("span", {
+                    ($props.templates.itemicon)
+                      ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.itemicon), {
                           key: 0,
-                          class: normalizeClass($options.iconClass)
-                        }, null, 2))
-                      : createCommentVNode("", true),
+                          item: $props.item,
+                          class: "p-menuitem-icon"
+                        }, null, 8, ["item"]))
+                      : ($props.item.icon)
+                        ? (openBlock(), createElementBlock("span", {
+                            key: 1,
+                            class: normalizeClass(['p-menuitem-icon', $props.item.icon])
+                          }, null, 2))
+                        : createCommentVNode("", true),
                     ($props.item.label)
-                      ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString($options.label()), 1))
+                      ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString($options.label()), 1))
                       : createCommentVNode("", true)
                   ], 10, _hoisted_3$1))
             ], 64))
-          : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
+          : (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
               key: 1,
               item: $props.item
             }, null, 8, ["item"]))
@@ -148,7 +156,8 @@ var script = {
         }
     },
     components: {
-        BreadcrumbItem: script$1
+        BreadcrumbItem: script$1,
+        ChevronRightIcon: ChevronRightIcon
     }
 };
 
@@ -158,16 +167,10 @@ const _hoisted_3 = {
   key: 0,
   class: "p-menuitem-separator"
 };
-const _hoisted_4 = /*#__PURE__*/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 = resolveComponent("BreadcrumbItem");
+  const _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
 
   return (openBlock(), createElementBlock("nav", _hoisted_1, [
     createElementVNode("ol", _hoisted_2, [
@@ -176,22 +179,26 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             key: 0,
             item: $props.home,
             class: "p-breadcrumb-home",
-            template: _ctx.$slots.item,
+            templates: _ctx.$slots,
             exact: $props.exact
-          }, null, 8, ["item", "template", "exact"]))
+          }, null, 8, ["item", "templates", "exact"]))
         : createCommentVNode("", true),
       (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, i) => {
         return (openBlock(), createElementBlock(Fragment, {
           key: item.label
         }, [
           ($props.home || i !== 0)
-            ? (openBlock(), createElementBlock("li", _hoisted_3, _hoisted_5))
+            ? (openBlock(), createElementBlock("li", _hoisted_3, [
+                renderSlot(_ctx.$slots, "separator", {}, () => [
+                  createVNode(_component_ChevronRightIcon, { "aria-hidden": "true" })
+                ])
+              ]))
             : createCommentVNode("", true),
           createVNode(_component_BreadcrumbItem, {
             item: item,
-            template: _ctx.$slots.item,
+            templates: _ctx.$slots,
             exact: $props.exact
-          }, null, 8, ["item", "template", "exact"])
+          }, null, 8, ["item", "templates", "exact"])
         ], 64))
       }), 128))
     ])

package/breadcrumb/breadcrumb.esm.min.js

@@ -1 +1 @@
-import{resolveComponent as e,openBlock as t,createElementBlock as i,normalizeClass as n,Fragment as l,createBlock as a,withCtx as r,createElementVNode as s,createCommentVNode as m,toDisplayString as c,resolveDynamicComponent as o,renderList as u,createVNode as p}from"vue";var d={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 i=this.$router?this.$router.currentRoute.path:"";return e===i||t===i?"page":void 0}},computed:{iconClass(){return["p-menuitem-icon",this.item.icon]}}};const b=["href","aria-current","onClick"],h={key:1,class:"p-menuitem-text"},f=["href","target","aria-current"],y={key:1,class:"p-menuitem-text"};d.render=function(u,p,d,k,x,v){const C=e("router-link");return v.visible()?(t(),i("li",{key:0,class:n(v.containerClass())},[d.template?(t(),a(o(d.template),{key:1,item:d.item},null,8,["item"])):(t(),i(l,{key:0},[d.item.to?(t(),a(C,{key:0,to:d.item.to,custom:""},{default:r((({navigate:e,href:l,isActive:a,isExactActive:r})=>[s("a",{href:l,class:n(v.linkClass({isActive:a,isExactActive:r})),"aria-current":v.isCurrentUrl(),onClick:t=>v.onClick(t,e)},[d.item.icon?(t(),i("span",{key:0,class:n(v.iconClass)},null,2)):m("",!0),d.item.label?(t(),i("span",h,c(v.label()),1)):m("",!0)],10,b)])),_:1},8,["to"])):(t(),i("a",{key:1,href:d.item.url||"#",class:n(v.linkClass()),target:d.item.target,"aria-current":v.isCurrentUrl(),onClick:p[0]||(p[0]=(...e)=>v.onClick&&v.onClick(...e))},[d.item.icon?(t(),i("span",{key:0,class:n(v.iconClass)},null,2)):m("",!0),d.item.label?(t(),i("span",y,c(v.label()),1)):m("",!0)],10,f))],64))],2)):m("",!0)};var k={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:d}};const x={class:"p-breadcrumb p-component"},v={class:"p-breadcrumb-list"},C={key:0,class:"p-menuitem-separator"},g=[s("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.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"),k.render=function(n,r,c,o,d,b){const h=e("BreadcrumbItem");return t(),i("nav",x,[s("ol",v,[c.home?(t(),a(h,{key:0,item:c.home,class:"p-breadcrumb-home",template:n.$slots.item,exact:c.exact},null,8,["item","template","exact"])):m("",!0),(t(!0),i(l,null,u(c.model,((e,a)=>(t(),i(l,{key:e.label},[c.home||0!==a?(t(),i("li",C,g)):m("",!0),p(h,{item:e,template:n.$slots.item,exact:c.exact},null,8,["item","template","exact"])],64)))),128))])])};export{k as default};
+import e from"primevue/icons/chevronright";import{resolveComponent as t,openBlock as i,createElementBlock as n,normalizeClass as l,Fragment as a,createBlock as r,withCtx as s,createElementVNode as m,resolveDynamicComponent as c,createCommentVNode as o,toDisplayString as u,renderList as p,renderSlot as d,createVNode as h}from"vue";var b={name:"BreadcrumbItem",props:{item:null,templates: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 i=this.$router?this.$router.currentRoute.path:"";return e===i||t===i?"page":void 0}}};const y=["href","aria-current","onClick"],f={key:2,class:"p-menuitem-text"},k=["href","target","aria-current"],v={key:2,class:"p-menuitem-text"};b.render=function(e,p,d,h,b,x){const C=t("router-link");return x.visible()?(i(),n("li",{key:0,class:l(x.containerClass())},[d.templates.item?(i(),r(c(d.templates.item),{key:1,item:d.item},null,8,["item"])):(i(),n(a,{key:0},[d.item.to?(i(),r(C,{key:0,to:d.item.to,custom:""},{default:s((({navigate:e,href:t,isActive:a,isExactActive:s})=>[m("a",{href:t,class:l(x.linkClass({isActive:a,isExactActive:s})),"aria-current":x.isCurrentUrl(),onClick:t=>x.onClick(t,e)},[d.templates.itemicon?(i(),r(c(d.templates.itemicon),{key:0,item:d.item,class:"p-menuitem-icon"},null,8,["item"])):d.item.icon?(i(),n("span",{key:1,class:l(["p-menuitem-icon",d.item.icon])},null,2)):o("",!0),d.item.label?(i(),n("span",f,u(x.label()),1)):o("",!0)],10,y)])),_:1},8,["to"])):(i(),n("a",{key:1,href:d.item.url||"#",class:l(x.linkClass()),target:d.item.target,"aria-current":x.isCurrentUrl(),onClick:p[0]||(p[0]=(...e)=>x.onClick&&x.onClick(...e))},[d.templates.itemicon?(i(),r(c(d.templates.itemicon),{key:0,item:d.item,class:"p-menuitem-icon"},null,8,["item"])):d.item.icon?(i(),n("span",{key:1,class:l(["p-menuitem-icon",d.item.icon])},null,2)):o("",!0),d.item.label?(i(),n("span",v,u(x.label()),1)):o("",!0)],10,k))],64))],2)):o("",!0)};var x={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:b,ChevronRightIcon:e}};const C={class:"p-breadcrumb p-component"},g={class:"p-breadcrumb-list"},A={key:0,class:"p-menuitem-separator"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.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"),x.render=function(e,l,s,c,u,b){const y=t("BreadcrumbItem"),f=t("ChevronRightIcon");return i(),n("nav",C,[m("ol",g,[s.home?(i(),r(y,{key:0,item:s.home,class:"p-breadcrumb-home",templates:e.$slots,exact:s.exact},null,8,["item","templates","exact"])):o("",!0),(i(!0),n(a,null,p(s.model,((t,l)=>(i(),n(a,{key:t.label},[s.home||0!==l?(i(),n("li",A,[d(e.$slots,"separator",{},(()=>[h(f,{"aria-hidden":"true"})]))])):o("",!0),h(y,{item:t,templates:e.$slots,exact:s.exact},null,8,["item","templates","exact"])],64)))),128))])])};export{x as default};