primevue 3.14.0 → 3.16.1

package/speeddial/speeddial.js

@@ -0,0 +1,358 @@
+this.primevue = this.primevue || {};
+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',
+        emits: ['click', 'show', 'hide'],
+        props: {
+            model: null,
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            direction: {
+                type: String,
+                default: 'up'
+            },
+            transitionDelay: {
+                type: Number,
+                default: 30
+            },
+            type: {
+                type: String,
+                default: 'linear'
+            },
+            radius: {
+                type: Number,
+                default: 0
+            },
+            mask: {
+                type: Boolean,
+                default: false
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            hideOnClickOutside: {
+                type: Boolean,
+                default: true
+            },
+            buttonClass: null,
+            maskStyle: null,
+            maskClass: null,
+            showIcon: {
+                type: String,
+                default: 'pi pi-plus'
+            },
+            hideIcon: null,
+            rotateAnimation: {
+                type: Boolean,
+                default: true
+            },
+            tooltipOptions: null,
+            style: null,
+            class: null
+        },
+        documentClickListener: null,
+        container: null,
+        list: null,
+        data() {
+            return {
+                d_visible: this.visible,
+                isItemClicked: false
+            }
+        },
+        watch: {
+            visible(newValue) {
+                this.d_visible = newValue;
+            }
+        },
+        mounted() {
+            if (this.type !== 'linear') {
+                const button = utils.DomHandler.findSingle(this.container, '.p-speeddial-button');
+                const firstItem = utils.DomHandler.findSingle(this.list, '.p-speeddial-item');
+
+                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`);
+                }
+            }
+
+            if (this.hideOnClickOutside) {
+                this.bindDocumentClickListener();
+            }
+        },
+        beforeMount() {
+            this.unbindDocumentClickListener();
+        },
+        methods: {
+            onItemClick(e, item) {
+                if (item.command) {
+                    item.command({ originalEvent: e, item });
+                }
+
+                this.hide();
+
+                this.isItemClicked = true;
+                e.preventDefault();
+            },
+            onClick(event) {
+                this.d_visible ? this.hide() : this.show();
+
+                this.isItemClicked = true;
+
+                this.$emit('click', event);
+            },
+            show() {
+                this.d_visible = true;
+                this.$emit('show');
+            },
+            hide() {
+                this.d_visible = false;
+                this.$emit('hide');
+            },
+            calculateTransitionDelay(index) {
+                const length = this.model.length;
+                const visible = this.d_visible;
+
+                return (visible ? index : length - index - 1) * this.transitionDelay;
+            },
+            calculatePointStyle(index) {
+                const type = this.type;
+
+                if (type !== 'linear') {
+                    const length = this.model.length;
+                    const radius = this.radius || (length * 20);
+
+                    if (type === 'circle') {
+                        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') {
+                        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') {
+                            return { left: x, top: y };
+                        }
+                        else if (direction === 'left') {
+                            return { right: y, top: x };
+                        }
+                        else if (direction === 'right') {
+                            return { left: y, top: x };
+                        }
+                    }
+                    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') {
+                            return { left: x, bottom: y };
+                        }
+                        else if (direction === 'down-left') {
+                            return { right: y, top: x };
+                        }
+                        else if (direction === 'down-right') {
+                            return { left: y, top: x };
+                        }
+                    }
+                }
+
+                return {};
+            },
+            getItemStyle(index) {
+                const transitionDelay = this.calculateTransitionDelay(index);
+                const pointStyle = this.calculatePointStyle(index);
+
+                return {
+                    transitionDelay: `${transitionDelay}ms`,
+                    ...pointStyle
+                };
+            },
+            bindDocumentClickListener() {
+                if (!this.documentClickListener) {
+                    this.documentClickListener = (event) => {
+                        if (this.d_visible && this.isOutsideClicked(event)) {
+                            this.hide();
+                        }
+
+                        this.isItemClicked = false;
+                    };
+                    document.addEventListener('click', this.documentClickListener);
+                }
+            },
+            unbindDocumentClickListener() {
+                if (this.documentClickListener) {
+                    document.removeEventListener('click', this.documentClickListener);
+                    this.documentClickListener = null;
+                }
+            },
+            isOutsideClicked(event) {
+                return this.container && !(this.container.isSameNode(event.target) || this.container.contains(event.target) || this.isItemClicked);
+            },
+            containerRef(el) {
+                this.container = el;
+            },
+            listRef(el) {
+                this.list = el;
+            }
+        },
+        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];
+            },
+            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': Button__default["default"]
+        },
+        directives: {
+            'ripple': Ripple__default["default"],
+            'tooltip': Tooltip__default["default"]
+        }
+    };
+
+    const _hoisted_1 = ["href", "target", "onClick"];
+
+    function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_SDButton = vue.resolveComponent("SDButton");
+      const _directive_tooltip = vue.resolveDirective("tooltip");
+      const _directive_ripple = vue.resolveDirective("ripple");
+
+      return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        vue.createElementVNode("div", {
+          ref: $options.containerRef,
+          class: vue.normalizeClass($options.containerClass),
+          style: vue.normalizeStyle($props.style)
+        }, [
+          vue.renderSlot(_ctx.$slots, "button", { toggle: $options.onClick }, () => [
+            vue.createVNode(_component_SDButton, {
+              type: "button",
+              class: vue.normalizeClass($options.buttonClassName),
+              icon: $options.iconClassName,
+              onClick: _cache[0] || (_cache[0] = $event => ($options.onClick($event))),
+              disabled: $props.disabled
+            }, null, 8, ["class", "icon", "disabled"])
+          ]),
+          vue.createElementVNode("ul", {
+            ref: $options.listRef,
+            class: "p-speeddial-list",
+            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", {
+                      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))
+                    }, [
+                      (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))
+            }), 128))
+          ], 512)
+        ], 6),
+        ($props.mask)
+          ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass($options.maskClassName),
+              style: vue.normalizeStyle($props.maskStyle)
+            }, null, 6))
+          : vue.createCommentVNode("", true)
+      ], 64))
+    }
+
+    function styleInject(css, ref) {
+      if ( ref === void 0 ) ref = {};
+      var insertAt = ref.insertAt;
+
+      if (!css || typeof document === 'undefined') { return; }
+
+      var head = document.head || document.getElementsByTagName('head')[0];
+      var style = document.createElement('style');
+      style.type = 'text/css';
+
+      if (insertAt === 'top') {
+        if (head.firstChild) {
+          head.insertBefore(style, head.firstChild);
+        } else {
+          head.appendChild(style);
+        }
+      } else {
+        head.appendChild(style);
+      }
+
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(document.createTextNode(css));
+      }
+    }
+
+    var css_248z = "\n.p-speeddial {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    z-index: 1;\n}\n.p-speeddial-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-transition: top 0s linear 0.2s;\n    transition: top 0s linear 0.2s;\n    pointer-events: none;\n}\n.p-speeddial-item {\n    -webkit-transform: scale(0);\n            transform: scale(0);\n    opacity: 0;\n    -webkit-transition: opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;\n    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s, -webkit-transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-action {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    border-radius: 50%;\n    position: relative;\n    overflow: hidden;\n}\n.p-speeddial-circle .p-speeddial-item,\n.p-speeddial-semi-circle .p-speeddial-item,\n.p-speeddial-quarter-circle .p-speeddial-item {\n    position: absolute;\n}\n.p-speeddial-rotate {\n    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    will-change: transform;\n}\n.p-speeddial-mask {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    opacity: 0;\n    -webkit-transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-mask-visible {\n    pointer-events: none;\n    opacity: 1;\n    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-speeddial-opened .p-speeddial-list {\n    pointer-events: auto;\n}\n.p-speeddial-opened .p-speeddial-item {\n    -webkit-transform: scale(1);\n            transform: scale(1);\n    opacity: 1;\n}\n.p-speeddial-opened .p-speeddial-rotate {\n    -webkit-transform: rotate(45deg);\n            transform: rotate(45deg);\n}\n\n/* Direction */\n.p-speeddial-direction-up {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-speeddial-direction-up .p-speeddial-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: column-reverse;\n            flex-direction: column-reverse;\n}\n.p-speeddial-direction-down {\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-speeddial-direction-down .p-speeddial-list {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-speeddial-direction-left {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-speeddial-direction-left .p-speeddial-list {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: reverse;\n        -ms-flex-direction: row-reverse;\n            flex-direction: row-reverse;\n}\n.p-speeddial-direction-right {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-speeddial-direction-right .p-speeddial-list {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n";
+    styleInject(css_248z);
+
+    script.render = render;
+
+    return script;
+
+})(primevue.button, primevue.ripple, primevue.tooltip, primevue.utils, Vue);

package/speeddial/speeddial.min.js

@@ -0,0 +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);

package/splitbutton/SplitButton.d.ts

@@ -0,0 +1,82 @@
+import { VNode } from 'vue';
+import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
+import { MenuItem } from '../menuitem';
+
+type SplitButtonAppendToType = 'body' | 'self' | string | undefined | HTMLElement;
+
+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;
+}
+
+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

@@ -0,0 +1,104 @@
+<template>
+    <div :class="containerClass" :style="style">
+        <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"
+            :baseZIndex="baseZIndex" :appendTo="appendTo" />
+    </div>
+</template>
+
+<script>
+import Button from 'primevue/button';
+import TieredMenu from 'primevue/tieredmenu';
+import {UniqueComponentId} from 'primevue/utils';
+
+export default {
+    name: 'SplitButton',
+    inheritAttrs: false,
+    props: {
+        label: {
+            type: String,
+            default: null
+        },
+        icon: {
+            type: String,
+            default: null
+        },
+		model: {
+            type: Array,
+            default: null
+        },
+        autoZIndex: {
+            type: Boolean,
+            default: true
+        },
+        baseZIndex: {
+            type: Number,
+            default: 0
+        },
+        appendTo: {
+            type: String,
+            default: 'body'
+        },
+        class: null,
+        style: null
+    },
+    methods: {
+        onDropdownButtonClick() {
+            this.$refs.menu.toggle({currentTarget: this.$el});
+        },
+        onDefaultButtonClick() {
+            this.$refs.menu.hide();
+        }
+    },
+    computed: {
+        ariaId() {
+            return UniqueComponentId();
+        },
+        containerClass() {
+            return ['p-splitbutton p-component', this.class];
+        }
+    },
+    components: {
+        'PVSButton': Button,
+        'PVSMenu': TieredMenu
+    }
+}
+</script>
+
+<style scoped>
+.p-splitbutton {
+    display: inline-flex;
+    position: relative;
+}
+
+.p-splitbutton .p-splitbutton-defaultbutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-defaultbutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-defaultbutton.p-button {
+    flex: 1 1 auto;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0 none;
+}
+
+.p-splitbutton-menubutton,
+.p-splitbutton.p-button-rounded > .p-splitbutton-menubutton.p-button,
+.p-splitbutton.p-button-outlined > .p-splitbutton-menubutton.p-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-splitbutton .p-menu {
+    min-width: 100%;
+}
+
+.p-fluid .p-splitbutton  {
+    display: flex;
+}
+</style>

package/splitbutton/package.json

@@ -0,0 +1,9 @@
+{
+  "main": "./splitbutton.cjs.js",
+  "module": "./splitbutton.esm.js",
+  "unpkg": "./splitbutton.min.js",
+  "types": "./SplitButton.d.ts",
+  "browser": {
+    "./sfc": "./SplitButton.vue"
+  }
+}