primevue 3.8.2 → 3.11.0

package/speeddial/SpeedDial.d.ts

@@ -1,39 +1,176 @@
 import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { MenuItem } from '../menuitem';
 
-interface SpeedDialProps {
-    model?: any[];
-    visible?: boolean;
-    direction?: string;
-    transitionDelay?: number;
-    type?: string;
-    radius?: number;
-    mask?: boolean;
-    disabled?: boolean;
-    hideOnClickOutside?: boolean;
-    buttonClass?: string;
-    maskStyle?: string;
-    maskClass?: string;
-    showIcon?: string;
-    hideIcon?: string;
-    rotateAnimation?: boolean;
-    class?: string;
+type SpeedDialDirectionType = 'up' | 'down' | 'left' | 'right' | 'up-left' | 'up-right' | 'down-left' | 'down-right' | undefined;
+
+type SpeedDialType = 'linear' | 'circle' | 'semi-circle' | 'quarter-circle' | undefined;
+
+type SpeedDialTooltipPositionType = 'bottom' | 'top' | 'left' | 'right' | undefined;
+
+type SpeedDialTooltipEventType = 'hover' | 'focus' | undefined;
+
+export interface SpeedDialTooltipOptions {
+    /**
+     * Event to show the tooltip, valid values are hover and focus.
+     * @see SpeedDialTooltipEventType
+     */
+    event: string;
+    /**
+     * Position of element.
+     * @see SpeedDialTooltipPositionType
+     * Default value is 'bottom'.
+     */
+    position: string;
+    /**
+     * Optional options.
+     */
+    [key: string]: string;
+}
+
+export interface SpeedDialProps {
+    /**
+     * MenuModel instance to define the action items.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Specifies the visibility of the overlay.
+     */
+    visible?: boolean | undefined;
+    /**
+     * Specifies the opening direction of actions.
+     * @see SpeedDialDirectionType
+     * Default value is 'up'.
+     */
+    direction?: SpeedDialDirectionType;
+    /**
+     * Transition delay step for each action item.
+     * Default value is 30.
+     */
+    transitionDelay?: number | undefined;
+    /**
+     * Specifies the opening type of actions.
+     * @see SpeedDialType
+     * Default value is 'linear'.
+     */
+    type?: SpeedDialType;
+    /**
+     * Radius for *circle types.
+     * Default value is 0.
+     */
+    radius?: number | undefined;
+    /**
+     * Whether to show a mask element behind the speeddial.
+     */
+    mask?: boolean | undefined;
+    /**
+     * Whether the component is disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the actions close when clicked outside.
+     * Default value is true.
+     */
+    hideOnClickOutside?: boolean | undefined;
+    /**
+     * Style class of the button element.
+     */
+    buttonClass?: any;
+    /**
+     * Inline style of the mask element.
+     */
+    maskStyle?: any;
+    /**
+     * Style class of the mask element.
+     */
+    maskClass?: string | undefined;
+    /**
+     * Show icon of the button element.
+     * Default value is 'pi pi-plus'.
+     */
+    showIcon?: string | undefined;
+    /**
+     * Hide icon of the button element.
+     */
+    hideIcon?: string | undefined;
+    /**
+     * Defined to rotate showIcon when hideIcon is not present.
+     * Default value is true.
+     */
+    rotateAnimation?: boolean | undefined;
+    /**
+     * Style class of the element.
+     */
+    class?: any;
+    /**
+     * Inline style of the element.
+     */
     style?: any;
-    tooltipOptions?: any;
+    /**
+     * Whether to display the tooltip on items. The modifiers of Tooltip can be used like an object in it. Valid keys are 'event' and 'position'.
+     * @see SpeedDialTooltipOptions
+     */
+    tooltipOptions?: SpeedDialTooltipOptions;
+}
+
+export interface SpeedDialSlots {
+    /**
+     * Custom content for each item.
+     * @param {Object} scope - item slot's params.
+     */
+    item: (scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+    }) => VNode[];
+    /**
+     * Custom button template.
+     * @param {Object} scope - button slot's params.
+     */
+    button: (scope: {
+        /**
+         * Toggle metadata
+         */
+        toggle: () => void;
+    }) => VNode[];
 }
 
-interface SpeedDialItemSlotInterface {
-    item: any;
+export declare type SpeedDialEmits = {
+    /**
+     * Fired when the button element clicked.
+     * @param {Event} event - Browser event.
+     */
+    'click': (event: Event) => void;
+    /**
+     * Fired when the actions are visible.
+     */
+    'show': () => void;
+    /**
+     * Fired when the actions are hidden.
+     */
+    'hide': () => void;
 }
 
-declare class SpeedDial {
-    $props: SpeedDialProps;
-    $emit(eventName: 'click', event: Event): this;
-    $emit(eventName: 'show'): this;
-    $emit(eventName: 'hide'): this;
-    $slots: {
-        item: SpeedDialItemSlotInterface;
-        button: VNode[];
-    };
+declare class SpeedDial extends ClassComponent<SpeedDialProps, SpeedDialSlots, SpeedDialEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        SpeedDial: GlobalComponentConstructor<SpeedDial>
+    }
 }
 
+/**
+ *
+ * When pressed, a floating action button can display multiple primary actions that can be performed on a page.
+ *
+ * Helper API:
+ *
+ * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ *
+ * Demos:
+ *
+ * - [SpeedDial](https://www.primefaces.org/primevue/showcase/#/speeddial)
+ *
+ */
 export default SpeedDial;

package/speeddial/SpeedDial.vue

@@ -23,6 +23,7 @@
 <script>
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
+import Tooltip from 'primevue/tooltip';
 import {DomHandler} from 'primevue/utils';
 
 export default {
@@ -262,7 +263,8 @@ export default {
         'SDButton': Button
     },
     directives: {
-        'ripple': Ripple
+        'ripple': Ripple,
+        'tooltip': Tooltip
     }
 }
 </script>

package/speeddial/speeddial.cjs.js

@@ -2,6 +2,7 @@
 
 var Button = require('primevue/button');
 var Ripple = require('primevue/ripple');
+var Tooltip = require('primevue/tooltip');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
@@ -9,6 +10,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
 var script = {
     name: 'SpeedDial',
@@ -244,10 +246,11 @@ var script = {
         }
     },
     components: {
-        'SDButton': Button__default['default']
+        'SDButton': Button__default["default"]
     },
     directives: {
-        'ripple': Ripple__default['default']
+        'ripple': Ripple__default["default"],
+        'tooltip': Tooltip__default["default"]
     }
 };
 

package/speeddial/speeddial.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),i=require("primevue/ripple"),t=require("primevue/utils"),n=require("vue");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(e),l=s(i),r={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=t.DomHandler.findSingle(this.container,".p-speeddial-button"),i=t.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),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"===i)return{left:o,bottom:l};if("down"===i)return{left:o,top:l};if("left"===i)return{right:l,top:o};if("right"===i)return{left:l,top:o}}else if("quarter-circle"===i){const i=this.direction,s=Math.PI/(2*(t-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"===i)return{right:o,bottom:l};if("up-right"===i)return{left:o,bottom:l};if("down-left"===i)return{right:l,top:o};if("down-right"===i)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)},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:l.default}};!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"),r.render=function(e,i,t,s,o,l){const r=n.resolveComponent("SDButton"),a=n.resolveDirective("tooltip"),c=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Fragment,null,[n.createVNode("div",{ref:l.containerRef,class:l.containerClass,style:t.style},[n.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[n.createVNode(r,{type:"button",class:l.buttonClassName,icon:l.iconClassName,onClick:i[1]||(i[1]=e=>l.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),n.createVNode("ul",{ref:l.listRef,class:"p-speeddial-list",role:"menu"},[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(t.model,((i,s)=>(n.openBlock(),n.createBlock("li",{key:s,class:"p-speeddial-item",style:l.getItemStyle(s),role:"none"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:i},null,8,["item"])):n.withDirectives((n.openBlock(),n.createBlock("a",{key:0,href:i.url||"#",role:"menuitem",class:["p-speeddial-action",{"p-disabled":i.disabled}],target:i.target,onClick:e=>l.onItemClick(e,i)},[i.icon?(n.openBlock(),n.createBlock("span",{key:0,class:["p-speeddial-action-icon",i.icon]},null,2)):n.createCommentVNode("",!0)],10,["href","target","onClick"])),[[a,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[c]])],4)))),128))],512)],6),t.mask?(n.openBlock(),n.createBlock("div",{key:0,class:l.maskClassName,style:t.maskStyle},null,6)):n.createCommentVNode("",!0)],64)},module.exports=r;
+"use strict";var e=require("primevue/button"),i=require("primevue/ripple"),t=require("primevue/tooltip"),n=require("primevue/utils"),s=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),r=o(i),a=o(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),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"===i)return{left:o,bottom:l};if("down"===i)return{left:o,top:l};if("left"===i)return{right:l,top:o};if("right"===i)return{left:l,top:o}}else if("quarter-circle"===i){const i=this.direction,s=Math.PI/(2*(t-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"===i)return{right:o,bottom:l};if("up-right"===i)return{left:o,bottom:l};if("down-left"===i)return{right:l,top:o};if("down-right"===i)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)},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:l.default},directives:{ripple:r.default,tooltip:a.default}};!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,o,l){const r=s.resolveComponent("SDButton"),a=s.resolveDirective("tooltip"),c=s.resolveDirective("ripple");return s.openBlock(),s.createBlock(s.Fragment,null,[s.createVNode("div",{ref:l.containerRef,class:l.containerClass,style:t.style},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(r,{type:"button",class:l.buttonClassName,icon:l.iconClassName,onClick:i[1]||(i[1]=e=>l.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),s.createVNode("ul",{ref:l.listRef,class:"p-speeddial-list",role:"menu"},[(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(t.model,((i,n)=>(s.openBlock(),s.createBlock("li",{key:n,class:"p-speeddial-item",style:l.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.createBlock("a",{key:0,href:i.url||"#",role:"menuitem",class:["p-speeddial-action",{"p-disabled":i.disabled}],target:i.target,onClick:e=>l.onItemClick(e,i)},[i.icon?(s.openBlock(),s.createBlock("span",{key:0,class:["p-speeddial-action-icon",i.icon]},null,2)):s.createCommentVNode("",!0)],10,["href","target","onClick"])),[[a,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[c]])],4)))),128))],512)],6),t.mask?(s.openBlock(),s.createBlock("div",{key:0,class:l.maskClassName,style:t.maskStyle},null,6)):s.createCommentVNode("",!0)],64)},module.exports=c;

package/speeddial/speeddial.esm.js

@@ -1,5 +1,6 @@
 import Button from 'primevue/button';
 import Ripple from 'primevue/ripple';
+import Tooltip from 'primevue/tooltip';
 import { DomHandler } from 'primevue/utils';
 import { resolveComponent, resolveDirective, openBlock, createBlock, Fragment, createVNode, renderSlot, renderList, withDirectives, createCommentVNode, resolveDynamicComponent } from 'vue';
 
@@ -240,7 +241,8 @@ var script = {
         'SDButton': Button
     },
     directives: {
-        'ripple': Ripple
+        'ripple': Ripple,
+        'tooltip': Tooltip
     }
 };
 
@@ -345,4 +347,4 @@ styleInject(css_248z);
 
 script.render = render;
 
-export default script;
+export { script as default };

package/speeddial/speeddial.esm.min.js

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

package/speeddial/speeddial.js

@@ -1,11 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.speeddial = (function (Button, Ripple, utils, vue) {
+this.primevue.speeddial = (function (Button, Ripple, Tooltip, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
     var script = {
         name: 'SpeedDial',
@@ -241,10 +242,11 @@ this.primevue.speeddial = (function (Button, Ripple, utils, vue) {
             }
         },
         components: {
-            'SDButton': Button__default['default']
+            'SDButton': Button__default["default"]
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"],
+            'tooltip': Tooltip__default["default"]
         }
     };
 
@@ -351,4 +353,4 @@ this.primevue.speeddial = (function (Button, Ripple, utils, vue) {
 
     return script;
 
-}(primevue.button, primevue.ripple, primevue.utils, Vue));
+})(primevue.button, primevue.ripple, primevue.tooltip, primevue.utils, Vue);

package/speeddial/speeddial.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.speeddial=function(e,i,t,n){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=s(e),l=s(i),r={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=t.DomHandler.findSingle(this.container,".p-speeddial-button"),i=t.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),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"===i)return{left:o,bottom:l};if("down"===i)return{left:o,top:l};if("left"===i)return{right:l,top:o};if("right"===i)return{left:l,top:o}}else if("quarter-circle"===i){const i=this.direction,s=Math.PI/(2*(t-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"===i)return{right:o,bottom:l};if("up-right"===i)return{left:o,bottom:l};if("down-left"===i)return{right:l,top:o};if("down-right"===i)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)},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:l.default}};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"),r.render=function(e,i,t,s,o,l){const r=n.resolveComponent("SDButton"),a=n.resolveDirective("tooltip"),c=n.resolveDirective("ripple");return n.openBlock(),n.createBlock(n.Fragment,null,[n.createVNode("div",{ref:l.containerRef,class:l.containerClass,style:t.style},[n.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[n.createVNode(r,{type:"button",class:l.buttonClassName,icon:l.iconClassName,onClick:i[1]||(i[1]=e=>l.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),n.createVNode("ul",{ref:l.listRef,class:"p-speeddial-list",role:"menu"},[(n.openBlock(!0),n.createBlock(n.Fragment,null,n.renderList(t.model,((i,s)=>(n.openBlock(),n.createBlock("li",{key:s,class:"p-speeddial-item",style:l.getItemStyle(s),role:"none"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:i},null,8,["item"])):n.withDirectives((n.openBlock(),n.createBlock("a",{key:0,href:i.url||"#",role:"menuitem",class:["p-speeddial-action",{"p-disabled":i.disabled}],target:i.target,onClick:e=>l.onItemClick(e,i)},[i.icon?(n.openBlock(),n.createBlock("span",{key:0,class:["p-speeddial-action-icon",i.icon]},null,2)):n.createCommentVNode("",!0)],10,["href","target","onClick"])),[[a,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[c]])],4)))),128))],512)],6),t.mask?(n.openBlock(),n.createBlock("div",{key:0,class:l.maskClassName,style:t.maskStyle},null,6)):n.createCommentVNode("",!0)],64)},r}(primevue.button,primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.speeddial=function(e,i,t,n,s){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),r=o(i),a=o(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),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"===i)return{left:o,bottom:l};if("down"===i)return{left:o,top:l};if("left"===i)return{right:l,top:o};if("right"===i)return{left:l,top:o}}else if("quarter-circle"===i){const i=this.direction,s=Math.PI/(2*(t-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"===i)return{right:o,bottom:l};if("up-right"===i)return{left:o,bottom:l};if("down-left"===i)return{right:l,top:o};if("down-right"===i)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)},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:l.default},directives:{ripple:r.default,tooltip:a.default}};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,o,l){const r=s.resolveComponent("SDButton"),a=s.resolveDirective("tooltip"),c=s.resolveDirective("ripple");return s.openBlock(),s.createBlock(s.Fragment,null,[s.createVNode("div",{ref:l.containerRef,class:l.containerClass,style:t.style},[s.renderSlot(e.$slots,"button",{toggle:l.onClick},(()=>[s.createVNode(r,{type:"button",class:l.buttonClassName,icon:l.iconClassName,onClick:i[1]||(i[1]=e=>l.onClick(e)),disabled:t.disabled},null,8,["class","icon","disabled"])])),s.createVNode("ul",{ref:l.listRef,class:"p-speeddial-list",role:"menu"},[(s.openBlock(!0),s.createBlock(s.Fragment,null,s.renderList(t.model,((i,n)=>(s.openBlock(),s.createBlock("li",{key:n,class:"p-speeddial-item",style:l.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.createBlock("a",{key:0,href:i.url||"#",role:"menuitem",class:["p-speeddial-action",{"p-disabled":i.disabled}],target:i.target,onClick:e=>l.onItemClick(e,i)},[i.icon?(s.openBlock(),s.createBlock("span",{key:0,class:["p-speeddial-action-icon",i.icon]},null,2)):s.createCommentVNode("",!0)],10,["href","target","onClick"])),[[a,{value:i.label,disabled:!t.tooltipOptions},t.tooltipOptions],[c]])],4)))),128))],512)],6),t.mask?(s.openBlock(),s.createBlock("div",{key:0,class:l.maskClassName,style:t.maskStyle},null,6)):s.createCommentVNode("",!0)],64)},c}(primevue.button,primevue.ripple,primevue.tooltip,primevue.utils,Vue);

package/splitbutton/SplitButton.d.ts

@@ -1,17 +1,82 @@
-interface SplitButtonProps {
-    label?: string;
-    icon?: string;
-    model?: any[];
-    autoZIndex?: boolean;
-    baseZIndex?: number;
-    appendTo?: string;
-    class?: string;
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { MenuItem } from '../menuitem';
+
+type SplitButtonAppendToType = 'body' | 'self' | string | undefined;
+
+export interface SplitButtonProps {
+    /**
+     * Text of the button.
+     */
+    label?: string | undefined;
+    /**
+     * Name of the icon.
+     */
+    icon?: string | undefined;
+    /**
+     * MenuModel instance to define the overlay items.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Whether to automatically manage layering.
+     * Default value is true.
+     */
+    autoZIndex?: boolean | undefined;
+    /**
+     * Base zIndex value to use in layering.
+     * Default value is 0.
+     */
+    baseZIndex?: number | undefined;
+    /**
+     * A valid query selector or an HTMLElement to specify where the overlay gets attached.
+     * @see SplitButtonAppendToType
+     * Default value is true.
+     */
+    appendTo?: SplitButtonAppendToType;
+    /**
+     * Style class of the component.
+     */
+    class?: any;
+    /**
+     * Inline style of the component.
+     */
     style?: any;
 }
 
-declare class SplitButton {
-    $props: SplitButtonProps;
-    $emit(eventName: 'click', event: Event): this;
+export interface SplitButtonSlots {
+    /**
+     * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
+     */
+    default: () => VNode[];
+}
+
+export declare type SplitButtonEmits = {
+    /**
+     * Callback to invoke when main button is clicked.
+     * @param {Event} event - Browser event.
+     */
+    'click': (event: Event) => void;
+}
+
+declare class SplitButton extends ClassComponent<SplitButtonProps, SplitButtonSlots, SplitButtonEmits> { }
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        SplitButton: GlobalComponentConstructor<SplitButton>
+    }
 }
 
+/**
+ *
+ * SplitButton groups a set of commands in an overlay with a default command.
+ *
+ * Helper API:
+ *
+ * - [MenuItem](https://www.primefaces.org/primevue/showcase/#/menumodel)
+ *
+ * Demos:
+ *
+ * - [SplitButton](https://www.primefaces.org/primevue/showcase/#/splitbutton)
+ *
+ */
 export default SplitButton;

package/splitbutton/SplitButton.vue

@@ -1,6 +1,8 @@
 <template>
     <div :class="containerClass" :style="style">
-        <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
+        <slot>
+            <PVSButton type="button" class="p-splitbutton-defaultbutton" v-bind="$attrs" :icon="icon" :label="label" @click="onDefaultButtonClick" />
+        </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'"/>
         <PVSMenu :id="ariaId + '_overlay'" ref="menu" :model="model" :popup="true" :autoZIndex="autoZIndex"

package/splitbutton/splitbutton.cjs.js

@@ -58,12 +58,12 @@ var script = {
         }
     },
     components: {
-        'PVSButton': Button__default['default'],
-        'PVSMenu': TieredMenu__default['default']
+        'PVSButton': Button__default["default"],
+        'PVSMenu': TieredMenu__default["default"]
     }
 };
 
-const _withId = /*#__PURE__*/vue.withScopeId("data-v-5bb97d91");
+const _withId = /*#__PURE__*/vue.withScopeId("data-v-5def06be");
 
 const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
   const _component_PVSButton = vue.resolveComponent("PVSButton");
@@ -73,14 +73,16 @@ const render = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $optio
     class: $options.containerClass,
     style: $props.style
   }, [
-    vue.createVNode(_component_PVSButton, vue.mergeProps({
-      type: "button",
-      class: "p-splitbutton-defaultbutton"
-    }, _ctx.$attrs, {
-      icon: $props.icon,
-      label: $props.label,
-      onClick: $options.onDefaultButtonClick
-    }), null, 16, ["icon", "label", "onClick"]),
+    vue.renderSlot(_ctx.$slots, "default", {}, () => [
+      vue.createVNode(_component_PVSButton, vue.mergeProps({
+        type: "button",
+        class: "p-splitbutton-defaultbutton"
+      }, _ctx.$attrs, {
+        icon: $props.icon,
+        label: $props.label,
+        onClick: $options.onDefaultButtonClick
+      }), null, 16, ["icon", "label", "onClick"])
+    ]),
     vue.createVNode(_component_PVSButton, {
       type: "button",
       class: "p-splitbutton-menubutton",
@@ -129,10 +131,10 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-splitbutton[data-v-5bb97d91] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5bb97d91] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-5bb97d91] {\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-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-5bb97d91] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5bb97d91]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
+var css_248z = "\n.p-splitbutton[data-v-5def06be] {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    position: relative;\n}\n.p-splitbutton .p-splitbutton-defaultbutton[data-v-5def06be] {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    border-right: 0 none;\n}\n.p-splitbutton-menubutton[data-v-5def06be] {\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-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-splitbutton .p-menu[data-v-5def06be] {\n    min-width: 100%;\n}\n.p-fluid .p-splitbutton[data-v-5def06be]  {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n";
 styleInject(css_248z);
 
 script.render = render;
-script.__scopeId = "data-v-5bb97d91";
+script.__scopeId = "data-v-5def06be";
 
 module.exports = script;