@nutui/nutui 4.0.0-beta.9 → 4.0.1-2.beta-1

package/dist/packages/_es/Input.js

@@ -1,39 +1,30 @@
-import { ref, reactive, computed, watch, onMounted, h, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, normalizeStyle, toDisplayString, createTextVNode, createCommentVNode, withDirectives, renderSlot, 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";
+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;
+};
+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 "../locale/lang";
-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 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 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, "");
+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, "");
 }
-const { componentName, create } = createComponent("input");
-const _sfc_main = create({
+const { componentName: oe, create: le } = ee("input"), ae = le({
   props: {
-    ref: {
-      type: String,
-      default: ""
-    },
     type: {
       type: String,
       default: "text"
@@ -50,29 +41,25 @@ const _sfc_main = create({
       type: String,
       default: "left"
     },
-    center: {
-      type: Boolean,
-      default: false
-    },
     required: {
       type: Boolean,
-      default: false
+      default: !1
     },
     disabled: {
       type: Boolean,
-      default: false
+      default: !1
     },
     readonly: {
       type: Boolean,
-      default: false
+      default: !1
     },
     maxLength: {
       type: [String, Number],
-      default: "9999"
+      default: ""
     },
     clearable: {
       type: Boolean,
-      default: false
+      default: !1
     },
     clearSize: {
       type: [String, Number],
@@ -80,7 +67,7 @@ const _sfc_main = create({
     },
     border: {
       type: Boolean,
-      default: true
+      default: !0
     },
     formatTrigger: {
       type: String,
@@ -90,21 +77,13 @@ const _sfc_main = create({
       type: Function,
       default: null
     },
-    rules: {
-      type: Array,
-      default: []
-    },
-    rows: {
-      type: [String, Number],
-      default: null
-    },
     showWordLimit: {
       type: Boolean,
-      default: false
+      default: !1
     },
     autofocus: {
       type: Boolean,
-      default: false
+      default: !1
     },
     confirmType: {
       type: String,
@@ -112,206 +91,181 @@ const _sfc_main = create({
     },
     error: {
       type: Boolean,
-      default: false
+      default: !1
+    },
+    showClearIcon: {
+      type: Boolean,
+      default: !1
+    },
+    class: {
+      type: String,
+      default: ""
     }
   },
-  components: { MaskClose },
-  emits: ["update:modelValue", "change", "blur", "focus", "clear", "keypress", "click-input"],
-  setup(props, { emit, slots }) {
-    const active = ref(false);
-    const inputRef = ref();
-    const getModelValue = () => String(props.modelValue ?? "");
-    const renderInput = (type) => {
-      return h("input", {
-        style: styles,
-        type: type != "textarea" && inputType(type)
-      });
-    };
-    const state = reactive({
-      focused: false,
-      validateFailed: false,
+  components: { MaskClose: te },
+  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,
+      // 校验失败
       validateMessage: ""
-    });
-    const classes = computed(() => {
-      const prefixCls = componentName;
+      // 校验信息
+    }), N = S(() => {
+      const t = oe;
       return {
-        [prefixCls]: true,
-        center: props.center,
-        [`${prefixCls}--disabled`]: props.disabled,
-        [`${prefixCls}--required`]: props.required,
-        [`${prefixCls}--error`]: props.error,
-        [`${prefixCls}--border`]: props.border
+        [t]: !0,
+        [`${t}--disabled`]: e.disabled,
+        [`${t}--required`]: e.required,
+        [`${t}--error`]: e.error,
+        [`${t}--border`]: e.border,
+        [e.class]: !!e.class
       };
-    });
-    const styles = computed(() => {
-      return {
-        textAlign: props.inputAlign
-      };
-    });
-    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;
+    }), 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);
       }
-      if (value !== props.modelValue) {
-        emit("update:modelValue", value);
-        emit("change", value);
-      }
-    };
-    const onFocus = (event) => {
-      if (props.disabled || props.readonly) {
+    }, 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;
-      }
-      const input = event.target;
-      let value = input.value;
-      active.value = true;
-      emit("focus", event);
-      emit("update:modelValue", value);
-    };
-    const onBlur = (event) => {
-      if (props.disabled || props.readonly) {
+      t.target.value, l.value = !0, n("focus", t);
+    }, I = (t) => {
+      if (e.disabled || e.readonly)
         return;
-      }
       setTimeout(() => {
-        active.value = false;
+        l.value = !1;
       }, 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", event);
-      emit("update:modelValue", value);
+      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 clear = (event) => {
-      event.stopPropagation();
-      if (props.disabled)
-        return;
-      emit("update:modelValue", "", event);
-      emit("change", "", event);
-      emit("clear", "", event);
-    };
-    const resetValidation = () => {
-      if (state.validateFailed) {
-        state.validateFailed = false;
-        state.validateMessage = "";
-      }
-    };
-    const onClickInput = (event) => {
-      if (props.disabled) {
-        return;
-      }
-      emit("click-input", event);
-    };
-    watch(
-      () => props.modelValue,
+    return j(
+      () => e.modelValue,
       () => {
-        updateValue(getModelValue());
-        resetValidation();
+        d(u()), F();
+      }
+    ), 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();
       }
-    );
-    onMounted(() => {
-      updateValue(getModelValue(), props.formatTrigger);
-    });
-    return {
-      renderInput,
-      inputRef,
-      active,
-      classes,
-      styles,
-      inputType,
-      onInput,
-      onFocus,
-      onBlur,
-      clear,
-      onClickInput
     };
   }
-});
-const _hoisted_1 = { class: "nut-input-value" };
-const _hoisted_2 = { class: "nut-input-inner" };
-const _hoisted_3 = { class: "nut-input-box" };
-const _hoisted_4 = {
+}), ie = { class: "nut-input-value" }, re = { class: "nut-input-inner" }, se = { class: "nut-input-left-box" }, ue = { class: "nut-input-box" }, de = {
   key: 0,
   class: "nut-input-word-limit"
-};
-const _hoisted_5 = { class: "nut-input-word-num" };
-const _hoisted_6 = {
-  key: 0,
-  class: "nut-input-clear-box"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_MaskClose = resolveComponent("MaskClose");
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes)
+}, 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))
   }, [
-    createElementVNode("view", _hoisted_1, [
-      createElementVNode("view", _hoisted_2, [
-        createElementVNode("view", _hoisted_3, [
-          (openBlock(), createBlock(resolveDynamicComponent(_ctx.renderInput(_ctx.type)), {
+    s("view", ie, [
+      s("view", re, [
+        s("view", se, [
+          p(e.$slots, "left")
+        ]),
+        s("view", ue, [
+          (f(), Q(R(e.renderInput(e.type)), {
             class: "input-text",
             ref: "inputRef",
-            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
-          }, null, 40, ["style", "maxlength", "placeholder", "disabled", "readonly", "value", "formatTrigger", "autofocus", "enterkeyhint", "onInput", "onFocus", "onBlur", "onClick"])),
-          _ctx.showWordLimit && _ctx.maxLength ? (openBlock(), createElementBlock("view", _hoisted_4, [
-            createElementVNode("span", _hoisted_5, toDisplayString(_ctx.modelValue ? _ctx.modelValue.length : 0), 1),
-            createTextVNode("/" + toDisplayString(_ctx.maxLength), 1)
-          ])) : createCommentVNode("", true)
+            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
+          }, 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.clearable && !_ctx.readonly ? withDirectives((openBlock(), createElementBlock("view", _hoisted_6, [
-          renderSlot(_ctx.$slots, "clear", {}, () => [
-            createVNode(_component_MaskClose, mergeProps({ class: "nut-input-clear" }, _ctx.$attrs, {
-              size: _ctx.clearSize,
-              onClick: _ctx.clear
-            }), null, 16, ["size", "onClick"])
+        e.clearable && !e.readonly ? Y((f(), g("view", {
+          key: 0,
+          class: "nut-input-clear-box",
+          onClick: n[0] || (n[0] = (...r) => e.clear && e.clear(...r))
+        }, [
+          p(e.$slots, "clear", {}, () => [
+            Z(m, x({ class: "nut-input-clear" }, e.$attrs, {
+              size: e.clearSize,
+              width: e.clearSize,
+              height: e.clearSize
+            }), null, 16, ["size", "width", "height"])
           ])
         ], 512)), [
-          [vShow, _ctx.active && _ctx.modelValue.length > 0]
-        ]) : createCommentVNode("", true)
+          [_, (e.active || e.showClearIcon) && e.modelValue.length > 0]
+        ]) : B("", !0),
+        s("view", fe, [
+          p(e.$slots, "right")
+        ])
       ])
     ])
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const Ve = /* @__PURE__ */ ne(ae, [["render", me]]);
 export {
-  index as default
+  Ve as default
 };