vue-devui 1.0.0-rc.5 → 1.0.0-rc.6

package/slider/index.es.js

@@ -27,6 +27,10 @@ const sliderProps = {
   tipsRenderer: {
     type: String,
     default: ""
+  },
+  color: {
+    type: String,
+    default: ""
   }
 };
 var slider = "";
@@ -61,7 +65,8 @@ var Slider = defineComponent({
       }
     }
     function setPostion(newPosition) {
-      const sliderWidth = Math.round(sliderRunway.value.clientWidth);
+      const clientWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
+      const sliderWidth = Math.round(clientWidth);
       if (newPosition < 0) {
         newPosition = 0;
       }
@@ -106,7 +111,8 @@ var Slider = defineComponent({
         "class": "devui-input__out-wrap"
       }, [createVNode("input", {
         "onInput": handleOnInput,
-        "value": inputValue.value + ""
+        "value": inputValue.value + "",
+        "disabled": props.disabled
       }, null)]) : "";
     };
     if (props.modelValue > props.max) {
@@ -117,7 +123,7 @@ var Slider = defineComponent({
       percentDispaly.value = (props.modelValue - props.min) * 100 / (props.max - props.min) + "%";
     }
     onMounted(() => {
-      const sliderWidth = sliderRunway.value.clientWidth;
+      const sliderWidth = !!sliderRunway.value ? sliderRunway.value.clientWidth : 0;
       currentPosition.value = sliderWidth * (inputValue.value - props.min) / (props.max - props.min);
     });
     function handleButtonMousedown(event) {
@@ -132,7 +138,8 @@ var Slider = defineComponent({
     }
     function handleRunwayMousedown(event) {
       if (!props.disabled && isClick) {
-        startX = event.target.getBoundingClientRect().left;
+        const _e = event.target;
+        startX = _e.getBoundingClientRect().left;
         const currentX = event.clientX;
         setPostion(currentX - startX);
         handleButtonMousedown(event);
@@ -156,6 +163,9 @@ var Slider = defineComponent({
         "class": "devui-slider_popover-content"
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
+    const color = computed(() => {
+      return props.disabled ? "" : props.color;
+    });
     return () => createVNode("div", {
       "class": "devui-slider"
     }, [createVNode("div", {
@@ -166,12 +176,14 @@ var Slider = defineComponent({
     }, [createVNode("div", {
       "class": "devui-slider__bar" + disableClass.value,
       "style": {
-        width: percentDispaly.value
+        width: percentDispaly.value,
+        backgroundColor: color.value
       }
     }, null), createVNode("div", {
       "class": "devui-slider__button" + disableClass.value,
       "style": {
-        left: percentDispaly.value
+        left: percentDispaly.value,
+        borderColor: color.value
       },
       "onMousedown": handleButtonMousedown,
       "onMouseenter": () => popoverShow.value = true,

package/slider/index.umd.js

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