vft 0.0.499 → 0.0.501

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

@@ -1,11 +1,11 @@
-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 { watch as b, nextTick as h, computed as c, onMounted as A, toRefs as L } from "vue";
+import { useEventListener as T } 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 { EVENT_CODE as y } 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";
@@ -33,21 +33,21 @@ const Z = (e, { attrs: s, emit: f }, {
   tree: r,
   key: n
 }) => {
-  const b = w("tree-select");
-  g(
+  const g = w("tree-select");
+  b(
     () => e.data,
     () => {
-      e.filterable && v(() => {
+      e.filterable && h(() => {
         const t = l.value?.states?.inputValue || "";
         r.value?.filter(t);
       });
     },
     { flush: "post" }
   );
-  const y = (t) => {
+  const x = (t) => {
     const o = t.at(-1);
     if (o.expanded && o.childNodes.at(-1))
-      y([o.childNodes.at(-1)]);
+      x([o.childNodes.at(-1)]);
     else {
       r.value?.el$?.querySelector(
         `[data-key="${t.at(-1).key}"]`
@@ -59,32 +59,32 @@ const Z = (e, { attrs: s, emit: f }, {
     label: "label",
     children: "children",
     ...e.props
-  })), x = () => {
-    v(() => {
+  })), p = () => {
+    h(() => {
       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;
+      const o = e.data || [], i = m.value.value, v = m.value.label, u = m.value.children, S = D(o, i, v, 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) : "";
+      const M = (Array.isArray(a) ? a : [a]).map((N) => {
+        const E = S.find((V) => d(V, i) === N);
+        return E ? d(E, v) : "";
       });
-      t.states.selectedLabel = S.filter(Boolean).join(", ");
+      t.states.selectedLabel = M.filter(Boolean).join(", ");
     });
   };
-  return A(() => {
-    x(), L(
+  return l.syncSelectedLabel = p, A(() => {
+    p(), T(
       () => 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) {
+        [y.down, y.up].includes(o) && i && (await h(), setTimeout(() => {
+          if (y.up === o) {
             const u = r.value?.store?.root?.childNodes;
-            u && y(u);
+            u && x(u);
             return;
           }
           (l.value?.states?.hoveringIndex ?? -1) >= 0 && l.value?.filteredOptions && r.value?.el$?.querySelector("[data-key]")?.focus({ preventScroll: !0 });
@@ -94,12 +94,12 @@ const Z = (e, { attrs: s, emit: f }, {
         capture: !0
       }
     );
-  }), g(
+  }), b(
     () => [e.data, e.modelValue],
-    x,
+    p,
     { immediate: !0, deep: !0 }
   ), {
-    ...k(T(e), Object.keys(C)),
+    ...k(L(e), Object.keys(C)),
     ...s,
     class: c(() => s.class),
     style: c(() => s.style),
@@ -109,7 +109,7 @@ const Z = (e, { attrs: s, emit: f }, {
     "onUpdate:modelValue": (t) => f(O, t),
     valueKey: n,
     popperClass: c(() => {
-      const t = [b.e("popper")];
+      const t = [g.e("popper")];
       return e.popperClass && t.push(e.popperClass), t.join(" ");
     }),
     popperStyle: c(() => {

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

@@ -1,5 +1,5 @@
-import { defineComponent as l, h as a } from "vue";
-const u = l({
+import { defineComponent as n, inject as r, computed as i, h as o } from "vue";
+const c = n({
   name: "TreeSelectOption",
   props: {
     value: {
@@ -19,17 +19,28 @@ const u = l({
       default: !0
     }
   },
-  setup(e, { slots: t }) {
-    return () => e.visible ? a(
+  setup(e, { slots: a }) {
+    const l = r("treeSelectModelValue", null), u = i(() => {
+      if (!l || l.value === void 0 || l.value === null)
+        return !1;
+      const t = l.value;
+      return Array.isArray(t) ? t.includes(e.value) : t === e.value;
+    });
+    return () => e.visible ? o(
       "span",
       {
-        class: "vft-tree-select-option",
+        class: [
+          "vft-tree-select-option",
+          {
+            "is-selected": u.value
+          }
+        ],
         "data-value": e.value
       },
-      t.default ? t.default() : e.label
+      a.default ? a.default() : e.label
     ) : null;
   }
 });
 export {
-  u as default
+  c as default
 };

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

@@ -1,11 +1,11 @@
-import { defineComponent as h, ref as s, computed as m, reactive as a, onMounted as g, h as l } from "vue";
+import { defineComponent as h, ref as s, computed as m, provide as g, toRef as C, reactive as n, onMounted as k, h as a } 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 = {
+import { VftSelect as b } from "../select/index.js";
+import { selectV2Props as v } from "../select/defaults.js";
+import { VftTree as B } from "../tree/index.js";
+import { useSelect as N } from "./select.js";
+import { useTree as K } from "./tree.js";
+const S = {
   data: Array,
   emptyText: String,
   renderAfterExpand: {
@@ -51,13 +51,13 @@ const v = {
     default: 18
   },
   icon: [String, Object]
-}, D = h({
+}, E = h({
   name: "VftTreeSelect",
   // disable `VftSelect` inherit current attrs
   inheritAttrs: !1,
   props: {
-    ...k,
     ...v,
+    ...S,
     /**
      * @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
      */
@@ -81,16 +81,18 @@ const v = {
       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, {
+  setup(t, r) {
+    const { expose: i } = r, e = s(), o = s(), d = m(() => t.nodeKey || t.valueKey || "value");
+    g("treeSelectModelValue", C(t, "modelValue"));
+    const f = N(t, r, { select: e, tree: o, key: d }), p = K(t, r, {
       select: e,
-      tree: t,
+      tree: o,
       key: d
-    }), { cacheOptions: K, ...y } = p, c = a({});
-    return i(c), g(() => {
+    }), { cacheOptions: A, ...y } = p, c = n({});
+    return i(c), k(() => {
       Object.assign(c, {
         //TODO: let only tree and select in 3.0
-        ...u(t.value, [
+        ...u(o.value, [
           "filter",
           "updateKeyChildren",
           "getCheckedNodes",
@@ -112,11 +114,11 @@ const v = {
         ]),
         ...u(e.value, ["focus", "blur"]),
         selectedLabel: e.value?.selectedLabel ?? "",
-        treeRef: t.value,
+        treeRef: o.value,
         selectRef: e.value
       });
-    }), () => l(
-      C,
+    }), () => a(
+      b,
       /**
        * 1. The `props` is processed into `Refs`, but `v-bind` and
        * render function props cannot read `Refs`, so use `reactive`
@@ -126,24 +128,24 @@ const v = {
        * 3. VftSelect requires `options` prop, but we use custom slots
        * so we pass an empty array.
        */
-      a({
+      n({
         ...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
+        ref: (l) => e.value = l
       }),
       {
         default: () => null,
         // Custom rendering in footer
-        empty: () => l("div", {
+        empty: () => a("div", {
           style: { display: "none" }
         }),
         // Hide "No data" container completely
-        footer: () => l(
-          b,
-          a({
+        footer: () => a(
+          B,
+          n({
             ...y,
-            ref: (n) => t.value = n
+            ref: (l) => o.value = l
           })
         )
       }
@@ -151,5 +153,5 @@ const v = {
   }
 });
 export {
-  D as default
+  E as default
 };

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

@@ -1,4 +1,4 @@
-import { watch as L, nextTick as x, computed as C, toRefs as A } from "vue";
+import { watch as D, nextTick as x, computed as C, toRefs as A } from "vue";
 import { isEqual as P, pick as T, isNil as z } from "lodash-es";
 import { UPDATE_MODEL_EVENT as v } from "../../constants/event.js";
 import "@vueuse/core";
@@ -8,13 +8,13 @@ import { escapeStringRegexp as H } from "../../utils/vue/data-helper.js";
 import "../form/index.js";
 import "../tree/index.js";
 import I from "./tree-select-option.js";
-import { toValidArray as r, treeFind as K, isValidValue as M, treeEach as b, isValidArray as _ } from "./utils.js";
+import { toValidArray as r, treeFind as K, isValidValue as S, treeEach as b, isValidArray as _ } from "./utils.js";
 const $ = (e, { attrs: f, slots: N, emit: k }, {
-  select: s,
+  select: u,
   tree: t,
   key: m
 }) => {
-  L(
+  D(
     [() => e.modelValue, t],
     () => {
       e.showCheckbox && x(() => {
@@ -30,7 +30,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
       deep: !0
     }
   );
-  const O = C(() => ({
+  const M = C(() => ({
     value: m.value,
     label: "label",
     children: "children",
@@ -38,7 +38,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
     isLeaf: "isLeaf",
     ...e.props
   })), d = (l, c) => {
-    const n = O.value[l];
+    const n = M.value[l];
     return F(n) ? n(
       c,
       t.value?.getNode(d("value", c))
@@ -48,7 +48,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
     (c) => d("value", c) === l,
     (c) => d("children", c),
     (c, n, i, o) => o && d("value", o)
-  )).filter((l) => M(l)), w = C(() => {
+  )).filter((l) => S(l)), O = C(() => {
     if (!e.renderAfterExpand && !e.lazy) return [];
     const l = [];
     return b(
@@ -66,7 +66,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
   }), V = () => t.value?.getCheckedKeys().filter((l) => {
     const c = t.value?.getNode(l);
     return !z(c) && R(c.childNodes);
-  }), S = [
+  }), w = [
     "data",
     "emptyText",
     "renderAfterExpand",
@@ -95,7 +95,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
     "icon"
   ];
   return {
-    ...T(A(e), S),
+    ...T(A(e), w),
     ...f,
     nodeKey: m,
     // only expand on click node when the `check-strictly` is false
@@ -123,11 +123,12 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
               label: d("label", l),
               disabled: d("disabled", l)
             };
-            if (s.value?.allOptionsValueMap) {
-              const h = s.value.allOptionsValueMap.get(i);
-              h ? s.value?.onSelect(h.option) : s.value?.onSelect(o);
+            if (u.value?.allOptionsValueMap) {
+              const s = u.value.allOptionsValueMap.get(i);
+              s ? u.value?.onSelect(s.option) : u.value?.onSelect(o);
             } else
-              s.value?.onSelect(o);
+              u.value?.onSelect(o);
+            u.syncSelectedLabel && u.syncSelectedLabel();
           }
         } else e.expandOnClickNode && n.proxy.handleExpandIconClick();
     },
@@ -139,9 +140,9 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
         (a) => i[a.key] = a,
         (a) => a.childNodes
       );
-      const o = c.checkedKeys, h = e.multiple ? r(e.modelValue).filter(
+      const o = c.checkedKeys, s = e.multiple ? r(e.modelValue).filter(
         (a) => !(a in i) && !o.includes(a)
-      ) : [], y = h.concat(o);
+      ) : [], y = s.concat(o);
       if (e.checkStrictly)
         k(
           v,
@@ -150,20 +151,20 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
         );
       else if (e.multiple) {
         const a = V();
-        k(v, h.concat(a));
+        k(v, s.concat(a));
       } else {
         const a = K(
           [l],
-          (u) => !_(d("children", u)) && !d("disabled", u),
-          (u) => d("children", u)
-        ), E = a ? d("value", a) : void 0, D = M(e.modelValue) && !!K(
+          (h) => !_(d("children", h)) && !d("disabled", h),
+          (h) => d("children", h)
+        ), E = a ? d("value", a) : void 0, L = S(e.modelValue) && !!K(
           [l],
-          (u) => d("value", u) === e.modelValue,
-          (u) => d("children", u)
+          (h) => d("value", h) === e.modelValue,
+          (h) => d("children", h)
         );
         k(
           v,
-          E === e.modelValue || D ? void 0 : E
+          E === e.modelValue || L ? void 0 : E
         );
       }
       x(() => {
@@ -174,7 +175,7 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
           halfCheckedKeys: t.value.getHalfCheckedKeys(),
           halfCheckedNodes: t.value.getHalfCheckedNodes()
         });
-      }), s.value?.focus();
+      }), u.value?.focus();
     },
     onNodeExpand: (l, c, n) => {
       f.onNodeExpand?.(l, c, n), x(() => {
@@ -185,15 +186,15 @@ const $ = (e, { attrs: f, slots: N, emit: k }, {
             (a) => i[a.key] = a,
             (a) => a.childNodes
           );
-          const h = r(e.modelValue).filter(
+          const s = r(e.modelValue).filter(
             (a) => !(a in i) && !o.includes(a)
           ), y = V();
-          k(v, h.concat(y));
+          k(v, s.concat(y));
         }
       });
     },
     // else
-    cacheOptions: w
+    cacheOptions: O
   };
 };
 export {

package/es/components/upload/index.d.ts

@@ -50,6 +50,10 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<string>;
             default: string;
         };
+        accept: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         fileList: {
             type: import("vue").PropType<import("./types").UploadUserFile[]>;
             default: never[];
@@ -61,10 +65,6 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        accept: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         autoUpload: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -178,9 +178,9 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
         sizeWidth: number;
         sizeHeight: number;
         action: string;
+        accept: string;
         fileList: import("./types").UploadUserFile[];
         showFileList: boolean;
-        accept: string;
         autoUpload: boolean;
         listType: import("./types").ListType;
         httpRequest: import("./types").UploadRequestHandler;
@@ -246,6 +246,10 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<string>;
             default: string;
         };
+        accept: {
+            type: import("vue").PropType<string>;
+            default: string;
+        };
         fileList: {
             type: import("vue").PropType<import("./types").UploadUserFile[]>;
             default: never[];
@@ -257,10 +261,6 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
             type: import("vue").PropType<boolean>;
             default: boolean;
         };
-        accept: {
-            type: import("vue").PropType<string>;
-            default: string;
-        };
         autoUpload: {
             type: import("vue").PropType<boolean>;
             default: boolean;
@@ -374,9 +374,9 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
         sizeWidth: number;
         sizeHeight: number;
         action: string;
+        accept: string;
         fileList: import("./types").UploadUserFile[];
         showFileList: boolean;
-        accept: string;
         autoUpload: boolean;
         listType: import("./types").ListType;
         httpRequest: import("./types").UploadRequestHandler;
@@ -439,6 +439,10 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<string>;
         default: string;
     };
+    accept: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
     fileList: {
         type: import("vue").PropType<import("./types").UploadUserFile[]>;
         default: never[];
@@ -450,10 +454,6 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
         type: import("vue").PropType<boolean>;
         default: boolean;
     };
-    accept: {
-        type: import("vue").PropType<string>;
-        default: string;
-    };
     autoUpload: {
         type: import("vue").PropType<boolean>;
         default: boolean;
@@ -567,9 +567,9 @@ export declare const VftUpload: import("vft/es/utils").SFCWithInstall<{
     sizeWidth: number;
     sizeHeight: number;
     action: string;
+    accept: string;
     fileList: import("./types").UploadUserFile[];
     showFileList: boolean;
-    accept: string;
     autoUpload: boolean;
     listType: import("./types").ListType;
     httpRequest: import("./types").UploadRequestHandler;

package/es/components/upload/upload-content.vue.d.ts

@@ -50,9 +50,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     sizeWidth: number;
     sizeHeight: number;
     action: string;
+    accept: string;
     fileList: import("./types").UploadUserFile[];
     showFileList: boolean;
-    accept: string;
     autoUpload: boolean;
     listType: import("./types").ListType;
     httpRequest: import("./types").UploadRequestHandler;

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

@@ -104,9 +104,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     sizeWidth: number;
     sizeHeight: number;
     action: string;
+    accept: string;
     fileList: import("./types").UploadUserFile[];
     showFileList: boolean;
-    accept: string;
     autoUpload: boolean;
     listType: import("./types").ListType;
     httpRequest: import("./types").UploadRequestHandler;

package/es/hooks/use-z-index/index.js

@@ -2,14 +2,14 @@ import "@vueuse/core";
 import { isNumber as m, isClient as p } from "@vft/utils";
 import { debugWarn as l } from "../../utils/error.js";
 import "../../components/config-provider/hooks/use-global-config.js";
-import { getCurrentInstance as i, inject as e, computed as c, unref as v, ref as Z } from "vue";
+import { ref as v, getCurrentInstance as i, inject as e, computed as c, unref as Z } from "vue";
 import "lodash-es";
 import "../../components/form/index.js";
 const s = {
   current: 0
-}, u = Z(0), f = 2e3, d = Symbol("vftZIndexContextKey"), y = Symbol("zIndexContextKey"), K = (I) => {
+}, u = v(0), f = 2e3, d = Symbol("vftZIndexContextKey"), y = Symbol("zIndexContextKey"), K = (I) => {
   const n = i() ? e(d, s) : s, x = I || (i() ? e(y, void 0) : void 0), t = c(() => {
-    const r = v(x);
+    const r = Z(x);
     return m(r) ? r : f;
   }), o = c(() => t.value + u.value), a = () => (n.current++, u.value = n.current, o.value);
   return !p && !e(d) && l(

package/es/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "vft",
-  "version": "0.0.499",
+  "version": "0.0.501",
   "license": "MIT",
   "main": "lib/index.cjs",
   "module": "es/index.js",

package/es/package.json.js

@@ -1,4 +1,4 @@
-const o = "0.0.499";
+const o = "0.0.501";
 export {
   o as version
 };

package/es/utils/form-register.d.ts

@@ -13,6 +13,7 @@ export declare const FormCompEnum: {
     readonly Slider: "slider";
     readonly Divider: "divider";
     readonly Select: "select";
+    readonly Tree: "tree";
     readonly TreeSelect: "tree-select";
     readonly Search: "search";
     readonly Radio: "radio";

package/es/utils/form-register.js

@@ -1,4 +1,4 @@
-const r = {
+const o = {
   Custom: "custom",
   AutoComplete: "autocomplete",
   Cascader: "cascader",
@@ -12,6 +12,7 @@ const r = {
   Slider: "slider",
   Divider: "divider",
   Select: "select",
+  Tree: "tree",
   TreeSelect: "tree-select",
   Search: "search",
   Radio: "radio",
@@ -39,8 +40,8 @@ function i(e, n) {
   t.set(e, n);
 }
 function c(e) {
-  Object.entries(e).forEach(([n, o]) => {
-    t.set(n, o);
+  Object.entries(e).forEach(([n, r]) => {
+    t.set(n, r);
   });
 }
 function a(e) {
@@ -59,7 +60,7 @@ function p() {
   t.clear();
 }
 export {
-  r as FormCompEnum,
+  o as FormCompEnum,
   p as clearComponents,
   a as getComponent,
   m as getRegisteredComponents,

package/es/utils/vue/vnode.js

@@ -1,4 +1,4 @@
-import { hasOwn as m, camelize as N, isArray as E } from "@vft/utils";
+import { isArray as E, hasOwn as m, camelize as N } from "@vft/utils";
 import { isVNode as o, Fragment as S, Comment as A, Text as s, createCommentVNode as L, createBlock as _, openBlock as C } from "vue";
 import { debugWarn as O } from "../error.js";
 const R = "utils/vue/vnode";