vue-devui 1.0.0-rc.1 → 1.0.0-rc.2

package/ripple/index.es.js

@@ -19,9 +19,9 @@ const DEFAULT_PLUGIN_OPTIONS = {
   color: "currentColor",
   initialOpacity: 0.2,
   finalOpacity: 0.1,
-  duration: 0.8,
+  duration: 400,
   easing: "ease-out",
-  delayTime: 75,
+  delay: 75,
   disabled: false
 };
 const createContainer = ({
@@ -53,7 +53,7 @@ const createrippleElement = (x, y, size, options) => {
   rippleElement.style.borderRadius = "50%";
   rippleElement.style.opacity = `${options.initialOpacity}`;
   rippleElement.style.transform = `translate(-50%,-50%) scale(0)`;
-  rippleElement.style.transition = `transform ${options.duration}s ${options.easing}, opacity ${options.duration}s ${options.easing}`;
+  rippleElement.style.transition = `transform ${options.duration / 1e3}s ${options.easing}, opacity ${options.duration / 1e3}s ${options.easing}`;
   return rippleElement;
 };
 function magnitude(x1, y1, x2, y2) {
@@ -73,6 +73,13 @@ const getRelativePointer = ({ x, y }, { top, left }) => ({
   y: y - top
 });
 const RIPPLE_COUNT = "vRippleCountInternal";
+function setRippleCount(el, count) {
+  el.dataset[RIPPLE_COUNT] = count.toString();
+}
+function getRippleCount(el) {
+  var _a;
+  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
+}
 function incrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count + 1);
@@ -81,13 +88,6 @@ function decrementRippleCount(el) {
   const count = getRippleCount(el);
   setRippleCount(el, count - 1);
 }
-function setRippleCount(el, count) {
-  el.dataset[RIPPLE_COUNT] = count.toString();
-}
-function getRippleCount(el) {
-  var _a;
-  return parseInt((_a = el.dataset[RIPPLE_COUNT]) != null ? _a : "0", 10);
-}
 function deleteRippleCount(el) {
   delete el.dataset[RIPPLE_COUNT];
 }
@@ -99,29 +99,10 @@ const ripple = (event, el, options) => {
   const size = MULTIPLE_NUMBER * getDistanceToFurthestCorner(x, y, rect);
   const rippleContainer = createContainer(computedStyles);
   const rippleEl = createrippleElement(x, y, size, options);
-  incrementRippleCount(el);
   let originalPositionValue = "";
-  if (computedStyles.position === "static") {
-    if (el.style.position) {
-      originalPositionValue = el.style.position;
-    }
-    el.style.position = "relative";
-  }
-  rippleContainer.appendChild(rippleEl);
-  el.appendChild(rippleContainer);
   let shouldDissolveripple = false;
-  const releaseripple = (e) => {
-    if (typeof e !== "undefined") {
-      document.removeEventListener("pointerup", releaseripple);
-      document.removeEventListener("pointercancel", releaseripple);
-    }
-    if (shouldDissolveripple) {
-      dissolveripple();
-    } else {
-      shouldDissolveripple = true;
-    }
-  };
-  const dissolveripple = () => {
+  let token = null;
+  function dissolveripple() {
     rippleEl.style.transition = "opacity 150ms linear";
     rippleEl.style.opacity = "0";
     setTimeout(() => {
@@ -132,24 +113,44 @@ const ripple = (event, el, options) => {
         el.style.position = originalPositionValue;
       }
     }, 150);
-  };
+  }
+  function releaseripple(e) {
+    if (typeof e !== "undefined") {
+      document.removeEventListener("pointerup", releaseripple);
+      document.removeEventListener("pointercancel", releaseripple);
+    }
+    if (shouldDissolveripple) {
+      dissolveripple();
+    } else {
+      shouldDissolveripple = true;
+    }
+  }
+  function cancelripple() {
+    clearTimeout(token);
+    rippleContainer.remove();
+    document.removeEventListener("pointerup", releaseripple);
+    document.removeEventListener("pointercancel", releaseripple);
+    document.removeEventListener("pointercancel", cancelripple);
+  }
+  incrementRippleCount(el);
+  if (computedStyles.position === "static") {
+    if (el.style.position) {
+      originalPositionValue = el.style.position;
+    }
+    el.style.position = "relative";
+  }
+  rippleContainer.appendChild(rippleEl);
+  el.appendChild(rippleContainer);
   document.addEventListener("pointerup", releaseripple);
   document.addEventListener("pointercancel", releaseripple);
-  const token = setTimeout(() => {
+  token = setTimeout(() => {
     document.removeEventListener("pointercancel", cancelripple);
     requestAnimationFrame(() => {
       rippleEl.style.transform = `translate(-50%,-50%) scale(1)`;
       rippleEl.style.opacity = `${options.finalOpacity}`;
-      setTimeout(() => releaseripple(), options.duration * 1e3);
+      setTimeout(() => releaseripple(), options.duration);
     });
-  }, options.delayTime);
-  const cancelripple = () => {
-    clearTimeout(token);
-    rippleContainer.remove();
-    document.removeEventListener("pointerup", releaseripple);
-    document.removeEventListener("pointercancel", releaseripple);
-    document.removeEventListener("pointercancel", cancelripple);
-  };
+  }, options.delay);
   document.addEventListener("pointercancel", cancelripple);
 };
 const optionMap = /* @__PURE__ */ new WeakMap();

package/ripple/index.umd.js

@@ -1 +1 @@
-var B=Object.defineProperty;var T=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var $=(s,r,a)=>r in s?B(s,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[r]=a,y=(s,r)=>{for(var a in r||(r={}))F.call(r,a)&&$(s,a,r[a]);if(T)for(var a of T(r))j.call(r,a)&&$(s,a,r[a]);return s};(function(s,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(s=typeof globalThis!="undefined"?globalThis:s||self,r(s.index={}))})(this,function(s){"use strict";const r={directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:.8,easing:"ease-out",delayTime:75,disabled:!1},a=({borderTopLeftRadius:t,borderTopRightRadius:e,borderBottomLeftRadius:i,borderBottomRightRadius:o})=>{const n=document.createElement("div");return n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%",n.style.position="absolute",n.style.borderRadius=`${t} ${e} ${o} ${i}`,n.style.overflow="hidden",n.style.pointerEvents="none",n.style.webkitMaskImage="-webkit-radial-gradient(white, black)",n},w=(t,e,i,o)=>{const n=document.createElement("div");return n.style.position="absolute",n.style.width=`${i}px`,n.style.height=`${i}px`,n.style.top=`${e}px`,n.style.left=`${t}px`,n.style.background=o.color,n.style.borderRadius="50%",n.style.opacity=`${o.initialOpacity}`,n.style.transform="translate(-50%,-50%) scale(0)",n.style.transition=`transform ${o.duration}s ${o.easing}, opacity ${o.duration}s ${o.easing}`,n};function u(t,e,i,o){const n=t-i,l=e-o;return Math.sqrt(n*n+l*l)}function M(t,e,{width:i,height:o}){const n=u(t,e,0,0),l=u(t,e,i,0),d=u(t,e,0,o),g=u(t,e,i,o);return Math.max(n,l,d,g)}const O=({x:t,y:e},{top:i,left:o})=>({x:t-o,y:e-i}),f="vRippleCountInternal";function P(t){const e=v(t);R(t,e+1)}function k(t){const e=v(t);R(t,e-1)}function R(t,e){t.dataset[f]=e.toString()}function v(t){var e;return parseInt((e=t.dataset[f])!=null?e:"0",10)}function I(t){delete t.dataset[f]}const x=2.05,S=(t,e,i)=>{const o=e.getBoundingClientRect(),n=window.getComputedStyle(e),{x:l,y:d}=O(t,o),g=x*M(l,d,o),m=a(n),p=w(l,d,g,i);P(e);let h="";n.position==="static"&&(e.style.position&&(h=e.style.position),e.style.position="relative"),m.appendChild(p),e.appendChild(m);let b=!1;const c=A=>{typeof A!="undefined"&&(document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c)),b?U():b=!0},U=()=>{p.style.transition="opacity 150ms linear",p.style.opacity="0",setTimeout(()=>{m.remove(),k(e),v(e)===0&&(I(e),e.style.position=h)},150)};document.addEventListener("pointerup",c),document.addEventListener("pointercancel",c);const N=setTimeout(()=>{document.removeEventListener("pointercancel",C),requestAnimationFrame(()=>{p.style.transform="translate(-50%,-50%) scale(1)",p.style.opacity=`${i.finalOpacity}`,setTimeout(()=>c(),i.duration*1e3)})},i.delayTime),C=()=>{clearTimeout(N),m.remove(),document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c),document.removeEventListener("pointercancel",C)};document.addEventListener("pointercancel",C)},E=new WeakMap,_=y({},r);var L={mounted(t,e){var i;E.set(t,(i=e.value)!=null?i:{}),t.addEventListener("pointerdown",o=>{const n=E.get(t);e.value&&e.value.disabled||n!==!1&&S(o,t,y(y({},_),n))})},updated(t,e){var i;E.set(t,(i=e.value)!=null?i:{})}},D={title:"Ripple \u6C34\u6CE2\u7EB9",category:"\u901A\u7528",status:"100%",install(t){t.directive("Ripple",L)}};s.RippleDirective=L,s.default=D,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});
+var B=Object.defineProperty;var T=Object.getOwnPropertySymbols;var F=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var w=(s,r,l)=>r in s?B(s,r,{enumerable:!0,configurable:!0,writable:!0,value:l}):s[r]=l,f=(s,r)=>{for(var l in r||(r={}))F.call(r,l)&&w(s,l,r[l]);if(T)for(var l of T(r))j.call(r,l)&&w(s,l,r[l]);return s};(function(s,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(s=typeof globalThis!="undefined"?globalThis:s||self,r(s.index={}))})(this,function(s){"use strict";const r={directive:"ripple",color:"currentColor",initialOpacity:.2,finalOpacity:.1,duration:400,easing:"ease-out",delay:75,disabled:!1},l=({borderTopLeftRadius:t,borderTopRightRadius:e,borderBottomLeftRadius:i,borderBottomRightRadius:o})=>{const n=document.createElement("div");return n.style.top="0",n.style.left="0",n.style.width="100%",n.style.height="100%",n.style.position="absolute",n.style.borderRadius=`${t} ${e} ${o} ${i}`,n.style.overflow="hidden",n.style.pointerEvents="none",n.style.webkitMaskImage="-webkit-radial-gradient(white, black)",n},M=(t,e,i,o)=>{const n=document.createElement("div");return n.style.position="absolute",n.style.width=`${i}px`,n.style.height=`${i}px`,n.style.top=`${e}px`,n.style.left=`${t}px`,n.style.background=o.color,n.style.borderRadius="50%",n.style.opacity=`${o.initialOpacity}`,n.style.transform="translate(-50%,-50%) scale(0)",n.style.transition=`transform ${o.duration/1e3}s ${o.easing}, opacity ${o.duration/1e3}s ${o.easing}`,n};function u(t,e,i,o){const n=t-i,a=e-o;return Math.sqrt(n*n+a*a)}function O(t,e,{width:i,height:o}){const n=u(t,e,0,0),a=u(t,e,i,0),d=u(t,e,0,o),g=u(t,e,i,o);return Math.max(n,a,d,g)}const P=({x:t,y:e},{top:i,left:o})=>({x:t-o,y:e-i}),y="vRippleCountInternal";function R(t,e){t.dataset[y]=e.toString()}function v(t){var e;return parseInt((e=t.dataset[y])!=null?e:"0",10)}function k(t){const e=v(t);R(t,e+1)}function I(t){const e=v(t);R(t,e-1)}function x(t){delete t.dataset[y]}const S=2.05,_=(t,e,i)=>{const o=e.getBoundingClientRect(),n=window.getComputedStyle(e),{x:a,y:d}=P(t,o),g=S*O(a,d,o),m=l(n),p=M(a,d,g,i);let h="",b=!1,$=null;function N(){p.style.transition="opacity 150ms linear",p.style.opacity="0",setTimeout(()=>{m.remove(),I(e),v(e)===0&&(x(e),e.style.position=h)},150)}function c(A){typeof A!="undefined"&&(document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c)),b?N():b=!0}function C(){clearTimeout($),m.remove(),document.removeEventListener("pointerup",c),document.removeEventListener("pointercancel",c),document.removeEventListener("pointercancel",C)}k(e),n.position==="static"&&(e.style.position&&(h=e.style.position),e.style.position="relative"),m.appendChild(p),e.appendChild(m),document.addEventListener("pointerup",c),document.addEventListener("pointercancel",c),$=setTimeout(()=>{document.removeEventListener("pointercancel",C),requestAnimationFrame(()=>{p.style.transform="translate(-50%,-50%) scale(1)",p.style.opacity=`${i.finalOpacity}`,setTimeout(()=>c(),i.duration)})},i.delay),document.addEventListener("pointercancel",C)},E=new WeakMap,D=f({},r);var L={mounted(t,e){var i;E.set(t,(i=e.value)!=null?i:{}),t.addEventListener("pointerdown",o=>{const n=E.get(t);e.value&&e.value.disabled||n!==!1&&_(o,t,f(f({},D),n))})},updated(t,e){var i;E.set(t,(i=e.value)!=null?i:{})}},U={title:"Ripple \u6C34\u6CE2\u7EB9",category:"\u901A\u7528",status:"100%",install(t){t.directive("Ripple",L)}};s.RippleDirective=L,s.default=U,Object.defineProperty(s,"__esModule",{value:!0}),s[Symbol.toStringTag]="Module"});

package/slider/index.es.js

@@ -44,6 +44,63 @@ var Slider = defineComponent({
     const currentPosition = ref(0);
     const newPostion = ref(0);
     const percentDispaly = ref("");
+    function handleOnInput(event) {
+      inputValue.value = parseInt(event.target.value);
+      if (!inputValue.value) {
+        inputValue.value = props.min;
+        percentDispaly.value = "0%";
+      } else {
+        if (inputValue.value < props.min || inputValue.value > props.max) {
+          return;
+        }
+        const re = /^(?:[1-9]?\d|100)$/;
+        if (re.test(`${inputValue.value}`)) {
+          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
+          ctx.emit("update:modelValue", inputValue.value);
+        }
+      }
+    }
+    function setPostion(newPosition) {
+      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      if (newPosition < 0) {
+        newPosition = 0;
+      }
+      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
+      const steps = Math.round(newPosition / LengthPerStep);
+      const value = steps * LengthPerStep;
+      if (Math.round(value) >= sliderWidth) {
+        currentPosition.value = sliderWidth;
+        inputValue.value = props.max;
+        percentDispaly.value = "100%";
+        ctx.emit("update:modelValue", props.max);
+        return;
+      }
+      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
+      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
+      currentPosition.value = newPosition;
+      ctx.emit("update:modelValue", inputValue.value);
+    }
+    function dragStart(event) {
+      isClick = false;
+      startX = event.clientX;
+      startPosition = currentPosition.value;
+      newPostion.value = startPosition;
+    }
+    function onDragging(event) {
+      popoverShow.value = true;
+      const currentX = event.clientX;
+      const pxOffset = currentX - startX;
+      newPostion.value = startPosition + pxOffset;
+      setPostion(newPostion.value);
+    }
+    function onDragEnd() {
+      popoverShow.value = false;
+      setTimeout(() => {
+        isClick = true;
+      }, 100);
+      window.removeEventListener("mousemove", onDragging);
+      window.removeEventListener("mouseup", onDragEnd);
+    }
     const renderShowInput = () => {
       return props.showInput ? createVNode("div", {
         "class": "devui-input__out-wrap"
@@ -73,47 +130,6 @@ var Slider = defineComponent({
       window.addEventListener("mousemove", onDragging);
       window.addEventListener("mouseup", onDragEnd);
     }
-    function dragStart(event) {
-      isClick = false;
-      startX = event.clientX;
-      startPosition = currentPosition.value;
-      newPostion.value = startPosition;
-    }
-    function onDragging(event) {
-      popoverShow.value = true;
-      const currentX = event.clientX;
-      const pxOffset = currentX - startX;
-      newPostion.value = startPosition + pxOffset;
-      setPostion(newPostion.value);
-    }
-    function onDragEnd() {
-      popoverShow.value = false;
-      setTimeout(() => {
-        isClick = true;
-      }, 100);
-      window.removeEventListener("mousemove", onDragging);
-      window.removeEventListener("mouseup", onDragEnd);
-    }
-    function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
-      if (newPosition < 0) {
-        newPosition = 0;
-      }
-      const LengthPerStep = sliderWidth / ((props.max - props.min) / props.step);
-      const steps = Math.round(newPosition / LengthPerStep);
-      const value = steps * LengthPerStep;
-      if (Math.round(value) >= sliderWidth) {
-        currentPosition.value = sliderWidth;
-        inputValue.value = props.max;
-        percentDispaly.value = "100%";
-        ctx.emit("update:modelValue", props.max);
-        return;
-      }
-      percentDispaly.value = Math.round(value * 100 / sliderWidth) + "%";
-      inputValue.value = Math.round(value * (props.max - props.min) / sliderWidth) + props.min;
-      currentPosition.value = newPosition;
-      ctx.emit("update:modelValue", inputValue.value);
-    }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
         startX = event.target.getBoundingClientRect().left;
@@ -124,22 +140,6 @@ var Slider = defineComponent({
         return;
       }
     }
-    function handleOnInput(event) {
-      inputValue.value = parseInt(event.target.value);
-      if (!inputValue.value) {
-        inputValue.value = props.min;
-        percentDispaly.value = "0%";
-      } else {
-        if (inputValue.value < props.min || inputValue.value > props.max) {
-          return;
-        }
-        const re = /^(?:[1-9]?\d|100)$/;
-        if (re.test(`${inputValue.value}`)) {
-          percentDispaly.value = (inputValue.value - props.min) * 100 / (props.max - props.min) + "%";
-          ctx.emit("update:modelValue", inputValue.value);
-        }
-      }
-    }
     const disableClass = computed(() => {
       return props.disabled ? " disabled" : "";
     });
@@ -191,7 +191,7 @@ var index = {
   category: "\u6570\u636E\u5F55\u5165",
   status: "100%",
   install(app) {
-    app.use(Slider);
+    app.component(Slider.name, Slider);
   }
 };
 export { Slider, index as default };

package/slider/index.umd.js

@@ -1 +1 @@
-(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const g={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,v){let m=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref(""),S=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:D,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function M(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function E(n){m=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,b(h.value)}function _(){d.value=!1,setTimeout(()=>{m=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}function b(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",v.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,v.emit("update:modelValue",l.value)}function X(n){if(!e.disabled&&m){s=n.target.getBoundingClientRect().left;const i=n.clientX;b(i-s),M(n)}else return}function D(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,u.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",v.emit("update:modelValue",l.value))}}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:X,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:M,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),S()])}});o.install=function(e){e.component(o.name,o)};var x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.use(o)}};a.Slider=o,a.default=x,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});
+(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.index={},a.Vue))})(this,function(a,t){"use strict";const g={disabled:{type:Boolean,default:!1},max:{type:Number,default:100},min:{type:Number,default:0},modelValue:{type:Number,default:0},showInput:{type:Boolean,default:!1},step:{type:Number,default:1},tipsRenderer:{type:String,default:""}};var R="",o=t.defineComponent({name:"DSlider",props:g,emits:["update:modelValue"],setup(e,m){let v=!0,f=0,s=0;const d=t.ref(!1),V=t.ref(null),l=t.ref(e.modelValue),r=t.ref(0),h=t.ref(0),u=t.ref("");function S(n){if(l.value=parseInt(n.target.value),!l.value)l.value=e.min,u.value="0%";else{if(l.value<e.min||l.value>e.max)return;/^(?:[1-9]?\d|100)$/.test(`${l.value}`)&&(u.value=(l.value-e.min)*100/(e.max-e.min)+"%",m.emit("update:modelValue",l.value))}}function M(n){const i=Math.round(V.value.clientWidth);n<0&&(n=0);const c=i/((e.max-e.min)/e.step),y=Math.round(n/c)*c;if(Math.round(y)>=i){r.value=i,l.value=e.max,u.value="100%",m.emit("update:modelValue",e.max);return}u.value=Math.round(y*100/i)+"%",l.value=Math.round(y*(e.max-e.min)/i)+e.min,r.value=n,m.emit("update:modelValue",l.value)}function E(n){v=!1,s=n.clientX,f=r.value,h.value=f}function N(n){d.value=!0;const c=n.clientX-s;h.value=f+c,M(h.value)}function _(){d.value=!1,setTimeout(()=>{v=!0},100),window.removeEventListener("mousemove",N),window.removeEventListener("mouseup",_)}const X=()=>e.showInput?t.createVNode("div",{class:"devui-input__out-wrap"},[t.createVNode("input",{onInput:S,value:l.value+""},null)]):"";e.modelValue>e.max?u.value="100%":e.modelValue<e.min?u.value="0%":u.value=(e.modelValue-e.min)*100/(e.max-e.min)+"%",t.onMounted(()=>{const n=V.value.clientWidth;r.value=n*(l.value-e.min)/(e.max-e.min)});function b(n){d.value=!0,!e.disabled&&(n.preventDefault(),E(n),window.addEventListener("mousemove",N),window.addEventListener("mouseup",_))}function D(n){if(!e.disabled&&v){s=n.target.getBoundingClientRect().left;const i=n.clientX;M(i-s),b(n)}else return}const w=t.computed(()=>e.disabled?" disabled":""),I=()=>t.createVNode("div",{class:"devui-slider_popover",style:{left:u.value,opacity:d.value?1:0}},[t.createVNode("div",{class:"devui-slider_popover-arrow"},null),t.createVNode("div",{class:"devui-slider_popover-content"},[l.value+" "+e.tipsRenderer])]);return()=>t.createVNode("div",{class:"devui-slider"},[t.createVNode("div",{ref:V,class:"devui-slider__runway"+w.value,onMousedown:D,onMouseout:()=>d.value=!1},[t.createVNode("div",{class:"devui-slider__bar"+w.value,style:{width:u.value}},null),t.createVNode("div",{class:"devui-slider__button"+w.value,style:{left:u.value},onMousedown:b,onMouseenter:()=>d.value=!0,onMouseout:()=>d.value=!1},null),e.tipsRenderer==="null"?"":I()]),t.createVNode("span",{class:"devui-min_count"},[e.min]),t.createVNode("span",{class:"devui-max_count"},[e.max]),X()])}});o.install=function(e){e.component(o.name,o)};var x={title:"Slider \u6ED1\u5757",category:"\u6570\u636E\u5F55\u5165",status:"100%",install(e){e.component(o.name,o)}};a.Slider=o,a.default=x,Object.defineProperty(a,"__esModule",{value:!0}),a[Symbol.toStringTag]="Module"});