vue-devui 1.0.0-rc.8 → 1.0.1

package/input-number/index.es.js

@@ -1,8 +1,22 @@
-import { defineComponent, toRefs, createVNode, ref, computed } from "vue";
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { createVNode, computed, ref, toRefs, reactive, watch, defineComponent, mergeProps } from "vue";
 const inputNumberProps = {
   placeholder: {
-    type: String,
-    default: void 0
+    type: String
   },
   disabled: {
     type: Boolean,
@@ -10,7 +24,7 @@ const inputNumberProps = {
   },
   step: {
     type: Number,
-    default: 0
+    default: 1
   },
   max: {
     type: Number,
@@ -22,230 +36,291 @@ const inputNumberProps = {
   },
   size: {
     type: String,
-    default: ""
+    default: "md"
   },
   modelValue: {
-    type: Number,
-    default: 0
+    type: Number
   },
-  "onUpdate:modelValue": {
-    type: Function,
-    default: void 0
+  precision: {
+    type: Number
   },
-  "onChange": {
-    type: Function,
-    default: void 0
-  },
-  "onKeydown": {
-    type: Function,
-    default: void 0
-  },
-  "onFocus": {
-    type: Function,
-    default: void 0
-  },
-  "onBlur": {
-    type: Function,
-    default: void 0
+  reg: {
+    type: [RegExp, String],
+    default: ""
   }
 };
-var inputNumber = "";
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: String,
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  classPrefix: {
-    type: String,
-    default: "icon"
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
   }
-};
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  setup(props) {
-    const {
-      name,
-      size,
-      color,
-      classPrefix
-    } = toRefs(props);
-    return () => {
-      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
-        "src": name.value,
-        "alt": name.value.split("/")[name.value.split("/").length - 1],
-        "style": {
-          width: size.value,
-          verticalAlign: "text-bottom"
-        }
-      }, null) : createVNode("i", {
-        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
-        "style": {
-          fontSize: size.value,
-          color: color.value
-        }
-      }, null);
-    };
+  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
+  };
+}
+const ns$1 = useNamespace("input-number");
+function IncIcon() {
+  return createVNode("svg", {
+    "class": ns$1.e("icon-arrow"),
+    "width": "1em",
+    "height": "1em",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": "M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+function DecIcon() {
+  return createVNode("svg", {
+    "class": ns$1.e("icon-arrow"),
+    "width": "1em",
+    "height": "1em",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": "M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
+const isNumber = (value) => typeof value === "number";
+const isUndefined = (value) => value === void 0;
+const ns = useNamespace("input-number");
+function useRender(props, ctx) {
+  const _a = ctx.attrs, { style, class: customClass } = _a, otherAttrs = __objRest(_a, ["style", "class"]);
+  const customStyle = { style };
+  const wrapClass = computed(() => [
+    {
+      [ns.b()]: true,
+      [ns.m(props.size)]: true
+    },
+    customClass
+  ]);
+  const controlButtonsClass = computed(() => ({
+    [ns.e("control-buttons")]: true,
+    disabled: props.disabled
+  }));
+  const inputWrapClass = computed(() => ({
+    [ns.e("input-wrap")]: true
+  }));
+  const inputInnerClass = computed(() => ({
+    [ns.e("input-box")]: true,
+    disabled: props.disabled
+  }));
+  return { wrapClass, customStyle, otherAttrs, controlButtonsClass, inputWrapClass, inputInnerClass };
+}
+function useExpose(ctx) {
+  const inputRef = ref();
+  const focus = () => {
+    inputRef.value.focus();
+  };
+  const blur = () => {
+    inputRef.value.blur();
+  };
+  const select = () => {
+    inputRef.value.select();
+  };
+  ctx.expose({ focus, blur, select });
+  return { inputRef };
+}
+function getPrecision(pre) {
+  let precision = 0;
+  if (isUndefined(pre)) {
+    return precision;
+  }
+  const preString = pre.toString();
+  const dotIndex = preString.indexOf(".");
+  if (dotIndex !== -1) {
+    precision = preString.length - dotIndex - 1;
+  }
+  return precision;
+}
+function useEvent(props, ctx, inputRef) {
+  const { min, max, step, disabled } = toRefs(props);
+  const state = reactive({
+    currentValue: props.modelValue || "",
+    userInputValue: void 0
+  });
+  const numPrecision = computed(() => {
+    if (!isUndefined(props.precision)) {
+      return props.precision;
+    } else {
+      return Math.max(getPrecision(props.modelValue), getPrecision(step.value));
+    }
+  });
+  const inputVal = computed(() => {
+    if (!isUndefined(state.userInputValue)) {
+      return state.userInputValue;
+    }
+    let currentValue = state.currentValue;
+    if (currentValue === "" || isUndefined(currentValue) || Number.isNaN(currentValue)) {
+      return "";
+    }
+    if (isNumber(currentValue)) {
+      currentValue = currentValue.toFixed(numPrecision.value);
+    }
+    return currentValue;
+  });
+  const toPrecision = (num) => {
+    return Number.parseFloat(num.toFixed(numPrecision.value));
+  };
+  const computeByStep = (val, addOrNot = 1) => {
+    if (!isNumber(val)) {
+      return state.currentValue;
+    }
+    return toPrecision(val + step.value * addOrNot);
+  };
+  const correctValue = (value) => {
+    const valueStr = value + "";
+    if (props.reg && !valueStr.match(new RegExp(props.reg))) {
+      return void 0;
+    }
+    let newVal = Number(value);
+    if (newVal !== 0 && (!Number(value) || Number.isNaN(newVal))) {
+      return void 0;
+    }
+    if (!isUndefined(props.precision)) {
+      newVal = toPrecision(newVal);
+    }
+    if (newVal > max.value || newVal < min.value) {
+      newVal = newVal > max.value ? max.value : min.value;
+    }
+    return newVal;
+  };
+  const setCurrentValue = (value) => {
+    const oldVal = state.currentValue;
+    const newVal = correctValue(value);
+    state.userInputValue = void 0;
+    if (newVal !== 0 && !newVal) {
+      ctx.emit("update:modelValue", oldVal);
+      return;
+    }
+    if (oldVal === newVal) {
+      return;
+    }
+    ctx.emit("update:modelValue", newVal);
+    ctx.emit("input", newVal);
+    ctx.emit("change", newVal, oldVal);
+    state.currentValue = newVal;
+  };
+  const minDisabled = computed(() => isNumber(state.currentValue) && computeByStep(state.currentValue, -1) < props.min);
+  const maxDisabled = computed(() => isNumber(state.currentValue) && computeByStep(state.currentValue) > props.max);
+  const onAdd = () => {
+    if (disabled.value || maxDisabled.value) {
+      return;
+    }
+    inputRef.value.focus();
+    const newVal = computeByStep(state.currentValue || 0);
+    setCurrentValue(newVal);
+  };
+  const onSubtract = () => {
+    if (disabled.value || minDisabled.value) {
+      return;
+    }
+    inputRef.value.focus();
+    const newVal = computeByStep(state.currentValue || 0, -1);
+    setCurrentValue(newVal);
+  };
+  watch(() => props.modelValue, (val) => {
+    state.currentValue = correctValue(val);
+  }, { immediate: true });
+  const onInput = (event) => {
+    state.userInputValue = event.target.value;
+  };
+  const onChange = (event) => {
+    setCurrentValue(event.target.value);
+  };
+  return { inputVal, minDisabled, maxDisabled, onAdd, onSubtract, onInput, onChange };
+}
+var inputNumber = "";
 var InputNumber = defineComponent({
   name: "DInputNumber",
   props: inputNumberProps,
-  emits: ["update:modelValue", "change", "input", "focus", "blur", "keydown"],
+  emits: ["update:modelValue", "change", "input"],
   setup(props, ctx) {
-    const inputVal = ref(props.modelValue < props.min ? props.min : props.modelValue);
-    const focusVal = ref("");
-    const isSize = computed(() => {
-      return `devui-input-number-${props.size}`;
-    });
-    const isDisabled = computed(() => {
-      return props.disabled;
-    });
-    const add = () => {
-      if (props.disabled) {
-        return;
-      }
-      if (inputVal.value >= props.max) {
-        return;
-      }
-      if (props.step !== 0) {
-        const maxSpaceVal = props.max - inputVal.value;
-        if (inputVal.value < props.max && maxSpaceVal < props.step) {
-          inputVal.value += maxSpaceVal;
-        } else if (inputVal.value < props.max && maxSpaceVal > props.step) {
-          inputVal.value += props.step;
-        } else {
-          inputVal.value += props.step;
-        }
-      } else {
-        inputVal.value += 1;
-      }
-      focusVal.value = "active";
-      ctx.emit("change", inputVal.value);
-      ctx.emit("update:modelValue", inputVal.value);
-    };
-    const subtract = () => {
-      if (props.disabled) {
-        return;
-      }
-      if (inputVal.value <= props.min) {
-        return;
-      }
-      if (props.step !== 0) {
-        const minSpaceVal = inputVal.value - props.min;
-        if (inputVal.value > props.min && minSpaceVal > props.step) {
-          inputVal.value -= props.step;
-        } else if (inputVal.value > props.min && minSpaceVal < props.step) {
-          inputVal.value -= minSpaceVal;
-        } else {
-          inputVal.value -= props.step;
-        }
-      } else {
-        inputVal.value -= 1;
-      }
-      focusVal.value = "active";
-      ctx.emit("change", inputVal.value);
-      ctx.emit("update:modelValue", inputVal.value);
-    };
-    const onInput = (val) => {
-      inputVal.value = parseInt(val.data);
-      ctx.emit("input", inputVal.value);
-      ctx.emit("update:modelValue", inputVal.value);
-    };
-    const onFocus = ($event) => {
-      focusVal.value = "active";
-      ctx.emit("focus", $event);
-    };
-    const onBlur = ($event) => {
-      focusVal.value = "";
-      ctx.emit("blur", $event);
-    };
-    const onChange = ($event) => {
-      ctx.emit("change", $event.target.value);
-    };
-    const onKeydown = ($event) => {
-      ctx.emit("keydown", $event);
-    };
-    return {
-      inputVal,
-      focusVal,
-      isDisabled,
-      isSize,
-      add,
-      subtract,
-      onInput,
-      onChange,
-      onKeydown,
-      onBlur,
-      onFocus
-    };
-  },
-  render() {
     const {
-      focusVal,
-      placeholder,
-      add,
+      disabled
+    } = toRefs(props);
+    const {
+      wrapClass,
+      customStyle,
+      otherAttrs,
+      controlButtonsClass,
+      inputWrapClass,
+      inputInnerClass
+    } = useRender(props, ctx);
+    const {
+      inputRef
+    } = useExpose(ctx);
+    const {
       inputVal,
-      isDisabled,
-      isSize,
-      subtract,
+      minDisabled,
+      maxDisabled,
+      onAdd,
+      onSubtract,
       onInput,
-      onChange,
-      onKeydown,
-      onBlur,
-      onFocus
-    } = this;
-    const dInputNum = ["devui-input-number", isDisabled ? "devui-input-disabled" : "", isSize];
-    return createVNode("div", {
-      "class": dInputNum
-    }, [createVNode("div", {
-      "onBlur": onBlur,
-      "tabindex": "1",
-      "class": ["devui-control-buttons", focusVal.value]
+      onChange
+    } = useEvent(props, ctx, inputRef);
+    return () => createVNode("div", mergeProps({
+      "class": wrapClass.value
+    }, customStyle), [createVNode("div", {
+      "class": controlButtonsClass.value
     }, [createVNode("span", {
-      "onClick": add
-    }, [createVNode(Icon, {
-      "size": "12px",
-      "name": "chevron-up"
-    }, null)]), createVNode("span", {
-      "onClick": subtract
-    }, [createVNode(Icon, {
-      "size": "12px",
-      "name": "chevron-down"
-    }, null)])]), createVNode("div", {
-      "class": "devui-input-item"
-    }, [createVNode("input", {
-      "type": "number",
-      "value": inputVal,
-      "placeholder": placeholder,
-      "disabled": isDisabled,
-      "class": ["devui-input-style devui-input-box", focusVal.value],
+      "class": ["control-button control-inc", {
+        disabled: maxDisabled.value
+      }],
+      "onClick": onAdd
+    }, [createVNode(IncIcon, null, null)]), createVNode("span", {
+      "class": ["control-button control-dec", {
+        disabled: minDisabled.value
+      }],
+      "onClick": onSubtract
+    }, [createVNode(DecIcon, null, null)])]), createVNode("div", {
+      "class": inputWrapClass.value
+    }, [createVNode("input", mergeProps({
+      "ref": inputRef,
+      "value": inputVal.value,
+      "placeholder": props.placeholder,
+      "disabled": disabled.value,
+      "class": inputInnerClass.value
+    }, otherAttrs, {
       "onInput": onInput,
-      "onChange": onChange,
-      "onFocus": onFocus,
-      "onBlur": onBlur,
-      "onKeydown": onKeydown
-    }, null)])]);
+      "onChange": onChange
+    }), null)])]);
   }
 });
-InputNumber.install = function(app) {
-  app.component(InputNumber.name, InputNumber);
-};
 var index = {
   title: "InputNumber \u6570\u5B57\u8F93\u5165\u6846",
   category: "\u6570\u636E\u5F55\u5165",
   status: "50%",
   install(app) {
-    app.use(InputNumber);
+    app.component(InputNumber.name, InputNumber);
   }
 };
 export { InputNumber, index as default };

package/input-number/index.umd.js

@@ -1 +1 @@
-(function(l,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(l=typeof globalThis!="undefined"?globalThis:l||self,n(l.index={},l.Vue))})(this,function(l,n){"use strict";const V={placeholder:{type:String,default:void 0},disabled:{type:Boolean,default:!1},step:{type:Number,default:0},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},size:{type:String,default:""},modelValue:{type:Number,default:0},"onUpdate:modelValue":{type:Function,default:void 0},onChange:{type:Function,default:void 0},onKeydown:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onBlur:{type:Function,default:void 0}};var N="";const h={name:{type:String,default:"",required:!0},size:{type:String,default:"inherit"},color:{type:String,default:"inherit"},classPrefix:{type:String,default:"icon"}};var r=n.defineComponent({name:"DIcon",props:h,setup(e){const{name:u,size:t,color:i,classPrefix:o}=n.toRefs(e);return()=>/^((https?):)?\/\//.test(u.value)?n.createVNode("img",{src:u.value,alt:u.value.split("/")[u.value.split("/").length-1],style:{width:t.value,verticalAlign:"text-bottom"}},null):n.createVNode("i",{class:`${o.value} ${o.value}-${u.value}`,style:{fontSize:t.value,color:i.value}},null)}}),d=n.defineComponent({name:"DInputNumber",props:V,emits:["update:modelValue","change","input","focus","blur","keydown"],setup(e,u){const t=n.ref(e.modelValue<e.min?e.min:e.modelValue),i=n.ref(""),o=n.computed(()=>`devui-input-number-${e.size}`),s=n.computed(()=>e.disabled);return{inputVal:t,focusVal:i,isDisabled:s,isSize:o,add:()=>{if(!e.disabled&&!(t.value>=e.max)){if(e.step!==0){const a=e.max-t.value;t.value<e.max&&a<e.step?t.value+=a:(t.value<e.max&&a>e.step,t.value+=e.step)}else t.value+=1;i.value="active",u.emit("change",t.value),u.emit("update:modelValue",t.value)}},subtract:()=>{if(!e.disabled&&!(t.value<=e.min)){if(e.step!==0){const a=t.value-e.min;t.value>e.min&&a>e.step?t.value-=e.step:t.value>e.min&&a<e.step?t.value-=a:t.value-=e.step}else t.value-=1;i.value="active",u.emit("change",t.value),u.emit("update:modelValue",t.value)}},onInput:a=>{t.value=parseInt(a.data),u.emit("input",t.value),u.emit("update:modelValue",t.value)},onChange:a=>{u.emit("change",a.target.value)},onKeydown:a=>{u.emit("keydown",a)},onBlur:a=>{i.value="",u.emit("blur",a)},onFocus:a=>{i.value="active",u.emit("focus",a)}}},render(){const{focusVal:e,placeholder:u,add:t,inputVal:i,isDisabled:o,isSize:s,subtract:m,onInput:f,onChange:v,onKeydown:p,onBlur:c,onFocus:y}=this,b=["devui-input-number",o?"devui-input-disabled":"",s];return n.createVNode("div",{class:b},[n.createVNode("div",{onBlur:c,tabindex:"1",class:["devui-control-buttons",e.value]},[n.createVNode("span",{onClick:t},[n.createVNode(r,{size:"12px",name:"chevron-up"},null)]),n.createVNode("span",{onClick:m},[n.createVNode(r,{size:"12px",name:"chevron-down"},null)])]),n.createVNode("div",{class:"devui-input-item"},[n.createVNode("input",{type:"number",value:i,placeholder:u,disabled:o,class:["devui-input-style devui-input-box",e.value],onInput:f,onChange:v,onFocus:y,onBlur:c,onKeydown:p},null)])])}});d.install=function(e){e.component(d.name,d)};var g={title:"InputNumber \u6570\u5B57\u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"50%",install(e){e.use(d)}};l.InputNumber=d,l.default=g,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});
+var R=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var k=(l,e)=>{var g={};for(var c in l)T.call(l,c)&&e.indexOf(c)<0&&(g[c]=l[c]);if(l!=null&&R)for(var c of R(l))e.indexOf(c)<0&&j.call(l,c)&&(g[c]=l[c]);return g};(function(l,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(l=typeof globalThis!="undefined"?globalThis:l||self,e(l.index={},l.Vue))})(this,function(l,e){"use strict";const g={placeholder:{type:String},disabled:{type:Boolean,default:!1},step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-1/0},size:{type:String,default:"md"},modelValue:{type:Number},precision:{type:Number},reg:{type:[RegExp,String],default:""}};function c(t,r,o){let s=t;return r&&(s+=`__${r}`),o&&(s+=`--${o}`),s}function P(t,r=!1){const o=r?`.devui-${t}`:`devui-${t}`;return{b:()=>c(o),e:n=>n?c(o,n):"",m:n=>n?c(o,"",n):"",em:(n,d)=>n&&d?c(o,n,d):""}}const D=P("input-number");function E(){return e.createVNode("svg",{class:D.e("icon-arrow"),width:"1em",height:"1em",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z","fill-rule":"nonzero"},null)])])}function F(){return e.createVNode("svg",{class:D.e("icon-arrow"),width:"1em",height:"1em",viewBox:"0 0 16 16",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},[e.createVNode("g",{stroke:"none","stroke-width":"1",fill:"none","fill-rule":"evenodd"},[e.createVNode("path",{d:"M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088 7.64644661,10.6464466           L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876 3.85355339,6.14644661 C3.94732158,6.05267842           4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6 12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824           12.2402148,6.7597852 12.1464466,6.85355339 Z","fill-rule":"nonzero"},null)])])}const w=t=>typeof t=="number",h=t=>t===void 0,C=P("input-number");function M(t,r){const p=r.attrs,{style:o,class:s}=p,i=k(p,["style","class"]),m={style:o},f=e.computed(()=>[{[C.b()]:!0,[C.m(t.size)]:!0},s]),n=e.computed(()=>({[C.e("control-buttons")]:!0,disabled:t.disabled})),d=e.computed(()=>({[C.e("input-wrap")]:!0})),b=e.computed(()=>({[C.e("input-box")]:!0,disabled:t.disabled}));return{wrapClass:f,customStyle:m,otherAttrs:i,controlButtonsClass:n,inputWrapClass:d,inputInnerClass:b}}function $(t){const r=e.ref(),o=()=>{r.value.focus()},s=()=>{r.value.blur()},i=()=>{r.value.select()};return t.expose({focus:o,blur:s,select:i}),{inputRef:r}}function L(t){let r=0;if(h(t))return r;const o=t.toString(),s=o.indexOf(".");return s!==-1&&(r=o.length-s-1),r}function z(t,r,o){const{min:s,max:i,step:m,disabled:f}=e.toRefs(t),n=e.reactive({currentValue:t.modelValue||"",userInputValue:void 0}),d=e.computed(()=>h(t.precision)?Math.max(L(t.modelValue),L(m.value)):t.precision),b=e.computed(()=>{if(!h(n.userInputValue))return n.userInputValue;let u=n.currentValue;return u===""||h(u)||Number.isNaN(u)?"":(w(u)&&(u=u.toFixed(d.value)),u)}),p=u=>Number.parseFloat(u.toFixed(d.value)),N=(u,V=1)=>w(u)?p(u+m.value*V):n.currentValue,y=u=>{const V=u+"";if(t.reg&&!V.match(new RegExp(t.reg)))return;let a=Number(u);if(!(a!==0&&(!Number(u)||Number.isNaN(a))))return h(t.precision)||(a=p(a)),(a>i.value||a<s.value)&&(a=a>i.value?i.value:s.value),a},v=u=>{const V=n.currentValue,a=y(u);if(n.userInputValue=void 0,a!==0&&!a){r.emit("update:modelValue",V);return}V!==a&&(r.emit("update:modelValue",a),r.emit("input",a),r.emit("change",a,V),n.currentValue=a)},I=e.computed(()=>w(n.currentValue)&&N(n.currentValue,-1)<t.min),x=e.computed(()=>w(n.currentValue)&&N(n.currentValue)>t.max),B=()=>{if(f.value||x.value)return;o.value.focus();const u=N(n.currentValue||0);v(u)},_=()=>{if(f.value||I.value)return;o.value.focus();const u=N(n.currentValue||0,-1);v(u)};return e.watch(()=>t.modelValue,u=>{n.currentValue=y(u)},{immediate:!0}),{inputVal:b,minDisabled:I,maxDisabled:x,onAdd:B,onSubtract:_,onInput:u=>{n.userInputValue=u.target.value},onChange:u=>{v(u.target.value)}}}var O="",S=e.defineComponent({name:"DInputNumber",props:g,emits:["update:modelValue","change","input"],setup(t,r){const{disabled:o}=e.toRefs(t),{wrapClass:s,customStyle:i,otherAttrs:m,controlButtonsClass:f,inputWrapClass:n,inputInnerClass:d}=M(t,r),{inputRef:b}=$(r),{inputVal:p,minDisabled:N,maxDisabled:y,onAdd:v,onSubtract:I,onInput:x,onChange:B}=z(t,r,b);return()=>e.createVNode("div",e.mergeProps({class:s.value},i),[e.createVNode("div",{class:f.value},[e.createVNode("span",{class:["control-button control-inc",{disabled:y.value}],onClick:v},[e.createVNode(E,null,null)]),e.createVNode("span",{class:["control-button control-dec",{disabled:N.value}],onClick:I},[e.createVNode(F,null,null)])]),e.createVNode("div",{class:n.value},[e.createVNode("input",e.mergeProps({ref:b,value:p.value,placeholder:t.placeholder,disabled:o.value,class:d.value},m,{onInput:x,onChange:B}),null)])])}}),A={title:"InputNumber \u6570\u5B57\u8F93\u5165\u6846",category:"\u6570\u636E\u5F55\u5165",status:"50%",install(t){t.component(S.name,S)}};l.InputNumber=S,l.default=A,Object.defineProperty(l,"__esModule",{value:!0}),l[Symbol.toStringTag]="Module"});

package/input-number/style.css

@@ -1 +1 @@
-.devui-input-number{position:relative;display:inline-block;width:80px;line-height:38px;margin-right:12px}.devui-input-number:hover:not(.devui-input-disabled) .devui-input-box{border-color:var(--devui-form-control-line-hover)}.devui-input-number:hover:not(.devui-input-disabled) .devui-control-buttons:not(.disabled){display:flex;border-color:var(--devui-form-control-line-hover)}.devui-input-number:focus-within .devui-control-buttons{display:flex}.devui-input-number .active{border:1px solid var(--devui-form-control-line-active)!important;display:flex!important}.devui-input-number.devui-input-disabled .devui-subtract,.devui-input-number.devui-input-disabled .devui-add,.devui-input-number.devui-input-disabled .devui-input-style{cursor:not-allowed;border-color:#e4e7ed;color:#e4e7ed}.devui-input-number.devui-input-disabled .devui-input-style{border-color:var(--devui-disabled-line)!important;color:var(--devui-disabled-text)!important;background-color:var(--devui-disabled-bg)!important}.devui-input-number.devui-input-number-sm{width:60px}.devui-input-number.devui-input-number-sm .devui-input-box{height:26px;line-height:26px}.devui-input-number.devui-input-number-md{width:80px}.devui-input-number.devui-input-number-md .devui-input-box{height:32px;line-height:32px}.devui-input-number.devui-input-number-lg{width:100px}.devui-input-number.devui-input-number-lg .devui-input-box{height:38px;line-height:38px}.devui-input-number .devui-input-item{line-height:100%}.devui-input-number .devui-input-style::-webkit-outer-spin-button,.devui-input-number .devui-input-style::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.devui-input-number .devui-add,.devui-input-number .devui-subtract{display:inline-block;width:50px;height:38px;line-height:38px;text-align:center;font-size:16px;color:#333;background:#f5f7fa;cursor:pointer;border:1px solid #dcdfe6}.devui-input-number .devui-add{float:right;margin-left:-1px;border-radius:0 4px 4px 0}.devui-input-number .devui-subtract{float:left;margin-right:-1px;border-radius:4px 0 0 4px}.devui-input-number .devui-input-style{display:block;-moz-appearance:textfield}.devui-input-number .devui-input-style{outline:none;background-color:var(--devui-base-bg);border:1px solid var(--devui-form-control-line);border-radius:var(--devui-border-radius);padding:4px 8px;line-height:18px;font-size:var(--devui-font-size);color:var(--devui-text);width:100%;display:block;cursor:text;height:28px;transition:border-color .3s var(--devui-animation-ease-in-out-smooth)}.devui-input-number .devui-input-box{box-sizing:border-box;padding:4px 8px;font-size:var(--devui-font-size);vertical-align:middle;border-radius:var(--devui-border-radius);outline:none;width:100%;line-height:20px;height:28px;border-width:1px;border-style:solid}.devui-input-number .devui-input-box:not(.disabled){background-color:var(--devui-base-bg);border-color:var(--devui-line);color:var(--devui-text)}.devui-input-number .disabled{cursor:not-allowed}.devui-input-number .devui-control-buttons{display:none;position:absolute;right:0;width:22px;height:100%;flex-direction:column;justify-content:center;align-items:center;border-left:1px solid var(--devui-line);box-sizing:border-box;line-height:100%;border-radius:0 var(--devui-border-radius) var(--devui-border-radius) 0}.devui-input-number .devui-control-buttons:not(.disabled){cursor:pointer}.devui-input-number .devui-control-buttons>span{display:flex}
+.devui-input-number{position:relative;display:inline-block;width:80px}.devui-input-number:hover .devui-input-number__input-box:not(.disabled){border:1px solid var(--devui-form-control-line-hover, #575d6c);padding-right:24px}.devui-input-number:hover .devui-input-number__control-buttons:not(.disabled){display:flex;border-color:var(--devui-form-control-line-hover, #575d6c)}.devui-input-number:focus-within .devui-input-number__input-box:not(.disabled){border:1px solid var(--devui-form-control-line-active, #5e7ce0);padding-right:24px}.devui-input-number:focus-within .devui-input-number__control-buttons:not(.disabled){display:flex;border-color:var(--devui-form-control-line-active, #5e7ce0)}.devui-input-number .devui-input-number__input-box{box-sizing:border-box;width:100%;height:32px;line-height:var(--devui-line-height-base, 1.5);padding:4px 8px;display:block;font-size:var(--devui-font-size, 14px);outline:none;border-radius:var(--devui-border-radius, 2px);border:1px solid var(--devui-form-control-line, #d7d8da);cursor:text;-moz-appearance:textfield;transition:border-color var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-input-number .devui-input-number__input-box:not(.disabled){background-color:var(--devui-base-bg, #ffffff);border-color:var(--devui-line, #d7d8da);color:var(--devui-text, #252b3a)}.devui-input-number .devui-input-number__input-box::-webkit-inner-spin-button,.devui-input-number .devui-input-number__input-box::-webkit-outer-spin-button{-webkit-appearance:none}.devui-input-number .devui-input-number__control-buttons{box-sizing:border-box;position:absolute;right:0;width:22px;height:100%;line-height:100%;display:none;flex-direction:column;justify-content:center;align-items:center;border:1px solid transparent;border-left-color:var(--devui-line, #d7d8da);border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.devui-input-number .devui-input-number__control-buttons.disabled{border-left-color:var(--devui-disabled-line, #dfe1e6)}.devui-input-number .devui-input-number__control-buttons .control-button{user-select:none;box-sizing:border-box;height:50%;line-height:50%;border-width:0 1px;display:flex;justify-content:center;align-items:center;background-color:var(--devui-base-bg, #ffffff);transition:transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}.devui-input-number .devui-input-number__control-buttons .control-button.control-inc svg{position:relative;top:2px;transform:rotate(180deg)}.devui-input-number .devui-input-number__control-buttons .control-button.control-dec svg{position:relative;bottom:2px}.devui-input-number .devui-input-number__control-buttons .control-button svg path{fill:var(--devui-text-weak, #575d6c)}.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled){cursor:pointer}.devui-input-number .devui-input-number__control-buttons .control-button:not(.disabled):hover>svg path{fill:var(--devui-icon-fill-active-hover, #252b3a)}.devui-input-number .devui-input-number__control-buttons .control-button.disabled>svg path{fill:var(--devui-disabled-text, #adb0b8)}.devui-input-number .devui-input-number__input-wrap{height:100%}.devui-input-number .disabled{cursor:not-allowed}.devui-input-number--lg{height:40px}.devui-input-number--lg .devui-input-number__input-box{font-size:var(--devui-font-size-lg, 14px);height:100%}.devui-input-number--lg .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow{width:20px;height:20px}.devui-input-number--md{height:32px}.devui-input-number--md .devui-input-number__input-box{font-size:var(--devui-font-size, 14px);height:100%}.devui-input-number--md .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow{width:18px;height:18px}.devui-input-number--sm{height:24px}.devui-input-number--sm .devui-input-number__input-box{font-size:var(--devui-font-size-sm, 12px);height:100%}.devui-input-number--sm .devui-input-number__control-buttons .control-button .devui-input-number__icon-arrow{width:16px;height:16px}

package/layout/index.es.js

@@ -9,8 +9,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+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) : "";
@@ -95,7 +95,7 @@ var Aside = defineComponent({
     return () => {
       var _a;
       return createVNode("div", {
-        "class": ns.e("aside")
+        "class": ns.em("aside", "inner")
       }, [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
   }

package/layout/index.umd.js

@@ -1 +1 @@
-(function(d,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(d=typeof globalThis!="undefined"?globalThis:d||self,t(d.index={},d.Vue))})(this,function(d,t){"use strict";function c(a,e,o){let n=a;return e&&(n+=`__${e}`),o&&(n+=`--${o}`),n}function u(a){const e=`devui-${a}`;return{b:()=>c(e),e:r=>r?c(e,r):"",m:r=>r?c(e,"",r):"",em:(r,i)=>r&&i?c(e,r,i):""}}var N="",m=t.defineComponent({name:"DLayout",emits:[],setup(a,{slots:e}){const o=u("layout");return()=>{var r;const n=(r=e.default)==null?void 0:r.call(e),v=`${n.some(i=>i.type.name==="DAside")?o.e("aside"):""} ${o.b()}`;return t.createVNode("div",{class:v},[n])}}}),l="",f=t.defineComponent({name:"DContent",setup(a,{slots:e}){const o=u("layout");return()=>{var n;return t.createVNode("div",{class:o.e("content")},[(n=e.default)==null?void 0:n.call(e)])}}}),A="",s=t.defineComponent({name:"DHeader",setup(a,{slots:e}){const o=u("layout");return()=>{var n;return t.createVNode("div",{class:o.e("header")},[(n=e.default)==null?void 0:n.call(e)])}}}),V="",p=t.defineComponent({name:"DFooter",setup(a,{slots:e}){const o=u("layout");return()=>{var n;return t.createVNode("div",{class:o.e("footer")},[(n=e.default)==null?void 0:n.call(e)])}}}),y=t.defineComponent({name:"DAside",setup(a,{slots:e}){const o=u("layout");return()=>{var n;return t.createVNode("div",{class:o.e("aside")},[(n=e.default)==null?void 0:n.call(e)])}}}),C={title:"Layout \u5E03\u5C40",category:"\u5E03\u5C40",status:"100%",install(a){a.component(m.name,m),a.component(f.name,f),a.component(s.name,s),a.component(p.name,p),a.component(y.name,y)}};d.Aside=y,d.Content=f,d.Footer=p,d.Header=s,d.Layout=m,d.default=C,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});
+(function(d,o){typeof exports=="object"&&typeof module!="undefined"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(d=typeof globalThis!="undefined"?globalThis:d||self,o(d.index={},d.Vue))})(this,function(d,o){"use strict";function c(a,e,t){let n=a;return e&&(n+=`__${e}`),t&&(n+=`--${t}`),n}function u(a,e=!1){const t=e?`.devui-${a}`:`devui-${a}`;return{b:()=>c(t),e:r=>r?c(t,r):"",m:r=>r?c(t,"",r):"",em:(r,C)=>r&&C?c(t,r,C):""}}var l="",i=o.defineComponent({name:"DLayout",emits:[],setup(a,{slots:e}){const t=u("layout");return()=>{var y;const n=(y=e.default)==null?void 0:y.call(e),v=`${n.some(r=>r.type.name==="DAside")?t.e("aside"):""} ${t.b()}`;return o.createVNode("div",{class:v},[n])}}}),A="",m=o.defineComponent({name:"DContent",setup(a,{slots:e}){const t=u("layout");return()=>{var n;return o.createVNode("div",{class:t.e("content")},[(n=e.default)==null?void 0:n.call(e)])}}}),V="",f=o.defineComponent({name:"DHeader",setup(a,{slots:e}){const t=u("layout");return()=>{var n;return o.createVNode("div",{class:t.e("header")},[(n=e.default)==null?void 0:n.call(e)])}}}),$="",s=o.defineComponent({name:"DFooter",setup(a,{slots:e}){const t=u("layout");return()=>{var n;return o.createVNode("div",{class:t.e("footer")},[(n=e.default)==null?void 0:n.call(e)])}}}),p=o.defineComponent({name:"DAside",setup(a,{slots:e}){const t=u("layout");return()=>{var n;return o.createVNode("div",{class:t.em("aside","inner")},[(n=e.default)==null?void 0:n.call(e)])}}}),D={title:"Layout \u5E03\u5C40",category:"\u5E03\u5C40",status:"100%",install(a){a.component(i.name,i),a.component(m.name,m),a.component(f.name,f),a.component(s.name,s),a.component(p.name,p)}};d.Aside=p,d.Content=m,d.Footer=s,d.Header=f,d.Layout=i,d.default=D,Object.defineProperty(d,"__esModule",{value:!0}),d[Symbol.toStringTag]="Module"});