x-next 1.0.1 → 1.2.0

package/dist/es/components/form-input/Input.js

@@ -0,0 +1,364 @@
+import { defineComponent as ce, toRefs as de, ref as h, computed as r, watch as fe, createVNode as i, mergeProps as F, createTextVNode as me, nextTick as ve } from "vue";
+import { INPUT_EVENTS as R } from "../../_utils/constant.js";
+import pe from "../_components/feedback-icon/index.vue.js";
+import { Enter as he } from "../../_utils/keycode.js";
+import ge from "../_components/icon-hover/index.vue.js";
+import ye from "../../icons/default/close.js";
+import { omit as j } from "../../_utils/omit.js";
+import xe from "../../_utils/pick.js";
+import { isUndefined as Ce, isNull as be, isObject as z, isFunction as Le } from "../../_utils/is.js";
+import { useFormItem as we, useFormItemControl as Be } from "../../_hooks/use-form-item.js";
+import { useLocale as Ie } from "../../locale/index.js";
+import { useSize as Ve } from "../../_hooks/use-size.js";
+import { useCursor as Se } from "../../_hooks/use-cursor.js";
+import { getClassNameMixin as ke } from "../../_utils/config.js";
+const Ke = /* @__PURE__ */ ce({
+  name: "Input",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     */
+    modelValue: String,
+    /**
+     * @zh 默认值（非受控状态）
+     * @en Default value (uncontrolled state)
+     */
+    defaultValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @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 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为只读状态
+     * @en Whether it is read-only
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为错误状态
+     * @en Whether it is an error state
+     */
+    error: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 提示文字
+     * @en Prompt text
+     */
+    placeholder: String,
+    /**
+     * @zh 输入值的最大长度，errorOnly 属性在 2.12.0 版本添加
+     * @en Enter the maximum length of the value, the errorOnly attribute was added in version 2.12.0
+     */
+    maxLength: {
+      type: [Number, Object],
+      default: 0
+    },
+    /**
+     * @zh 是否显示字数统计
+     * @en Whether to display word count
+     */
+    showWordLimit: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 字符长度的计算方法
+     * @en Calculation method of word length
+     */
+    wordLength: {
+      type: Function
+    },
+    /**
+     * @zh 字符截取方法，同 wordLength 一起使用
+     * @en Character interception method, used together with wordLength
+     * @version 2.12.0
+     */
+    wordSlice: {
+      type: Function
+    },
+    /**
+     * @zh 内部 input 元素的属性
+     * @en Attributes of inner input elements
+     * @version 2.27.0
+     */
+    inputAttrs: {
+      type: Object
+    },
+    // private
+    type: {
+      type: String,
+      default: "text"
+    }
+  },
+  emits: {
+    "update:modelValue": (t) => !0,
+    /**
+     * @zh 用户输入时触发
+     * @en Triggered when the user enters
+     * @param {string} value
+     * @param {Event} ev
+     */
+    input: (t, s) => !0,
+    /**
+     * @zh 仅在输入框失焦或按下回车时触发
+     * @en Only triggered when the input box is out of focus or when you press Enter
+     * @param {string} value
+     * @param {Event} ev
+     */
+    change: (t, s) => !0,
+    /**
+     * @zh 用户按下回车时触发
+     * @en Triggered when the user presses enter
+     * @param {KeyboardEvent} ev
+     */
+    pressEnter: (t) => !0,
+    /**
+     * @zh 用户点击清除按钮时触发
+     * @en Triggered when the user clicks the clear button
+     * @param {MouseEvent} ev
+     */
+    clear: (t) => !0,
+    /**
+     * @zh 输入框获取焦点时触发
+     * @en Triggered when the input box gets focus
+     * @param {FocusEvent} ev
+     */
+    focus: (t) => !0,
+    /**
+     * @zh 输入框失去焦点时触发
+     * @en Triggered when the input box loses focus
+     * @param {FocusEvent} ev
+     */
+    blur: (t) => !0
+  },
+  /**
+   * @zh 前缀元素
+   * @en Prefix
+   * @slot prefix
+   */
+  /**
+   * @zh 后缀元素
+   * @en Suffix
+   * @slot suffix
+   */
+  /**
+   * @zh 前置标签
+   * @en Prepend
+   * @slot prepend
+   */
+  /**
+   * @zh 后置标签
+   * @en Append
+   * @slot append
+   */
+  setup(t, {
+    emit: s,
+    slots: u,
+    attrs: m
+  }) {
+    const {
+      size: D,
+      disabled: P,
+      error: W,
+      modelValue: H
+    } = de(t), l = ke("input"), d = h(), {
+      formItemCtx: K,
+      mergedSize: U,
+      mergedDisabled: g,
+      mergedError: $,
+      feedback: y,
+      eventHandlers: v
+    } = we({
+      size: D,
+      disabled: P,
+      error: W
+    }), {
+      t: q
+    } = Ie(), {
+      mergedSize: N
+    } = Ve(U), [G, J] = Se(d), w = h(t.defaultValue), c = r(() => t.modelValue ?? w.value);
+    fe(H, (e) => {
+      (Ce(e) || be(e)) && (w.value = "");
+    });
+    let B = c.value;
+    const I = h(!1), Q = r(() => t.allowClear && !t.readonly && !g.value && !!c.value), x = h(!1), A = h(""), p = (e) => Le(t.wordLength) ? t.wordLength(e) : e.length ?? 0, C = r(() => p(c.value)), T = r(() => $.value || !!(z(t.maxLength) && t.maxLength.errorOnly && C.value > o.value)), V = r(() => z(t.maxLength) && !!t.maxLength.errorOnly), o = r(() => z(t.maxLength) ? t.maxLength.length : t.maxLength), X = r(() => {
+      const e = p("a");
+      return Math.floor(o.value / e);
+    }), S = (e) => {
+      var n;
+      o.value && !V.value && p(e) > o.value && (e = ((n = t.wordSlice) == null ? void 0 : n.call(t, e, o.value)) ?? e.slice(0, X.value)), w.value = e, s("update:modelValue", e);
+    }, Y = (e) => {
+      d.value && e.target !== d.value && (e.preventDefault(), d.value.focus());
+    }, k = (e, n) => {
+      var a, f;
+      e !== B && (B = e, s("change", e, n), (f = (a = v.value) == null ? void 0 : a.onChange) == null || f.call(a, n));
+    }, Z = (e) => {
+      var n, a;
+      I.value = !0, B = c.value, s("focus", e), (a = (n = v.value) == null ? void 0 : n.onFocus) == null || a.call(n, e);
+    }, ee = (e) => {
+      var n, a;
+      I.value = !1, k(c.value, e), s("blur", e), (a = (n = v.value) == null ? void 0 : n.onBlur) == null || a.call(n, e);
+    }, E = (e) => {
+      var L, O;
+      const {
+        value: n,
+        selectionStart: a,
+        selectionEnd: f
+      } = e.target;
+      if (e.type === "compositionend") {
+        if (x.value = !1, A.value = "", o.value && !V.value && C.value >= o.value && p(n) > o.value && a === f) {
+          b();
+          return;
+        }
+        S(n), s("input", n, e), (O = (L = v.value) == null ? void 0 : L.onInput) == null || O.call(L, e), b();
+      } else
+        x.value = !0, A.value = c.value + (e.data ?? "");
+    }, b = () => {
+      G(), ve(() => {
+        d.value && c.value !== d.value.value && (d.value.value = c.value, J());
+      });
+    }, te = (e) => {
+      var a, f;
+      const {
+        value: n
+      } = e.target;
+      if (!x.value) {
+        if (o.value && !V.value && C.value >= o.value && p(n) > o.value && e.inputType === "insertText") {
+          b();
+          return;
+        }
+        S(n), s("input", n, e), (f = (a = v.value) == null ? void 0 : a.onInput) == null || f.call(a, e), b();
+      }
+    }, ne = (e) => {
+      var n, a;
+      S(""), k("", e), (a = (n = v.value) == null ? void 0 : n.onInput) == null || a.call(n, e), s("clear", e);
+    }, ae = (e) => {
+      const n = e.key || e.code;
+      !x.value && n === he.key && (k(c.value, e), s("pressEnter", e));
+    }, M = r(() => j(j(m, R), ["class", "style"])), le = r(() => xe(m, R)), ue = r(() => [l.element("outer"), m.class, l.element(`outer-size-${N.value}`), {
+      [l.element("outer-has-suffix")]: !!u.suffix,
+      [l.element("outer-disabled")]: g.value
+    }]), oe = (e) => [l.element("wrapper"), !e && m.class, {
+      [l.modifier("error")]: T.value,
+      [l.modifier("disabled")]: g.value,
+      [l.modifier("focus")]: I.value
+    }], re = r(() => [l.block, l.modifier(`size-${N.value}`)]), ie = Be(K, () => ({
+      ...le.value,
+      ...t.inputAttrs
+    })), se = r(() => {
+      const e = {
+        ...ie.value
+      };
+      return T.value && (e["aria-invalid"] = !0), e;
+    }), _ = (e) => {
+      var n;
+      return i("span", F({
+        class: oe(e),
+        style: e ? void 0 : m.style,
+        onMousedown: Y
+      }, e ? void 0 : M.value), [u.prefix && i("span", {
+        class: l.element("prefix")
+      }, [u.prefix()]), i("input", F({
+        ref: d,
+        class: re.value,
+        value: c.value,
+        type: t.type,
+        placeholder: t.placeholder,
+        readonly: t.readonly,
+        disabled: g.value,
+        onInput: te,
+        onKeydown: ae,
+        onFocus: Z,
+        onBlur: ee,
+        onCompositionstart: E,
+        onCompositionupdate: E,
+        onCompositionend: E
+      }, se.value), null), Q.value && i(ge, {
+        as: "button",
+        "aria-label": q("common.clearTarget", {
+          target: "输入"
+        }),
+        prefix: "x-input",
+        class: l.element("clear-btn"),
+        onClick: ne
+      }, {
+        default: () => [i(ye, null, null)]
+      }), (u.suffix || !!t.maxLength && t.showWordLimit || !!y.value) && i("span", {
+        class: [l.element("suffix"), {
+          [l.element("suffix-has-feedback")]: y.value
+        }]
+      }, [!!t.maxLength && t.showWordLimit && i("span", {
+        class: l.element("word-limit")
+      }, [C.value, me("/"), o.value]), (n = u.suffix) == null ? void 0 : n.call(u), !!y.value && i(pe, {
+        type: y.value
+      }, null)])]);
+    };
+    return {
+      inputRef: d,
+      render: () => u.prepend || u.append ? i("span", F({
+        class: ue.value,
+        style: m.style
+      }, M.value), [u.prepend && i("span", {
+        class: l.element("prepend")
+      }, [u.prepend()]), _(!0), u.append && i("span", {
+        class: l.element("append")
+      }, [u.append()])]) : _()
+    };
+  },
+  methods: {
+    /**
+     * @zh 使输入框获取焦点
+     * @en Make the input box focus
+     * @public
+     */
+    focus() {
+      var t;
+      (t = this.inputRef) == null || t.focus();
+    },
+    /**
+     * @zh 使输入框失去焦点
+     * @en Make the input box lose focus
+     * @public
+     */
+    blur() {
+      var t;
+      (t = this.inputRef) == null || t.blur();
+    }
+  },
+  render() {
+    return this.render();
+  }
+});
+export {
+  Ke as default
+};

package/dist/es/components/form-input/InputGroup.vue.js

@@ -0,0 +1,14 @@
+import e from "./InputGroup.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeClass as s, renderSlot as a } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+function c(o, l, p, m, f, i) {
+  return r(), t("div", {
+    class: s(o.className.block)
+  }, [
+    a(o.$slots, "default")
+  ], 2);
+}
+const $ = /* @__PURE__ */ n(e, [["render", c]]);
+export {
+  $ as default
+};

package/dist/es/components/form-input/InputGroup.vue2.js

@@ -0,0 +1,13 @@
+import { defineComponent as e } from "vue";
+import { getClassNameMixin as t } from "../../_utils/config.js";
+const a = e({
+  name: "InputGroup",
+  setup() {
+    return {
+      className: t("input--group")
+    };
+  }
+});
+export {
+  a as default
+};

package/dist/es/components/form-input/InputPassword.vue.js

@@ -0,0 +1,62 @@
+import m from "./InputPassword.vue2.js";
+import { resolveComponent as n, openBlock as i, createBlock as r, createSlots as u, withCtx as o, renderSlot as p, withModifiers as d, createCommentVNode as b } from "vue";
+import v from "../../_virtual/_plugin-vue_export-helper.js";
+function y(e, s, $, k, w, g) {
+  const t = n("icon-eye"), l = n("icon-eye-invisible"), a = n("icon-hover"), f = n("x-input");
+  return i(), r(f, {
+    ref: "inputRef",
+    class: "x-input-password",
+    type: e.mergedVisible ? "text" : "password",
+    disabled: e.mergedDisabled
+  }, u({ _: 2 }, [
+    e.$slots.prepend ? {
+      name: "prepend",
+      fn: o(() => [
+        p(e.$slots, "prepend")
+      ]),
+      key: "0"
+    } : void 0,
+    e.$slots.prefix ? {
+      name: "prefix",
+      fn: o(() => [
+        p(e.$slots, "prefix")
+      ]),
+      key: "1"
+    } : void 0,
+    e.invisibleButton || e.$slots.suffix ? {
+      name: "suffix",
+      fn: o(() => [
+        e.invisibleButton ? (i(), r(a, {
+          key: 0,
+          as: "button",
+          "aria-label": e.mergedVisible ? e.t("input.hidePassword") : e.t("input.showPassword"),
+          disabled: e.mergedDisabled,
+          "aria-pressed": e.mergedVisible,
+          onClick: e.handleInvisible,
+          onMousedown: s[0] || (s[0] = d(() => {
+          }, ["prevent"])),
+          onMouseup: s[1] || (s[1] = d(() => {
+          }, ["prevent"]))
+        }, {
+          default: o(() => [
+            e.mergedVisible ? (i(), r(l, { key: 1 })) : (i(), r(t, { key: 0 }))
+          ]),
+          _: 1
+        }, 8, ["aria-label", "disabled", "aria-pressed", "onClick"])) : b("", !0),
+        p(e.$slots, "suffix")
+      ]),
+      key: "2"
+    } : void 0,
+    e.$slots.append ? {
+      name: "append",
+      fn: o(() => [
+        p(e.$slots, "append")
+      ]),
+      key: "3"
+    } : void 0
+  ]), 1032, ["type", "disabled"]);
+}
+const B = /* @__PURE__ */ v(m, [["render", y]]);
+export {
+  B as default
+};

package/dist/es/components/form-input/InputPassword.vue2.js

@@ -0,0 +1,93 @@
+import { defineComponent as d, toRefs as c, ref as v, reactive as b } from "vue";
+import y from "../_components/icon-hover/index.vue.js";
+import I from "../../icons/_self/eye.js";
+import h from "../../icons/_self/eye-invisible.js";
+import g from "../../_hooks/use-merge-state.js";
+import { useLocale as B } from "../../locale/index.js";
+import R from "./Input.js";
+import { useFormItem as _ } from "../../_hooks/use-form-item.js";
+const M = d({
+  name: "InputPassword",
+  components: {
+    IconEye: I,
+    IconEyeInvisible: h,
+    IconHover: y,
+    XInput: R
+  },
+  props: {
+    /**
+     * @zh 是否禁用输入和显隐按钮
+     * @en Whether to disable the input and visibility button
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否可见，受控属性
+     * @en Whether is visible
+     * @vModel
+     */
+    visibility: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 默认是否可见，非受控
+     * @en Default visibility
+     */
+    defaultVisibility: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否显示可见按钮
+     * @en Whether to show visible buttons
+     */
+    invisibleButton: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  emits: [
+    /**
+     * @zh visibility 改变时触发
+     * @en Callback when visibility changes
+     * @param {boolean} visible
+     */
+    "visibility-change",
+    "update:visibility"
+  ],
+  setup(e, { emit: o }) {
+    const { visibility: l, defaultVisibility: a, disabled: n } = c(e), r = v(), { t: u } = B(), { mergedDisabled: s } = _({ disabled: n }), f = () => {
+      s.value || m(!i.value);
+    }, [i, p] = g(
+      a.value,
+      b({
+        value: l
+      })
+    ), m = (t) => {
+      t !== i.value && (o("visibility-change", t), o("update:visibility", t), p(t));
+    };
+    return {
+      inputRef: r,
+      mergedVisible: i,
+      mergedDisabled: s,
+      handleInvisible: f,
+      t: u
+    };
+  },
+  methods: {
+    focus() {
+      var e;
+      (e = this.inputRef) == null || e.focus();
+    },
+    blur() {
+      var e;
+      (e = this.inputRef) == null || e.blur();
+    }
+  }
+});
+export {
+  M as default
+};

package/dist/es/components/form-input/InputSearch.js

@@ -0,0 +1,150 @@
+import { defineComponent as x, toRefs as S, ref as y, createVNode as r, mergeProps as z, Fragment as B } from "vue";
+import { useLocale as I } from "../../locale/index.js";
+import R from "../_components/icon-hover/index.vue.js";
+import m from "../../icons/_self/search.js";
+import C from "../../icons/animation/animation-loading.js";
+import { Button as P } from "../button/index.js";
+import k from "./Input.js";
+import { useSize as T } from "../../_hooks/use-size.js";
+import { useFormItem as N } from "../../_hooks/use-form-item.js";
+import { getClassNameMixin as _ } from "../../_utils/config.js";
+const E = /* @__PURE__ */ x({
+  name: "InputSearch",
+  props: {
+    /**
+     * @zh 是否为后置按钮模式
+     * @en Whether it is the rear button mode
+     */
+    searchButton: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为加载中状态
+     * @en Whether it is loading state
+     */
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 输入框大小
+     * @en Input size
+     * @values 'mini','small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 搜索按钮的文字，使用后会替换原本的图标
+     * @en The text of the search button will replace the original icon after use
+     * @version 2.16.0
+     */
+    buttonText: {
+      type: String
+    },
+    /**
+     * @zh 搜索按钮的属性
+     * @en Button props
+     */
+    buttonProps: {
+      type: Object
+    }
+  },
+  emits: {
+    /**
+     * @zh 单击搜索按钮时触发
+     * @en Triggered when the search button is clicked
+     * @param {string} value
+     * @param {MouseEvent} ev
+     */
+    search: (e, a) => !0
+  },
+  setup(e, {
+    emit: a,
+    slots: t
+  }) {
+    const {
+      size: s,
+      disabled: b
+    } = S(e), i = _("input-search"), {
+      t: p
+    } = I(), {
+      mergedSize: g,
+      mergedDisabled: u
+    } = N({
+      size: s,
+      disabled: b
+    }), {
+      mergedSize: l
+    } = T(g), o = y(), d = (n) => {
+      u.value || e.loading || o.value.inputRef && a("search", o.value.inputRef.value, n);
+    }, h = () => {
+      var n;
+      return r(B, null, [e.loading ? r(C, null, null) : r(R, {
+        as: "button",
+        "aria-label": p("common.search"),
+        disabled: u.value,
+        onClick: d
+      }, {
+        default: () => [r(m, null, null)]
+      }), (n = t.suffix) == null ? void 0 : n.call(t)]);
+    }, v = () => {
+      var f, c;
+      let n = {};
+      return e.buttonText || t["button-default"] || t["button-icon"] ? n = {
+        default: t["button-default"] ?? (e.buttonText ? () => e.buttonText : void 0),
+        icon: t["button-icon"]
+      } : n = {
+        icon: () => r(m, null, null)
+      }, r(P, z({
+        type: "primary",
+        class: i.element("btn"),
+        size: l.value
+      }, e.buttonProps, {
+        disabled: u.value || ((f = e.buttonProps) == null ? void 0 : f.disabled),
+        loading: e.loading || ((c = e.buttonProps) == null ? void 0 : c.loading),
+        onClick: d
+      }), n);
+    };
+    return {
+      inputRef: o,
+      render: () => r(k, {
+        ref: o,
+        class: i.block,
+        size: l.value,
+        disabled: u.value
+      }, {
+        prepend: t.prepend,
+        prefix: t.prefix,
+        suffix: e.searchButton ? t.suffix : h,
+        append: e.searchButton ? v : t.append
+      })
+    };
+  },
+  methods: {
+    focus() {
+      var e;
+      (e = this.inputRef) == null || e.focus();
+    },
+    blur() {
+      var e;
+      (e = this.inputRef) == null || e.blur();
+    }
+  },
+  render() {
+    return this.render();
+  }
+});
+export {
+  E as default
+};