@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Input.js

@@ -1,58 +1,440 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as e, reactive as t, computed as l, watch as n, onMounted as a, resolveComponent as r, openBlock as o, createElementBlock as u, normalizeClass as i, createVNode as c, createCommentVNode as s, normalizeStyle as d, createElementVNode as g, toDisplayString as p, withDirectives as f, createBlock as m, vShow as y, renderSlot as h, createTextVNode as b } from "vue";
-import { c as v } from "./component.js";
-import { _ as x } from "./plugin-vue_export-helper.js";
+import { ref, reactive, computed, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, Fragment, normalizeStyle, createElementVNode, toDisplayString, createCommentVNode, renderSlot, createVNode, withDirectives, createBlock, vShow, createTextVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-function k(e2, t2, l2) {
-  const n2 = e2.indexOf(t2);
-  return n2 === -1 ? e2 : t2 === "-" && n2 !== 0 ? e2.slice(0, n2) : e2.slice(0, n2 + 1) + e2.slice(n2).replace(l2, "");
+function trimExtraChar(value, char, regExp) {
+  const index2 = value.indexOf(char);
+  if (index2 === -1) {
+    return value;
+  }
+  if (char === "-" && index2 !== 0) {
+    return value.slice(0, index2);
+  }
+  return value.slice(0, index2 + 1) + value.slice(index2).replace(regExp, "");
 }
-function I(e2, t2 = true, l2 = true) {
-  e2 = t2 ? k(e2, ".", /\./g) : e2.split(".")[0];
-  const n2 = t2 ? /[^-0-9.]/g : /[^-0-9]/g;
-  return (e2 = l2 ? k(e2, "-", /-/g) : e2.replace(/-/, "")).replace(n2, "");
+function formatNumber(value, allowDot = true, allowMinus = true) {
+  if (allowDot) {
+    value = trimExtraChar(value, ".", /\./g);
+  } else {
+    value = value.split(".")[0];
+  }
+  if (allowMinus) {
+    value = trimExtraChar(value, "-", /-/g);
+  } else {
+    value = value.replace(/-/, "");
+  }
+  const regExp = allowDot ? /[^-0-9.]/g : /[^-0-9]/g;
+  return value.replace(regExp, "");
 }
-const { componentName: S, create: B, translate: C } = v("input"), w = B({ props: { ref: { type: String, default: "" }, type: { type: String, default: "text" }, modelValue: { type: [String, Number], default: "" }, placeholder: { type: String, default: "" }, label: { type: String, default: "" }, 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 }, disabled: { type: Boolean, default: false }, readonly: { type: Boolean, default: false }, error: { type: Boolean, default: false }, maxLength: { type: [String, Number], default: "" }, leftIcon: { type: String, default: "" }, leftIconSize: { type: [String, Number], default: "" }, 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 }, 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: false }, autofocus: { type: Boolean, default: false } }, emits: ["update:modelValue", "change", "blur", "focus", "clear", "keypress", "click-input", "click-left-icon", "click-right-icon"], setup(r2, { emit: o2, slots: u2 }) {
-  const i2 = e(false), c2 = e(), s2 = e(), d2 = () => {
-    var _a;
-    return String((_a = r2.modelValue) != null ? _a : "");
-  }, g2 = t({ focused: false, validateFailed: false, validateMessage: "" }), p2 = l(() => {
-    const e2 = S;
-    return { [e2]: true, center: r2.center, [`${e2}-disabled`]: r2.disabled, [`${e2}-required`]: r2.required, [`${e2}-error`]: r2.error, [`${e2}-border`]: r2.border };
-  }), f2 = l(() => ({ textAlign: r2.inputAlign })), m2 = l(() => ({ textAlign: r2.inputAlign, height: 24 * Number(r2.rows) + "px" }));
-  l(() => s2.value && u2.input ? s2.value() : r2.modelValue);
-  const y2 = (e2, t2 = "onChange") => {
-    var _a;
-    r2.type === "digit" && (e2 = I(e2, false, false)), r2.type === "number" && (e2 = I(e2, true, true)), r2.formatter && t2 === r2.formatTrigger && (e2 = r2.formatter(e2)), ((_a = c2 == null ? void 0 : c2.value) == null ? void 0 : _a.value) !== e2 && (c2.value.value = e2), e2 !== r2.modelValue && (o2("update:modelValue", e2), o2("change", e2));
-  };
-  return n(() => r2.modelValue, () => {
-    y2(d2()), g2.validateFailed && (g2.validateFailed = false, g2.validateMessage = "");
-  }), a(() => {
-    y2(d2(), r2.formatTrigger);
-  }), { inputRef: c2, active: i2, classes: p2, styles: f2, stylesTextarea: m2, inputType: (e2) => e2 === "number" ? "text" : e2 === "digit" ? "tel" : e2, onInput: (e2) => {
-    let t2 = e2.target.value;
-    r2.maxLength && t2.length > Number(r2.maxLength) && (t2 = t2.slice(0, Number(r2.maxLength))), y2(t2);
-  }, onFocus: (e2) => {
-    let t2 = e2.target.value;
-    i2.value = true, o2("focus", t2, e2);
-  }, onBlur: (e2) => {
-    setTimeout(() => {
-      i2.value = false;
-    }, 200);
-    let t2 = e2.target.value;
-    r2.maxLength && t2.length > Number(r2.maxLength) && (t2 = t2.slice(0, Number(r2.maxLength))), y2(d2(), "onBlur"), o2("blur", t2, e2);
-  }, clear: (e2) => {
-    o2("update:modelValue", "", e2), o2("change", "", e2), o2("clear", "", e2);
-  }, onClickInput: (e2) => {
-    o2("click-input", e2);
-  }, onClickLeftIcon: (e2) => o2("click-left-icon", e2), onClickRightIcon: (e2) => o2("click-right-icon", e2), translate: C };
-} }), L = { class: "label-string" }, T = { class: "nut-input-value" }, N = ["maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"], V = ["type", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"], z = { key: 0, class: "nut-input-word-limit" }, A = { class: "nut-input-word-num" };
-var F = x(w, [["render", function(e2, t2, l2, n2, a2, v2) {
-  const x2 = r("nut-icon");
-  return o(), u("view", { class: i(e2.classes) }, [e2.leftIcon && e2.leftIcon.length > 0 ? (o(), u("view", { key: 0, class: "nut-input-left-icon", onClick: t2[0] || (t2[0] = (...t3) => e2.onClickLeftIcon && e2.onClickLeftIcon(...t3)) }, [c(x2, { name: e2.leftIcon, size: e2.leftIconSize }, null, 8, ["name", "size"])])) : s("", true), e2.label ? (o(), u("view", { key: 1, class: i(["nut-input-label", e2.labelClass]), style: d({ width: `${e2.labelWidth}px`, textAlign: e2.labelAlign }) }, [g("view", L, p(e2.label) + " " + p(e2.colon ? ":" : ""), 1)], 6)) : s("", true), g("view", T, [g("view", { class: "nut-input-inner", onClick: t2[8] || (t2[8] = (...t3) => e2.onClickInput && e2.onClickInput(...t3)) }, [e2.type == "textarea" ? (o(), u("textarea", { key: 0, class: "input-text", ref: "inputRef", style: d(e2.stylesTextarea), maxlength: e2.maxLength, placeholder: e2.placeholder || e2.translate("placeholder"), disabled: e2.disabled, readonly: e2.readonly, value: e2.modelValue, formatTrigger: e2.formatTrigger, autofocus: e2.autofocus, onInput: t2[1] || (t2[1] = (...t3) => e2.onInput && e2.onInput(...t3)), onFocus: t2[2] || (t2[2] = (...t3) => e2.onFocus && e2.onFocus(...t3)), onBlur: t2[3] || (t2[3] = (...t3) => e2.onBlur && e2.onBlur(...t3)) }, null, 44, N)) : (o(), u("input", { key: 1, class: "input-text", ref: "inputRef", style: d(e2.styles), type: e2.inputType(e2.type), maxlength: e2.maxLength, placeholder: e2.placeholder || e2.translate("placeholder"), disabled: e2.disabled, readonly: e2.readonly, value: e2.modelValue, formatTrigger: e2.formatTrigger, autofocus: e2.autofocus, onInput: t2[4] || (t2[4] = (...t3) => e2.onInput && e2.onInput(...t3)), onFocus: t2[5] || (t2[5] = (...t3) => e2.onFocus && e2.onFocus(...t3)), onBlur: t2[6] || (t2[6] = (...t3) => e2.onBlur && e2.onBlur(...t3)) }, null, 44, V)), e2.clearable && !e2.readonly ? f((o(), m(x2, { key: 2, class: "nut-input-clear", name: e2.clearIcon, size: e2.clearSize, onClick: e2.clear }, null, 8, ["name", "size", "onClick"])), [[y, e2.active && e2.modelValue.length > 0]]) : s("", true), e2.rightIcon && e2.rightIcon.length > 0 ? (o(), u("view", { key: 3, class: "nut-input-right-icon", onClick: t2[7] || (t2[7] = (...t3) => e2.onClickRightIcon && e2.onClickRightIcon(...t3)) }, [c(x2, { name: e2.rightIcon, size: e2.rightIconSize }, null, 8, ["name", "size"])])) : s("", true), e2.$slots.button ? h(e2.$slots, "button", { key: 4, class: "nut-input-button" }) : s("", true)]), e2.showWordLimit && e2.maxLength ? (o(), u("view", z, [g("span", A, p(e2.modelValue ? e2.modelValue.length : 0), 1), b("/" + p(e2.maxLength), 1)])) : s("", true), e2.errorMessage ? (o(), u("view", { key: 1, class: "nut-input-error-message", style: d({ textAlign: e2.errorMessageAlign }) }, p(e2.errorMessage), 5)) : s("", true)])], 2);
-}]]);
-export { F as default };
+const { componentName, create, translate } = createComponent("input");
+const _sfc_main = create({
+  props: {
+    ref: {
+      type: String,
+      default: ""
+    },
+    type: {
+      type: String,
+      default: "text"
+    },
+    modelValue: {
+      type: [String, Number],
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    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
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    error: {
+      type: Boolean,
+      default: false
+    },
+    maxLength: {
+      type: [String, Number],
+      default: "9999"
+    },
+    leftIcon: {
+      type: String,
+      default: ""
+    },
+    leftIconSize: {
+      type: [String, Number],
+      default: ""
+    },
+    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
+    },
+    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: false
+    },
+    autofocus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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();
+    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}-required`]: props.required,
+        [`${prefixCls}-error`]: props.error,
+        [`${prefixCls}-border`]: props.border
+      };
+    });
+    const styles = computed(() => {
+      return {
+        textAlign: props.inputAlign
+      };
+    });
+    const stylesTextarea = computed(() => {
+      return {
+        textAlign: props.inputAlign,
+        height: Number(props.rows) * 24 + "px"
+      };
+    });
+    const inputType = (type) => {
+      if (type === "number") {
+        return "text";
+      } else if (type === "digit") {
+        return "tel";
+      } else {
+        return type;
+      }
+    };
+    const onInput = (event) => {
+      const input = event.target;
+      let value = input.value;
+      if (props.maxLength && value.length > Number(props.maxLength)) {
+        value = value.slice(0, Number(props.maxLength));
+      }
+      updateValue(value);
+    };
+    const updateValue = (value, trigger = "onChange") => {
+      var _a;
+      if (props.type === "digit") {
+        value = formatNumber(value, false, false);
+      }
+      if (props.type === "number") {
+        value = formatNumber(value, true, true);
+      }
+      if (props.formatter && trigger === props.formatTrigger) {
+        value = props.formatter(value);
+      }
+      if (((_a = inputRef == null ? void 0 : inputRef.value) == null ? void 0 : _a.value) !== value) {
+        inputRef.value.value = value;
+      }
+      if (value !== props.modelValue) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    const onFocus = (event) => {
+      const input = event.target;
+      let value = input.value;
+      active.value = true;
+      emit("focus", value, 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));
+      }
+      updateValue(getModelValue(), "onBlur");
+      emit("blur", value, event);
+    };
+    const clear = (event) => {
+      emit("update:modelValue", "", event);
+      emit("change", "", event);
+      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,
+      stylesTextarea,
+      inputType,
+      onInput,
+      onFocus,
+      onBlur,
+      clear,
+      onClickInput,
+      onClickLeftIcon,
+      onClickRightIcon,
+      translate
+    };
+  }
+});
+const _hoisted_1 = { class: "label-string" };
+const _hoisted_2 = { class: "nut-input-value" };
+const _hoisted_3 = { class: "label-string" };
+const _hoisted_4 = { class: "nut-input-value" };
+const _hoisted_5 = ["maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"];
+const _hoisted_6 = ["type", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus"];
+const _hoisted_7 = {
+  key: 0,
+  class: "nut-input-word-limit"
+};
+const _hoisted_8 = { 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.$slots.input ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      _ctx.label ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: normalizeClass(["nut-input-label", _ctx.labelClass]),
+        style: normalizeStyle({
+          width: `${_ctx.labelWidth}px`,
+          textAlign: _ctx.labelAlign
+        })
+      }, [
+        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[0] || (_cache[0] = (...args) => _ctx.onClickInput && _ctx.onClickInput(...args))
+        }, [
+          renderSlot(_ctx.$slots, "input")
+        ])
+      ])
+    ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+      _ctx.leftIcon && _ctx.leftIcon.length > 0 ? (openBlock(), createElementBlock("view", {
+        key: 0,
+        class: "nut-input-left-icon",
+        onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClickLeftIcon && _ctx.onClickLeftIcon(...args))
+      }, [
+        createVNode(_component_nut_icon, {
+          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
+        })
+      }, [
+        createElementVNode("view", _hoisted_3, toDisplayString(_ctx.label) + " " + toDisplayString(_ctx.colon ? ":" : ""), 1)
+      ], 6)) : createCommentVNode("", true),
+      createElementVNode("view", _hoisted_4, [
+        createElementVNode("view", {
+          class: "nut-input-inner",
+          onClick: _cache[9] || (_cache[9] = (...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 || _ctx.translate("placeholder"),
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            value: _ctx.modelValue,
+            formatTrigger: _ctx.formatTrigger,
+            autofocus: _ctx.autofocus,
+            onInput: _cache[2] || (_cache[2] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+            onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+            onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+          }, null, 44, _hoisted_5)) : (openBlock(), createElementBlock("input", {
+            key: 1,
+            class: "input-text",
+            ref: "inputRef",
+            style: normalizeStyle(_ctx.styles),
+            type: _ctx.inputType(_ctx.type),
+            maxlength: _ctx.maxLength,
+            placeholder: _ctx.placeholder || _ctx.translate("placeholder"),
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            value: _ctx.modelValue,
+            formatTrigger: _ctx.formatTrigger,
+            autofocus: _ctx.autofocus,
+            onInput: _cache[5] || (_cache[5] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
+            onFocus: _cache[6] || (_cache[6] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
+            onBlur: _cache[7] || (_cache[7] = (...args) => _ctx.onBlur && _ctx.onBlur(...args))
+          }, null, 44, _hoisted_6)),
+          _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[8] || (_cache[8] = (...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.maxLength ? (openBlock(), createElementBlock("view", _hoisted_7, [
+          createElementVNode("span", _hoisted_8, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
+          createTextVNode("/" + toDisplayString(_ctx.maxLength), 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)
+      ])
+    ], 64))
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };