vft 0.0.74 → 0.0.77

package/es/components/select/useSelect.js

@@ -0,0 +1,414 @@
+import { reactive as Qe, ref as g, shallowRef as oe, computed as c, watch as x, nextTick as f, triggerRef as w, toRaw as Re } from "vue";
+import { toRawType as R } from "@vue/shared";
+import { isFunction as S, isClient as We, isNumber as $e, isObject as ue, isString as Be, isKorean as ke } from "@vft/utils";
+import { isEqual as re, get as C, debounce as te } from "lodash";
+import { EVENT_CODE as ce } from "../../constants/aria.js";
+import { UPDATE_MODEL_EVENT as T, CHANGE_EVENT as _e } from "../../constants/event.js";
+import { debugWarn as je } from "../../utils/error.js";
+import "@vueuse/core";
+import { getComponentSize as Ue } from "../../utils/helper.js";
+import "../../utils/ns-cover.js";
+import { scrollIntoView as Ge } from "../../utils/dom/scroll.js";
+import { useNamespace as Je } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "../form/index.js";
+import { useFormItem as Xe } from "../form/hooks/use-form-item.js";
+import { useFormSize as Ye } from "../form/hooks/use-form-common-props.js";
+function sl(n) {
+  return Qe({
+    options: /* @__PURE__ */ new Map(),
+    cachedOptions: /* @__PURE__ */ new Map(),
+    createdLabel: null,
+    createdSelected: !1,
+    selected: n.multiple ? [] : {},
+    inputLength: 20,
+    inputWidth: 0,
+    optionsCount: 0,
+    filteredOptionsCount: 0,
+    visible: !1,
+    softFocus: !1,
+    selectedLabel: "",
+    hoverIndex: -1,
+    query: "",
+    previousQuery: null,
+    inputHovering: !1,
+    cachedPlaceHolder: "",
+    currentPlaceholder: "请选择",
+    menuVisibleOnFocus: !1,
+    isOnComposition: !1,
+    isSilentBlur: !1,
+    prefixWidth: 11,
+    tagInMultiLine: !1,
+    mouseEnter: !1
+  });
+}
+const Ol = (n, e, v) => {
+  const W = Je("select"), O = g(null), a = g(null), z = g(null), h = g(null), $ = g(null), B = g(null), k = g(null), F = g(-1), V = oe({ query: "" }), H = oe(""), _ = g([]);
+  let E = 0;
+  const { form: b, formItem: D } = Xe(), ae = c(
+    () => !n.filterable || n.multiple || !e.visible
+  ), P = c(() => n.disabled || (b == null ? void 0 : b.disabled)), de = c(() => {
+    const l = n.multiple ? Array.isArray(n.modelValue) && n.modelValue.length > 0 : n.modelValue !== void 0 && n.modelValue !== null && n.modelValue !== "";
+    return n.clearable && !P.value && e.inputHovering && l;
+  }), j = c(
+    () => n.remote && n.filterable && !n.remoteShowSuffix ? "" : n.suffixIcon
+  ), fe = c(
+    () => W.is(
+      "reverse",
+      j.value && e.visible && n.suffixTransition
+    )
+  ), U = c(() => n.remote ? 300 : 0), p = c(() => n.loading ? n.loadingText || "loading..." : n.remote && e.query === "" && e.options.size === 0 ? !1 : n.filterable && e.query && e.options.size > 0 && e.filteredOptionsCount === 0 ? n.noMatchText || "没有相关的数据" : e.options.size === 0 ? n.noDataText || "无数据" : null), d = c(() => {
+    const l = Array.from(e.options.values()), i = [];
+    return _.value.forEach((o) => {
+      const u = l.findIndex((t) => t.currentLabel === o);
+      u > -1 && i.push(l[u]);
+    }), i.length ? i : l;
+  }), ve = c(
+    () => Array.from(e.cachedOptions.values())
+  ), he = c(() => {
+    const l = d.value.filter((i) => !i.created).some((i) => i.currentLabel === e.query);
+    return n.filterable && n.allowCreate && e.query !== "" && !l;
+  }), q = Ye(), me = c(
+    () => ["small"].includes(q.value) ? "small" : "default"
+  ), be = c({
+    get() {
+      return e.visible && p.value !== !1;
+    },
+    set(l) {
+      e.visible = l;
+    }
+  });
+  x(
+    [() => P.value, () => q.value, () => b == null ? void 0 : b.size],
+    () => {
+      f(() => {
+        y();
+      });
+    }
+  ), x(
+    () => n.placeholder,
+    (l) => {
+      e.cachedPlaceHolder = e.currentPlaceholder = l;
+    }
+  ), x(
+    () => n.modelValue,
+    (l, i) => {
+      n.multiple && (y(), l && l.length > 0 || a.value && e.query !== "" ? e.currentPlaceholder = "" : e.currentPlaceholder = e.cachedPlaceHolder, n.filterable && !n.reserveKeyword && (e.query = "", L(e.query))), K(), n.filterable && !n.multiple && (e.inputLength = 20), !re(l, i) && n.validateEvent && (D == null || D.validate("change").catch((o) => je(o)));
+    },
+    {
+      flush: "post",
+      deep: !0
+    }
+  ), x(
+    () => e.visible,
+    (l) => {
+      var i, o, u, t, r;
+      l ? ((o = (i = h.value) == null ? void 0 : i.updatePopper) == null || o.call(i), n.filterable && (e.filteredOptionsCount = e.optionsCount, e.query = n.remote ? "" : e.selectedLabel, (t = (u = z.value) == null ? void 0 : u.focus) == null || t.call(u), n.multiple ? (r = a.value) == null || r.focus() : e.selectedLabel && (e.currentPlaceholder = `${e.selectedLabel}`, e.selectedLabel = ""), L(e.query), !n.multiple && !n.remote && (V.value.query = "", w(V), w(H)))) : (n.filterable && (S(n.filterMethod) && n.filterMethod(""), S(n.remoteMethod) && n.remoteMethod("")), a.value && a.value.blur(), e.query = "", e.previousQuery = null, e.selectedLabel = "", e.inputLength = 20, e.menuVisibleOnFocus = !1, ge(), f(() => {
+        a.value && a.value.value === "" && e.selected.length === 0 && (e.currentPlaceholder = e.cachedPlaceHolder);
+      }), n.multiple || (e.selected && (n.filterable && n.allowCreate && e.createdSelected && e.createdLabel ? e.selectedLabel = e.createdLabel : e.selectedLabel = e.selected.currentLabel, n.filterable && (e.query = e.selectedLabel)), n.filterable && (e.currentPlaceholder = e.cachedPlaceHolder))), v.emit("visible-change", l);
+    }
+  ), x(
+    // fix `Array.prototype.push/splice/..` cannot trigger non-deep watcher
+    // https://github.com/vuejs/vue-next/issues/2116
+    () => e.options.entries(),
+    () => {
+      var i, o, u;
+      if (!We)
+        return;
+      (o = (i = h.value) == null ? void 0 : i.updatePopper) == null || o.call(i), n.multiple && y();
+      const l = ((u = B.value) == null ? void 0 : u.querySelectorAll("input")) || [];
+      Array.from(l).includes(document.activeElement) || K(), n.defaultFirstOption && (n.filterable || n.remote) && e.filteredOptionsCount && J();
+    },
+    {
+      flush: "post"
+    }
+  ), x(
+    () => e.hoverIndex,
+    (l) => {
+      $e(l) && l > -1 ? F.value = d.value[l] || {} : F.value = {}, d.value.forEach((i) => {
+        i.hover = F.value === i;
+      });
+    }
+  );
+  const y = () => {
+    f(() => {
+      var r, s;
+      if (!O.value)
+        return;
+      const l = O.value.$el.querySelector(
+        "input"
+      );
+      E = E || (l.clientHeight > 0 ? l.clientHeight + 2 : 0);
+      const i = $.value, o = Ue(q.value || (b == null ? void 0 : b.size)), u = q.value || o === E || E <= 0 ? o : E;
+      !(l.offsetParent === null) && (l.style.height = `${(e.selected.length === 0 ? u : Math.max(
+        i ? i.clientHeight + (i.clientHeight > u ? 6 : 0) : 0,
+        u
+      )) - 2}px`), e.tagInMultiLine = Number.parseFloat(l.style.height) >= u, e.visible && p.value !== !1 && ((s = (r = h.value) == null ? void 0 : r.updatePopper) == null || s.call(r));
+    });
+  }, L = async (l) => {
+    if (!(e.previousQuery === l || e.isOnComposition)) {
+      if (e.previousQuery === null && (S(n.filterMethod) || S(n.remoteMethod))) {
+        e.previousQuery = l;
+        return;
+      }
+      e.previousQuery = l, f(() => {
+        var i, o;
+        e.visible && ((o = (i = h.value) == null ? void 0 : i.updatePopper) == null || o.call(i));
+      }), e.hoverIndex = -1, n.multiple && n.filterable && f(() => {
+        const i = a.value.value.length * 15 + 20;
+        e.inputLength = n.collapseTags ? Math.min(50, i) : i, G(), y();
+      }), n.remote && S(n.remoteMethod) ? (e.hoverIndex = -1, n.remoteMethod(l)) : S(n.filterMethod) ? (n.filterMethod(l), w(H)) : (e.filteredOptionsCount = e.optionsCount, V.value.query = l, w(V), w(H)), n.defaultFirstOption && (n.filterable || n.remote) && e.filteredOptionsCount && (await f(), J());
+    }
+  }, G = () => {
+    e.currentPlaceholder !== "" && (e.currentPlaceholder = a.value.value ? "" : e.cachedPlaceHolder);
+  }, J = () => {
+    const l = d.value.filter(
+      (u) => u.visible && !u.disabled && !u.states.groupDisabled
+    ), i = l.find((u) => u.created), o = l[0];
+    e.hoverIndex = ee(
+      d.value,
+      i || o
+    );
+  }, K = () => {
+    var i;
+    if (n.multiple)
+      e.selectedLabel = "";
+    else {
+      const o = X(n.modelValue);
+      (i = o.props) != null && i.created ? (e.createdLabel = o.props.value, e.createdSelected = !0) : e.createdSelected = !1, e.selectedLabel = o.currentLabel, e.selected = o, n.filterable && (e.query = e.selectedLabel);
+      return;
+    }
+    const l = [];
+    Array.isArray(n.modelValue) && n.modelValue.forEach((o) => {
+      l.push(X(o));
+    }), e.selected = l, f(() => {
+      y();
+    });
+  }, X = (l) => {
+    let i;
+    const o = R(l).toLowerCase() === "object", u = R(l).toLowerCase() === "null", t = R(l).toLowerCase() === "undefined";
+    for (let I = e.cachedOptions.size - 1; I >= 0; I--) {
+      const m = ve.value[I];
+      if (o ? C(m.value, n.valueKey) === C(l, n.valueKey) : m.value === l) {
+        i = {
+          value: l,
+          currentLabel: m.currentLabel,
+          isDisabled: m.isDisabled
+        };
+        break;
+      }
+    }
+    if (i)
+      return i;
+    const r = o ? l.label : !u && !t ? l : "", s = {
+      value: l,
+      currentLabel: r
+    };
+    return n.multiple && (s.hitState = !1), s;
+  }, ge = () => {
+    setTimeout(() => {
+      const l = n.valueKey;
+      n.multiple ? e.selected.length > 0 ? e.hoverIndex = Math.min.apply(
+        null,
+        e.selected.map((i) => d.value.findIndex((o) => C(o, l) === C(i, l)))
+      ) : e.hoverIndex = -1 : e.hoverIndex = d.value.findIndex((i) => Q(i) === Q(e.selected));
+    }, 300);
+  }, ye = () => {
+    var l, i;
+    se(), (i = (l = h.value) == null ? void 0 : l.updatePopper) == null || i.call(l), n.multiple && y();
+  }, se = () => {
+    var l;
+    e.inputWidth = (l = O.value) == null ? void 0 : l.$el.offsetWidth;
+  }, Oe = () => {
+    n.filterable && e.query !== e.selectedLabel && (e.query = e.selectedLabel, L(e.query));
+  }, Ce = te(() => {
+    Oe();
+  }, U.value), Le = te((l) => {
+    L(l.target.value);
+  }, U.value), M = (l) => {
+    re(n.modelValue, l) || v.emit(_e, l);
+  }, Ie = (l) => {
+    if (l.code !== ce.delete) {
+      if (l.target.value.length <= 0 && !N()) {
+        const i = n.modelValue.slice();
+        i.pop(), v.emit(T, i), M(i);
+      }
+      l.target.value.length === 1 && n.modelValue.length === 0 && (e.currentPlaceholder = e.cachedPlaceHolder);
+    }
+  }, xe = (l, i) => {
+    const o = e.selected.indexOf(i);
+    if (o > -1 && !P.value) {
+      const u = n.modelValue.slice();
+      u.splice(o, 1), v.emit(T, u), M(u), v.emit("remove-tag", i.value);
+    }
+    l.stopPropagation();
+  }, Y = (l) => {
+    l.stopPropagation();
+    const i = n.multiple ? [] : "";
+    if (!Be(i))
+      for (const o of e.selected)
+        o.isDisabled && i.push(o.value);
+    v.emit(T, i), M(i), e.hoverIndex = -1, e.visible = !1, v.emit("clear");
+  }, Z = (l, i) => {
+    var o;
+    if (n.multiple) {
+      const u = (n.modelValue || []).slice(), t = ee(u, l.value);
+      t > -1 ? u.splice(t, 1) : (n.multipleLimit <= 0 || u.length < n.multipleLimit) && u.push(l.value), v.emit(T, u), M(u), l.created && (e.query = "", L(""), e.inputLength = 20), n.filterable && ((o = a.value) == null || o.focus());
+    } else
+      v.emit(T, l.value), M(l.value), e.visible = !1;
+    e.isSilentBlur = i, Se(), !e.visible && f(() => {
+      A(l);
+    });
+  }, ee = (l = [], i) => {
+    if (!ue(i))
+      return l.indexOf(i);
+    const o = n.valueKey;
+    let u = -1;
+    return l.some((t, r) => Re(C(t, o)) === C(i, o) ? (u = r, !0) : !1), u;
+  }, Se = () => {
+    e.softFocus = !0;
+    const l = a.value || O.value;
+    l && (l == null || l.focus());
+  }, A = (l) => {
+    var u, t, r, s, I;
+    const i = Array.isArray(l) ? l[0] : l;
+    let o = null;
+    if (i != null && i.value) {
+      const m = d.value.filter(
+        (ne) => ne.value === i.value
+      );
+      m.length > 0 && (o = m[0].$el);
+    }
+    if (h.value && o) {
+      const m = (s = (r = (t = (u = h.value) == null ? void 0 : u.popperRef) == null ? void 0 : t.contentRef) == null ? void 0 : r.querySelector) == null ? void 0 : s.call(
+        r,
+        `.${W.be("dropdown", "wrap")}`
+      );
+      m && Ge(m, o);
+    }
+    (I = k.value) == null || I.handleScroll();
+  }, Ve = (l) => {
+    e.optionsCount++, e.filteredOptionsCount++, e.options.set(l.value, l), e.cachedOptions.set(l.value, l);
+  }, Ee = (l, i) => {
+    e.options.get(l) === i && (e.optionsCount--, e.filteredOptionsCount--, e.options.delete(l));
+  }, Pe = (l) => {
+    l.code !== ce.backspace && N(!1), e.inputLength = a.value.value.length * 15 + 20, y();
+  }, N = (l) => {
+    if (!Array.isArray(e.selected))
+      return;
+    const i = e.selected[e.selected.length - 1];
+    if (i)
+      return l === !0 || l === !1 ? (i.hitState = l, l) : (i.hitState = !i.hitState, i.hitState);
+  }, qe = (l) => {
+    const i = l.target.value;
+    if (l.type === "compositionend")
+      e.isOnComposition = !1, f(() => L(i));
+    else {
+      const o = i[i.length - 1] || "";
+      e.isOnComposition = !ke(o);
+    }
+  }, Me = () => {
+    f(() => A(e.selected));
+  }, we = (l) => {
+    e.softFocus ? e.softFocus = !1 : ((n.automaticDropdown || n.filterable) && (n.filterable && !e.visible && (e.menuVisibleOnFocus = !0), e.visible = !0), v.emit("focus", l));
+  }, Te = () => {
+    var l, i, o;
+    e.visible = !1, (l = O.value) == null || l.blur(), (o = (i = z.value) == null ? void 0 : i.blur) == null || o.call(i);
+  }, Fe = (l) => {
+    f(() => {
+      e.isSilentBlur ? e.isSilentBlur = !1 : v.emit("blur", l);
+    }), e.softFocus = !1;
+  }, He = (l) => {
+    Y(l);
+  }, Ae = () => {
+    e.visible = !1;
+  }, ze = (l) => {
+    e.visible && (l.preventDefault(), l.stopPropagation(), e.visible = !1);
+  }, le = (l) => {
+    var i;
+    l && !e.mouseEnter || P.value || (e.menuVisibleOnFocus ? e.menuVisibleOnFocus = !1 : (!h.value || !h.value.isFocusInsideContent()) && (e.visible = !e.visible), e.visible && ((i = a.value || O.value) == null || i.focus()));
+  }, De = () => {
+    e.visible ? d.value[e.hoverIndex] && Z(d.value[e.hoverIndex], void 0) : le();
+  }, Q = (l) => ue(l.value) ? C(l.value, n.valueKey) : l.value, pe = c(
+    () => d.value.filter((l) => l.visible).every((l) => l.disabled)
+  ), Ke = c(
+    () => e.selected.slice(0, n.maxCollapseTags)
+  ), Ne = c(
+    () => e.selected.slice(n.maxCollapseTags)
+  ), ie = (l) => {
+    if (!e.visible) {
+      e.visible = !0;
+      return;
+    }
+    if (!(e.options.size === 0 || e.filteredOptionsCount === 0) && !e.isOnComposition && !pe.value) {
+      l === "next" ? (e.hoverIndex++, e.hoverIndex === e.options.size && (e.hoverIndex = 0)) : l === "prev" && (e.hoverIndex--, e.hoverIndex < 0 && (e.hoverIndex = e.options.size - 1));
+      const i = d.value[e.hoverIndex];
+      (i.disabled === !0 || i.states.groupDisabled === !0 || !i.visible) && ie(l), f(() => A(F.value));
+    }
+  };
+  return {
+    optionList: _,
+    optionsArray: d,
+    selectSize: q,
+    handleResize: ye,
+    debouncedOnInputChange: Ce,
+    debouncedQueryChange: Le,
+    deletePrevTag: Ie,
+    deleteTag: xe,
+    deleteSelected: Y,
+    handleOptionSelect: Z,
+    scrollToOption: A,
+    readonly: ae,
+    resetInputHeight: y,
+    showClose: de,
+    iconComponent: j,
+    iconReverse: fe,
+    showNewOption: he,
+    collapseTagSize: me,
+    setSelected: K,
+    managePlaceholder: G,
+    selectDisabled: P,
+    emptyText: p,
+    toggleLastOptionHitState: N,
+    resetInputState: Pe,
+    handleComposition: qe,
+    onOptionCreate: Ve,
+    onOptionDestroy: Ee,
+    handleMenuEnter: Me,
+    handleFocus: we,
+    blur: Te,
+    handleBlur: Fe,
+    handleClearClick: He,
+    handleClose: Ae,
+    handleKeydownEscape: ze,
+    toggleMenu: le,
+    selectOption: De,
+    getValueKey: Q,
+    navigateOptions: ie,
+    dropMenuVisible: be,
+    queryChange: V,
+    groupQueryChange: H,
+    showTagList: Ke,
+    collapseTagList: Ne,
+    // DOM ref
+    reference: O,
+    input: a,
+    iOSInput: z,
+    tooltipRef: h,
+    tags: $,
+    selectWrapper: B,
+    scrollbar: k,
+    // Mouser Event
+    handleMouseEnter: () => {
+      e.mouseEnter = !0;
+    },
+    handleMouseLeave: () => {
+      e.mouseEnter = !1;
+    }
+  };
+};
+export {
+  Ol as useSelect,
+  sl as useSelectStates
+};

package/es/components/select-v2/select-dropdown.js

@@ -10,8 +10,8 @@ import { useNamespace as X } from "../../hooks/use-namespace/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
 import "@vueuse/core";
-import "../../utils/ns-cover.js";
 import { EVENT_CODE as Y } from "../../constants/aria.js";
+import "../../utils/ns-cover.js";
 import Z from "./group-item.vue.js";
 import ee from "./option-item.vue.js";
 import { selectV2InjectionKey as te } from "./token.js";