x-next 1.0.1 → 1.2.0

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

@@ -0,0 +1,474 @@
+import { defineComponent as me, toRefs as pe, ref as v, computed as s, reactive as ge, watch as $, onMounted as be, createVNode as d, mergeProps as z, TransitionGroup as he, nextTick as U } from "vue";
+import { INPUT_EVENTS as W } from "../../_utils/constant.js";
+import { Enter as ye, Backspace as Ve } from "../../_utils/keycode.js";
+import { getValueData as Ce } from "./utils.js";
+import { Tag as Ie } from "../tag/index.js";
+import we from "../_components/icon-hover/index.vue.js";
+import xe from "../../icons/default/close.js";
+import { omit as q } from "../../_utils/omit.js";
+import Be from "../../_utils/pick.js";
+import _e from "../../_container/resize-observer.js";
+import Te from "../_components/feedback-icon/index.vue.js";
+import { useFormItem as ke, useFormItemControl as Ne } from "../../_hooks/use-form-item.js";
+import { useLocale as Ae } from "../../locale/index.js";
+import { useSize as Ee } from "../../_hooks/use-size.js";
+import { isObject as Se, isUndefined as ze, isNull as Fe } from "../../_utils/is.js";
+import { getClassNameMixin as G, getRemovePrefixComponentName as Re } from "../../_utils/config.js";
+const Pe = {
+  value: "value",
+  label: "label",
+  closable: "closable",
+  tagProps: "tagProps"
+}, De = "__x_input_tag_more__", aa = /* @__PURE__ */ me({
+  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: i,
+    attrs: I
+  }) {
+    const {
+      size: H,
+      disabled: K,
+      error: J,
+      uninjectFormItemContext: T,
+      modelValue: Q
+    } = pe(a), u = a.baseCls ? G(Re(a.baseCls)) : G("input-tag"), r = v(), p = v(), {
+      formItemCtx: X,
+      mergedSize: Y,
+      mergedDisabled: g,
+      mergedError: F,
+      feedback: w,
+      eventHandlers: x
+    } = ke({
+      size: H,
+      disabled: K,
+      error: J,
+      uninject: T == null ? void 0 : T.value
+    }), {
+      t: R
+    } = Ae(), {
+      mergedSize: Z
+    } = Ee(Y), ee = s(() => ({
+      ...Pe,
+      ...a.fieldNames
+    })), k = v(!1), N = v(a.defaultValue), P = v(a.defaultInputValue), m = v(!1), B = v(""), D = s(() => Se(a.retainInputValue) ? {
+      create: !1,
+      blur: !1,
+      ...a.retainInputValue
+    } : {
+      create: a.retainInputValue,
+      blur: a.retainInputValue
+    }), A = ge({
+      width: "12px"
+    }), ae = s(() => a.focused || k.value), b = (e, t) => {
+      P.value = e, o("update:inputValue", e), o("inputValueChange", e, t);
+    }, E = (e) => {
+      const {
+        value: t
+      } = e.target;
+      e.type === "compositionend" ? (m.value = !1, B.value = "", b(t, e), U(() => {
+        r.value && n.value !== r.value.value && (r.value.value = n.value);
+      })) : (m.value = !0, B.value = n.value + (e.data ?? ""));
+    }, h = s(() => a.modelValue ?? N.value), n = s(() => a.inputValue ?? P.value);
+    $(Q, (e) => {
+      (ze(e) || Fe(e)) && (N.value = []);
+    });
+    const le = (e) => {
+      r.value && e.target !== r.value && (e.preventDefault(), r.value.focus());
+    }, te = (e) => {
+      var l, f;
+      const {
+        value: t
+      } = e.target;
+      m.value || (b(t, e), (f = (l = x.value) == null ? void 0 : l.onInput) == null || f.call(l, e), U(() => {
+        r.value && n.value !== r.value.value && (r.value.value = n.value);
+      }));
+    }, c = s(() => Ce(h.value, ee.value)), y = s(() => {
+      if (a.maxTagCount > 0) {
+        const e = c.value.length - a.maxTagCount;
+        if (e > 0) {
+          const t = c.value.slice(0, a.maxTagCount), l = {
+            value: De,
+            label: `+${e}...`,
+            closable: !1
+          };
+          return t.push({
+            raw: l,
+            ...l
+          }), t;
+        }
+      }
+      return c.value;
+    }), S = (e, t) => {
+      var l, f;
+      N.value = e, o("update:modelValue", e), o("change", e, t), (f = (l = x.value) == null ? void 0 : l.onChange) == null || f.call(l, t);
+    }, M = (e, t, l) => {
+      var V;
+      const f = (V = h.value) == null ? void 0 : V.filter((C, _) => _ !== t);
+      S(f, l), o("remove", e, l);
+    }, ue = (e) => {
+      e.stopPropagation(), S([], e), n.value && b("", e), o("clear", e);
+    }, O = s(() => !g.value && !a.readonly && a.allowClear && !!h.value.length), ne = (e) => {
+      if (n.value) {
+        if (e.preventDefault(), a.uniqueValue && c.value.some((l) => l.value === n.value)) {
+          o("pressEnter", n.value, e);
+          return;
+        }
+        const t = h.value.concat(n.value);
+        S(t, e), o("pressEnter", n.value, e), D.value.create || b("", e);
+      }
+    }, oe = (e) => {
+      var t, l;
+      k.value = !0, o("focus", e), (l = (t = x.value) == null ? void 0 : t.onFocus) == null || l.call(t, e);
+    }, re = (e) => {
+      var t, l;
+      k.value = !1, !D.value.blur && n.value && b("", e), o("blur", e), (l = (t = x.value) == null ? void 0 : t.onBlur) == null || l.call(t, e);
+    }, ie = () => {
+      for (let e = c.value.length - 1; e >= 0; e--)
+        if (c.value[e].closable)
+          return e;
+      return -1;
+    }, se = (e) => {
+      if (g.value || a.readonly)
+        return;
+      const t = e.key || e.code;
+      if (!m.value && n.value && t === ye.key && ne(e), !m.value && y.value.length > 0 && !n.value && t === Ve.key) {
+        const l = ie();
+        l >= 0 && (e.preventDefault(), M(c.value[l].value, l, e));
+      }
+      o("keydown", e);
+    }, j = (e) => {
+      e > 12 ? A.width = `${e}px` : A.width = "12px";
+    };
+    be(() => {
+      p.value && j(p.value.offsetWidth);
+    });
+    const de = () => {
+      p.value && j(p.value.offsetWidth);
+    };
+    $(n, (e) => {
+      r.value && !m.value && e !== r.value.value && (r.value.value = e);
+    });
+    const fe = s(() => [u.block, u.modifier(`size-${Z.value}`), {
+      [u.modifier("disabled")]: g.value,
+      [u.modifier("disabled-input")]: a.disabledInput,
+      [u.modifier("error")]: F.value,
+      [u.modifier("focus")]: ae.value,
+      [u.modifier("readonly")]: a.readonly,
+      [u.modifier("has-tag")]: y.value.length > 0,
+      [u.modifier("has-prefix")]: !!i.prefix,
+      [u.modifier("has-suffix")]: !!i.suffix || O.value || !!w.value,
+      [u.modifier("has-placeholder")]: !h.value.length
+    }]), ce = s(() => q(q(I, W), ["class", "style"])), L = s(() => Be(I, W)), ve = Ne(X, () => ({
+      ...L.value,
+      ...a.inputAttrs
+    }));
+    return {
+      inputRef: r,
+      render: () => {
+        var e;
+        return d("span", z({
+          class: [fe.value, I.class],
+          style: I.style,
+          onMousedown: le
+        }, ce.value), [d(_e, {
+          onResize: de
+        }, {
+          default: () => [d("span", {
+            ref: p,
+            class: u.element("mirror")
+          }, [y.value.length > 0 ? B.value || n.value : B.value || n.value || a.placeholder])]
+        }), i.prefix && d("span", {
+          class: u.element("prefix")
+        }, [i.prefix()]), d(he, {
+          tag: "span",
+          name: "input-tag-zoom",
+          class: [u.element("inner"), {
+            [u.modifier("nowrap")]: a.tagNowrap
+          }]
+        }, {
+          default: () => {
+            var t;
+            return [y.value.map((l, f) => {
+              var V;
+              return d(Ie, z({
+                key: `tag-${l.value}-${f}`,
+                class: u.element("tag"),
+                visible: !0,
+                nowrap: a.tagNowrap
+              }, l.tagProps, {
+                closable: !g.value && !a.readonly && (((V = l.tagProps) == null ? void 0 : V.closable) ?? l.closable),
+                onClose: (C) => M(l.value, f, C)
+              }), {
+                default: () => {
+                  var C, _;
+                  return [((C = i.tag) == null ? void 0 : C.call(i, {
+                    data: l.raw
+                  })) ?? ((_ = a.formatTag) == null ? void 0 : _.call(a, l.raw)) ?? l.label];
+                }
+              });
+            }), d("input", z(ve.value, {
+              ref: r,
+              key: "input-tag-input",
+              class: u.element("input"),
+              style: A,
+              value: n.value,
+              placeholder: y.value.length === 0 ? a.placeholder : void 0,
+              disabled: g.value,
+              readonly: a.readonly || a.disabledInput,
+              "aria-invalid": F.value ? !0 : ((t = a.inputAttrs) == null ? void 0 : t["aria-invalid"]) ?? L.value["aria-invalid"],
+              onInput: te,
+              onKeydown: se,
+              onFocus: oe,
+              onBlur: re,
+              onCompositionstart: E,
+              onCompositionupdate: E,
+              onCompositionend: E
+            }), null)];
+          }
+        }), O.value && d(we, {
+          as: "button",
+          "aria-label": R("common.clearTarget", {
+            target: R("common.tag")
+          }),
+          class: u.element("clear-btn"),
+          onClick: ue,
+          onMousedown: (t) => t.stopPropagation()
+        }, {
+          default: () => [d(xe, null, null)]
+        }), (i.suffix || !!w.value) && d("span", {
+          class: u.element("suffix")
+        }, [(e = i.suffix) == null ? void 0 : e.call(i), !!w.value && d(Te, {
+          type: w.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 {
+  aa 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,185 @@
+import { defineComponent as P, toRefs as T, inject as W, toRef as y, ref as k, computed as d, watch as S, createVNode as o, mergeProps as z, nextTick as w, Fragment as E, resolveComponent as K } from "vue";
+import U from "../_components/icon-hover/index.vue.js";
+import { radioGroupKey as X } from "./context.js";
+import { isUndefined as B, isNull as q } from "../../_utils/is.js";
+import { useFormItem as J, useFormItemControl as L } from "../../_hooks/use-form-item.js";
+import { getClassNameMixin as Q } from "../../_utils/config.js";
+import { omit as Y } from "../../_utils/omit.js";
+import { useSize as Z } from "../../_hooks/use-size.js";
+const ie = /* @__PURE__ */ P({
+  name: "Radio",
+  inheritAttrs: !1,
+  components: {
+    IconHover: U
+  },
+  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": (t) => !0,
+    /**
+     * @zh 值改变时触发
+     * @en Trigger when the value changes
+     * @param { RadioValue } value
+     * @param {Event} ev
+     */
+    change: (t, c) => !0
+  },
+  /**
+   * @zh 自定义单选框
+   * @en Custom radio
+   * @slot radio
+   * @binding {boolean} checked
+   * @binding {boolean} disabled
+   * @version 2.18.0
+   */
+  setup(t, {
+    attrs: c,
+    emit: h,
+    slots: m
+  }) {
+    const n = Q("radio"), {
+      modelValue: N
+    } = T(t), e = t.uninjectGroupContext ? void 0 : W(X, void 0), {
+      formItemCtx: R,
+      mergedDisabled: j,
+      mergedSize: F,
+      eventHandlers: v
+    } = J({
+      disabled: y(t, "disabled"),
+      size: y(t, "size")
+    }), {
+      mergedSize: V
+    } = Z(F), I = L(e ? {} : R, () => ({
+      id: t.id,
+      ...Object.fromEntries(Object.entries(c).filter(([l]) => l.startsWith("aria-")))
+    })), s = k(null), f = k(t.defaultChecked), g = d(() => (e == null ? void 0 : e.name) === "XRadioGroup"), b = d(() => (e == null ? void 0 : e.type) ?? t.type), r = d(() => (e == null ? void 0 : e.disabled) || j.value), _ = d(() => (e == null ? void 0 : e.size) ?? V.value), $ = d(() => t.name ?? (e == null ? void 0 : e.inputName)), u = d(() => g.value ? (e == null ? void 0 : e.value) === (t.value ?? !0) : B(t.modelValue) ? f.value : t.modelValue === (t.value ?? !0));
+    S(N, (l) => {
+      (B(l) || q(l)) && (f.value = !1);
+    }), S(u, (l, a) => {
+      l !== a && (f.value = l, s.value && (s.value.checked = l));
+    });
+    const p = (l) => {
+      var a, i;
+      (i = (a = v.value) == null ? void 0 : a.onFocus) == null || i.call(a, l);
+    }, A = (l) => {
+      var a, i;
+      (i = (a = v.value) == null ? void 0 : a.onBlur) == null || i.call(a, l);
+    }, D = (l) => {
+      l.stopPropagation();
+    }, O = (l) => {
+      var a, i;
+      f.value = !0, g.value ? e == null || e.handleChange(t.value ?? !0, l) : (h("update:modelValue", t.value ?? !0), h("change", t.value ?? !0, l), (i = (a = v.value) == null ? void 0 : a.onChange) == null || i.call(a, l)), w(() => {
+        s.value && s.value.checked !== u.value && (s.value.checked = u.value);
+      });
+    }, C = d(() => [`${b.value === "button" ? n.element("button") : n.block}`, n.modifier(`size-${_.value}`), c.class, {
+      [n.modifier("checked")]: u.value,
+      [n.modifier("disabled")]: r.value
+    }]), H = d(() => Y(c, ["class", "style", ...Object.keys(c).filter((l) => l.startsWith("aria-"))])), M = () => o(E, null, [o(K("icon-hover"), {
+      class: `${n.block}-icon-hover`,
+      disabled: r.value || u.value
+    }, {
+      default: () => [o("span", {
+        class: `${n.block}-icon`
+      }, null)]
+    }), m.default && o("span", {
+      class: n.element("label")
+    }, [m.default()])]);
+    return () => {
+      var l, a;
+      return o("label", z({
+        class: C.value,
+        style: c.style
+      }, H.value), [o("input", z(I.value, {
+        ref: s,
+        type: "radio",
+        checked: u.value,
+        "aria-checked": u.value,
+        value: t.value,
+        name: $.value,
+        class: n.element("target"),
+        disabled: r.value,
+        onClick: D,
+        onChange: O,
+        onFocus: p,
+        onBlur: A
+      }), null), b.value === "radio" ? ((a = m.radio ?? ((l = e == null ? void 0 : e.slots) == null ? void 0 : l.radio)) == null ? void 0 : a({
+        checked: u.value,
+        disabled: r.value
+      })) ?? M() : o("span", {
+        class: n.element("button--content")
+      }, [m.default && m.default()])]);
+    };
+  }
+});
+export {
+  ie as default
+};