primevue 3.20.0 → 3.22.0

package/speeddial/speeddial.js

@@ -10,7 +10,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
 
     var script = {
         name: 'SpeedDial',
-        emits: ['click', 'show', 'hide'],
+        emits: ['click', 'show', 'hide', 'focus', 'blur'],
         props: {
             model: null,
             visible: {
@@ -59,7 +59,15 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             },
             tooltipOptions: null,
             style: null,
-            class: null
+            class: null,
+            'aria-labelledby': {
+                type: String,
+                default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            }
         },
         documentClickListener: null,
         container: null,
@@ -67,7 +75,9 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
         data() {
             return {
                 d_visible: this.visible,
-                isItemClicked: false
+                isItemClicked: false,
+                focused: false,
+                focusedOptionIndex: -1
             };
         },
         watch: {
@@ -97,6 +107,16 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             this.unbindDocumentClickListener();
         },
         methods: {
+            onFocus(event) {
+                this.focused = true;
+
+                this.$emit('focus', event);
+            },
+            onBlur(event) {
+                this.focused = false;
+                this.focusedOptionIndex = -1;
+                this.$emit('blur', event);
+            },
             onItemClick(e, item) {
                 if (item.command) {
                     item.command({ originalEvent: e, item });
@@ -128,6 +148,196 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
 
                 return (visible ? index : length - index - 1) * this.transitionDelay;
             },
+            onTogglerKeydown(event) {
+                switch (event.code) {
+                    case 'ArrowDown':
+                    case 'ArrowLeft':
+                        this.onTogglerArrowDown(event);
+
+                        break;
+
+                    case 'ArrowUp':
+                    case 'ArrowRight':
+                        this.onTogglerArrowUp(event);
+
+                        break;
+
+                    case 'Escape':
+                        this.onEscapeKey();
+
+                        break;
+                }
+            },
+            onKeyDown(event) {
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onArrowDown(event);
+                        break;
+
+                    case 'ArrowUp':
+                        this.onArrowUp(event);
+                        break;
+
+                    case 'ArrowLeft':
+                        this.onArrowLeft(event);
+                        break;
+
+                    case 'ArrowRight':
+                        this.onArrowRight(event);
+                        break;
+
+                    case 'Enter':
+                    case 'Space':
+                        this.onEnterKey(event);
+                        break;
+
+                    case 'Escape':
+                        this.onEscapeKey(event);
+                        break;
+
+                    case 'Home':
+                        this.onHomeKey(event);
+                        break;
+
+                    case 'End':
+                        this.onEndKey(event);
+                        break;
+                }
+            },
+            onTogglerArrowUp(event) {
+                this.focused = true;
+                utils.DomHandler.focus(this.list);
+
+                this.show();
+                this.navigatePrevItem(event);
+
+                event.preventDefault();
+            },
+            onTogglerArrowDown(event) {
+                this.focused = true;
+                utils.DomHandler.focus(this.list);
+
+                this.show();
+                this.navigateNextItem(event);
+
+                event.preventDefault();
+            },
+            onEnterKey(event) {
+                const items = utils.DomHandler.find(this.container, '.p-speeddial-item');
+                const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
+
+                this.onItemClick(event, this.model[itemIndex]);
+                this.onBlur(event);
+
+                const buttonEl = utils.DomHandler.findSingle(this.container, 'button');
+
+                buttonEl && utils.DomHandler.focus(buttonEl);
+            },
+            onEscapeKey() {
+                this.hide();
+
+                const buttonEl = utils.DomHandler.findSingle(this.container, 'button');
+
+                buttonEl && utils.DomHandler.focus(buttonEl);
+            },
+            onArrowUp(event) {
+                if (this.direction === 'up') {
+                    this.navigateNextItem(event);
+                } else if (this.direction === 'down') {
+                    this.navigatePrevItem(event);
+                } else {
+                    this.navigateNextItem(event);
+                }
+            },
+            onArrowDown(event) {
+                if (this.direction === 'up') {
+                    this.navigatePrevItem(event);
+                } else if (this.direction === 'down') {
+                    this.navigateNextItem(event);
+                } else {
+                    this.navigatePrevItem(event);
+                }
+            },
+
+            onArrowLeft(event) {
+                const leftValidDirections = ['left', 'up-right', 'down-left'];
+                const rightValidDirections = ['right', 'up-left', 'down-right'];
+
+                if (leftValidDirections.includes(this.direction)) {
+                    this.navigateNextItem(event);
+                } else if (rightValidDirections.includes(this.direction)) {
+                    this.navigatePrevItem(event);
+                } else {
+                    this.navigatePrevItem(event);
+                }
+            },
+
+            onArrowRight(event) {
+                const leftValidDirections = ['left', 'up-right', 'down-left'];
+                const rightValidDirections = ['right', 'up-left', 'down-right'];
+
+                if (leftValidDirections.includes(this.direction)) {
+                    this.navigatePrevItem(event);
+                } else if (rightValidDirections.includes(this.direction)) {
+                    this.navigateNextItem(event);
+                } else {
+                    this.navigateNextItem(event);
+                }
+            },
+            onEndKey(event) {
+                event.preventDefault();
+
+                this.focusedOptionIndex = -1;
+                this.navigatePrevItem(event);
+            },
+            onHomeKey(event) {
+                event.preventDefault();
+
+                this.focusedOptionIndex = -1;
+                this.navigateNextItem(event);
+            },
+            navigateNextItem(event) {
+                const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+                this.changeFocusedOptionIndex(optionIndex);
+
+                event.preventDefault();
+            },
+            navigatePrevItem(event) {
+                const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+                this.changeFocusedOptionIndex(optionIndex);
+
+                event.preventDefault();
+            },
+            changeFocusedOptionIndex(index) {
+                const items = utils.DomHandler.find(this.container, '.p-speeddial-item');
+                const filteredItems = [...items].filter((item) => !utils.DomHandler.hasClass(utils.DomHandler.findSingle(item, 'a'), 'p-disabled'));
+
+                if (filteredItems[index]) {
+                    this.focusedOptionIndex = filteredItems[index].getAttribute('id');
+                }
+            },
+            findPrevOptionIndex(index) {
+                const items = utils.DomHandler.find(this.container, '.p-speeddial-item');
+                const filteredItems = [...items].filter((item) => !utils.DomHandler.hasClass(utils.DomHandler.findSingle(item, 'a'), 'p-disabled'));
+                const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
+                let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
+
+                matchedOptionIndex = index === -1 ? filteredItems.length - 1 : matchedOptionIndex - 1;
+
+                return matchedOptionIndex;
+            },
+            findNextOptionIndex(index) {
+                const items = utils.DomHandler.find(this.container, '.p-speeddial-item');
+                const filteredItems = [...items].filter((item) => !utils.DomHandler.hasClass(utils.DomHandler.findSingle(item, 'a'), 'p-disabled'));
+                const newIndex = index === -1 ? filteredItems[0].id : index;
+                let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
+
+                matchedOptionIndex = index === -1 ? 0 : matchedOptionIndex + 1;
+
+                return matchedOptionIndex;
+            },
             calculatePointStyle(index) {
                 const type = this.type;
 
@@ -216,6 +426,13 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             },
             listRef(el) {
                 this.list = el;
+            },
+            itemClass(id) {
+                return [
+                    {
+                        'p-focus': id === this.focusedOptionId
+                    }
+                ];
             }
         },
         computed: {
@@ -250,6 +467,12 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                     },
                     this.maskClass
                 ];
+            },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
+            focusedOptionId() {
+                return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
             }
         },
         components: {
@@ -261,7 +484,9 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
         }
     };
 
-    const _hoisted_1 = ["href", "target", "onClick"];
+    const _hoisted_1 = ["id", "aria-activedescendant"];
+    const _hoisted_2 = ["id", "aria-controls"];
+    const _hoisted_3 = ["href", "target", "onClick", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SDButton = vue.resolveComponent("SDButton");
@@ -280,31 +505,47 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
               class: vue.normalizeClass($options.buttonClassName),
               icon: $options.iconClassName,
               onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
-              disabled: $props.disabled
-            }, null, 8, ["class", "icon", "disabled"])
+              disabled: $props.disabled,
+              onKeydown: $options.onTogglerKeydown,
+              "aria-expanded": $data.d_visible,
+              "aria-haspopup": true,
+              "aria-controls": $options.id + '_list',
+              "aria-label": _ctx.ariaLabel,
+              "aria-labelledby": _ctx.ariaLabelledby
+            }, null, 8, ["class", "icon", "disabled", "onKeydown", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby"])
           ]),
           vue.createElementVNode("ul", {
             ref: $options.listRef,
+            id: $options.id + '_list',
             class: "p-speeddial-list",
-            role: "menu"
+            role: "menu",
+            onFocus: _cache[1] || (_cache[1] = (...args) => ($options.onFocus && $options.onFocus(...args))),
+            onBlur: _cache[2] || (_cache[2] = (...args) => ($options.onBlur && $options.onBlur(...args))),
+            onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+            "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+            tabindex: "-1"
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
               return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
                 ($options.isItemVisible(item))
                   ? (vue.openBlock(), vue.createElementBlock("li", {
                       key: 0,
-                      class: "p-speeddial-item",
+                      id: `${$options.id}_${index}`,
+                      "aria-controls": `${$options.id}_item`,
+                      class: vue.normalizeClass(["p-speeddial-item", $options.itemClass(`${$options.id}_${index}`)]),
                       style: vue.normalizeStyle($options.getItemStyle(index)),
-                      role: "none"
+                      role: "menuitem"
                     }, [
                       (!_ctx.$slots.item)
                         ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
+                            tabindex: -1,
                             href: item.url || '#',
                             role: "menuitem",
                             class: vue.normalizeClass(['p-speeddial-action', { 'p-disabled': item.disabled }]),
                             target: item.target,
-                            onClick: $event => ($options.onItemClick($event, item))
+                            onClick: $event => ($options.onItemClick($event, item)),
+                            "aria-label": item.label
                           }, [
                             (item.icon)
                               ? (vue.openBlock(), vue.createElementBlock("span", {
@@ -312,7 +553,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                                   class: vue.normalizeClass(['p-speeddial-action-icon', item.icon])
                                 }, null, 2))
                               : vue.createCommentVNode("", true)
-                          ], 10, _hoisted_1)), [
+                          ], 10, _hoisted_3)), [
                             [_directive_tooltip, { value: item.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions],
                             [_directive_ripple]
                           ])
@@ -320,11 +561,11 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                             key: 1,
                             item: item
                           }, null, 8, ["item"]))
-                    ], 4))
+                    ], 14, _hoisted_2))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
-          ], 512)
+          ], 40, _hoisted_1)
         ], 6),
         ($props.mask)
           ? (vue.openBlock(), vue.createElementBlock("div", {
@@ -363,7 +604,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
       }
     }
 
-    var css_248z = "\n.p-speeddial {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-transition: top 0s linear 0.2s;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n}\n.p-speeddial-item {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n    opacity: 0;\n    -webkit-transition: opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-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    -webkit-transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\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    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 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    -webkit-transform: scale(1);\n            transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    -webkit-transform: rotate(45deg);\n            transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-speeddial-direction-left {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n";
+    var css_248z = "\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";
     styleInject(css_248z);
 
     script.render = render;

package/speeddial/speeddial.min.js

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

package/splitbutton/SplitButton.d.ts

@@ -1,6 +1,6 @@
-import { VNode } from 'vue';
-import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { ButtonHTMLAttributes, VNode } from 'vue';
 import { MenuItem } from '../menuitem';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 type SplitButtonAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
 
@@ -33,14 +33,30 @@ export interface SplitButtonProps {
      * Default value is true.
      */
     appendTo?: SplitButtonAppendToType;
+    /**
+     * When present, it specifies that the element should be disabled.
+     */
+    disabled?: boolean | undefined;
     /**
      * Style class of the component.
      */
-    class?: any;
+    class?: any | undefined;
     /**
      * Inline style of the component.
      */
-    style?: any;
+    style?: any | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the default button.
+     */
+    buttonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the menu button.
+     */
+    menuButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Name of the menu button icon.
+     */
+    menuButtonIcon?: string | undefined;
 }
 
 export interface SplitButtonSlots {

package/splitbutton/SplitButton.vue

@@ -1,9 +1,21 @@
 <template>
     <div :class="containerClass" :style="style">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
         </slot>
-        <PVSButton type="button" class="p-splitbutton-menubutton" icon="pi pi-chevron-down" @click="onDropdownButtonClick" :disabled="$attrs.disabled" aria-haspopup="true" :aria-controls="ariaId + '_overlay'" />
+        <PVSButton
+            ref="button"
+            type="button"
+            class="p-splitbutton-menubutton"
+            :icon="menuButtonIcon"
+            :disabled="disabled"
+            aria-haspopup="true"
+            :aria-expanded="isExpanded"
+            :aria-controls="ariaId + '_overlay'"
+            @click="onDropdownButtonClick"
+            @keydown="onDropdownKeydown"
+            v-bind="menuButtonProps"
+        />
         <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
     </div>
 </template>
@@ -15,7 +27,7 @@ import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'SplitButton',
-    inheritAttrs: false,
+    emits: ['click'],
     props: {
         label: {
             type: String,
@@ -41,15 +53,51 @@ export default {
             type: String,
             default: 'body'
         },
-        class: null,
-        style: null
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        class: {
+            type: null,
+            default: null
+        },
+        style: {
+            type: null,
+            default: null
+        },
+        buttonProps: {
+            type: null,
+            default: null
+        },
+        menuButtonProps: {
+            type: null,
+            default: null
+        },
+        menuButtonIcon: {
+            type: String,
+            default: 'pi pi-chevron-down'
+        }
+    },
+    data() {
+        return {
+            isExpanded: false
+        };
     },
     methods: {
         onDropdownButtonClick() {
-            this.$refs.menu.toggle({ currentTarget: this.$el });
+            this.$refs.menu.toggle({ currentTarget: this.$el, relatedTarget: this.$refs.button.$el });
+            this.isExpanded = !this.$refs.menu.visible;
+        },
+        onDropdownKeydown(event) {
+            if (event.code === 'ArrowDown' || event.code === 'ArrowUp') {
+                this.onDropdownButtonClick();
+                event.preventDefault();
+            }
         },
-        onDefaultButtonClick() {
-            this.$refs.menu.hide();
+        onDefaultButtonClick(event) {
+            this.$refs.menu.hide(event);
+
+            this.$emit('click');
         }
     },
     computed: {