vue-devui/slider/index.umd.js

DevUI components based on Vite and Vue3

(function(o,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("clipboard")):typeof define=="function"&&define.amd?define(["exports","vue","clipboard"],t):(o=typeof globalThis!="undefined"?globalThis:o||self,t(o.index={},o.Vue))})(this,function(o,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 d=e;return r&&(d+=`__${r}`),u&&(d+=`--${u}`),d}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,d=0,s=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,s=n.clientX,d=l.value,v.value=d}function S(n){m.value=!0;const c=n.clientX-s;v.value=d+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){s=n.target.getBoundingClientRect().left;const c=n.clientX;g(c-s),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:d,popoverShow:s,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:d,class:[u.e("runway"),m.value],onMousedown:l,onMouseout:()=>s.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:()=>s.value=!0,onMouseout:()=>s.value=!1},null),e.tipsRenderer===null?null:s.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)}};o.Slider=b,o.default=B,o.sliderProps=M,Object.defineProperty(o,"__esModule",{value:!0}),o[Symbol.toStringTag]="Module"});