x-next 1.0.0 → 1.1.0

package/dist/es/components/form-input-tag/InputTag.js

@@ -0,0 +1,463 @@
+import { defineComponent as de, toRefs as ce, ref as v, computed as f, reactive as ve, watch as M, onMounted as me, createVNode as d, mergeProps as S, TransitionGroup as pe, nextTick as O } from "vue";
+import { INPUT_EVENTS as j } from "../../_utils/constant.js";
+import { Enter as ge, Backspace as he } from "../../_utils/keycode.js";
+import { getValueData as be } from "./utils.js";
+import { Tag as ye } from "../tag/index.js";
+import Ve from "../_components/icon-hover/index.vue.js";
+import Ce from "../../icons/default/close.js";
+import { omit as L } from "../../_utils/omit.js";
+import Ie from "../../_utils/pick.js";
+import we from "../../_container/resize-observer.js";
+import xe from "../_components/feedback-icon/index.vue.js";
+import { useFormItem as Be } from "../../_hooks/use-form-item.js";
+import { useLocale as _e } from "../../locale/index.js";
+import { useSize as Te } from "../../_hooks/use-size.js";
+import { isObject as ke, isUndefined as Ne, isNull as Ee } from "../../_utils/is.js";
+import { getClassNameMixin as $, getRemovePrefixComponentName as Se } from "../../_utils/config.js";
+const ze = {
+  value: "value",
+  label: "label",
+  closable: "closable",
+  tagProps: "tagProps"
+}, Ae = "__x_input_tag_more__", Ye = /* @__PURE__ */ de({
+  name: "InputTag",
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     * @vModel
+     */
+    modelValue: {
+      type: Array
+    },
+    /**
+     * @zh 默认值（非受控状态）
+     * @en Default value (uncontrolled state)
+     */
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 输入框的值
+     * @en The value of the input
+     * @vModel
+     */
+    inputValue: String,
+    /**
+     * @zh 输入框的默认值（非受控状态）
+     * @en The default value of the input (uncontrolled state)
+     */
+    defaultInputValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 占位符
+     * @en Placeholder
+     */
+    placeholder: String,
+    /**
+     * @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 Whether it is read-only mode
+     */
+    readonly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否允许清空
+     * @en Whether to allow clear
+     */
+    allowClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 输入框的大小
+     * @en The size of the input
+     * @values 'mini','small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 最多展示的标签个数，`0` 表示不限制
+     * @en The maximum number of tags displayed, `0` means unlimited
+     */
+    maxTagCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 是否保留输入框的内容
+     * @en Whether to keep the content of the input box
+     */
+    retainInputValue: {
+      type: [Boolean, Object],
+      default: !1
+    },
+    /**
+     * @zh 格式化标签内容
+     * @en Format tag content
+     */
+    formatTag: {
+      type: Function
+    },
+    /**
+     * @zh 是否仅创建唯一的值
+     * @en Whether to create only unique values
+     * @version 2.15.0
+     */
+    uniqueValue: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 自定义 `TagData` 中的字段
+     * @en Customize fields in `TagData`
+     * @version 2.22.0
+     */
+    fieldNames: {
+      type: Object
+    },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    tagNowrap: {
+      type: Boolean,
+      default: !1
+    },
+    // private
+    baseCls: String,
+    focused: Boolean,
+    disabledInput: Boolean,
+    uninjectFormItemContext: Boolean,
+    inputAttrs: Object
+  },
+  emits: {
+    "update:modelValue": (a) => !0,
+    "update:inputValue": (a) => !0,
+    /**
+     * @zh 值发生改变时触发
+     * @en Triggered when the value changes
+     * @param {(string | number | TagData)[]} value
+     * @param {Event} ev
+     */
+    change: (a, o) => !0,
+    /**
+     * @zh 输入值发生改变时触发
+     * @en Trigger when the input value changes
+     * @param {string} inputValue
+     * @param {Event} ev
+     */
+    inputValueChange: (a, o) => !0,
+    /**
+     * @zh 按下回车键时触发
+     * @en Triggered when the enter key is pressed
+     * @param {string} inputValue
+     * @param {KeyboardEvent} ev
+     */
+    pressEnter: (a, o) => !0,
+    /**
+     * @zh 点击标签的删除按钮时触发
+     * @en Triggered when the delete button of the label is clicked
+     * @param {string | number} removed
+     * @param {Event} ev
+     */
+    remove: (a, o) => !0,
+    /**
+     * @zh 点击清除按钮时触发
+     * @en Triggered when the clear button is clicked
+     * @param {MouseEvent} ev
+     */
+    clear: (a) => !0,
+    /**
+     * @zh 输入框获取焦点时触发
+     * @en Triggered when the input box gets focus
+     * @param {FocusEvent} ev
+     */
+    focus: (a) => !0,
+    /**
+     * @zh 输入框失去焦点时触发
+     * @en Triggered when the input box loses focus
+     * @param {FocusEvent} ev
+     */
+    blur: (a) => !0,
+    keydown: (a) => !0
+  },
+  /**
+   * @zh 后缀元素
+   * @en Suffix
+   * @slot suffix
+   */
+  /**
+   * @zh 前缀元素
+   * @en Prefix
+   * @slot prefix
+   */
+  /**
+   * @zh 输入框标签的显示内容
+   * @en Display content of tag
+   * @slot tag
+   * @binding {TagData} data
+   */
+  setup(a, {
+    emit: o,
+    slots: s,
+    attrs: C
+  }) {
+    const {
+      size: U,
+      disabled: W,
+      error: q,
+      uninjectFormItemContext: B,
+      modelValue: G
+    } = ce(a), t = a.baseCls ? $(Se(a.baseCls)) : $("input-tag"), r = v(), p = v(), {
+      mergedSize: H,
+      mergedDisabled: g,
+      mergedError: K,
+      feedback: I,
+      eventHandlers: w
+    } = Be({
+      size: U,
+      disabled: W,
+      error: q,
+      uninject: B == null ? void 0 : B.value
+    }), {
+      t: z
+    } = _e(), {
+      mergedSize: J
+    } = Te(H), Q = f(() => ({
+      ...ze,
+      ...a.fieldNames
+    })), _ = v(!1), T = v(a.defaultValue), A = v(a.defaultInputValue), m = v(!1), x = v(""), R = f(() => ke(a.retainInputValue) ? {
+      create: !1,
+      blur: !1,
+      ...a.retainInputValue
+    } : {
+      create: a.retainInputValue,
+      blur: a.retainInputValue
+    }), k = ve({
+      width: "12px"
+    }), X = f(() => a.focused || _.value), h = (e, l) => {
+      A.value = e, o("update:inputValue", e), o("inputValueChange", e, l);
+    }, N = (e) => {
+      const {
+        value: l
+      } = e.target;
+      e.type === "compositionend" ? (m.value = !1, x.value = "", h(l, e), O(() => {
+        r.value && n.value !== r.value.value && (r.value.value = n.value);
+      })) : (m.value = !0, x.value = n.value + (e.data ?? ""));
+    }, b = f(() => a.modelValue ?? T.value), n = f(() => a.inputValue ?? A.value);
+    M(G, (e) => {
+      (Ne(e) || Ee(e)) && (T.value = []);
+    });
+    const Y = (e) => {
+      r.value && e.target !== r.value && (e.preventDefault(), r.value.focus());
+    }, Z = (e) => {
+      var u, i;
+      const {
+        value: l
+      } = e.target;
+      m.value || (h(l, e), (i = (u = w.value) == null ? void 0 : u.onInput) == null || i.call(u, e), O(() => {
+        r.value && n.value !== r.value.value && (r.value.value = n.value);
+      }));
+    }, c = f(() => be(b.value, Q.value)), y = f(() => {
+      if (a.maxTagCount > 0) {
+        const e = c.value.length - a.maxTagCount;
+        if (e > 0) {
+          const l = c.value.slice(0, a.maxTagCount), u = {
+            value: Ae,
+            label: `+${e}...`,
+            closable: !1
+          };
+          return l.push({
+            raw: u,
+            ...u
+          }), l;
+        }
+      }
+      return c.value;
+    }), E = (e, l) => {
+      var u, i;
+      T.value = e, o("update:modelValue", e), o("change", e, l), (i = (u = w.value) == null ? void 0 : u.onChange) == null || i.call(u, l);
+    }, F = (e, l, u) => {
+      var V;
+      const i = (V = b.value) == null ? void 0 : V.filter((Fe, fe) => fe !== l);
+      E(i, u), o("remove", e, u);
+    }, ee = (e) => {
+      e.stopPropagation(), E([], e), n.value && h("", e), o("clear", e);
+    }, D = f(() => !g.value && !a.readonly && a.allowClear && !!b.value.length), ae = (e) => {
+      if (n.value) {
+        if (e.preventDefault(), a.uniqueValue && c.value.some((u) => u.value === n.value)) {
+          o("pressEnter", n.value, e);
+          return;
+        }
+        const l = b.value.concat(n.value);
+        E(l, e), o("pressEnter", n.value, e), R.value.create || h("", e);
+      }
+    }, le = (e) => {
+      var l, u;
+      _.value = !0, o("focus", e), (u = (l = w.value) == null ? void 0 : l.onFocus) == null || u.call(l, e);
+    }, ue = (e) => {
+      var l, u;
+      _.value = !1, !R.value.blur && n.value && h("", e), o("blur", e), (u = (l = w.value) == null ? void 0 : l.onBlur) == null || u.call(l, e);
+    }, te = () => {
+      for (let e = c.value.length - 1; e >= 0; e--)
+        if (c.value[e].closable)
+          return e;
+      return -1;
+    }, ne = (e) => {
+      if (g.value || a.readonly)
+        return;
+      const l = e.key || e.code;
+      if (!m.value && n.value && l === ge.key && ae(e), !m.value && y.value.length > 0 && !n.value && l === he.key) {
+        const u = te();
+        u >= 0 && (e.preventDefault(), F(c.value[u].value, u, e));
+      }
+      o("keydown", e);
+    }, P = (e) => {
+      e > 12 ? k.width = `${e}px` : k.width = "12px";
+    };
+    me(() => {
+      p.value && P(p.value.offsetWidth);
+    });
+    const oe = () => {
+      p.value && P(p.value.offsetWidth);
+    };
+    M(n, (e) => {
+      r.value && !m.value && e !== r.value.value && (r.value.value = e);
+    });
+    const re = f(() => [t.block, t.modifier(`size-${J.value}`), {
+      [t.modifier("disabled")]: g.value,
+      [t.modifier("disabled-input")]: a.disabledInput,
+      [t.modifier("error")]: K.value,
+      [t.modifier("focus")]: X.value,
+      [t.modifier("readonly")]: a.readonly,
+      [t.modifier("has-tag")]: y.value.length > 0,
+      [t.modifier("has-prefix")]: !!s.prefix,
+      [t.modifier("has-suffix")]: !!s.suffix || D.value || !!I.value,
+      [t.modifier("has-placeholder")]: !b.value.length
+    }]), ie = f(() => L(L(C, j), ["class", "style"])), se = f(() => Ie(C, j));
+    return {
+      inputRef: r,
+      render: () => {
+        var e;
+        return d("span", S({
+          class: [re.value, C.class],
+          style: C.style,
+          onMousedown: Y
+        }, ie.value), [d(we, {
+          onResize: oe
+        }, {
+          default: () => [d("span", {
+            ref: p,
+            class: t.element("mirror")
+          }, [y.value.length > 0 ? x.value || n.value : x.value || n.value || a.placeholder])]
+        }), s.prefix && d("span", {
+          class: t.element("prefix")
+        }, [s.prefix()]), d(pe, {
+          tag: "span",
+          name: "input-tag-zoom",
+          class: [t.element("inner"), {
+            [t.modifier("nowrap")]: a.tagNowrap
+          }]
+        }, {
+          default: () => [y.value.map((l, u) => d(ye, S({
+            key: `tag-${l.value}-${u}`,
+            class: t.element("tag"),
+            closable: !g.value && !a.readonly && l.closable,
+            visible: !0,
+            nowrap: a.tagNowrap
+          }, l.tagProps, {
+            onClose: (i) => F(l.value, u, i)
+          }), {
+            default: () => {
+              var i, V;
+              return [((i = s.tag) == null ? void 0 : i.call(s, {
+                data: l.raw
+              })) ?? ((V = a.formatTag) == null ? void 0 : V.call(a, l.raw)) ?? l.label];
+            }
+          })), d("input", S(se.value, a.inputAttrs, {
+            ref: r,
+            key: "input-tag-input",
+            class: t.element("input"),
+            style: k,
+            value: n.value,
+            placeholder: y.value.length === 0 ? a.placeholder : void 0,
+            disabled: g.value,
+            readonly: a.readonly || a.disabledInput,
+            onInput: Z,
+            onKeydown: ne,
+            onFocus: le,
+            onBlur: ue,
+            onCompositionstart: N,
+            onCompositionupdate: N,
+            onCompositionend: N
+          }), null)]
+        }), D.value && d(Ve, {
+          as: "button",
+          "aria-label": z("common.clearTarget", {
+            target: z("common.tag")
+          }),
+          class: t.element("clear-btn"),
+          onClick: ee,
+          onMousedown: (l) => l.stopPropagation()
+        }, {
+          default: () => [d(Ce, null, null)]
+        }), (s.suffix || !!I.value) && d("span", {
+          class: t.element("suffix")
+        }, [(e = s.suffix) == null ? void 0 : e.call(s), !!I.value && d(xe, {
+          type: I.value
+        }, null)])]);
+      }
+    };
+  },
+  methods: {
+    /**
+     * @zh 使输入框获取焦点
+     * @en Make the input box focus
+     * @public
+     */
+    focus() {
+      var a;
+      (a = this.inputRef) == null || a.focus();
+    },
+    /**
+     * @zh 使输入框失去焦点
+     * @en Make the input box lose focus
+     * @public
+     */
+    blur() {
+      var a;
+      (a = this.inputRef) == null || a.blur();
+    }
+  },
+  render() {
+    return this.render();
+  }
+});
+export {
+  Ye as default
+};

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

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

package/dist/es/components/form-input-tag/utils.js

@@ -0,0 +1,32 @@
+import { isObject as u, isUndefined as s, isNull as a } from "../../_utils/is.js";
+const i = (r, e) => {
+  const o = [];
+  for (const t of r)
+    if (u(t)) {
+      const l = t[e.value];
+      if (s(l) || a(l))
+        continue;
+      const n = t[e.closable];
+      o.push({
+        raw: t,
+        value: l,
+        label: t[e.label] ?? String(l),
+        closable: n ?? !0,
+        tagProps: t[e.tagProps]
+      });
+    } else if (!s(t) && !a(t)) {
+      const l = {
+        value: t,
+        label: String(t),
+        closable: !0
+      };
+      o.push({
+        raw: l,
+        ...l
+      });
+    }
+  return o;
+};
+export {
+  i as getValueData
+};

package/dist/es/components/form-radio/Radio.js

@@ -0,0 +1,182 @@
+import { defineComponent as M, toRefs as P, inject as T, toRef as y, ref as k, computed as i, watch as S, createVNode as o, mergeProps as w, nextTick as K, Fragment as U, resolveComponent as X } from "vue";
+import q from "../_components/icon-hover/index.vue.js";
+import { radioGroupKey as E } from "./context.js";
+import { isUndefined as z, isNull as J } from "../../_utils/is.js";
+import { useFormItem as L } from "../../_hooks/use-form-item.js";
+import { getClassNameMixin as O } from "../../_utils/config.js";
+import { omit as Q } from "../../_utils/omit.js";
+import { useSize as W } from "../../_hooks/use-size.js";
+const ne = /* @__PURE__ */ M({
+  name: "Radio",
+  inheritAttrs: !1,
+  components: {
+    IconHover: q
+  },
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     * @vModel
+     */
+    modelValue: {
+      type: [String, Number, Boolean],
+      default: void 0
+    },
+    /**
+     * @zh 默认是否选中（非受控状态）
+     * @en Whether checked by default (uncontrolled state)
+     */
+    defaultChecked: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 选项的 `value`
+     * @en The `value` of the option
+     */
+    value: {
+      type: [String, Number, Boolean],
+      default: !0
+    },
+    /**
+     * @zh 原生 input 的 name 属性
+     * @en Native input name attribute
+     */
+    name: {
+      type: String
+    },
+    /**
+     * @zh 原生 input 的 id 属性
+     * @en Native input id attribute
+     */
+    id: {
+      type: String
+    },
+    /**
+     * @zh 单选的类型
+     * @en Radio type
+     * @values 'radio', 'button'
+     */
+    type: {
+      type: String,
+      default: "radio"
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 单选框尺寸
+     * @en Radio size
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String
+    },
+    // private
+    uninjectGroupContext: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    "update:modelValue": (n) => !0,
+    /**
+     * @zh 值改变时触发
+     * @en Trigger when the value changes
+     * @param { RadioValue } value
+     * @param {Event} ev
+     */
+    change: (n, m) => !0
+  },
+  /**
+   * @zh 自定义单选框
+   * @en Custom radio
+   * @slot radio
+   * @binding {boolean} checked
+   * @binding {boolean} disabled
+   * @version 2.18.0
+   */
+  setup(n, {
+    attrs: m,
+    emit: g,
+    slots: s
+  }) {
+    const t = O("radio"), {
+      modelValue: B
+    } = P(n), e = n.uninjectGroupContext ? void 0 : T(E, void 0), {
+      mergedDisabled: N,
+      mergedSize: R,
+      eventHandlers: r
+    } = L({
+      disabled: y(n, "disabled"),
+      size: y(n, "size")
+    }), {
+      mergedSize: F
+    } = W(R), c = k(null), f = k(n.defaultChecked), h = i(() => (e == null ? void 0 : e.name) === "XRadioGroup"), b = i(() => (e == null ? void 0 : e.type) ?? n.type), v = i(() => (e == null ? void 0 : e.disabled) || N.value), V = i(() => (e == null ? void 0 : e.size) ?? F.value), _ = i(() => n.name ?? (e == null ? void 0 : e.inputName)), u = i(() => h.value ? (e == null ? void 0 : e.value) === (n.value ?? !0) : z(n.modelValue) ? f.value : n.modelValue === (n.value ?? !0));
+    S(B, (l) => {
+      (z(l) || J(l)) && (f.value = !1);
+    }), S(u, (l, a) => {
+      l !== a && (f.value = l, c.value && (c.value.checked = l));
+    });
+    const $ = (l) => {
+      var a, d;
+      (d = (a = r.value) == null ? void 0 : a.onFocus) == null || d.call(a, l);
+    }, j = (l) => {
+      var a, d;
+      (d = (a = r.value) == null ? void 0 : a.onBlur) == null || d.call(a, l);
+    }, p = (l) => {
+      l.stopPropagation();
+    }, D = (l) => {
+      var a, d;
+      f.value = !0, h.value ? e == null || e.handleChange(n.value ?? !0, l) : (g("update:modelValue", n.value ?? !0), g("change", n.value ?? !0, l), (d = (a = r.value) == null ? void 0 : a.onChange) == null || d.call(a, l)), K(() => {
+        c.value && c.value.checked !== u.value && (c.value.checked = u.value);
+      });
+    }, A = i(() => [`${b.value === "button" ? t.element("button") : t.block}`, t.modifier(`size-${V.value}`), m.class, {
+      [t.modifier("checked")]: u.value,
+      [t.modifier("disabled")]: v.value
+    }]), H = i(() => Q(m, ["class", "style"])), I = () => o(U, null, [o(X("icon-hover"), {
+      class: `${t.block}-icon-hover`,
+      disabled: v.value || u.value
+    }, {
+      default: () => [o("span", {
+        class: `${t.block}-icon`
+      }, null)]
+    }), s.default && o("span", {
+      class: t.element("label")
+    }, [s.default()])]);
+    return () => {
+      var l, a;
+      return o("label", w({
+        class: A.value,
+        style: m.style
+      }, H.value), [o("input", {
+        id: n.id,
+        ref: c,
+        type: "radio",
+        checked: u.value,
+        "aria-checked": u.value,
+        value: n.value,
+        name: _.value,
+        class: t.element("target"),
+        disabled: v.value,
+        onClick: p,
+        onChange: D,
+        onFocus: $,
+        onBlur: j
+      }, null), b.value === "radio" ? ((a = s.radio ?? ((l = e == null ? void 0 : e.slots) == null ? void 0 : l.radio)) == null ? void 0 : a({
+        checked: u.value,
+        disabled: v.value
+      })) ?? I() : o("span", {
+        class: t.element("button--content")
+      }, [s.default && s.default()])]);
+    };
+  }
+});
+export {
+  ne as default
+};