vft 0.0.50 → 0.0.53

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

@@ -0,0 +1,61 @@
+import { defineComponent as c, vModelText as a, computed as f, reactive as p, toRefs as n, provide as s } from "vue";
+import { isArray as d } from "@vft/utils";
+import { ClickOutside as u } from "@vft/directives";
+import { VftTooltip as v } from "../tooltip/index.js";
+import { VftTag as V } from "../tag/index.js";
+import { VftIcon as S } from "../icon/index.js";
+import { UPDATE_MODEL_EVENT as b, CHANGE_EVENT as g } from "../../constants/event.js";
+import E from "./select-dropdown.js";
+import T from "./useSelect.js";
+import { selectV2InjectionKey as y } from "./token.js";
+import { SelectProps as K } from "./defaults.js";
+const D = c({
+  name: "VftSelectV2",
+  components: {
+    SelectMenu: E,
+    VftTag: V,
+    VftTooltip: v,
+    VftIcon: S
+  },
+  directives: { ClickOutside: u, ModelText: a },
+  props: K,
+  emits: [
+    b,
+    g,
+    "remove-tag",
+    "clear",
+    "visible-change",
+    "focus",
+    "blur"
+  ],
+  setup(o, { emit: l }) {
+    const t = f(() => {
+      const { modelValue: r, multiple: i } = o, m = i ? [] : void 0;
+      return d(r) ? i ? r : m : i ? m : r;
+    }), e = T(
+      p({
+        ...n(o),
+        modelValue: t
+      }),
+      l
+    );
+    return s(y, {
+      props: p({
+        ...n(o),
+        height: e.popupHeight,
+        modelValue: t
+      }),
+      popper: e.popper,
+      onSelect: e.onSelect,
+      onHover: e.onHover,
+      onKeyboardNavigate: e.onKeyboardNavigate,
+      onKeyboardSelect: e.onKeyboardSelect
+    }), {
+      ...e,
+      modelValue: t
+    };
+  }
+});
+export {
+  D as default
+};

package/es/components/select-v2/useSelect.d.ts

@@ -289,12 +289,12 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
                 required: false;
             };
         }>> & {
+            onClose?: ((...args: any[]) => any) | undefined;
             onOpen?: ((...args: any[]) => any) | undefined;
             "onBefore-show"?: ((...args: any[]) => any) | undefined;
             "onBefore-hide"?: ((...args: any[]) => any) | undefined;
             onShow?: ((...args: any[]) => any) | undefined;
             onHide?: ((...args: any[]) => any) | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
         $attrs: {
             [x: string]: unknown;
@@ -307,7 +307,7 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: "open" | "before-show" | "before-hide" | "show" | "hide" | "close", ...args: any[]) => void;
+        $emit: (event: "close" | "open" | "before-show" | "before-hide" | "show" | "hide", ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<ExtractPropTypes<{
             role: {
@@ -499,12 +499,12 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
                 required: false;
             };
         }>> & {
+            onClose?: ((...args: any[]) => any) | undefined;
             onOpen?: ((...args: any[]) => any) | undefined;
             "onBefore-show"?: ((...args: any[]) => any) | undefined;
             "onBefore-hide"?: ((...args: any[]) => any) | undefined;
             onShow?: ((...args: any[]) => any) | undefined;
             onHide?: ((...args: any[]) => any) | undefined;
-            onClose?: ((...args: any[]) => any) | undefined;
         }, {
             popperRef: import("vue").Ref<any>;
             contentRef: import("vue").Ref<any>;
@@ -513,7 +513,7 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
             onOpen: (event?: Event | undefined) => void;
             onClose: (event?: Event | undefined) => void;
             hide: (event?: Event | undefined) => void;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("open" | "before-show" | "before-hide" | "show" | "hide" | "close")[], string, {}, {}, string> & {
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "open" | "before-show" | "before-hide" | "show" | "hide")[], string, {}, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
             beforeMount?: ((() => void) | (() => void)[]) | undefined;
@@ -723,12 +723,12 @@ declare const useSelect: (props: ExtractPropTypes<typeof SelectProps>, emit: any
             required: false;
         };
     }>> & {
+        onClose?: ((...args: any[]) => any) | undefined;
         onOpen?: ((...args: any[]) => any) | undefined;
         "onBefore-show"?: ((...args: any[]) => any) | undefined;
         "onBefore-hide"?: ((...args: any[]) => any) | undefined;
         onShow?: ((...args: any[]) => any) | undefined;
         onHide?: ((...args: any[]) => any) | undefined;
-        onClose?: ((...args: any[]) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
         popperRef: import("vue").Ref<any>;
         contentRef: import("vue").Ref<any>;

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

@@ -0,0 +1,360 @@
+import { reactive as ke, ref as f, computed as o, watch as T, nextTick as g, onMounted as Ge } from "vue";
+import { isArray as _, isFunction as ie, isObject as z } from "@vue/shared";
+import { isNil as oe, debounce as $e, isEqual as se, get as S } from "lodash";
+import { useResizeObserver as je } from "@vueuse/core";
+import { useNamespace as ce } from "../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import "@vft/utils";
+import { debugWarn as Je } from "../../utils/error.js";
+import { escapeStringRegexp as Xe } from "../../utils/vue/data-helper.js";
+import "../../utils/ns-cover.js";
+import "@vue/reactivity";
+import { UPDATE_MODEL_EVENT as Ye, CHANGE_EVENT as Ze } from "../../constants/event.js";
+import "../form/index.js";
+import { useAllowCreate as et } from "./useAllowCreate.js";
+import { flattenOptions as tt } from "./util.js";
+import { useInput as lt } from "./useInput.js";
+import { useFormItem as nt } from "../form/hooks/use-form-item.js";
+import { useFormSize as at } from "../form/hooks/use-form-common-props.js";
+const re = "", de = 11, ut = {
+  larget: 51,
+  default: 42,
+  small: 33
+}, Ot = (n, m) => {
+  const K = ce("select-v2"), fe = ce("input"), { form: R, formItem: h } = nt(), l = ke({
+    inputValue: re,
+    displayInputValue: re,
+    calculatedWidth: 0,
+    cachedPlaceholder: "",
+    cachedOptions: [],
+    createdOptions: [],
+    createdLabel: "",
+    createdSelected: !1,
+    currentPlaceholder: "",
+    hoveringIndex: -1,
+    comboBoxHovering: !1,
+    isOnComposition: !1,
+    isSilentBlur: !1,
+    isComposing: !1,
+    inputLength: 20,
+    selectWidth: 200,
+    initialInputHeight: 0,
+    previousQuery: null,
+    previousValue: void 0,
+    query: "",
+    selectedLabel: "",
+    softFocus: !1,
+    tagInMultiLine: !1
+  }), he = f(-1), U = f(-1), ve = f(null), v = f(null), E = f(null), b = f(null), C = f(null), O = f(null), I = f(null), s = f(!1), y = o(() => n.disabled || (R == null ? void 0 : R.disabled)), ge = o(() => {
+    const e = c.value.length * 34;
+    return e > n.height ? n.height : e;
+  }), M = o(() => !oe(n.modelValue)), me = o(() => {
+    const e = n.multiple ? Array.isArray(n.modelValue) && n.modelValue.length > 0 : M.value;
+    return n.clearable && !y.value && l.comboBoxHovering && e;
+  }), F = o(
+    () => n.remote && n.filterable ? "" : "ico-ep:arrow-up"
+  ), Ve = o(
+    () => F.value && K.is("reverse", s.value)
+  ), pe = o(() => (h == null ? void 0 : h.validateState) || ""), be = "validateIcon", Q = o(() => n.remote ? 300 : 0), W = o(() => {
+    const e = c.value;
+    return n.loading ? n.loadingText || t("el.select.loading") : n.remote && l.inputValue === "" && e.length === 0 ? !1 : n.filterable && l.inputValue && e.length > 0 ? n.noMatchText || t("el.select.noMatch") : e.length === 0 ? n.noDataText || t("el.select.noData") : null;
+  }), c = o(() => {
+    const e = (a) => {
+      const u = l.inputValue, i = new RegExp(Xe(u), "i");
+      return u ? i.test(a.label || "") : !0;
+    };
+    return n.loading ? [] : tt(
+      // @ts-ignore
+      n.options.concat(l.createdOptions).map((a) => {
+        if (_(a.options)) {
+          const u = a.options.filter(e);
+          if (u.length > 0)
+            return {
+              ...a,
+              options: u
+            };
+        } else if (n.remote || e(a))
+          return a;
+        return null;
+      }).filter((a) => a !== null)
+    );
+  }), Ie = o(
+    () => c.value.every((e) => e.disabled)
+  ), q = at(), k = o(
+    () => q.value === "small" ? "small" : "default"
+  ), ye = o(() => {
+    const e = O.value, a = k.value || "default", u = e ? Number.parseInt(getComputedStyle(e).paddingLeft) : 0, i = e ? Number.parseInt(getComputedStyle(e).paddingRight) : 0;
+    return l.selectWidth - i - u - ut[a];
+  }), G = () => {
+    var e;
+    U.value = ((e = C.value) == null ? void 0 : e.offsetWidth) || 200;
+  }, xe = o(() => ({
+    width: `${l.calculatedWidth === 0 ? de : Math.ceil(l.calculatedWidth) + de}px`
+  })), Se = o(() => _(n.modelValue) ? n.modelValue.length === 0 && !l.displayInputValue : n.filterable ? l.displayInputValue.length === 0 : !0), Ce = o(() => {
+    const e = n.placeholder || t("el.select.placeholder");
+    return n.multiple || oe(n.modelValue) ? e : l.selectedLabel;
+  }), Oe = o(() => {
+    var e, a;
+    return (a = (e = b.value) == null ? void 0 : e.popperRef) == null ? void 0 : a.contentRef;
+  }), $ = o(() => {
+    if (n.multiple) {
+      const e = n.modelValue.length;
+      if (n.modelValue.length > 0)
+        return c.value.findIndex(
+          (a) => a.value === n.modelValue[e - 1]
+        );
+    } else if (n.modelValue)
+      return c.value.findIndex(
+        (e) => e.value === n.modelValue
+      );
+    return -1;
+  }), we = o({
+    get() {
+      return s.value && W.value !== !1;
+    },
+    set(e) {
+      s.value = e;
+    }
+  }), Le = o(
+    () => l.cachedOptions.slice(0, n.maxCollapseTags)
+  ), Te = o(
+    () => l.cachedOptions.slice(n.maxCollapseTags)
+  ), {
+    createNewOption: j,
+    removeNewOption: H,
+    selectNewOption: J,
+    clearAllNewOption: N
+  } = et(n, l), {
+    handleCompositionStart: Re,
+    handleCompositionUpdate: Ee,
+    handleCompositionEnd: Me
+  } = lt((e) => ue(e)), X = () => {
+    var e, a, u;
+    (a = (e = v.value) == null ? void 0 : e.focus) == null || a.call(e), (u = b.value) == null || u.updatePopper();
+  }, P = () => {
+    if (!n.automaticDropdown && !y.value)
+      return l.isComposing && (l.softFocus = !0), g(() => {
+        var e, a;
+        s.value = !s.value, (a = (e = v.value) == null ? void 0 : e.focus) == null || a.call(e);
+      });
+  }, Y = () => (n.filterable && l.inputValue !== l.selectedLabel && (l.query = l.selectedLabel), ee(l.inputValue), g(() => {
+    j(l.inputValue);
+  })), Z = $e(Y, Q.value), ee = (e) => {
+    l.previousQuery !== e && (l.previousQuery = e, n.filterable && ie(n.filterMethod) ? n.filterMethod(e) : n.filterable && n.remote && ie(n.remoteMethod) && n.remoteMethod(e));
+  }, We = (e) => {
+    se(n.modelValue, e) || m(Ze, e);
+  }, x = (e) => {
+    m(Ye, e), We(e), l.previousValue = e == null ? void 0 : e.toString();
+  }, He = (e = [], a) => {
+    if (!z(a))
+      return e.indexOf(a);
+    const u = n.valueKey;
+    let i = -1;
+    return e.some((r, d) => S(r, u) === S(a, u) ? (i = d, !0) : !1), i;
+  }, V = (e) => z(e) ? S(e, n.valueKey) : e, Ne = (e) => z(e) ? e.label : e, A = () => g(() => {
+    var a, u;
+    if (!v.value)
+      return;
+    const e = O.value;
+    C.value.height = e.offsetHeight, s.value && W.value !== !1 && ((u = (a = b.value) == null ? void 0 : a.updatePopper) == null || u.call(a));
+  }), te = () => {
+    var e, a;
+    if (Pe(), G(), (a = (e = b.value) == null ? void 0 : e.updatePopper) == null || a.call(e), n.multiple)
+      return A();
+  }, Pe = () => {
+    const e = O.value;
+    e && (l.selectWidth = e.getBoundingClientRect().width);
+  }, le = (e, a, u = !0) => {
+    var i, r;
+    if (n.multiple) {
+      let d = n.modelValue.slice();
+      const L = He(d, V(e));
+      L > -1 ? (d = [
+        ...d.slice(0, L),
+        ...d.slice(L + 1)
+      ], l.cachedOptions.splice(L, 1), H(e)) : (n.multipleLimit <= 0 || d.length < n.multipleLimit) && (d = [...d, V(e)], l.cachedOptions.push(e), J(e), p(a)), x(d), e.created && (l.query = "", ee(""), l.inputLength = 20), n.filterable && !n.reserveKeyword && ((r = (i = v.value).focus) == null || r.call(i), w("")), n.filterable && (l.calculatedWidth = I.value.getBoundingClientRect().width), A(), Fe();
+    } else
+      he.value = a, l.selectedLabel = e.label, x(V(e)), s.value = !1, l.isComposing = !1, l.isSilentBlur = u, J(e), e.created || N(), p(a);
+  }, Ae = (e, a) => {
+    const { valueKey: u } = n, i = n.modelValue.indexOf(S(a, u));
+    if (i > -1 && !y.value) {
+      const r = [
+        ...n.modelValue.slice(0, i),
+        ...n.modelValue.slice(i + 1)
+      ];
+      return l.cachedOptions.splice(i, 1), x(r), m("remove-tag", S(a, u)), l.softFocus = !0, H(a), g(X);
+    }
+    e.stopPropagation();
+  }, Be = (e) => {
+    const a = l.isComposing;
+    l.isComposing = !0, l.softFocus ? l.softFocus = !1 : a || m("focus", e);
+  }, ne = (e) => (l.softFocus = !1, g(() => {
+    var a, u;
+    (u = (a = v.value) == null ? void 0 : a.blur) == null || u.call(a), I.value && (l.calculatedWidth = I.value.getBoundingClientRect().width), l.isSilentBlur ? l.isSilentBlur = !1 : l.isComposing && m("blur", e), l.isComposing = !1;
+  })), De = () => {
+    l.displayInputValue.length > 0 ? w("") : s.value = !1;
+  }, _e = (e) => {
+    if (l.displayInputValue.length === 0) {
+      e.preventDefault();
+      const a = n.modelValue.slice();
+      a.pop(), H(l.cachedOptions.pop()), x(a);
+    }
+  }, ze = () => {
+    let e;
+    return _(n.modelValue) ? e = [] : e = void 0, l.softFocus = !0, n.multiple ? l.cachedOptions = [] : l.selectedLabel = "", s.value = !1, x(e), m("clear"), N(), g(X);
+  }, w = (e) => {
+    l.displayInputValue = e, l.inputValue = e;
+  }, ae = (e, a = void 0) => {
+    const u = c.value;
+    if (!["forward", "backward"].includes(e) || y.value || u.length <= 0 || Ie.value)
+      return;
+    if (!s.value)
+      return P();
+    a === void 0 && (a = l.hoveringIndex);
+    let i = -1;
+    e === "forward" ? (i = a + 1, i >= u.length && (i = 0)) : e === "backward" && (i = a - 1, (i < 0 || i >= u.length) && (i = u.length - 1));
+    const r = u[i];
+    if (r.disabled || r.type === "Group")
+      return ae(e, i);
+    p(i), B(i);
+  }, Ke = () => {
+    if (s.value)
+      ~l.hoveringIndex && c.value[l.hoveringIndex] && le(
+        c.value[l.hoveringIndex],
+        l.hoveringIndex,
+        !1
+      );
+    else
+      return P();
+  }, p = (e) => {
+    l.hoveringIndex = e;
+  }, Ue = () => {
+    l.hoveringIndex = -1;
+  }, Fe = () => {
+    var a;
+    const e = v.value;
+    e && ((a = e.focus) == null || a.call(e));
+  }, ue = (e) => {
+    const a = e.target.value;
+    if (w(a), l.displayInputValue.length > 0 && !s.value && (s.value = !0), l.calculatedWidth = I.value.getBoundingClientRect().width, n.multiple && A(), n.remote)
+      Z();
+    else
+      return Y();
+  }, Qe = () => (s.value = !1, ne()), qe = () => (l.inputValue = l.displayInputValue, g(() => {
+    ~$.value && (p($.value), B(l.hoveringIndex));
+  })), B = (e) => {
+    E.value.scrollToItem(e);
+  }, D = () => {
+    if (Ue(), n.multiple)
+      if (n.modelValue.length > 0) {
+        let e = !1;
+        l.cachedOptions.length = 0, l.previousValue = n.modelValue.toString(), n.modelValue.forEach((a) => {
+          const u = c.value.findIndex(
+            (i) => V(i) === a
+          );
+          ~u && (l.cachedOptions.push(
+            c.value[u]
+          ), e || p(u), e = !0);
+        });
+      } else
+        l.cachedOptions = [], l.previousValue = void 0;
+    else if (M.value) {
+      l.previousValue = n.modelValue;
+      const e = c.value, a = e.findIndex(
+        (u) => V(u) === V(n.modelValue)
+      );
+      ~a ? (l.selectedLabel = e[a].label, p(a)) : l.selectedLabel = `${n.modelValue}`;
+    } else
+      l.selectedLabel = "", l.previousValue = void 0;
+    N(), G();
+  };
+  return T(s, (e) => {
+    var a, u;
+    m("visible-change", e), e ? (u = (a = b.value).update) == null || u.call(a) : (l.displayInputValue = "", l.previousQuery = null, j(""));
+  }), T(
+    () => n.modelValue,
+    (e, a) => {
+      var u;
+      (!e || e.toString() !== l.previousValue) && D(), !se(e, a) && n.validateEvent && ((u = h == null ? void 0 : h.validate) == null || u.call(h, "change").catch((i) => Je(i)));
+    },
+    {
+      deep: !0
+    }
+  ), T(
+    () => n.options,
+    () => {
+      const e = v.value;
+      (!e || e && document.activeElement !== e) && D();
+    },
+    {
+      deep: !0
+    }
+  ), T(c, () => g(E.value.resetScrollTop)), Ge(() => {
+    D();
+  }), je(C, te), {
+    // data exports
+    collapseTagSize: k,
+    currentPlaceholder: Ce,
+    expanded: s,
+    emptyText: W,
+    popupHeight: ge,
+    debounce: Q,
+    filteredOptions: c,
+    iconComponent: F,
+    iconReverse: Ve,
+    inputWrapperStyle: xe,
+    popperSize: U,
+    dropdownMenuVisible: we,
+    hasModelValue: M,
+    // readonly,
+    shouldShowPlaceholder: Se,
+    selectDisabled: y,
+    selectSize: q,
+    showClearBtn: me,
+    states: l,
+    tagMaxWidth: ye,
+    nsSelectV2: K,
+    nsInput: fe,
+    // refs items exports
+    calculatorRef: I,
+    controlRef: ve,
+    inputRef: v,
+    menuRef: E,
+    popper: b,
+    selectRef: C,
+    selectionRef: O,
+    popperRef: Oe,
+    validateState: pe,
+    validateIcon: be,
+    showTagList: Le,
+    collapseTagList: Te,
+    // methods exports
+    debouncedOnInputChange: Z,
+    deleteTag: Ae,
+    getLabel: Ne,
+    getValueKey: V,
+    handleBlur: ne,
+    handleClear: ze,
+    handleClickOutside: Qe,
+    handleDel: _e,
+    handleEsc: De,
+    handleFocus: Be,
+    handleMenuEnter: qe,
+    handleResize: te,
+    toggleMenu: P,
+    scrollTo: B,
+    onInput: ue,
+    onKeyboardNavigate: ae,
+    onKeyboardSelect: Ke,
+    onSelect: le,
+    onHover: p,
+    onUpdateInputValue: w,
+    handleCompositionStart: Re,
+    handleCompositionEnd: Me,
+    handleCompositionUpdate: Ee
+  };
+};
+export {
+  Ot as default
+};