primevue 3.26.0 → 3.27.0

package/panel/panel.js

@@ -1,13 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.panel = (function (Ripple, utils, vue) {
+this.primevue.panel = (function (BaseComponent, MinusIcon, PlusIcon, Ripple, 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 MinusIcon__default = /*#__PURE__*/_interopDefaultLegacy(MinusIcon);
+    var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Panel',
+        extends: BaseComponent__default["default"],
         emits: ['update:collapsed', 'toggle'],
         props: {
             header: String,
@@ -55,35 +59,34 @@ this.primevue.panel = (function (Ripple, utils, vue) {
                 return this.toggleButtonProps && this.toggleButtonProps['aria-label'] ? this.toggleButtonProps['aria-label'] : this.header;
             }
         },
+        components: {
+            PlusIcon: PlusIcon__default["default"],
+            MinusIcon: MinusIcon__default["default"]
+        },
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1 = { class: "p-panel-header" };
-    const _hoisted_2 = ["id"];
-    const _hoisted_3 = { class: "p-panel-icons" };
-    const _hoisted_4 = ["id", "aria-label", "aria-controls", "aria-expanded"];
-    const _hoisted_5 = ["id", "aria-labelledby"];
-    const _hoisted_6 = { class: "p-panel-content" };
+    const _hoisted_1 = ["id"];
+    const _hoisted_2 = ["id", "aria-label", "aria-controls", "aria-expanded"];
+    const _hoisted_3 = ["id", "aria-labelledby"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
-        vue.createElementVNode("div", _hoisted_1, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-header" }, _ctx.ptm('header')), [
           vue.renderSlot(_ctx.$slots, "header", {}, () => [
             ($props.header)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
+              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                   key: 0,
                   id: $options.ariaId + '_header',
                   class: "p-panel-title"
-                }, vue.toDisplayString($props.header), 9, _hoisted_2))
+                }, _ctx.ptm('title')), vue.toDisplayString($props.header), 17, _hoisted_1))
               : vue.createCommentVNode("", true)
           ]),
-          vue.createElementVNode("div", _hoisted_3, [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-icons" }, _ctx.ptm('icons')), [
             vue.renderSlot(_ctx.$slots, "icons"),
             ($props.toggleable)
               ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
@@ -97,34 +100,42 @@ this.primevue.panel = (function (Ripple, utils, vue) {
                   "aria-expanded": !$data.d_collapsed,
                   onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
                   onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-                }, $props.toggleButtonProps), [
-                  vue.createElementVNode("span", {
-                    class: vue.normalizeClass({ 'pi pi-minus': !$data.d_collapsed, 'pi pi-plus': $data.d_collapsed })
-                  }, null, 2)
-                ], 16, _hoisted_4)), [
+                }, { ...$props.toggleButtonProps, ..._ctx.ptm('toggler') }), [
+                  vue.renderSlot(_ctx.$slots, "togglericon", { collapsed: $data.d_collapsed }, () => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($data.d_collapsed ? 'PlusIcon' : 'MinusIcon'), vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('togglericon'))), null, 16))
+                  ])
+                ], 16, _hoisted_2)), [
                   [_directive_ripple]
                 ])
               : vue.createCommentVNode("", true)
-          ])
-        ]),
+          ], 16)
+        ], 16),
         vue.createVNode(vue.Transition, { name: "p-toggleable-content" }, {
           default: vue.withCtx(() => [
-            vue.withDirectives(vue.createElementVNode("div", {
+            vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
               id: $options.ariaId + '_content',
               class: "p-toggleable-content",
               role: "region",
               "aria-labelledby": $options.ariaId + '_header'
-            }, [
-              vue.createElementVNode("div", _hoisted_6, [
+            }, _ctx.ptm('toggleablecontent')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-panel-content" }, _ctx.ptm('content')), [
                 vue.renderSlot(_ctx.$slots, "default")
-              ])
-            ], 8, _hoisted_5), [
+              ], 16),
+              (_ctx.$slots.footer)
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: "p-panel-footer"
+                  }, _ctx.ptm('footer')), [
+                    vue.renderSlot(_ctx.$slots, "footer")
+                  ], 16))
+                : vue.createCommentVNode("", true)
+            ], 16, _hoisted_3), [
               [vue.vShow, !$data.d_collapsed]
             ])
           ]),
           _: 3
         })
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -161,4 +172,4 @@ this.primevue.panel = (function (Ripple, utils, vue) {
 
     return script;
 
-})(primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.minus, primevue.icons.plus, primevue.ripple, primevue.utils, Vue);

package/panel/panel.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.panel=function(e,t,l){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Panel",emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>t.UniqueComponentId(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},directives:{ripple:n(e).default}};const o={class:"p-panel-header"},i=["id"],r={class:"p-panel-icons"},s=["id","aria-label","aria-controls","aria-expanded"],d=["id","aria-labelledby"],p={class:"p-panel-content"};return function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===l&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),a.render=function(e,t,n,a,c,u){const g=l.resolveDirective("ripple");return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(u.containerClass)},[l.createElementVNode("div",o,[l.renderSlot(e.$slots,"header",{},(()=>[n.header?(l.openBlock(),l.createElementBlock("span",{key:0,id:u.ariaId+"_header",class:"p-panel-title"},l.toDisplayString(n.header),9,i)):l.createCommentVNode("",!0)])),l.createElementVNode("div",r,[l.renderSlot(e.$slots,"icons"),n.toggleable?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,id:u.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":u.buttonAriaLabel,"aria-controls":u.ariaId+"_content","aria-expanded":!c.d_collapsed,onClick:t[0]||(t[0]=(...e)=>u.toggle&&u.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>u.onKeyDown&&u.onKeyDown(...e))},n.toggleButtonProps),[l.createElementVNode("span",{class:l.normalizeClass({"pi pi-minus":!c.d_collapsed,"pi pi-plus":c.d_collapsed})},null,2)],16,s)),[[g]]):l.createCommentVNode("",!0)])]),l.createVNode(l.Transition,{name:"p-toggleable-content"},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",{id:u.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":u.ariaId+"_header"},[l.createElementVNode("div",p,[l.renderSlot(e.$slots,"default")])],8,d),[[l.vShow,!c.d_collapsed]])])),_:3})],2)},a}(primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.panel=function(e,t,o,n,l,a){"use strict";function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e),s=r(t),d=r(o),p=r(n),c={name:"Panel",extends:i.default,emits:["update:collapsed","toggle"],props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},data(){return{d_collapsed:this.collapsed}},watch:{collapsed(e){this.d_collapsed=e}},methods:{toggle(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown(e){"Enter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{ariaId:()=>l.UniqueComponentId(),containerClass(){return["p-panel p-component",{"p-panel-toggleable":this.toggleable}]},buttonAriaLabel(){return this.toggleButtonProps&&this.toggleButtonProps["aria-label"]?this.toggleButtonProps["aria-label"]:this.header}},components:{PlusIcon:d.default,MinusIcon:s.default},directives:{ripple:p.default}};const u=["id"],m=["id","aria-label","aria-controls","aria-expanded"],g=["id","aria-labelledby"];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],l=document.createElement("style");l.type="text/css","top"===o&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.p-panel-title {\n    line-height: 1;\n}\n.p-panel-header-icon {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n"),c.render=function(e,t,o,n,l,r){const i=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:r.containerClass},e.ptm("root")),[a.createElementVNode("div",a.mergeProps({class:"p-panel-header"},e.ptm("header")),[a.renderSlot(e.$slots,"header",{},(()=>[o.header?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:0,id:r.ariaId+"_header",class:"p-panel-title"},e.ptm("title")),a.toDisplayString(o.header),17,u)):a.createCommentVNode("",!0)])),a.createElementVNode("div",a.mergeProps({class:"p-panel-icons"},e.ptm("icons")),[a.renderSlot(e.$slots,"icons"),o.toggleable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,id:r.ariaId+"_header",type:"button",role:"button",class:"p-panel-header-icon p-panel-toggler p-link","aria-label":r.buttonAriaLabel,"aria-controls":r.ariaId+"_content","aria-expanded":!l.d_collapsed,onClick:t[0]||(t[0]=(...e)=>r.toggle&&r.toggle(...e)),onKeydown:t[1]||(t[1]=(...e)=>r.onKeyDown&&r.onKeyDown(...e))},{...o.toggleButtonProps,...e.ptm("toggler")}),[a.renderSlot(e.$slots,"togglericon",{collapsed:l.d_collapsed},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(l.d_collapsed?"PlusIcon":"MinusIcon"),a.normalizeProps(a.guardReactiveProps(e.ptm("togglericon"))),null,16))]))],16,m)),[[i]]):a.createCommentVNode("",!0)],16)],16),a.createVNode(a.Transition,{name:"p-toggleable-content"},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",a.mergeProps({id:r.ariaId+"_content",class:"p-toggleable-content",role:"region","aria-labelledby":r.ariaId+"_header"},e.ptm("toggleablecontent")),[a.createElementVNode("div",a.mergeProps({class:"p-panel-content"},e.ptm("content")),[a.renderSlot(e.$slots,"default")],16),e.$slots.footer?(a.openBlock(),a.createElementBlock("div",a.mergeProps({key:0,class:"p-panel-footer"},e.ptm("footer")),[a.renderSlot(e.$slots,"footer")],16)):a.createCommentVNode("",!0)],16,g),[[a.vShow,!l.d_collapsed]])])),_:3})],16)},c}(primevue.basecomponent,primevue.icons.minus,primevue.icons.plus,primevue.ripple,primevue.utils,Vue);

package/panelmenu/PanelMenu.d.ts

@@ -80,6 +80,43 @@ export interface PanelMenuSlots {
          */
         item: MenuItem;
     }): VNode[];
+    /**
+     * Custom submenu icon template.
+     */
+    submenuicon(scope: {
+        /**
+         * Whether item is active
+         */
+        active: boolean;
+    }): VNode[];
+    /**
+     * Custom header icon template.
+     * @param {Object} scope - header icon slot's params.
+     */
+    headericon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): 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/panelmenu/PanelMenu.vue

@@ -18,13 +18,17 @@
                         <template v-if="!$slots.item">
                             <router-link v-if="getItemProp(item, 'to') && !isItemDisabled(item)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(item, 'to')" custom>
                                 <a :href="href" :class="getHeaderActionClass(item, { isActive, isExactActive })" :tabindex="-1" @click="onHeaderActionClick($event, navigate)">
-                                    <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
+                                    <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                    <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
                                     <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                                 </a>
                             </router-link>
                             <a v-else :href="getItemProp(item, 'url')" :class="getHeaderActionClass(item)" :tabindex="-1">
-                                <span v-if="getItemProp(item, 'items')" :class="getHeaderToggleIconClass(item)"></span>
-                                <span v-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)"></span>
+                                <slot v-if="getItemProp(item, 'items')" name="submenuicon" :active="isItemActive(item)">
+                                    <component :is="isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                                </slot>
+                                <component v-if="$slots.headericon" :is="$slots.headericon" :item="item" :class="getHeaderIconClass(item)" />
+                                <span v-else-if="getItemProp(item, 'icon')" :class="getHeaderIconClass(item)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(item) }}</span>
                             </a>
                         </template>
@@ -34,7 +38,7 @@
                 <transition name="p-toggleable-content">
                     <div v-show="isItemActive(item)" :id="getContentId(index)" class="p-toggleable-content" role="region" :aria-labelledby="getHeaderId(index)">
                         <div v-if="getItemProp(item, 'items')" class="p-panelmenu-content">
-                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :template="$slots.item" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
+                            <PanelMenuList :panelId="getPanelId(index)" :items="getItemProp(item, 'items')" :templates="$slots" :expandedKeys="expandedKeys" @item-toggle="changeExpandedKeys" @header-focus="updateFocusedHeader" :exact="exact" />
                         </div>
                     </div>
                 </transition>
@@ -44,6 +48,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import PanelMenuList from './PanelMenuList.vue';
 
@@ -253,13 +259,12 @@ export default {
         },
         getHeaderIconClass(item) {
             return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
-        },
-        getHeaderToggleIconClass(item) {
-            return ['p-submenu-icon', this.isItemActive(item) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'];
         }
     },
     components: {
-        PanelMenuList: PanelMenuList
+        PanelMenuList: PanelMenuList,
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon
     }
 };
 </script>

package/panelmenu/PanelMenuList.vue

@@ -8,7 +8,7 @@
         :panelId="panelId"
         :focusedItemId="focused ? focusedItemId : undefined"
         :items="processedItems"
-        :template="template"
+        :templates="templates"
         :activeItemPath="activeItemPath"
         :exact="exact"
         @focus="onFocus"
@@ -34,8 +34,8 @@ export default {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         expandedKeys: {

package/panelmenu/PanelMenuSub.vue

@@ -14,20 +14,25 @@
                 :aria-posinset="getAriaPosInset(index)"
             >
                 <div class="p-menuitem-content" @click="onItemClick($event, processedItem)">
-                    <template v-if="!template">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                                 <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
                         <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="isItemGroup(processedItem)" :class="getItemToggleIconClass(processedItem)"></span>
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
+                            <template v-if="isItemGroup(processedItem)">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" class="p-submenu-icon" :active="isItemActive(processedItem)" />
+                                <component v-else :is="isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'" class="p-submenu-icon" />
+                            </template>
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" />
                             <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
-                    <component v-else :is="template" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <transition name="p-toggleable-content">
                     <div v-show="isItemActive(processedItem)" class="p-toggleable-content">
@@ -39,7 +44,7 @@
                             :focusedItemId="focusedItemId"
                             :items="processedItem.items"
                             :level="level + 1"
-                            :template="template"
+                            :templates="templates"
                             :activeItemPath="activeItemPath"
                             :exact="exact"
                             @item-toggle="onItemToggle"
@@ -53,6 +58,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import ChevronRightIcon from 'primevue/icons/chevronright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
@@ -76,8 +83,8 @@ export default {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         activeItemPath: {
@@ -155,13 +162,14 @@ export default {
         getItemIconClass(processedItem) {
             return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getItemToggleIconClass(processedItem) {
-            return ['p-submenu-icon', this.isItemActive(processedItem) ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'];
-        },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronDownIcon: ChevronDownIcon
+    },
     directives: {
         ripple: Ripple
     }

package/panelmenu/panelmenu.cjs.js

@@ -1,11 +1,15 @@
 'use strict';
 
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var ChevronRightIcon = require('primevue/icons/chevronright');
 var utils = require('primevue/utils');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$2 = {
@@ -28,8 +32,8 @@ var script$2 = {
             type: Number,
             default: 0
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         activeItemPath: {
@@ -107,13 +111,14 @@ var script$2 = {
         getItemIconClass(processedItem) {
             return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
         },
-        getItemToggleIconClass(processedItem) {
-            return ['p-submenu-icon', this.isItemActive(processedItem) ? 'pi pi-fw pi-chevron-down' : 'pi pi-fw pi-chevron-right'];
-        },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
         }
     },
+    components: {
+        ChevronRightIcon: ChevronRightIcon__default["default"],
+        ChevronDownIcon: ChevronDownIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
@@ -155,7 +160,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                 class: "p-menuitem-content",
                 onClick: $event => ($options.onItemClick($event, processedItem))
               }, [
-                (!$props.template)
+                (!$props.templates.item)
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                       ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -171,12 +176,18 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                                 "aria-hidden": "true",
                                 onClick: $event => ($options.onItemActionClick($event, navigate))
                               }, [
-                                ($options.getItemProp(processedItem, 'icon'))
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                ($props.templates.itemicon)
+                                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                       key: 0,
+                                      item: processedItem.item,
                                       class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                    }, null, 2))
-                                  : vue.createCommentVNode("", true),
+                                    }, null, 8, ["item", "class"]))
+                                  : ($options.getItemProp(processedItem, 'icon'))
+                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        key: 1,
+                                        class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                      }, null, 2))
+                                    : vue.createCommentVNode("", true),
                                 vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
                               ], 10, _hoisted_4$1)), [
                                 [_directive_ripple]
@@ -193,23 +204,37 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                             "aria-hidden": "true"
                           }, [
                             ($options.isItemGroup(processedItem))
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 0,
-                                  class: vue.normalizeClass($options.getItemToggleIconClass(processedItem))
-                                }, null, 2))
+                              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                                  ($props.templates.submenuicon)
+                                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), {
+                                        key: 0,
+                                        class: "p-submenu-icon",
+                                        active: $options.isItemActive(processedItem)
+                                      }, null, 8, ["active"]))
+                                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.isItemActive(processedItem) ? 'ChevronDownIcon' : 'ChevronRightIcon'), {
+                                        key: 1,
+                                        class: "p-submenu-icon"
+                                      }))
+                                ], 64))
                               : vue.createCommentVNode("", true),
-                            ($options.getItemProp(processedItem, 'icon'))
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                            ($props.templates.itemicon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                   key: 1,
+                                  item: processedItem.item,
                                   class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
+                                }, null, 8, ["item", "class"]))
+                              : ($options.getItemProp(processedItem, 'icon'))
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 2,
+                                    class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
                             vue.createElementVNode("span", _hoisted_7$1, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
                           ], 10, _hoisted_6$1)), [
                             [_directive_ripple]
                           ])
                     ], 64))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                       key: 1,
                       item: processedItem.item
                     }, null, 8, ["item"]))
@@ -226,11 +251,11 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
                           focusedItemId: $props.focusedItemId,
                           items: processedItem.items,
                           level: $props.level + 1,
-                          template: $props.template,
+                          templates: $props.templates,
                           activeItemPath: $props.activeItemPath,
                           exact: $props.exact,
                           onItemToggle: $options.onItemToggle
-                        }, null, 8, ["id", "panelId", "focusedItemId", "items", "level", "template", "activeItemPath", "exact", "onItemToggle"]))
+                        }, null, 8, ["id", "panelId", "focusedItemId", "items", "level", "templates", "activeItemPath", "exact", "onItemToggle"]))
                       : vue.createCommentVNode("", true)
                   ], 512), [
                     [vue.vShow, $options.isItemActive(processedItem)]
@@ -267,8 +292,8 @@ var script$1 = {
             type: Array,
             default: null
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         expandedKeys: {
@@ -634,14 +659,14 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     panelId: $props.panelId,
     focusedItemId: $data.focused ? $options.focusedItemId : undefined,
     items: $options.processedItems,
-    template: $props.template,
+    templates: $props.templates,
     activeItemPath: $data.activeItemPath,
     exact: $props.exact,
     onFocus: $options.onFocus,
     onBlur: $options.onBlur,
     onKeydown: $options.onKeyDown,
     onItemToggle: $options.onItemToggle
-  }, null, 8, ["id", "aria-activedescendant", "panelId", "focusedItemId", "items", "template", "activeItemPath", "exact", "onFocus", "onBlur", "onKeydown", "onItemToggle"]))
+  }, null, 8, ["id", "aria-activedescendant", "panelId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "onFocus", "onBlur", "onKeydown", "onItemToggle"]))
 }
 
 script$1.render = render$1;
@@ -849,13 +874,12 @@ var script = {
         },
         getHeaderIconClass(item) {
             return ['p-menuitem-icon', this.getItemProp(item, 'icon')];
-        },
-        getHeaderToggleIconClass(item) {
-            return ['p-submenu-icon', this.isItemActive(item) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'];
         }
     },
     components: {
-        PanelMenuList: script$1
+        PanelMenuList: script$1,
+        ChevronRightIcon: ChevronRightIcon__default["default"],
+        ChevronDownIcon: ChevronDownIcon__default["default"]
     }
 };
 
@@ -918,12 +942,18 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   tabindex: -1,
                                   onClick: $event => ($options.onHeaderActionClick($event, navigate))
                                 }, [
-                                  ($options.getItemProp(item, 'icon'))
-                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  (_ctx.$slots.headericon)
+                                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.headericon), {
                                         key: 0,
+                                        item: item,
                                         class: vue.normalizeClass($options.getHeaderIconClass(item))
-                                      }, null, 2))
-                                    : vue.createCommentVNode("", true),
+                                      }, null, 8, ["item", "class"]))
+                                    : ($options.getItemProp(item, 'icon'))
+                                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                                          key: 1,
+                                          class: vue.normalizeClass($options.getHeaderIconClass(item))
+                                        }, null, 2))
+                                      : vue.createCommentVNode("", true),
                                   vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.getItemLabel(item)), 1)
                                 ], 10, _hoisted_4)
                               ]),
@@ -936,17 +966,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               tabindex: -1
                             }, [
                               ($options.getItemProp(item, 'items'))
-                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                ? vue.renderSlot(_ctx.$slots, "submenuicon", {
                                     key: 0,
-                                    class: vue.normalizeClass($options.getHeaderToggleIconClass(item))
-                                  }, null, 2))
+                                    active: $options.isItemActive(item)
+                                  }, () => [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.isItemActive(item) ? 'ChevronDownIcon' : 'ChevronRightIcon'), { class: "p-submenu-icon" }))
+                                  ])
                                 : vue.createCommentVNode("", true),
-                              ($options.getItemProp(item, 'icon'))
-                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                              (_ctx.$slots.headericon)
+                                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.headericon), {
                                     key: 1,
+                                    item: item,
                                     class: vue.normalizeClass($options.getHeaderIconClass(item))
-                                  }, null, 2))
-                                : vue.createCommentVNode("", true),
+                                  }, null, 8, ["item", "class"]))
+                                : ($options.getItemProp(item, 'icon'))
+                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                      key: 2,
+                                      class: vue.normalizeClass($options.getHeaderIconClass(item))
+                                    }, null, 2))
+                                  : vue.createCommentVNode("", true),
                               vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.getItemLabel(item)), 1)
                             ], 10, _hoisted_6))
                       ], 64))
@@ -969,12 +1007,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           vue.createVNode(_component_PanelMenuList, {
                             panelId: $options.getPanelId(index),
                             items: $options.getItemProp(item, 'items'),
-                            template: _ctx.$slots.item,
+                            templates: _ctx.$slots,
                             expandedKeys: $props.expandedKeys,
                             onItemToggle: $options.changeExpandedKeys,
                             onHeaderFocus: $options.updateFocusedHeader,
                             exact: $props.exact
-                          }, null, 8, ["panelId", "items", "template", "expandedKeys", "onItemToggle", "onHeaderFocus", "exact"])
+                          }, null, 8, ["panelId", "items", "templates", "expandedKeys", "onItemToggle", "onHeaderFocus", "exact"])
                         ]))
                       : vue.createCommentVNode("", true)
                   ], 8, _hoisted_8), [