@nutui/nutui 3.1.18-beta.0 → 3.1.19-beta.1

package/dist/packages/_es/Input.js

@@ -1,26 +1,26 @@
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, createCommentVNode, normalizeStyle, withDirectives, createVNode, vShow } from "vue";
+import { ref, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createVNode, createCommentVNode, normalizeStyle, createElementVNode, toDisplayString, withDirectives, createBlock, vShow, renderSlot, createTextVNode } from "vue";
 import { c as createComponent } from "./component.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 function trimExtraChar(value, char, regExp) {
-  const index2 = value.indexOf(char);
-  if (index2 === -1) {
+  const index = value.indexOf(char);
+  if (index === -1) {
     return value;
   }
-  if (char === "-" && index2 !== 0) {
-    return value.slice(0, index2);
+  if (char === "-" && index !== 0) {
+    return value.slice(0, index);
   }
-  return value.slice(0, index2 + 1) + value.slice(index2).replace(regExp, "");
+  return value.slice(0, index + 1) + value.slice(index).replace(regExp, "");
 }
 function formatNumber(value, allowDot = true, allowMinus = true) {
   if (allowDot) {
     value = trimExtraChar(value, ".", /\./g);
   } else {
-    value = value.replace(/\./g, "");
+    value = value.split(".")[0];
   }
   if (allowMinus) {
     value = trimExtraChar(value, "-", /-/g);
@@ -33,6 +33,10 @@ function formatNumber(value, allowDot = true, allowMinus = true) {
 const { componentName, create } = createComponent("input");
 const _sfc_main = create({
   props: {
+    ref: {
+      type: String,
+      default: ""
+    },
     type: {
       type: String,
       default: "text"
@@ -49,7 +53,31 @@ const _sfc_main = create({
       type: String,
       default: ""
     },
-    requireShow: {
+    labelClass: {
+      type: String,
+      default: ""
+    },
+    labelWidth: {
+      type: [String, Number],
+      default: "80"
+    },
+    labelAlign: {
+      type: String,
+      default: "left"
+    },
+    colon: {
+      type: Boolean,
+      default: false
+    },
+    inputAlign: {
+      type: String,
+      default: "left"
+    },
+    center: {
+      type: Boolean,
+      default: false
+    },
+    required: {
       type: Boolean,
       default: false
     },
@@ -61,133 +89,329 @@ const _sfc_main = create({
       type: Boolean,
       default: false
     },
-    textAlign: {
+    error: {
+      type: Boolean,
+      default: false
+    },
+    maxNum: {
+      type: [String, Number],
+      default: ""
+    },
+    leftIcon: {
       type: String,
-      default: "left"
+      default: ""
+    },
+    leftIconSize: {
+      type: [String, Number],
+      default: ""
     },
-    maxLength: {
+    rightIcon: {
+      type: String,
+      default: ""
+    },
+    rightIconSize: {
       type: [String, Number],
       default: ""
     },
     clearable: {
+      type: Boolean,
+      default: false
+    },
+    clearIcon: {
+      type: String,
+      default: "mask-close"
+    },
+    clearSize: {
+      type: [String, Number],
+      default: "14"
+    },
+    border: {
       type: Boolean,
       default: true
     },
-    hasBorder: {
+    formatTrigger: {
+      type: String,
+      default: "onChange"
+    },
+    formatter: {
+      type: Function,
+      default: null
+    },
+    rules: {
+      type: Array,
+      default: []
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    errorMessageAlign: {
+      type: String,
+      default: ""
+    },
+    rows: {
+      type: [String, Number],
+      default: null
+    },
+    showWordLimit: {
       type: Boolean,
       default: true
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
     }
   },
-  emits: ["change", "update:modelValue", "blur", "focus", "clear"],
-  setup(props, { emit }) {
+  emits: [
+    "update:modelValue",
+    "change",
+    "blur",
+    "focus",
+    "clear",
+    "keypress",
+    "click-input",
+    "click-left-icon",
+    "click-right-icon"
+  ],
+  setup(props, { emit, slots }) {
     const active = ref(false);
+    const inputRef = ref();
+    const customValue = ref();
+    const getModelValue = () => {
+      var _a;
+      return String((_a = props.modelValue) != null ? _a : "");
+    };
+    const state = reactive({
+      focused: false,
+      validateFailed: false,
+      validateMessage: ""
+    });
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
+        center: props.center,
         [`${prefixCls}-disabled`]: props.disabled,
-        [`${prefixCls}-require`]: props.requireShow,
-        [`${prefixCls}-border`]: props.hasBorder
+        [`${prefixCls}-required`]: props.required,
+        [`${prefixCls}-error`]: props.error,
+        [`${prefixCls}-border`]: props.border
       };
     });
-    const inputmode = computed(() => {
-      return props.type === "digit" ? "decimal" : props.type === "number" ? "numeric" : "text";
-    });
     const styles = computed(() => {
       return {
-        textAlign: props.textAlign
+        textAlign: props.inputAlign
+      };
+    });
+    const stylesTextarea = computed(() => {
+      return {
+        textAlign: props.inputAlign,
+        height: Number(props.rows) * 24 + "px"
       };
     });
-    const valueChange = (event) => {
+    const inputType = (type) => {
+      if (type === "number") {
+        return "text";
+      } else if (type === "digit") {
+        return "tel";
+      } else {
+        return type;
+      }
+    };
+    computed(() => {
+      if (customValue.value && slots.input) {
+        return customValue.value();
+      }
+      return props.modelValue;
+    });
+    const onInput = (event) => {
       const input = event.target;
-      let val = input.value;
+      let value = input.value;
+      updateValue(value);
+    };
+    const updateValue = (value, trigger = "onChange") => {
       if (props.type === "digit") {
-        val = formatNumber(val, true);
+        value = formatNumber(value, false, false);
       }
       if (props.type === "number") {
-        val = formatNumber(val, false);
+        value = formatNumber(value, true, true);
+      }
+      if (props.formatter && trigger === props.formatTrigger) {
+        value = props.formatter(value);
+      }
+      if (inputRef.value && inputRef.value.value !== value) {
+        inputRef.value.value = value;
       }
-      if (props.maxLength && val.length > Number(props.maxLength)) {
-        val = val.slice(0, Number(props.maxLength));
+      if (value !== props.modelValue) {
+        emit("update:modelValue", value);
+        emit("change", value);
       }
-      emit("update:modelValue", val, event);
-      emit("change", val, event);
     };
-    const valueFocus = (event) => {
+    const onFocus = (event) => {
       const input = event.target;
       let value = input.value;
       active.value = true;
       emit("focus", value, event);
     };
-    const valueBlur = (event) => {
+    const onBlur = (event) => {
       setTimeout(() => {
         active.value = false;
       }, 200);
       const input = event.target;
       let value = input.value;
-      if (props.maxLength && value.length > Number(props.maxLength)) {
-        value = value.slice(0, Number(props.maxLength));
+      if (props.maxNum && value.length > Number(props.maxNum)) {
+        value = value.slice(0, Number(props.maxNum));
       }
+      updateValue(getModelValue(), "onBlur");
       emit("blur", value, event);
     };
-    const handleClear = (event) => {
+    const clear = (event) => {
       emit("update:modelValue", "", event);
       emit("change", "", event);
-      emit("clear", "");
+      emit("clear", "", event);
     };
+    const resetValidation = () => {
+      if (state.validateFailed) {
+        state.validateFailed = false;
+        state.validateMessage = "";
+      }
+    };
+    const onClickInput = (event) => {
+      emit("click-input", event);
+    };
+    const onClickLeftIcon = (event) => emit("click-left-icon", event);
+    const onClickRightIcon = (event) => emit("click-right-icon", event);
+    watch(() => props.modelValue, () => {
+      updateValue(getModelValue());
+      resetValidation();
+    });
+    onMounted(() => {
+      updateValue(getModelValue(), props.formatTrigger);
+    });
     return {
+      inputRef,
       active,
       classes,
       styles,
-      inputmode,
-      valueChange,
-      valueFocus,
-      valueBlur,
-      handleClear
+      stylesTextarea,
+      inputType,
+      onInput,
+      onFocus,
+      onBlur,
+      clear,
+      onClickInput,
+      onClickLeftIcon,
+      onClickRightIcon
     };
   }
 });
-const _hoisted_1 = {
+const _hoisted_1 = { class: "label-string" };
+const _hoisted_2 = { class: "nut-input-value" };
+const _hoisted_3 = ["maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"];
+const _hoisted_4 = ["type", "maxNum", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"];
+const _hoisted_5 = {
   key: 0,
-  class: "nut-input-label"
+  class: "nut-input-word-limit"
 };
-const _hoisted_2 = { class: "label-string" };
-const _hoisted_3 = ["type", "maxlength", "placeholder", "disabled", "readonly", "value", "inputmode"];
+const _hoisted_6 = { class: "nut-input-word-num" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
     class: normalizeClass(_ctx.classes)
   }, [
-    _ctx.label ? (openBlock(), createElementBlock("view", _hoisted_1, [
-      createElementVNode("view", _hoisted_2, toDisplayString(_ctx.label), 1)
-    ])) : createCommentVNode("", true),
-    createElementVNode("input", {
-      class: "input-text",
-      style: normalizeStyle(_ctx.styles),
-      type: _ctx.type,
-      maxlength: _ctx.maxLength,
-      placeholder: _ctx.placeholder,
-      disabled: _ctx.disabled,
-      readonly: _ctx.readonly,
-      value: _ctx.modelValue,
-      inputmode: _ctx.inputmode,
-      onInput: _cache[0] || (_cache[0] = (...args) => _ctx.valueChange && _ctx.valueChange(...args)),
-      onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.valueFocus && _ctx.valueFocus(...args)),
-      onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.valueBlur && _ctx.valueBlur(...args))
-    }, null, 44, _hoisted_3),
-    _ctx.clearable && !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("view", {
-      key: 1,
-      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClear && _ctx.handleClear(...args)),
-      class: "nut-textinput-clear"
+    _ctx.leftIcon && _ctx.leftIcon.length > 0 ? (openBlock(), createElementBlock("view", {
+      key: 0,
+      class: "nut-input-left-icon",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClickLeftIcon && _ctx.onClickLeftIcon(...args))
     }, [
       createVNode(_component_nut_icon, {
-        name: "close-little",
-        size: "12px"
+        name: _ctx.leftIcon,
+        size: _ctx.leftIconSize
+      }, null, 8, ["name", "size"])
+    ])) : createCommentVNode("", true),
+    _ctx.label ? (openBlock(), createElementBlock("view", {
+      key: 1,
+      class: normalizeClass(["nut-input-label", _ctx.labelClass]),
+      style: normalizeStyle({
+        width: `${_ctx.labelWidth}px`,
+        textAlign: _ctx.labelAlign
       })
-    ], 512)), [
-      [vShow, _ctx.active && _ctx.modelValue.length > 0]
-    ]) : createCommentVNode("", true)
+    }, [
+      createElementVNode("view", _hoisted_1, toDisplayString(_ctx.label) + " " + toDisplayString(_ctx.colon ? ":" : ""), 1)
+    ], 6)) : createCommentVNode("", true),
+    createElementVNode("view", _hoisted_2, [
+      createElementVNode("view", {
+        class: "nut-input-inner",
+        onClick: _cache[8] || (_cache[8] = (...args) => _ctx.onClickInput && _ctx.onClickInput(...args))
+      }, [
+        _ctx.type == "textarea" ? (openBlock(), createElementBlock("textarea", {
+          key: 0,
+          class: "input-text",
+          ref: "inputRef",
+          style: normalizeStyle(_ctx.stylesTextarea),
+          maxlength: _ctx.maxLength,
+          placeholder: _ctx.placeholder,
+          disabled: _ctx.disabled,
+          readonly: _ctx.readonly,
+          value: _ctx.modelValue,
+          formatTrigger: _ctx.formatTrigger,
+          autofocus: _ctx.autofocus,
+          onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+          onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+          onBlur: _cache[3] || (_cache[3] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+        }, null, 44, _hoisted_3)) : (openBlock(), createElementBlock("input", {
+          key: 1,
+          class: "input-text",
+          ref: "inputRef",
+          style: normalizeStyle(_ctx.styles),
+          type: _ctx.inputType(_ctx.type),
+          maxNum: _ctx.maxNum,
+          placeholder: _ctx.placeholder,
+          disabled: _ctx.disabled,
+          readonly: _ctx.readonly,
+          value: _ctx.modelValue,
+          formatTrigger: _ctx.formatTrigger,
+          autofocus: _ctx.autofocus,
+          onInput: _cache[4] || (_cache[4] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+          onFocus: _cache[5] || (_cache[5] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+          onBlur: _cache[6] || (_cache[6] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+        }, null, 44, _hoisted_4)),
+        _ctx.clearable && !_ctx.readonly ? withDirectives((openBlock(), createBlock(_component_nut_icon, {
+          key: 2,
+          class: "nut-input-clear",
+          name: _ctx.clearIcon,
+          size: _ctx.clearSize,
+          onClick: _ctx.clear
+        }, null, 8, ["name", "size", "onClick"])), [
+          [vShow, _ctx.active && _ctx.modelValue.length > 0]
+        ]) : createCommentVNode("", true),
+        _ctx.rightIcon && _ctx.rightIcon.length > 0 ? (openBlock(), createElementBlock("view", {
+          key: 3,
+          class: "nut-input-right-icon",
+          onClick: _cache[7] || (_cache[7] = (...args) => _ctx.onClickRightIcon && _ctx.onClickRightIcon(...args))
+        }, [
+          createVNode(_component_nut_icon, {
+            name: _ctx.rightIcon,
+            size: _ctx.rightIconSize
+          }, null, 8, ["name", "size"])
+        ])) : createCommentVNode("", true),
+        _ctx.$slots.button ? renderSlot(_ctx.$slots, "button", {
+          key: 4,
+          class: "nut-input-button"
+        }) : createCommentVNode("", true)
+      ]),
+      _ctx.showWordLimit && _ctx.maxNum ? (openBlock(), createElementBlock("view", _hoisted_5, [
+        createElementVNode("span", _hoisted_6, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
+        createTextVNode("/" + toDisplayString(_ctx.maxNum), 1)
+      ])) : createCommentVNode("", true),
+      _ctx.errorMessage ? (openBlock(), createElementBlock("view", {
+        key: 1,
+        class: "nut-input-error-message",
+        style: normalizeStyle({
+          textAlign: _ctx.errorMessageAlign
+        })
+      }, toDisplayString(_ctx.errorMessage), 5)) : createCommentVNode("", true)
+    ])
   ], 2);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };

package/dist/packages/_es/InputNumber.js

@@ -1,9 +1,9 @@
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, createElementVNode } from "vue";
+import { computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createVNode, toDisplayString } from "vue";
 import { c as createComponent } from "./component.js";
 import { p as pxCheck } from "./pxCheck.js";
 import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
@@ -61,7 +61,7 @@ const _sfc_main = create({
     };
     const change = (event) => {
       const input = event.target;
-      emit("update:modelValue", input.valueAsNumber, event);
+      emit("update:modelValue", input.value, event);
     };
     const emitChange = (value, event) => {
       let output_value = fixedDecimalPlaces(value);
@@ -92,20 +92,13 @@ const _sfc_main = create({
         emit("overlimit", event, "add");
       }
     };
-    const focus = (event) => {
-      if (props.disabled)
-        return;
-      if (props.readonly)
-        return;
-      emit("focus", event);
-    };
     const blur = (event) => {
       if (props.disabled)
         return;
       if (props.readonly)
         return;
       const input = event.target;
-      let value = input.valueAsNumber;
+      let value = +input.value;
       if (value < Number(props.min)) {
         value = Number(props.min);
       } else if (value > Number(props.max)) {
@@ -114,6 +107,15 @@ const _sfc_main = create({
       emitChange(value, event);
       emit("blur", event);
     };
+    const focus = (event) => {
+      if (props.disabled)
+        return;
+      if (props.readonly) {
+        blur(event);
+        return;
+      }
+      emit("focus", event);
+    };
     return {
       classes,
       change,
@@ -127,7 +129,11 @@ const _sfc_main = create({
     };
   }
 });
-const _hoisted_1 = ["min", "max", "disabled", "readonly", "value"];
+const _hoisted_1 = {
+  key: 0,
+  class: "nut-inputnumber__text--readonly"
+};
+const _hoisted_2 = ["min", "max", "disabled", "readonly", "value"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_nut_icon = resolveComponent("nut-icon");
   return openBlock(), createElementBlock("view", {
@@ -140,7 +146,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       size: _ctx.buttonSize,
       onClick: _ctx.reduce
     }, null, 8, ["class", "size", "onClick"]),
-    createElementVNode("input", {
+    _ctx.readonly ? (openBlock(), createElementBlock("view", _hoisted_1, toDisplayString(_ctx.modelValue), 1)) : (openBlock(), createElementBlock("input", {
+      key: 1,
       type: "number",
       min: _ctx.min,
       max: _ctx.max,
@@ -151,7 +158,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       onInput: _cache[0] || (_cache[0] = (...args) => _ctx.change && _ctx.change(...args)),
       onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.blur && _ctx.blur(...args)),
       onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.focus && _ctx.focus(...args))
-    }, null, 44, _hoisted_1),
+    }, null, 44, _hoisted_2)),
     createVNode(_component_nut_icon, {
       name: "plus",
       class: normalizeClass(["nut-inputnumber__icon", { "nut-inputnumber__icon--disabled": !_ctx.addAllow() }]),
@@ -160,5 +167,5 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }, null, 8, ["class", "size", "onClick"])
   ], 6);
 }
-var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export { index as default };
+var index_taro = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index_taro as default };

package/dist/packages/_es/Layout.js

@@ -1,6 +1,6 @@
 /*!
-* @nutui/nutui v3.1.18-beta.0 Tue Mar 08 2022 10:41:31 GMT+0800 (中国标准时间)
-* (c) 2021 @jdf2e.
+* @nutui/nutui v3.1.19-beta.1 Sat Apr 02 2022 16:26:37 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
 import { c as createComponent } from "./component.js";