x-next 1.0.0 → 1.1.0

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

@@ -0,0 +1,360 @@
+import { defineComponent as ie, toRefs as se, ref as h, computed as r, watch as ce, createVNode as i, mergeProps as z, createTextVNode as de, nextTick as fe } from "vue";
+import { INPUT_EVENTS as R } from "../../_utils/constant.js";
+import me from "../_components/feedback-icon/index.vue.js";
+import { Enter as ve } from "../../_utils/keycode.js";
+import pe from "../_components/icon-hover/index.vue.js";
+import he from "../../icons/default/close.js";
+import { omit as j } from "../../_utils/omit.js";
+import ge from "../../_utils/pick.js";
+import { isUndefined as ye, isNull as xe, isObject as F, isFunction as Ce } from "../../_utils/is.js";
+import { useFormItem as be } from "../../_hooks/use-form-item.js";
+import { useLocale as Le } from "../../locale/index.js";
+import { useSize as we } from "../../_hooks/use-size.js";
+import { useCursor as Be } from "../../_hooks/use-cursor.js";
+import { getClassNameMixin as Ve } from "../../_utils/config.js";
+const Pe = /* @__PURE__ */ ie({
+  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
+    } = se(t), a = Ve("input"), d = h(), {
+      mergedSize: K,
+      mergedDisabled: g,
+      mergedError: U,
+      feedback: y,
+      eventHandlers: v
+    } = be({
+      size: D,
+      disabled: P,
+      error: W
+    }), {
+      t: $
+    } = Le(), {
+      mergedSize: N
+    } = we(K), [q, G] = Be(d), w = h(t.defaultValue), c = r(() => t.modelValue ?? w.value);
+    ce(H, (e) => {
+      (ye(e) || xe(e)) && (w.value = "");
+    });
+    let B = c.value;
+    const V = h(!1), J = r(() => t.allowClear && !t.readonly && !g.value && !!c.value), x = h(!1), T = h(""), p = (e) => Ce(t.wordLength) ? t.wordLength(e) : e.length ?? 0, C = r(() => p(c.value)), A = r(() => U.value || !!(F(t.maxLength) && t.maxLength.errorOnly && C.value > o.value)), I = r(() => F(t.maxLength) && !!t.maxLength.errorOnly), o = r(() => F(t.maxLength) ? t.maxLength.length : t.maxLength), Q = r(() => {
+      const e = p("a");
+      return Math.floor(o.value / e);
+    }), S = (e) => {
+      var n;
+      o.value && !I.value && p(e) > o.value && (e = ((n = t.wordSlice) == null ? void 0 : n.call(t, e, o.value)) ?? e.slice(0, Q.value)), w.value = e, s("update:modelValue", e);
+    }, X = (e) => {
+      d.value && e.target !== d.value && (e.preventDefault(), d.value.focus());
+    }, k = (e, n) => {
+      var l, f;
+      e !== B && (B = e, s("change", e, n), (f = (l = v.value) == null ? void 0 : l.onChange) == null || f.call(l, n));
+    }, Y = (e) => {
+      var n, l;
+      V.value = !0, B = c.value, s("focus", e), (l = (n = v.value) == null ? void 0 : n.onFocus) == null || l.call(n, e);
+    }, Z = (e) => {
+      var n, l;
+      V.value = !1, k(c.value, e), s("blur", e), (l = (n = v.value) == null ? void 0 : n.onBlur) == null || l.call(n, e);
+    }, E = (e) => {
+      var L, O;
+      const {
+        value: n,
+        selectionStart: l,
+        selectionEnd: f
+      } = e.target;
+      if (e.type === "compositionend") {
+        if (x.value = !1, T.value = "", o.value && !I.value && C.value >= o.value && p(n) > o.value && l === 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, T.value = c.value + (e.data ?? "");
+    }, b = () => {
+      q(), fe(() => {
+        d.value && c.value !== d.value.value && (d.value.value = c.value, G());
+      });
+    }, ee = (e) => {
+      var l, f;
+      const {
+        value: n
+      } = e.target;
+      if (!x.value) {
+        if (o.value && !I.value && C.value >= o.value && p(n) > o.value && e.inputType === "insertText") {
+          b();
+          return;
+        }
+        S(n), s("input", n, e), (f = (l = v.value) == null ? void 0 : l.onInput) == null || f.call(l, e), b();
+      }
+    }, te = (e) => {
+      S(""), k("", e), s("clear", e);
+    }, ne = (e) => {
+      const n = e.key || e.code;
+      !x.value && n === ve.key && (k(c.value, e), s("pressEnter", e));
+    }, M = r(() => j(j(m, R), ["class", "style"])), ae = r(() => ge(m, R)), le = r(() => [a.element("outer"), m.class, a.element(`outer-size-${N.value}`), {
+      [a.element("outer-has-suffix")]: !!u.suffix,
+      [a.element("outer-disabled")]: g.value
+    }]), ue = (e) => [a.element("wrapper"), !e && m.class, {
+      [a.modifier("error")]: A.value,
+      [a.modifier("disabled")]: g.value,
+      [a.modifier("focus")]: V.value
+    }], oe = r(() => [a.block, a.modifier(`size-${N.value}`)]), re = r(() => {
+      const e = {
+        ...ae.value,
+        ...t.inputAttrs
+      };
+      return A.value && (e["aria-invalid"] = !0), e;
+    }), _ = (e) => {
+      var n;
+      return i("span", z({
+        class: ue(e),
+        style: e ? void 0 : m.style,
+        onMousedown: X
+      }, e ? void 0 : M.value), [u.prefix && i("span", {
+        class: a.element("prefix")
+      }, [u.prefix()]), i("input", z({
+        ref: d,
+        class: oe.value,
+        value: c.value,
+        type: t.type,
+        placeholder: t.placeholder,
+        readonly: t.readonly,
+        disabled: g.value,
+        onInput: ee,
+        onKeydown: ne,
+        onFocus: Y,
+        onBlur: Z,
+        onCompositionstart: E,
+        onCompositionupdate: E,
+        onCompositionend: E
+      }, re.value), null), J.value && i(pe, {
+        as: "button",
+        "aria-label": $("common.clearTarget", {
+          target: "输入"
+        }),
+        prefix: "x-input",
+        class: a.element("clear-btn"),
+        onClick: te
+      }, {
+        default: () => [i(he, null, null)]
+      }), (u.suffix || !!t.maxLength && t.showWordLimit || !!y.value) && i("span", {
+        class: [a.element("suffix"), {
+          [a.element("suffix-has-feedback")]: y.value
+        }]
+      }, [!!t.maxLength && t.showWordLimit && i("span", {
+        class: a.element("word-limit")
+      }, [C.value, de("/"), o.value]), (n = u.suffix) == null ? void 0 : n.call(u), !!y.value && i(me, {
+        type: y.value
+      }, null)])]);
+    };
+    return {
+      inputRef: d,
+      render: () => u.prepend || u.append ? i("span", z({
+        class: le.value,
+        style: m.style
+      }, M.value), [u.prepend && i("span", {
+        class: a.element("prepend")
+      }, [u.prepend()]), _(!0), u.append && i("span", {
+        class: a.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 {
+  Pe 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,59 @@
+import u from "./InputPassword.vue2.js";
+import { resolveComponent as s, openBlock as i, createBlock as t, createSlots as m, withCtx as o, renderSlot as p, withModifiers as r, createCommentVNode as v } from "vue";
+import y from "../../_virtual/_plugin-vue_export-helper.js";
+function $(e, n, b, k, w, c) {
+  const l = s("icon-eye"), d = s("icon-eye-invisible"), a = s("icon-hover"), f = s("x-input");
+  return i(), t(f, {
+    ref: "inputRef",
+    class: "x-input-password",
+    type: e.mergedVisible ? "text" : "password"
+  }, m({ _: 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(), t(a, {
+          key: 0,
+          as: "button",
+          "aria-label": e.mergedVisible ? e.t("input.hidePassword") : e.t("input.showPassword"),
+          onClick: e.handleInvisible,
+          onMousedown: n[0] || (n[0] = r(() => {
+          }, ["prevent"])),
+          onMouseup: n[1] || (n[1] = r(() => {
+          }, ["prevent"]))
+        }, {
+          default: o(() => [
+            e.mergedVisible ? (i(), t(d, { key: 1 })) : (i(), t(l, { key: 0 }))
+          ]),
+          _: 1
+        }, 8, ["aria-label", "onClick"])) : v("", !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"]);
+}
+const V = /* @__PURE__ */ y(u, [["render", $]]);
+export {
+  V as default
+};

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

@@ -0,0 +1,83 @@
+import { defineComponent as f, toRefs as m, ref as c, reactive as v } from "vue";
+import d from "../_components/icon-hover/index.vue.js";
+import b from "../../icons/_self/eye.js";
+import y from "../../icons/_self/eye-invisible.js";
+import I from "../../_hooks/use-merge-state.js";
+import { useLocale as h } from "../../locale/index.js";
+import g from "./Input.js";
+const C = f({
+  name: "InputPassword",
+  components: {
+    IconEye: b,
+    IconEyeInvisible: y,
+    IconHover: d,
+    XInput: g
+  },
+  props: {
+    /**
+     * @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(t, { emit: o }) {
+    const { visibility: s, defaultVisibility: n } = m(t), l = c(), { t: u } = h(), r = () => {
+      p(!e.value);
+    }, [e, a] = I(
+      n.value,
+      v({
+        value: s
+      })
+    ), p = (i) => {
+      i !== e.value && (o("visibility-change", i), o("update:visibility", i), a(i));
+    };
+    return {
+      inputRef: l,
+      mergedVisible: e,
+      handleInvisible: r,
+      t: u
+    };
+  },
+  methods: {
+    focus() {
+      var t;
+      (t = this.inputRef) == null || t.focus();
+    },
+    blur() {
+      var t;
+      (t = this.inputRef) == null || t.blur();
+    }
+  }
+});
+export {
+  C as default
+};

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

@@ -0,0 +1,140 @@
+import { defineComponent as p, toRefs as b, ref as h, createVNode as u, mergeProps as x, Fragment as g } from "vue";
+import { useLocale as v } from "../../locale/index.js";
+import y from "../_components/icon-hover/index.vue.js";
+import f from "../../icons/_self/search.js";
+import B from "../../icons/animation/animation-loading.js";
+import { Button as S } from "../button/index.js";
+import z from "./Input.js";
+import { useSize as R } from "../../_hooks/use-size.js";
+import { getClassNameMixin as C } from "../../_utils/config.js";
+const H = /* @__PURE__ */ p({
+  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: d
+    } = b(e), i = C("input-search"), {
+      t: c
+    } = v(), {
+      mergedSize: o
+    } = R(d), r = h(), l = (n) => {
+      r.value.inputRef && a("search", r.value.inputRef.value, n);
+    }, m = () => {
+      var n;
+      return u(g, null, [e.loading ? u(B, null, null) : u(y, {
+        as: "button",
+        "aria-label": c("common.search"),
+        onClick: l
+      }, {
+        default: () => [u(f, null, null)]
+      }), (n = t.suffix) == null ? void 0 : n.call(t)]);
+    }, s = () => {
+      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: () => u(f, null, null)
+      }, u(S, x({
+        type: "primary",
+        class: i.element("btn"),
+        disabled: e.disabled,
+        size: o.value,
+        loading: e.loading
+      }, e.buttonProps, {
+        onClick: l
+      }), n);
+    };
+    return {
+      inputRef: r,
+      render: () => u(z, {
+        ref: r,
+        class: i.block,
+        size: o.value,
+        disabled: e.disabled
+      }, {
+        prepend: t.prepend,
+        prefix: t.prefix,
+        suffix: e.searchButton ? t.suffix : m,
+        append: e.searchButton ? s : 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 {
+  H as default
+};

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

@@ -0,0 +1,14 @@
+import p from "./Input.js";
+import r from "./InputSearch.js";
+import n from "./InputPassword.vue.js";
+import u from "./InputGroup.vue.js";
+import { generateComponent as t } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as o } from "../../_utils/config.js";
+const c = t(o("Input"), p), i = t(o("InputSearch"), r), d = t(o("InputPassword"), n), P = t(o("InputGroup"), u);
+export {
+  c as Input,
+  P as InputGroup,
+  d as InputPassword,
+  i as InputSearch,
+  c as default
+};