x-next 1.0.0 → 1.1.0

package/dist/es/components/form-select/SelectDropdown.vue.js

@@ -0,0 +1,59 @@
+import m from "./SelectDropdown.vue2.js";
+import { resolveComponent as p, openBlock as l, createElementBlock as r, normalizeClass as s, renderSlot as o, createCommentVNode as a, createBlock as t, resolveDynamicComponent as i, withDirectives as d, mergeProps as u, withCtx as y, createElementVNode as c, vShow as f } from "vue";
+import v from "../../_virtual/_plugin-vue_export-helper.js";
+const h = ["id", "aria-multiselectable", "aria-busy"];
+function $(e, k, b, w, N, S) {
+  const n = p("spin");
+  return l(), r("div", {
+    id: e.id,
+    class: s(e.cls),
+    role: "listbox",
+    "aria-multiselectable": e.multiple || void 0,
+    "aria-busy": e.loading || void 0
+  }, [
+    e.$slots.header && (!e.empty || e.showHeaderOnEmpty) ? (l(), r("div", {
+      key: 0,
+      class: s(e.className.element("header"))
+    }, [
+      o(e.$slots, "header")
+    ], 2)) : a("", !0),
+    e.loading ? (l(), t(n, {
+      key: 1,
+      class: s(e.className.element("loading"))
+    }, null, 8, ["class"])) : e.empty ? (l(), r("div", {
+      key: 2,
+      class: s(e.className.element("empty"))
+    }, [
+      o(e.$slots, "empty", {}, () => [
+        (l(), t(i("Empty"), { component: "select" }))
+      ])
+    ], 2)) : a("", !0),
+    e.virtualList && !e.loading && !e.empty ? o(e.$slots, "virtual-list", { key: 3 }) : a("", !0),
+    e.virtualList ? a("", !0) : d((l(), t(i(e.displayScrollbar ? "ScrollbarComponent" : "div"), u({
+      key: 4,
+      ref: "wrapperComRef",
+      class: e.className.element("list-wrapper")
+    }, e.scrollbarProps, { onScroll: e.handleScroll }), {
+      default: y(() => [
+        c("ul", {
+          class: s(e.className.element("list"))
+        }, [
+          o(e.$slots, "default")
+        ], 2)
+      ]),
+      _: 3
+    }, 16, ["class", "onScroll"])), [
+      [f, !e.loading && !e.empty]
+    ]),
+    e.$slots.footer && (!e.empty || e.showFooterOnEmpty) ? (l(), r("div", {
+      key: 5,
+      class: s(e.className.element("footer"))
+    }, [
+      o(e.$slots, "footer")
+    ], 2)) : a("", !0)
+  ], 10, h);
+}
+const B = /* @__PURE__ */ v(m, [["render", $]]);
+export {
+  B as default
+};

package/dist/es/components/form-select/SelectDropdown.vue2.js

@@ -0,0 +1,69 @@
+import { defineComponent as b, toRefs as y, computed as h } from "vue";
+import { Empty as B } from "../empty/index.js";
+import { Spin as S } from "../spin/index.js";
+import { Scrollbar as R } from "../scrollbar-v2/index.js";
+import { useComponentRef as g } from "../../_hooks/use-component-ref.js";
+import { useScrollbar as w } from "../../_hooks/use-scrollbar.js";
+import { getClassNameMixin as C } from "../../_utils/config.js";
+const j = b({
+  name: "SelectDropdown",
+  components: {
+    ScrollbarComponent: R,
+    Empty: B,
+    Spin: S
+  },
+  props: {
+    id: String,
+    multiple: Boolean,
+    loading: Boolean,
+    empty: Boolean,
+    virtualList: Boolean,
+    bottomOffset: {
+      type: Number,
+      default: 0
+    },
+    scrollbar: {
+      type: [Boolean, Object],
+      default: !0
+    },
+    onScroll: {
+      type: [Function, Array]
+    },
+    onReachBottom: {
+      type: [Function, Array]
+    },
+    showHeaderOnEmpty: {
+      type: Boolean,
+      default: !1
+    },
+    showFooterOnEmpty: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["scroll", "reachBottom"],
+  setup(t, { emit: r, slots: l }) {
+    const { scrollbar: n } = y(t), o = C("select--dropdown"), { componentRef: a, elementRef: m } = g("containerRef"), { displayScrollbar: s, scrollbarProps: c } = w(n), p = (e) => {
+      const { scrollTop: i, scrollHeight: d, offsetHeight: u } = e.target;
+      d - (i + u) <= t.bottomOffset && r("reachBottom", e), r("scroll", e);
+    }, f = h(() => [
+      o.block,
+      {
+        [o.modifier("has-header")]: !!l.header,
+        [o.modifier("has-footer")]: !!l.footer
+      }
+    ]);
+    return {
+      className: o,
+      cls: f,
+      wrapperRef: m,
+      wrapperComRef: a,
+      handleScroll: p,
+      displayScrollbar: s,
+      scrollbarProps: c
+    };
+  }
+});
+export {
+  j as default
+};

package/dist/es/components/form-select/SelectOption.vue.js

@@ -0,0 +1,60 @@
+import c from "./SelectOption.vue2.js";
+import { resolveComponent as u, withDirectives as f, openBlock as s, createBlock as n, resolveDynamicComponent as p, normalizeClass as o, withCtx as i, createElementBlock as a, renderSlot as l, createCommentVNode as t, createTextVNode as r, toDisplayString as d, vShow as k } from "vue";
+import b from "../../_virtual/_plugin-vue_export-helper.js";
+function h(e, $, v, C, N, y) {
+  const m = u("checkbox");
+  return f((s(), n(p(e.component), {
+    ref: "itemRef",
+    id: e.optionId,
+    role: "option",
+    "aria-selected": e.isSelected,
+    "aria-disabled": e.disabled || void 0,
+    class: o([e.cls, { [e.className.modifier("has-suffix")]: !!e.$slots.suffix }]),
+    onClick: e.handleClick,
+    onMouseenter: e.handleMouseEnter,
+    onMouseleave: e.handleMouseLeave
+  }, {
+    default: i(() => [
+      e.$slots.icon ? (s(), a("span", {
+        key: 0,
+        class: o(e.className.element("icon"))
+      }, [
+        l(e.$slots, "icon")
+      ], 2)) : t("", !0),
+      e.selectCtx && e.selectCtx.multiple ? (s(), n(m, {
+        key: 1,
+        class: o(e.className.element("checkbox")),
+        "model-value": e.isSelected,
+        disabled: e.disabled,
+        "uninject-group-context": ""
+      }, {
+        default: i(() => [
+          l(e.$slots, "default", {}, () => [
+            r(d(e.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 8, ["class", "model-value", "disabled"])) : (s(), a("span", {
+        key: 2,
+        class: o(e.className.element("content"))
+      }, [
+        l(e.$slots, "default", {}, () => [
+          r(d(e.label), 1)
+        ])
+      ], 2)),
+      e.$slots.suffix ? (s(), a("span", {
+        key: 3,
+        class: o(e.className.element("suffix"))
+      }, [
+        l(e.$slots, "suffix")
+      ], 2)) : t("", !0)
+    ]),
+    _: 3
+  }, 40, ["id", "aria-selected", "aria-disabled", "class", "onClick", "onMouseenter", "onMouseleave"])), [
+    [k, e.isValid]
+  ]);
+}
+const w = /* @__PURE__ */ b(c, [["render", h]]);
+export {
+  w as default
+};

package/dist/es/components/form-select/SelectOption.vue2.js

@@ -0,0 +1,130 @@
+import { defineComponent as B, toRefs as M, inject as N, getCurrentInstance as P, ref as r, watch as A, computed as i, onMounted as _, onUpdated as w, reactive as E, onBeforeUnmount as R } from "vue";
+import U from "../form-checkbox/Checkbox.js";
+import { selectInjectionKey as q } from "./context.js";
+import { getKeyFromValue as F, isValidOption as L } from "./utils.js";
+import { isEqual as T } from "../../_utils/is-equal.js";
+import { getClassNameMixin as z } from "../../_utils/config.js";
+const X = B({
+  name: "Option",
+  components: {
+    Checkbox: U
+  },
+  props: {
+    /**
+     * @zh 选项值（如不填，会从内容中获取）
+     * @en Option value (if not filled, it will be obtained from the content)
+     */
+    value: {
+      type: [String, Number, Boolean, Object],
+      default: void 0
+    },
+    /**
+     * @zh 选项标签（如不填，会从内容中获取）
+     * @en Option label (if not filled, it will be obtained from the content)
+     */
+    label: String,
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: Boolean,
+    /**
+     * @zh 展示的标签属性
+     * @en Displayed tag attributes
+     * @version 2.8.0
+     */
+    tagProps: {
+      type: Object
+    },
+    /**
+     * @zh 额外数据。2.18.0 版本废弃，可使用对象形式的 value 扩展数据
+     * @en Extra data
+     * @version 2.10.0
+     */
+    extra: {
+      type: Object
+    },
+    /**
+     * @zh 用于手动指定选项的 index
+     * @en index for manually specifying option
+     * @version 2.20.0
+     */
+    index: {
+      type: Number
+    },
+    // private
+    internal: Boolean
+  },
+  setup(o) {
+    const { disabled: v, tagProps: s, index: g } = M(o), a = z("select--option"), e = N(q, void 0), l = P(), u = r(), f = r(s.value);
+    A(s, (n, k) => {
+      T(n, k) || (f.value = n);
+    });
+    const d = r(""), m = i(() => o.value ?? o.label ?? d.value), c = i(() => o.label ?? d.value), t = i(() => F(m.value, e == null ? void 0 : e.valueKey)), O = i(() => (e == null ? void 0 : e.component) ?? "li"), I = i(() => e == null ? void 0 : e.getOptionId(t.value)), p = () => {
+      if (!o.label && u.value) {
+        const n = u.value.textContent ?? "";
+        d.value !== n && (d.value = n);
+      }
+    };
+    _(() => p()), w(() => p());
+    const b = i(() => (e == null ? void 0 : e.valueKeys.includes(t.value)) ?? !1), K = i(() => (e == null ? void 0 : e.activeKey) === t.value);
+    let y = r(!0);
+    if (!o.internal) {
+      const n = E({
+        raw: {
+          value: m,
+          label: c,
+          disabled: v,
+          tagProps: f
+        },
+        ref: u,
+        index: g,
+        key: t,
+        origin: "slot",
+        value: m,
+        label: c,
+        disabled: v,
+        tagProps: f
+      });
+      y = i(
+        () => L(n, {
+          inputValue: e == null ? void 0 : e.inputValue,
+          filterOption: e == null ? void 0 : e.filterOption
+        })
+      ), l && (e == null || e.addSlotOptionInfo(l.uid, n)), R(() => {
+        l && (e == null || e.removeSlotOptionInfo(l.uid));
+      });
+    }
+    const S = (n) => {
+      o.disabled || e == null || e.onSelect(t.value, n);
+    }, h = () => {
+      o.disabled || e == null || e.setActiveKey(t.value);
+    }, j = () => {
+      o.disabled || e == null || e.setActiveKey();
+    }, V = i(() => [
+      a.block,
+      {
+        [a.modifier("disabled")]: o.disabled,
+        [a.modifier("selected")]: b.value,
+        [a.modifier("active")]: K.value,
+        [a.modifier("multiple")]: e == null ? void 0 : e.multiple
+      }
+    ]);
+    return {
+      className: a,
+      cls: V,
+      selectCtx: e,
+      itemRef: u,
+      component: O,
+      optionId: I,
+      isSelected: b,
+      isValid: y,
+      handleClick: S,
+      handleMouseEnter: h,
+      handleMouseLeave: j
+    };
+  }
+});
+export {
+  X as default
+};

package/dist/es/components/form-select/SelectOptionGroup.vue.js

@@ -0,0 +1,19 @@
+import o from "./SelectOptionGroup.vue2.js";
+import { openBlock as l, createElementBlock as r, Fragment as a, createElementVNode as s, normalizeClass as n, renderSlot as t, createTextVNode as m, toDisplayString as p } from "vue";
+import c from "../../_virtual/_plugin-vue_export-helper.js";
+function i(e, f, d, u, $, _) {
+  return l(), r(a, null, [
+    s("li", {
+      class: n(e.className.element("title"))
+    }, [
+      t(e.$slots, "label", {}, () => [
+        m(p(e.label), 1)
+      ])
+    ], 2),
+    t(e.$slots, "default")
+  ], 64);
+}
+const g = /* @__PURE__ */ c(o, [["render", i]]);
+export {
+  g as default
+};

package/dist/es/components/form-select/SelectOptionGroup.vue2.js

@@ -0,0 +1,28 @@
+import { defineComponent as e } from "vue";
+import { getClassNameMixin as t } from "../../_utils/config.js";
+const p = e({
+  name: "SelectOptionGroup",
+  props: {
+    /**
+     * @zh 选项组的标题
+     * @en Title of option group
+     */
+    label: {
+      type: String
+    }
+  },
+  /**
+   * @zh 选项组的标题
+   * @en Title of option group
+   * @slot label
+   * @version 2.10.0
+   */
+  setup() {
+    return {
+      className: t("select--option--group")
+    };
+  }
+});
+export {
+  p as default
+};

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

@@ -0,0 +1,4 @@
+const e = Symbol("XSelectContext");
+export {
+  e as selectInjectionKey
+};

package/dist/es/components/form-select/hooks/use-options.js

@@ -0,0 +1,95 @@
+import { computed as s, reactive as g, watch as z, ref as f } from "vue";
+import { getOptionInfos as S, getValidOptions as b, isValidOption as F } from "../utils.js";
+import { isNumber as k } from "../../../_utils/is.js";
+const N = {
+  value: "value",
+  label: "label",
+  disabled: "disabled",
+  tagProps: "tagProps",
+  render: "render"
+}, j = ({
+  options: c,
+  extraOptions: v,
+  inputValue: n,
+  filterOption: a,
+  showExtraOptions: d,
+  valueKey: r,
+  fieldNames: l
+}) => {
+  const p = s(() => ({
+    ...N,
+    ...l == null ? void 0 : l.value
+  })), I = g(/* @__PURE__ */ new Map()), m = s(
+    () => Array.from(I.values()).sort((o, t) => k(o.index) && k(t.index) ? o.index - t.index : 0)
+  ), M = s(() => {
+    const o = /* @__PURE__ */ new Map();
+    return {
+      optionInfos: S((c == null ? void 0 : c.value) ?? [], {
+        valueKey: (r == null ? void 0 : r.value) ?? "value",
+        fieldNames: p.value,
+        origin: "options",
+        optionInfoMap: o
+      }),
+      optionInfoMap: o
+    };
+  }), u = s(() => {
+    const o = /* @__PURE__ */ new Map();
+    return {
+      optionInfos: S((v == null ? void 0 : v.value) ?? [], {
+        valueKey: (r == null ? void 0 : r.value) ?? "value",
+        fieldNames: p.value,
+        origin: "extraOptions",
+        optionInfoMap: o
+      }),
+      optionInfoMap: o
+    };
+  }), e = g(/* @__PURE__ */ new Map());
+  z(
+    [m, c ?? f([]), v ?? f([]), r ?? f("value")],
+    () => {
+      e.clear(), m.value.forEach((o, t) => {
+        e.set(o.key, { ...o, index: t });
+      }), M.value.optionInfoMap.forEach((o) => {
+        e.has(o.key) || (o.index = e.size, e.set(o.key, o));
+      }), u.value.optionInfoMap.forEach((o) => {
+        e.has(o.key) || (o.index = e.size, e.set(o.key, o));
+      });
+    },
+    { immediate: !0, deep: !0 }
+  );
+  const A = s(() => {
+    const o = b(M.value.optionInfos, {
+      inputValue: n == null ? void 0 : n.value,
+      filterOption: a == null ? void 0 : a.value
+    });
+    return ((d == null ? void 0 : d.value) ?? !0) && o.push(
+      ...b(u.value.optionInfos, {
+        inputValue: n == null ? void 0 : n.value,
+        filterOption: a == null ? void 0 : a.value
+      })
+    ), o;
+  }), i = s(
+    () => Array.from(e.values()).filter((o) => o.origin === "extraOptions" && (d == null ? void 0 : d.value) === !1 ? !1 : F(o, {
+      inputValue: n == null ? void 0 : n.value,
+      filterOption: a == null ? void 0 : a.value
+    }))
+  ), D = s(
+    () => i.value.filter((o) => !o.disabled).map((o) => o.key)
+  );
+  return {
+    validOptions: A,
+    optionInfoMap: e,
+    validOptionInfos: i,
+    enabledOptionKeys: D,
+    getNextSlotOptionIndex: () => I.size,
+    addSlotOptionInfo: (o, t) => {
+      I.set(o, t);
+    },
+    removeSlotOptionInfo: (o) => {
+      I.delete(o);
+    }
+  };
+};
+export {
+  j as useOptions
+};

package/dist/es/components/form-select/hooks/use-select.js

@@ -0,0 +1,148 @@
+import { ref as J, watch as H, nextTick as P, provide as Q, reactive as X } from "vue";
+import { getRelativeRect as Z } from "../../../_utils/dom.js";
+import { useOptions as $ } from "./use-options.js";
+import { getKeyDownHandler as k, KEYBOARD_KEY as s } from "../../../_utils/keyboard.js";
+import { selectInjectionKey as b } from "../context.js";
+import { isUndefined as r } from "../../../_utils/is.js";
+const le = ({
+  multiple: W,
+  options: y,
+  extraOptions: M,
+  inputValue: E,
+  filterOption: O,
+  showExtraOptions: U,
+  component: Y,
+  valueKey: T,
+  fieldNames: j,
+  loading: i,
+  popupVisible: v,
+  valueKeys: m,
+  dropdownRef: x,
+  optionRefs: p,
+  virtualListRef: a,
+  onSelect: g,
+  onPopupVisibleChange: h,
+  getOptionId: A,
+  enterToOpen: B = !0,
+  defaultActiveFirstOption: D
+}) => {
+  const {
+    validOptions: C,
+    optionInfoMap: w,
+    validOptionInfos: q,
+    enabledOptionKeys: o,
+    getNextSlotOptionIndex: z,
+    addSlotOptionInfo: K,
+    removeSlotOptionInfo: S
+  } = $({
+    options: y,
+    extraOptions: M,
+    inputValue: E,
+    filterOption: O,
+    showExtraOptions: U,
+    valueKey: T,
+    fieldNames: j
+  }), l = J();
+  H(o, (e) => {
+    (r(l.value) || !e.includes(l.value)) && (l.value = e[0]);
+  });
+  const _ = (e) => {
+    l.value = e;
+  }, I = (e) => {
+    const t = o.value.length;
+    if (t === 0)
+      return;
+    if (r(l.value))
+      return e === "down" ? o.value[0] : o.value[t - 1];
+    const n = o.value.indexOf(l.value), c = (t + n + (e === "up" ? -1 : 1)) % t;
+    return o.value[c];
+  }, u = (e) => {
+    var d;
+    a != null && a.value && a.value.scrollTo({ key: e });
+    const t = w.get(e), n = (d = x == null ? void 0 : x.value) == null ? void 0 : d.wrapperRef, c = (p == null ? void 0 : p.value[e]) ?? (t == null ? void 0 : t.ref);
+    if (!n || !c || n.scrollHeight === n.offsetHeight)
+      return;
+    const f = Z(c, n), N = n.scrollTop;
+    f.top < 0 ? n.scrollTo(0, N + f.top) : f.bottom < 0 && n.scrollTo(0, N - f.bottom);
+  };
+  H(
+    v,
+    (e) => {
+      if (e) {
+        const t = m.value[m.value.length - 1];
+        let n = (D == null ? void 0 : D.value) ?? !0 ? o.value[0] : void 0;
+        o.value.includes(t) && (n = t), n !== l.value && (l.value = n), P(() => {
+          r(l.value) || u(l.value);
+        });
+      }
+    },
+    { immediate: !0 }
+  );
+  const G = k(
+    /* @__PURE__ */ new Map([
+      [
+        s.ENTER,
+        (e) => {
+          !(i != null && i.value) && !e.isComposing && (v.value ? r(l.value) || (g(l.value, e), e.preventDefault()) : B && (h(!0), e.preventDefault()));
+        }
+      ],
+      [
+        s.ESC,
+        (e) => {
+          v.value && (h(!1), e.preventDefault());
+        }
+      ],
+      [
+        s.ARROW_DOWN,
+        (e) => {
+          if (v.value) {
+            const t = I("down");
+            r(t) || (l.value = t, u(t)), e.preventDefault();
+          }
+        }
+      ],
+      [
+        s.ARROW_UP,
+        (e) => {
+          if (v.value) {
+            const t = I("up");
+            r(t) || (l.value = t, u(t)), e.preventDefault();
+          }
+        }
+      ]
+    ])
+  );
+  return Q(
+    b,
+    X({
+      multiple: W,
+      valueKey: T,
+      inputValue: E,
+      filterOption: O,
+      component: Y,
+      valueKeys: m,
+      activeKey: l,
+      getOptionId: A,
+      setActiveKey: _,
+      onSelect: g,
+      getNextSlotOptionIndex: z,
+      addSlotOptionInfo: K,
+      removeSlotOptionInfo: S
+    })
+  ), {
+    validOptions: C,
+    optionInfoMap: w,
+    validOptionInfos: q,
+    enabledOptionKeys: o,
+    activeKey: l,
+    setActiveKey: _,
+    addSlotOptionInfo: K,
+    removeSlotOptionInfo: S,
+    getNextActiveKey: I,
+    scrollIntoView: u,
+    handleKeyDown: G
+  };
+};
+export {
+  le as useSelect
+};

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

@@ -0,0 +1,20 @@
+import e from "./Select.js";
+import p from "./SelectDropdown.vue.js";
+import r from "./SelectOption.vue.js";
+import n from "./SelectOptionGroup.vue.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as t } from "../../_utils/config.js";
+const O = o(t("Select"), e), s = o(
+  t("SelectDropdown"),
+  p
+), d = o(t("SelectOption"), r), u = o(
+  t("SelectOptionGroup"),
+  n
+);
+export {
+  O as Select,
+  s as SelectDropdown,
+  d as SelectOption,
+  u as SelectOptionGroup,
+  O as default
+};