primevue 3.29.2 → 3.30.0

package/slider/slider.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.slider=function(e,t,i){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n={name:"Slider",extends:a(e).default,emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let e=this.$el.getBoundingClientRect();this.initX=e.left+t.DomHandler.getWindowScrollLeft(),this.initY=e.top+t.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));this.range?(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex?(a<this.min?a=this.min:a>=this.max&&(a=this.max),i[0]=a):(a>this.max?a=this.max:a<=this.min&&(a=this.min),i[1]=a)):(a<this.min?a=this.min:a>this.max&&(a=this.max),i=a),this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(e,i){this.disabled||(t.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,e.currentTarget.focus(),e.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(e){this.dragging&&(this.dragging=!1,t.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:e,value:this.modelValue}))},onBarClick(e){this.disabled||t.DomHandler.hasClass(e.target,"p-slider-handle")||(this.updateDomData(),this.setValue(e))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){if(this.range){const e=this.rangeEndPosition>this.rangeStartPosition?this.rangeEndPosition-this.rangeStartPosition:this.rangeStartPosition-this.rangeEndPosition,t=this.rangeEndPosition>this.rangeStartPosition?this.rangeStartPosition:this.rangeEndPosition;return this.horizontal?{left:t+"%",width:e+"%"}:{bottom:t+"%",height:e+"%"}}return this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],s=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],r=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: grab;\n    touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),n.render=function(e,t,a,n,o,d){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:d.containerClass,onClick:t[15]||(t[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},e.ptm("root")),[i.createElementVNode("span",i.mergeProps({class:"p-slider-range",style:d.rangeStyle},e.ptm("range")),null,16),a.range?i.createCommentVNode("",!0):(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:"p-slider-handle",style:d.handleStyle,onTouchstart:t[0]||(t[0]=e=>d.onDragStart(e)),onTouchmove:t[1]||(t[1]=e=>d.onDrag(e)),onTouchend:t[2]||(t[2]=e=>d.onDragEnd(e)),onMousedown:t[3]||(t[3]=e=>d.onMouseDown(e)),onKeydown:t[4]||(t[4]=e=>d.onKeyDown(e)),tabindex:a.tabindex,role:"slider","aria-valuemin":a.min,"aria-valuenow":a.modelValue,"aria-valuemax":a.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":a.orientation},e.ptm("handle")),null,16,l)),a.range?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:1,class:"p-slider-handle",style:d.rangeStartHandleStyle,onTouchstart:t[5]||(t[5]=e=>d.onDragStart(e,0)),onTouchmove:t[6]||(t[6]=e=>d.onDrag(e)),onTouchend:t[7]||(t[7]=e=>d.onDragEnd(e)),onMousedown:t[8]||(t[8]=e=>d.onMouseDown(e,0)),onKeydown:t[9]||(t[9]=e=>d.onKeyDown(e,0)),tabindex:a.tabindex,role:"slider","aria-valuemin":a.min,"aria-valuenow":a.modelValue?a.modelValue[0]:null,"aria-valuemax":a.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":a.orientation},e.ptm("startHandler")),null,16,s)):i.createCommentVNode("",!0),a.range?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:2,class:"p-slider-handle",style:d.rangeEndHandleStyle,onTouchstart:t[10]||(t[10]=e=>d.onDragStart(e,1)),onTouchmove:t[11]||(t[11]=e=>d.onDrag(e)),onTouchend:t[12]||(t[12]=e=>d.onDragEnd(e)),onMousedown:t[13]||(t[13]=e=>d.onMouseDown(e,1)),onKeydown:t[14]||(t[14]=e=>d.onKeyDown(e,1)),tabindex:a.tabindex,role:"slider","aria-valuemin":a.min,"aria-valuenow":a.modelValue?a.modelValue[1]:null,"aria-valuemax":a.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":a.orientation},e.ptm("endHandler")),null,16,r)):i.createCommentVNode("",!0)],16)},n}(primevue.basecomponent,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.slider=function(e,t,n,i){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(t),o=n.useStyle("\n.p-slider {\n    position: relative;\n}\n\n.p-slider .p-slider-handle {\n    cursor: grab;\n    touch-action: none;\n    display: block;\n}\n\n.p-slider-range {\n    display: block;\n}\n\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n\n.p-slider-vertical {\n    height: 100px;\n}\n\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n",{name:"slider",manual:!0});function l(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function s(e,t){if(e){if("string"==typeof e)return h(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?h(e,t):void 0}}function d(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function u(e){if(Array.isArray(e))return h(e)}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,i=new Array(t);n<t;n++)i[n]=e[n];return i}var m={name:"Slider",extends:{name:"BaseSlider",extends:r.default,props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},css:{classes:{root:function(e){var t=e.props;return["p-slider p-component",{"p-disabled":t.disabled,"p-slider-horizontal":"horizontal"===t.orientation,"p-slider-vertical":"vertical"===t.orientation}]},range:"p-slider-range",handle:"p-slider-handle"},inlineStyles:{handle:{position:"absolute"},range:{position:"absolute"}},loadStyle:o.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","change","slideend"],dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount:function(){this.unbindDragListeners()},methods:{updateDomData:function(){var t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue:function(e){var t=("horizontal"===this.orientation?100*((e.touches?e.touches[0].pageX:e.pageX)-this.initX)/this.barWidth:100*(this.initY+this.barHeight-(e.touches?e.touches[0].pageY:e.pageY))/this.barHeight)/100*(this.max-this.min)+this.min;if(this.step){var n=this.range?this.modelValue[this.handleIndex]:this.modelValue,i=t-n;i<0?t=n+Math.ceil(t/this.step-n/this.step)*this.step:i>0&&(t=n+Math.floor(t/this.step-n/this.step)*this.step)}else t=Math.floor(t);this.updateModel(e,t)},updateModel:function(e,t){var n,i,a=parseFloat(t.toFixed(10));this.range?(n=this.modelValue?u(i=this.modelValue)||d(i)||s(i)||l():[],0==this.handleIndex?(a<this.min?a=this.min:a>=this.max&&(a=this.max),n[0]=a):(a>this.max?a=this.max:a<=this.min&&(a=this.min),n[1]=a)):(a<this.min?a=this.min:a>this.max&&(a=this.max),n=a),this.$emit("update:modelValue",n),this.$emit("change",n)},onDragStart:function(e,t){this.disabled||(this.$el.setAttribute("data-p-sliding",!0),this.dragging=!0,this.updateDomData(),this.handleIndex=this.range&&this.modelValue[0]===this.max?0:t,e.currentTarget.focus(),e.preventDefault())},onDrag:function(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd:function(e){this.dragging&&(this.dragging=!1,this.$el.setAttribute("data-p-sliding",!1),this.$emit("slideend",{originalEvent:e,value:this.modelValue}))},onBarClick:function(t){this.disabled||"handle"!==e.DomHandler.getAttribute(t.target,"data-pc-section")&&(this.updateDomData(),this.setValue(t))},onMouseDown:function(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown:function(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue:function(e,t){this.updateModel(e,this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&(arguments.length>2&&void 0!==arguments[2]&&arguments[2])?this.modelValue-10:this.modelValue-1),e.preventDefault()},incrementValue:function(e,t){this.updateModel(e,this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&(arguments.length>2&&void 0!==arguments[2]&&arguments[2])?this.modelValue+10:this.modelValue+1),e.preventDefault()},bindDragListeners:function(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners:function(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{horizontal:function(){return"horizontal"===this.orientation},vertical:function(){return"vertical"===this.orientation},rangeStyle:function(){if(this.range){var e=this.rangeEndPosition>this.rangeStartPosition?this.rangeEndPosition-this.rangeStartPosition:this.rangeStartPosition-this.rangeEndPosition,t=this.rangeEndPosition>this.rangeStartPosition?this.rangeStartPosition:this.rangeEndPosition;return this.horizontal?{left:t+"%",width:e+"%"}:{bottom:t+"%",height:e+"%"}}return this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle:function(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition:function(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition:function(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition:function(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle:function(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle:function(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}},c=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],p=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],g=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];return m.render=function(e,t,n,a,r,o){return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root"),onClick:t[15]||(t[15]=function(){return o.onBarClick&&o.onBarClick.apply(o,arguments)})},e.ptm("root"),{"data-p-sliding":!1,"data-pc-name":"slider"}),[i.createElementVNode("span",i.mergeProps({class:e.cx("range"),style:[e.sx("range"),o.rangeStyle]},e.ptm("range")),null,16),e.range?i.createCommentVNode("",!0):(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,class:e.cx("handle"),style:[e.sx("handle"),o.handleStyle],onTouchstart:t[0]||(t[0]=function(e){return o.onDragStart(e)}),onTouchmove:t[1]||(t[1]=function(e){return o.onDrag(e)}),onTouchend:t[2]||(t[2]=function(e){return o.onDragEnd(e)}),onMousedown:t[3]||(t[3]=function(e){return o.onMouseDown(e)}),onKeydown:t[4]||(t[4]=function(e){return o.onKeyDown(e)}),tabindex:e.tabindex,role:"slider","aria-valuemin":e.min,"aria-valuenow":e.modelValue,"aria-valuemax":e.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":e.orientation},e.ptm("handle")),null,16,c)),e.range?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:1,class:e.cx("handle"),style:[e.sx("handle"),o.rangeStartHandleStyle],onTouchstart:t[5]||(t[5]=function(e){return o.onDragStart(e,0)}),onTouchmove:t[6]||(t[6]=function(e){return o.onDrag(e)}),onTouchend:t[7]||(t[7]=function(e){return o.onDragEnd(e)}),onMousedown:t[8]||(t[8]=function(e){return o.onMouseDown(e,0)}),onKeydown:t[9]||(t[9]=function(e){return o.onKeyDown(e,0)}),tabindex:e.tabindex,role:"slider","aria-valuemin":e.min,"aria-valuenow":e.modelValue?e.modelValue[0]:null,"aria-valuemax":e.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":e.orientation},e.ptm("startHandler")),null,16,p)):i.createCommentVNode("",!0),e.range?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:2,class:e.cx("handle"),style:[e.sx("handle"),o.rangeEndHandleStyle],onTouchstart:t[10]||(t[10]=function(e){return o.onDragStart(e,1)}),onTouchmove:t[11]||(t[11]=function(e){return o.onDrag(e)}),onTouchend:t[12]||(t[12]=function(e){return o.onDragEnd(e)}),onMousedown:t[13]||(t[13]=function(e){return o.onMouseDown(e,1)}),onKeydown:t[14]||(t[14]=function(e){return o.onKeyDown(e,1)}),tabindex:e.tabindex,role:"slider","aria-valuemin":e.min,"aria-valuenow":e.modelValue?e.modelValue[1]:null,"aria-valuemax":e.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":e.orientation},e.ptm("endHandler")),null,16,g)):i.createCommentVNode("",!0)],16)},m}(primevue.utils,primevue.basecomponent,primevue.usestyle,Vue);

package/speeddial/BaseSpeedDial.vue

@@ -0,0 +1,234 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-speeddial {
+    position: absolute;
+    display: flex;
+}
+
+.p-speeddial-button {
+    z-index: 1;
+}
+
+.p-speeddial-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: top 0s linear 0.2s;
+    pointer-events: none;
+    z-index: 2;
+}
+
+.p-speeddial-item {
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
+    will-change: transform;
+}
+
+.p-speeddial-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+}
+
+.p-speeddial-circle .p-speeddial-item,
+.p-speeddial-semi-circle .p-speeddial-item,
+.p-speeddial-quarter-circle .p-speeddial-item {
+    position: absolute;
+}
+
+.p-speeddial-rotate {
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    will-change: transform;
+}
+
+.p-speeddial-mask {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-mask-visible {
+    pointer-events: none;
+    opacity: 1;
+    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+.p-speeddial-opened .p-speeddial-list {
+    pointer-events: auto;
+}
+
+.p-speeddial-opened .p-speeddial-item {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.p-speeddial-opened .p-speeddial-rotate {
+    transform: rotate(45deg);
+}
+
+/* Direction */
+.p-speeddial-direction-up {
+    align-items: center;
+    flex-direction: column-reverse;
+}
+
+.p-speeddial-direction-up .p-speeddial-list {
+    flex-direction: column-reverse;
+}
+
+.p-speeddial-direction-down {
+    align-items: center;
+    flex-direction: column;
+}
+
+.p-speeddial-direction-down .p-speeddial-list {
+    flex-direction: column;
+}
+
+.p-speeddial-direction-left {
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+.p-speeddial-direction-left .p-speeddial-list {
+    flex-direction: row-reverse;
+}
+
+.p-speeddial-direction-right {
+    justify-content: center;
+    flex-direction: row;
+}
+
+.p-speeddial-direction-right .p-speeddial-list {
+    flex-direction: row;
+}
+`;
+
+const classes = {
+    root: ({ instance, props }) => [
+        `p-speeddial p-component p-speeddial-${props.type}`,
+        {
+            [`p-speeddial-direction-${props.direction}`]: props.type !== 'circle',
+            'p-speeddial-opened': instance.d_visible,
+            'p-disabled': props.disabled
+        }
+    ],
+    button: ({ props }) => [
+        'p-speeddial-button p-button-rounded',
+        {
+            'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
+        }
+    ],
+    menu: 'p-speeddial-list',
+    menuitem: ({ instance, id }) => [
+        'p-speeddial-item',
+        {
+            'p-focus': instance.isItemActive(id)
+        }
+    ],
+    action: ({ item }) => [
+        'p-speeddial-action',
+        {
+            'p-disabled': item.disabled
+        }
+    ],
+    actionIcon: 'p-speeddial-action-icon',
+    mask: ({ instance }) => [
+        'p-speeddial-mask',
+        {
+            'p-speeddial-mask-visible': instance.d_visible
+        }
+    ]
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
+
+export default {
+    name: 'BaseSpeedDial',
+    extends: BaseComponent,
+    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: undefined
+        },
+        hideIcon: {
+            type: String,
+            default: undefined
+        },
+        rotateAnimation: {
+            type: Boolean,
+            default: true
+        },
+        tooltipOptions: null,
+        style: null,
+        class: null,
+        'aria-labelledby': {
+            type: String,
+            default: null
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

package/speeddial/SpeedDial.d.ts

@@ -8,6 +8,7 @@
  *
  */
 import { VNode } from 'vue';
+import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
@@ -18,6 +19,7 @@ export declare type SpeedDialPassThroughOptionType = SpeedDialPassThroughAttribu
  * Custom passthrough(pt) option method.
  */
 export interface SpeedDialPassThroughMethodOptions {
+    instance: any;
     props: SpeedDialProps;
     state: SpeedDialState;
     context: SpeedDialContext;
@@ -57,6 +59,11 @@ export interface SpeedDialPassThroughOptions {
      * Uses to pass attributes to the mask's DOM element.
      */
     mask?: SpeedDialPassThroughOptionType;
+    /**
+     * Uses to manage all lifecycle hooks
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
 }
 
 /**
@@ -228,6 +235,11 @@ export interface SpeedDialProps {
      * @type {SpeedDialPassThroughOptions}
      */
     pt?: SpeedDialPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

package/speeddial/SpeedDial.vue

@@ -1,9 +1,9 @@
 <template>
-    <div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')">
+    <div :ref="containerRef" :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="speeddial">
         <slot name="button" :toggle="onClick">
             <SDButton
                 type="button"
-                :class="buttonClassName"
+                :class="[cx('button'), buttonClass]"
                 @click="onClick($event)"
                 :disabled="disabled"
                 @keydown="onTogglerKeydown"
@@ -13,27 +13,19 @@
                 :aria-label="ariaLabel"
                 :aria-labelledby="ariaLabelledby"
                 :pt="ptm('button')"
+                :unstyled="unstyled"
             >
                 <template #icon>
                     <slot name="icon" :visible="d_visible">
-                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="hideIcon" v-bind="ptm('button')['icon']" />
-                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="showIcon" v-bind="ptm('button')['icon']" />
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="cx('buttonIcon')" v-bind="ptm('button')['icon']" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="d_visible && !!hideIcon ? hideIcon : showIcon" v-bind="ptm('button')['icon']" />
                     </slot>
                 </template>
             </SDButton>
         </slot>
-        <ul :ref="listRef" :id="id + '_list'" class="p-speeddial-list" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
+        <ul :ref="listRef" :id="id + '_list'" :class="cx('menu')" role="menu" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :aria-activedescendant="focused ? focusedOptionId : undefined" tabindex="-1" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="index">
-                <li
-                    v-if="isItemVisible(item)"
-                    :id="`${id}_${index}`"
-                    :aria-controls="`${id}_item`"
-                    class="p-speeddial-item"
-                    :class="itemClass(`${id}_${index}`)"
-                    :style="getItemStyle(index)"
-                    role="menuitem"
-                    v-bind="getPTOptions(`${id}_${index}`, 'menuitem')"
-                >
+                <li v-if="isItemVisible(item)" :id="`${id}_${index}`" :aria-controls="`${id}_item`" :class="cx('menuitem', { id: `${id}_${index}` })" :style="getItemStyle(index)" role="menuitem" v-bind="getPTOptions(`${id}_${index}`, 'menuitem')">
                     <template v-if="!$slots.item">
                         <a
                             v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
@@ -41,13 +33,13 @@
                             :tabindex="-1"
                             :href="item.url || '#'"
                             role="menuitem"
-                            :class="['p-speeddial-action', { 'p-disabled': item.disabled }]"
+                            :class="cx('action', { item })"
                             :target="item.target"
                             @click="onItemClick($event, item)"
                             :aria-label="item.label"
                             v-bind="getPTOptions(`${id}_${index}`, 'action')"
                         >
-                            <span v-if="item.icon" :class="['p-speeddial-action-icon', item.icon]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
+                            <span v-if="item.icon" :class="[cx('actionIcon'), item.icon]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
                         </a>
                     </template>
                     <component v-else :is="$slots.item" :item="item" :onClick="(event) => onItemClick(event, item)"></component>
@@ -56,83 +48,22 @@
         </ul>
     </div>
     <template v-if="mask">
-        <div :class="maskClassName" :style="maskStyle" v-bind="ptm('mask')"></div>
+        <div :class="[cx('mask'), maskClass]" :style="maskStyle" v-bind="ptm('mask')"></div>
     </template>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import PlusIcon from 'primevue/icons/plus';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseSpeedDial from './BaseSpeedDial.vue';
 
 export default {
     name: 'SpeedDial',
-    extends: BaseComponent,
+    extends: BaseSpeedDial,
     emits: ['click', 'show', 'hide', 'focus', 'blur'],
-    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: undefined
-        },
-        hideIcon: {
-            type: String,
-            default: undefined
-        },
-        rotateAnimation: {
-            type: Boolean,
-            default: true
-        },
-        tooltipOptions: null,
-        style: null,
-        class: null,
-        'aria-labelledby': {
-            type: String,
-            default: null
-        },
-        'aria-label': {
-            type: String,
-            default: null
-        }
-    },
     documentClickListener: null,
     container: null,
     list: null,
@@ -157,8 +88,8 @@ export default {
         this.id = this.id || UniqueComponentId();
 
         if (this.type !== 'linear') {
-            const button = DomHandler.findSingle(this.container, '.p-speeddial-button');
-            const firstItem = DomHandler.findSingle(this.list, '.p-speeddial-item');
+            const button = DomHandler.findSingle(this.container, '[data-pc-section="button"]');
+            const firstItem = DomHandler.findSingle(this.list, '[data-pc-section="menuitem"]');
 
             if (button && firstItem) {
                 const wDiff = Math.abs(button.offsetWidth - firstItem.offsetWidth);
@@ -306,7 +237,7 @@ export default {
             event.preventDefault();
         },
         onEnterKey(event) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const itemIndex = [...items].findIndex((item) => item.id === this.focusedOptionIndex);
 
             this.onItemClick(event, this.model[itemIndex]);
@@ -394,7 +325,7 @@ export default {
             event.preventDefault();
         },
         changeFocusedOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
 
             if (filteredItems[index]) {
@@ -402,7 +333,7 @@ export default {
             }
         },
         findPrevOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[filteredItems.length - 1].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -412,7 +343,7 @@ export default {
             return matchedOptionIndex;
         },
         findNextOptionIndex(index) {
-            const items = DomHandler.find(this.container, '.p-speeddial-item');
+            const items = DomHandler.find(this.container, '[data-pc-section="menuitem"]');
             const filteredItems = [...items].filter((item) => !DomHandler.hasClass(DomHandler.findSingle(item, 'a'), 'p-disabled'));
             const newIndex = index === -1 ? filteredItems[0].id : index;
             let matchedOptionIndex = filteredItems.findIndex((link) => link.getAttribute('id') === newIndex);
@@ -512,44 +443,11 @@ export default {
         },
         listRef(el) {
             this.list = el;
-        },
-        itemClass(id) {
-            return [
-                {
-                    'p-focus': this.isItemActive(id)
-                }
-            ];
         }
     },
     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
-            ];
-        },
-        maskClassName() {
-            return [
-                'p-speeddial-mask',
-                {
-                    'p-speeddial-mask-visible': this.d_visible
-                },
-                this.maskClass
-            ];
+            return [this.cx('root'), this.class];
         },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
@@ -565,119 +463,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-speeddial {
-    position: absolute;
-    display: flex;
-}
-
-.p-speeddial-button {
-    z-index: 1;
-}
-
-.p-speeddial-list {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: top 0s linear 0.2s;
-    pointer-events: none;
-    z-index: 2;
-}
-
-.p-speeddial-item {
-    transform: scale(0);
-    opacity: 0;
-    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 0.8s;
-    will-change: transform;
-}
-
-.p-speeddial-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    position: relative;
-    overflow: hidden;
-}
-
-.p-speeddial-circle .p-speeddial-item,
-.p-speeddial-semi-circle .p-speeddial-item,
-.p-speeddial-quarter-circle .p-speeddial-item {
-    position: absolute;
-}
-
-.p-speeddial-rotate {
-    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    will-change: transform;
-}
-
-.p-speeddial-mask {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    transition: opacity 250ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.p-speeddial-mask-visible {
-    pointer-events: none;
-    opacity: 1;
-    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.p-speeddial-opened .p-speeddial-list {
-    pointer-events: auto;
-}
-
-.p-speeddial-opened .p-speeddial-item {
-    transform: scale(1);
-    opacity: 1;
-}
-
-.p-speeddial-opened .p-speeddial-rotate {
-    transform: rotate(45deg);
-}
-
-/* Direction */
-.p-speeddial-direction-up {
-    align-items: center;
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-up .p-speeddial-list {
-    flex-direction: column-reverse;
-}
-
-.p-speeddial-direction-down {
-    align-items: center;
-    flex-direction: column;
-}
-
-.p-speeddial-direction-down .p-speeddial-list {
-    flex-direction: column;
-}
-
-.p-speeddial-direction-left {
-    justify-content: center;
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-left .p-speeddial-list {
-    flex-direction: row-reverse;
-}
-
-.p-speeddial-direction-right {
-    justify-content: center;
-    flex-direction: row;
-}
-
-.p-speeddial-direction-right .p-speeddial-list {
-    flex-direction: row;
-}
-</style>