primevue 3.22.3 → 3.23.0

package/speeddial/SpeedDial.vue

@@ -115,6 +115,7 @@ export default {
     list: null,
     data() {
         return {
+            id: this.$attrs.id,
             d_visible: this.visible,
             isItemClicked: false,
             focused: false,
@@ -122,11 +123,16 @@ export default {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
             const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
@@ -515,9 +521,6 @@ export default {
                 this.maskClass
             ];
         },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
-        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }

package/speeddial/speeddial.cjs.js

@@ -78,6 +78,7 @@ var script = {
     list: null,
     data() {
         return {
+            id: this.$attrs.id,
             d_visible: this.visible,
             isItemClicked: false,
             focused: false,
@@ -85,11 +86,16 @@ var script = {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || utils.UniqueComponentId();
+        },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
+        this.id = this.id || utils.UniqueComponentId();
+
         if (this.type !== 'linear') {
             const button = utils.DomHandler.findSingle(this.container, '.p-speeddial-button');
             const firstItem = utils.DomHandler.findSingle(this.list, '.p-speeddial-item');
@@ -472,9 +478,6 @@ var script = {
                 this.maskClass
             ];
         },
-        id() {
-            return this.$attrs.id || utils.UniqueComponentId();
-        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }
@@ -513,14 +516,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onKeydown: $options.onTogglerKeydown,
           "aria-expanded": $data.d_visible,
           "aria-haspopup": true,
-          "aria-controls": $options.id + '_list',
+          "aria-controls": $data.id + '_list',
           "aria-label": _ctx.ariaLabel,
           "aria-labelledby": _ctx.ariaLabelledby
         }, null, 8, ["class", "icon", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
       ]),
       vue.createElementVNode("ul", {
         ref: $options.listRef,
-        id: $options.id + '_list',
+        id: $data.id + '_list',
         class: "p-speeddial-list",
         role: "menu",
         onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
@@ -534,9 +537,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ($options.isItemVisible(item))
               ? (vue.openBlock(), vue.createElementBlock("li", {
                   key: 0,
-                  id: `${$options.id}_${index}`,
-                  "aria-controls": `${$options.id}_item`,
-                  class: vue.normalizeClass(["p-speeddial-item", $options.itemClass(`${$options.id}_${index}`)]),
+                  id: `${$data.id}_${index}`,
+                  "aria-controls": `${$data.id}_item`,
+                  class: vue.normalizeClass(["p-speeddial-item", $options.itemClass(`${$data.id}_${index}`)]),
                   style: vue.normalizeStyle($options.getItemStyle(index)),
                   role: "menuitem"
                 }, [

package/speeddial/speeddial.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),t=require("primevue/ripple"),i=require("primevue/tooltip"),n=require("primevue/utils"),s=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),a=o(t),r=o(i),d={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{visible(e){this.d_visible=e}},mounted(){if("linear"!==this.type){const e=n.DomHandler.findSingle(this.container,".p-speeddial-button"),t=n.DomHandler.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=n.DomHandler.findSingle(this.container,"button");i&&n.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=n.DomHandler.findSingle(this.container,"button");e&&n.DomHandler.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?t.length-1:s-1,s},findNextOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?0:s+1,s},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},id(){return this.$attrs.id||n.UniqueComponentId()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:l.default},directives:{ripple:a.default,tooltip:r.default}};const c=["id","aria-activedescendant"],p=["id","aria-controls"],u=["href","target","onClick","aria-label"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),d.render=function(e,t,i,n,o,l){const a=s.resolveComponent("SDButton"),r=s.resolveDirective("tooltip"),d=s.resolveDirective("ripple");return s.openBlock(),s.createElementBlock(s.Fragment,null,[s.createElementVNode("div",{ref:l.containerRef,class:s.normalizeClass(l.containerClass),style:s.normalizeStyle(i.style)},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(a,{type:"button",class:s.normalizeClass(l.buttonClassName),icon:l.iconClassName,onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":o.d_visible,"aria-haspopup":!0,"aria-controls":l.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),s.createElementVNode("ul",{ref:l.listRef,id:l.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>l.onFocus&&l.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>l.onBlur&&l.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>l.onKeyDown&&l.onKeyDown(...e)),"aria-activedescendant":o.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.model,((t,n)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:n},[l.isItemVisible(t)?(s.openBlock(),s.createElementBlock("li",{key:0,id:`${l.id}_${n}`,"aria-controls":`${l.id}_item`,class:s.normalizeClass(["p-speeddial-item",l.itemClass(`${l.id}_${n}`)]),style:s.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:s.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(s.openBlock(),s.createElementBlock("span",{key:0,class:s.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):s.createCommentVNode("",!0)],10,u)),[[r,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[d]])],14,p)):s.createCommentVNode("",!0)],64)))),128))],40,c)],6),i.mask?(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(l.maskClassName),style:s.normalizeStyle(i.maskStyle)},null,6)):s.createCommentVNode("",!0)],64)},module.exports=d;
+"use strict";var e=require("primevue/button"),t=require("primevue/ripple"),i=require("primevue/tooltip"),n=require("primevue/utils"),s=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),a=o(t),d=o(i),r={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{id:this.$attrs.id,d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||n.UniqueComponentId()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||n.UniqueComponentId(),"linear"!==this.type){const e=n.DomHandler.findSingle(this.container,".p-speeddial-button"),t=n.DomHandler.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=n.DomHandler.findSingle(this.container,"button");i&&n.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=n.DomHandler.findSingle(this.container,"button");e&&n.DomHandler.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?t.length-1:s-1,s},findNextOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?0:s+1,s},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:l.default},directives:{ripple:a.default,tooltip:d.default}};const c=["id","aria-activedescendant"],p=["id","aria-controls"],u=["href","target","onClick","aria-label"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),r.render=function(e,t,i,n,o,l){const a=s.resolveComponent("SDButton"),d=s.resolveDirective("tooltip"),r=s.resolveDirective("ripple");return s.openBlock(),s.createElementBlock(s.Fragment,null,[s.createElementVNode("div",{ref:l.containerRef,class:s.normalizeClass(l.containerClass),style:s.normalizeStyle(i.style)},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(a,{type:"button",class:s.normalizeClass(l.buttonClassName),icon:l.iconClassName,onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":o.d_visible,"aria-haspopup":!0,"aria-controls":o.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),s.createElementVNode("ul",{ref:l.listRef,id:o.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>l.onFocus&&l.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>l.onBlur&&l.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>l.onKeyDown&&l.onKeyDown(...e)),"aria-activedescendant":o.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.model,((t,n)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:n},[l.isItemVisible(t)?(s.openBlock(),s.createElementBlock("li",{key:0,id:`${o.id}_${n}`,"aria-controls":`${o.id}_item`,class:s.normalizeClass(["p-speeddial-item",l.itemClass(`${o.id}_${n}`)]),style:s.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:s.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(s.openBlock(),s.createElementBlock("span",{key:0,class:s.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):s.createCommentVNode("",!0)],10,u)),[[d,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[r]])],14,p)):s.createCommentVNode("",!0)],64)))),128))],40,c)],6),i.mask?(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(l.maskClassName),style:s.normalizeStyle(i.maskStyle)},null,6)):s.createCommentVNode("",!0)],64)},module.exports=r;

package/speeddial/speeddial.esm.js

@@ -1,7 +1,7 @@
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createVNode, renderList, withDirectives, createCommentVNode, createBlock, resolveDynamicComponent } from 'vue';
 
 var script = {
@@ -70,6 +70,7 @@ var script = {
     list: null,
     data() {
         return {
+            id: this.$attrs.id,
             d_visible: this.visible,
             isItemClicked: false,
             focused: false,
@@ -77,11 +78,16 @@ var script = {
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         visible(newValue) {
             this.d_visible = newValue;
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         if (this.type !== 'linear') {
             const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
             const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
@@ -464,9 +470,6 @@ var script = {
                 this.maskClass
             ];
         },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
-        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
         }
@@ -505,14 +508,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           onKeydown: $options.onTogglerKeydown,
           "aria-expanded": $data.d_visible,
           "aria-haspopup": true,
-          "aria-controls": $options.id + '_list',
+          "aria-controls": $data.id + '_list',
           "aria-label": _ctx.ariaLabel,
           "aria-labelledby": _ctx.ariaLabelledby
         }, null, 8, ["class", "icon", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
       ]),
       createElementVNode("ul", {
         ref: $options.listRef,
-        id: $options.id + '_list',
+        id: $data.id + '_list',
         class: "p-speeddial-list",
         role: "menu",
         onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
@@ -526,9 +529,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             ($options.isItemVisible(item))
               ? (openBlock(), createElementBlock("li", {
                   key: 0,
-                  id: `${$options.id}_${index}`,
-                  "aria-controls": `${$options.id}_item`,
-                  class: normalizeClass(["p-speeddial-item", $options.itemClass(`${$options.id}_${index}`)]),
+                  id: `${$data.id}_${index}`,
+                  "aria-controls": `${$data.id}_item`,
+                  class: normalizeClass(["p-speeddial-item", $options.itemClass(`${$data.id}_${index}`)]),
                   style: normalizeStyle($options.getItemStyle(index)),
                   role: "menuitem"
                 }, [

package/speeddial/speeddial.esm.min.js

@@ -1 +1 @@
-import e from"primevue/button";import t from"primevue/ripple";import i from"primevue/tooltip";import{DomHandler as n,UniqueComponentId as s}from"primevue/utils";import{resolveComponent as o,resolveDirective as l,openBlock as a,createElementBlock as d,Fragment as r,createElementVNode as c,normalizeClass as p,normalizeStyle as h,renderSlot as u,createVNode as f,renderList as m,withDirectives as b,createCommentVNode as g,createBlock as y,resolveDynamicComponent as v}from"vue";var x={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{visible(e){this.d_visible=e}},mounted(){if("linear"!==this.type){const e=n.findSingle(this.container,".p-speeddial-button"),t=n.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,n.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,n.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...n.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=n.findSingle(this.container,"button");i&&n.focus(i)},onEscapeKey(){this.hide();const e=n.findSingle(this.container,"button");e&&n.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...n.find(this.container,".p-speeddial-item")].filter((e=>!n.hasClass(n.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...n.find(this.container,".p-speeddial-item")].filter((e=>!n.hasClass(n.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?t.length-1:s-1,s},findNextOptionIndex(e){const t=[...n.find(this.container,".p-speeddial-item")].filter((e=>!n.hasClass(n.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?0:s+1,s},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},id(){return this.$attrs.id||s()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:e},directives:{ripple:t,tooltip:i}};const w=["id","aria-activedescendant"],k=["id","aria-controls"],I=["href","target","onClick","aria-label"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),x.render=function(e,t,i,n,s,x){const C=o("SDButton"),D=l("tooltip"),O=l("ripple");return a(),d(r,null,[c("div",{ref:x.containerRef,class:p(x.containerClass),style:h(i.style)},[u(e.$slots,"button",{toggle:x.onClick},(()=>[f(C,{type:"button",class:p(x.buttonClassName),icon:x.iconClassName,onClick:t[0]||(t[0]=e=>x.onClick(e)),disabled:i.disabled,onKeydown:x.onTogglerKeydown,"aria-expanded":s.d_visible,"aria-haspopup":!0,"aria-controls":x.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),c("ul",{ref:x.listRef,id:x.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>x.onFocus&&x.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>x.onBlur&&x.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>x.onKeyDown&&x.onKeyDown(...e)),"aria-activedescendant":s.focused?x.focusedOptionId:void 0,tabindex:"-1"},[(a(!0),d(r,null,m(i.model,((t,n)=>(a(),d(r,{key:n},[x.isItemVisible(t)?(a(),d("li",{key:0,id:`${x.id}_${n}`,"aria-controls":`${x.id}_item`,class:p(["p-speeddial-item",x.itemClass(`${x.id}_${n}`)]),style:h(x.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(a(),y(v(e.$slots.item),{key:1,item:t},null,8,["item"])):b((a(),d("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:p(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>x.onItemClick(e,t),"aria-label":t.label},[t.icon?(a(),d("span",{key:0,class:p(["p-speeddial-action-icon",t.icon])},null,2)):g("",!0)],10,I)),[[D,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[O]])],14,k)):g("",!0)],64)))),128))],40,w)],6),i.mask?(a(),d("div",{key:0,class:p(x.maskClassName),style:h(i.maskStyle)},null,6)):g("",!0)],64)};export{x as default};
+import e from"primevue/button";import t from"primevue/ripple";import i from"primevue/tooltip";import{UniqueComponentId as n,DomHandler as s}from"primevue/utils";import{resolveComponent as o,resolveDirective as l,openBlock as a,createElementBlock as d,Fragment as r,createElementVNode as c,normalizeClass as p,normalizeStyle as h,renderSlot as u,createVNode as f,renderList as m,withDirectives as b,createCommentVNode as g,createBlock as y,resolveDynamicComponent as v}from"vue";var x={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{id:this.$attrs.id,d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||n()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||n(),"linear"!==this.type){const e=s.findSingle(this.container,".p-speeddial-button"),t=s.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,s.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,s.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...s.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=s.findSingle(this.container,"button");i&&s.focus(i)},onEscapeKey(){this.hide();const e=s.findSingle(this.container,"button");e&&s.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...s.find(this.container,".p-speeddial-item")].filter((e=>!s.hasClass(s.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...s.find(this.container,".p-speeddial-item")].filter((e=>!s.hasClass(s.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let n=t.findIndex((e=>e.getAttribute("id")===i));return n=-1===e?t.length-1:n-1,n},findNextOptionIndex(e){const t=[...s.find(this.container,".p-speeddial-item")].filter((e=>!s.hasClass(s.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let n=t.findIndex((e=>e.getAttribute("id")===i));return n=-1===e?0:n+1,n},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:e},directives:{ripple:t,tooltip:i}};const w=["id","aria-activedescendant"],k=["id","aria-controls"],I=["href","target","onClick","aria-label"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),x.render=function(e,t,i,n,s,x){const C=o("SDButton"),D=l("tooltip"),O=l("ripple");return a(),d(r,null,[c("div",{ref:x.containerRef,class:p(x.containerClass),style:h(i.style)},[u(e.$slots,"button",{toggle:x.onClick},(()=>[f(C,{type:"button",class:p(x.buttonClassName),icon:x.iconClassName,onClick:t[0]||(t[0]=e=>x.onClick(e)),disabled:i.disabled,onKeydown:x.onTogglerKeydown,"aria-expanded":s.d_visible,"aria-haspopup":!0,"aria-controls":s.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),c("ul",{ref:x.listRef,id:s.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>x.onFocus&&x.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>x.onBlur&&x.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>x.onKeyDown&&x.onKeyDown(...e)),"aria-activedescendant":s.focused?x.focusedOptionId:void 0,tabindex:"-1"},[(a(!0),d(r,null,m(i.model,((t,n)=>(a(),d(r,{key:n},[x.isItemVisible(t)?(a(),d("li",{key:0,id:`${s.id}_${n}`,"aria-controls":`${s.id}_item`,class:p(["p-speeddial-item",x.itemClass(`${s.id}_${n}`)]),style:h(x.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(a(),y(v(e.$slots.item),{key:1,item:t},null,8,["item"])):b((a(),d("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:p(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>x.onItemClick(e,t),"aria-label":t.label},[t.icon?(a(),d("span",{key:0,class:p(["p-speeddial-action-icon",t.icon])},null,2)):g("",!0)],10,I)),[[D,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[O]])],14,k)):g("",!0)],64)))),128))],40,w)],6),i.mask?(a(),d("div",{key:0,class:p(x.maskClassName),style:h(i.maskStyle)},null,6)):g("",!0)],64)};export{x as default};

package/speeddial/speeddial.js

@@ -74,6 +74,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
         list: null,
         data() {
             return {
+                id: this.$attrs.id,
                 d_visible: this.visible,
                 isItemClicked: false,
                 focused: false,
@@ -81,11 +82,16 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             };
         },
         watch: {
+            '$attrs.id': function (newValue) {
+                this.id = newValue || utils.UniqueComponentId();
+            },
             visible(newValue) {
                 this.d_visible = newValue;
             }
         },
         mounted() {
+            this.id = this.id || utils.UniqueComponentId();
+
             if (this.type !== 'linear') {
                 const button = utils.DomHandler.findSingle(this.container, '.p-speeddial-button');
                 const firstItem = utils.DomHandler.findSingle(this.list, '.p-speeddial-item');
@@ -468,9 +474,6 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                     this.maskClass
                 ];
             },
-            id() {
-                return this.$attrs.id || utils.UniqueComponentId();
-            },
             focusedOptionId() {
                 return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
             }
@@ -509,14 +512,14 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
               onKeydown: $options.onTogglerKeydown,
               "aria-expanded": $data.d_visible,
               "aria-haspopup": true,
-              "aria-controls": $options.id + '_list',
+              "aria-controls": $data.id + '_list',
               "aria-label": _ctx.ariaLabel,
               "aria-labelledby": _ctx.ariaLabelledby
             }, null, 8, ["class", "icon", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
           ]),
           vue.createElementVNode("ul", {
             ref: $options.listRef,
-            id: $options.id + '_list',
+            id: $data.id + '_list',
             class: "p-speeddial-list",
             role: "menu",
             onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
@@ -530,9 +533,9 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                 ($options.isItemVisible(item))
                   ? (vue.openBlock(), vue.createElementBlock("li", {
                       key: 0,
-                      id: `${$options.id}_${index}`,
-                      "aria-controls": `${$options.id}_item`,
-                      class: vue.normalizeClass(["p-speeddial-item", $options.itemClass(`${$options.id}_${index}`)]),
+                      id: `${$data.id}_${index}`,
+                      "aria-controls": `${$data.id}_item`,
+                      class: vue.normalizeClass(["p-speeddial-item", $options.itemClass(`${$data.id}_${index}`)]),
                       style: vue.normalizeStyle($options.getItemStyle(index)),
                       role: "menuitem"
                     }, [

package/speeddial/speeddial.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.speeddial=function(e,t,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),a=o(t),d=o(i),r={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{visible(e){this.d_visible=e}},mounted(){if("linear"!==this.type){const e=n.DomHandler.findSingle(this.container,".p-speeddial-button"),t=n.DomHandler.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=n.DomHandler.findSingle(this.container,"button");i&&n.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=n.DomHandler.findSingle(this.container,"button");e&&n.DomHandler.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?t.length-1:s-1,s},findNextOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?0:s+1,s},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},id(){return this.$attrs.id||n.UniqueComponentId()},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:l.default},directives:{ripple:a.default,tooltip:d.default}};const c=["id","aria-activedescendant"],p=["id","aria-controls"],u=["href","target","onClick","aria-label"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),r.render=function(e,t,i,n,o,l){const a=s.resolveComponent("SDButton"),d=s.resolveDirective("tooltip"),r=s.resolveDirective("ripple");return s.openBlock(),s.createElementBlock(s.Fragment,null,[s.createElementVNode("div",{ref:l.containerRef,class:s.normalizeClass(l.containerClass),style:s.normalizeStyle(i.style)},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(a,{type:"button",class:s.normalizeClass(l.buttonClassName),icon:l.iconClassName,onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":o.d_visible,"aria-haspopup":!0,"aria-controls":l.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),s.createElementVNode("ul",{ref:l.listRef,id:l.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>l.onFocus&&l.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>l.onBlur&&l.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>l.onKeyDown&&l.onKeyDown(...e)),"aria-activedescendant":o.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.model,((t,n)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:n},[l.isItemVisible(t)?(s.openBlock(),s.createElementBlock("li",{key:0,id:`${l.id}_${n}`,"aria-controls":`${l.id}_item`,class:s.normalizeClass(["p-speeddial-item",l.itemClass(`${l.id}_${n}`)]),style:s.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:s.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(s.openBlock(),s.createElementBlock("span",{key:0,class:s.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):s.createCommentVNode("",!0)],10,u)),[[d,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[r]])],14,p)):s.createCommentVNode("",!0)],64)))),128))],40,c)],6),i.mask?(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(l.maskClassName),style:s.normalizeStyle(i.maskStyle)},null,6)):s.createCommentVNode("",!0)],64)},r}(primevue.button,primevue.ripple,primevue.tooltip,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.speeddial=function(e,t,i,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),a=o(t),d=o(i),r={name:"SpeedDial",emits:["click","show","hide","focus","blur"],props:{model:null,visible:{type:Boolean,default:!1},direction:{type:String,default:"up"},transitionDelay:{type:Number,default:30},type:{type:String,default:"linear"},radius:{type:Number,default:0},mask:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideOnClickOutside:{type:Boolean,default:!0},buttonClass:null,maskStyle:null,maskClass:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},tooltipOptions:null,style:null,class:null,"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},documentClickListener:null,container:null,list:null,data(){return{id:this.$attrs.id,d_visible:this.visible,isItemClicked:!1,focused:!1,focusedOptionIndex:-1}},watch:{"$attrs.id":function(e){this.id=e||n.UniqueComponentId()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||n.UniqueComponentId(),"linear"!==this.type){const e=n.DomHandler.findSingle(this.container,".p-speeddial-button"),t=n.DomHandler.findSingle(this.list,".p-speeddial-item");if(e&&t){const i=Math.abs(e.offsetWidth-t.offsetWidth),n=Math.abs(e.offsetHeight-t.offsetHeight);this.list.style.setProperty("--item-diff-x",i/2+"px"),this.list.style.setProperty("--item-diff-y",n/2+"px")}}this.hideOnClickOutside&&this.bindDocumentClickListener()},beforeMount(){this.unbindDocumentClickListener()},methods:{onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedOptionIndex=-1,this.$emit("blur",e)},onItemClick(e,t){t.command&&t.command({originalEvent:e,item:t}),this.hide(),this.isItemClicked=!0,e.preventDefault()},onClick(e){this.d_visible?this.hide():this.show(),this.isItemClicked=!0,this.$emit("click",e)},show(){this.d_visible=!0,this.$emit("show")},hide(){this.d_visible=!1,this.$emit("hide")},calculateTransitionDelay(e){const t=this.model.length;return(this.d_visible?e:t-e-1)*this.transitionDelay},onTogglerKeydown(e){switch(e.code){case"ArrowDown":case"ArrowLeft":this.onTogglerArrowDown(e);break;case"ArrowUp":case"ArrowRight":this.onTogglerArrowUp(e);break;case"Escape":this.onEscapeKey()}},onKeyDown(e){switch(e.code){case"ArrowDown":this.onArrowDown(e);break;case"ArrowUp":this.onArrowUp(e);break;case"ArrowLeft":this.onArrowLeft(e);break;case"ArrowRight":this.onArrowRight(e);break;case"Enter":case"Space":this.onEnterKey(e);break;case"Escape":this.onEscapeKey(e);break;case"Home":this.onHomeKey(e);break;case"End":this.onEndKey(e)}},onTogglerArrowUp(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,n.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=n.DomHandler.findSingle(this.container,"button");i&&n.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=n.DomHandler.findSingle(this.container,"button");e&&n.DomHandler.focus(e)},onArrowUp(e){"up"===this.direction?this.navigateNextItem(e):"down"===this.direction?this.navigatePrevItem(e):this.navigateNextItem(e)},onArrowDown(e){"up"===this.direction?this.navigatePrevItem(e):"down"===this.direction?this.navigateNextItem(e):this.navigatePrevItem(e)},onArrowLeft(e){["left","up-right","down-left"].includes(this.direction)?this.navigateNextItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigatePrevItem(e))},onArrowRight(e){["left","up-right","down-left"].includes(this.direction)?this.navigatePrevItem(e):(["right","up-left","down-right"].includes(this.direction),this.navigateNextItem(e))},onEndKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigatePrevItem(e)},onHomeKey(e){e.preventDefault(),this.focusedOptionIndex=-1,this.navigateNextItem(e)},navigateNextItem(e){const t=this.findNextOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},navigatePrevItem(e){const t=this.findPrevOptionIndex(this.focusedOptionIndex);this.changeFocusedOptionIndex(t),e.preventDefault()},changeFocusedOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[t.length-1].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?t.length-1:s-1,s},findNextOptionIndex(e){const t=[...n.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!n.DomHandler.hasClass(n.DomHandler.findSingle(e,"a"),"p-disabled"))),i=-1===e?t[0].id:e;let s=t.findIndex((e=>e.getAttribute("id")===i));return s=-1===e?0:s+1,s},calculatePointStyle(e){const t=this.type;if("linear"!==t){const i=this.model.length,n=this.radius||20*i;if("circle"===t){const t=2*Math.PI/i;return{left:`calc(${n*Math.cos(t*e)}px + var(--item-diff-x, 0px))`,top:`calc(${n*Math.sin(t*e)}px + var(--item-diff-y, 0px))`}}if("semi-circle"===t){const t=this.direction,s=Math.PI/(i-1),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up"===t)return{left:o,bottom:l};if("down"===t)return{left:o,top:l};if("left"===t)return{right:l,top:o};if("right"===t)return{left:l,top:o}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-1)),o=`calc(${n*Math.cos(s*e)}px + var(--item-diff-x, 0px))`,l=`calc(${n*Math.sin(s*e)}px + var(--item-diff-y, 0px))`;if("up-left"===t)return{right:o,bottom:l};if("up-right"===t)return{left:o,bottom:l};if("down-left"===t)return{right:l,top:o};if("down-right"===t)return{left:l,top:o}}}return{}},getItemStyle(e){return{transitionDelay:`${this.calculateTransitionDelay(e)}ms`,...this.calculatePointStyle(e)}},bindDocumentClickListener(){this.documentClickListener||(this.documentClickListener=e=>{this.d_visible&&this.isOutsideClicked(e)&&this.hide(),this.isItemClicked=!1},document.addEventListener("click",this.documentClickListener))},unbindDocumentClickListener(){this.documentClickListener&&(document.removeEventListener("click",this.documentClickListener),this.documentClickListener=null)},isOutsideClicked(e){return this.container&&!(this.container.isSameNode(e.target)||this.container.contains(e.target)||this.isItemClicked)},isItemVisible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,containerRef(e){this.container=e},listRef(e){this.list=e},itemClass(e){return[{"p-focus":e===this.focusedOptionId}]}},computed:{containerClass(){return[`p-speeddial p-component p-speeddial-${this.type}`,{[`p-speeddial-direction-${this.direction}`]:"circle"!==this.type,"p-speeddial-opened":this.d_visible,"p-disabled":this.disabled},this.class]},buttonClassName(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClass]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:l.default},directives:{ripple:a.default,tooltip:d.default}};const c=["id","aria-activedescendant"],p=["id","aria-controls"],u=["href","target","onClick","aria-label"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&n.firstChild?n.insertBefore(s,n.firstChild):n.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-speeddial {\n    position: absolute;\n    display: flex;\n}\n.p-speeddial-button {\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n    z-index: 2;\n}\n.p-speeddial-item {\n    transform: scale(0);\n    opacity: 0;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    align-items: center;\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    align-items: center;\n    flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    flex-direction: column;\n}\n.p-speeddial-direction-left {\n    justify-content: center;\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    justify-content: center;\n    flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    flex-direction: row;\n}\n"),r.render=function(e,t,i,n,o,l){const a=s.resolveComponent("SDButton"),d=s.resolveDirective("tooltip"),r=s.resolveDirective("ripple");return s.openBlock(),s.createElementBlock(s.Fragment,null,[s.createElementVNode("div",{ref:l.containerRef,class:s.normalizeClass(l.containerClass),style:s.normalizeStyle(i.style)},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(a,{type:"button",class:s.normalizeClass(l.buttonClassName),icon:l.iconClassName,onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":o.d_visible,"aria-haspopup":!0,"aria-controls":o.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},null,8,["class","icon","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),s.createElementVNode("ul",{ref:l.listRef,id:o.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>l.onFocus&&l.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>l.onBlur&&l.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>l.onKeyDown&&l.onKeyDown(...e)),"aria-activedescendant":o.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(i.model,((t,n)=>(s.openBlock(),s.createElementBlock(s.Fragment,{key:n},[l.isItemVisible(t)?(s.openBlock(),s.createElementBlock("li",{key:0,id:`${o.id}_${n}`,"aria-controls":`${o.id}_item`,class:s.normalizeClass(["p-speeddial-item",l.itemClass(`${o.id}_${n}`)]),style:s.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(s.openBlock(),s.createBlock(s.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:s.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(s.openBlock(),s.createElementBlock("span",{key:0,class:s.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):s.createCommentVNode("",!0)],10,u)),[[d,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[r]])],14,p)):s.createCommentVNode("",!0)],64)))),128))],40,c)],6),i.mask?(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(l.maskClassName),style:s.normalizeStyle(i.maskStyle)},null,6)):s.createCommentVNode("",!0)],64)},r}(primevue.button,primevue.ripple,primevue.tooltip,primevue.utils,Vue);

package/tabview/TabView.vue

@@ -108,12 +108,16 @@ export default {
     },
     data() {
         return {
+            id: this.$attrs.id,
             d_activeIndex: this.activeIndex,
             isPrevButtonDisabled: true,
             isNextButtonDisabled: false
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
@@ -121,6 +125,8 @@ export default {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },
@@ -358,9 +364,6 @@ export default {
         },
         nextButtonAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
-        },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
         }
     },
     directives: {

package/tabview/tabview.cjs.js

@@ -43,12 +43,16 @@ var script = {
     },
     data() {
         return {
+            id: this.$attrs.id,
             d_activeIndex: this.activeIndex,
             isPrevButtonDisabled: true,
             isNextButtonDisabled: false
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || utils.UniqueComponentId();
+        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
@@ -56,6 +60,8 @@ var script = {
         }
     },
     mounted() {
+        this.id = this.id || utils.UniqueComponentId();
+
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },
@@ -290,9 +296,6 @@ var script = {
         },
         nextButtonAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
-        },
-        id() {
-            return this.$attrs.id || utils.UniqueComponentId();
         }
     },
     directives: {

package/tabview/tabview.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-n;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+n,i=e.scrollWidth-n;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,n){if(n&&(t.DomHandler.focus(n),this.scrollInView({element:n}),this.selectOnFocus)){const t=parseInt(n.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=t.DomHandler.getWidth(e)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(e).left-t.DomHandler.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:n,scrollWidth:a}=e,i=t.DomHandler.getWidth(e);this.isPrevButtonDisabled=0===n,this.isNextButtonDisabled=parseInt(n)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:n}=this.$refs;return[e,n].reduce(((e,n)=>n?e+t.DomHandler.getWidth(n):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0},id(){return this.$attrs.id||t.UniqueComponentId()}},directives:{ripple:a(e).default}};const r={class:"p-tabview-nav-container"},o=["tabindex","aria-label"],l=[n.createElementVNode("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],s={ref:"nav",class:"p-tabview-nav",role:"tablist"},c=["data-index"],d=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],p={key:0,class:"p-tabview-title"},b={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},h=["tabindex","aria-label"],v=[n.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],u={class:"p-tabview-panels"},m=["aria-labelledby"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),i.render=function(e,t,a,i,f,g){const w=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(g.contentClasses)},[n.createElementVNode("div",r,[a.scrollable&&!f.isPrevButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.onPrevButtonClick&&g.onPrevButtonClick(...e))},a.previousButtonProps),l,16,o)),[[w]]):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>g.onScroll&&g.onScroll(...e))},[n.createElementVNode("ul",s,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:g.getKey(e,t),style:g.getTabProp(e,"headerStyle"),class:g.getTabHeaderClass(e,t),role:"presentation","data-index":t},g.getTabProp(e,"headerProps")),[n.withDirectives((n.openBlock(),n.createElementBlock("a",n.mergeProps({id:g.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:g.getTabProp(e,"disabled")||!g.isTabActive(t)?-1:a.tabindex,role:"tab","aria-disabled":g.getTabProp(e,"disabled"),"aria-selected":g.isTabActive(t),"aria-controls":g.getTabContentId(t),onClick:n=>g.onTabClick(n,e,t),onKeydown:n=>g.onTabKeyDown(n,e,t)},g.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(n.openBlock(),n.createElementBlock("span",p,n.toDisplayString(e.props.header),1)):n.createCommentVNode("",!0),e.children&&e.children.header?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.children.header),{key:1})):n.createCommentVNode("",!0)],16,d)),[[w]])],16,c)))),128)),n.createElementVNode("li",b,null,512)],512)],544),a.scrollable&&!f.isNextButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>g.onNextButtonClick&&g.onNextButtonClick(...e))},a.nextButtonProps),v,16,h)),[[w]]):n.createCommentVNode("",!0)]),n.createElementVNode("div",u,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:g.getKey(e,t)},[!a.lazy||g.isTabActive(t)?n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,style:g.getTabProp(e,"contentStyle"),class:g.getTabContentClass(e),role:"tabpanel","aria-labelledby":g.getTabHeaderActionId(t)},g.getTabProp(e,"contentProps")),[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))],16,m)),[[n.vShow,!!a.lazy||g.isTabActive(t)]]):n.createCommentVNode("",!0)],64)))),128))])],2)},module.exports=i;
+"use strict";var e=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"TabView",emits:["update:activeIndex","tab-change","tab-click"],props:{activeIndex:{type:Number,default:0},lazy:{type:Boolean,default:!1},scrollable:{type:Boolean,default:!1},tabindex:{type:Number,default:0},selectOnFocus:{type:Boolean,default:!1},previousButtonProps:{type:null,default:null},nextButtonProps:{type:null,default:null}},data(){return{id:this.$attrs.id,d_activeIndex:this.activeIndex,isPrevButtonDisabled:!0,isNextButtonDisabled:!1}},watch:{"$attrs.id":function(e){this.id=e||t.UniqueComponentId()},activeIndex(e){this.d_activeIndex=e,this.scrollInView({index:e})}},mounted(){this.id=this.id||t.UniqueComponentId(),this.updateInkBar(),this.scrollable&&this.updateButtonState()},updated(){this.updateInkBar()},methods:{isTabPanel:e=>"TabPanel"===e.type.name,isTabActive(e){return this.d_activeIndex===e},getTabProp:(e,t)=>e.props?e.props[t]:void 0,getKey(e,t){return this.getTabProp(e,"header")||t},getTabHeaderActionId(e){return`${this.id}_${e}_header_action`},getTabContentId(e){return`${this.id}_${e}_content`},onScroll(e){this.scrollable&&this.updateButtonState(),e.preventDefault()},onPrevButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft-n;e.scrollLeft=a<=0?0:a},onNextButtonClick(){const e=this.$refs.content,n=t.DomHandler.getWidth(e)-this.getVisibleButtonWidths(),a=e.scrollLeft+n,i=e.scrollWidth-n;e.scrollLeft=a>=i?i:a},onTabClick(e,t,n){this.changeActiveIndex(e,t,n),this.$emit("tab-click",{originalEvent:e,index:n})},onTabKeyDown(e,t,n){switch(e.code){case"ArrowLeft":this.onTabArrowLeftKey(e);break;case"ArrowRight":this.onTabArrowRightKey(e);break;case"Home":this.onTabHomeKey(e);break;case"End":this.onTabEndKey(e);break;case"PageDown":this.onPageDownKey(e);break;case"PageUp":this.onPageUpKey(e);break;case"Enter":case"Space":this.onTabEnterKey(e,t,n)}},onTabArrowRightKey(e){const t=this.findNextHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabHomeKey(e),e.preventDefault()},onTabArrowLeftKey(e){const t=this.findPrevHeaderAction(e.target.parentElement);t?this.changeFocusedTab(e,t):this.onTabEndKey(e),e.preventDefault()},onTabHomeKey(e){const t=this.findFirstHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onTabEndKey(e){const t=this.findLastHeaderAction();this.changeFocusedTab(e,t),e.preventDefault()},onPageDownKey(e){this.scrollInView({index:this.$refs.nav.children.length-2}),e.preventDefault()},onPageUpKey(e){this.scrollInView({index:0}),e.preventDefault()},onTabEnterKey(e,t,n){this.changeActiveIndex(e,t,n),e.preventDefault()},findNextHeaderAction(e,n=!1){const a=n?e:e.nextElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findNextHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findPrevHeaderAction(e,n=!1){const a=n?e:e.previousElementSibling;return a?t.DomHandler.hasClass(a,"p-disabled")||t.DomHandler.hasClass(a,"p-tabview-ink-bar")?this.findPrevHeaderAction(a):t.DomHandler.findSingle(a,".p-tabview-header-action"):null},findFirstHeaderAction(){return this.findNextHeaderAction(this.$refs.nav.firstElementChild,!0)},findLastHeaderAction(){return this.findPrevHeaderAction(this.$refs.nav.lastElementChild,!0)},changeActiveIndex(e,t,n){this.getTabProp(t,"disabled")||this.d_activeIndex===n||(this.d_activeIndex=n,this.$emit("update:activeIndex",n),this.$emit("tab-change",{originalEvent:e,index:n}),this.scrollInView({index:n}))},changeFocusedTab(e,n){if(n&&(t.DomHandler.focus(n),this.scrollInView({element:n}),this.selectOnFocus)){const t=parseInt(n.parentElement.dataset.index,10),a=this.tabs[t];this.changeActiveIndex(e,a,t)}},scrollInView({element:e,index:t=-1}){const n=e||this.$refs.nav.children[t];n&&n.scrollIntoView&&n.scrollIntoView({block:"nearest"})},updateInkBar(){let e=this.$refs.nav.children[this.d_activeIndex];this.$refs.inkbar.style.width=t.DomHandler.getWidth(e)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(e).left-t.DomHandler.getOffset(this.$refs.nav).left+"px"},updateButtonState(){const e=this.$refs.content,{scrollLeft:n,scrollWidth:a}=e,i=t.DomHandler.getWidth(e);this.isPrevButtonDisabled=0===n,this.isNextButtonDisabled=parseInt(n)===a-i},getVisibleButtonWidths(){const{prevBtn:e,nextBtn:n}=this.$refs;return[e,n].reduce(((e,n)=>n?e+t.DomHandler.getWidth(n):e),0)},getTabHeaderClass(e,t){return["p-tabview-header",this.getTabProp(e,"headerClass"),{"p-highlight":this.d_activeIndex===t,"p-disabled":this.getTabProp(e,"disabled")}]},getTabContentClass(e){return["p-tabview-panel",this.getTabProp(e,"contentClass")]}},computed:{contentClasses(){return["p-tabview p-component",{"p-tabview-scrollable":this.scrollable}]},tabs(){return this.$slots.default().reduce(((e,t)=>(this.isTabPanel(t)?e.push(t):t.children&&t.children instanceof Array&&t.children.forEach((t=>{this.isTabPanel(t)&&e.push(t)})),e)),[])},prevButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.previous:void 0},nextButtonAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.next:void 0}},directives:{ripple:a(e).default}};const o={class:"p-tabview-nav-container"},r=["tabindex","aria-label"],l=[n.createElementVNode("span",{class:"pi pi-chevron-left","aria-hidden":"true"},null,-1)],s={ref:"nav",class:"p-tabview-nav",role:"tablist"},d=["data-index"],c=["id","tabindex","aria-disabled","aria-selected","aria-controls","onClick","onKeydown"],p={key:0,class:"p-tabview-title"},h={ref:"inkbar",class:"p-tabview-ink-bar",role:"presentation","aria-hidden":"true"},b=["tabindex","aria-label"],v=[n.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)],u={class:"p-tabview-panels"},m=["aria-labelledby"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabview-nav-container {\n    position: relative;\n}\n.p-tabview-scrollable .p-tabview-nav-container {\n    overflow: hidden;\n}\n.p-tabview-nav-content {\n    overflow-x: auto;\n    overflow-y: hidden;\n    scroll-behavior: smooth;\n    scrollbar-width: none;\n    overscroll-behavior: contain auto;\n}\n.p-tabview-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex: 1 1 auto;\n}\n.p-tabview-header-action {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabview-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabview-header-action:focus {\n    z-index: 1;\n}\n.p-tabview-title {\n    line-height: 1;\n    white-space: nowrap;\n}\n.p-tabview-nav-btn {\n    position: absolute;\n    top: 0;\n    z-index: 2;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tabview-nav-prev {\n    left: 0;\n}\n.p-tabview-nav-next {\n    right: 0;\n}\n.p-tabview-nav-content::-webkit-scrollbar {\n    display: none;\n}\n"),i.render=function(e,t,a,i,f,g){const w=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(g.contentClasses)},[n.createElementVNode("div",o,[a.scrollable&&!f.isPrevButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:0,ref:"prevBtn",type:"button",class:"p-tabview-nav-prev p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.prevButtonAriaLabel,onClick:t[0]||(t[0]=(...e)=>g.onPrevButtonClick&&g.onPrevButtonClick(...e))},a.previousButtonProps),l,16,r)),[[w]]):n.createCommentVNode("",!0),n.createElementVNode("div",{ref:"content",class:"p-tabview-nav-content",onScroll:t[1]||(t[1]=(...e)=>g.onScroll&&g.onScroll(...e))},[n.createElementVNode("ul",s,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:g.getKey(e,t),style:g.getTabProp(e,"headerStyle"),class:g.getTabHeaderClass(e,t),role:"presentation","data-index":t},g.getTabProp(e,"headerProps")),[n.withDirectives((n.openBlock(),n.createElementBlock("a",n.mergeProps({id:g.getTabHeaderActionId(t),class:"p-tabview-nav-link p-tabview-header-action",tabindex:g.getTabProp(e,"disabled")||!g.isTabActive(t)?-1:a.tabindex,role:"tab","aria-disabled":g.getTabProp(e,"disabled"),"aria-selected":g.isTabActive(t),"aria-controls":g.getTabContentId(t),onClick:n=>g.onTabClick(n,e,t),onKeydown:n=>g.onTabKeyDown(n,e,t)},g.getTabProp(e,"headerActionProps")),[e.props&&e.props.header?(n.openBlock(),n.createElementBlock("span",p,n.toDisplayString(e.props.header),1)):n.createCommentVNode("",!0),e.children&&e.children.header?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.children.header),{key:1})):n.createCommentVNode("",!0)],16,c)),[[w]])],16,d)))),128)),n.createElementVNode("li",h,null,512)],512)],544),a.scrollable&&!f.isNextButtonDisabled?n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({key:1,ref:"nextBtn",type:"button",class:"p-tabview-nav-next p-tabview-nav-btn p-link",tabindex:a.tabindex,"aria-label":g.nextButtonAriaLabel,onClick:t[2]||(t[2]=(...e)=>g.onNextButtonClick&&g.onNextButtonClick(...e))},a.nextButtonProps),v,16,b)),[[w]]):n.createCommentVNode("",!0)]),n.createElementVNode("div",u,[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(g.tabs,((e,t)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:g.getKey(e,t)},[!a.lazy||g.isTabActive(t)?n.withDirectives((n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,style:g.getTabProp(e,"contentStyle"),class:g.getTabContentClass(e),role:"tabpanel","aria-labelledby":g.getTabHeaderActionId(t)},g.getTabProp(e,"contentProps")),[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e)))],16,m)),[[n.vShow,!!a.lazy||g.isTabActive(t)]]):n.createCommentVNode("",!0)],64)))),128))])],2)},module.exports=i;

package/tabview/tabview.esm.js

@@ -1,5 +1,5 @@
 import Ripple from 'primevue/ripple';
-import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import { UniqueComponentId, DomHandler } from 'primevue/utils';
 import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, withDirectives, mergeProps, createCommentVNode, Fragment, renderList, toDisplayString, createBlock, resolveDynamicComponent, vShow } from 'vue';
 
 var script = {
@@ -37,12 +37,16 @@ var script = {
     },
     data() {
         return {
+            id: this.$attrs.id,
             d_activeIndex: this.activeIndex,
             isPrevButtonDisabled: true,
             isNextButtonDisabled: false
         };
     },
     watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
@@ -50,6 +54,8 @@ var script = {
         }
     },
     mounted() {
+        this.id = this.id || UniqueComponentId();
+
         this.updateInkBar();
         this.scrollable && this.updateButtonState();
     },
@@ -284,9 +290,6 @@ var script = {
         },
         nextButtonAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
-        },
-        id() {
-            return this.$attrs.id || UniqueComponentId();
         }
     },
     directives: {