@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Input.js

@@ -1,29 +1,50 @@
-var D = Object.defineProperty;
-var b = Object.getOwnPropertySymbols;
-var P = Object.prototype.hasOwnProperty, W = Object.prototype.propertyIsEnumerable;
-var C = (e, n, o) => n in e ? D(e, n, { enumerable: !0, configurable: !0, writable: !0, value: o }) : e[n] = o, k = (e, n) => {
-  for (var o in n || (n = {}))
-    P.call(n, o) && C(e, o, n[o]);
-  if (b)
-    for (var o of b(n))
-      W.call(n, o) && C(e, o, n[o]);
-  return e;
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
 };
-import { ref as w, reactive as O, computed as S, watch as j, onMounted as G, h as H, resolveComponent as J, openBlock as f, createElementBlock as g, normalizeClass as K, createElementVNode as s, renderSlot as p, createBlock as Q, resolveDynamicComponent as R, normalizeStyle as U, toDisplayString as V, createTextVNode as X, createCommentVNode as B, withDirectives as Y, createVNode as Z, mergeProps as x, vShow as _ } from "vue";
-import { c as ee } from "./component-234624bc.js";
-import { MaskClose as te } from "@nutui/icons-vue";
-import { _ as ne } from "./_plugin-vue_export-helper-dad06003.js";
+import { ref, reactive, computed, watch, onMounted, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createBlock, resolveDynamicComponent, normalizeStyle, toDisplayString, createTextVNode, createCommentVNode, withDirectives, createVNode, mergeProps, vShow } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { MaskClose } from "@nutui/icons-vue";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-function v(e, n, o) {
-  const l = e.indexOf(n);
-  return l === -1 ? e : n === "-" && l !== 0 ? e.slice(0, l) : e.slice(0, l + 1) + e.slice(l).replace(o, "");
+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 L(e, n = !0, o = !0) {
-  n ? e = v(e, ".", /\./g) : e = e.split(".")[0], o ? e = v(e, "-", /-/g) : e = e.replace(/-/, "");
-  const l = n ? /[^-0-9.]/g : /[^-0-9]/g;
-  return e.replace(l, "");
+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: oe, create: le } = ee("input"), ae = le({
+const { componentName, create } = createComponent("input");
+const _sfc_main = create({
   props: {
     type: {
       type: String,
@@ -43,15 +64,15 @@ const { componentName: oe, create: le } = ee("input"), ae = le({
     },
     required: {
       type: Boolean,
-      default: !1
+      default: false
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     readonly: {
       type: Boolean,
-      default: !1
+      default: false
     },
     maxLength: {
       type: [String, Number],
@@ -59,7 +80,7 @@ const { componentName: oe, create: le } = ee("input"), ae = le({
     },
     clearable: {
       type: Boolean,
-      default: !1
+      default: false
     },
     clearSize: {
       type: [String, Number],
@@ -67,7 +88,7 @@ const { componentName: oe, create: le } = ee("input"), ae = le({
     },
     border: {
       type: Boolean,
-      default: !0
+      default: true
     },
     formatTrigger: {
       type: String,
@@ -79,11 +100,11 @@ const { componentName: oe, create: le } = ee("input"), ae = le({
     },
     showWordLimit: {
       type: Boolean,
-      default: !1
+      default: false
     },
     autofocus: {
       type: Boolean,
-      default: !1
+      default: false
     },
     confirmType: {
       type: String,
@@ -91,181 +112,264 @@ const { componentName: oe, create: le } = ee("input"), ae = le({
     },
     error: {
       type: Boolean,
-      default: !1
+      default: false
     },
     showClearIcon: {
       type: Boolean,
-      default: !1
+      default: false
     },
     class: {
       type: String,
       default: ""
     }
   },
-  components: { MaskClose: te },
+  components: { MaskClose },
   emits: ["update:modelValue", "blur", "focus", "clear", "keypress", "click", "click-input"],
   expose: ["focus", "blur", "select"],
-  setup(e, { emit: n, slots: o }) {
-    const l = w(!1), i = w(), u = () => {
-      var t;
-      return String((t = e.modelValue) != null ? t : "");
-    }, m = (t) => H("input", k({
-      style: h
-    }, y(t))), r = O({
-      focused: !1,
-      validateFailed: !1,
+  setup(props, { emit, slots }) {
+    const active = ref(false);
+    const inputRef = ref();
+    const getModelValue = () => {
+      var _a;
+      return String((_a = props.modelValue) != null ? _a : "");
+    };
+    const renderInput = (type) => {
+      return h("input", __spreadValues({
+        style: styles
+      }, inputType(type)));
+    };
+    const state = reactive({
+      focused: false,
+      validateFailed: false,
       // 校验失败
       validateMessage: ""
       // 校验信息
-    }), N = S(() => {
-      const t = oe;
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
       return {
-        [t]: !0,
-        [`${t}--disabled`]: e.disabled,
-        [`${t}--required`]: e.required,
-        [`${t}--error`]: e.error,
-        [`${t}--border`]: e.border,
-        [e.class]: !!e.class
+        [prefixCls]: true,
+        [`${prefixCls}--disabled`]: props.disabled,
+        [`${prefixCls}--required`]: props.required,
+        [`${prefixCls}--error`]: props.error,
+        [`${prefixCls}--border`]: props.border,
+        [props.class]: !!props.class
       };
-    }), h = S(() => ({
-      textAlign: e.inputAlign
-    })), y = (t) => t === "number" ? {
-      type: "text"
-    } : t === "digit" ? {
-      type: "tel"
-    } : { type: t }, $ = (t) => {
-      if (!t.target.composing) {
-        let a = t.target.value;
-        e.maxLength && a.length > Number(e.maxLength) && (a = a.slice(0, Number(e.maxLength))), d(a);
+    });
+    const styles = computed(() => {
+      return {
+        textAlign: props.inputAlign
+      };
+    });
+    const inputType = (type) => {
+      if (type === "number") {
+        return {
+          type: "text"
+        };
+      }
+      if (type === "digit") {
+        return {
+          type: "tel"
+        };
       }
-    }, d = (t, c = "onChange") => {
-      var a;
-      e.type === "digit" && (t = L(t, !1, !1)), e.type === "number" && (t = L(t, !0, !0)), e.formatter && c === e.formatTrigger && (t = e.formatter(t)), ((a = i == null ? void 0 : i.value) == null ? void 0 : a.value) !== t && (i.value.value = t), t !== e.modelValue && n("update:modelValue", t);
-    }, T = (t) => {
-      if (e.disabled || e.readonly)
+      return { type };
+    };
+    const onInput = (event) => {
+      if (!event.target.composing) {
+        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);
+      }
+    };
+    const onFocus = (event) => {
+      if (props.disabled || props.readonly) {
         return;
-      t.target.value, l.value = !0, n("focus", t);
-    }, I = (t) => {
-      if (e.disabled || e.readonly)
+      }
+      const input = event.target;
+      input.value;
+      active.value = true;
+      emit("focus", event);
+    };
+    const onBlur = (event) => {
+      if (props.disabled || props.readonly) {
         return;
+      }
       setTimeout(() => {
-        l.value = !1;
+        active.value = false;
       }, 200);
-      let a = t.target.value;
-      e.maxLength && a.length > Number(e.maxLength) && (a = a.slice(0, Number(e.maxLength))), d(u(), "onBlur"), n("blur", t);
-    }, z = (t) => {
-      t.stopPropagation(), !e.disabled && (n("update:modelValue", "", t), n("clear", "", t));
-    }, F = () => {
-      r.validateFailed && (r.validateFailed = !1, r.validateMessage = "");
-    }, M = (t) => {
-      e.disabled || n("click-input", t);
-    }, E = (t) => {
-      n("click", t);
-    }, q = ({ target: t }) => {
-      t.composing = !0;
-    }, A = ({ target: t }) => {
-      t.composing && (t.composing = !1, t.dispatchEvent(new Event("input")));
+      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", event);
     };
-    return j(
-      () => e.modelValue,
-      () => {
-        d(u()), F();
+    const clear = (event) => {
+      event.stopPropagation();
+      if (props.disabled)
+        return;
+      emit("update:modelValue", "", event);
+      emit("clear", "", event);
+    };
+    const resetValidation = () => {
+      if (state.validateFailed) {
+        state.validateFailed = false;
+        state.validateMessage = "";
       }
-    ), G(() => {
-      d(u(), e.formatTrigger);
-    }), {
-      renderInput: m,
-      inputRef: i,
-      active: l,
-      classes: N,
-      styles: h,
-      inputType: y,
-      onInput: $,
-      onFocus: T,
-      onBlur: I,
-      clear: z,
-      startComposing: q,
-      endComposing: A,
-      onClick: E,
-      onClickInput: M,
-      focus: () => {
-        var t;
-        (t = i.value) == null || t.focus();
-      },
-      blur: () => {
-        var t;
-        (t = i.value) == null || t.blur();
-      },
-      select: () => {
-        var t;
-        (t = i.value) == null || t.select();
+    };
+    const onClickInput = (event) => {
+      if (props.disabled) {
+        return;
       }
+      emit("click-input", event);
+    };
+    const onClick = (event) => {
+      emit("click", event);
+    };
+    const startComposing = ({ target }) => {
+      target.composing = true;
+    };
+    const endComposing = ({ target }) => {
+      if (target.composing) {
+        target.composing = false;
+        target.dispatchEvent(new Event("input"));
+      }
+    };
+    watch(
+      () => props.modelValue,
+      () => {
+        updateValue(getModelValue());
+        resetValidation();
+      }
+    );
+    onMounted(() => {
+      updateValue(getModelValue(), props.formatTrigger);
+    });
+    const focus = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.focus();
+    };
+    const blur = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.blur();
+    };
+    const select = () => {
+      var _a;
+      (_a = inputRef.value) == null ? void 0 : _a.select();
+    };
+    return {
+      renderInput,
+      inputRef,
+      active,
+      classes,
+      styles,
+      inputType,
+      onInput,
+      onFocus,
+      onBlur,
+      clear,
+      startComposing,
+      endComposing,
+      onClick,
+      onClickInput,
+      focus,
+      blur,
+      select
     };
   }
-}), ie = { class: "nut-input-value" }, re = { class: "nut-input-inner" }, se = { class: "nut-input-left-box" }, ue = { class: "nut-input-box" }, de = {
+});
+const _hoisted_1 = { class: "nut-input-value" };
+const _hoisted_2 = { class: "nut-input-inner" };
+const _hoisted_3 = { class: "nut-input-left-box" };
+const _hoisted_4 = { class: "nut-input-box" };
+const _hoisted_5 = {
   key: 0,
   class: "nut-input-word-limit"
-}, ce = { class: "nut-input-word-num" }, fe = { class: "nut-input-right-box" };
-function me(e, n, o, l, i, u) {
-  const m = J("MaskClose");
-  return f(), g("view", {
-    class: K(e.classes),
-    onClick: n[1] || (n[1] = (...r) => e.onClick && e.onClick(...r))
+};
+const _hoisted_6 = { class: "nut-input-word-num" };
+const _hoisted_7 = { class: "nut-input-right-box" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MaskClose = resolveComponent("MaskClose");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.onClick && _ctx.onClick(...args))
   }, [
-    s("view", ie, [
-      s("view", re, [
-        s("view", se, [
-          p(e.$slots, "left")
+    createElementVNode("view", _hoisted_1, [
+      createElementVNode("view", _hoisted_2, [
+        createElementVNode("view", _hoisted_3, [
+          renderSlot(_ctx.$slots, "left")
         ]),
-        s("view", ue, [
-          (f(), Q(R(e.renderInput(e.type)), {
+        createElementVNode("view", _hoisted_4, [
+          (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderInput(_ctx.type)), {
             class: "input-text",
             ref: "inputRef",
-            style: U(e.styles),
-            maxlength: e.maxLength,
-            placeholder: e.placeholder,
-            disabled: e.disabled,
-            readonly: e.readonly,
-            value: e.modelValue,
-            formatTrigger: e.formatTrigger,
-            autofocus: e.autofocus,
-            enterkeyhint: e.confirmType,
-            onInput: e.onInput,
-            onFocus: e.onFocus,
-            onBlur: e.onBlur,
-            onClick: e.onClickInput,
-            onChange: e.endComposing,
-            onCompositionend: e.endComposing,
-            onCompositionstart: e.startComposing
+            style: normalizeStyle(_ctx.styles),
+            maxlength: _ctx.maxLength,
+            placeholder: _ctx.placeholder,
+            disabled: _ctx.disabled,
+            readonly: _ctx.readonly,
+            value: _ctx.modelValue,
+            formatTrigger: _ctx.formatTrigger,
+            autofocus: _ctx.autofocus,
+            enterkeyhint: _ctx.confirmType,
+            onInput: _ctx.onInput,
+            onFocus: _ctx.onFocus,
+            onBlur: _ctx.onBlur,
+            onClick: _ctx.onClickInput,
+            onChange: _ctx.endComposing,
+            onCompositionend: _ctx.endComposing,
+            onCompositionstart: _ctx.startComposing
           }, null, 40, ["style", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus", "enterkeyhint", "onInput", "onFocus", "onBlur", "onClick", "onChange", "onCompositionend", "onCompositionstart"])),
-          e.showWordLimit && e.maxLength ? (f(), g("view", de, [
-            s("span", ce, V(e.modelValue ? e.modelValue.length : 0), 1),
-            X("/" + V(e.maxLength), 1)
-          ])) : B("", !0)
+          _ctx.showWordLimit && _ctx.maxLength ? (openBlock(), createElementBlock("view", _hoisted_5, [
+            createElementVNode("span", _hoisted_6, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
+            createTextVNode("/" + toDisplayString(_ctx.maxLength), 1)
+          ])) : createCommentVNode("", true)
         ]),
-        e.clearable && !e.readonly ? Y((f(), g("view", {
+        _ctx.clearable && !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("view", {
           key: 0,
           class: "nut-input-clear-box",
-          onClick: n[0] || (n[0] = (...r) => e.clear && e.clear(...r))
+          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clear && _ctx.clear(...args))
         }, [
-          p(e.$slots, "clear", {}, () => [
-            Z(m, x({ class: "nut-input-clear" }, e.$attrs, {
-              size: e.clearSize,
-              width: e.clearSize,
-              height: e.clearSize
+          renderSlot(_ctx.$slots, "clear", {}, () => [
+            createVNode(_component_MaskClose, mergeProps({ class: "nut-input-clear" }, _ctx.$attrs, {
+              size: _ctx.clearSize,
+              width: _ctx.clearSize,
+              height: _ctx.clearSize
             }), null, 16, ["size", "width", "height"])
           ])
         ], 512)), [
-          [_, (e.active || e.showClearIcon) && e.modelValue.length > 0]
-        ]) : B("", !0),
-        s("view", fe, [
-          p(e.$slots, "right")
+          [vShow, (_ctx.active || _ctx.showClearIcon) && _ctx.modelValue.length > 0]
+        ]) : createCommentVNode("", true),
+        createElementVNode("view", _hoisted_7, [
+          renderSlot(_ctx.$slots, "right")
         ])
       ])
     ])
   ], 2);
 }
-const Ve = /* @__PURE__ */ ne(ae, [["render", me]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  Ve as default
+  index as default
 };