primevue 3.26.0 → 3.27.0

package/speeddial/SpeedDial.vue

@@ -4,7 +4,6 @@
             <SDButton
                 type="button"
                 :class="buttonClassName"
-                :icon="iconClassName"
                 @click="onClick($event)"
                 :disabled="disabled"
                 @keydown="onTogglerKeydown"
@@ -13,7 +12,14 @@
                 :aria-controls="id + '_list'"
                 :aria-label="ariaLabel"
                 :aria-labelledby="ariaLabelledby"
-            />
+            >
+                <template #icon>
+                    <slot name="icon" :visible="d_visible">
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" />
+                    </slot>
+                </template>
+            </SDButton>
         </slot>
         <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1">
             <template v-for="(item, index) of model" :key="index">
@@ -45,6 +51,7 @@
 
 <script>
 import Button from 'primevue/button';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
@@ -91,9 +98,12 @@ export default {
         maskClass: null,
         showIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
         },
-        hideIcon: null,
         rotateAnimation: {
             type: Boolean,
             default: true
@@ -509,9 +519,6 @@ export default {
                 this.buttonClass
             ];
         },
-        iconClassName() {
-            return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-        },
         maskClassName() {
             return [
                 'p-speeddial-mask',
@@ -526,7 +533,8 @@ export default {
         }
     },
     components: {
-        SDButton: Button
+        SDButton: Button,
+        PlusIcon: PlusIcon
     },
     directives: {
         ripple: Ripple,

package/speeddial/speeddial.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var Button = require('primevue/button');
+var PlusIcon = require('primevue/icons/plus');
 var Ripple = require('primevue/ripple');
 var Tooltip = require('primevue/tooltip');
 var utils = require('primevue/utils');
@@ -9,6 +10,7 @@ var vue = require('vue');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
@@ -54,9 +56,12 @@ var script = {
         maskClass: null,
         showIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
         },
-        hideIcon: null,
         rotateAnimation: {
             type: Boolean,
             default: true
@@ -466,9 +471,6 @@ var script = {
                 this.buttonClass
             ];
         },
-        iconClassName() {
-            return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-        },
         maskClassName() {
             return [
                 'p-speeddial-mask',
@@ -483,7 +485,8 @@ var script = {
         }
     },
     components: {
-        SDButton: Button__default["default"]
+        SDButton: Button__default["default"],
+        PlusIcon: PlusIcon__default["default"]
     },
     directives: {
         ripple: Ripple__default["default"],
@@ -510,7 +513,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         vue.createVNode(_component_SDButton, {
           type: "button",
           class: vue.normalizeClass($options.buttonClassName),
-          icon: $options.iconClassName,
           onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
           disabled: $props.disabled,
           onKeydown: $options.onTogglerKeydown,
@@ -519,7 +521,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "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"])
+        }, {
+          icon: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "icon", { visible: $data.d_visible }, () => [
+              ($data.d_visible && !!$props.hideIcon)
+                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.hideIcon ? 'span' : 'PlusIcon'), {
+                    key: 0,
+                    class: vue.normalizeClass($props.hideIcon)
+                  }, null, 8, ["class"]))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.showIcon ? 'span' : 'PlusIcon'), {
+                    key: 1,
+                    class: vue.normalizeClass($props.showIcon)
+                  }, null, 8, ["class"]))
+            ])
+          ]),
+          _: 3
+        }, 8, ["class", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
       ]),
       vue.createElementVNode("ul", {
         ref: $options.listRef,

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),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;
+"use strict";var e=require("primevue/button"),t=require("primevue/icons/plus"),i=require("primevue/ripple"),n=require("primevue/tooltip"),s=require("primevue/utils"),o=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),r=l(t),d=l(i),c=l(n),p={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:void 0},hideIcon:{type:String,default:void 0},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||s.UniqueComponentId()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||s.UniqueComponentId(),"linear"!==this.type){const e=s.DomHandler.findSingle(this.container,".p-speeddial-button"),t=s.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,s.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,s.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...s.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=s.DomHandler.findSingle(this.container,"button");i&&s.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=s.DomHandler.findSingle(this.container,"button");e&&s.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=[...s.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...s.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.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.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.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]},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:a.default,PlusIcon:r.default},directives:{ripple:d.default,tooltip:c.default}};const u=["id","aria-activedescendant"],h=["id","aria-controls"],m=["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"),p.render=function(e,t,i,n,s,l){const a=o.resolveComponent("SDButton"),r=o.resolveDirective("tooltip"),d=o.resolveDirective("ripple");return o.openBlock(),o.createElementBlock(o.Fragment,null,[o.createElementVNode("div",{ref:l.containerRef,class:o.normalizeClass(l.containerClass),style:o.normalizeStyle(i.style)},[o.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[o.createVNode(a,{type:"button",class:o.normalizeClass(l.buttonClassName),onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":s.d_visible,"aria-haspopup":!0,"aria-controls":s.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},{icon:o.withCtx((()=>[o.renderSlot(e.$slots,"icon",{visible:s.d_visible},(()=>[s.d_visible&&i.hideIcon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.hideIcon?"span":"PlusIcon"),{key:0,class:o.normalizeClass(i.hideIcon)},null,8,["class"])):(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.showIcon?"span":"PlusIcon"),{key:1,class:o.normalizeClass(i.showIcon)},null,8,["class"]))]))])),_:3},8,["class","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),o.createElementVNode("ul",{ref:l.listRef,id:s.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":s.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.model,((t,n)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:n},[l.isItemVisible(t)?(o.openBlock(),o.createElementBlock("li",{key:0,id:`${s.id}_${n}`,"aria-controls":`${s.id}_item`,class:o.normalizeClass(["p-speeddial-item",l.itemClass(`${s.id}_${n}`)]),style:o.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):o.withDirectives((o.openBlock(),o.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:o.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(o.openBlock(),o.createElementBlock("span",{key:0,class:o.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):o.createCommentVNode("",!0)],10,m)),[[r,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[d]])],14,h)):o.createCommentVNode("",!0)],64)))),128))],40,u)],6),i.mask?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(l.maskClassName),style:o.normalizeStyle(i.maskStyle)},null,6)):o.createCommentVNode("",!0)],64)},module.exports=p;

package/speeddial/speeddial.esm.js

@@ -1,8 +1,9 @@
 import Button from 'primevue/button';
+import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { UniqueComponentId, DomHandler } from 'primevue/utils';
-import { resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createVNode, renderList, withDirectives, createCommentVNode, createBlock, resolveDynamicComponent } from 'vue';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, Fragment, createElementVNode, normalizeClass, normalizeStyle, renderSlot, createVNode, withCtx, createBlock, resolveDynamicComponent, renderList, withDirectives, createCommentVNode } from 'vue';
 
 var script = {
     name: 'SpeedDial',
@@ -46,9 +47,12 @@ var script = {
         maskClass: null,
         showIcon: {
             type: String,
-            default: 'pi pi-plus'
+            default: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
         },
-        hideIcon: null,
         rotateAnimation: {
             type: Boolean,
             default: true
@@ -458,9 +462,6 @@ var script = {
                 this.buttonClass
             ];
         },
-        iconClassName() {
-            return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-        },
         maskClassName() {
             return [
                 'p-speeddial-mask',
@@ -475,7 +476,8 @@ var script = {
         }
     },
     components: {
-        SDButton: Button
+        SDButton: Button,
+        PlusIcon: PlusIcon
     },
     directives: {
         ripple: Ripple,
@@ -502,7 +504,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         createVNode(_component_SDButton, {
           type: "button",
           class: normalizeClass($options.buttonClassName),
-          icon: $options.iconClassName,
           onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
           disabled: $props.disabled,
           onKeydown: $options.onTogglerKeydown,
@@ -511,7 +512,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "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"])
+        }, {
+          icon: withCtx(() => [
+            renderSlot(_ctx.$slots, "icon", { visible: $data.d_visible }, () => [
+              ($data.d_visible && !!$props.hideIcon)
+                ? (openBlock(), createBlock(resolveDynamicComponent($props.hideIcon ? 'span' : 'PlusIcon'), {
+                    key: 0,
+                    class: normalizeClass($props.hideIcon)
+                  }, null, 8, ["class"]))
+                : (openBlock(), createBlock(resolveDynamicComponent($props.showIcon ? 'span' : 'PlusIcon'), {
+                    key: 1,
+                    class: normalizeClass($props.showIcon)
+                  }, null, 8, ["class"]))
+            ])
+          ]),
+          _: 3
+        }, 8, ["class", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
       ]),
       createElementVNode("ul", {
         ref: $options.listRef,

package/speeddial/speeddial.esm.min.js

@@ -1 +1 @@
-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};
+import e from"primevue/button";import t from"primevue/icons/plus";import i from"primevue/ripple";import n from"primevue/tooltip";import{UniqueComponentId as s,DomHandler as o}from"primevue/utils";import{resolveComponent as l,resolveDirective as a,openBlock as d,createElementBlock as r,Fragment as c,createElementVNode as p,normalizeClass as h,normalizeStyle as u,renderSlot as f,createVNode as m,withCtx as b,createBlock as y,resolveDynamicComponent as g,renderList as v,withDirectives as x,createCommentVNode as w}from"vue";var I={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:void 0},hideIcon:{type:String,default:void 0},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||s()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||s(),"linear"!==this.type){const e=o.findSingle(this.container,".p-speeddial-button"),t=o.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,o.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,o.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...o.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=o.findSingle(this.container,"button");i&&o.focus(i)},onEscapeKey(){this.hide();const e=o.findSingle(this.container,"button");e&&o.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=[...o.find(this.container,".p-speeddial-item")].filter((e=>!o.hasClass(o.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...o.find(this.container,".p-speeddial-item")].filter((e=>!o.hasClass(o.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=[...o.find(this.container,".p-speeddial-item")].filter((e=>!o.hasClass(o.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]},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,PlusIcon:t},directives:{ripple:i,tooltip:n}};const k=["id","aria-activedescendant"],C=["id","aria-controls"],D=["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"),I.render=function(e,t,i,n,s,o){const I=l("SDButton"),O=a("tooltip"),A=a("ripple");return d(),r(c,null,[p("div",{ref:o.containerRef,class:h(o.containerClass),style:u(i.style)},[f(e.$slots,"button",{toggle:o.onClick},(()=>[m(I,{type:"button",class:h(o.buttonClassName),onClick:t[0]||(t[0]=e=>o.onClick(e)),disabled:i.disabled,onKeydown:o.onTogglerKeydown,"aria-expanded":s.d_visible,"aria-haspopup":!0,"aria-controls":s.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},{icon:b((()=>[f(e.$slots,"icon",{visible:s.d_visible},(()=>[s.d_visible&&i.hideIcon?(d(),y(g(i.hideIcon?"span":"PlusIcon"),{key:0,class:h(i.hideIcon)},null,8,["class"])):(d(),y(g(i.showIcon?"span":"PlusIcon"),{key:1,class:h(i.showIcon)},null,8,["class"]))]))])),_:3},8,["class","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),p("ul",{ref:o.listRef,id:s.id+"_list",class:"p-speeddial-list",role:"menu",onFocus:t[1]||(t[1]=(...e)=>o.onFocus&&o.onFocus(...e)),onBlur:t[2]||(t[2]=(...e)=>o.onBlur&&o.onBlur(...e)),onKeydown:t[3]||(t[3]=(...e)=>o.onKeyDown&&o.onKeyDown(...e)),"aria-activedescendant":s.focused?o.focusedOptionId:void 0,tabindex:"-1"},[(d(!0),r(c,null,v(i.model,((t,n)=>(d(),r(c,{key:n},[o.isItemVisible(t)?(d(),r("li",{key:0,id:`${s.id}_${n}`,"aria-controls":`${s.id}_item`,class:h(["p-speeddial-item",o.itemClass(`${s.id}_${n}`)]),style:u(o.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(d(),y(g(e.$slots.item),{key:1,item:t},null,8,["item"])):x((d(),r("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:h(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>o.onItemClick(e,t),"aria-label":t.label},[t.icon?(d(),r("span",{key:0,class:h(["p-speeddial-action-icon",t.icon])},null,2)):w("",!0)],10,D)),[[O,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[A]])],14,C)):w("",!0)],64)))),128))],40,k)],6),i.mask?(d(),r("div",{key:0,class:h(o.maskClassName),style:u(i.maskStyle)},null,6)):w("",!0)],64)};export{I as default};

package/speeddial/speeddial.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
+this.primevue.speeddial = (function (Button, PlusIcon, Ripple, Tooltip, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+    var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
@@ -50,9 +51,12 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             maskClass: null,
             showIcon: {
                 type: String,
-                default: 'pi pi-plus'
+                default: undefined
+            },
+            hideIcon: {
+                type: String,
+                default: undefined
             },
-            hideIcon: null,
             rotateAnimation: {
                 type: Boolean,
                 default: true
@@ -462,9 +466,6 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                     this.buttonClass
                 ];
             },
-            iconClassName() {
-                return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
-            },
             maskClassName() {
                 return [
                     'p-speeddial-mask',
@@ -479,7 +480,8 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             }
         },
         components: {
-            SDButton: Button__default["default"]
+            SDButton: Button__default["default"],
+            PlusIcon: PlusIcon__default["default"]
         },
         directives: {
             ripple: Ripple__default["default"],
@@ -506,7 +508,6 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             vue.createVNode(_component_SDButton, {
               type: "button",
               class: vue.normalizeClass($options.buttonClassName),
-              icon: $options.iconClassName,
               onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
               disabled: $props.disabled,
               onKeydown: $options.onTogglerKeydown,
@@ -515,7 +516,22 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
               "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"])
+            }, {
+              icon: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "icon", { visible: $data.d_visible }, () => [
+                  ($data.d_visible && !!$props.hideIcon)
+                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.hideIcon ? 'span' : 'PlusIcon'), {
+                        key: 0,
+                        class: vue.normalizeClass($props.hideIcon)
+                      }, null, 8, ["class"]))
+                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.showIcon ? 'span' : 'PlusIcon'), {
+                        key: 1,
+                        class: vue.normalizeClass($props.showIcon)
+                      }, null, 8, ["class"]))
+                ])
+              ]),
+              _: 3
+            }, 8, ["class", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
           ]),
           vue.createElementVNode("ul", {
             ref: $options.listRef,
@@ -614,4 +630,4 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
 
     return script;
 
-})(primevue.button, primevue.ripple, primevue.tooltip, primevue.utils, Vue);
+})(primevue.button, primevue.icons.plus, primevue.ripple, primevue.tooltip, primevue.utils, Vue);

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{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);
+this.primevue=this.primevue||{},this.primevue.speeddial=function(e,t,i,n,s,o){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(e),d=l(t),r=l(i),c=l(n),p={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:void 0},hideIcon:{type:String,default:void 0},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||s.UniqueComponentId()},visible(e){this.d_visible=e}},mounted(){if(this.id=this.id||s.UniqueComponentId(),"linear"!==this.type){const e=s.DomHandler.findSingle(this.container,".p-speeddial-button"),t=s.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,s.DomHandler.focus(this.list),this.show(),this.navigatePrevItem(e),e.preventDefault()},onTogglerArrowDown(e){this.focused=!0,s.DomHandler.focus(this.list),this.show(),this.navigateNextItem(e),e.preventDefault()},onEnterKey(e){const t=[...s.DomHandler.find(this.container,".p-speeddial-item")].findIndex((e=>e.id===this.focusedOptionIndex));this.onItemClick(e,this.model[t]),this.onBlur(e);const i=s.DomHandler.findSingle(this.container,"button");i&&s.DomHandler.focus(i)},onEscapeKey(){this.hide();const e=s.DomHandler.findSingle(this.container,"button");e&&s.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=[...s.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.findSingle(e,"a"),"p-disabled")));t[e]&&(this.focusedOptionIndex=t[e].getAttribute("id"))},findPrevOptionIndex(e){const t=[...s.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.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.DomHandler.find(this.container,".p-speeddial-item")].filter((e=>!s.DomHandler.hasClass(s.DomHandler.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]},maskClassName(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClass]},focusedOptionId(){return-1!==this.focusedOptionIndex?this.focusedOptionIndex:null}},components:{SDButton:a.default,PlusIcon:d.default},directives:{ripple:r.default,tooltip:c.default}};const u=["id","aria-activedescendant"],h=["id","aria-controls"],m=["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"),p.render=function(e,t,i,n,s,l){const a=o.resolveComponent("SDButton"),d=o.resolveDirective("tooltip"),r=o.resolveDirective("ripple");return o.openBlock(),o.createElementBlock(o.Fragment,null,[o.createElementVNode("div",{ref:l.containerRef,class:o.normalizeClass(l.containerClass),style:o.normalizeStyle(i.style)},[o.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[o.createVNode(a,{type:"button",class:o.normalizeClass(l.buttonClassName),onClick:t[0]||(t[0]=e=>l.onClick(e)),disabled:i.disabled,onKeydown:l.onTogglerKeydown,"aria-expanded":s.d_visible,"aria-haspopup":!0,"aria-controls":s.id+"_list","aria-label":e.ariaLabel,"aria-labelledby":e.ariaLabelledby},{icon:o.withCtx((()=>[o.renderSlot(e.$slots,"icon",{visible:s.d_visible},(()=>[s.d_visible&&i.hideIcon?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.hideIcon?"span":"PlusIcon"),{key:0,class:o.normalizeClass(i.hideIcon)},null,8,["class"])):(o.openBlock(),o.createBlock(o.resolveDynamicComponent(i.showIcon?"span":"PlusIcon"),{key:1,class:o.normalizeClass(i.showIcon)},null,8,["class"]))]))])),_:3},8,["class","disabled","onKeydown","aria-expanded","aria-controls","aria-label","aria-labelledby"])])),o.createElementVNode("ul",{ref:l.listRef,id:s.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":s.focused?l.focusedOptionId:void 0,tabindex:"-1"},[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(i.model,((t,n)=>(o.openBlock(),o.createElementBlock(o.Fragment,{key:n},[l.isItemVisible(t)?(o.openBlock(),o.createElementBlock("li",{key:0,id:`${s.id}_${n}`,"aria-controls":`${s.id}_item`,class:o.normalizeClass(["p-speeddial-item",l.itemClass(`${s.id}_${n}`)]),style:o.normalizeStyle(l.getItemStyle(n)),role:"menuitem"},[e.$slots.item?(o.openBlock(),o.createBlock(o.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):o.withDirectives((o.openBlock(),o.createElementBlock("a",{key:0,tabindex:-1,href:t.url||"#",role:"menuitem",class:o.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>l.onItemClick(e,t),"aria-label":t.label},[t.icon?(o.openBlock(),o.createElementBlock("span",{key:0,class:o.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):o.createCommentVNode("",!0)],10,m)),[[d,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[r]])],14,h)):o.createCommentVNode("",!0)],64)))),128))],40,u)],6),i.mask?(o.openBlock(),o.createElementBlock("div",{key:0,class:o.normalizeClass(l.maskClassName),style:o.normalizeStyle(i.maskStyle)},null,6)):o.createCommentVNode("",!0)],64)},p}(primevue.button,primevue.icons.plus,primevue.ripple,primevue.tooltip,primevue.utils,Vue);

package/splitbutton/SplitButton.d.ts

@@ -21,6 +21,7 @@ export interface SplitButtonProps {
     label?: string | undefined;
     /**
      * Name of the icon.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -66,12 +67,13 @@ export interface SplitButtonProps {
     menuButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Name of the menu button icon.
+     * @deprecated since v3.27.0. Use 'menubuttonicon' slot.
      */
     menuButtonIcon?: string | undefined;
     /**
      * Defines the style of the button.
      */
-    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | undefined;
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | string | undefined;
     /**
      * Add a shadow to indicate elevation.
      * @defaultValue false
@@ -111,6 +113,14 @@ export interface SplitButtonSlots {
      * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom menu button icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom menu button icon template.
+     */
+    menubuttonicon(): VNode[];
 }
 
 /**

package/splitbutton/SplitButton.vue

@@ -1,13 +1,18 @@
 <template>
     <div :class="containerClass" :style="style">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps">
+                <template #icon="slotProps">
+                    <slot name="icon">
+                        <span :class="[icon, slotProps.class]" />
+                    </slot>
+                </template>
+            </PVSButton>
         </slot>
         <PVSButton
             ref="button"
             type="button"
             class="p-splitbutton-menubutton"
-            :icon="menuButtonIcon"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -15,13 +20,20 @@
             @click="onDropdownButtonClick"
             @keydown="onDropdownKeydown"
             v-bind="menuButtonProps"
-        />
+        >
+            <template #icon="slotProps">
+                <slot name="menubuttonicon">
+                    <component :is="menuButtonIcon ? 'span' : 'ChevronDownIcon'" :class="[menuButtonIcon, slotProps.class]" />
+                </slot>
+            </template>
+        </PVSButton>
         <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
     </div>
 </template>
 
 <script>
 import Button from 'primevue/button';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
 import TieredMenu from 'primevue/tieredmenu';
 import { UniqueComponentId } from 'primevue/utils';
 
@@ -75,7 +87,7 @@ export default {
         },
         menuButtonIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         severity: {
             type: String,
@@ -152,7 +164,8 @@ export default {
     },
     components: {
         PVSButton: Button,
-        PVSMenu: TieredMenu
+        PVSMenu: TieredMenu,
+        ChevronDownIcon: ChevronDownIcon
     }
 };
 </script>