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