vft 0.0.500 → 0.0.501

package/es/components/table/field.js

@@ -1,19 +1,19 @@
 import { createVNode as r, Fragment as _, isVNode as g } from "vue";
-import { useLoadingDelay as h } from "@vft/use";
+import { useLoadingDelay as L } from "@vft/use";
 import { formatToDateTime as d } from "@vft/utils/date";
-import { isNullOrUndefined as L } from "@vft/utils";
+import { isNullOrUndefined as M } from "@vft/utils";
 import { VftButton as u } from "../button/index.js";
-import { VftPopconfirm as M } from "../popconfirm/index.js";
+import { VftPopconfirm as h } from "../popconfirm/index.js";
 import { VftTag as c } from "../tag/index.js";
 function m(t) {
   return typeof t == "function" || Object.prototype.toString.call(t) === "[object Object]" && !g(t);
 }
-const N = {
+const V = {
   type: "seq",
   title: "序号",
   fixed: "left",
   width: 53
-}, V = {
+}, W = {
   type: "checkbox",
   title: "",
   minWidth: 60,
@@ -29,46 +29,46 @@ const N = {
 }, O = ({
   format: t = "YYYY-MM-DD",
   field: e = "date",
-  title: i = "时间"
+  title: o = "时间"
 } = {}) => ({
   minWidth: 100,
   field: e,
-  title: i,
+  title: o,
   formatter: ({
-    row: o
-  }) => o[e] ? d(o[e], t) : "-"
+    row: i
+  }) => i[e] ? d(i[e], t) : "-"
 }), D = ({
   format: t = "YYYY-MM-DD HH:mm:ss",
   field: e = "date",
-  title: i = "时间"
+  title: o = "时间"
 } = {}) => ({
   minWidth: 190,
   field: e,
-  title: i,
+  title: o,
   formatter: ({
-    row: o
-  }) => o[e] ? d(o[e], t) : "-"
+    row: i
+  }) => i[e] ? d(i[e], t) : "-"
 }), P = ({
   format: t = "YYYY-MM-DD HH:mm:ss",
   field: e = "createTime",
-  title: i = "创建时间"
+  title: o = "创建时间"
 } = {}) => D({
   format: t,
   field: e,
-  title: i
+  title: o
 }), b = ({
   format: t = "YYYY-MM-DD HH:mm:ss",
   field: e = "updateTime",
-  title: i = "更新时间"
+  title: o = "更新时间"
 } = {}) => D({
   format: t,
   field: e,
-  title: i
+  title: o
 }), j = ({
   field: t = "status",
   title: e = "状态",
-  normalText: i = "正常",
-  disabledText: o = "禁用",
+  normalText: o = "正常",
+  disabledText: i = "禁用",
   strToNumber: l = !0
 } = {}) => ({
   field: t,
@@ -79,26 +79,25 @@ const N = {
       row: a
     }) => {
       let n = a?.[t];
-      return L(n) ? "-" : (l && Number(n) === 0 && (n = !1), n ? r(c, null, m(i) ? i : {
-        default: () => [i]
+      return M(n) ? "-" : (l && Number(n) === 0 && (n = !1), n ? r(c, null, m(o) ? o : {
+        default: () => [o]
       }) : r(c, {
         type: "danger"
-      }, m(o) ? o : {
-        default: () => [o]
+      }, m(i) ? i : {
+        default: () => [i]
       }));
     }
   }
 }), U = ({
   confirmText: t = "确认删除?",
   leftCallback: e,
-  rightCallback: i,
-  leftText: o = "编辑",
+  rightCallback: o,
+  leftText: i = "编辑",
   rightText: l = "删除",
   showLeft: a = !0,
   showRight: n = !0
 } = {}) => ({
   title: "操作栏",
-  minWidth: 180,
   field: "custom-action",
   fixed: "right",
   slots: {
@@ -109,8 +108,8 @@ const N = {
         loading: p,
         start: E,
         cancel: I
-      } = h(), Y = () => {
-        E(), i?.(f)?.finally(() => {
+      } = L(), Y = () => {
+        E(), o?.(f)?.finally(() => {
           I();
         });
       };
@@ -120,9 +119,9 @@ const N = {
         onClick: (s) => {
           s.stopPropagation(), e?.(f);
         }
-      }, m(o) ? o : {
-        default: () => [o]
-      }) : null, n ? r(M, {
+      }, m(i) ? i : {
+        default: () => [i]
+      }) : null, n ? r(h, {
         width: "150",
         onConfirm: Y,
         title: t
@@ -143,13 +142,13 @@ const N = {
 });
 export {
   U as ACTION_FIELD,
-  V as CHECKED_FIELD,
+  W as CHECKED_FIELD,
   P as CREATE_TIME_FIELD,
   O as DATE_FIELD,
   D as DATE_TIME_FIELD,
   S as ID_FIELD,
   k as NAME_FIELD,
-  N as SEQ_FIELD,
+  V as SEQ_FIELD,
   j as STATUS_FIELD,
   b as UPDATE_TIME_FIELD
 };

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/package.json.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
   "name": "vft",
-  "version": "0.0.500",
+  "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.500";
+const o = "0.0.501";
 export {
   o as version
 };

package/lib/components/autocomplete/autocomplete.vue.d.ts

@@ -62,9 +62,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;
@@ -480,9 +480,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
             readonly placement?: import("@popperjs/core").Placement | undefined;
             readonly strategy?: "fixed" | "absolute" | undefined;
             readonly effect?: "light" | "dark" | undefined;
+            readonly visible?: boolean | null | undefined;
             readonly teleported?: boolean | undefined;
             readonly open?: boolean | undefined;
-            readonly visible?: boolean | null | undefined;
             readonly trigger?: import("vft/es/components/tooltip").TooltipTriggerType | undefined;
             readonly arrowOffset?: number | undefined;
             readonly gpuAcceleration?: boolean | undefined;