vft 0.0.249 → 0.0.252

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

@@ -1,61 +1,65 @@
-import { ClickOutside as c } from "@vft/directives";
-import { isArray as a } from "@vft/utils";
-import { VftIcon as f } from "../icon/index.js";
-import { VftTag as s } from "../tag/index.js";
-import { VftTooltip as d } from "../tooltip/index.js";
-import { UPDATE_MODEL_EVENT as u, CHANGE_EVENT as v } from "../../constants/event.js";
-import { defineComponent as V, vModelText as S, computed as b, reactive as p, toRefs as n, provide as g } from "vue";
-import { SelectProps as E } from "./defaults.js";
-import T from "./select-dropdown.js";
-import { selectInjectionKey as y } from "./token.js";
-import K from "./useSelect.js";
-const D = V({
+import { VftIcon as d } from "../icon/index.js";
+import { VftTag as u } from "../tag/index.js";
+import { VftTooltip as V } from "../tooltip/index.js";
+import "@vueuse/core";
+import { isArray as b } from "@vft/utils";
+import "../../utils/ns-cover.js";
+import "lodash-es";
+import { defineComponent as v, computed as l, reactive as n, toRefs as p, provide as S } from "vue";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { useCalcInputWidth as y } from "../../hooks/use-calc-input-width/index.js";
+import { ClickOutside as g } from "@vft/directives";
+import { selectV2Emits as h, selectV2Props as I } from "./defaults.js";
+import K from "./select-dropdown.js";
+import { selectV2InjectionKey as R } from "./token.js";
+import T from "./useSelect.js";
+const B = v({
   name: "VftSelect",
   components: {
-    SelectMenu: T,
-    VftTag: s,
-    VftTooltip: d,
-    VftIcon: f
+    SelectMenu: K,
+    Tag: u,
+    Tooltip: V,
+    Icon: d
   },
-  directives: { ClickOutside: c, ModelText: S },
-  props: E,
-  emits: [
-    u,
-    v,
-    "remove-tag",
-    "clear",
-    "visible-change",
-    "focus",
-    "blur"
-  ],
-  setup(o, { emit: l }) {
-    const t = b(() => {
-      const { modelValue: r, multiple: i } = o, m = i ? [] : void 0;
-      return a(r) ? i ? r : m : i ? m : r;
-    }), e = K(
-      p({
-        ...n(o),
-        modelValue: t
+  directives: { ClickOutside: g },
+  props: I,
+  emits: h,
+  setup(o, { emit: a }) {
+    const r = l(() => {
+      const { modelValue: t, multiple: i } = o, m = i ? [] : void 0;
+      return b(t) ? i ? t : m : i ? m : t;
+    }), e = T(
+      n({
+        ...p(o),
+        modelValue: r
       }),
-      l
-    );
-    return g(y, {
-      props: p({
-        ...n(o),
+      a
+    ), { calculatorRef: c, inputStyle: s } = y();
+    S(R, {
+      props: n({
+        ...p(o),
         height: e.popupHeight,
-        modelValue: t
+        modelValue: r
       }),
-      popper: e.popper,
+      expanded: e.expanded,
+      tooltipRef: e.tooltipRef,
       onSelect: e.onSelect,
       onHover: e.onHover,
       onKeyboardNavigate: e.onKeyboardNavigate,
       onKeyboardSelect: e.onKeyboardSelect
-    }), {
+    });
+    const f = l(() => o.multiple ? e.states.cachedOptions.map((t) => t.label) : e.states.selectedLabel);
+    return {
       ...e,
-      modelValue: t
+      modelValue: r,
+      selectedLabel: f,
+      calculatorRef: c,
+      inputStyle: s
     };
   }
 });
 export {
-  D as default
+  B as default
 };

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

@@ -1,16 +1,14 @@
-import type { TooltipInstance } from 'vft/es/components/tooltip';
-import type { ExtractPropTypes, InjectionKey, Ref } from 'vue';
-import type { OptionProps, SelectProps } from './defaults';
+import type { InjectionKey, Ref } from 'vue';
+import type { OptionV2Props, SelectV2Instance, SelectV2Props } from './defaults';
 import type { Option } from './select.types';
-export interface SelectContext {
-    props: ExtractPropTypes<typeof SelectProps>;
-    expanded: boolean;
-    popper: Ref<TooltipInstance>;
-    onSelect: (option: Option<any>, index: number, byClick?: boolean) => void;
-    onHover: (idx: number) => void;
+export interface SelectV2Context {
+    props: SelectV2Props;
+    expanded: Ref<boolean>;
+    tooltipRef: any;
+    onSelect: (option: Option) => void;
+    onHover: (idx?: number) => void;
     onKeyboardNavigate: (direction: 'forward' | 'backward') => void;
     onKeyboardSelect: () => void;
 }
-export declare const selectInjectionKey: InjectionKey<SelectContext>;
-export type IOptionProps = ExtractPropTypes<typeof OptionProps>;
-export type ISelectProps = ExtractPropTypes<typeof SelectProps>;
+export declare const selectV2InjectionKey: InjectionKey<SelectV2Context>;
+export type { OptionV2Props, SelectV2Instance, SelectV2Props };

package/es/components/select/token.js

@@ -1,4 +1,6 @@
-const e = Symbol("ElSelectInjection");
+const e = Symbol(
+  "ElSelectV2Injection"
+);
 export {
-  e as selectInjectionKey
+  e as selectV2InjectionKey
 };

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

@@ -1,6 +1,6 @@
-import type { Option } from './select.types';
-import type { ISelectProps } from './token';
-export declare function useAllowCreate(props: ISelectProps, states: any): {
+import type { SelectV2Props } from './token';
+import type { Option, SelectStates } from './select.types';
+export declare function useAllowCreate(props: SelectV2Props, states: SelectStates): {
     createNewOption: (query: string) => void;
     removeNewOption: (option: Option) => void;
     selectNewOption: (option: Option) => void;

package/es/components/select/useAllowCreate.js

@@ -1,48 +1,51 @@
-import { ref as o, computed as p } from "vue";
-function h(t, n) {
-  const i = o(0), u = o(null), a = p(() => t.allowCreate && t.filterable);
-  function r(e) {
-    const l = (c) => c.value === e;
-    return t.options && t.options.some(l) || n.createdOptions.some(l);
+import { ref as f, computed as m } from "vue";
+import { useProps as w } from "./useProps.js";
+function x(l, n) {
+  const { aliasProps: c, getLabel: r, getValue: u } = w(l), i = f(0), d = f(), a = m(() => l.allowCreate && l.filterable);
+  function O(e) {
+    const t = (o) => r(o) === e;
+    return l.options && l.options.some(t) || n.createdOptions.some(t);
   }
-  function d(e) {
-    a.value && (t.multiple && e.created ? i.value++ : u.value = e);
+  function v(e) {
+    a.value && (l.multiple && e.created ? i.value++ : d.value = e);
   }
-  function f(e) {
+  function p(e) {
     if (a.value)
-      if (e && e.length > 0 && !r(e)) {
-        const l = {
-          value: e,
-          label: e,
+      if (e && e.length > 0) {
+        if (O(e))
+          return;
+        const t = {
+          [c.value.value]: e,
+          [c.value.label]: e,
           created: !0,
-          disabled: !1
+          [c.value.disabled]: !1
         };
-        n.createdOptions.length >= i.value ? n.createdOptions[i.value] = l : n.createdOptions.push(l);
-      } else if (t.multiple)
+        n.createdOptions.length >= i.value ? n.createdOptions[i.value] = t : n.createdOptions.push(t);
+      } else if (l.multiple)
         n.createdOptions.length = i.value;
       else {
-        const l = u.value;
-        n.createdOptions.length = 0, l && l.created && n.createdOptions.push(l);
+        const t = d.value;
+        n.createdOptions.length = 0, t && t.created && n.createdOptions.push(t);
       }
   }
-  function O(e) {
-    if (!a.value || !e || !e.created || e.created && t.reserveKeyword && n.inputValue === e.label)
+  function s(e) {
+    if (!a.value || !e || !e.created || e.created && l.reserveKeyword && n.inputValue === r(e))
       return;
-    const l = n.createdOptions.findIndex(
-      (c) => c.value === e.value
+    const t = n.createdOptions.findIndex(
+      (o) => u(o) === u(e)
     );
-    ~l && (n.createdOptions.splice(l, 1), i.value--);
+    ~t && (n.createdOptions.splice(t, 1), i.value--);
   }
-  function v() {
+  function h() {
     a.value && (n.createdOptions.length = 0, i.value = 0);
   }
   return {
-    createNewOption: f,
-    removeNewOption: O,
-    selectNewOption: d,
-    clearAllNewOption: v
+    createNewOption: p,
+    removeNewOption: s,
+    selectNewOption: v,
+    clearAllNewOption: h
   };
 }
 export {
-  h as useAllowCreate
+  x as useAllowCreate
 };

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

@@ -1,6 +1,6 @@
-import type { IOptionProps } from './token';
-export declare function useOption(props: IOptionProps, { emit }: {
-    emit: any;
+import type { OptionV2EmitFn, OptionV2Props } from './defaults';
+export declare function useOption(props: OptionV2Props, { emit }: {
+    emit: OptionV2EmitFn;
 }): {
     hoverItem: () => void;
     selectOptionClick: () => void;

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

@@ -0,0 +1,21 @@
+import type { SelectV2Props } from './token';
+import type { Option } from './select.types';
+export interface Props {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    options?: string;
+}
+export declare const defaultProps: Required<Props>;
+export declare function useProps(props: Pick<SelectV2Props, 'props'>): {
+    aliasProps: import("vue").ComputedRef<{
+        label: string;
+        value: string;
+        disabled: string;
+        options: string;
+    }>;
+    getLabel: (option: Option) => any;
+    getValue: (option: Option) => any;
+    getDisabled: (option: Option) => any;
+    getOptions: (option: Option) => any;
+};

package/es/components/select/useProps.js

@@ -0,0 +1,22 @@
+import { computed as a } from "vue";
+import { get as o } from "lodash-es";
+const s = {
+  label: "label",
+  value: "value",
+  disabled: "disabled",
+  options: "options"
+};
+function d(l) {
+  const t = a(() => ({ ...s, ...l.props }));
+  return {
+    aliasProps: t,
+    getLabel: (e) => o(e, t.value.label),
+    getValue: (e) => o(e, t.value.value),
+    getDisabled: (e) => o(e, t.value.disabled),
+    getOptions: (e) => o(e, t.value.options)
+  };
+}
+export {
+  s as defaultProps,
+  d as useProps
+};