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

package/slider/index.es.js

@@ -33,6 +33,29 @@ const sliderProps = {
     default: ""
   }
 };
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
+  const b = () => createBem(namespace);
+  const e = (element) => element ? createBem(namespace, element) : "";
+  const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var slider = "";
 var Slider = defineComponent({
   name: "DSlider",
@@ -42,6 +65,7 @@ var Slider = defineComponent({
     let isClick = true;
     let startPosition = 0;
     let startX = 0;
+    const ns = useNamespace("slider");
     const popoverShow = ref(false);
     const sliderRunway = ref(null);
     const inputValue = ref(props.modelValue);
@@ -108,7 +132,7 @@ var Slider = defineComponent({
     }
     const renderShowInput = () => {
       return props.showInput ? createVNode("div", {
-        "class": "devui-input__out-wrap"
+        "class": ns.e("input-wrap")
       }, [createVNode("input", {
         "onInput": handleOnInput,
         "value": inputValue.value + "",
@@ -152,35 +176,35 @@ var Slider = defineComponent({
     });
     const popover = () => {
       return createVNode("div", {
-        "class": "devui-slider_popover",
+        "class": ns.e("popover"),
         "style": {
           left: percentDispaly.value,
           opacity: popoverShow.value ? 1 : 0
         }
       }, [createVNode("div", {
-        "class": "devui-slider_popover-arrow"
+        "class": ns.e("popover-arrow")
       }, null), createVNode("div", {
-        "class": "devui-slider_popover-content"
+        "class": ns.e("popover-content")
       }, [inputValue.value + " " + props.tipsRenderer])]);
     };
     const color = computed(() => {
       return props.disabled ? "" : props.color;
     });
     return () => createVNode("div", {
-      "class": "devui-slider"
+      "class": ns.b()
     }, [createVNode("div", {
       "ref": sliderRunway,
-      "class": "devui-slider__runway" + disableClass.value,
+      "class": [ns.e("runway"), disableClass.value],
       "onMousedown": handleRunwayMousedown,
       "onMouseout": () => popoverShow.value = false
     }, [createVNode("div", {
-      "class": "devui-slider__bar" + disableClass.value,
+      "class": [ns.e("bar"), disableClass.value],
       "style": {
         width: percentDispaly.value,
         backgroundColor: color.value
       }
     }, null), createVNode("div", {
-      "class": "devui-slider__button" + disableClass.value,
+      "class": [ns.e("button"), disableClass.value],
       "style": {
         left: percentDispaly.value,
         borderColor: color.value
@@ -189,9 +213,9 @@ var Slider = defineComponent({
       "onMouseenter": () => popoverShow.value = true,
       "onMouseout": () => popoverShow.value = false
     }, null), props.tipsRenderer === "null" ? "" : popover()]), createVNode("span", {
-      "class": "devui-min_count"
+      "class": ns.e("min-count")
     }, [props.min]), createVNode("span", {
-      "class": "devui-max_count"
+      "class": ns.e("max-count")
     }, [props.max]), renderShowInput()]);
   }
 });

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

package/slider/style.css

@@ -1 +1 @@
-.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider_popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider_popover .devui-slider_popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-min_count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-max_count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-input__out-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-input__out-wrap input{width:40px;text-align:center}
+.devui-slider{position:relative;width:90%;display:block}.devui-slider.disabled{cursor:not-allowed;background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway{position:relative;width:100%;padding:4px 0;margin:4px 0;cursor:pointer;box-sizing:border-box;height:5px;display:flex;align-items:center;background-color:var(--devui-default-bg, #f3f6f8)}.devui-slider__runway.disabled{cursor:not-allowed}.devui-slider__runway .devui-slider__bar{height:6px;background-color:var(--devui-default-line, #5e7ce0);border-top-left-radius:var(--devui-border-radius, 2px);border-bottom-left-radius:var(--devui-border-radius, 2px);position:absolute}.devui-slider__runway .devui-slider__bar.disabled{background-color:var(--devui-disabled-line, #dfe1e6);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__bar.disabled:hover{cursor:not-allowed}.devui-slider__runway .devui-slider__button{position:absolute;width:14px;height:14px;border:2px solid var(--devui-default-line, #5e7ce0);background-color:var(--devui-base-bg, #ffffff);border-radius:50%;margin-left:-7px;transition:transform .2s ease-in-out}.devui-slider__runway .devui-slider__button:hover{transform:scale(1.2)}.devui-slider__runway .devui-slider__button.disabled{background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-disabled-line, #dfe1e6)}.devui-slider__runway .devui-slider__button.disabled:hover{cursor:not-allowed;transform:none}.devui-slider__runway .devui-slider__popover{position:relative;bottom:26px;transform:translate(-50%);border-radius:var(--devui-border-radius-feedback, 4px);font-size:var(--devui-font-size-sm, 12px);color:var(--devui-feedback-overlay-text, #dfe1e6)}.devui-slider__runway .devui-slider__popover .devui-slider__popover-arrow{position:absolute;left:50%;margin-left:-4px;bottom:-4px;width:8px;height:8px;transform:rotate(45deg);display:block;z-index:-1;background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider__runway .devui-slider__popover .devui-slider__popover-content{padding:5px 14px;text-align:center;border-radius:var(--devui-border-radius-feedback, 4px);background-color:var(--devui-feedback-overlay-bg, #464d6e)}.devui-slider .devui-slider__min-count{position:absolute;top:15px;left:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__max-count{position:absolute;top:15px;right:0;font-size:var(--devui-font-size, 12px);color:var(--devui-text, #252b3a)}.devui-slider .devui-slider__input-wrap{font-size:var(--devui-font-size, 12px);position:absolute;right:-60px;top:-12px;padding:5px 10px;cursor:text;margin-left:20px}.devui-slider .devui-slider__input-wrap input{width:40px;text-align:center}