primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 19.1 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.speeddial=function(e,t,i){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e),l=n(t);class o{static innerWidth(e){let t=e.offsetWidth,i=getComputedStyle(e);return t+=parseFloat(i.paddingLeft)+parseFloat(i.paddingRight),t}static width(e){let t=e.offsetWidth,i=getComputedStyle(e);return t-=parseFloat(i.paddingLeft)+parseFloat(i.paddingRight),t}static getWindowScrollTop(){let e=document.documentElement;return(window.pageYOffset||e.scrollTop)-(e.clientTop||0)}static getWindowScrollLeft(){let e=document.documentElement;return(window.pageXOffset||e.scrollLeft)-(e.clientLeft||0)}static getOuterWidth(e,t){if(e){let i=e.offsetWidth;if(t){let t=getComputedStyle(e);i+=parseFloat(t.marginLeft)+parseFloat(t.marginRight)}return i}return 0}static getOuterHeight(e,t){if(e){let i=e.offsetHeight;if(t){let t=getComputedStyle(e);i+=parseFloat(t.marginTop)+parseFloat(t.marginBottom)}return i}return 0}static getClientHeight(e,t){if(e){let i=e.clientHeight;if(t){let t=getComputedStyle(e);i+=parseFloat(t.marginTop)+parseFloat(t.marginBottom)}return i}return 0}static getViewport(){let e=window,t=document,i=t.documentElement,n=t.getElementsByTagName("body")[0];return{width:e.innerWidth||i.clientWidth||n.clientWidth,height:e.innerHeight||i.clientHeight||n.clientHeight}}static getOffset(e){var t=e.getBoundingClientRect();return{top:t.top+(window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0),left:t.left+(window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0)}}static index(e){let t=e.parentNode.childNodes,i=0;for(var n=0;n<t.length;n++){if(t[n]===e)return i;1===t[n].nodeType&&i++}return-1}static addMultipleClasses(e,t){if(e.classList){let i=t.split(" ");for(let t=0;t<i.length;t++)e.classList.add(i[t])}else{let i=t.split(" ");for(let t=0;t<i.length;t++)e.className+=" "+i[t]}}static addClass(e,t){e.classList?e.classList.add(t):e.className+=" "+t}static removeClass(e,t){e.classList?e.classList.remove(t):e.className=e.className.replace(new RegExp("(^|\\b)"+t.split(" ").join("|")+"(\\b|$)","gi")," ")}static hasClass(e,t){return!!e&&(e.classList?e.classList.contains(t):new RegExp("(^| )"+t+"( |$)","gi").test(e.className))}static find(e,t){return e.querySelectorAll(t)}static findSingle(e,t){return e.querySelector(t)}static getHeight(e){let t=e.offsetHeight,i=getComputedStyle(e);return t-=parseFloat(i.paddingTop)+parseFloat(i.paddingBottom)+parseFloat(i.borderTopWidth)+parseFloat(i.borderBottomWidth),t}static getWidth(e){let t=e.offsetWidth,i=getComputedStyle(e);return t-=parseFloat(i.paddingLeft)+parseFloat(i.paddingRight)+parseFloat(i.borderLeftWidth)+parseFloat(i.borderRightWidth),t}static absolutePosition(e,t){let i,n,s=e.offsetParent?{width:e.offsetWidth,height:e.offsetHeight}:this.getHiddenElementDimensions(e),l=s.height,o=s.width,r=t.offsetHeight,a=t.offsetWidth,d=t.getBoundingClientRect(),c=this.getWindowScrollTop(),p=this.getWindowScrollLeft(),m=this.getViewport();d.top+r+l>m.height?(i=d.top+c-l,e.style.transformOrigin="bottom",i<0&&(i=c)):(i=r+d.top+c,e.style.transformOrigin="top"),n=d.left+o>m.width?Math.max(0,d.left+p+a-o):d.left+p,e.style.top=i+"px",e.style.left=n+"px"}static relativePosition(e,t){let i=e.offsetParent?{width:e.offsetWidth,height:e.offsetHeight}:this.getHiddenElementDimensions(e);const n=t.offsetHeight,s=t.getBoundingClientRect(),l=this.getViewport();let o,r;s.top+n+i.height>l.height?(o=-1*i.height,e.style.transformOrigin="bottom",s.top+o<0&&(o=-1*s.top)):(o=n,e.style.transformOrigin="top"),r=i.width>l.width?-1*s.left:s.left+i.width>l.width?-1*(s.left+i.width-l.width):0,e.style.top=o+"px",e.style.left=r+"px"}static getParents(e,t=[]){return null===e.parentNode?t:this.getParents(e.parentNode,t.concat([e.parentNode]))}static getScrollableParents(e){let t=[];if(e){let i=this.getParents(e);const n=/(auto|scroll)/,s=e=>{let t=window.getComputedStyle(e,null);return n.test(t.getPropertyValue("overflow"))||n.test(t.getPropertyValue("overflowX"))||n.test(t.getPropertyValue("overflowY"))};for(let e of i){let i=1===e.nodeType&&e.dataset.scrollselectors;if(i){let n=i.split(",");for(let i of n){let n=this.findSingle(e,i);n&&s(n)&&t.push(n)}}9!==e.nodeType&&s(e)&&t.push(e)}}return t}static getHiddenElementOuterHeight(e){e.style.visibility="hidden",e.style.display="block";let t=e.offsetHeight;return e.style.display="none",e.style.visibility="visible",t}static getHiddenElementOuterWidth(e){e.style.visibility="hidden",e.style.display="block";let t=e.offsetWidth;return e.style.display="none",e.style.visibility="visible",t}static getHiddenElementDimensions(e){var t={};return e.style.visibility="hidden",e.style.display="block",t.width=e.offsetWidth,t.height=e.offsetHeight,e.style.display="none",e.style.visibility="visible",t}static fadeIn(e,t){e.style.opacity=0;var i=+new Date,n=0,s=function(){n=+e.style.opacity+((new Date).getTime()-i)/t,e.style.opacity=n,i=+new Date,+n<1&&(window.requestAnimationFrame&&requestAnimationFrame(s)||setTimeout(s,16))};s()}static fadeOut(e,t){var i=1,n=50/t;let s=setInterval((()=>{(i-=n)<=0&&(i=0,clearInterval(s)),e.style.opacity=i}),50)}static getUserAgent(){return navigator.userAgent}static appendChild(e,t){if(this.isElement(t))t.appendChild(e);else{if(!t.el||!t.elElement)throw new Error("Cannot append "+t+" to "+e);t.elElement.appendChild(e)}}static scrollInView(e,t){let i=getComputedStyle(e).getPropertyValue("borderTopWidth"),n=i?parseFloat(i):0,s=getComputedStyle(e).getPropertyValue("paddingTop"),l=s?parseFloat(s):0,o=e.getBoundingClientRect(),r=t.getBoundingClientRect().top+document.body.scrollTop-(o.top+document.body.scrollTop)-n-l,a=e.scrollTop,d=e.clientHeight,c=this.getOuterHeight(t);r<0?e.scrollTop=a+r:r+c>d&&(e.scrollTop=a+r-d+c)}static clearSelection(){if(window.getSelection)window.getSelection().empty?window.getSelection().empty():window.getSelection().removeAllRanges&&window.getSelection().rangeCount>0&&window.getSelection().getRangeAt(0).getClientRects().length>0&&window.getSelection().removeAllRanges();else if(document.selection&&document.selection.empty)try{document.selection.empty()}catch(e){}}static calculateScrollbarWidth(){if(null!=this.calculatedScrollbarWidth)return this.calculatedScrollbarWidth;let e=document.createElement("div");e.className="p-scrollbar-measure",document.body.appendChild(e);let t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),this.calculatedScrollbarWidth=t,t}static getBrowser(){if(!this.browser){let e=this.resolveUserAgent();this.browser={},e.browser&&(this.browser[e.browser]=!0,this.browser.version=e.version),this.browser.chrome?this.browser.webkit=!0:this.browser.webkit&&(this.browser.safari=!0)}return this.browser}static resolveUserAgent(){let e=navigator.userAgent.toLowerCase(),t=/(chrome)[ ]([\w.]+)/.exec(e)||/(webkit)[ ]([\w.]+)/.exec(e)||/(opera)(?:.*version|)[ ]([\w.]+)/.exec(e)||/(msie) ([\w.]+)/.exec(e)||e.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(e)||[];return{browser:t[1]||"",version:t[2]||"0"}}static isVisible(e){return null!=e.offsetParent}static invokeElementMethod(e,t,i){e[t].apply(e,i)}static getFocusableElements(e){let t=o.find(e,'button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),\n [href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),\n input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),\n textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),\n [contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])'),i=[];for(let e of t)"none"!=getComputedStyle(e).display&&"hidden"!=getComputedStyle(e).visibility&&i.push(e);return i}static isClickable(e){const t=e.nodeName,i=e.parentElement&&e.parentElement.nodeName;return"INPUT"==t||"BUTTON"==t||"A"==t||"INPUT"==i||"BUTTON"==i||"A"==i||this.hasClass(e,"p-button")||this.hasClass(e.parentElement,"p-button")||this.hasClass(e.parentElement,"p-checkbox")||this.hasClass(e.parentElement,"p-radiobutton")}static applyStyle(e,t){if("string"==typeof t)e.style.cssText=this.style;else for(let i in this.style)e.style[i]=t[i]}static isIOS(){return/iPad|iPhone|iPod/.test(navigator.userAgent)&&!window.MSStream}static isAndroid(){return/(android)/i.test(navigator.userAgent)}}var r={name:"SpeedDial",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},buttonClassName:null,maskStyle:null,maskClassName:null,showIcon:{type:String,default:"pi pi-plus"},hideIcon:null,rotateAnimation:{type:Boolean,default:!0},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=o.findSingle(this.container,".p-speeddial-button"),t=o.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.bindDocumentClickListener()},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]},buttonClass(){return["p-speeddial-button p-button-rounded",{"p-speeddial-rotate":this.rotateAnimation&&!this.hideIcon},this.buttonClassName]},iconClassName(){return this.d_visible&&this.hideIcon?this.hideIcon:this.showIcon},maskClass(){return["p-speeddial-mask",{"p-speeddial-mask-visible":this.d_visible},this.maskClassName]}},components:{SDButton:s.default},directives:{ripple:l.default}};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"),r.render=function(e,t,n,s,l,o){const r=i.resolveComponent("SDButton"),a=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(i.Fragment,null,[i.createVNode("div",{ref:o.containerRef,class:o.containerClass,style:n.style},[i.renderSlot(e.$slots,"button",{toggle:o.onClick},(()=>[i.createVNode(r,{type:"button",class:o.buttonClass,icon:o.iconClassName,onClick:t[1]||(t[1]=e=>o.onClick(e)),disabled:n.disabled},null,8,["class","icon","disabled"])])),i.createVNode("ul",{ref:o.listRef,class:"p-speeddial-list",role:"menu"},[(i.openBlock(!0),i.createBlock(i.Fragment,null,i.renderList(n.model,((t,n)=>(i.openBlock(),i.createBlock("li",{key:n,class:"p-speeddial-item",style:o.getItemStyle(n),role:"none"},[e.$slots.item?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.$slots.item),{key:1,item:t},null,8,["item"])):i.withDirectives((i.openBlock(),i.createBlock("a",{key:0,href:t.url||"#",role:"menuitem",class:["p-speeddial-action",{"p-disabled":t.disabled}],target:t.target,"data-pr-tooltip":t.label,onClick:e=>o.onItemClick(e,t)},[t.icon?(i.openBlock(),i.createBlock("span",{key:0,class:["p-speeddial-action-icon",t.icon]},null,2)):i.createCommentVNode("",!0)],10,["href","target","data-pr-tooltip","onClick"])),[[a]])],4)))),128))],512)],6),n.mask?(i.openBlock(),i.createBlock("div",{key:0,class:o.maskClass,style:this.maskStyle},null,6)):i.createCommentVNode("",!0)],64)},r}(primevue.button,primevue.ripple,Vue);