x-next 1.0.1 → 1.1.0

package/dist/es/components/form-select/Select.js

@@ -0,0 +1,801 @@
+import { defineComponent as Ae, toRefs as Ne, useId as je, computed as i, ref as f, watch as H, nextTick as De, watchEffect as Re, createVNode as m, mergeProps as A, isVNode as Te } from "vue";
+import { isObject as N, isFunction as y, isArray as _e, isNumber as Ke, isString as Ie, isBoolean as $e, isUndefined as S, isNull as ze, isEmptyObject as He } from "../../_utils/is.js";
+import { getKeyFromValue as M, isGroupOptionInfo as Me, isValidOption as Ue, hasEmptyStringKey as Ge } from "./utils.js";
+import { Trigger as U } from "../trigger/index.js";
+import G from "../_components/select-view/select-view.js";
+import We from "./SelectDropdown.vue.js";
+import Ye from "./SelectOption.vue.js";
+import qe from "./SelectOptionGroup.vue.js";
+import Je from "../virtual-list-v2/virtual-list.vue.js";
+import { useSelect as Qe } from "./hooks/use-select.js";
+import { useTrigger as Xe } from "../../_hooks/use-trigger.js";
+import { useFormItem as Ze } from "../../_hooks/use-form-item.js";
+import { useLocale as et } from "../../locale/index.js";
+import { debounce as tt } from "../../_utils/debounce.js";
+import { getClassNameMixin as at } from "../../_utils/config.js";
+import { omit as lt } from "../../_utils/omit.js";
+import nt from "../../_utils/pick.js";
+function ot(t) {
+  return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !Te(t);
+}
+const W = ["id", "aria-label", "aria-labelledby", "aria-describedby"], ut = {
+  value: "value",
+  label: "label",
+  disabled: "disabled",
+  tagProps: "tagProps",
+  render: "render"
+}, Ct = /* @__PURE__ */ Ae({
+  name: "Select",
+  components: {
+    Trigger: U,
+    SelectView: G
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * @zh 是否开启多选模式（多选模式默认开启搜索）
+     * @en Whether to open multi-select mode (The search is turned on by default in the multi-select mode)
+     */
+    multiple: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 绑定值
+     * @en Value
+     */
+    modelValue: {
+      type: [String, Number, Boolean, Object, Array],
+      default: void 0
+    },
+    /**
+     * @zh 默认值（非受控模式）
+     * @en Default value (uncontrolled mode)
+     * @defaultValue '' \| []
+     */
+    defaultValue: {
+      type: [String, Number, Boolean, Object, Array],
+      default: (t) => t.multiple ? [] : ""
+    },
+    /**
+     * @zh 输入框的值
+     * @en The value of the input
+     * @vModel
+     */
+    inputValue: {
+      type: String
+    },
+    /**
+     * @zh 输入框的默认值（非受控模式）
+     * @en The default value of the input (uncontrolled mode)
+     */
+    defaultInputValue: {
+      type: String,
+      default: ""
+    },
+    /**
+     * @zh 选择框的大小
+     * @en The size of the select
+     * @values 'mini','small','medium','large'
+     * @defaultValue 'medium'
+     */
+    size: {
+      type: String
+    },
+    /**
+     * @zh 占位符
+     * @en Placeholder
+     */
+    placeholder: String,
+    /**
+     * @zh 是否为加载中状态
+     * @en Whether it is loading state
+     */
+    loading: {
+      type: Boolean,
+      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 Whether to allow clear
+     */
+    allowClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否允许搜索
+     * @en Whether to allow searching
+     * @defaultValue false (single) \| true (multiple)
+     */
+    allowSearch: {
+      type: [Boolean, Object],
+      default: (t) => !!t.multiple
+    },
+    /**
+     * @zh 是否允许创建
+     * @en Whether to allow creation
+     */
+    allowCreate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 多选模式下，最多显示的标签数量。0 表示不限制
+     * @en In multi-select mode, the maximum number of labels displayed. 0 means unlimited
+     */
+    maxTagCount: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 弹出框的挂载容器
+     * @en Mount container for popup
+     */
+    popupContainer: {
+      type: [String, Object]
+    },
+    /**
+     * @zh 是否显示输入框的边框
+     * @en Whether to display the border of the input box
+     */
+    bordered: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否在无值时默认选择第一个选项
+     * @en Whether to select the first option by default when there is no value
+     * @version 2.43.0
+     */
+    defaultActiveFirstOption: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 是否显示下拉菜单
+     * @en Whether to show the dropdown
+     * @vModel
+     */
+    popupVisible: {
+      type: Boolean,
+      default: void 0
+    },
+    /**
+     * @zh 弹出框默认是否可见（非受控模式）
+     * @en Whether the popup is visible by default (uncontrolled mode)
+     */
+    defaultPopupVisible: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否在下拉菜单关闭时销毁元素
+     * @en Whether to destroy the element when the dropdown is closed
+     */
+    unmountOnClose: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否过滤选项
+     * @en Whether to filter options
+     */
+    filterOption: {
+      type: [Boolean, Function],
+      default: !0
+    },
+    /**
+     * @zh 选项数据
+     * @en Option data
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 传递虚拟列表属性，传入此参数以开启虚拟滚动 [VirtualListProps](#VirtualListProps)
+     * @en Pass the virtual list attribute, pass in this parameter to turn on virtual scrolling [VirtualListProps](#VirtualListProps)
+     * @type VirtualListProps
+     */
+    virtualListProps: {
+      type: Object
+    },
+    /**
+     * @zh 下拉菜单的触发器属性
+     * @en Trigger props of the drop-down menu
+     * @type TriggerProps
+     */
+    triggerProps: {
+      type: Object
+    },
+    /**
+     * @zh 格式化显示内容
+     * @en Format display content
+     */
+    formatLabel: {
+      type: Function
+    },
+    /**
+     * @zh 自定义值中不存在的选项
+     * @en Options that do not exist in custom values
+     * @version 2.10.0
+     */
+    fallbackOption: {
+      type: [Boolean, Function],
+      default: !0
+    },
+    /**
+     * @zh 是否在下拉菜单中显示额外选项
+     * @en Options that do not exist in custom values
+     * @version 2.10.0
+     */
+    showExtraOptions: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * @zh 用于确定选项键值的属性名
+     * @en Used to determine the option key value attribute name
+     * @version 2.18.0
+     */
+    valueKey: {
+      type: String,
+      default: "value"
+    },
+    /**
+     * @zh 触发搜索事件的延迟时间
+     * @en Delay time to trigger search event
+     * @version 2.18.0
+     */
+    searchDelay: {
+      type: Number,
+      default: 500
+    },
+    /**
+     * @zh 多选时最多的选择个数
+     * @en Maximum number of choices in multiple choice
+     * @version 2.18.0
+     */
+    limit: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * @zh 自定义 `SelectOptionData` 中的字段
+     * @en Customize fields in `SelectOptionData`
+     * @version 2.22.0
+     */
+    fieldNames: {
+      type: Object
+    },
+    /**
+     * @zh 是否开启虚拟滚动条
+     * @en Whether to enable virtual scroll bar
+     * @version 2.38.0
+     */
+    scrollbar: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    /**
+     * @zh 空状态时是否显示header
+     * @en Whether to display the header in the empty state
+     */
+    showHeaderOnEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 空状态时是否显示footer
+     * @en Whether to display the footer in the empty state
+     */
+    showFooterOnEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    tagNowrap: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    "update:modelValue": (t) => !0,
+    "update:inputValue": (t) => !0,
+    "update:popupVisible": (t) => !0,
+    /**
+     * @zh 值发生改变时触发
+     * @en Triggered when the value changes
+     * @param { string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[] } value
+     */
+    change: (t) => !0,
+    /**
+     * @zh 输入框的值发生改变时触发
+     * @en Triggered when the value of the input changes
+     * @param {string} inputValue
+     */
+    inputValueChange: (t) => !0,
+    /**
+     * @zh 下拉框的显示状态改变时触发
+     * @en Triggered when the display state of the drop-down box changes
+     * @param {boolean} visible
+     */
+    popupVisibleChange: (t) => !0,
+    /**
+     * @zh 点击清除按钮时触发
+     * @en Triggered when the clear button is clicked
+     */
+    clear: (t) => !0,
+    /**
+     * @zh 点击标签的删除按钮时触发
+     * @en Triggered when the delete button of the label is clicked
+     * @param {string | number | boolean | Record<string, any> | undefined} removed
+     */
+    remove: (t) => !0,
+    /**
+     * @zh 用户搜索时触发
+     * @en Triggered when the user searches
+     * @param {string} inputValue
+     */
+    search: (t) => !0,
+    /**
+     * @zh 下拉菜单发生滚动时触发
+     * @en Triggered when the drop-down scrolls
+     */
+    dropdownScroll: (t) => !0,
+    /**
+     * @zh 下拉菜单滚动到底部时触发
+     * @en Triggered when the drop-down menu is scrolled to the bottom
+     */
+    dropdownReachBottom: (t) => !0,
+    /**
+     * @zh 多选超出限制时触发
+     * @en Triggered when multiple selection exceeds the limit
+     * @param {string | number | boolean | Record<string, any> | undefined} value
+     * @param {Event} ev
+     * @version 2.18.0
+     */
+    exceedLimit: (t, o) => !0
+  },
+  /**
+   * @zh 选项为空时的显示内容
+   * @en Display content when the option is empty
+   * @slot empty
+   */
+  /**
+   * @zh 选项内容
+   * @en Display content of options
+   * @slot option
+   * @binding {SelectOptionData} data
+   */
+  /**
+   * @zh 选择框的显示内容
+   * @en Display content of label
+   * @slot label
+   * @binding {SelectOptionData} data
+   */
+  /**
+   * @zh 下拉框的页头
+   * @en The header of the drop-down box
+   * @slot header
+   * @version 2.43.0
+   */
+  /**
+   * @zh 下拉框的页脚
+   * @en The footer of the drop-down box
+   * @slot footer
+   */
+  /**
+   * @zh 选择框的箭头图标
+   * @en Arrow icon for select box
+   * @slot arrow-icon
+   * @version 2.16.0
+   */
+  /**
+   * @zh 选择框的加载中图标
+   * @en Loading icon for select box
+   * @slot loading-icon
+   * @version 2.16.0
+   */
+  /**
+   * @zh 选择框的搜索图标
+   * @en Search icon for select box
+   * @slot search-icon
+   * @version 2.16.0
+   */
+  /**
+   * @zh 前缀元素
+   * @en Prefix
+   * @slot prefix
+   * @version 2.22.0
+   */
+  /**
+   * @zh 自定义触发元素
+   * @en Custom trigger element
+   * @slot trigger
+   * @version 2.22.0
+   */
+  setup(t, {
+    slots: o,
+    emit: r,
+    attrs: C
+  }) {
+    const {
+      size: Y,
+      disabled: q,
+      error: J,
+      options: Q,
+      filterOption: h,
+      valueKey: p,
+      multiple: j,
+      popupVisible: X,
+      defaultPopupVisible: Z,
+      showExtraOptions: ee,
+      modelValue: te,
+      fieldNames: V,
+      loading: ae,
+      defaultActiveFirstOption: le
+    } = Ne(t), ne = at("select"), D = je(), B = `${D}-listbox`, x = (e) => `${D}-option-${encodeURIComponent(e)}`, {
+      mergedSize: oe,
+      mergedDisabled: F,
+      mergedError: ue,
+      eventHandlers: re
+    } = Ze({
+      size: Y,
+      disabled: q,
+      error: J
+    }), {
+      t: ie
+    } = et(), ce = i(() => t.virtualListProps ? "div" : "li"), P = i(() => N(t.allowSearch) && !!t.allowSearch.retainInputValue);
+    i(() => {
+      if (y(t.formatLabel))
+        return (e) => {
+          const l = u.get(e.value);
+          return t.formatLabel(l);
+        };
+    });
+    const R = f(), T = f({}), _ = f(), {
+      computedPopupVisible: c,
+      handlePopupVisibleChange: w
+    } = Xe({
+      popupVisible: X,
+      defaultPopupVisible: Z,
+      emit: r
+    }), k = f(t.defaultValue), E = i(() => {
+      const e = t.modelValue ?? k.value;
+      return (_e(e) ? e : e || Ke(e) || Ie(e) || $e(e) ? [e] : []).map((a) => ({
+        value: a,
+        key: M(a, t.valueKey)
+      }));
+    });
+    H(te, (e) => {
+      (S(e) || ze(e)) && (k.value = j.value ? [] : e);
+    });
+    const d = i(() => E.value.map((e) => e.key)), K = i(() => ({
+      ...ut,
+      ...V == null ? void 0 : V.value
+    })), I = f(), de = (e) => {
+      const l = {};
+      return e.forEach((a) => {
+        l[a] = u.get(a);
+      }), l;
+    }, se = (e) => {
+      I.value = de(e);
+    }, pe = (e) => y(t.fallbackOption) ? t.fallbackOption(e) : {
+      [K.value.value]: e,
+      [K.value.label]: String(N(e) ? e[p == null ? void 0 : p.value] : e)
+    }, fe = () => {
+      const e = [], l = [];
+      if (t.allowCreate || t.fallbackOption) {
+        for (const a of E.value)
+          if (!l.includes(a.key) && a.value !== "") {
+            const n = u.get(a.key);
+            (!n || n.origin === "extraOptions") && (e.push(a), l.push(a.key));
+          }
+      }
+      if (t.allowCreate && s.value) {
+        const a = M(s.value);
+        if (!l.includes(a)) {
+          const n = u.get(a);
+          (!n || n.origin === "extraOptions") && e.push({
+            value: s.value,
+            key: a
+          });
+        }
+      }
+      return e;
+    }, v = f([]), me = i(() => v.value.map((e) => {
+      var n;
+      let l = pe(e.value);
+      const a = (n = I.value) == null ? void 0 : n[e.key];
+      return !S(a) && !He(a) && (l = {
+        ...l,
+        ...a
+      }), l;
+    }));
+    De(() => {
+      Re(() => {
+        var l;
+        const e = fe();
+        if (e.length !== v.value.length)
+          v.value = e;
+        else if (e.length > 0) {
+          for (let a = 0; a < e.length; a++)
+            if (e[a].key !== ((l = v.value[a]) == null ? void 0 : l.key)) {
+              v.value = e;
+              break;
+            }
+        }
+      });
+    });
+    const $ = f(t.defaultInputValue), s = i(() => t.inputValue ?? $.value);
+    H(c, (e) => {
+      !e && !P.value && s.value && g("");
+    });
+    const ve = (e) => {
+      var l;
+      return t.multiple ? e.map((a) => {
+        var n;
+        return ((n = u.get(a)) == null ? void 0 : n.value) ?? "";
+      }) : ((l = u.get(e[0])) == null ? void 0 : l.value) ?? (Ge(u) ? void 0 : "");
+    }, b = (e) => {
+      var a, n;
+      const l = ve(e);
+      k.value = l, r("update:modelValue", l), r("change", l), (n = (a = re.value) == null ? void 0 : a.onChange) == null || n.call(a), se(e);
+    }, g = (e) => {
+      $.value = e, r("update:inputValue", e), r("inputValueChange", e);
+    }, be = (e, l) => {
+      if (t.multiple) {
+        if (d.value.includes(e)) {
+          const a = d.value.filter((n) => n !== e);
+          b(a);
+        } else if (Ce.value.includes(e))
+          if (t.limit > 0 && d.value.length >= t.limit) {
+            const a = u.get(e);
+            r("exceedLimit", a == null ? void 0 : a.value, l);
+          } else {
+            const a = d.value.concat(e);
+            b(a);
+          }
+        P.value || g("");
+      } else {
+        if (e !== d.value[0] && b([e]), P.value) {
+          const a = u.get(e);
+          a && g(a.label);
+        }
+        w(!1);
+      }
+    }, ge = tt((e) => {
+      r("search", e);
+    }, t.searchDelay), ye = (e) => {
+      e !== s.value && (c.value || w(!0), g(e), t.allowSearch && ge(e));
+    }, he = (e) => {
+      const l = u.get(e), a = d.value.filter((n) => n !== e);
+      b(a), r("remove", l == null ? void 0 : l.value);
+    }, Ve = (e) => {
+      e == null || e.stopPropagation();
+      const l = d.value.filter((a) => {
+        var n;
+        return (n = u.get(a)) == null ? void 0 : n.disabled;
+      });
+      b(l), g(""), r("clear", e);
+    }, we = (e) => {
+      r("dropdownScroll", e);
+    }, Oe = (e) => {
+      r("dropdownReachBottom", e);
+    }, {
+      validOptions: z,
+      optionInfoMap: u,
+      validOptionInfos: Se,
+      enabledOptionKeys: Ce,
+      activeKey: O,
+      handleKeyDown: Be
+    } = Qe({
+      multiple: j,
+      options: Q,
+      extraOptions: me,
+      inputValue: s,
+      filterOption: h,
+      showExtraOptions: ee,
+      component: ce,
+      valueKey: p,
+      fieldNames: V,
+      loading: ae,
+      popupVisible: c,
+      valueKeys: d,
+      dropdownRef: R,
+      optionRefs: T,
+      virtualListRef: _,
+      defaultActiveFirstOption: le,
+      onSelect: be,
+      onPopupVisibleChange: w,
+      getOptionId: x
+    }), xe = i(() => lt(C, [...W])), Fe = i(() => ({
+      ...nt(C, [...W]),
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": String(c.value),
+      "aria-controls": B,
+      "aria-activedescendant": c.value && !S(O.value) ? x(O.value) : void 0,
+      "aria-autocomplete": t.allowSearch || t.allowCreate ? "list" : "none",
+      "aria-label": C["aria-label"] ?? t.placeholder ?? ie("common.select")
+    })), Pe = i(() => {
+      const e = [];
+      for (const l of E.value) {
+        const a = u.get(l.key);
+        a && e.push({
+          ...a,
+          value: l.key,
+          label: (a == null ? void 0 : a.label) ?? String(N(l.value) ? l.value[p == null ? void 0 : p.value] : l.value),
+          closable: !(a != null && a.disabled),
+          tagProps: a == null ? void 0 : a.tagProps
+        });
+      }
+      return e;
+    }), ke = (e) => {
+      if (y(o.option)) {
+        const l = o.option;
+        return () => l({
+          data: e.raw
+        });
+      }
+      return y(e.render) ? e.render : () => e.label;
+    }, L = (e) => {
+      if (Me(e)) {
+        let l;
+        return m(qe, {
+          key: e.key,
+          label: e.label
+        }, ot(l = e.options.map((a) => L(a))) ? l : {
+          default: () => [l]
+        });
+      }
+      return Ue(e, {
+        inputValue: s.value,
+        filterOption: h == null ? void 0 : h.value
+      }) ? m(Ye, {
+        ref: (l) => {
+          l != null && l.$el && (T.value[e.key] = l.$el);
+        },
+        key: e.key,
+        value: e.value,
+        label: e.label,
+        disabled: e.disabled,
+        internal: !0
+      }, {
+        default: ke(e)
+      }) : null;
+    }, Ee = () => m(We, {
+      ref: R,
+      id: B,
+      multiple: t.multiple,
+      loading: t.loading,
+      empty: Se.value.length === 0,
+      virtualList: !!t.virtualListProps,
+      scrollbar: t.scrollbar,
+      showHeaderOnEmpty: t.showHeaderOnEmpty,
+      showFooterOnEmpty: t.showFooterOnEmpty,
+      onScroll: we,
+      onReachBottom: Oe
+    }, {
+      default: () => {
+        var e;
+        return [...((e = o.default) == null ? void 0 : e.call(o)) ?? [], ...z.value.map(L)];
+      },
+      "virtual-list": () => (
+        // @ts-ignore
+        m(Je, A(t.virtualListProps, {
+          ref: _,
+          data: z.value
+        }), {
+          item: ({
+            item: e
+          }) => L(e)
+        })
+      ),
+      // 仅在用户真的提供了插槽时才透传，否则 v-slots 对象里的空 key
+      // 会让 SelectDropdown 的 $slots.empty 判定为真，从而跳过默认空态
+      ...o.empty ? {
+        empty: o.empty
+      } : {},
+      ...o.header ? {
+        header: o.header
+      } : {},
+      ...o.footer ? {
+        footer: o.footer
+      } : {}
+    }), Le = ({
+      data: e
+    }) => {
+      var l, a;
+      if ((o.label || y(t.formatLabel)) && e) {
+        const n = u.get(e.value);
+        if (n != null && n.raw)
+          return ((l = o.label) == null ? void 0 : l.call(o, {
+            data: n.raw
+          })) ?? ((a = t.formatLabel) == null ? void 0 : a.call(t, n.raw));
+      }
+      return (e == null ? void 0 : e.label) ?? "";
+    };
+    return () => m(U, A({
+      trigger: "click",
+      position: "bl",
+      popupOffset: 4,
+      animationName: "x-slide-dynamic-origin",
+      hideEmpty: !0,
+      preventFocus: !0,
+      autoFitPopupWidth: !0,
+      autoFitTransformOrigin: !0,
+      disabled: F.value,
+      popupVisible: c.value,
+      unmountOnClose: t.unmountOnClose,
+      clickToClose: !(t.allowSearch || t.allowCreate),
+      popupContainer: t.popupContainer,
+      onPopupVisibleChange: w
+    }, t.triggerProps), {
+      default: () => {
+        var e;
+        return [((e = o.trigger) == null ? void 0 : e.call(o, {
+          popupVisible: c.value,
+          disabled: F.value,
+          listboxId: B,
+          activeDescendant: c.value && !S(O.value) ? x(O.value) : void 0
+        })) ?? m(G, A({
+          class: ne.block,
+          modelValue: Pe.value,
+          inputValue: s.value,
+          multiple: t.multiple,
+          disabled: F.value,
+          error: ue.value,
+          loading: t.loading,
+          allowClear: t.allowClear,
+          allowCreate: t.allowCreate,
+          allowSearch: !!t.allowSearch,
+          opened: c.value,
+          maxTagCount: t.maxTagCount,
+          placeholder: t.placeholder,
+          bordered: t.bordered,
+          size: oe.value,
+          tagNowrap: t.tagNowrap,
+          inputAttrs: Fe.value
+        }, xe.value, {
+          onInputValueChange: ye,
+          onRemove: he,
+          onClear: Ve,
+          onKeydown: Be
+        }), {
+          label: Le,
+          prefix: o.prefix,
+          "arrow-icon": o["arrow-icon"],
+          "loading-icon": o["loading-icon"],
+          "search-icon": o["search-icon"]
+        })];
+      },
+      content: Ee
+    });
+  }
+});
+export {
+  Ct as default
+};