vft 0.0.249 → 0.0.252

package/es/components/select/index.js

@@ -1,5 +1,5 @@
 import e from "./select.vue.js";
-import { selectInjectionKey as r } from "./token.js";
+import { selectV2InjectionKey as r } from "./token.js";
 e.install = (t) => {
   t.component(e.name, e);
 };
@@ -7,5 +7,5 @@ const o = e, n = o;
 export {
   n as VftSelect,
   o as default,
-  r as selectInjectionKey
+  r as selectV2InjectionKey
 };

package/es/components/select/option-item.vue.d.ts

@@ -1,15 +1,20 @@
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    data: ArrayConstructor;
-    disabled: BooleanConstructor;
-    hovering: BooleanConstructor;
-    item: ObjectConstructor;
-    index: NumberConstructor;
-    style: ObjectConstructor;
-    selected: BooleanConstructor;
-    created: BooleanConstructor;
+    readonly data: ArrayConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly hovering: BooleanConstructor;
+    readonly item: {
+        readonly type: import("vue").PropType<import("./select.types").Option>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly index: NumberConstructor;
+    readonly style: ObjectConstructor;
+    readonly selected: BooleanConstructor;
+    readonly created: BooleanConstructor;
 }>, {
     ns: {
-        namespace: import("vue").Ref<string, string>;
+        namespace: import("vue").ComputedRef<string>;
         b: (blockSuffix?: string) => string;
         e: (element?: string) => string;
         m: (modifier?: string) => string;
@@ -21,29 +26,38 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             (name: string, state: boolean | undefined): string;
             (name: string): string;
         };
-        cssVar: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVar: (object: Record<string, string>) => Record<string, string>;
         cssVarName: (name: string) => string;
-        cssVarBlock: (object: Record<string, string | undefined>) => Record<string, string>;
+        cssVarBlock: (object: Record<string, string>) => Record<string, string>;
         cssVarBlockName: (name: string) => string;
     };
     hoverItem: () => void;
     selectOptionClick: () => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("select" | "hover")[], "select" | "hover", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    data: ArrayConstructor;
-    disabled: BooleanConstructor;
-    hovering: BooleanConstructor;
-    item: ObjectConstructor;
-    index: NumberConstructor;
-    style: ObjectConstructor;
-    selected: BooleanConstructor;
-    created: BooleanConstructor;
+    getLabel: (option: import("./select.types").Option) => any;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    hover: (index?: number) => index is number;
+    select: (val: import("./select.types").Option, index?: number) => boolean;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly data: ArrayConstructor;
+    readonly disabled: BooleanConstructor;
+    readonly hovering: BooleanConstructor;
+    readonly item: {
+        readonly type: import("vue").PropType<import("./select.types").Option>;
+        readonly required: true;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    readonly index: NumberConstructor;
+    readonly style: ObjectConstructor;
+    readonly selected: BooleanConstructor;
+    readonly created: BooleanConstructor;
 }>> & Readonly<{
-    onSelect?: ((...args: any[]) => any) | undefined;
-    onHover?: ((...args: any[]) => any) | undefined;
+    onSelect?: ((val: import("./select.types").Option, index?: number | undefined) => any) | undefined;
+    onHover?: ((index?: number | undefined) => any) | undefined;
 }>, {
-    disabled: boolean;
-    created: boolean;
-    selected: boolean;
-    hovering: boolean;
+    readonly disabled: boolean;
+    readonly created: boolean;
+    readonly selected: boolean;
+    readonly hovering: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/components/select/option-item.vue.js

@@ -1,31 +1,31 @@
-import i from "./option-item.vue2.js";
-import { createElementBlock as l, openBlock as n, withModifiers as r, normalizeClass as t, normalizeStyle as d, renderSlot as a, createElementVNode as m, toDisplayString as p } from "vue";
+import o from "./option-item.vue2.js";
+import { createElementBlock as l, openBlock as n, withModifiers as r, normalizeClass as d, normalizeStyle as t, renderSlot as a, createElementVNode as m, toDisplayString as p } from "vue";
 import f from "../../_virtual/_plugin-vue_export-helper.js";
 const u = ["aria-selected"];
-function b(e, s, k, $, v, y) {
+function b(e, s, k, v, $, g) {
   return n(), l("li", {
     "aria-selected": e.selected,
-    style: d(e.style),
-    class: t([
-      e.ns.be("dropdown", "option-item"),
+    style: t(e.style),
+    class: d([
+      e.ns.be("dropdown", "item"),
       e.ns.is("selected", e.selected),
       e.ns.is("disabled", e.disabled),
       e.ns.is("created", e.created),
-      { hover: e.hovering }
+      e.ns.is("hovering", e.hovering)
     ]),
-    onMouseenter: s[0] || (s[0] = (...o) => e.hoverItem && e.hoverItem(...o)),
-    onClick: s[1] || (s[1] = r((...o) => e.selectOptionClick && e.selectOptionClick(...o), ["stop"]))
+    onMousemove: s[0] || (s[0] = (...i) => e.hoverItem && e.hoverItem(...i)),
+    onClick: s[1] || (s[1] = r((...i) => e.selectOptionClick && e.selectOptionClick(...i), ["stop"]))
   }, [
     a(e.$slots, "default", {
       item: e.item,
       index: e.index,
       disabled: e.disabled
     }, () => [
-      m("span", null, p(e.item.label), 1)
+      m("span", null, p(e.getLabel(e.item)), 1)
     ])
   ], 46, u);
 }
-const O = /* @__PURE__ */ f(i, [["render", b]]);
+const I = /* @__PURE__ */ f(o, [["render", b]]);
 export {
-  O as default
+  I as default
 };

package/es/components/select/option-item.vue2.js

@@ -1,26 +1,29 @@
+import { defineComponent as s, inject as n } from "vue";
 import "@vueuse/core";
 import "@vft/utils";
 import "../../utils/ns-cover.js";
 import "lodash-es";
-import { defineComponent as m } from "vue";
-import { useNamespace as i } from "../../hooks/use-namespace/index.js";
+import { useNamespace as c } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import { OptionProps as s } from "./defaults.js";
-import { useOption as n } from "./useOption.js";
-const k = m({
-  props: s,
-  emits: ["select", "hover"],
+import { useOption as f } from "./useOption.js";
+import { useProps as l } from "./useProps.js";
+import { optionV2Emits as a, optionV2Props as u } from "./defaults.js";
+import { selectV2InjectionKey as V } from "./token.js";
+const y = s({
+  props: u,
+  emits: a,
   setup(o, { emit: t }) {
-    const r = i("select"), { hoverItem: e, selectOptionClick: p } = n(o, { emit: t });
+    const e = n(V), p = c("select"), { hoverItem: r, selectOptionClick: m } = f(o, { emit: t }), { getLabel: i } = l(e.props);
     return {
-      ns: r,
-      hoverItem: e,
-      selectOptionClick: p
+      ns: p,
+      hoverItem: r,
+      selectOptionClick: m,
+      getLabel: i
     };
   }
 });
 export {
-  k as default
+  y as default
 };

package/es/components/select/select-dropdown.d.ts

@@ -1,16 +1,42 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+import type { DynamicSizeListInstance, FixedSizeListInstance } from 'vft/es/components/virtual-list';
+import type { Option } from './select.types';
+import type { ComponentPublicInstance, ComputedRef, ExtractPropTypes, Ref } from 'vue';
+declare const props: {
+    loading: BooleanConstructor;
     data: {
         type: ArrayConstructor;
         required: true;
     };
     hoveringIndex: NumberConstructor;
     width: NumberConstructor;
-}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+};
+interface SelectDropdownExposed {
+    listRef: Ref<FixedSizeListInstance | DynamicSizeListInstance | undefined>;
+    isSized: ComputedRef<boolean>;
+    isItemDisabled: (modelValue: any[] | any, selected: boolean) => boolean;
+    isItemHovering: (target: number) => boolean;
+    isItemSelected: (modelValue: any[] | any, target: Option) => boolean;
+    scrollToItem: (index: number) => void;
+    resetScrollTop: () => void;
+}
+export type SelectDropdownInstance = ComponentPublicInstance<ExtractPropTypes<typeof props>, SelectDropdownExposed>;
+declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
+    loading: BooleanConstructor;
     data: {
         type: ArrayConstructor;
         required: true;
     };
     hoveringIndex: NumberConstructor;
     width: NumberConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, () => VNode, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
+    loading: BooleanConstructor;
+    data: {
+        type: ArrayConstructor;
+        required: true;
+    };
+    hoveringIndex: NumberConstructor;
+    width: NumberConstructor;
+}>> & Readonly<{}>, {
+    loading: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,193 +1,184 @@
-import { defineComponent as R, inject as U, ref as K, computed as b, watch as _, createVNode as c, unref as f, mergeProps as O } from "vue";
-import { isUndefined as $, isObject as T } from "@vft/utils";
-import "../virtual-list/components/dynamic-size-grid.js";
-import J from "../virtual-list/components/dynamic-size-list.js";
+import { defineComponent as _, inject as $, ref as H, computed as f, watch as J, unref as h, createVNode as p, mergeProps as D, toRaw as Q } from "vue";
+import { get as b } from "lodash-es";
+import { isUndefined as W, isIOS as X, isObject as K } from "@vft/utils";
+import Y from "../virtual-list/components/fixed-size-list.js";
+import Z from "../virtual-list/components/dynamic-size-list.js";
 import "../virtual-list/components/fixed-size-grid.js";
-import Q from "../virtual-list/components/fixed-size-list.js";
+import "../virtual-list/components/dynamic-size-grid.js";
 import "../virtual-list/props.js";
-import { EVENT_CODE as W } from "../../constants/aria.js";
 import "@vueuse/core";
+import { EVENT_CODE as ee } from "../../constants/aria.js";
 import "../../utils/ns-cover.js";
-import { get as l } from "lodash-es";
-import { useNamespace as X } from "../../hooks/use-namespace/index.js";
+import { useNamespace as te } from "../../hooks/use-namespace/index.js";
 import "../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../hooks/use-z-index/index.js";
-import Y from "./group-item.vue.js";
-import Z from "./option-item.vue.js";
-import { selectInjectionKey as ee } from "./token.js";
-const ge = /* @__PURE__ */ R({
-  name: "VftSelectDropdown",
-  props: {
-    data: {
-      type: Array,
-      required: !0
-    },
-    hoveringIndex: Number,
-    width: Number
+import oe from "./group-item.vue.js";
+import re from "./option-item.vue.js";
+import { useProps as se } from "./useProps.js";
+import { selectV2InjectionKey as ne } from "./token.js";
+const ie = {
+  loading: Boolean,
+  data: {
+    type: Array,
+    required: !0
   },
-  setup(h, {
-    slots: v,
-    expose: x
+  hoveringIndex: Number,
+  width: Number
+}, Ne = /* @__PURE__ */ _({
+  name: "ElSelectDropdown",
+  props: ie,
+  setup(w, {
+    slots: m,
+    expose: N
   }) {
-    const s = U(ee), d = X("select"), N = K([]), m = K(), k = b(() => h.data.length);
-    _(() => k.value, () => {
-      s.popper.value.updatePopper?.();
+    const o = $(ne), S = te("select"), {
+      getLabel: T,
+      getValue: g,
+      getDisabled: k
+    } = se(o.props), E = H([]), d = H(), L = f(() => w.data.length);
+    J(() => L.value, () => {
+      o.tooltipRef.value?.updatePopper?.();
     });
-    const u = b(() => $(s.props.estimatedOptionHeight)), w = b(() => u.value ? {
-      itemSize: s.props.itemHeight
+    const u = f(() => W(o.props.estimatedOptionHeight)), v = f(() => u.value ? {
+      itemSize: o.props.itemHeight
     } : {
-      estimatedSize: s.props.estimatedOptionHeight,
-      itemSize: (e) => N.value[e]
-    }), D = (e = [], t) => {
+      estimatedSize: o.props.estimatedOptionHeight,
+      itemSize: (e) => E.value[e]
+    }), A = (e = [], t) => {
       const {
         props: {
-          valueKey: o
+          valueKey: r
         }
-      } = s;
-      return T(t) ? e && e.some((r) => l(r, o) === l(t, o)) : e.includes(t);
-    }, E = (e, t) => {
-      if (T(t)) {
+      } = o;
+      return K(t) ? e && e.some((s) => Q(b(s, r)) === b(t, r)) : e.includes(t);
+    }, P = (e, t) => {
+      if (K(t)) {
         const {
-          valueKey: o
-        } = s.props;
-        return l(e, o) === l(t, o);
+          valueKey: r
+        } = o.props;
+        return b(e, r) === b(t, r);
       } else
         return e === t;
-    }, y = (e, t) => {
+    }, y = (e, t) => o.props.multiple ? A(e, g(t)) : P(e, g(t)), I = (e, t) => {
       const {
-        valueKey: o
-      } = s.props;
-      return s.props.multiple ? D(e, l(t, o)) : E(e, l(t, o));
-    }, S = (e, t) => {
-      const {
-        disabled: o,
-        multiple: r,
+        disabled: r,
+        multiple: s,
         multipleLimit: n
-      } = s.props;
-      return o || !t && (r ? n > 0 && e.length >= n : !1);
-    }, g = (e) => h.hoveringIndex === e;
-    x({
-      listRef: m,
+      } = o.props;
+      return r || !t && (s ? n > 0 && e.length >= n : !1);
+    }, z = (e) => w.hoveringIndex === e;
+    N({
+      listRef: d,
       isSized: u,
-      isItemDisabled: S,
-      isItemHovering: g,
+      isItemDisabled: I,
+      isItemHovering: z,
       isItemSelected: y,
       scrollToItem: (e) => {
-        const t = m.value;
+        const t = d.value;
         t && t.scrollToItem(e);
       },
       resetScrollTop: () => {
-        const e = m.value;
+        const e = d.value;
         e && e.resetScrollTop();
       }
     });
-    const L = (e) => {
+    const V = (e) => {
       const {
         index: t,
-        data: o,
-        style: r
-      } = e, n = f(u), {
-        itemSize: a,
-        estimatedSize: p
-      } = f(w), {
-        modelValue: z
-      } = s.props, {
+        data: r,
+        style: s
+      } = e, n = h(u), {
+        itemSize: l,
+        estimatedSize: a
+      } = h(v), {
+        modelValue: i
+      } = o.props, {
         onSelect: C,
         onHover: F
-      } = s, i = o[t];
-      if (i.type === "Group")
-        return c(Y, {
-          item: i,
-          style: r,
-          height: n ? a : p
+      } = o, c = r[t];
+      if (c.type === "Group")
+        return p(oe, {
+          item: c,
+          style: s,
+          height: n ? l : a
         }, null);
-      const H = y(z, i), G = S(z, H), B = g(t);
-      return c(Z, O(e, {
-        selected: H,
-        disabled: i.disabled || G,
-        created: !!i.created,
-        hovering: B,
-        item: i,
+      const x = y(i, c), G = I(i, x), M = z(t);
+      return p(re, D(e, {
+        selected: x,
+        disabled: k(c) || G,
+        created: !!c.created,
+        hovering: M,
+        item: c,
         onSelect: C,
         onHover: F
       }), {
-        default: (M) => v.default?.(M) || c("span", null, [i.label])
+        default: (U) => m.default?.(U) || p("span", null, [T(c)])
       });
     }, {
-      onKeyboardNavigate: I,
+      onKeyboardNavigate: O,
       onKeyboardSelect: j
-    } = s, A = () => {
-      I("forward");
-    }, P = () => {
-      I("backward");
-    }, V = () => {
-      s.expanded = !1;
-    }, q = (e) => {
+    } = o, R = () => {
+      O("forward");
+    }, q = () => {
+      O("backward");
+    }, B = (e) => {
       const {
         code: t
       } = e, {
-        tab: o,
-        esc: r,
+        tab: r,
+        esc: s,
         down: n,
-        up: a,
-        enter: p
-      } = W;
-      switch (t !== o && (e.preventDefault(), e.stopPropagation()), t) {
-        case o:
-        case r: {
-          V();
+        up: l,
+        enter: a,
+        numpadEnter: i
+      } = ee;
+      switch ([s, n, l, a, i].includes(t) && (e.preventDefault(), e.stopPropagation()), t) {
+        case r:
+        case s:
           break;
-        }
-        case n: {
-          A();
+        case n:
+          R();
           break;
-        }
-        case a: {
-          P();
+        case l:
+          q();
           break;
-        }
-        case p: {
+        case a:
+        case i:
           j();
           break;
-        }
       }
     };
     return () => {
       const {
         data: e,
         width: t
-      } = h, {
-        height: o,
-        multiple: r,
+      } = w, {
+        height: r,
+        multiple: s,
         scrollbarAlwaysOn: n
-      } = s.props;
-      if (e.length === 0)
-        return c("div", {
-          class: d.b("dropdown"),
-          style: {
-            width: `${t}px`
-          }
-        }, [v.empty?.()]);
-      const a = f(u) ? Q : J;
-      return c("div", {
-        class: [d.b("dropdown"), d.is("multiple", r)]
-      }, [c(a, O({
-        ref: m
-      }, f(w), {
-        className: d.be("dropdown", "list"),
-        scrollbarAlwaysOn: n,
+      } = o.props, l = f(() => X ? !0 : n), a = h(u) ? Y : Z;
+      return p("div", {
+        class: [S.b("dropdown"), S.is("multiple", s)],
+        style: {
+          width: `${t}px`
+        }
+      }, [m.header?.(), m.loading?.() || m.empty?.() || p(a, D({
+        ref: d
+      }, h(v), {
+        className: S.be("dropdown", "list"),
+        scrollbarAlwaysOn: l.value,
         data: e,
-        height: o,
+        height: r,
         width: t,
         total: e.length,
-        onKeydown: q
+        onKeydown: B
       }), {
-        default: (p) => c(L, p, null)
-      })]);
+        default: (i) => p(V, i, null)
+      }), m.footer?.()]);
     };
   }
 });
 export {
-  ge as default
+  Ne as default
 };

package/es/components/select/select.types.d.ts

@@ -1,18 +1,26 @@
-export type OptionCommon = {
-    label: string;
-};
-export type Option<T = any> = OptionCommon & {
+type OptionCommon = Record<string, any>;
+export type Option = OptionCommon & {
     created?: boolean;
-    value: T;
-    [prop: string]: any;
-};
-export type OptionGroup<T = any> = OptionCommon & {
-    options: Array<T>;
-    [prop: string]: any;
 };
-export type OptionType<T = any> = Option<T> | OptionGroup<T>;
+export type OptionGroup = OptionCommon;
+export type OptionType = Option | OptionGroup;
 export type OptionItemProps = {
     item: any;
     index: number;
     disabled: boolean;
 };
+export type SelectStates = {
+    inputValue: string;
+    cachedOptions: Option[];
+    createdOptions: Option[];
+    hoveringIndex: number;
+    inputHovering: boolean;
+    selectionWidth: number;
+    collapseItemWidth: number;
+    previousQuery: string | null;
+    previousValue: unknown;
+    selectedLabel: string;
+    menuVisibleOnFocus: boolean;
+    isBeforeHide: boolean;
+};
+export {};