vue-3-slider-component/dist/vue-3-slider-component.umd.js

A highly customized slider component for Vue 3

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode('.vue-slider-dot{position:absolute;transition:all 0s;z-index:5}.vue-slider-dot:focus{outline:none}.vue-slider-dot-tooltip{position:absolute;visibility:hidden}.vue-slider-dot-hover:hover .vue-slider-dot-tooltip,.vue-slider-dot-tooltip-show{visibility:visible}.vue-slider-dot-tooltip-top{top:-10px;left:50%;transform:translate(-50%,-100%)}.vue-slider-dot-tooltip-bottom{bottom:-10px;left:50%;transform:translate(-50%,100%)}.vue-slider-dot-tooltip-left{left:-10px;top:50%;transform:translate(-100%,-50%)}.vue-slider-dot-tooltip-right{right:-10px;top:50%;transform:translate(100%,-50%)}.vue-slider-marks{position:relative;width:100%;height:100%}.vue-slider-mark{position:absolute;z-index:1}.vue-slider-ltr .vue-slider-mark,.vue-slider-rtl .vue-slider-mark{width:0;height:100%;top:50%}.vue-slider-ltr .vue-slider-mark-step,.vue-slider-rtl .vue-slider-mark-step{top:0}.vue-slider-ltr .vue-slider-mark-label,.vue-slider-rtl .vue-slider-mark-label{top:100%;margin-top:10px}.vue-slider-ltr .vue-slider-mark{transform:translate(-50%,-50%)}.vue-slider-ltr .vue-slider-mark-step{left:0}.vue-slider-ltr .vue-slider-mark-label{left:50%;transform:translate(-50%)}.vue-slider-rtl .vue-slider-mark{transform:translate(50%,-50%)}.vue-slider-rtl .vue-slider-mark-step{right:0}.vue-slider-rtl .vue-slider-mark-label{right:50%;transform:translate(50%)}.vue-slider-ttb .vue-slider-mark,.vue-slider-btt .vue-slider-mark{width:100%;height:0;left:50%}.vue-slider-ttb .vue-slider-mark-step,.vue-slider-btt .vue-slider-mark-step{left:0}.vue-slider-ttb .vue-slider-mark-label,.vue-slider-btt .vue-slider-mark-label{left:100%;margin-left:10px}.vue-slider-btt .vue-slider-mark{transform:translate(-50%,50%)}.vue-slider-btt .vue-slider-mark-step{top:0}.vue-slider-btt .vue-slider-mark-label{top:50%;transform:translateY(-50%)}.vue-slider-ttb .vue-slider-mark{transform:translate(-50%,-50%)}.vue-slider-ttb .vue-slider-mark-step{bottom:0}.vue-slider-ttb .vue-slider-mark-label{bottom:50%;transform:translateY(50%)}.vue-slider-mark-step,.vue-slider-mark-label{position:absolute}.vue-slider-disabled{opacity:.5;cursor:not-allowed}.vue-slider-rail{background-color:#ccc;border-radius:15px}.vue-slider-process{background-color:#3498db;border-radius:15px}.vue-slider-mark{z-index:4}.vue-slider-mark:first-child .vue-slider-mark-step,.vue-slider-mark:last-child .vue-slider-mark-step{display:none}.vue-slider-mark-step{width:100%;height:100%;border-radius:50%;background-color:#00000029}.vue-slider-mark-label{font-size:14px;white-space:nowrap}.vue-slider-dot-handle{cursor:pointer;width:100%;height:100%;border-radius:50%;background-color:#fff;box-sizing:border-box;box-shadow:.5px .5px 2px 1px #00000052}.vue-slider-dot-handle-focus{box-shadow:0 0 1px 2px #3498db5c}.vue-slider-dot-handle-disabled{cursor:not-allowed;background-color:#ccc}.vue-slider-dot-tooltip-inner{font-size:14px;white-space:nowrap;padding:2px 5px;min-width:20px;text-align:center;color:#fff;border-radius:5px;border-color:#3498db;background-color:#3498db;box-sizing:content-box}.vue-slider-dot-tooltip-inner:after{content:"";position:absolute}.vue-slider-dot-tooltip-inner-top:after{top:100%;left:50%;transform:translate(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-top-color:inherit}.vue-slider-dot-tooltip-inner-bottom:after{bottom:100%;left:50%;transform:translate(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-bottom-color:inherit}.vue-slider-dot-tooltip-inner-left:after{left:100%;top:50%;transform:translateY(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-left-color:inherit}.vue-slider-dot-tooltip-inner-right:after{right:100%;top:50%;transform:translateY(-50%);height:0;width:0;border-color:transparent;border-style:solid;border-width:5px;border-right-color:inherit}.vue-slider-dot-tooltip-wrapper{opacity:0;transition:all .3s}.vue-slider-dot-tooltip-wrapper-show{opacity:1}.vue-slider{position:relative;box-sizing:content-box;-webkit-user-select:none;user-select:none;display:block;-webkit-tap-highlight-color:rgba(0,0,0,0)}.vue-slider-rail{position:relative;width:100%;height:100%;transition-property:width,height,left,right,top,bottom}.vue-slider-process{position:absolute;z-index:1}')),document.head.appendChild(e)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
(function(u,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(u=typeof globalThis<"u"?globalThis:u||self,i(u.index={},u.Vue))})(this,function(u,i){"use strict";var q=Object.defineProperty;var K=(u,i,m)=>i in u?q(u,i,{enumerable:!0,configurable:!0,writable:!0,value:m}):u[i]=m;var d=(u,i,m)=>(K(u,typeof i!="symbol"?i+"":i,m),m);const m=(s,t)=>{const e=s.__vccOpts||s;for(const[r,o]of t)e[r]=o;return e},R={emits:["drag-start"],props:{value:{type:[Number,String],default:0},tooltip:{type:String,required:!0},dotStyle:{type:Array,default:()=>({})},tooltipStyle:{type:Array,default:()=>({})},tooltipPlacement:{type:String,required:!0},tooltipFormatter:{type:[String,Array,Object,Function],default:void 0},focus:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},computed:{dotClasses(){return["vue-slider-dot",{"vue-slider-dot-hover":this.tooltip==="hover"||this.tooltip==="active","vue-slider-dot-disabled":this.disabled,"vue-slider-dot-focus":this.focus}]},handleClasses(){return["vue-slider-dot-handle",{"vue-slider-dot-handle-disabled":this.disabled,"vue-slider-dot-handle-focus":this.focus}]},tooltipClasses(){return["vue-slider-dot-tooltip",[`vue-slider-dot-tooltip-${this.tooltipPlacement}`],{"vue-slider-dot-tooltip-show":this.showTooltip}]},tooltipInnerClasses(){return["vue-slider-dot-tooltip-inner",[`vue-slider-dot-tooltip-inner-${this.tooltipPlacement}`],{"vue-slider-dot-tooltip-inner-disabled":this.disabled,"vue-slider-dot-tooltip-inner-focus":this.focus}]},showTooltip(){switch(this.tooltip){case"always":return!0;case"none":return!1;case"focus":case"active":return!!this.focus;default:return!1}},tooltipValue(){return this.tooltipFormatter?typeof this.tooltipFormatter=="string"?this.tooltipFormatter.replace(/\{value\}/,String(this.value)):this.tooltipFormatter(this.value):this.value}},methods:{dragStart(s){if(this.disabled)return!1;this.$emit("drag-start")}}},E=["aria-valuetext"],O={class:"vue-slider-dot-tooltip-text"};function C(s,t,e,r,o,a){return i.openBlock(),i.createElementBlock("div",{ref:"dot",class:i.normalizeClass(a.dotClasses),"aria-valuetext":a.tooltipValue,onMousedown:t[0]||(t[0]=(...l)=>a.dragStart&&a.dragStart(...l)),onTouchstartPassive:t[1]||(t[1]=(...l)=>a.dragStart&&a.dragStart(...l))},[i.renderSlot(s.$slots,"dot",{},()=>[i.createElementVNode("div",{class:i.normalizeClass(a.handleClasses),style:i.normalizeStyle(e.dotStyle)},null,6)]),e.tooltip!=="none"?(i.openBlock(),i.createElementBlock("div",{key:0,class:i.normalizeClass(a.tooltipClasses)},[i.renderSlot(s.$slots,"tooltip",{},()=>[i.createElementVNode("div",{class:i.normalizeClass(a.tooltipInnerClasses),style:i.normalizeStyle(e.tooltipStyle)},[i.createElementVNode("span",O,i.toDisplayString(a.tooltipValue),1)],6)])],2)):i.createCommentVNode("",!0)],42,E)}const D=m(R,[["render",C]]),w={props:{mark:{type:Object,required:!0},hideLabel:{type:Boolean,default:!1},stepStyle:{type:Object,default:void 0},stepActiveStyle:{type:Object,default:void 0},labelStyle:{type:Object,default:void 0},labelActiveStyle:{type:Object,default:void 0}},computed:{marksClasses(){return["vue-slider-mark",{"vue-slider-mark-active":this.mark.active}]},stepClasses(){return["vue-slider-mark-step",{"vue-slider-mark-step-active":this.mark.active}]},labelClasses(){return["vue-slider-mark-label",{"vue-slider-mark-label-active":this.mark.active}]}},methods:{labelClickHandle(s){s.stopPropagation(),this.$emit("pressLabel",this.mark.pos)}}};function L(s,t,e,r,o,a){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(a.marksClasses)},[i.renderSlot(s.$slots,"step",{},()=>[i.createElementVNode("div",{class:i.normalizeClass(a.stepClasses),style:i.normalizeStyle([e.stepStyle,e.mark.style,e.mark.active?e.stepActiveStyle:null,e.mark.active?e.mark.activeStyle:null])},null,6)]),e.hideLabel?i.createCommentVNode("",!0):i.renderSlot(s.$slots,"label",{key:0},()=>[i.createElementVNode("div",{class:i.normalizeClass(a.labelClasses),style:i.normalizeStyle([e.labelStyle,e.mark.labelStyle,e.mark.active?e.labelActiveStyle:null,e.mark.active?e.mark.labelActiveStyle:null]),onClick:t[0]||(t[0]=(...l)=>a.labelClickHandle&&a.labelClickHandle(...l))},i.toDisplayString(e.mark.label),7)])],2)}const x=m(w,[["render",L]]),p=s=>typeof s=="number"?`${s}px`:s,z=s=>{const t=document.documentElement,e=document.body,r=s.getBoundingClientRect();return{y:r.top+(window.pageYOffset||t.scrollTop)-(t.clientTop||e.clientTop||0),x:r.left+(window.pageXOffset||t.scrollLeft)-(t.clientLeft||e.clientLeft||0)}},I=(s,t,e)=>{const r="targetTouches"in s?s.targetTouches[0]:s,o=z(t),a={x:r.pageX-o.x,y:r.pageY-o.y};return{x:e?t.offsetWidth-a.x:a.x,y:e?t.offsetHeight-a.y:a.y}},M=(s,t)=>{if(t.hook){const e=t.hook(s);if(typeof e=="function")return e;if(!e)return null}switch(s.keyCode){case 38:return e=>t.direction==="ttb"?e-1:e+1;case 39:return e=>t.direction==="rtl"?e-1:e+1;case 40:return e=>t.direction==="ttb"?e+1:e-1;case 37:return e=>t.direction==="rtl"?e+1:e-1;case 35:return()=>t.max;case 36:return()=>t.min;case 33:return e=>e+10;case 34:return e=>e-10;default:return null}};class f{constructor(t){d(this,"num");this.num=t}decimal(t,e){const r=this.num,o=this.getDecimalLen(r),a=this.getDecimalLen(t);let l=0;switch(e){case"+":l=this.getExponent(o,a),this.num=(this.safeRoundUp(r,l)+this.safeRoundUp(t,l))/l;break;case"-":l=this.getExponent(o,a),this.num=(this.safeRoundUp(r,l)-this.safeRoundUp(t,l))/l;break;case"*":this.num=this.safeRoundUp(this.safeRoundUp(r,this.getExponent(o)),this.safeRoundUp(t,this.getExponent(a)))/this.getExponent(o+a);break;case"/":l=this.getExponent(o,a),this.num=this.safeRoundUp(r,l)/this.safeRoundUp(t,l);break;case"%":l=this.getExponent(o,a),this.num=this.safeRoundUp(r,l)%this.safeRoundUp(t,l)/l;break}return this}plus(t){return this.decimal(t,"+")}minus(t){return this.decimal(t,"-")}multiply(t){return this.decimal(t,"*")}divide(t){return this.decimal(t,"/")}remainder(t){return this.decimal(t,"%")}toNumber(){return this.num}getDecimalLen(t){const e=`${t}`.split("e");return(`${e[0]}`.split(".")[1]||"").length-(e[1]?+e[1]:0)}getExponent(t,e){return Math.pow(10,e!==void 0?Math.max(t,e):t)}safeRoundUp(t,e){return Math.round(t*e)}}var P=(s=>(s[s.VALUE=1]="VALUE",s[s.INTERVAL=2]="INTERVAL",s[s.MIN=3]="MIN",s[s.MAX=4]="MAX",s[s.ORDER=5]="ORDER",s))(P||{});const N={1:'The type of the "value" is illegal',2:'The prop "interval" is invalid, "(max - min)" must be divisible by "interval"',3:'The "value" must be greater than or equal to the "min".',4:'The "value" must be less than or equal to the "max".',5:'When "order" is false, the parameters "minRange", "maxRange", "fixed", "enabled" are invalid.'};class F{constructor(t){d(this,"dotsPos",[]);d(this,"dotsValue",[]);d(this,"data");d(this,"enableCross");d(this,"fixed");d(this,"max");d(this,"min");d(this,"interval");d(this,"minRange");d(this,"maxRange");d(this,"order");d(this,"marks");d(this,"included");d(this,"process");d(this,"adsorb");d(this,"dotOptions");d(this,"onError");d(this,"cacheRangeDir",{});this.data=t.data,this.max=t.max,this.min=t.min,this.interval=t.interval,this.order=t.order,this.marks=t.marks,this.included=t.included,this.process=t.process,this.adsorb=t.adsorb,this.dotOptions=t.dotOptions,this.onError=t.onError,this.order?(this.minRange=t.minRange||0,this.maxRange=t.maxRange||0,this.enableCross=t.enableCross,this.fixed=t.fixed):((t.minRange||t.maxRange||!t.enableCross||t.fixed)&&this.emitError(5),this.minRange=0,this.maxRange=0,this.enableCross=!0,this.fixed=!1),this.setValue(t.value)}setValue(t){this.setDotsValue(Array.isArray(t)?this.order?[...t].sort((e,r)=>this.getIndexByValue(e)-this.getIndexByValue(r)):[...t]:[t],!0)}setDotsValue(t,e){this.dotsValue=t,e&&this.syncDotsPos()}setDotsPos(t){const e=this.order?[...t].sort((r,o)=>r-o):t;this.dotsPos=e,this.setDotsValue(e.map(r=>this.getValueByPos(r)),this.adsorb)}getValueByPos(t){let e=this.parsePos(t);if(this.included){let r=100;this.markList.forEach(o=>{const a=Math.abs(o.pos-t);a<r&&(r=a,e=o.value)})}return e}syncDotsPos(){this.dotsPos=this.dotsValue.map(t=>this.parseValue(t))}get markList(){if(!this.marks)return[];const t=(e,r)=>{const o=this.parseValue(e);return{pos:o,value:e,label:e,active:this.isActiveByPos(o),...r}};return this.marks===!0?this.getValues().map(e=>t(e)):Object.prototype.toString.call(this.marks)==="[object Object]"?Object.keys(this.marks).sort((e,r)=>+e-+r).map(e=>{const r=this.marks[e];return t(e,typeof r!="string"?r:{label:r})}):Array.isArray(this.marks)?this.marks.map(e=>t(e)):typeof this.marks=="function"?this.getValues().map(e=>({value:e,result:this.marks(e)})).filter(({result:e})=>!!e).map(({value:e,result:r})=>t(e,r)):[]}getRecentDot(t){const e=this.dotsPos.filter((r,o)=>!(this.getDotOption(o)&&this.getDotOption(o).disabled)).map(r=>Math.abs(r-t));return e.indexOf(Math.min(...e))}getIndexByValue(t){return this.data?this.data.indexOf(t):new f(+t).minus(this.min).divide(this.interval).toNumber()}getValueByIndex(t){return t<0?t=0:t>this.total&&(t=this.total),this.data?this.data[t]:new f(t).multiply(this.interval).plus(this.min).toNumber()}setDotPos(t,e){t=this.getValidPos(t,e).pos;const r=t-this.dotsPos[e];if(!r)return;let o=new Array(this.dotsPos.length);this.fixed?o=this.getFixedChangePosArr(r,e):this.minRange||this.maxRange?o=this.getLimitRangeChangePosArr(t,r,e):o[e]=r,this.setDotsPos(this.dotsPos.map((a,l)=>a+(o[l]||0)))}getFixedChangePosArr(t,e){return this.dotsPos.forEach((r,o)=>{if(o!==e){const{pos:a,inRange:l}=this.getValidPos(r+t,o);l||(t=Math.min(Math.abs(a-r),Math.abs(t))*(t<0?-1:1))}}),this.dotsPos.map(r=>t)}getLimitRangeChangePosArr(t,e,r){const o=[{index:r,changePos:e}],a=e;return[this.minRange,this.maxRange].forEach((l,b)=>{if(!l)return!1;const n=b===0,c=e>0;let y=0;n?y=c?1:-1:y=c?-1:1;const _=(k,W)=>{const B=Math.abs(k-W);return n?B<this.minRangeDir:B>this.maxRangeDir};let g=r+y,S=this.dotsPos[g],A=t;for(;this.isPos(S)&&_(S,A);){const{pos:k}=this.getValidPos(S+a,g);o.push({index:g,changePos:k-S}),g=g+y,A=k,S=this.dotsPos[g]}}),this.dotsPos.map((l,b)=>{const n=o.filter(c=>c.index===b);return n.length?n[0].changePos:0})}isPos(t){return typeof t=="number"}getValidPos(t,e){const r=this.valuePosRange[e];let o=!0;return t<r[0]?(t=r[0],o=!1):t>r[1]&&(t=r[1],o=!1),{pos:t,inRange:o}}parseValue(t){if(this.data)t=this.data.indexOf(t);else if(typeof t=="number"||typeof t=="string"){if(t=+t,t<this.min)return this.emitError(3),0;if(t>this.max)return this.emitError(4),0;if(typeof t!="number"||t!==t)return this.emitError(1),0;t=new f(t).minus(this.min).divide(this.interval).toNumber()}const e=new f(t).multiply(this.gap).toNumber();return e<0?0:e>100?100:e}parsePos(t){const e=Math.round(t/this.gap);return this.getValueByIndex(e)}isActiveByPos(t){return this.processArray.some(([e,r])=>t>=e&&t<=r)}getValues(){if(this.data)return this.data;{const t=[];for(let e=0;e<=this.total;e++)t.push(new f(e).multiply(this.interval).plus(this.min).toNumber());return t}}getRangeDir(t){return t?new f(t).divide(new f(this.data?this.data.length-1:this.max).minus(this.data?0:this.min).toNumber()).multiply(100).toNumber():100}emitError(t){this.onError&&this.onError(t,N[t])}get processArray(){if(this.process){if(typeof this.process=="function")return this.process(this.dotsPos);if(this.dotsPos.length===1)return[[0,this.dotsPos[0]]];if(this.dotsPos.length>1)return[[Math.min(...this.dotsPos),Math.max(...this.dotsPos)]]}return[]}get total(){let t=0;return this.data?t=this.data.length-1:t=new f(this.max).minus(this.min).divide(this.interval).toNumber(),t-Math.floor(t)!==0?(this.emitError(2),0):t}get gap(){return 100/this.total}get minRangeDir(){return this.cacheRangeDir[this.minRange]?this.cacheRangeDir[this.minRange]:this.cacheRangeDir[this.minRange]=this.getRangeDir(this.minRange)}get maxRangeDir(){return this.cacheRangeDir[this.maxRange]?this.cacheRangeDir[this.maxRange]:this.cacheRangeDir[this.maxRange]=this.getRangeDir(this.maxRange)}getDotOption(t){return Array.isArray(this.dotOptions)?this.dotOptions[t]:this.dotOptions}getDotRange(t,e,r){if(!this.dotOptions)return r;const o=this.getDotOption(t);return o&&o[e]!==void 0?this.parseValue(o[e]):r}get valuePosRange(){const t=this.dotsPos,e=[];return t.forEach((r,o)=>{e.push([Math.max(this.minRange?this.minRangeDir*o:0,this.enableCross?0:t[o-1]||0,this.getDotRange(o,"min",0)),Math.min(this.minRange?100-this.minRangeDir*(t.length-1-o):100,this.enableCross?100:t[o+1]||100,this.getDotRange(o,"max",100))])}),e}get dotsIndex(){return this.dotsValue.map(t=>this.getIndexByValue(t))}}class j{constructor(t){d(this,"map");d(this,"states",0);this.map=t}add(t){this.states|=t}delete(t){this.states&=~t}toggle(t){this.has(t)?this.delete(t):this.add(t)}has(t){return!!(this.states&t)}}const V=4,h={None:0,Drag:2,Focus:4},H={emits:["update:modelValue","change","drag-start","drag-end","dragging","error"],components:{VueSliderDot:D,VueSliderMark:x},props:{modelValue:{type:[Number,String,Array],default:0},silent:{type:Boolean,default:!1},direction:{type:String,default:"ltr",validator:s=>["ltr","rtl","ttb","btt"].indexOf(s)>-1},width:{type:[Number,String],default:void 0},height:{type:[Number,String],default:void 0},dotSize:{type:[Array,Number],default:14},contained:{type:Boolean,default:!1},min:{type:Number,default:0},max:{type:Number,default:100},interval:{type:Number,default:1},disabled:{type:Boolean,default:!1},clickable:{type:Boolean,default:!0},dragOnClick:{type:Boolean,default:!0},duration:{type:Number,default:.5},data:{type:[Object,Array],default:void 0},dataValue:{type:String,default:"value"},dataLabel:{type:String,default:"label"},lazy:{type:Boolean,default:!1},tooltip:{type:String,default:"active",validator:s=>["none","always","focus","hover","active"].indexOf(s)>-1},tooltipPlacement:{type:[String,Array],default:void 0,validator:s=>(Array.isArray(s)?s:[s]).every(t=>["top","right","bottom","left"].indexOf(t)>-1)},tooltipFormatter:{type:[String,Array,Function],default:""},useKeyboard:{type:Boolean,default:!0},keydownHook:{type:[Boolean,Function],default:void 0},enableCross:{type:Boolean,default:!0},fixed:{type:Boolean,default:!1},order:{type:Boolean,default:!0},minRange:{type:Number,default:void 0},maxRange:{type:Number,default:void 0},marks:{type:[Boolean,Object,Array,Function],default:!1},process:{type:[Boolean,Function],default:!0},zoom:{type:[Number],default:void 0},included:{type:[Boolean],default:!1},adsorb:{type:[Boolean],default:!1},hideLabel:{type:[Boolean],default:!1},dotOptions:{type:Object,default:void 0},dotAttrs:{type:Object,default:void 0},railStyle:{type:Object,default:null},processStyle:{type:Object,default:null},dotStyle:{type:Object,default:null},tooltipStyle:{type:Object,default:null},stepStyle:{type:Object,default:null},stepActiveStyle:{type:Object,default:null},labelStyle:{type:Object,default:null},labelActiveStyle:{type:Object,default:null}},data(){return{control:null,states:new j(h),scale:1,focusDotIndex:0}},computed:{tailSize(){return p((this.isHorizontal?this.height:this.width)||V)},containerClasses(){return["vue-slider",[`vue-slider-${this.direction}`],{"vue-slider-disabled":this.disabled}]},containerStyles(){const[s,t]=Array.isArray(this.dotSize)?this.dotSize:[this.dotSize,this.dotSize],e=this.width?p(this.width):this.isHorizontal?"auto":p(V),r=this.height?p(this.height):this.isHorizontal?p(V):"auto";return{padding:this.contained?`${t/2}px ${s/2}px`:this.isHorizontal?`${t/2}px 0`:`0 ${s/2}px`,width:e,height:r}},processArray(){return this.control.processArray.map(([s,t,e],r)=>{s>t&&([s,t]=[t,s]);const o=this.isHorizontal?"width":"height";return{start:s,end:t,index:r,style:{[this.isHorizontal?"height":"width"]:"100%",[this.isHorizontal?"top":"left"]:0,[this.mainDirection]:`${s}%`,[o]:`${t-s}%`,transitionProperty:`${o},${this.mainDirection}`,transitionDuration:`${this.animateTime}s`,...this.processStyle,...e}}})},dotBaseStyle(){const[s,t]=Array.isArray(this.dotSize)?this.dotSize:[this.dotSize,this.dotSize];let e;return this.isHorizontal?e={transform:`translate(${this.isReverse?"50%":"-50%"}, -50%)`,"-WebkitTransform":`translate(${this.isReverse?"50%":"-50%"}, -50%)`,top:"50%",[this.direction==="ltr"?"left":"right"]:"0"}:e={transform:`translate(-50%, ${this.isReverse?"50%":"-50%"})`,"-WebkitTransform":`translate(-50%, ${this.isReverse?"50%":"-50%"})`,left:"50%",[this.direction==="btt"?"bottom":"top"]:"0"},{width:`${s}px`,height:`${t}px`,...e}},mainDirection(){switch(this.direction){case"ltr":return"left";case"rtl":return"right";case"btt":return"bottom";case"ttb":return"top"}},isHorizontal(){return this.direction==="ltr"||this.direction==="rtl"},isReverse(){return this.direction==="rtl"||this.direction==="btt"},tooltipDirections(){const s=this.tooltipPlacement||(this.isHorizontal?"top":"left");return Array.isArray(s)?s:this.dots.map(()=>s)},dots(){return this.control.dotsPos.map((s,t)=>({pos:s,index:t,value:this.control.dotsValue[t],focus:this.states.has(h.Focus)&&this.focusDotIndex===t,disabled:this.disabled,style:this.dotStyle,...(Array.isArray(this.dotOptions)?this.dotOptions[t]:this.dotOptions)||{}}))},animateTime(){return this.states.has(h.Drag)?0:this.duration},canSort(){return this.order&&!this.minRange&&!this.maxRange&&!this.fixed&&this.enableCross},sliderData(){return this.isObjectArrayData(this.data)?this.data.map(s=>s[this.dataValue]):this.isObjectData(this.data)?Object.keys(this.data):this.data},sliderMarks(){if(this.marks)return this.marks;if(this.isObjectArrayData(this.data))return s=>{const t={label:s};return this.data.some(e=>e[this.dataValue]===s?(t.label=e[this.dataLabel],!0):!1),t};if(this.isObjectData(this.data))return this.data},sliderTooltipFormatter(){if(this.tooltipFormatter)return this.tooltipFormatter;if(this.isObjectArrayData(this.data))return s=>{let t=""+s;return this.data.some(e=>e[this.dataValue]===s?(t=e[this.dataLabel],!0):!1),t};if(this.isObjectData(this.data)){const s=this.data;return t=>s[t]}},isNotSync(){const s=this.control.dotsValue;return Array.isArray(this.modelValue)?this.modelValue.length!==s.length||this.modelValue.some((t,e)=>t!==s[e]):this.modelValue!==s[0]},dragRange(){const s=this.dots[this.focusDotIndex-1],t=this.dots[this.focusDotIndex+1];return[s?s.pos:-1/0,t?t.pos:1/0]}},created(){this.initControl()},mounted(){this.bindEvent()},beforeUnmount(){this.unbindEvent()},methods:{isObjectData(s){return!!s&&Object.prototype.toString.call(s)==="[object Object]"},isObjectArrayData(s){return!!s&&Array.isArray(s)&&s.length>0&&typeof s[0]=="object"},bindEvent(){document.addEventListener("touchmove",this.dragMove,{passive:!1}),document.addEventListener("touchend",this.dragEnd,{passive:!1}),document.addEventListener("mousedown",this.blurHandle),document.addEventListener("mousemove",this.dragMove,{passive:!1}),document.addEventListener("mouseup",this.dragEnd),document.addEventListener("mouseleave",this.dragEnd),document.addEventListener("keydown",this.keydownHandle)},unbindEvent(){document.removeEventListener("touchmove",this.dragMove),document.removeEventListener("touchend",this.dragEnd),document.removeEventListener("mousedown",this.blurHandle),document.removeEventListener("mousemove",this.dragMove),document.removeEventListener("mouseup",this.dragEnd),document.removeEventListener("mouseleave",this.dragEnd),document.removeEventListener("keydown",this.keydownHandle)},setScale(){const s=new f(Math.floor(this.isHorizontal?this.$refs.rail.offsetWidth:this.$refs.rail.offsetHeight));this.zoom!==void 0&&s.multiply(this.zoom),s.divide(100),this.scale=s.toNumber()},initControl(){this.control=new F({value:this.modelValue,data:this.sliderData,enableCross:this.enableCross,fixed:this.fixed,max:this.max,min:this.min,interval:this.interval,minRange:this.minRange,maxRange:this.maxRange,order:this.order,marks:this.sliderMarks,included:this.included,process:this.process,adsorb:this.adsorb,dotOptions:this.dotOptions,onError:this.emitError}),this.syncValueByPos(),["data","enableCross","fixed","max","min","interval","minRange","maxRange","order","marks","process","adsorb","included","dotOptions"].forEach(s=>{this.$watch(s,t=>{if(s==="data"&&Array.isArray(this.control.data)&&Array.isArray(t)&&this.control.data.length===t.length&&t.every((e,r)=>e===this.control.data[r]))return!1;switch(s){case"data":case"dataLabel":case"dataValue":this.control.data=this.sliderData;break;case"mark":this.control.marks=this.sliderMarks;break;default:this.control[s]=t}["data","max","min","interval"].indexOf(s)>-1&&this.control.syncDotsPos()})})},syncValueByPos(){const s=this.control.dotsValue;if(this.isDiff(s,Array.isArray(this.modelValue)?this.modelValue:[this.modelValue])){const t=s.length===1?s[0]:[...s];this.$emit("change",t,this.focusDotIndex),this.$emit("update:modelValue",t,this.focusDotIndex)}},isDiff(s,t){return s.length!==t.length||s.some((e,r)=>e!==t[r])},emitError(s,t){this.silent||console.error(`[VueSlider error]: ${t}`),this.$emit("error",s,t)},dragStartOnProcess(s){if(this.dragOnClick){this.setScale();const t=this.getPosByEvent(s),e=this.control.getRecentDot(t);if(this.dots[e].disabled)return;this.dragStart(e),this.control.setDotPos(t,this.focusDotIndex),this.lazy||this.syncValueByPos()}},dragStart(s){this.focusDotIndex=s,this.setScale(),this.states.add(h.Drag),this.states.add(h.Focus),this.$emit("drag-start",this.focusDotIndex)},dragMove(s){if(!this.states.has(h.Drag))return!1;s.preventDefault();const t=this.getPosByEvent(s);this.isCrossDot(t),this.control.setDotPos(t,this.focusDotIndex),this.lazy||this.syncValueByPos();const e=this.control.dotsValue;this.$emit("dragging",e.length===1?e[0]:[...e],this.focusDotIndex)},isCrossDot(s){if(this.canSort){const t=this.focusDotIndex;let e=s;if(e>this.dragRange[1]?(e=this.dragRange[1],this.focusDotIndex++):e<this.dragRange[0]&&(e=this.dragRange[0],this.focusDotIndex--),t!==this.focusDotIndex){const r=this.$refs[`dot-${this.focusDotIndex}`];r&&r.$el&&r.$el.focus(),this.control.setDotPos(e,t)}}},dragEnd(s){if(!this.states.has(h.Drag))return!1;setTimeout(()=>{this.lazy&&this.syncValueByPos(),this.included&&this.isNotSync?this.control.setValue(this.modelValue):this.control.syncDotsPos(),this.states.delete(h.Drag),(!this.useKeyboard||"targetTouches"in s)&&this.states.delete(h.Focus),this.$emit("drag-end",this.focusDotIndex)})},blurHandle(s){if(!this.states.has(h.Focus)||!this.$refs.container||this.$refs.container.contains(s.target))return!1;this.states.delete(h.Focus)},clickHandle(s){if(!this.clickable||this.disabled)return!1;if(this.states.has(h.Drag))return;this.setScale();const t=this.getPosByEvent(s);this.setValueByPos(t)},focus(s=0){this.states.add(h.Focus),this.focusDotIndex=s},blur(){this.states.delete(h.Focus)},getValue(){const s=this.control.dotsValue;return s.length===1?s[0]:s},getIndex(){const s=this.control.dotsIndex;return s.length===1?s[0]:s},setValue(s){this.control.setValue(Array.isArray(s)?[...s]:[s]),this.syncValueByPos()},setIndex(s){const t=Array.isArray(s)?s.map(e=>this.control.getValueByIndex(e)):this.control.getValueByIndex(s);this.setValue(t)},setValueByPos(s){const t=this.control.getRecentDot(s);if(this.disabled||this.dots[t].disabled)return!1;this.focusDotIndex=t,this.control.setDotPos(s,t),this.syncValueByPos(),this.useKeyboard&&this.states.add(h.Focus),setTimeout(()=>{this.included&&this.isNotSync?this.control.setValue(this.modelValue):this.control.syncDotsPos()})},keydownHandle(s){if(!this.useKeyboard||!this.states.has(h.Focus))return!1;const t=this.included&&this.marks,e=M(s,{direction:this.direction,max:t?this.control.markList.length-1:this.control.total,min:0,hook:this.keydownHook});if(e){s.preventDefault();let r=-1,o=0;t?(this.control.markList.some((a,l)=>a.value===this.control.dotsValue[this.focusDotIndex]?(r=e(l),!0):!1),r<0?r=0:r>this.control.markList.length-1&&(r=this.control.markList.length-1),o=this.control.markList[r].pos):(r=e(this.control.getIndexByValue(this.control.dotsValue[this.focusDotIndex])),o=this.control.parseValue(this.control.getValueByIndex(r))),this.isCrossDot(o),this.control.setDotPos(o,this.focusDotIndex),this.syncValueByPos()}},getPosByEvent(s){return I(s,this.$refs.rail,this.isReverse)[this.isHorizontal?"x":"y"]/this.scale}},watch:{modelValue:{handler(){this.control&&!this.states.has(h.Drag)&&this.isNotSync&&(this.control.setValue(this.modelValue),this.syncValueByPos())},deep:!0}}},T={key:0,class:"vue-slider-marks"};function U(s,t,e,r,o,a){const l=i.resolveComponent("VueSliderMark"),b=i.resolveComponent("VueSliderDot");return i.openBlock(),i.createElementBlock("div",i.mergeProps({ref:"container",class:a.containerClasses,style:a.containerStyles,onClick:t[1]||(t[1]=(...n)=>a.clickHandle&&a.clickHandle(...n)),onTouchstartPassive:t[2]||(t[2]=(...n)=>a.dragStartOnProcess&&a.dragStartOnProcess(...n)),onMousedown:t[3]||(t[3]=(...n)=>a.dragStartOnProcess&&a.dragStartOnProcess(...n))},s.$attrs),[i.createElementVNode("div",{ref:"rail",class:"vue-slider-rail",style:i.normalizeStyle(e.railStyle)},[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(a.processArray,(n,c)=>i.renderSlot(s.$slots,"process",i.mergeProps({ref_for:!0},{...n}),()=>[(i.openBlock(),i.createElementBlock("div",{class:"vue-slider-process",key:`process-${c}`,style:i.normalizeStyle(n.style)},null,4))])),256)),a.sliderMarks?(i.openBlock(),i.createElementBlock("div",T,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(o.control.markList,(n,c)=>i.renderSlot(s.$slots,"mark",i.mergeProps({ref_for:!0},{...n}),()=>[(i.openBlock(),i.createBlock(l,{key:`mark-${c}`,mark:n,hideLabel:e.hideLabel,style:i.normalizeStyle({[a.isHorizontal?"height":"width"]:"100%",[a.isHorizontal?"width":"height"]:a.tailSize,[a.mainDirection]:`${n.pos}%`}),stepStyle:e.stepStyle,stepActiveStyle:e.stepActiveStyle,labelStyle:e.labelStyle,labelActiveStyle:e.labelActiveStyle,onPressLabel:y=>e.clickable&&a.setValueByPos(y)},{step:i.withCtx(()=>[i.renderSlot(s.$slots,"step",i.mergeProps({ref_for:!0},{...n}))]),label:i.withCtx(()=>[i.renderSlot(s.$slots,"label",i.mergeProps({ref_for:!0},{...n}))]),_:2},1032,["mark","hideLabel","style","stepStyle","stepActiveStyle","labelStyle","labelActiveStyle","onPressLabel"]))])),256))])):i.createCommentVNode("",!0),(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(a.dots,(n,c)=>(i.openBlock(),i.createElementBlock(i.Fragment,null,[i.createVNode(b,i.mergeProps({ref_for:!0,ref:`dot-${c}`,value:n.value,disabled:n.disabled,focus:n.focus,"dot-style":[n.style,n.disabled?n.disabledStyle:null,n.focus?n.focusStyle:null],tooltip:n.tooltip||e.tooltip,"tooltip-style":[e.tooltipStyle,n.tooltipStyle,n.disabled?n.tooltipDisabledStyle:null,n.focus?n.tooltipFocusStyle:null],"tooltip-formatter":Array.isArray(a.sliderTooltipFormatter)?a.sliderTooltipFormatter[c]:a.sliderTooltipFormatter,"tooltip-placement":a.tooltipDirections[c],style:[a.dotBaseStyle,{[a.mainDirection]:`${n.pos}%`,transition:`${a.mainDirection} ${a.animateTime}s`}],"onDrag-start":()=>a.dragStart(c),role:"slider","aria-valuenow":n.value,"aria-valuemin":this.min,"aria-valuemax":this.max,"aria-orientation":this.isHorizontal?"horizontal":"vertical",tabindex:"0",onFocus:()=>!n.disabled&&a.focus(c),onBlur:t[0]||(t[0]=()=>a.blur())},{...e.dotAttrs}),{dot:i.withCtx(()=>[i.renderSlot(s.$slots,"dot",i.mergeProps({ref_for:!0},{...n}))]),tooltip:i.withCtx(()=>[i.renderSlot(s.$slots,"tooltip",i.mergeProps({ref_for:!0},{...n}))]),_:2},1040,["value","disabled","focus","dot-style","tooltip","tooltip-style","tooltip-formatter","tooltip-placement","style","onDrag-start","aria-valuenow","aria-valuemin","aria-valuemax","aria-orientation","onFocus"]),i.renderSlot(s.$slots,"default",i.mergeProps({ref_for:!0},{value:a.getValue()}))],64))),256))],4)],16)}const v=m(H,[["render",U]]);v.VueSliderMark=x,v.VueSliderDot=D,u.ERROR_TYPE=P,u.VueSliderDot=D,u.VueSliderMark=x,u.default=v,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});