primevue 3.8.0 → 3.9.1

package/panelmenu/panelmenu.esm.js

@@ -10,7 +10,7 @@ var script$1 = {
             default: null
         },
         template: {
-            type: Object,
+            type: Function,
             default: null
         },
         expandedKeys: {
@@ -78,6 +78,9 @@ var script$1 = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     }
 };
@@ -97,7 +100,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock("ul", _hoisted_1$1, [
     (openBlock(true), createBlock(Fragment, null, renderList($props.model, (item, i) => {
       return (openBlock(), createBlock(Fragment, {
-        key: item.label + i.toString()
+        key: $options.label(item) + i.toString()
       }, [
         ($options.visible(item) && !item.separator)
           ? (openBlock(), createBlock("li", {
@@ -125,7 +128,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                               createVNode("span", {
                                 class: ['p-menuitem-icon', item.icon]
                               }, null, 2),
-                              createVNode("span", _hoisted_2$1, toDisplayString(item.label), 1)
+                              createVNode("span", _hoisted_2$1, toDisplayString($options.label(item)), 1)
                             ], 10, ["href", "onClick", "aria-expanded"])
                           ]),
                           _: 2
@@ -149,7 +152,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                           createVNode("span", {
                             class: ['p-menuitem-icon', item.icon]
                           }, null, 2),
-                          createVNode("span", _hoisted_3$1, toDisplayString(item.label), 1)
+                          createVNode("span", _hoisted_3$1, toDisplayString($options.label(item)), 1)
                         ], 10, ["href", "target", "onClick", "aria-expanded", "tabindex"]))
                   ], 64))
                 : (openBlock(), createBlock(resolveDynamicComponent($props.template), {
@@ -162,7 +165,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     ($options.visible(item) && item.items)
                       ? (openBlock(), createBlock(_component_PanelMenuSub, {
                           model: item.items,
-                          key: item.label + '_sub_',
+                          key: $options.label(item) + '_sub_',
                           template: $props.template,
                           expandedKeys: $props.expandedKeys,
                           onItemToggle: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-toggle', $event))),
@@ -282,6 +285,9 @@ var script = {
         },
         disabled(item) {
             return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+        },
+        label(item) {
+            return (typeof item.label === 'function' ? item.label() : item.label);
         }
     },
     components: {
@@ -309,7 +315,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock("div", _hoisted_1, [
     (openBlock(true), createBlock(Fragment, null, renderList($props.model, (item, index) => {
       return (openBlock(), createBlock(Fragment, {
-        key: item.label + '_' + index
+        key: $options.label(item) + '_' + index
       }, [
         ($options.visible(item))
           ? (openBlock(), createBlock("div", {
@@ -342,7 +348,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       class: $options.getPanelIcon(item)
                                     }, null, 2))
                                   : createCommentVNode("", true),
-                                createVNode("span", _hoisted_2, toDisplayString(item.label), 1)
+                                createVNode("span", _hoisted_2, toDisplayString($options.label(item)), 1)
                               ], 10, ["href", "onClick"])
                             ]),
                             _: 2
@@ -369,7 +375,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                   class: $options.getPanelIcon(item)
                                 }, null, 2))
                               : createCommentVNode("", true),
-                            createVNode("span", _hoisted_3, toDisplayString(item.label), 1)
+                            createVNode("span", _hoisted_3, toDisplayString($options.label(item)), 1)
                           ], 10, ["href", "onClick", "tabindex", "aria-expanded", "id", "aria-controls"]))
                     ], 64))
                   : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {

package/panelmenu/panelmenu.esm.min.js

@@ -1 +1 @@
-import{resolveComponent as e,openBlock as t,createBlock as n,Fragment as i,renderList as l,withCtx as a,createVNode as s,toDisplayString as d,createCommentVNode as o,resolveDynamicComponent as c,Transition as m,withDirectives as p,vShow as r}from"vue";import{UniqueComponentId as u}from"primevue/utils";var v={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Object,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled}};const y={class:"p-submenu-list",role:"tree"},x={class:"p-menuitem-text"},b={class:"p-menuitem-text"},h={class:"p-toggleable-content"};v.render=function(u,v,g,k,f,I){const C=e("router-link"),A=e("PanelMenuSub",!0);return t(),n("ul",y,[(t(!0),n(i,null,l(g.model,((e,l)=>(t(),n(i,{key:e.label+l.toString()},[I.visible(e)&&!e.separator?(t(),n("li",{key:0,role:"none",class:I.getItemClass(e),style:e.style},[g.template?(t(),n(c(g.template),{key:1,item:e},null,8,["item"])):(t(),n(i,{key:0},[e.to&&!I.disabled(e)?(t(),n(C,{key:0,to:e.to,custom:""},{default:a((({navigate:t,href:n,isActive:i,isExactActive:l})=>[s("a",{href:n,class:I.linkClass(e,{isRouterActive:i,isExactActive:l}),onClick:n=>I.onItemClick(n,e,t),role:"treeitem","aria-expanded":I.isActive(e)},[s("span",{class:["p-menuitem-icon",e.icon]},null,2),s("span",x,d(e.label),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(t(),n("a",{key:1,href:e.url,class:I.linkClass(e),target:e.target,onClick:t=>I.onItemClick(t,e),role:"treeitem","aria-expanded":I.isActive(e),tabindex:I.disabled(e)?null:"0"},[e.items?(t(),n("span",{key:0,class:I.getSubmenuIcon(e)},null,2)):o("",!0),s("span",{class:["p-menuitem-icon",e.icon]},null,2),s("span",b,d(e.label),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),s(m,{name:"p-toggleable-content"},{default:a((()=>[p(s("div",h,[I.visible(e)&&e.items?(t(),n(A,{model:e.items,key:e.label+"_sub_",template:g.template,expandedKeys:g.expandedKeys,onItemToggle:v[1]||(v[1]=e=>u.$emit("item-toggle",e)),exact:g.exact},null,8,["model","template","expandedKeys","exact"])):o("",!0)],512),[[r,I.isActive(e)]])])),_:2},1024)],6)):o("",!0),I.visible(e)&&e.separator?(t(),n("li",{class:["p-menu-separator",e.class],style:e.style,key:"separator"+l.toString()},null,6)):o("",!0)],64)))),128))])};var g={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},components:{PanelMenuSub:v},computed:{ariaId:()=>u()}};const k={class:"p-panelmenu p-component"},f={class:"p-menuitem-text"},I={class:"p-menuitem-text"},C={key:0,class:"p-panelmenu-content"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-panelmenu .p-panelmenu-header-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),g.render=function(u,v,y,x,b,h){const g=e("router-link"),A=e("PanelMenuSub");return t(),n("div",k,[(t(!0),n(i,null,l(y.model,((e,l)=>(t(),n(i,{key:e.label+"_"+l},[h.visible(e)?(t(),n("div",{key:0,class:h.getPanelClass(e),style:e.style},[s("div",{class:h.getHeaderClass(e),style:e.style},[u.$slots.item?(t(),n(c(u.$slots.item),{key:1,item:e},null,8,["item"])):(t(),n(i,{key:0},[e.to&&!h.disabled(e)?(t(),n(g,{key:0,to:e.to,custom:""},{default:a((({navigate:i,href:l,isActive:a,isExactActive:c})=>[s("a",{href:l,class:h.getHeaderLinkClass(e,{isActive:a,isExactActive:c}),onClick:t=>h.onItemClick(t,e,i),role:"treeitem"},[e.icon?(t(),n("span",{key:0,class:h.getPanelIcon(e)},null,2)):o("",!0),s("span",f,d(e.label),1)],10,["href","onClick"])])),_:2},1032,["to"])):(t(),n("a",{key:1,href:e.url,class:h.getHeaderLinkClass(e),onClick:t=>h.onItemClick(t,e),tabindex:h.disabled(e)?null:"0","aria-expanded":h.isActive(e),id:h.ariaId+"_header","aria-controls":h.ariaId+"_content"},[e.items?(t(),n("span",{key:0,class:h.getPanelToggleIcon(e)},null,2)):o("",!0),e.icon?(t(),n("span",{key:1,class:h.getPanelIcon(e)},null,2)):o("",!0),s("span",I,d(e.label),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),s(m,{name:"p-toggleable-content"},{default:a((()=>[p(s("div",{class:"p-toggleable-content",role:"region",id:h.ariaId+"_content","aria-labelledby":h.ariaId+"_header"},[e.items?(t(),n("div",C,[s(A,{model:e.items,class:"p-panelmenu-root-submenu",template:u.$slots.item,expandedKeys:y.expandedKeys,onItemToggle:h.updateExpandedKeys,exact:y.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):o("",!0)],8,["id","aria-labelledby"]),[[r,h.isActive(e)]])])),_:2},1024)],6)):o("",!0)],64)))),128))])};export default g;
+import{resolveComponent as e,openBlock as t,createBlock as n,Fragment as l,renderList as i,withCtx as a,createVNode as s,toDisplayString as o,createCommentVNode as d,resolveDynamicComponent as c,Transition as m,withDirectives as p,vShow as r}from"vue";import{UniqueComponentId as u}from"primevue/utils";var v={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Function,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label}};const b={class:"p-submenu-list",role:"tree"},y={class:"p-menuitem-text"},x={class:"p-menuitem-text"},h={class:"p-toggleable-content"};v.render=function(u,v,g,k,f,I){const C=e("router-link"),A=e("PanelMenuSub",!0);return t(),n("ul",b,[(t(!0),n(l,null,i(g.model,((e,i)=>(t(),n(l,{key:I.label(e)+i.toString()},[I.visible(e)&&!e.separator?(t(),n("li",{key:0,role:"none",class:I.getItemClass(e),style:e.style},[g.template?(t(),n(c(g.template),{key:1,item:e},null,8,["item"])):(t(),n(l,{key:0},[e.to&&!I.disabled(e)?(t(),n(C,{key:0,to:e.to,custom:""},{default:a((({navigate:t,href:n,isActive:l,isExactActive:i})=>[s("a",{href:n,class:I.linkClass(e,{isRouterActive:l,isExactActive:i}),onClick:n=>I.onItemClick(n,e,t),role:"treeitem","aria-expanded":I.isActive(e)},[s("span",{class:["p-menuitem-icon",e.icon]},null,2),s("span",y,o(I.label(e)),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(t(),n("a",{key:1,href:e.url,class:I.linkClass(e),target:e.target,onClick:t=>I.onItemClick(t,e),role:"treeitem","aria-expanded":I.isActive(e),tabindex:I.disabled(e)?null:"0"},[e.items?(t(),n("span",{key:0,class:I.getSubmenuIcon(e)},null,2)):d("",!0),s("span",{class:["p-menuitem-icon",e.icon]},null,2),s("span",x,o(I.label(e)),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),s(m,{name:"p-toggleable-content"},{default:a((()=>[p(s("div",h,[I.visible(e)&&e.items?(t(),n(A,{model:e.items,key:I.label(e)+"_sub_",template:g.template,expandedKeys:g.expandedKeys,onItemToggle:v[1]||(v[1]=e=>u.$emit("item-toggle",e)),exact:g.exact},null,8,["model","template","expandedKeys","exact"])):d("",!0)],512),[[r,I.isActive(e)]])])),_:2},1024)],6)):d("",!0),I.visible(e)&&e.separator?(t(),n("li",{class:["p-menu-separator",e.class],style:e.style,key:"separator"+i.toString()},null,6)):d("",!0)],64)))),128))])};var g={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},components:{PanelMenuSub:v},computed:{ariaId:()=>u()}};const k={class:"p-panelmenu p-component"},f={class:"p-menuitem-text"},I={class:"p-menuitem-text"},C={key:0,class:"p-panelmenu-content"};!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-panelmenu .p-panelmenu-header-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),g.render=function(u,v,b,y,x,h){const g=e("router-link"),A=e("PanelMenuSub");return t(),n("div",k,[(t(!0),n(l,null,i(b.model,((e,i)=>(t(),n(l,{key:h.label(e)+"_"+i},[h.visible(e)?(t(),n("div",{key:0,class:h.getPanelClass(e),style:e.style},[s("div",{class:h.getHeaderClass(e),style:e.style},[u.$slots.item?(t(),n(c(u.$slots.item),{key:1,item:e},null,8,["item"])):(t(),n(l,{key:0},[e.to&&!h.disabled(e)?(t(),n(g,{key:0,to:e.to,custom:""},{default:a((({navigate:l,href:i,isActive:a,isExactActive:c})=>[s("a",{href:i,class:h.getHeaderLinkClass(e,{isActive:a,isExactActive:c}),onClick:t=>h.onItemClick(t,e,l),role:"treeitem"},[e.icon?(t(),n("span",{key:0,class:h.getPanelIcon(e)},null,2)):d("",!0),s("span",f,o(h.label(e)),1)],10,["href","onClick"])])),_:2},1032,["to"])):(t(),n("a",{key:1,href:e.url,class:h.getHeaderLinkClass(e),onClick:t=>h.onItemClick(t,e),tabindex:h.disabled(e)?null:"0","aria-expanded":h.isActive(e),id:h.ariaId+"_header","aria-controls":h.ariaId+"_content"},[e.items?(t(),n("span",{key:0,class:h.getPanelToggleIcon(e)},null,2)):d("",!0),e.icon?(t(),n("span",{key:1,class:h.getPanelIcon(e)},null,2)):d("",!0),s("span",I,o(h.label(e)),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),s(m,{name:"p-toggleable-content"},{default:a((()=>[p(s("div",{class:"p-toggleable-content",role:"region",id:h.ariaId+"_content","aria-labelledby":h.ariaId+"_header"},[e.items?(t(),n("div",C,[s(A,{model:e.items,class:"p-panelmenu-root-submenu",template:u.$slots.item,expandedKeys:b.expandedKeys,onItemToggle:h.updateExpandedKeys,exact:b.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):d("",!0)],8,["id","aria-labelledby"]),[[r,h.isActive(e)]])])),_:2},1024)],6)):d("",!0)],64)))),128))])};export default g;

package/panelmenu/panelmenu.js

@@ -11,7 +11,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                 default: null
             },
             template: {
-                type: Object,
+                type: Function,
                 default: null
             },
             expandedKeys: {
@@ -79,6 +79,9 @@ this.primevue.panelmenu = (function (vue, utils) {
             },
             disabled(item) {
                 return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            },
+            label(item) {
+                return (typeof item.label === 'function' ? item.label() : item.label);
             }
         }
     };
@@ -98,7 +101,7 @@ this.primevue.panelmenu = (function (vue, utils) {
       return (vue.openBlock(), vue.createBlock("ul", _hoisted_1$1, [
         (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
           return (vue.openBlock(), vue.createBlock(vue.Fragment, {
-            key: item.label + i.toString()
+            key: $options.label(item) + i.toString()
           }, [
             ($options.visible(item) && !item.separator)
               ? (vue.openBlock(), vue.createBlock("li", {
@@ -126,7 +129,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                                   vue.createVNode("span", {
                                     class: ['p-menuitem-icon', item.icon]
                                   }, null, 2),
-                                  vue.createVNode("span", _hoisted_2$1, vue.toDisplayString(item.label), 1)
+                                  vue.createVNode("span", _hoisted_2$1, vue.toDisplayString($options.label(item)), 1)
                                 ], 10, ["href", "onClick", "aria-expanded"])
                               ]),
                               _: 2
@@ -150,7 +153,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                               vue.createVNode("span", {
                                 class: ['p-menuitem-icon', item.icon]
                               }, null, 2),
-                              vue.createVNode("span", _hoisted_3$1, vue.toDisplayString(item.label), 1)
+                              vue.createVNode("span", _hoisted_3$1, vue.toDisplayString($options.label(item)), 1)
                             ], 10, ["href", "target", "onClick", "aria-expanded", "tabindex"]))
                       ], 64))
                     : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
@@ -163,7 +166,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                         ($options.visible(item) && item.items)
                           ? (vue.openBlock(), vue.createBlock(_component_PanelMenuSub, {
                               model: item.items,
-                              key: item.label + '_sub_',
+                              key: $options.label(item) + '_sub_',
                               template: $props.template,
                               expandedKeys: $props.expandedKeys,
                               onItemToggle: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-toggle', $event))),
@@ -283,6 +286,9 @@ this.primevue.panelmenu = (function (vue, utils) {
             },
             disabled(item) {
                 return (typeof item.disabled === 'function' ? item.disabled() : item.disabled);
+            },
+            label(item) {
+                return (typeof item.label === 'function' ? item.label() : item.label);
             }
         },
         components: {
@@ -310,7 +316,7 @@ this.primevue.panelmenu = (function (vue, utils) {
       return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
         (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
           return (vue.openBlock(), vue.createBlock(vue.Fragment, {
-            key: item.label + '_' + index
+            key: $options.label(item) + '_' + index
           }, [
             ($options.visible(item))
               ? (vue.openBlock(), vue.createBlock("div", {
@@ -343,7 +349,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                                           class: $options.getPanelIcon(item)
                                         }, null, 2))
                                       : vue.createCommentVNode("", true),
-                                    vue.createVNode("span", _hoisted_2, vue.toDisplayString(item.label), 1)
+                                    vue.createVNode("span", _hoisted_2, vue.toDisplayString($options.label(item)), 1)
                                   ], 10, ["href", "onClick"])
                                 ]),
                                 _: 2
@@ -370,7 +376,7 @@ this.primevue.panelmenu = (function (vue, utils) {
                                       class: $options.getPanelIcon(item)
                                     }, null, 2))
                                   : vue.createCommentVNode("", true),
-                                vue.createVNode("span", _hoisted_3, vue.toDisplayString(item.label), 1)
+                                vue.createVNode("span", _hoisted_3, vue.toDisplayString($options.label(item)), 1)
                               ], 10, ["href", "onClick", "tabindex", "aria-expanded", "id", "aria-controls"]))
                         ], 64))
                       : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {

package/panelmenu/panelmenu.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.panelmenu=function(e,t){"use strict";var n={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Object,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled}};const l={class:"p-submenu-list",role:"tree"},a={class:"p-menuitem-text"},i={class:"p-menuitem-text"},o={class:"p-toggleable-content"};n.render=function(t,n,s,c,r,d){const m=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub",!0);return e.openBlock(),e.createBlock("ul",l,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(s.model,((l,c)=>(e.openBlock(),e.createBlock(e.Fragment,{key:l.label+c.toString()},[d.visible(l)&&!l.separator?(e.openBlock(),e.createBlock("li",{key:0,role:"none",class:d.getItemClass(l),style:l.style},[s.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.template),{key:1,item:l},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[l.to&&!d.disabled(l)?(e.openBlock(),e.createBlock(m,{key:0,to:l.to,custom:""},{default:e.withCtx((({navigate:t,href:n,isActive:i,isExactActive:o})=>[e.createVNode("a",{href:n,class:d.linkClass(l,{isRouterActive:i,isExactActive:o}),onClick:e=>d.onItemClick(e,l,t),role:"treeitem","aria-expanded":d.isActive(l)},[e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",a,e.toDisplayString(l.label),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:l.url,class:d.linkClass(l),target:l.target,onClick:e=>d.onItemClick(e,l),role:"treeitem","aria-expanded":d.isActive(l),tabindex:d.disabled(l)?null:"0"},[l.items?(e.openBlock(),e.createBlock("span",{key:0,class:d.getSubmenuIcon(l)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",i,e.toDisplayString(l.label),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",o,[d.visible(l)&&l.items?(e.openBlock(),e.createBlock(p,{model:l.items,key:l.label+"_sub_",template:s.template,expandedKeys:s.expandedKeys,onItemToggle:n[1]||(n[1]=e=>t.$emit("item-toggle",e)),exact:s.exact},null,8,["model","template","expandedKeys","exact"])):e.createCommentVNode("",!0)],512),[[e.vShow,d.isActive(l)]])])),_:2},1024)],6)):e.createCommentVNode("",!0),d.visible(l)&&l.separator?(e.openBlock(),e.createBlock("li",{class:["p-menu-separator",l.class],style:l.style,key:"separator"+c.toString()},null,6)):e.createCommentVNode("",!0)],64)))),128))])};var s={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled},components:{PanelMenuSub:n},computed:{ariaId:()=>t.UniqueComponentId()}};const c={class:"p-panelmenu p-component"},r={class:"p-menuitem-text"},d={class:"p-menuitem-text"},m={key:0,class:"p-panelmenu-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panelmenu .p-panelmenu-header-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),s.render=function(t,n,l,a,i,o){const s=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub");return e.openBlock(),e.createBlock("div",c,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(l.model,((n,a)=>(e.openBlock(),e.createBlock(e.Fragment,{key:n.label+"_"+a},[o.visible(n)?(e.openBlock(),e.createBlock("div",{key:0,class:o.getPanelClass(n),style:n.style},[e.createVNode("div",{class:o.getHeaderClass(n),style:n.style},[t.$slots.item?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.$slots.item),{key:1,item:n},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[n.to&&!o.disabled(n)?(e.openBlock(),e.createBlock(s,{key:0,to:n.to,custom:""},{default:e.withCtx((({navigate:t,href:l,isActive:a,isExactActive:i})=>[e.createVNode("a",{href:l,class:o.getHeaderLinkClass(n,{isActive:a,isExactActive:i}),onClick:e=>o.onItemClick(e,n,t),role:"treeitem"},[n.icon?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",r,e.toDisplayString(n.label),1)],10,["href","onClick"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:n.url,class:o.getHeaderLinkClass(n),onClick:e=>o.onItemClick(e,n),tabindex:o.disabled(n)?null:"0","aria-expanded":o.isActive(n),id:o.ariaId+"_header","aria-controls":o.ariaId+"_content"},[n.items?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelToggleIcon(n)},null,2)):e.createCommentVNode("",!0),n.icon?(e.openBlock(),e.createBlock("span",{key:1,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",d,e.toDisplayString(n.label),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",{class:"p-toggleable-content",role:"region",id:o.ariaId+"_content","aria-labelledby":o.ariaId+"_header"},[n.items?(e.openBlock(),e.createBlock("div",m,[e.createVNode(p,{model:n.items,class:"p-panelmenu-root-submenu",template:t.$slots.item,expandedKeys:l.expandedKeys,onItemToggle:o.updateExpandedKeys,exact:l.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):e.createCommentVNode("",!0)],8,["id","aria-labelledby"]),[[e.vShow,o.isActive(n)]])])),_:2},1024)],6)):e.createCommentVNode("",!0)],64)))),128))])},s}(Vue,primevue.utils);
+this.primevue=this.primevue||{},this.primevue.panelmenu=function(e,t){"use strict";var n={name:"PanelMenuSub",emits:["item-toggle"],props:{model:{type:null,default:null},template:{type:Function,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.$emit("item-toggle",{item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},getItemClass:e=>["p-menuitem",e.className],linkClass(e,t){return["p-menuitem-link",{"p-disabled":this.disabled(e),"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getSubmenuIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi pi-fw",{"pi-angle-right":!t,"pi-angle-down":t}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label}};const l={class:"p-submenu-list",role:"tree"},a={class:"p-menuitem-text"},i={class:"p-menuitem-text"},o={class:"p-toggleable-content"};n.render=function(t,n,s,c,r,d){const m=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub",!0);return e.openBlock(),e.createBlock("ul",l,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(s.model,((l,c)=>(e.openBlock(),e.createBlock(e.Fragment,{key:d.label(l)+c.toString()},[d.visible(l)&&!l.separator?(e.openBlock(),e.createBlock("li",{key:0,role:"none",class:d.getItemClass(l),style:l.style},[s.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(s.template),{key:1,item:l},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[l.to&&!d.disabled(l)?(e.openBlock(),e.createBlock(m,{key:0,to:l.to,custom:""},{default:e.withCtx((({navigate:t,href:n,isActive:i,isExactActive:o})=>[e.createVNode("a",{href:n,class:d.linkClass(l,{isRouterActive:i,isExactActive:o}),onClick:e=>d.onItemClick(e,l,t),role:"treeitem","aria-expanded":d.isActive(l)},[e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",a,e.toDisplayString(d.label(l)),1)],10,["href","onClick","aria-expanded"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:l.url,class:d.linkClass(l),target:l.target,onClick:e=>d.onItemClick(e,l),role:"treeitem","aria-expanded":d.isActive(l),tabindex:d.disabled(l)?null:"0"},[l.items?(e.openBlock(),e.createBlock("span",{key:0,class:d.getSubmenuIcon(l)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",{class:["p-menuitem-icon",l.icon]},null,2),e.createVNode("span",i,e.toDisplayString(d.label(l)),1)],10,["href","target","onClick","aria-expanded","tabindex"]))],64)),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",o,[d.visible(l)&&l.items?(e.openBlock(),e.createBlock(p,{model:l.items,key:d.label(l)+"_sub_",template:s.template,expandedKeys:s.expandedKeys,onItemToggle:n[1]||(n[1]=e=>t.$emit("item-toggle",e)),exact:s.exact},null,8,["model","template","expandedKeys","exact"])):e.createCommentVNode("",!0)],512),[[e.vShow,d.isActive(l)]])])),_:2},1024)],6)):e.createCommentVNode("",!0),d.visible(l)&&l.separator?(e.openBlock(),e.createBlock("li",{class:["p-menu-separator",l.class],style:l.style,key:"separator"+c.toString()},null,6)):e.createCommentVNode("",!0)],64)))),128))])};var s={name:"PanelMenu",emits:["update:expandedKeys"],props:{model:{type:Array,default:null},expandedKeys:{type:null,default:null},exact:{type:Boolean,default:!0}},data:()=>({activeItem:null}),methods:{onItemClick(e,t,n){this.isActive(t)&&null===this.activeItem&&(this.activeItem=t),this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),this.activeItem&&this.activeItem===t?this.activeItem=null:this.activeItem=t,this.updateExpandedKeys({item:t,expanded:null!=this.activeItem}),t.to&&n&&n(e))},updateExpandedKeys(e){if(this.expandedKeys){let t=e.item,n={...this.expandedKeys};e.expanded?n[t.key]=!0:delete n[t.key],this.$emit("update:expandedKeys",n)}},getPanelClass:e=>["p-panelmenu-panel",e.class],getPanelToggleIcon(e){const t=this.isActive(e);return["p-panelmenu-icon pi",{"pi-chevron-right":!t," pi-chevron-down":t}]},getPanelIcon:e=>["p-menuitem-icon",e.icon],getHeaderLinkClass(e,t){return["p-panelmenu-header-link",{"router-link-active":t&&t.isActive,"router-link-active-exact":this.exact&&t&&t.isExactActive}]},isActive(e){return this.expandedKeys?this.expandedKeys[e.key]:e===this.activeItem},getHeaderClass(e){return["p-component p-panelmenu-header",{"p-highlight":this.isActive(e),"p-disabled":this.disabled(e)}]},visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label},components:{PanelMenuSub:n},computed:{ariaId:()=>t.UniqueComponentId()}};const c={class:"p-panelmenu p-component"},r={class:"p-menuitem-text"},d={class:"p-menuitem-text"},m={key:0,class:"p-panelmenu-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===n&&l.firstChild?l.insertBefore(a,l.firstChild):l.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-panelmenu .p-panelmenu-header-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    position: relative;\n    text-decoration: none;\n}\n.p-panelmenu .p-panelmenu-header-link:focus {\n    z-index: 1;\n}\n.p-panelmenu .p-submenu-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-panelmenu .p-menuitem-link {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    cursor: pointer;\n    text-decoration: none;\n}\n.p-panelmenu .p-menuitem-text {\n    line-height: 1;\n}\n"),s.render=function(t,n,l,a,i,o){const s=e.resolveComponent("router-link"),p=e.resolveComponent("PanelMenuSub");return e.openBlock(),e.createBlock("div",c,[(e.openBlock(!0),e.createBlock(e.Fragment,null,e.renderList(l.model,((n,a)=>(e.openBlock(),e.createBlock(e.Fragment,{key:o.label(n)+"_"+a},[o.visible(n)?(e.openBlock(),e.createBlock("div",{key:0,class:o.getPanelClass(n),style:n.style},[e.createVNode("div",{class:o.getHeaderClass(n),style:n.style},[t.$slots.item?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.$slots.item),{key:1,item:n},null,8,["item"])):(e.openBlock(),e.createBlock(e.Fragment,{key:0},[n.to&&!o.disabled(n)?(e.openBlock(),e.createBlock(s,{key:0,to:n.to,custom:""},{default:e.withCtx((({navigate:t,href:l,isActive:a,isExactActive:i})=>[e.createVNode("a",{href:l,class:o.getHeaderLinkClass(n,{isActive:a,isExactActive:i}),onClick:e=>o.onItemClick(e,n,t),role:"treeitem"},[n.icon?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",r,e.toDisplayString(o.label(n)),1)],10,["href","onClick"])])),_:2},1032,["to"])):(e.openBlock(),e.createBlock("a",{key:1,href:n.url,class:o.getHeaderLinkClass(n),onClick:e=>o.onItemClick(e,n),tabindex:o.disabled(n)?null:"0","aria-expanded":o.isActive(n),id:o.ariaId+"_header","aria-controls":o.ariaId+"_content"},[n.items?(e.openBlock(),e.createBlock("span",{key:0,class:o.getPanelToggleIcon(n)},null,2)):e.createCommentVNode("",!0),n.icon?(e.openBlock(),e.createBlock("span",{key:1,class:o.getPanelIcon(n)},null,2)):e.createCommentVNode("",!0),e.createVNode("span",d,e.toDisplayString(o.label(n)),1)],10,["href","onClick","tabindex","aria-expanded","id","aria-controls"]))],64))],6),e.createVNode(e.Transition,{name:"p-toggleable-content"},{default:e.withCtx((()=>[e.withDirectives(e.createVNode("div",{class:"p-toggleable-content",role:"region",id:o.ariaId+"_content","aria-labelledby":o.ariaId+"_header"},[n.items?(e.openBlock(),e.createBlock("div",m,[e.createVNode(p,{model:n.items,class:"p-panelmenu-root-submenu",template:t.$slots.item,expandedKeys:l.expandedKeys,onItemToggle:o.updateExpandedKeys,exact:l.exact},null,8,["model","template","expandedKeys","onItemToggle","exact"])])):e.createCommentVNode("",!0)],8,["id","aria-labelledby"]),[[e.vShow,o.isActive(n)]])])),_:2},1024)],6)):e.createCommentVNode("",!0)],64)))),128))])},s}(Vue,primevue.utils);

package/picklist/PickList.d.ts

@@ -10,6 +10,11 @@ interface PickListProps {
     breakpoint?: string;
 }
 
+interface PickListItemSlotInterface {
+    item: any;
+    index: number;
+}
+
 declare class PickList {
     $props: PickListProps;
     $emit(eventName: 'update:modelValue', value: any[]): this;
@@ -22,9 +27,15 @@ declare class PickList {
     $emit(eventName: 'move-all-tou-source', e: { originalEvent: Event, items: [] }): this;
     $slots: {
         header: VNode[];
-        item: VNode[];
-        sourceHeader: VNode[];
-        targetHeader: VNode[];
+        item: PickListItemSlotInterface;
+        sourceheader: VNode[];
+        targetheader: VNode[];
+        sourcecontrolsstart: VNode[];
+        sourcecontrolsend: VNode[];
+        movecontrolsstart: VNode[];
+        movecontrolsend: VNode[];
+        targetcontrolsstart: VNode[];
+        targetcontrolsend: VNode[];
     }
 }
 

package/picklist/PickList.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="p-picklist p-component">
         <div class="p-picklist-buttons p-picklist-source-controls">
+            <slot name="sourcecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 0)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 0)"></PLButton>
+            <slot name="sourcecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-            <div class="p-picklist-header" v-if="$slots.sourceHeader">
-                <slot name="sourceHeader"></slot>
+            <div class="p-picklist-header" v-if="$slots.sourceheader">
+                <slot name="sourceheader"></slot>
             </div>
             <transition-group ref="sourceList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-source" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of sourceList" :key="getItemKey(item, i)">
@@ -21,14 +23,16 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons p-picklist-transfer-buttons">
+            <slot name="movecontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-right" @click="moveToTarget"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-right" @click="moveAllToTarget"></PLButton>
             <PLButton type="button" icon="pi pi-angle-left" @click="moveToSource"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-left" @click="moveAllToSource"></PLButton>
+            <slot name="movecontrolsend"></slot>
         </div>
         <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-            <div class="p-picklist-header" v-if="$slots.targetHeader">
-                <slot name="targetHeader"></slot>
+            <div class="p-picklist-header" v-if="$slots.targetheader">
+                <slot name="targetheader"></slot>
             </div>
             <transition-group ref="targetList" name="p-picklist-flip" tag="ul" class="p-picklist-list p-picklist-target" :style="listStyle" role="listbox" aria-multiselectable="multiple">
                 <template v-for="(item, i) of targetList" :key="getItemKey(item, i)">
@@ -41,10 +45,12 @@
             </transition-group>
         </div>
         <div class="p-picklist-buttons p-picklist-target-controls">
+            <slot name="targetcontrolsstart"></slot>
             <PLButton type="button" icon="pi pi-angle-up" @click="moveUp($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-up" @click="moveTop($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-down" @click="moveDown($event, 1)"></PLButton>
             <PLButton type="button" icon="pi pi-angle-double-down" @click="moveBottom($event, 1)"></PLButton>
+            <slot name="targetcontrolsend"></slot>
         </div>
     </div>
 </template>

package/picklist/picklist.cjs.js

@@ -535,6 +535,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (vue.openBlock(), vue.createBlock("div", _hoisted_1, [
     vue.createVNode("div", _hoisted_2, [
+      vue.renderSlot(_ctx.$slots, "sourcecontrolsstart"),
       vue.createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-up",
@@ -554,12 +555,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-down",
         onClick: _cache[4] || (_cache[4] = $event => ($options.moveBottom($event, 0)))
-      })
+      }),
+      vue.renderSlot(_ctx.$slots, "sourcecontrolsend")
     ]),
     vue.createVNode("div", _hoisted_3, [
-      (_ctx.$slots.sourceHeader)
+      (_ctx.$slots.sourceheader)
         ? (vue.openBlock(), vue.createBlock("div", _hoisted_4, [
-            vue.renderSlot(_ctx.$slots, "sourceHeader")
+            vue.renderSlot(_ctx.$slots, "sourceheader")
           ]))
         : vue.createCommentVNode("", true),
       vue.createVNode(vue.TransitionGroup, {
@@ -597,6 +599,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["style"])
     ]),
     vue.createVNode("div", _hoisted_5, [
+      vue.renderSlot(_ctx.$slots, "movecontrolsstart"),
       vue.createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-right",
@@ -616,12 +619,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-left",
         onClick: $options.moveAllToSource
-      }, null, 8, ["onClick"])
+      }, null, 8, ["onClick"]),
+      vue.renderSlot(_ctx.$slots, "movecontrolsend")
     ]),
     vue.createVNode("div", _hoisted_6, [
-      (_ctx.$slots.targetHeader)
+      (_ctx.$slots.targetheader)
         ? (vue.openBlock(), vue.createBlock("div", _hoisted_7, [
-            vue.renderSlot(_ctx.$slots, "targetHeader")
+            vue.renderSlot(_ctx.$slots, "targetheader")
           ]))
         : vue.createCommentVNode("", true),
       vue.createVNode(vue.TransitionGroup, {
@@ -659,6 +663,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["style"])
     ]),
     vue.createVNode("div", _hoisted_8, [
+      vue.renderSlot(_ctx.$slots, "targetcontrolsstart"),
       vue.createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-up",
@@ -678,7 +683,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-down",
         onClick: _cache[10] || (_cache[10] = $event => ($options.moveBottom($event, 1)))
-      })
+      }),
+      vue.renderSlot(_ctx.$slots, "targetcontrolsend")
     ])
   ]))
 }

package/picklist/picklist.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),t=require("primevue/utils"),i=require("primevue/ripple"),l=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),s=n(i),r={name:"PickList",emits:["update:modelValue","reorder","update:selection","selection-change","move-to-target","move-to-source","move-all-to-target","move-all-to-source"],props:{modelValue:{type:Array,default:()=>[[],[]]},selection:{type:Array,default:()=>[[],[]]},dataKey:{type:String,default:null},listStyle:{type:null,default:null},metaKeySelection:{type:Boolean,default:!0},responsive:{type:Boolean,default:!0},breakpoint:{type:String,default:"960px"}},itemTouched:!1,reorderDirection:null,styleElement:null,data(){return{d_selection:this.selection}},updated(){this.reorderDirection&&(this.updateListScroll(this.$refs.sourceList.$el),this.updateListScroll(this.$refs.targetList.$el),this.reorderDirection=null)},beforeUnmount(){this.destroyStyle()},mounted(){this.responsive&&this.createStyle()},watch:{selection(e){this.d_selection=e}},methods:{getItemKey(e,i){return this.dataKey?t.ObjectUtils.resolveFieldData(e,this.dataKey):i},isSelected(e,i){return-1!=t.ObjectUtils.findIndexInList(e,this.d_selection[i])},moveUp(e,i){if(this.d_selection&&this.d_selection[i]){let l=[...this.modelValue[i]],n=this.d_selection[i];for(let e=0;e<n.length;e++){let i=n[e],o=t.ObjectUtils.findIndexInList(i,l);if(0===o)break;{let e=l[o],t=l[o-1];l[o-1]=e,l[o]=t}}let o=[...this.modelValue];o[i]=l,this.reorderDirection="up",this.$emit("update:modelValue",o),this.$emit("reorder",{originalEvent:e,value:o,direction:this.reorderDirection,listIndex:i})}},moveTop(e,i){if(this.d_selection){let l=[...this.modelValue[i]],n=this.d_selection[i];for(let e=0;e<n.length;e++){let i=n[e],o=t.ObjectUtils.findIndexInList(i,l);if(0===o)break;{let e=l.splice(o,1)[0];l.unshift(e)}}let o=[...this.modelValue];o[i]=l,this.reorderDirection="top",this.$emit("update:modelValue",o),this.$emit("reorder",{originalEvent:e,value:o,direction:this.reorderDirection,listIndex:i})}},moveDown(e,i){if(this.d_selection){let l=[...this.modelValue[i]],n=this.d_selection[i];for(let e=n.length-1;e>=0;e--){let i=n[e],o=t.ObjectUtils.findIndexInList(i,l);if(o===l.length-1)break;{let e=l[o],t=l[o+1];l[o+1]=e,l[o]=t}}let o=[...this.modelValue];o[i]=l,this.reorderDirection="down",this.$emit("update:modelValue",o),this.$emit("reorder",{originalEvent:e,value:o,direction:this.reorderDirection,listIndex:i})}},moveBottom(e,i){if(this.d_selection){let l=[...this.modelValue[i]],n=this.d_selection[i];for(let e=n.length-1;e>=0;e--){let i=n[e],o=t.ObjectUtils.findIndexInList(i,l);if(o===l.length-1)break;{let e=l.splice(o,1)[0];l.push(e)}}let o=[...this.modelValue];o[i]=l,this.reorderDirection="bottom",this.$emit("update:modelValue",o),this.$emit("reorder",{originalEvent:e,value:o,direction:this.reorderDirection,listIndex:i})}},moveToTarget(e){let i=this.d_selection&&this.d_selection[0]?this.d_selection[0]:null,l=[...this.modelValue[0]],n=[...this.modelValue[1]];if(i){for(let e=0;e<i.length;e++){let o=i[e];-1==t.ObjectUtils.findIndexInList(o,n)&&n.push(l.splice(t.ObjectUtils.findIndexInList(o,l),1)[0])}let o=[...this.modelValue];o[0]=l,o[1]=n,this.$emit("update:modelValue",o),this.$emit("move-to-target",{originalEvent:e,items:i}),this.d_selection[0]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveAllToTarget(e){if(this.modelValue[0]){let t=[...this.modelValue[0]],i=[...this.modelValue[1]];this.$emit("move-all-to-target",{originalEvent:e,items:t}),i=[...i,...t],t=[];let l=[...this.modelValue];l[0]=t,l[1]=i,this.$emit("update:modelValue",l),this.d_selection[0]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveToSource(e){let i=this.d_selection&&this.d_selection[1]?this.d_selection[1]:null,l=[...this.modelValue[0]],n=[...this.modelValue[1]];if(i){for(let e=0;e<i.length;e++){let o=i[e];-1==t.ObjectUtils.findIndexInList(o,l)&&l.push(n.splice(t.ObjectUtils.findIndexInList(o,n),1)[0])}let o=[...this.modelValue];o[0]=l,o[1]=n,this.$emit("update:modelValue",o),this.$emit("move-to-source",{originalEvent:e,items:i}),this.d_selection[1]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveAllToSource(e){if(this.modelValue[1]){let t=[...this.modelValue[0]],i=[...this.modelValue[1]];this.$emit("move-all-to-source",{originalEvent:e,items:i}),t=[...t,...i],i=[];let l=[...this.modelValue];l[0]=t,l[1]=i,this.$emit("update:modelValue",l),this.d_selection[1]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},onItemClick(e,i,l){this.itemTouched=!1;const n=this.d_selection[l],o=t.ObjectUtils.findIndexInList(i,n),s=-1!=o;let r;if(!this.itemTouched&&this.metaKeySelection){let t=e.metaKey||e.ctrlKey;s&&t?r=n.filter(((e,t)=>t!==o)):(r=t&&n?[...n]:[],r.push(i))}else s?r=n.filter(((e,t)=>t!==o)):(r=n?[...n]:[],r.push(i));let c=[...this.d_selection];c[l]=r,this.d_selection=c,this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})},onItemDblClick(e,t,i){0===i?this.moveToTarget(e):1===i&&this.moveToSource(e)},onItemTouchEnd(){this.itemTouched=!0},onItemKeyDown(e,t,i){let l=e.currentTarget;switch(e.which){case 40:var n=this.findNextItem(l);n&&n.focus(),e.preventDefault();break;case 38:var o=this.findPrevItem(l);o&&o.focus(),e.preventDefault();break;case 13:this.onItemClick(e,t,i),e.preventDefault()}},findNextItem(e){let i=e.nextElementSibling;return i?t.DomHandler.hasClass(i,"p-picklist-item")?i:this.findNextItem(i):null},findPrevItem(e){let i=e.previousElementSibling;return i?t.DomHandler.hasClass(i,"p-picklist-item")?i:this.findPrevItem(i):null},updateListScroll(e){const i=t.DomHandler.find(e,".p-picklist-item.p-highlight");if(i&&i.length)switch(this.reorderDirection){case"up":t.DomHandler.scrollInView(e,i[0]);break;case"top":e.scrollTop=0;break;case"down":t.DomHandler.scrollInView(e,i[i.length-1]);break;case"bottom":e.scrollTop=e.scrollHeight}},createStyle(){if(!this.styleElement){this.$el.setAttribute(this.attributeSelector,""),this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e=`\n@media screen and (max-width: ${this.breakpoint}) {\n    .p-picklist[${this.attributeSelector}] {\n        flex-direction: column;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-right:before {\n        content: "\\e930"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {\n        content: "\\e92c"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-left:before {\n        content: "\\e933"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {\n        content: "\\e92f"\n    }\n}\n`;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{sourceList(){return this.modelValue&&this.modelValue[0]?this.modelValue[0]:null},targetList(){return this.modelValue&&this.modelValue[1]?this.modelValue[1]:null},attributeSelector:()=>t.UniqueComponentId()},components:{PLButton:o.default},directives:{ripple:s.default}};const c={class:"p-picklist p-component"},a={class:"p-picklist-buttons p-picklist-source-controls"},d={class:"p-picklist-list-wrapper p-picklist-source-wrapper"},p={key:0,class:"p-picklist-header"},u={class:"p-picklist-buttons p-picklist-transfer-buttons"},m={class:"p-picklist-list-wrapper p-picklist-target-wrapper"},h={key:0,class:"p-picklist-header"},k={class:"p-picklist-buttons p-picklist-target-controls"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&l.firstChild?l.insertBefore(n,l.firstChild):l.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-picklist {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-picklist-buttons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-picklist-list-wrapper {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 50%;\n            flex: 1 1 50%;\n}\n.p-picklist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,\n.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {\n    -webkit-transition: none !important;\n    transition: none !important;\n}\n"),r.render=function(e,t,i,n,o,s){const r=l.resolveComponent("PLButton"),f=l.resolveDirective("ripple");return l.openBlock(),l.createBlock("div",c,[l.createVNode("div",a,[l.createVNode(r,{type:"button",icon:"pi pi-angle-up",onClick:t[1]||(t[1]=e=>s.moveUp(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-up",onClick:t[2]||(t[2]=e=>s.moveTop(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-down",onClick:t[3]||(t[3]=e=>s.moveDown(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-down",onClick:t[4]||(t[4]=e=>s.moveBottom(e,0))})]),l.createVNode("div",d,[e.$slots.sourceHeader?(l.openBlock(),l.createBlock("div",p,[l.renderSlot(e.$slots,"sourceHeader")])):l.createCommentVNode("",!0),l.createVNode(l.TransitionGroup,{ref:"sourceList",name:"p-picklist-flip",tag:"ul",class:"p-picklist-list p-picklist-source",style:i.listStyle,role:"listbox","aria-multiselectable":"multiple"},{default:l.withCtx((()=>[(l.openBlock(!0),l.createBlock(l.Fragment,null,l.renderList(s.sourceList,((i,n)=>l.withDirectives((l.openBlock(),l.createBlock("li",{key:s.getItemKey(i,n),tabindex:"0",class:["p-picklist-item",{"p-highlight":s.isSelected(i,0)}],onClick:e=>s.onItemClick(e,i,0),onDblclick:e=>s.onItemDblClick(e,i,0),onKeydown:e=>s.onItemKeyDown(e,i,0),onTouchend:t[5]||(t[5]=(...e)=>s.onItemTouchEnd&&s.onItemTouchEnd(...e)),role:"option","aria-selected":s.isSelected(i,0)},[l.renderSlot(e.$slots,"item",{item:i,index:n})],42,["onClick","onDblclick","onKeydown","aria-selected"])),[[f]]))),128))])),_:3},8,["style"])]),l.createVNode("div",u,[l.createVNode(r,{type:"button",icon:"pi pi-angle-right",onClick:s.moveToTarget},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-right",onClick:s.moveAllToTarget},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-left",onClick:s.moveToSource},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-left",onClick:s.moveAllToSource},null,8,["onClick"])]),l.createVNode("div",m,[e.$slots.targetHeader?(l.openBlock(),l.createBlock("div",h,[l.renderSlot(e.$slots,"targetHeader")])):l.createCommentVNode("",!0),l.createVNode(l.TransitionGroup,{ref:"targetList",name:"p-picklist-flip",tag:"ul",class:"p-picklist-list p-picklist-target",style:i.listStyle,role:"listbox","aria-multiselectable":"multiple"},{default:l.withCtx((()=>[(l.openBlock(!0),l.createBlock(l.Fragment,null,l.renderList(s.targetList,((i,n)=>l.withDirectives((l.openBlock(),l.createBlock("li",{key:s.getItemKey(i,n),tabindex:"0",class:["p-picklist-item",{"p-highlight":s.isSelected(i,1)}],onClick:e=>s.onItemClick(e,i,1),onDblclick:e=>s.onItemDblClick(e,i,1),onKeydown:e=>s.onItemKeyDown(e,i,1),onTouchend:t[6]||(t[6]=(...e)=>s.onItemTouchEnd&&s.onItemTouchEnd(...e)),role:"option","aria-selected":s.isSelected(i,1)},[l.renderSlot(e.$slots,"item",{item:i,index:n})],42,["onClick","onDblclick","onKeydown","aria-selected"])),[[f]]))),128))])),_:3},8,["style"])]),l.createVNode("div",k,[l.createVNode(r,{type:"button",icon:"pi pi-angle-up",onClick:t[7]||(t[7]=e=>s.moveUp(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-up",onClick:t[8]||(t[8]=e=>s.moveTop(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-down",onClick:t[9]||(t[9]=e=>s.moveDown(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-down",onClick:t[10]||(t[10]=e=>s.moveBottom(e,1))})])])},module.exports=r;
+"use strict";var e=require("primevue/button"),t=require("primevue/utils"),i=require("primevue/ripple"),l=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=o(e),s=o(i),r={name:"PickList",emits:["update:modelValue","reorder","update:selection","selection-change","move-to-target","move-to-source","move-all-to-target","move-all-to-source"],props:{modelValue:{type:Array,default:()=>[[],[]]},selection:{type:Array,default:()=>[[],[]]},dataKey:{type:String,default:null},listStyle:{type:null,default:null},metaKeySelection:{type:Boolean,default:!0},responsive:{type:Boolean,default:!0},breakpoint:{type:String,default:"960px"}},itemTouched:!1,reorderDirection:null,styleElement:null,data(){return{d_selection:this.selection}},updated(){this.reorderDirection&&(this.updateListScroll(this.$refs.sourceList.$el),this.updateListScroll(this.$refs.targetList.$el),this.reorderDirection=null)},beforeUnmount(){this.destroyStyle()},mounted(){this.responsive&&this.createStyle()},watch:{selection(e){this.d_selection=e}},methods:{getItemKey(e,i){return this.dataKey?t.ObjectUtils.resolveFieldData(e,this.dataKey):i},isSelected(e,i){return-1!=t.ObjectUtils.findIndexInList(e,this.d_selection[i])},moveUp(e,i){if(this.d_selection&&this.d_selection[i]){let l=[...this.modelValue[i]],o=this.d_selection[i];for(let e=0;e<o.length;e++){let i=o[e],n=t.ObjectUtils.findIndexInList(i,l);if(0===n)break;{let e=l[n],t=l[n-1];l[n-1]=e,l[n]=t}}let n=[...this.modelValue];n[i]=l,this.reorderDirection="up",this.$emit("update:modelValue",n),this.$emit("reorder",{originalEvent:e,value:n,direction:this.reorderDirection,listIndex:i})}},moveTop(e,i){if(this.d_selection){let l=[...this.modelValue[i]],o=this.d_selection[i];for(let e=0;e<o.length;e++){let i=o[e],n=t.ObjectUtils.findIndexInList(i,l);if(0===n)break;{let e=l.splice(n,1)[0];l.unshift(e)}}let n=[...this.modelValue];n[i]=l,this.reorderDirection="top",this.$emit("update:modelValue",n),this.$emit("reorder",{originalEvent:e,value:n,direction:this.reorderDirection,listIndex:i})}},moveDown(e,i){if(this.d_selection){let l=[...this.modelValue[i]],o=this.d_selection[i];for(let e=o.length-1;e>=0;e--){let i=o[e],n=t.ObjectUtils.findIndexInList(i,l);if(n===l.length-1)break;{let e=l[n],t=l[n+1];l[n+1]=e,l[n]=t}}let n=[...this.modelValue];n[i]=l,this.reorderDirection="down",this.$emit("update:modelValue",n),this.$emit("reorder",{originalEvent:e,value:n,direction:this.reorderDirection,listIndex:i})}},moveBottom(e,i){if(this.d_selection){let l=[...this.modelValue[i]],o=this.d_selection[i];for(let e=o.length-1;e>=0;e--){let i=o[e],n=t.ObjectUtils.findIndexInList(i,l);if(n===l.length-1)break;{let e=l.splice(n,1)[0];l.push(e)}}let n=[...this.modelValue];n[i]=l,this.reorderDirection="bottom",this.$emit("update:modelValue",n),this.$emit("reorder",{originalEvent:e,value:n,direction:this.reorderDirection,listIndex:i})}},moveToTarget(e){let i=this.d_selection&&this.d_selection[0]?this.d_selection[0]:null,l=[...this.modelValue[0]],o=[...this.modelValue[1]];if(i){for(let e=0;e<i.length;e++){let n=i[e];-1==t.ObjectUtils.findIndexInList(n,o)&&o.push(l.splice(t.ObjectUtils.findIndexInList(n,l),1)[0])}let n=[...this.modelValue];n[0]=l,n[1]=o,this.$emit("update:modelValue",n),this.$emit("move-to-target",{originalEvent:e,items:i}),this.d_selection[0]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveAllToTarget(e){if(this.modelValue[0]){let t=[...this.modelValue[0]],i=[...this.modelValue[1]];this.$emit("move-all-to-target",{originalEvent:e,items:t}),i=[...i,...t],t=[];let l=[...this.modelValue];l[0]=t,l[1]=i,this.$emit("update:modelValue",l),this.d_selection[0]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveToSource(e){let i=this.d_selection&&this.d_selection[1]?this.d_selection[1]:null,l=[...this.modelValue[0]],o=[...this.modelValue[1]];if(i){for(let e=0;e<i.length;e++){let n=i[e];-1==t.ObjectUtils.findIndexInList(n,l)&&l.push(o.splice(t.ObjectUtils.findIndexInList(n,o),1)[0])}let n=[...this.modelValue];n[0]=l,n[1]=o,this.$emit("update:modelValue",n),this.$emit("move-to-source",{originalEvent:e,items:i}),this.d_selection[1]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},moveAllToSource(e){if(this.modelValue[1]){let t=[...this.modelValue[0]],i=[...this.modelValue[1]];this.$emit("move-all-to-source",{originalEvent:e,items:i}),t=[...t,...i],i=[];let l=[...this.modelValue];l[0]=t,l[1]=i,this.$emit("update:modelValue",l),this.d_selection[1]=[],this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})}},onItemClick(e,i,l){this.itemTouched=!1;const o=this.d_selection[l],n=t.ObjectUtils.findIndexInList(i,o),s=-1!=n;let r;if(!this.itemTouched&&this.metaKeySelection){let t=e.metaKey||e.ctrlKey;s&&t?r=o.filter(((e,t)=>t!==n)):(r=t&&o?[...o]:[],r.push(i))}else s?r=o.filter(((e,t)=>t!==n)):(r=o?[...o]:[],r.push(i));let c=[...this.d_selection];c[l]=r,this.d_selection=c,this.$emit("update:selection",this.d_selection),this.$emit("selection-change",{originalEvent:e,value:this.d_selection})},onItemDblClick(e,t,i){0===i?this.moveToTarget(e):1===i&&this.moveToSource(e)},onItemTouchEnd(){this.itemTouched=!0},onItemKeyDown(e,t,i){let l=e.currentTarget;switch(e.which){case 40:var o=this.findNextItem(l);o&&o.focus(),e.preventDefault();break;case 38:var n=this.findPrevItem(l);n&&n.focus(),e.preventDefault();break;case 13:this.onItemClick(e,t,i),e.preventDefault()}},findNextItem(e){let i=e.nextElementSibling;return i?t.DomHandler.hasClass(i,"p-picklist-item")?i:this.findNextItem(i):null},findPrevItem(e){let i=e.previousElementSibling;return i?t.DomHandler.hasClass(i,"p-picklist-item")?i:this.findPrevItem(i):null},updateListScroll(e){const i=t.DomHandler.find(e,".p-picklist-item.p-highlight");if(i&&i.length)switch(this.reorderDirection){case"up":t.DomHandler.scrollInView(e,i[0]);break;case"top":e.scrollTop=0;break;case"down":t.DomHandler.scrollInView(e,i[i.length-1]);break;case"bottom":e.scrollTop=e.scrollHeight}},createStyle(){if(!this.styleElement){this.$el.setAttribute(this.attributeSelector,""),this.styleElement=document.createElement("style"),this.styleElement.type="text/css",document.head.appendChild(this.styleElement);let e=`\n@media screen and (max-width: ${this.breakpoint}) {\n    .p-picklist[${this.attributeSelector}] {\n        flex-direction: column;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons {\n        padding: var(--content-padding);\n        flex-direction: row;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button {\n        margin-right: var(--inline-spacing);\n        margin-bottom: 0;\n    }\n\n    .p-picklist[${this.attributeSelector}] .p-picklist-buttons .p-button:last-child {\n        margin-right: 0;\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-right:before {\n        content: "\\e930"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-double-right:before {\n        content: "\\e92c"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-left:before {\n        content: "\\e933"\n    }\n\n    .p-picklist[${this.attributeSelector}] .pi-angle-double-left:before {\n        content: "\\e92f"\n    }\n}\n`;this.styleElement.innerHTML=e}},destroyStyle(){this.styleElement&&(document.head.removeChild(this.styleElement),this.styleElement=null)}},computed:{sourceList(){return this.modelValue&&this.modelValue[0]?this.modelValue[0]:null},targetList(){return this.modelValue&&this.modelValue[1]?this.modelValue[1]:null},attributeSelector:()=>t.UniqueComponentId()},components:{PLButton:n.default},directives:{ripple:s.default}};const c={class:"p-picklist p-component"},a={class:"p-picklist-buttons p-picklist-source-controls"},d={class:"p-picklist-list-wrapper p-picklist-source-wrapper"},p={key:0,class:"p-picklist-header"},u={class:"p-picklist-buttons p-picklist-transfer-buttons"},h={class:"p-picklist-list-wrapper p-picklist-target-wrapper"},m={key:0,class:"p-picklist-header"},k={class:"p-picklist-buttons p-picklist-target-controls"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===i&&l.firstChild?l.insertBefore(o,l.firstChild):l.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-picklist {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-picklist-buttons {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-picklist-list-wrapper {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 50%;\n            flex: 1 1 50%;\n}\n.p-picklist-list {\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow: auto;\n    min-height: 12rem;\n    max-height: 24rem;\n}\n.p-picklist-item {\n    cursor: pointer;\n    overflow: hidden;\n    position: relative;\n}\n.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,\n.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {\n    -webkit-transition: none !important;\n    transition: none !important;\n}\n"),r.render=function(e,t,i,o,n,s){const r=l.resolveComponent("PLButton"),f=l.resolveDirective("ripple");return l.openBlock(),l.createBlock("div",c,[l.createVNode("div",a,[l.renderSlot(e.$slots,"sourcecontrolsstart"),l.createVNode(r,{type:"button",icon:"pi pi-angle-up",onClick:t[1]||(t[1]=e=>s.moveUp(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-up",onClick:t[2]||(t[2]=e=>s.moveTop(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-down",onClick:t[3]||(t[3]=e=>s.moveDown(e,0))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-down",onClick:t[4]||(t[4]=e=>s.moveBottom(e,0))}),l.renderSlot(e.$slots,"sourcecontrolsend")]),l.createVNode("div",d,[e.$slots.sourceheader?(l.openBlock(),l.createBlock("div",p,[l.renderSlot(e.$slots,"sourceheader")])):l.createCommentVNode("",!0),l.createVNode(l.TransitionGroup,{ref:"sourceList",name:"p-picklist-flip",tag:"ul",class:"p-picklist-list p-picklist-source",style:i.listStyle,role:"listbox","aria-multiselectable":"multiple"},{default:l.withCtx((()=>[(l.openBlock(!0),l.createBlock(l.Fragment,null,l.renderList(s.sourceList,((i,o)=>l.withDirectives((l.openBlock(),l.createBlock("li",{key:s.getItemKey(i,o),tabindex:"0",class:["p-picklist-item",{"p-highlight":s.isSelected(i,0)}],onClick:e=>s.onItemClick(e,i,0),onDblclick:e=>s.onItemDblClick(e,i,0),onKeydown:e=>s.onItemKeyDown(e,i,0),onTouchend:t[5]||(t[5]=(...e)=>s.onItemTouchEnd&&s.onItemTouchEnd(...e)),role:"option","aria-selected":s.isSelected(i,0)},[l.renderSlot(e.$slots,"item",{item:i,index:o})],42,["onClick","onDblclick","onKeydown","aria-selected"])),[[f]]))),128))])),_:3},8,["style"])]),l.createVNode("div",u,[l.renderSlot(e.$slots,"movecontrolsstart"),l.createVNode(r,{type:"button",icon:"pi pi-angle-right",onClick:s.moveToTarget},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-right",onClick:s.moveAllToTarget},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-left",onClick:s.moveToSource},null,8,["onClick"]),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-left",onClick:s.moveAllToSource},null,8,["onClick"]),l.renderSlot(e.$slots,"movecontrolsend")]),l.createVNode("div",h,[e.$slots.targetheader?(l.openBlock(),l.createBlock("div",m,[l.renderSlot(e.$slots,"targetheader")])):l.createCommentVNode("",!0),l.createVNode(l.TransitionGroup,{ref:"targetList",name:"p-picklist-flip",tag:"ul",class:"p-picklist-list p-picklist-target",style:i.listStyle,role:"listbox","aria-multiselectable":"multiple"},{default:l.withCtx((()=>[(l.openBlock(!0),l.createBlock(l.Fragment,null,l.renderList(s.targetList,((i,o)=>l.withDirectives((l.openBlock(),l.createBlock("li",{key:s.getItemKey(i,o),tabindex:"0",class:["p-picklist-item",{"p-highlight":s.isSelected(i,1)}],onClick:e=>s.onItemClick(e,i,1),onDblclick:e=>s.onItemDblClick(e,i,1),onKeydown:e=>s.onItemKeyDown(e,i,1),onTouchend:t[6]||(t[6]=(...e)=>s.onItemTouchEnd&&s.onItemTouchEnd(...e)),role:"option","aria-selected":s.isSelected(i,1)},[l.renderSlot(e.$slots,"item",{item:i,index:o})],42,["onClick","onDblclick","onKeydown","aria-selected"])),[[f]]))),128))])),_:3},8,["style"])]),l.createVNode("div",k,[l.renderSlot(e.$slots,"targetcontrolsstart"),l.createVNode(r,{type:"button",icon:"pi pi-angle-up",onClick:t[7]||(t[7]=e=>s.moveUp(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-up",onClick:t[8]||(t[8]=e=>s.moveTop(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-down",onClick:t[9]||(t[9]=e=>s.moveDown(e,1))}),l.createVNode(r,{type:"button",icon:"pi pi-angle-double-down",onClick:t[10]||(t[10]=e=>s.moveBottom(e,1))}),l.renderSlot(e.$slots,"targetcontrolsend")])])},module.exports=r;

package/picklist/picklist.esm.js

@@ -528,6 +528,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 
   return (openBlock(), createBlock("div", _hoisted_1, [
     createVNode("div", _hoisted_2, [
+      renderSlot(_ctx.$slots, "sourcecontrolsstart"),
       createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-up",
@@ -547,12 +548,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-down",
         onClick: _cache[4] || (_cache[4] = $event => ($options.moveBottom($event, 0)))
-      })
+      }),
+      renderSlot(_ctx.$slots, "sourcecontrolsend")
     ]),
     createVNode("div", _hoisted_3, [
-      (_ctx.$slots.sourceHeader)
+      (_ctx.$slots.sourceheader)
         ? (openBlock(), createBlock("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "sourceHeader")
+            renderSlot(_ctx.$slots, "sourceheader")
           ]))
         : createCommentVNode("", true),
       createVNode(TransitionGroup, {
@@ -590,6 +592,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["style"])
     ]),
     createVNode("div", _hoisted_5, [
+      renderSlot(_ctx.$slots, "movecontrolsstart"),
       createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-right",
@@ -609,12 +612,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-left",
         onClick: $options.moveAllToSource
-      }, null, 8, ["onClick"])
+      }, null, 8, ["onClick"]),
+      renderSlot(_ctx.$slots, "movecontrolsend")
     ]),
     createVNode("div", _hoisted_6, [
-      (_ctx.$slots.targetHeader)
+      (_ctx.$slots.targetheader)
         ? (openBlock(), createBlock("div", _hoisted_7, [
-            renderSlot(_ctx.$slots, "targetHeader")
+            renderSlot(_ctx.$slots, "targetheader")
           ]))
         : createCommentVNode("", true),
       createVNode(TransitionGroup, {
@@ -652,6 +656,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["style"])
     ]),
     createVNode("div", _hoisted_8, [
+      renderSlot(_ctx.$slots, "targetcontrolsstart"),
       createVNode(_component_PLButton, {
         type: "button",
         icon: "pi pi-angle-up",
@@ -671,7 +676,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         type: "button",
         icon: "pi pi-angle-double-down",
         onClick: _cache[10] || (_cache[10] = $event => ($options.moveBottom($event, 1)))
-      })
+      }),
+      renderSlot(_ctx.$slots, "targetcontrolsend")
     ])
   ]))
 }