vexip-ui/lib/components/slider/slider.vue2.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const e=require("vue");require("../renderer/index.cjs");require("../form/index.cjs");require("./slider-trigger.vue.cjs");const C=require("@vexip-ui/config"),re=require("@vexip-ui/hooks"),D=require("@vexip-ui/utils"),Ce=require("./props.cjs"),Ee=require("../form/helper.cjs"),y=require("../renderer/renderer.cjs"),te=require("./slider-trigger.vue2.cjs"),$e=["id","aria-labelledby"];const xe=e.defineComponent({name:"Slider",__name:"slider",props:Ce.sliderProps,emits:["update:value"],setup(ae,{expose:le,emit:ne}){const{idFor:q,state:ie,labelId:ue,disabled:oe,loading:se,validateField:L,getFieldValue:de,setFieldValue:O}=Ee.useFieldStore(ee),fe=ae,r=C.useProps("slider",fe,{state:C.createStateProp(ie),value:{default:()=>de()??0,static:!0},min:0,max:100,step:{default:1,validator:t=>t>0},vertical:!1,hideTip:!1,tipTransfer:null,disabled:()=>oe.value,loading:()=>se.value,loadingLock:!1,reverse:!1,range:!1,markers:null,markerOnly:!1,tipHover:!1,flipMarker:!1,triggerFade:!1,tipProps:()=>({}),sync:!1,rangeDraggable:!1,slots:()=>({})}),I=ne,E=e.useSlots(),o=C.useNameHelper("slider"),H=C.useHoverDelay(),{timer:m}=re.useSetTimeout(),s=e.ref([0,0]),f=e.ref([!1,!1]),g=e.ref(1),z=e.ref(!1),$=e.ref(!1),k=e.ref(),V=e.ref(),N=e.ref(),c=e.computed(()=>{const t=r.markers,a=[];if(!t)return a;if(Array.isArray(t))for(const l of t){const{value:n,...u}=typeof l=="number"?{value:l}:l;Number.isNaN(n)||a.push({value:n,marker:u})}else for(const l of Object.keys(t)){const n=parseFloat(l),u=t[l];Number.isNaN(n)||a.push({value:n,marker:typeof u=="string"?{label:u}:u})}return a.sort((l,n)=>l.value-n.value)}),ve=e.computed(()=>!!c.value.find(({marker:t})=>t.label)),K=e.computed(()=>r.loading&&r.loadingLock),X=e.computed(()=>r.range&&r.rangeDraggable),ce=e.computed(()=>({[o.b()]:!0,[o.bs("vars")]:!0,[o.bm("inherit")]:r.inherit,[o.bm(r.state)]:r.state!=="default",[o.bm("vertical")]:r.vertical,[o.bm("sliding")]:f.value[1]||f.value[0],[o.bm("disabled")]:r.disabled,[o.bm("readonly")]:K.value,[o.bm("loading")]:r.loading,[o.bm("reverse")]:r.reverse,[o.bm("with-marker")]:ve.value,[o.bm("flip-marker")]:r.flipMarker,[o.bm("hide-trigger")]:r.triggerFade&&!$.value,[o.bm("range-draggable")]:X.value})),Y=e.computed(()=>D.decimalLength(r.step)),S=e.computed(()=>Math.ceil(Math.min(r.min,r.max)/r.step)),B=e.computed(()=>Math.floor(Math.max(r.min,r.max)/r.step)),i=e.computed(()=>[D.toFixed(s.value[0]*r.step,Y.value),D.toFixed(s.value[1]*r.step,Y.value)]),F=e.computed(()=>B.value-S.value||1),d=e.computed(()=>[w(s.value[0]),w(s.value[1])]),pe=e.computed(()=>{const{vertical:t,reverse:a}=r;return{[t?a?"bottom":"top":a?"right":"left"]:`${Math.min(d.value[0],d.value[1])}%`,[t?"height":"width"]:`${Math.abs(d.value[0]-d.value[1])}%`}}),me=e.computed(()=>{const{vertical:t,reverse:a}=r;return{[a?"bottom":"top"]:t?`${d.value[0]}%`:"50%",[a?"right":"left"]:t?"50%":`${d.value[0]}%`,zIndex:g.value===0?1:void 0,transform:`translate(${a?"":"-"}50%, ${a?"":"-"}50%)`}}),ge=e.computed(()=>{const{vertical:t,reverse:a}=r;return{[a?"bottom":"top"]:t?`${d.value[1]}%`:"50%",[a?"right":"left"]:t?"50%":`${d.value[1]}%`,zIndex:g.value===1?1:void 0,transform:`translate(${a?"":"-"}50%, ${a?"":"-"}50%)`}}),x=e.computed(()=>r.disabled||K.value),M=e.shallowReadonly(e.reactive({values:i,sliding:f,percent:d,disabled:e.toRef(r,"disabled"),loading:e.toRef(r,"loading")})),{target:be}=re.useMoving({disabled:e.computed(()=>!X.value||x.value),onStart:(t,a)=>{if(!k.value||a.button>0)return!1;clearTimeout(m.sliding),a.stopPropagation(),a.preventDefault(),v=k.value.getBoundingClientRect(),t.startValue=s.value[0],t.endValue=s.value[1],t.valueDiff=t.endValue-t.startValue},onMove:(t,a)=>{if(!v)return;a.preventDefault();const l=r.vertical,n=r.reverse,u=l?t.deltaY:t.deltaX;for(let h=0;h<2;++h){const Pe=h?1:0;s.value[Pe]=(n?-1:1)*(u/v[l?"height":"width"])*F.value+Number(t[h?"endValue":"startValue"])}b(),s.value[0]===S.value?s.value[1]=s.value[0]+t.valueDiff:s.value[1]===B.value&&(s.value[0]=s.value[1]-t.valueDiff),p("input")},onEnd:()=>p()});_(r.value),b();let T=r.range?i.value[0]>i.value[1]?[i.value[1],i.value[0]]:[i.value[0],i.value[1]]:i.value[1],R=Array.isArray(T)?[...T]:T;e.watch(()=>r.value,t=>{A(T,t)||(_(t),b())}),e.watch(()=>r.step,()=>{_(r.value),b()}),le({idFor:q,sliding:f,track:k,startTrigger:V,endTrigger:N,isValueInRange:P,focus:ee,blur:Te});function w(t){return(parseFloat(t)-S.value)/F.value*100}function _(t){if(r.range){const a=Array.isArray(t)?t:[t,100];s.value=[a[0]/r.step,a[1]/r.step]}else s.value=[S.value,(Array.isArray(t)?t[0]:t)/r.step]}function b(){s.value=s.value.map(t=>{let a=Math.max(S.value,Math.min(B.value,Math.round(t)));if(r.markerOnly&&c.value.length){let l=1/0,n=0;for(const{value:u}of c.value){const h=Math.abs(a*r.step-u);l>h&&(l=h,n=u)}a=n/r.step}return a})}function j(){z.value||f.value[0]||f.value[1]||($.value=!1)}function he(){clearTimeout(m.hover),m.hover=setTimeout(()=>{z.value=!0,$.value=!0},H.value)}function ye(){clearTimeout(m.hover),m.hover=setTimeout(()=>{z.value=!1,j()},H.value)}function p(t="change",a=r.sync){const[l,n]=i.value,u=r.range?l>n?[n,l]:[l,n]:n;if(t==="change"){if(A(T,u))return;T=u,a||(R=u,I("update:value",u),O(u)),C.emitEvent(r.onChange,u),a||L()}else{if(A(R,u))return;R=u,a&&(I("update:value",u),O(u)),C.emitEvent(r.onInput,u),a&&L()}}let v=null;function G(t){if(!v)return;const a=r.vertical,l=r.reverse,n=a?t.clientY:t.clientX;s.value[g.value]=(l?-1:1)*((n-v[a?l?"bottom":"top":l?"right":"left"])/v[a?"height":"width"])*F.value+S.value}function A(t,a){return Array.isArray(t)&&Array.isArray(a)?t[0]===a[0]&&t[1]===a[1]:t===a}const ke=D.throttle(t=>{!v||r.disabled||(t.preventDefault(),G(t),b(),V.value&&V.value.updateTooltip(),N.value&&N.value.updateTooltip(),p("input"))});function Ve(t){if(!(!k.value||x.value)){if(clearTimeout(m.sliding),t.stopPropagation(),t.preventDefault(),v=k.value.getBoundingClientRect(),r.range){const{vertical:a,reverse:l}=r,n=a?t.clientY:t.clientX,u=(l?v[a?"bottom":"right"]-n:n-v[a?"top":"left"])/v[a?"height":"width"]*100;g.value=Math.abs(u-d.value[0])<Math.abs(u-d.value[1])?0:1}else g.value=1;f.value[g.value]=!0,$.value=!0,G(t),b(),p("input"),document.addEventListener("pointermove",J),document.addEventListener("pointerup",Q)}}function J(t){ke(t)}function Q(){v=null,document.removeEventListener("pointermove",J),document.removeEventListener("pointerup",Q),p(),m.sliding=setTimeout(()=>{f.value[g.value]=!1,j()},250)}function Ne(t){t.cancelable&&(t.stopPropagation(),t.preventDefault())}function Se(t){const{vertical:a,reverse:l}=r;return t=w(t),{[l?"bottom":"top"]:a?`${t}%`:"50%",[l?"right":"left"]:a?"50%":`${t}%`,transform:`translate(${l?"":"-"}50%, ${l?"":"-"}50%)`}}function Me(t){const{vertical:a,reverse:l}=r;return t=w(t),{[l?"bottom":"top"]:a?`${t}%`:void 0,[l?"right":"left"]:a?void 0:`${t}%`,transform:`translate${a?"Y":"X"}(${l?"":"-"}50%)`}}function P(t){const a=parseFloat(t);if(Number.isNaN(a))return!1;if(r.range){const l=Math.min(i.value[0],i.value[1]),n=Math.max(i.value[0],i.value[1]);return a>=l&&a<=n}else return a<=i.value[1]}function U(t,a,l=!1){s.value[t]+=a,b(),l&&p()}function W(t,a){if(!x.value)if(r.markerOnly||a==="alt"){if(!c.value.length)return;const l=i.value[t];for(const{value:n}of c.value)if(n>l){s.value[t]=n;break}p()}else U(t,a==="shift"?5:a==="ctrl"?20:1,!0)}function Z(t,a){if(!x.value)if(r.markerOnly||a==="alt"){if(!c.value.length)return;const l=i.value[t];for(let n=c.value.length-1;n>=0;--n){const{value:u}=c.value[n];if(u<l){s.value[t]=u;break}}p()}else U(t,a==="shift"?-5:a==="ctrl"?-20:-1)}function ee(t){var a;(a=V.value||N.value)==null||a.focus(t)}function Te(){var t;(t=V.value||N.value)==null||t.blur()}return(t,a)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(q),class:e.normalizeClass(ce.value),tabindex:"-1",role:"group","aria-labelledby":e.unref(ue),onPointerdown:Ve,onPointerenter:he,onPointerleave:ye,onTouchstart:Ne},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("container"))},[e.createElementVNode("div",{ref_key:"track",ref:k,class:e.normalizeClass(e.unref(o).be("track"))},null,2),e.renderSlot(t.$slots,"filler",e.normalizeProps(e.guardReactiveProps(e.unref(M))),()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.filler,data:e.unref(M)},{default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"filler",ref:be,class:e.normalizeClass(e.unref(o).be("filler")),style:e.normalizeStyle(pe.value)},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("filler-inner"))},null,2)],6)]),_:1},8,["renderer","data"])]),c.value.length?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("points"))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,({value:l,marker:n})=>(e.openBlock(),e.createElementBlock("div",{key:l,class:e.normalizeClass([e.unref(o).be("point"),P(l)&&e.unref(o).bem("point","in-range")]),style:e.normalizeStyle(Se(l))},[e.renderSlot(t.$slots,"point",e.mergeProps({ref_for:!0},e.unref(M),{marker:n,markerValue:l,inRange:P(l)}),()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.point,data:{...e.unref(M),marker:n,markerValue:l,inRange:P(l)}},{default:e.withCtx(()=>[e.createElementVNode("span",{class:e.normalizeClass(e.unref(o).be("dot"))},null,2)]),_:2},1032,["renderer","data"])])],6))),128))],2),e.createElementVNode("div",{class:e.normalizeClass(e.unref(o).be("markers"))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(c.value,({value:l,marker:n})=>(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:l,ref_for:!0},n.attrs,{class:[e.unref(o).be("marker"),n.class],style:[Me(l),n.style]}),[e.renderSlot(t.$slots,"marker",e.mergeProps({ref_for:!0},e.unref(M),{marker:n,markerValue:l,inRange:P(l)}),()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.marker,data:{...e.unref(M),marker:n,markerValue:l,inRange:P(l)}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(n.label),1)]),_:2},1032,["renderer","data"])])],16))),128))],2)],64)):e.createCommentVNode("",!0),e.unref(r).range?(e.openBlock(),e.createBlock(te,{key:1,ref_key:"startTrigger",ref:V,value:i.value[0],"tip-transfer":e.unref(r).tipTransfer,"hide-tip":e.unref(r).hideTip,vertical:e.unref(r).vertical,min:e.unref(r).min,max:e.unref(r).max,disabled:e.unref(r).disabled,loading:e.unref(r).loading,reverse:e.unref(r).reverse,sliding:f.value[0],"tip-hover":e.unref(r).tipHover,style:e.normalizeStyle(me.value),"tip-props":e.unref(r).tipProps,onKeyPlus:a[0]||(a[0]=l=>W(0,l)),onKeyMinus:a[1]||(a[1]=l=>Z(0,l))},e.createSlots({default:e.withCtx(()=>[E.trigger||e.unref(r).slots.trigger?e.renderSlot(t.$slots,"trigger",{key:0,type:"start",value:i.value[0],sliding:f.value[0],percent:d.value[0],disabled:e.unref(r).disabled,loading:e.unref(r).loading},()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.trigger,data:{type:"start",value:i.value[0],sliding:f.value[0],percent:d.value[0],disabled:e.unref(r).disabled,loading:e.unref(r).loading}},null,8,["renderer","data"])]):e.createCommentVNode("",!0)]),_:2},[E.tip||e.unref(r).slots.tip?{name:"tip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"tip",{type:"start",value:i.value[0],sliding:f.value[0],percent:d.value[0],disabled:e.unref(r).disabled,loading:e.unref(r).loading},()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.tip,data:{type:"start",value:i.value[0],sliding:f.value[0],percent:d.value[0],disabled:e.unref(r).disabled,loading:e.unref(r).loading}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value[0]),1)]),_:1},8,["renderer","data"])])]),key:"0"}:void 0]),1032,["value","tip-transfer","hide-tip","vertical","min","max","disabled","loading","reverse","sliding","tip-hover","style","tip-props"])):e.createCommentVNode("",!0),e.createVNode(te,{ref_key:"endTrigger",ref:N,value:i.value[1],"tip-transfer":e.unref(r).tipTransfer,"hide-tip":e.unref(r).hideTip,vertical:e.unref(r).vertical,min:e.unref(r).min,max:e.unref(r).max,disabled:e.unref(r).disabled,loading:e.unref(r).loading,reverse:e.unref(r).reverse,sliding:f.value[1],"tip-hover":e.unref(r).tipHover,style:e.normalizeStyle(ge.value),"tip-props":e.unref(r).tipProps,onKeyPlus:a[2]||(a[2]=l=>W(1,l)),onKeyMinus:a[3]||(a[3]=l=>Z(1,l))},e.createSlots({default:e.withCtx(()=>[E.trigger||e.unref(r).slots.trigger?e.renderSlot(t.$slots,"trigger",{key:0,type:"end",value:i.value[1],sliding:f.value[1],percent:d.value[1],disabled:e.unref(r).disabled,loading:e.unref(r).loading},()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.trigger,data:{type:"end",value:i.value[1],sliding:f.value[1],percent:d.value[1],disabled:e.unref(r).disabled,loading:e.unref(r).loading}},null,8,["renderer","data"])]):e.createCommentVNode("",!0)]),_:2},[E.tip||e.unref(r).slots.tip?{name:"tip",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"tip",{type:"end",value:i.value[1],sliding:f.value[1],percent:d.value[1],disabled:e.unref(r).disabled,loading:e.unref(r).loading},()=>[e.createVNode(e.unref(y),{renderer:e.unref(r).slots.tip,data:{type:"end",value:i.value[1],sliding:f.value[1],percent:d.value[1],disabled:e.unref(r).disabled,loading:e.unref(r).loading}},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.value[1]),1)]),_:1},8,["renderer","data"])])]),key:"0"}:void 0]),1032,["value","tip-transfer","hide-tip","vertical","min","max","disabled","loading","reverse","sliding","tip-hover","style","tip-props"])],2)],42,$e))}});module.exports=xe;
//# sourceMappingURL=slider.vue2.cjs.map