vft 0.0.496 → 0.0.498

package/es/components/tree/tree-node.vue.d.ts

@@ -76,9 +76,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
 }>, {
     props: Record<string, any>;
     node: Node;
-    accordion: boolean;
     renderAfterExpand: boolean;
     showCheckbox: boolean;
+    accordion: boolean;
 }, {}, {
     CollapseTransition: import("vft/es/utils").SFCWithInstall<{
         new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {

package/es/components/tree/tree.type.d.ts

@@ -1,6 +1,7 @@
 import type { Component, ComponentInternalInstance, h, Ref, SetupContext, VNode } from 'vue';
 import type Node from './model/node';
 import type TreeStore from './model/tree-store';
+import type Tree from './tree.vue';
 export interface RootTreeType {
     ctx: SetupContext<any>;
     props: TreeComponentProps;
@@ -101,3 +102,4 @@ export declare interface TreeComponentProps {
     icon: string | Component;
 }
 export declare type NodeDropType = 'before' | 'after' | 'inner' | 'none';
+export type TreeInstance = InstanceType<typeof Tree> & unknown;

package/es/components/tree/tree.vue.d.ts

@@ -70,17 +70,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "current-change": () => void;
     check: () => void;
-    "node-drag-start": () => void;
-    "node-drag-leave": () => void;
-    "node-drag-enter": () => void;
-    "node-drag-over": () => void;
-    "node-drag-end": () => void;
-    "node-drop": () => void;
-    "node-expand": () => void;
     "check-change": () => void;
     "node-click": () => void;
     "node-contextmenu": () => void;
     "node-collapse": () => void;
+    "node-expand": () => void;
+    "node-drag-start": () => void;
+    "node-drag-end": () => void;
+    "node-drop": () => void;
+    "node-drag-leave": () => void;
+    "node-drag-enter": () => void;
+    "node-drag-over": () => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TreeProps>, {
     renderAfterExpand: boolean;
     expandOnClickNode: boolean;
@@ -95,17 +95,17 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
 }>>> & Readonly<{
     "onCurrent-change"?: (() => any) | undefined;
     onCheck?: (() => any) | undefined;
-    "onNode-drag-start"?: (() => any) | undefined;
-    "onNode-drag-leave"?: (() => any) | undefined;
-    "onNode-drag-enter"?: (() => any) | undefined;
-    "onNode-drag-over"?: (() => any) | undefined;
-    "onNode-drag-end"?: (() => any) | undefined;
-    "onNode-drop"?: (() => any) | undefined;
-    "onNode-expand"?: (() => any) | undefined;
     "onCheck-change"?: (() => any) | undefined;
     "onNode-click"?: (() => any) | undefined;
     "onNode-contextmenu"?: (() => any) | undefined;
     "onNode-collapse"?: (() => any) | undefined;
+    "onNode-expand"?: (() => any) | undefined;
+    "onNode-drag-start"?: (() => any) | undefined;
+    "onNode-drag-end"?: (() => any) | undefined;
+    "onNode-drop"?: (() => any) | undefined;
+    "onNode-drag-leave"?: (() => any) | undefined;
+    "onNode-drag-enter"?: (() => any) | undefined;
+    "onNode-drag-over"?: (() => any) | undefined;
 }>, {
     data: Array<any>;
     props: TreeComponentProps["props"];

package/es/components/tree-select/cache-options.d.ts

@@ -0,0 +1,20 @@
+import type { PropType } from 'vue';
+export type CacheOption = {
+    value: string | number | boolean | object;
+    currentLabel: string | number;
+    isDisabled: boolean;
+};
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CacheOption[]>;
+        default: () => never[];
+    };
+}>, () => undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<CacheOption[]>;
+        default: () => never[];
+    };
+}>> & Readonly<{}>, {
+    data: CacheOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/tree-select/cache-options.js

@@ -0,0 +1,30 @@
+import { defineComponent as e, inject as o, watch as r } from "vue";
+import { selectV2InjectionKey as p } from "../select/token.js";
+import "@vueuse/core";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import "lodash-es";
+import "../form/index.js";
+const u = e({
+  props: {
+    data: {
+      type: Array,
+      default: () => []
+    }
+  },
+  setup(t) {
+    return o(
+      p,
+      null
+    ), r(
+      () => t.data,
+      () => {
+      },
+      { flush: "post", immediate: !0 }
+    ), () => {
+    };
+  }
+});
+export {
+  u as default
+};

package/es/components/tree-select/index.d.ts

@@ -0,0 +1,8 @@
+import type { SFCWithInstall } from 'vft/es/utils';
+import TreeSelect from './tree-select.vue';
+declare const _TreeSelect: SFCWithInstall<typeof TreeSelect>;
+export default _TreeSelect;
+export declare const VftTreeSelect: SFCWithInstall<import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>>;
+export type { TreeSelectInstance } from './instance';

package/es/components/tree-select/index.js

@@ -0,0 +1,10 @@
+import e from "./tree-select.vue2.js";
+/* empty css                 */
+e.install = (t) => {
+  t.component(e.name, e);
+};
+const o = e, m = o;
+export {
+  m as VftTreeSelect,
+  o as default
+};

package/es/components/tree-select/instance.d.ts

@@ -0,0 +1,5 @@
+import type { SelectV2Instance } from 'vft/es/components/select/token';
+export type TreeSelectInstance = {
+    treeRef: any;
+    selectRef: SelectV2Instance;
+};

package/es/components/tree-select/instance.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,10 @@
+import type { Ref } from 'vue';
+import type { SelectV2Instance } from 'vft/es/components/select/token';
+export declare const useSelect: (props: any, { attrs, emit }: {
+    attrs: any;
+    emit: any;
+}, { select, tree, key, }: {
+    select: Ref<SelectV2Instance | undefined>;
+    tree: Ref<any>;
+    key: Ref<string>;
+}) => any;

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

@@ -0,0 +1,129 @@
+import { watch as g, nextTick as v, computed as c, onMounted as A, toRefs as T } from "vue";
+import { useEventListener as L } from "@vueuse/core";
+import { pick as k, get as d } from "lodash-es";
+import "../select/index.js";
+import { selectV2Props as C } from "../select/defaults.js";
+import "@vft/utils";
+import "../config-provider/hooks/use-global-config.js";
+import { EVENT_CODE as h } from "../../constants/aria.js";
+import { UPDATE_MODEL_EVENT as O } from "../../constants/event.js";
+import "../form/index.js";
+import { useNamespace as w } from "../../hooks/use-namespace/index.js";
+import "../../hooks/use-model-toggle/index.js";
+import "@popperjs/core";
+import "../../hooks/use-z-index/index.js";
+import { treeEach as $ } from "./utils.js";
+const j = (e) => e.code || e.key || "";
+function D(e, s, f, l) {
+  if (!Array.isArray(e) || e.length === 0) return [];
+  const r = [];
+  return $(
+    e,
+    (n) => {
+      r.push({
+        [s]: d(n, s),
+        [f]: d(n, f)
+      });
+    },
+    (n) => d(n, l) || []
+  ), r;
+}
+const Z = (e, { attrs: s, emit: f }, {
+  select: l,
+  tree: r,
+  key: n
+}) => {
+  const b = w("tree-select");
+  g(
+    () => e.data,
+    () => {
+      e.filterable && v(() => {
+        const t = l.value?.states?.inputValue || "";
+        r.value?.filter(t);
+      });
+    },
+    { flush: "post" }
+  );
+  const y = (t) => {
+    const o = t.at(-1);
+    if (o.expanded && o.childNodes.at(-1))
+      y([o.childNodes.at(-1)]);
+    else {
+      r.value?.el$?.querySelector(
+        `[data-key="${t.at(-1).key}"]`
+      )?.focus({ preventScroll: !0 });
+      return;
+    }
+  }, m = c(() => ({
+    value: n.value,
+    label: "label",
+    children: "children",
+    ...e.props
+  })), x = () => {
+    v(() => {
+      const t = l.value;
+      if (!t?.states) return;
+      const o = e.data || [], i = m.value.value, p = m.value.label, u = m.value.children, M = D(o, i, p, u), a = e.modelValue;
+      if (a == null || Array.isArray(a) && a.length === 0) {
+        t.states.selectedLabel = "";
+        return;
+      }
+      const S = (Array.isArray(a) ? a : [a]).map((N) => {
+        const E = M.find((V) => d(V, i) === N);
+        return E ? d(E, p) : "";
+      });
+      t.states.selectedLabel = S.filter(Boolean).join(", ");
+    });
+  };
+  return A(() => {
+    x(), L(
+      () => l.value?.selectRef,
+      "keydown",
+      async (t) => {
+        const o = j(t), i = l.value?.expanded;
+        [h.down, h.up].includes(o) && i && (await v(), setTimeout(() => {
+          if (h.up === o) {
+            const u = r.value?.store?.root?.childNodes;
+            u && y(u);
+            return;
+          }
+          (l.value?.states?.hoveringIndex ?? -1) >= 0 && l.value?.filteredOptions && r.value?.el$?.querySelector("[data-key]")?.focus({ preventScroll: !0 });
+        }));
+      },
+      {
+        capture: !0
+      }
+    );
+  }), g(
+    () => [e.data, e.modelValue],
+    x,
+    { immediate: !0, deep: !0 }
+  ), {
+    ...k(T(e), Object.keys(C)),
+    ...s,
+    class: c(() => s.class),
+    style: c(() => s.style),
+    // attrs is not reactive, when v-model binding source changes,
+    // this listener is still old, see the bug(or test 'v-model source change'):
+    // https://github.com/element-plus/element-plus/issues/14204
+    "onUpdate:modelValue": (t) => f(O, t),
+    valueKey: n,
+    popperClass: c(() => {
+      const t = [b.e("popper")];
+      return e.popperClass && t.push(e.popperClass), t.join(" ");
+    }),
+    popperStyle: c(() => {
+      const t = e.dropdownMaxHeight, o = typeof t == "number" ? `${t}px` : String(t || "274px");
+      return {
+        ...e.popperStyle || {},
+        "--vft-tree-select-dropdown-max-height": o
+      };
+    }),
+    filterMethod: (t = "") => {
+      e.filterMethod ? e.filterMethod(t) : e.remoteMethod ? e.remoteMethod(t) : r.value?.filter(t);
+    }
+  };
+};
+export {
+  Z as useSelect
+};

package/es/components/tree-select/style/css.d.ts

@@ -0,0 +1,4 @@
+import 'vft/es/components/select/style/css';
+import 'vft/es/components/tree/style/css';
+import 'vft/es/components/icon/style/css';
+import 'vft/theme-style/vft-tree-select.css';

package/es/components/tree-select/style/css.js

@@ -0,0 +1,11 @@
+import "vft/theme-style/base.css";
+import "vft/theme-style/vft-input.css";
+import "vft/theme-style/vft-tag.css";
+import "vft/theme-style/vft-scrollbar.css";
+import "vft/theme-style/vft-popper.css";
+import "vft/theme-style/vft-virtual-list.css";
+import "vft/theme-style/vft-select.css";
+import "vft/theme-style/vft-checkbox.css";
+import "vft/theme-style/vft-tree.css";
+import "vft/theme-style/vft-icon.css";
+import "vft/theme-style/vft-tree-select.css";

package/es/components/tree-select/style/index.d.ts

@@ -0,0 +1,4 @@
+import 'vft/es/components/select/style';
+import 'vft/es/components/tree/style';
+import 'vft/es/components/icon/style';
+import 'vft/theme-style/src/tree-select.scss';

package/es/components/tree-select/style/index.js

@@ -0,0 +1,11 @@
+import "vft/theme-style/src/base.scss";
+import "vft/theme-style/src/input.scss";
+import "vft/theme-style/src/tag.scss";
+import "vft/theme-style/src/scrollbar.scss";
+import "vft/theme-style/src/popper.scss";
+import "vft/theme-style/src/virtual-list.scss";
+import "vft/theme-style/src/select.scss";
+import "vft/theme-style/src/checkbox.scss";
+import "vft/theme-style/src/tree.scss";
+import "vft/theme-style/src/icon.scss";
+import "vft/theme-style/src/tree-select.scss";

package/es/components/tree-select/tree-select-option.d.ts

@@ -0,0 +1,42 @@
+declare const component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    value: {
+        type: (ObjectConstructor | StringConstructor | NumberConstructor | BooleanConstructor)[];
+        required: true;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    value: {
+        type: (ObjectConstructor | StringConstructor | NumberConstructor | BooleanConstructor)[];
+        required: true;
+    };
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    label: string | number;
+    disabled: boolean;
+    visible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default component;

package/es/components/tree-select/tree-select-option.js

@@ -0,0 +1,35 @@
+import { defineComponent as l, h as a } from "vue";
+const u = l({
+  name: "TreeSelectOption",
+  props: {
+    value: {
+      type: [String, Number, Boolean, Object],
+      required: !0
+    },
+    label: {
+      type: [String, Number],
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    visible: {
+      type: Boolean,
+      default: !0
+    }
+  },
+  setup(e, { slots: t }) {
+    return () => e.visible ? a(
+      "span",
+      {
+        class: "vft-tree-select-option",
+        "data-value": e.value
+      },
+      t.default ? t.default() : e.label
+    ) : null;
+  }
+});
+export {
+  u as default
+};

package/es/components/tree-select/tree-select.vue.d.ts

@@ -0,0 +1,4 @@
+declare const _default: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/components/tree-select/tree-select.vue.js

@@ -0,0 +1,5 @@
+import o from "./tree-select.vue2.js";
+/* empty css                 */
+export {
+  o as default
+};

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

@@ -0,0 +1,155 @@
+import { defineComponent as h, ref as s, computed as m, reactive as a, onMounted as g, h as l } from "vue";
+import { pick as u } from "lodash-es";
+import { VftSelect as C } from "../select/index.js";
+import { selectV2Props as k } from "../select/defaults.js";
+import { VftTree as b } from "../tree/index.js";
+import { useSelect as B } from "./select.js";
+import { useTree as N } from "./tree.js";
+const v = {
+  data: Array,
+  emptyText: String,
+  renderAfterExpand: {
+    type: Boolean,
+    default: !0
+  },
+  nodeKey: String,
+  checkStrictly: Boolean,
+  defaultExpandAll: Boolean,
+  expandOnClickNode: {
+    type: Boolean,
+    default: !0
+  },
+  checkOnClickNode: Boolean,
+  checkDescendants: Boolean,
+  autoExpandParent: {
+    type: Boolean,
+    default: !0
+  },
+  defaultCheckedKeys: Array,
+  defaultExpandedKeys: Array,
+  currentNodeKey: [String, Number],
+  renderContent: Function,
+  showCheckbox: Boolean,
+  draggable: Boolean,
+  allowDrag: Function,
+  allowDrop: Function,
+  props: {
+    type: Object,
+    default: () => ({
+      children: "children",
+      label: "label",
+      disabled: "disabled"
+    })
+  },
+  lazy: Boolean,
+  highlightCurrent: Boolean,
+  load: Function,
+  filterNodeMethod: Function,
+  accordion: Boolean,
+  indent: {
+    type: Number,
+    default: 18
+  },
+  icon: [String, Object]
+}, D = h({
+  name: "VftTreeSelect",
+  // disable `VftSelect` inherit current attrs
+  inheritAttrs: !1,
+  props: {
+    ...k,
+    ...v,
+    /**
+     * @description The cached data of the lazy node, the structure is the same as the data, used to get the label of the unloaded data
+     */
+    cacheData: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @description Override options prop to make it optional for TreeSelect
+     * VftSelect requires options, but TreeSelect uses Tree component instead
+     */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @description 下拉内容最大高度（px），超出出现滚动条
+     */
+    dropdownMaxHeight: {
+      type: [Number, String],
+      default: 274
+    }
+  },
+  setup(o, r) {
+    const { expose: i } = r, e = s(), t = s(), d = m(() => o.nodeKey || o.valueKey || "value"), f = B(o, r, { select: e, tree: t, key: d }), p = N(o, r, {
+      select: e,
+      tree: t,
+      key: d
+    }), { cacheOptions: K, ...y } = p, c = a({});
+    return i(c), g(() => {
+      Object.assign(c, {
+        //TODO: let only tree and select in 3.0
+        ...u(t.value, [
+          "filter",
+          "updateKeyChildren",
+          "getCheckedNodes",
+          "setCheckedNodes",
+          "getCheckedKeys",
+          "setCheckedKeys",
+          "setChecked",
+          "getHalfCheckedNodes",
+          "getHalfCheckedKeys",
+          "getCurrentKey",
+          "getCurrentNode",
+          "setCurrentKey",
+          "setCurrentNode",
+          "getNode",
+          "remove",
+          "append",
+          "insertBefore",
+          "insertAfter"
+        ]),
+        ...u(e.value, ["focus", "blur"]),
+        selectedLabel: e.value?.selectedLabel ?? "",
+        treeRef: t.value,
+        selectRef: e.value
+      });
+    }), () => l(
+      C,
+      /**
+       * 1. The `props` is processed into `Refs`, but `v-bind` and
+       * render function props cannot read `Refs`, so use `reactive`
+       * unwrap the `Refs` and keep reactive.
+       * 2. The keyword `ref` requires `Ref`, but `reactive` broke it,
+       * so use function.
+       * 3. VftSelect requires `options` prop, but we use custom slots
+       * so we pass an empty array.
+       */
+      a({
+        ...f,
+        // Pass a dummy option to prevent "No data" from showing
+        // Since we use custom slots (Tree in footer), this won't be rendered
+        ref: (n) => e.value = n
+      }),
+      {
+        default: () => null,
+        // Custom rendering in footer
+        empty: () => l("div", {
+          style: { display: "none" }
+        }),
+        // Hide "No data" container completely
+        footer: () => l(
+          b,
+          a({
+            ...y,
+            ref: (n) => t.value = n
+          })
+        )
+      }
+    );
+  }
+});
+export {
+  D as default
+};

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

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue';
+import type { SelectV2Instance } from 'vft/es/components/select/token';
+export declare const useTree: (props: any, { attrs, slots, emit }: {
+    attrs: any;
+    slots: any;
+    emit: any;
+}, { select, tree, key, }: {
+    select: Ref<SelectV2Instance | undefined>;
+    tree: Ref<any>;
+    key: Ref<string>;
+}) => any;