vue-devui 1.0.0-pre.0 → 1.0.0-rc.2

package/slider/index.es.js

@@ -44,33 +44,41 @@ var Slider = defineComponent({
     const currentPosition = ref(0);
     const newPostion = ref(0);
     const percentDispaly = ref("");
-    const renderShowInput = () => {
-      return props.showInput ? createVNode("div", {
-        "class": "devui-input__out-wrap"
-      }, [createVNode("input", {
-        "onInput": handleOnInput,
-        "value": inputValue.value + ""
-      }, null)]) : "";
-    };
-    if (props.modelValue > props.max) {
-      percentDispaly.value = "100%";
-    } else if (props.modelValue < props.min) {
-      percentDispaly.value = "0%";
-    } else {
-      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+    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);
+        }
+      }
     }
-    onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
-      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
-    });
-    function handleButtonMousedown(event) {
-      popoverShow.value = true;
-      if (props.disabled)
+    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;
-      event.preventDefault();
-      dragStart(event);
-      window.addEventListener("mousemove", onDragging);
-      window.addEventListener("mouseup", onDragEnd);
+      }
+      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;
@@ -93,25 +101,34 @@ var Slider = defineComponent({
       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);
+    const renderShowInput = () => {
+      return props.showInput ? createVNode("div", {
+        "class": "devui-input__out-wrap"
+      }, [createVNode("input", {
+        "onInput": handleOnInput,
+        "value": inputValue.value + ""
+      }, null)]) : "";
+    };
+    if (props.modelValue > props.max) {
+      percentDispaly.value = "100%";
+    } else if (props.modelValue < props.min) {
+      percentDispaly.value = "0%";
+    } else {
+      percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
+    }
+    onMounted(() => {
+      const sliderWidth = sliderRunway.value.clientWidth;
+      currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
+    });
+    function handleButtonMousedown(event) {
+      popoverShow.value = true;
+      if (props.disabled) {
         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);
+      event.preventDefault();
+      dragStart(event);
+      window.addEventListener("mousemove", onDragging);
+      window.addEventListener("mouseup", onDragEnd);
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
@@ -123,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" : "";
     });
@@ -190,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"});