vue-devui/slider/index.umd.js

DevUI components based on Vite and Vue3

(function(s,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],t):(s=typeof globalThis!="undefined"?globalThis:s||self,t(s.index={},s.Vue))})(this,function(s,t){"use strict";const M={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},step:{type:Number,default:1},tipsRenderer:{type:[Function,null],default:()=>e=>`${e}`}},E=e=>Object.prototype.toString.call(e)==="[object Function]";function w(e,r,u){let o=e;return r&&(o+=`__${r}`),u&&(o+=`--${u}`),o}function D(e,r=!1){const u=r?`.devui-${e}`:`devui-${e}`;return{b:()=>w(u),e:l=>l?w(u,l):"",m:l=>l?w(u,"",l):"",em:(l,i)=>l&&i?w(u,l,i):""}}function X(e,r){let u=!0,o=0,d=0;const f=t.ref(),a=t.ref(Number(e.modelValue)),l=t.ref(0),i=t.ref(""),m=t.ref(!1),v=t.ref(0);function V(){var n;return Boolean(f.value)&&((n=f.value)==null?void 0:n.clientWidth)||0}function N(){const n=V();l.value=n*(a.value-e.min)/(e.max-e.min)}function g(n){const h=V(),c=Math.round(h);n<0&&(n=0);const R=c/((e.max-e.min)/e.step),y=Math.round(n/R)*R;if(Math.round(y)>=c){l.value=c,a.value=e.max,i.value="100%",r.emit("update:modelValue",e.max);return}i.value=Math.round(y*100/c)+"%",a.value=Math.round(y*(e.max-e.min)/c)+e.min,l.value=n,r.emit("update:modelValue",a.value)}function C(n){u=!1,d=n.clientX,o=l.value,v.value=o}function S(n){m.value=!0;const c=n.clientX-d;v.value=o+c,g(v.value)}function x(){m.value=!1,setTimeout(()=>{u=!0},100),window.removeEventListener("mousemove",S),window.removeEventListener("mouseup",x)}function P(n){m.value=!0,e.disabled||(n.preventDefault(),C(n),window.addEventListener("mousemove",S),window.addEventListener("mouseup",x))}function _(n){if(!e.disabled&&u){d=n.target.getBoundingClientRect().left;const c=n.clientX;g(c-d),P(n)}}return t.watch([()=>e.modelValue,()=>e.max,()=>e.min],()=>{a.value=Number(e.modelValue),a.value>e.max?i.value="100%":a.value<e.min?i.value="0%":i.value=(a.value-e.min)*100/(e.max-e.min)+"%",N()},{immediate:!0}),t.onMounted(N),{sliderRunway:f,popoverShow:m,percentDisplay:i,currentValue:a,handleRunwayMousedown:_,handleButtonMousedown:P}}var L="",b=t.defineComponent({name:"DSlider",props:M,emits:["update:modelValue"],setup(e,r){const u=D("slider"),{sliderRunway:o,popoverShow:d,percentDisplay:f,currentValue:a,handleRunwayMousedown:l,handleButtonMousedown:i}=X(e,r),m=t.computed(()=>e.disabled?" disabled":""),v=t.computed(()=>E(e.tipsRenderer)?e.tipsRenderer(a.value):"");return()=>t.createVNode("div",{class:u.b()},[t.createVNode("div",{ref:o,class:[u.e("runway"),m.value],onMousedown:l,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:[u.e("bar"),m.value],style:{width:f.value}},null),t.createVNode("div",{class:[u.e("button"),m.value],style:{left:f.value},onMousedown:i,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer===null?null:d.value?t.createVNode("div",{class:u.e("popover"),style:{left:f.value}},[t.createVNode("div",{class:u.e("popover-arrow")},null),t.createVNode("div",{class:u.e("popover-content")},[v.value])]):null])])}}),B={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(b.name,b)}};s.Slider=b,s.default=B,s.sliderProps=M,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});