vue-amazing-ui/lib/slider/Slider.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("vue"),J=require("../utils/index.cjs"),pe={class:"slider-dots"},me={class:"slider-marks"},he=["onClick"],ge=l.defineComponent({__name:"Slider",props:{width:{default:"100%"},height:{default:"100%"},vertical:{type:Boolean,default:!1},min:{default:0},max:{default:100},marks:{default:()=>({})},disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},step:{default:1},tooltip:{type:Boolean,default:!0},tooltipOpen:{type:Boolean,default:!1},tooltipStyle:{default:()=>({})},formatTooltip:{type:Function,default:C=>C},value:{default:0}},emits:["update:value","change"],setup(C,{emit:U}){const o=C,y=l.ref(),j=l.ref(0),F=l.ref(0),r=l.ref(0),n=l.ref(0),g=l.ref(),k=l.ref(),d=l.ref(),f=l.ref(),{colorPalettes:S}=J.useInject("Slider"),K=U,u=l.computed(()=>o.vertical?F.value:j.value),W=l.computed(()=>o.vertical?{height:typeof o.height=="number"?`${o.height}px`:o.height}:{width:typeof o.width=="number"?`${o.width}px`:o.width}),G=l.computed(()=>o.vertical?{bottom:`${r.value}px`,top:"auto",height:`${n.value-r.value}px`}:{left:`${r.value}px`,right:"auto",width:`${n.value-r.value}px`}),Q=l.computed(()=>o.vertical?{bottom:`${r.value}px`,top:"auto",transform:"translate(-50%, 50%)"}:{left:`${r.value}px`,right:"auto",transform:"translate(-50%, -50%)"}),Z=l.computed(()=>o.vertical?{bottom:`${n.value}px`,top:"auto",transform:"translate(-50%, 50%)"}:{left:`${n.value}px`,right:"auto",transform:"translate(-50%, -50%)"}),N=l.computed(()=>Object.keys(o.marks).length>0),v=l.computed(()=>{let e=[];return N.value&&(e=Object.keys(o.marks).map(parseFloat).sort((t,a)=>t-a)),e}),M=l.computed(()=>{let e=[];return v.value.length>0&&v.value.forEach(t=>{e.push(ue(t))}),e}),p=l.computed(()=>o.step==="mark"?1:o.step),_=l.computed(()=>{var t;return((t=p.value.toString().split(".")[1])==null?void 0:t.length)??0}),I=l.computed(()=>{let e=0;return v.value.forEach(t=>{var i,s;const a=t.toString().split(".");(((i=a[1])==null?void 0:i.length)??0>e)&&(e=(s=a[1])==null?void 0:s.length)}),e}),b=l.computed(()=>{if(u.value===0)return o.value;let e;if(n.value===u.value?e=o.max:(e=Y(n.value),o.step==="mark"?e=w(e,v.value):o.step>1&&!v.value.includes(e)&&(e=Math.round(e/o.step)*o.step)),o.range){let t;return r.value===0?t=o.min:(t=Y(r.value),o.step==="mark"?t=w(t,v.value):o.step>1&&!v.value.includes(t)&&(t=Math.round(t/o.step)*o.step)),[t,e]}return e}),ee=l.computed(()=>o.range?o.formatTooltip(b.value[0]):null),te=l.computed(()=>o.range?o.formatTooltip(b.value[1]):o.formatTooltip(b.value));l.watch(()=>[o.min,o.max,o.step,o.vertical,o.value],()=>{A()},{deep:!0,flush:"post"}),l.watch(b,e=>{JSON.stringify(e)!==JSON.stringify(o.value)&&(K("update:value",e),K("change",e))}),J.useResizeObserver(y,()=>{le()});function le(){j.value=y.value.offsetWidth,F.value=y.value.offsetHeight,A()}function oe(e){const t=c((ne(e)-o.min)/p.value,"*");r.value=m(t,2)}function ae(e){const t=c((re(e)-o.min)/p.value,"*");n.value=m(t,2)}function ie(e){const t=c((se(e)-o.min)/p.value,"*");n.value=m(t,2)}function A(){o.range?(oe(o.value[0]),ae(o.value[1])):ie(o.value)}function ne(e){return e<o.min?o.min:e}function re(e){return e>o.max?o.max:e}function se(e){return e<o.min?o.min:e>o.max?o.max:e}function w(e,t){if(!N.value)return console.warn("Please set the marks property"),0;let a=t[0],i=Math.abs(e-a);const s=t.length;for(let O=1;O<s;O++){const q=Math.abs(e-t[O]);q<i&&(i=q,a=t[O])}return a}function Y(e){const t=c(e,"/")*p.value+o.min;return v.value.includes(m(t,I.value))?m(t,I.value):m(t,_.value)}function ue(e){const t=(e-o.min)/(o.max-o.min)*u.value;return m(t,2)}function m(e,t){return parseFloat(e.toFixed(t))}function x(e){e.classList.remove("show-handle-tooltip")}function h(e,t){e.focus(),o.tooltip&&!o.tooltipOpen&&t.classList.add("show-handle-tooltip")}function B(e){let t,a;if(o.vertical){t=y.value.getBoundingClientRect().bottom-e.clientY;const s=Math.round(c(t,"/"));a=m(c(s,"*"),2)}else{const i=y.value.getBoundingClientRect().left;t=e.clientX-i;const s=Math.round(c(t,"/"));a=m(c(s,"*"),2)}return{originalPosition:t,stepPosition:a}}function z(e,t){if(N.value){const a=w(e,M.value);return Math.abs(e-a)<Math.abs(e-t)?a:t}else return t}function de(e){let{originalPosition:t,stepPosition:a}=B(e),i;if(o.step==="mark"){const s=w(t,M.value);o.range&&Math.abs(s-r.value)<Math.abs(s-n.value)?(s!==r.value&&(r.value=s),h(g.value,k.value)):(s!==n.value&&(n.value=s),h(d.value,f.value))}else i=z(t,a),o.range&&Math.abs(i-r.value)<Math.abs(i-n.value)?(i!==r.value&&(r.value=i),h(g.value,k.value)):(i!==n.value&&(n.value=i),h(d.value,f.value))}function H(e){g.value&&(document.addEventListener("mousemove",T),document.addEventListener("mouseup",$),T(e))}function T(e){let{originalPosition:t,stepPosition:a}=B(e),i;if(o.tooltip&&!o.tooltipOpen&&k.value.classList.add("show-handle-tooltip"),o.step==="mark"){const s=w(t,M.value);s<=n.value?s!==r.value&&(r.value=s):(r.value=n.value,d.value.focus(),$(),D(e))}else i=z(t,a),i<0?r.value=0:0<=i&&i<=n.value?r.value=i:(r.value=n.value,d.value.focus(),$(),D(e))}function $(){o.tooltip&&!o.tooltipOpen&&k.value.classList.remove("show-handle-tooltip"),document.removeEventListener("mousemove",T),document.removeEventListener("mouseup",$)}function D(e){d.value&&(document.addEventListener("mousemove",R),document.addEventListener("mouseup",E),R(e))}function R(e){let{originalPosition:t,stepPosition:a}=B(e),i;if({originalPosition:t,stepPosition:a}=B(e),o.tooltip&&!o.tooltipOpen&&f.value.classList.add("show-handle-tooltip"),o.step==="mark"){const s=w(t,M.value);s>=r.value?s!==n.value&&(n.value=s):(n.value=r.value,o.range&&(g.value.focus(),E(),H(e)))}else i=z(t,a),i>u.value?n.value=u.value:r.value<=i&&i<=u.value?n.value=i:(n.value=r.value,o.range&&(g.value.focus(),E(),H(e)))}function E(){o.tooltip&&!o.tooltipOpen&&f.value.classList.remove("show-handle-tooltip"),document.removeEventListener("mousemove",R),document.removeEventListener("mouseup",E)}function fe(e){const t=`${Math.abs(e-o.min)/(o.max-o.min)*100}%`;return o.vertical?{bottom:t}:{left:t}}function X(e){return o.range?b.value[0]<=e&&e<=b.value[1]:e<=b.value}function P(e){const t=o.marks[e];let i=typeof t=="object"&&!l.isVNode(t)?t.label:t;return i?typeof i=="function"?i():i:null}function ve(e){const t=`${Math.abs(e-o.min)/(o.max-o.min)*100}%`;let a={};const i=o.marks[e];return typeof i=="object"&&!l.isVNode(i)&&"style"in i&&(a=i.style),o.vertical?{transform:"translateY(50%)",bottom:t,...a}:{transform:"translateX(-50%)",left:t,...a}}function ce(e){const t=M.value[e];o.range&&Math.abs(t-r.value)<Math.abs(t-n.value)?(t!==r.value&&(r.value=t),h(g.value,k.value)):(t!==n.value&&(n.value=t),h(d.value,f.value))}function V(e,t){const a=c(e,"-");t==="low"?a<0?r.value=0:r.value=a:a>=r.value?n.value=a:(n.value=r.value,r.value=a,g.value.focus())}function L(e,t){const a=c(e,"+");t==="high"?a>u.value?n.value=u.value:n.value=a:a<=n.value?r.value=a:(r.value=n.value,n.value=a,d.value.focus())}function c(e,t){return t==="+"?e+u.value*p.value/(o.max-o.min):t==="-"?e-u.value*p.value/(o.max-o.min):t==="*"?e*u.value*p.value/(o.max-o.min):t==="/"?e*(o.max-o.min)/(u.value*p.value):e}return(e,t)=>(l.openBlock(),l.createElementBlock("div",{ref_key:"sliderRef",ref:y,class:l.normalizeClass(["m-slider",{"slider-horizontal":!e.vertical,"slider-vertical":e.vertical,"slider-with-marks":Object.keys(e.marks).length>0,"slider-disabled":e.disabled}]),style:l.normalizeStyle([W.value,`
        --slider-rail-color: rgba(0, 0, 0, 0.04);
        --slider-rail-color-hover: rgba(0, 0, 0, 0.1);
        --slider-rail-color-disabled: rgba(0, 0, 0, 0.06);
        --slider-track-color: ${l.unref(S)[2]};
        --slider-track-color-hover: ${l.unref(S)[5]};
        --slider-track-color-disabled: rgba(0, 0, 0, 0.25);
        --slider-handle-color: #fff;
        --slider-handle-shadow-color: ${l.unref(S)[2]};
        --slider-handle-shadow-color-hover-focus: ${l.unref(S)[5]};
        --slider-handle-shadow-color-disabled: #bfbfbf;
        --slider-dot-color: #fff;
        --slider-dot-border-color: #f0f0f0;
        --slider-dot-border-color-hover: rgba(0, 0, 0, 0.1);
        --slider-dot-color-active: ${l.unref(S)[2]};
        --slider-mark-color: rgba(0, 0, 0, 0.45);
        --slider-mark-color-active: rgba(0, 0, 0, 0.88);
        --slider-tooltip-color: #fff;
        --slider-tooltip-bg-color: rgba(0, 0, 0, 0.85);
      `]),onClick:t[12]||(t[12]=a=>e.disabled?()=>!1:de(a))},[t[15]||(t[15]=l.createElementVNode("div",{class:"slider-rail"},null,-1)),l.createElementVNode("div",{class:"slider-track",style:l.normalizeStyle(G.value)},null,4),Object.keys(e.marks).length>0?(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[l.createElementVNode("div",pe,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(v.value,(a,i)=>(l.openBlock(),l.createElementBlock("span",{class:l.normalizeClass(["slider-dot",{"slider-dot-active":X(a)}]),style:l.normalizeStyle(fe(a)),key:i},null,6))),128))]),l.createElementVNode("div",me,[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(v.value,(a,i)=>(l.openBlock(),l.createElementBlock("span",{class:l.normalizeClass(["slider-mark",{"slider-mark-active":X(a)}]),style:l.normalizeStyle(ve(a)),key:i,onClick:l.withModifiers(s=>e.disabled?()=>!1:ce(i),["stop"])},[l.renderSlot(e.$slots,"mark",{label:P(a),value:a},()=>[typeof P(a)=="string"?(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[l.createTextVNode(l.toDisplayString(P(a)),1)],64)):(l.openBlock(),l.createBlock(l.resolveDynamicComponent(P(a)),{key:1}))],!0)],14,he))),128))])],64)):l.createCommentVNode("",!0),e.range?(l.openBlock(),l.createElementBlock("div",{key:1,tabindex:"0",ref_key:"lowHandleRef",ref:g,class:"slider-handle",style:l.normalizeStyle(Q.value),onKeydown:[t[0]||(t[0]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:V(r.value,"low"),["prevent"]),["left"])),t[1]||(t[1]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:L(r.value,"low"),["prevent"]),["right"])),t[2]||(t[2]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:V(r.value,"low"),["prevent"]),["down"])),t[3]||(t[3]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:L(r.value,"low"),["prevent"]),["up"]))],onMousedown:t[4]||(t[4]=a=>e.disabled?()=>!1:H(a)),onBlur:t[5]||(t[5]=a=>e.tooltip&&!e.disabled&&!e.tooltipOpen?x(k.value):()=>!1)},[e.tooltip?(l.openBlock(),l.createElementBlock("div",{key:0,ref_key:"lowTooltipRef",ref:k,class:l.normalizeClass(["handle-tooltip",{"show-handle-tooltip":e.tooltipOpen}]),style:l.normalizeStyle(e.tooltipStyle)},[l.createTextVNode(l.toDisplayString(ee.value)+" ",1),t[13]||(t[13]=l.createElementVNode("div",{class:"tooltip-arrow"},null,-1))],6)):l.createCommentVNode("",!0)],36)):l.createCommentVNode("",!0),l.createElementVNode("div",{tabindex:"0",ref_key:"highHandleRef",ref:d,class:"slider-handle",style:l.normalizeStyle(Z.value),onKeydown:[t[6]||(t[6]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:V(n.value,"high"),["prevent"]),["left"])),t[7]||(t[7]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:L(n.value,"high"),["prevent"]),["right"])),t[8]||(t[8]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:V(n.value,"high"),["prevent"]),["down"])),t[9]||(t[9]=l.withKeys(l.withModifiers(a=>e.disabled?()=>!1:L(n.value,"high"),["prevent"]),["up"]))],onMousedown:t[10]||(t[10]=a=>e.disabled?()=>!1:D(a)),onBlur:t[11]||(t[11]=a=>e.tooltip&&!e.disabled&&!e.tooltipOpen?x(f.value):()=>!1)},[e.tooltip?(l.openBlock(),l.createElementBlock("div",{key:0,ref_key:"highTooltipRef",ref:f,class:l.normalizeClass(["handle-tooltip",{"show-handle-tooltip":e.tooltipOpen}]),style:l.normalizeStyle(e.tooltipStyle)},[l.createTextVNode(l.toDisplayString(te.value)+" ",1),t[14]||(t[14]=l.createElementVNode("div",{class:"tooltip-arrow"},null,-1))],6)):l.createCommentVNode("",!0)],36)],6))}});exports.default=ge;