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