x-next 1.0.1 → 1.1.0

package/dist/es/components/form-input-number/InputNumber.js

@@ -0,0 +1,441 @@
+import { defineComponent as X, toRefs as G, ref as S, computed as I, watch as z, onUnmounted as J, createVNode as d, Fragment as Q } from "vue";
+import D from "../../node_modules/.pnpm/number-precision@1.6.0/node_modules/number-precision/build/index.es.js";
+import { isNumber as m, isUndefined as Z } from "../../_utils/is.js";
+import ee from "../../icons/_self/up.js";
+import ne from "../../icons/_self/down.js";
+import ue from "../../icons/_self/plus.js";
+import te from "../../icons/_self/minus.js";
+import _ from "../button/Button.js";
+import { Input as ae } from "../form-input/index.js";
+import { useFormItem as le } from "../../_hooks/use-form-item.js";
+import { useSize as ie } from "../../_hooks/use-size.js";
+import { getKeyDownHandler as re, KEYBOARD_KEY as p } from "../../_utils/keyboard.js";
+import { getClassNameMixin as de } from "../../_utils/config.js";
+const oe = 800, fe = 150;
+D.enableBoundaryChecking(!1);
+const Be = /* @__PURE__ */ X({
+  name: "InputNumber",
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     */
+    modelValue: Number,
+    /**
+     * @zh 默认值（非受控模式）
+     * @en Default value (uncontrolled mode)
+     */
+    defaultValue: Number,
+    /**
+     * @zh 模式（`embed`：按钮内嵌模式，`button`：左右按钮模式）
+     * @en Mode (`embed`: button embedded mode, `button`: left and right button mode)
+     * @values 'embed', 'button'
+     */
+    mode: {
+      type: String,
+      default: "embed"
+    },
+    /**
+     * @zh 数字精度
+     * @en Precision
+     */
+    precision: Number,
+    /**
+     * @zh 数字变化步长
+     * @en Number change step
+     */
+    step: {
+      type: Number,
+      default: 1
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为错误状态
+     * @en Whether it is an error state
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 最大值
+     * @en Max
+     */
+    max: {
+      type: Number,
+      default: 1 / 0
+    },
+    /**
+     * @zh 最小值
+     * @en Min
+     */
+    min: {
+      type: Number,
+      default: -1 / 0
+    },
+    /**
+     * @zh 定义输入框展示值
+     * @en Define the display value of the input
+     */
+    formatter: {
+      type: Function
+    },
+    /**
+     * @zh 从 `formatter` 转换为数字，和 `formatter` 搭配使用
+     * @en Convert from `formatter` to number, and use with `formatter`
+     */
+    parser: {
+      type: Function
+    },
+    /**
+     * @zh 输入框提示文字
+     * @en Input prompt text
+     */
+    placeholder: String,
+    /**
+     * @zh 是否隐藏按钮
+     * @en Whether to hide the button
+     */
+    hideButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 输入框大小
+     * @en Input size
+     * @values 'mini','small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 是否允许清空输入框
+     * @en Whether to allow the input to be cleared
+     */
+    allowClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 触发 `v-model` 的事件
+     * @en Trigger event for `v-model`
+     */
+    modelEvent: {
+      type: String,
+      default: "change"
+    },
+    /**
+     * @zh 只读
+     * @en Readonly
+     * @version 2.33.1
+     */
+    readOnly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 内部 input 元素的属性
+     * @en Attributes of inner input elements
+     * @version 2.52.0
+     */
+    inputAttrs: {
+      type: Object
+    }
+  },
+  emits: {
+    "update:modelValue": (n) => !0,
+    /**
+     * @zh 值发生改变时触发
+     * @en Triggered when the value changes
+     * @param { number | undefined } value
+     * @param {Event} ev
+     */
+    change: (n, i) => !0,
+    /**
+     * @zh 输入框获取焦点时触发
+     * @en Triggered when the input gets focus
+     * @param {FocusEvent} ev
+     */
+    focus: (n) => !0,
+    /**
+     * @zh 输入框失去焦点时触发
+     * @en Triggered when the input box loses focus
+     * @param {FocusEvent} ev
+     */
+    blur: (n) => !0,
+    /**
+     * @zh 用户点击清除按钮时触发
+     * @en Triggered when the user clicks the clear button
+     * @param {Event} ev
+     * @version 2.23.0
+     */
+    clear: (n) => !0,
+    /**
+     * @zh 输入时触发
+     * @en Triggered on input
+     * @param { number | undefined } value
+     * @param {string} inputValue
+     * @param {Event} ev
+     * @version 2.27.0
+     */
+    input: (n, i, a) => !0,
+    /**
+     * @zh 按下键盘时触发
+     * @en Triggered on keydown
+     * @param {MouseEvent} ev
+     * @version 2.56.0
+     */
+    keydown: (n) => !0
+  },
+  /**
+   * @zh 前缀
+   * @en Prefix
+   * @slot prefix
+   */
+  /**
+   * @zh 后缀
+   * @en Suffix
+   * @slot suffix
+   */
+  /**
+   * @zh 前置标签
+   * @en Prepend
+   * @slot prepend
+   */
+  /**
+   * @zh 后置标签
+   * @en Append
+   * @slot append
+   */
+  /**
+   * @zh 数值增加图标
+   * @en Plus
+   * @slot plus
+   */
+  /**
+   * @zh 数值减少图标
+   * @en Minus
+   * @slot minus
+   */
+  setup(n, {
+    emit: i,
+    slots: a
+  }) {
+    const {
+      size: E,
+      disabled: A
+    } = G(n), r = de("input-number"), V = S(), {
+      mergedSize: F,
+      mergedDisabled: s,
+      eventHandlers: P
+    } = le({
+      size: E,
+      disabled: A
+    }), {
+      mergedSize: x
+    } = ie(F), g = I(() => {
+      if (m(n.precision)) {
+        const e = `${n.step}`.split(".")[1], u = e && e.length || 0;
+        return Math.max(u, n.precision);
+      }
+    }), h = (e) => {
+      var t;
+      if (!m(e))
+        return "";
+      const u = g.value ? e.toFixed(g.value) : String(e);
+      return ((t = n.formatter) == null ? void 0 : t.call(n, u)) ?? u;
+    }, o = S(h(n.modelValue ?? n.defaultValue)), l = I(() => {
+      var u;
+      if (!o.value)
+        return;
+      const e = Number(((u = n.parser) == null ? void 0 : u.call(n, o.value)) ?? o.value);
+      return Number.isNaN(e) ? void 0 : e;
+    }), v = S(m(l.value) && l.value <= n.min), b = S(m(l.value) && l.value >= n.max);
+    let y = 0;
+    const f = () => {
+      y && (window.clearTimeout(y), y = 0);
+    }, O = (e) => {
+      if (!Z(e))
+        return m(n.min) && e < n.min && (e = n.min), m(n.max) && e > n.max && (e = n.max), m(g.value) ? D.round(e, g.value) : e;
+    }, w = (e) => {
+      let u = !1, t = !1;
+      m(e) && (e <= n.min && (u = !0), e >= n.max && (t = !0)), b.value !== t && (b.value = t), v.value !== u && (v.value = u);
+    }, B = (e) => !s.value && !n.readOnly && !(e === "plus" && b.value) && !(e === "minus" && v.value), R = () => {
+      const e = O(l.value), u = h(e);
+      (e !== l.value || o.value !== u) && (o.value = u), i("update:modelValue", e);
+    };
+    z(() => [n.max, n.min], () => {
+      R(), w(l.value);
+    });
+    const M = (e, u) => {
+      if (!B(e))
+        return;
+      let t;
+      m(l.value) ? t = O(D[e](l.value, n.step)) : t = n.min === -1 / 0 ? 0 : n.min, o.value = h(t), w(t), i("update:modelValue", t), i("change", t, u);
+    }, N = (e, u, t = !1) => {
+      var c;
+      if (e.preventDefault(), !!B(u) && ((c = V.value) == null || c.focus(), M(u, e), t)) {
+        f();
+        const C = () => {
+          if (!B(u)) {
+            f();
+            return;
+          }
+          M(u, e), y = window.setTimeout(C, fe);
+        };
+        y = window.setTimeout(C, oe);
+      }
+    }, $ = (e, u) => {
+      var t, c;
+      e = e.trim().replace(/。/g, "."), e = ((t = n.parser) == null ? void 0 : t.call(n, e)) ?? e, (m(Number(e)) || /^(\.|-)$/.test(e)) && (o.value = ((c = n.formatter) == null ? void 0 : c.call(n, e)) ?? e, w(l.value), i("input", l.value, o.value, u), n.modelEvent === "input" && (i("update:modelValue", l.value), i("change", l.value, u)));
+    }, k = (e) => {
+      i("focus", e);
+    }, T = (e, u) => {
+      u instanceof MouseEvent && !e || (R(), i("change", l.value, u));
+    }, K = (e) => {
+      i("blur", e);
+    }, U = (e) => {
+      var u, t;
+      o.value = "", i("update:modelValue", void 0), i("change", void 0, e), (t = (u = P.value) == null ? void 0 : u.onChange) == null || t.call(u, e), i("clear", e);
+    }, H = re(/* @__PURE__ */ new Map([[p.ARROW_UP, (e) => {
+      e.preventDefault(), !n.readOnly && M("plus", e);
+    }], [p.ARROW_DOWN, (e) => {
+      e.preventDefault(), !n.readOnly && M("minus", e);
+    }]])), W = (e) => {
+      i("keydown", e), e.defaultPrevented || H(e);
+    };
+    z(() => n.modelValue, (e) => {
+      e !== l.value && (o.value = h(e), w(e));
+    });
+    const Y = () => {
+      var e, u, t;
+      return n.readOnly ? null : d(Q, null, [a.suffix && d("div", {
+        class: r.element("suffix")
+      }, [(e = a.suffix) == null ? void 0 : e.call(a)]), d("div", {
+        class: r.element("step")
+      }, [d("button", {
+        class: [r.element("step--button"), {
+          [`${r.element("step--button")}-disabled`]: s.value || b.value
+        }],
+        type: "button",
+        tabindex: "-1",
+        disabled: s.value || b.value,
+        onMousedown: (c) => N(c, "plus", !0),
+        onMouseup: f,
+        onMouseleave: f
+      }, [a.plus ? (u = a.plus) == null ? void 0 : u.call(a) : d(ee, null, null)]), d("button", {
+        class: [r.element("step--button"), {
+          [`${r.element("step--button")}-disabled`]: s.value || v.value
+        }],
+        type: "button",
+        tabindex: "-1",
+        disabled: s.value || v.value,
+        onMousedown: (c) => N(c, "minus", !0),
+        onMouseup: f,
+        onMouseleave: f
+      }, [a.minus ? (t = a.minus) == null ? void 0 : t.call(a) : d(ne, null, null)])])]);
+    }, q = I(() => [r.block, r.modifier(`mode-${n.mode}`), r.modifier(`size-${x.value}`), {
+      [r.modifier("readonly")]: n.readOnly
+    }]), L = () => d(_, {
+      size: x.value,
+      shape: "square",
+      narrow: !0,
+      tabindex: "-1",
+      class: r.element("step--button"),
+      disabled: s.value || v.value,
+      onMousedown: (e) => N(e, "minus", !0),
+      onMouseup: f,
+      onMouseleave: f
+    }, {
+      icon: () => d(te, null, null)
+    }), j = () => d(_, {
+      size: x.value,
+      shape: "square",
+      narrow: !0,
+      tabindex: "-1",
+      class: r.element("step--button"),
+      disabled: s.value || b.value,
+      onMousedown: (e) => N(e, "plus", !0),
+      onMouseup: f,
+      onMouseleave: f
+    }, {
+      icon: () => d(ue, null, null)
+    });
+    return J(f), {
+      inputRef: V,
+      render: () => {
+        const e = n.mode === "embed" ? {
+          prepend: a.prepend,
+          prefix: a.prefix,
+          suffix: n.hideButton ? a.suffix : Y,
+          append: a.append
+        } : {
+          prepend: n.hideButton ? a.prepend : L,
+          prefix: a.prefix,
+          suffix: a.suffix,
+          append: n.hideButton ? a.append : j
+        };
+        return d(ae, {
+          key: `input-number-${n.mode}`,
+          ref: V,
+          class: q.value,
+          type: "text",
+          allowClear: n.allowClear,
+          size: x.value,
+          modelValue: o.value,
+          placeholder: n.placeholder,
+          disabled: s.value,
+          readonly: n.readOnly,
+          error: n.error,
+          inputAttrs: {
+            role: "spinbutton",
+            "aria-valuemax": n.max,
+            "aria-valuemin": n.min,
+            "aria-valuenow": l.value,
+            ...n.inputAttrs
+          },
+          onInput: $,
+          onFocus: k,
+          onBlur: K,
+          onClear: U,
+          onChange: T,
+          onKeydown: W
+        }, e);
+      }
+    };
+  },
+  methods: {
+    /**
+     * @zh 使输入框获取焦点
+     * @en Make the input box focus
+     * @public
+     */
+    focus() {
+      var n;
+      (n = this.inputRef) == null || n.focus();
+    },
+    /**
+     * @zh 使输入框失去焦点
+     * @en Make the input box lose focus
+     * @public
+     */
+    blur() {
+      var n;
+      (n = this.inputRef) == null || n.blur();
+    }
+  },
+  render() {
+    return this.render();
+  }
+});
+export {
+  Be as default
+};

package/dist/es/components/form-input-number/index.js

@@ -0,0 +1,8 @@
+import t from "./InputNumber.js";
+import { generateComponent as e } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const p = e(o("InputNumber"), t);
+export {
+  p as InputNumber,
+  p as default
+};