primevue 3.16.2 → 3.18.0

package/speeddial/speeddial.esm.js

@@ -64,7 +64,7 @@ var script = {
         return {
             d_visible: this.visible,
             isItemClicked: false
-        }
+        };
     },
     watch: {
         visible(newValue) {
@@ -79,6 +79,7 @@ var script = {
             if (button && firstItem) {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
                 const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
+
                 this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
                 this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
             }
@@ -128,49 +129,43 @@ var script = {
 
             if (type !== 'linear') {
                 const length = this.model.length;
-                const radius = this.radius || (length * 20);
+                const radius = this.radius || length * 20;
 
                 if (type === 'circle') {
-                    const step = 2 * Math.PI / length;
+                    const step = (2 * Math.PI) / length;
 
                     return {
                         left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
-                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
-                    }
-                }
-                else if (type === 'semi-circle') {
+                        top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
+                    };
+                } else if (type === 'semi-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (length - 1);
                     const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                     const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                     if (direction === 'up') {
                         return { left: x, bottom: y };
-                    }
-                    else if (direction === 'down') {
+                    } else if (direction === 'down') {
                         return { left: x, top: y };
-                    }
-                    else if (direction === 'left') {
+                    } else if (direction === 'left') {
                         return { right: y, top: x };
-                    }
-                    else if (direction === 'right') {
+                    } else if (direction === 'right') {
                         return { left: y, top: x };
                     }
-                }
-                else if (type === 'quarter-circle') {
+                } else if (type === 'quarter-circle') {
                     const direction = this.direction;
                     const step = Math.PI / (2 * (length - 1));
                     const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                     const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                     if (direction === 'up-left') {
                         return { right: x, bottom: y };
-                    }
-                    else if (direction === 'up-right') {
+                    } else if (direction === 'up-right') {
                         return { left: x, bottom: y };
-                    }
-                    else if (direction === 'down-left') {
+                    } else if (direction === 'down-left') {
                         return { right: y, top: x };
-                    }
-                    else if (direction === 'down-right') {
+                    } else if (direction === 'down-right') {
                         return { left: y, top: x };
                     }
                 }
@@ -196,6 +191,7 @@ var script = {
 
                     this.isItemClicked = false;
                 };
+
                 document.addEventListener('click', this.documentClickListener);
             }
         },
@@ -208,6 +204,9 @@ var script = {
         isOutsideClicked(event) {
             return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked);
         },
+        isItemVisible(item) {
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+        },
         containerRef(el) {
             this.container = el;
         },
@@ -217,32 +216,44 @@ var script = {
     },
     computed: {
         containerClass() {
-            return [`p-speeddial p-component p-speeddial-${this.type}`, {
-                [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
-                'p-speeddial-opened': this.d_visible,
-                'p-disabled': this.disabled
-            }, this.class];
+            return [
+                `p-speeddial p-component p-speeddial-${this.type}`,
+                {
+                    [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
+                    '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];
+            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];
+            return [
+                'p-speeddial-mask',
+                {
+                    'p-speeddial-mask-visible': this.d_visible
+                },
+                this.maskClass
+            ];
         }
     },
     components: {
-        'SDButton': Button
+        SDButton: Button
     },
     directives: {
-        'ripple': Ripple,
-        'tooltip': Tooltip
+        ripple: Ripple,
+        tooltip: Tooltip
     }
 };
 
@@ -274,36 +285,40 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         role: "menu"
       }, [
         (openBlock(true), createElementBlock(Fragment, null, renderList($props.model, (item, index) => {
-          return (openBlock(), createElementBlock("li", {
-            key: index,
-            class: "p-speeddial-item",
-            style: normalizeStyle($options.getItemStyle(index)),
-            role: "none"
-          }, [
-            (!_ctx.$slots.item)
-              ? withDirectives((openBlock(), createElementBlock("a", {
+          return (openBlock(), createElementBlock(Fragment, { key: index }, [
+            ($options.isItemVisible(item))
+              ? (openBlock(), createElementBlock("li", {
                   key: 0,
-                  href: item.url || '#',
-                  role: "menuitem",
-                  class: normalizeClass(['p-speeddial-action', { 'p-disabled': item.disabled }]),
-                  target: item.target,
-                  onClick: $event => ($options.onItemClick($event, item))
+                  class: "p-speeddial-item",
+                  style: normalizeStyle($options.getItemStyle(index)),
+                  role: "none"
                 }, [
-                  (item.icon)
-                    ? (openBlock(), createElementBlock("span", {
+                  (!_ctx.$slots.item)
+                    ? withDirectives((openBlock(), createElementBlock("a", {
                         key: 0,
-                        class: normalizeClass(['p-speeddial-action-icon', item.icon])
-                      }, null, 2))
-                    : createCommentVNode("", true)
-                ], 10, _hoisted_1)), [
-                  [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions],
-                  [_directive_ripple]
-                ])
-              : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
-                  key: 1,
-                  item: item
-                }, null, 8, ["item"]))
-          ], 4))
+                        href: item.url || '#',
+                        role: "menuitem",
+                        class: normalizeClass(['p-speeddial-action', { 'p-disabled': item.disabled }]),
+                        target: item.target,
+                        onClick: $event => ($options.onItemClick($event, item))
+                      }, [
+                        (item.icon)
+                          ? (openBlock(), createElementBlock("span", {
+                              key: 0,
+                              class: normalizeClass(['p-speeddial-action-icon', item.icon])
+                            }, null, 2))
+                          : createCommentVNode("", true)
+                      ], 10, _hoisted_1)), [
+                        [_directive_tooltip, { value: item.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions],
+                        [_directive_ripple]
+                      ])
+                    : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
+                        key: 1,
+                        item: item
+                      }, null, 8, ["item"]))
+                ], 4))
+              : createCommentVNode("", true)
+          ], 64))
         }), 128))
       ], 512)
     ], 6),

package/speeddial/speeddial.esm.min.js

@@ -1 +1 @@
-import e from"primevue/button";import i from"primevue/ripple";import t from"primevue/tooltip";import{DomHandler as n}from"primevue/utils";import{resolveComponent as s,resolveDirective as l,openBlock as o,createElementBlock as r,Fragment as a,createElementVNode as c,normalizeClass as d,normalizeStyle as p,renderSlot as m,createVNode as u,renderList as b,withDirectives as f,createCommentVNode as h,createBlock as k,resolveDynamicComponent as x}from"vue";var y={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.findSingle(this.container,".p-speeddial-button"),i=n.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)},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:e},directives:{ripple:i,tooltip:t}};const w=["href","target","onClick"];!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"),y.render=function(e,i,t,n,y,v){const g=s("SDButton"),C=l("tooltip"),z=l("ripple");return o(),r(a,null,[c("div",{ref:v.containerRef,class:d(v.containerClass),style:p(t.style)},[m(e.$slots,"button",{toggle:v.onClick},(()=>[u(g,{type:"button",class:d(v.buttonClassName),icon:v.iconClassName,onClick:i[0]||(i[0]=e=>v.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),c("ul",{ref:v.listRef,class:"p-speeddial-list",role:"menu"},[(o(!0),r(a,null,b(t.model,((i,n)=>(o(),r("li",{key:n,class:"p-speeddial-item",style:p(v.getItemStyle(n)),role:"none"},[e.$slots.item?(o(),k(x(e.$slots.item),{key:1,item:i},null,8,["item"])):f((o(),r("a",{key:0,href:i.url||"#",role:"menuitem",class:d(["p-speeddial-action",{"p-disabled":i.disabled}]),target:i.target,onClick:e=>v.onItemClick(e,i)},[i.icon?(o(),r("span",{key:0,class:d(["p-speeddial-action-icon",i.icon])},null,2)):h("",!0)],10,w)),[[C,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[z]])],4)))),128))],512)],6),t.mask?(o(),r("div",{key:0,class:d(v.maskClassName),style:p(t.maskStyle)},null,6)):h("",!0)],64)};export{y as default};
+import e from"primevue/button";import i from"primevue/ripple";import t from"primevue/tooltip";import{DomHandler as n}from"primevue/utils";import{resolveComponent as s,resolveDirective as l,openBlock as o,createElementBlock as r,Fragment as a,createElementVNode as c,normalizeClass as d,normalizeStyle as p,renderSlot as m,createVNode as b,renderList as u,withDirectives as f,createCommentVNode as h,createBlock as k,resolveDynamicComponent as x}from"vue";var y={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.findSingle(this.container,".p-speeddial-button"),i=n.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:e},directives:{ripple:i,tooltip:t}};const w=["href","target","onClick"];!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"),y.render=function(e,i,t,n,y,v){const g=s("SDButton"),C=l("tooltip"),I=l("ripple");return o(),r(a,null,[c("div",{ref:v.containerRef,class:d(v.containerClass),style:p(t.style)},[m(e.$slots,"button",{toggle:v.onClick},(()=>[b(g,{type:"button",class:d(v.buttonClassName),icon:v.iconClassName,onClick:i[0]||(i[0]=e=>v.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),c("ul",{ref:v.listRef,class:"p-speeddial-list",role:"menu"},[(o(!0),r(a,null,u(t.model,((i,n)=>(o(),r(a,{key:n},[v.isItemVisible(i)?(o(),r("li",{key:0,class:"p-speeddial-item",style:p(v.getItemStyle(n)),role:"none"},[e.$slots.item?(o(),k(x(e.$slots.item),{key:1,item:i},null,8,["item"])):f((o(),r("a",{key:0,href:i.url||"#",role:"menuitem",class:d(["p-speeddial-action",{"p-disabled":i.disabled}]),target:i.target,onClick:e=>v.onItemClick(e,i)},[i.icon?(o(),r("span",{key:0,class:d(["p-speeddial-action-icon",i.icon])},null,2)):h("",!0)],10,w)),[[C,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[I]])],4)):h("",!0)],64)))),128))],512)],6),t.mask?(o(),r("div",{key:0,class:d(v.maskClassName),style:p(t.maskStyle)},null,6)):h("",!0)],64)};export{y as default};

package/speeddial/speeddial.js

@@ -68,7 +68,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             return {
                 d_visible: this.visible,
                 isItemClicked: false
-            }
+            };
         },
         watch: {
             visible(newValue) {
@@ -83,6 +83,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
                 if (button && firstItem) {
                     const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
                     const hDiff = Math.abs(button.offsetHeight - firstItem.offsetHeight);
+
                     this.list.style.setProperty('--item-diff-x', `${wDiff / 2}px`);
                     this.list.style.setProperty('--item-diff-y', `${hDiff / 2}px`);
                 }
@@ -132,49 +133,43 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
 
                 if (type !== 'linear') {
                     const length = this.model.length;
-                    const radius = this.radius || (length * 20);
+                    const radius = this.radius || length * 20;
 
                     if (type === 'circle') {
-                        const step = 2 * Math.PI / length;
+                        const step = (2 * Math.PI) / length;
 
                         return {
                             left: `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`,
-                            top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`,
-                        }
-                    }
-                    else if (type === 'semi-circle') {
+                            top: `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`
+                        };
+                    } else if (type === 'semi-circle') {
                         const direction = this.direction;
                         const step = Math.PI / (length - 1);
                         const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                         const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                         if (direction === 'up') {
                             return { left: x, bottom: y };
-                        }
-                        else if (direction === 'down') {
+                        } else if (direction === 'down') {
                             return { left: x, top: y };
-                        }
-                        else if (direction === 'left') {
+                        } else if (direction === 'left') {
                             return { right: y, top: x };
-                        }
-                        else if (direction === 'right') {
+                        } else if (direction === 'right') {
                             return { left: y, top: x };
                         }
-                    }
-                    else if (type === 'quarter-circle') {
+                    } else if (type === 'quarter-circle') {
                         const direction = this.direction;
                         const step = Math.PI / (2 * (length - 1));
                         const x = `calc(${radius * Math.cos(step * index)}px + var(--item-diff-x, 0px))`;
                         const y = `calc(${radius * Math.sin(step * index)}px + var(--item-diff-y, 0px))`;
+
                         if (direction === 'up-left') {
                             return { right: x, bottom: y };
-                        }
-                        else if (direction === 'up-right') {
+                        } else if (direction === 'up-right') {
                             return { left: x, bottom: y };
-                        }
-                        else if (direction === 'down-left') {
+                        } else if (direction === 'down-left') {
                             return { right: y, top: x };
-                        }
-                        else if (direction === 'down-right') {
+                        } else if (direction === 'down-right') {
                             return { left: y, top: x };
                         }
                     }
@@ -200,6 +195,7 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
 
                         this.isItemClicked = false;
                     };
+
                     document.addEventListener('click', this.documentClickListener);
                 }
             },
@@ -212,6 +208,9 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             isOutsideClicked(event) {
                 return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked);
             },
+            isItemVisible(item) {
+                return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+            },
             containerRef(el) {
                 this.container = el;
             },
@@ -221,32 +220,44 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
         },
         computed: {
             containerClass() {
-                return [`p-speeddial p-component p-speeddial-${this.type}`, {
-                    [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
-                    'p-speeddial-opened': this.d_visible,
-                    'p-disabled': this.disabled
-                }, this.class];
+                return [
+                    `p-speeddial p-component p-speeddial-${this.type}`,
+                    {
+                        [`p-speeddial-direction-${this.direction}`]: this.type !== 'circle',
+                        '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];
+                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];
+                return [
+                    'p-speeddial-mask',
+                    {
+                        'p-speeddial-mask-visible': this.d_visible
+                    },
+                    this.maskClass
+                ];
             }
         },
         components: {
-            'SDButton': Button__default["default"]
+            SDButton: Button__default["default"]
         },
         directives: {
-            'ripple': Ripple__default["default"],
-            'tooltip': Tooltip__default["default"]
+            ripple: Ripple__default["default"],
+            tooltip: Tooltip__default["default"]
         }
     };
 
@@ -278,36 +289,40 @@ this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
             role: "menu"
           }, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, index) => {
-              return (vue.openBlock(), vue.createElementBlock("li", {
-                key: index,
-                class: "p-speeddial-item",
-                style: vue.normalizeStyle($options.getItemStyle(index)),
-                role: "none"
-              }, [
-                (!_ctx.$slots.item)
-                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+              return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
+                ($options.isItemVisible(item))
+                  ? (vue.openBlock(), vue.createElementBlock("li", {
                       key: 0,
-                      href: item.url || '#',
-                      role: "menuitem",
-                      class: vue.normalizeClass(['p-speeddial-action', { 'p-disabled': item.disabled }]),
-                      target: item.target,
-                      onClick: $event => ($options.onItemClick($event, item))
+                      class: "p-speeddial-item",
+                      style: vue.normalizeStyle($options.getItemStyle(index)),
+                      role: "none"
                     }, [
-                      (item.icon)
-                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                      (!_ctx.$slots.item)
+                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
                             key: 0,
-                            class: vue.normalizeClass(['p-speeddial-action-icon', item.icon])
-                          }, null, 2))
-                        : vue.createCommentVNode("", true)
-                    ], 10, _hoisted_1)), [
-                      [_directive_tooltip, {value: item.label, disabled: !$props.tooltipOptions}, $props.tooltipOptions],
-                      [_directive_ripple]
-                    ])
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
-                      key: 1,
-                      item: item
-                    }, null, 8, ["item"]))
-              ], 4))
+                            href: item.url || '#',
+                            role: "menuitem",
+                            class: vue.normalizeClass(['p-speeddial-action', { 'p-disabled': item.disabled }]),
+                            target: item.target,
+                            onClick: $event => ($options.onItemClick($event, item))
+                          }, [
+                            (item.icon)
+                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  key: 0,
+                                  class: vue.normalizeClass(['p-speeddial-action-icon', item.icon])
+                                }, null, 2))
+                              : vue.createCommentVNode("", true)
+                          ], 10, _hoisted_1)), [
+                            [_directive_tooltip, { value: item.label, disabled: !$props.tooltipOptions }, $props.tooltipOptions],
+                            [_directive_ripple]
+                          ])
+                        : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
+                            key: 1,
+                            item: item
+                          }, null, 8, ["item"]))
+                    ], 4))
+                  : vue.createCommentVNode("", true)
+              ], 64))
             }), 128))
           ], 512)
         ], 6),

package/speeddial/speeddial.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.speeddial=function(e,t,i,n,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),r=l(t),a=l(i),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"),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:{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},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),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"===t)return{left:l,bottom:o};if("down"===t)return{left:l,top:o};if("left"===t)return{right:o,top:l};if("right"===t)return{left:o,top:l}}else if("quarter-circle"===t){const t=this.direction,s=Math.PI/(2*(i-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"===t)return{right:l,bottom:o};if("up-right"===t)return{left:l,bottom:o};if("down-left"===t)return{right:o,top:l};if("down-right"===t)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)},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,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: -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,t,i,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(i.style)},[s.renderSlot(e.$slots,"button",{toggle:o.onClick},(()=>[s.createVNode(r,{type:"button",class:s.normalizeClass(o.buttonClassName),icon:o.iconClassName,onClick:t[0]||(t[0]=e=>o.onClick(e)),disabled:i.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(i.model,((t,n)=>(s.openBlock(),s.createElementBlock("li",{key:n,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:t},null,8,["item"])):s.withDirectives((s.openBlock(),s.createElementBlock("a",{key:0,href:t.url||"#",role:"menuitem",class:s.normalizeClass(["p-speeddial-action",{"p-disabled":t.disabled}]),target:t.target,onClick:e=>o.onItemClick(e,t)},[t.icon?(s.openBlock(),s.createElementBlock("span",{key:0,class:s.normalizeClass(["p-speeddial-action-icon",t.icon])},null,2)):s.createCommentVNode("",!0)],10,d)),[[a,{value:t.label,disabled:!i.tooltipOptions},i.tooltipOptions],[c]])],4)))),128))],512)],6),i.mask?(s.openBlock(),s.createElementBlock("div",{key:0,class:s.normalizeClass(o.maskClassName),style:s.normalizeStyle(i.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,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);

package/splitbutton/SplitButton.d.ts

@@ -55,14 +55,14 @@ export declare type SplitButtonEmits = {
      * Callback to invoke when main button is clicked.
      * @param {Event} event - Browser event.
      */
-    'click': (event: Event) => void;
-}
+    click: (event: Event) => void;
+};
 
-declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> { }
+declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> {}
 
 declare module '@vue/runtime-core' {
     interface GlobalComponents {
-        SplitButton: GlobalComponentConstructor<SplitButton>
+        SplitButton: GlobalComponentConstructor<SplitButton>;
     }
 }
 
@@ -72,11 +72,11 @@ declare module '@vue/runtime-core' {
  *
  * Helper API:
  *
- * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ * - [MenuItem](https://www.primefaces.org/primevue/menumodel)
  *
  * Demos:
  *
- * - [SplitButton](https://www.primefaces.org/primevue/showcase/#/splitbutton)
+ * - [SplitButton](https://www.primefaces.org/primevue/splitbutton)
  *
  */
 export default SplitButton;