@zl-ui-kit/components 0.8.3 → 0.10.0

package/dist/components/ZlTree/index.vue.d.ts

@@ -1,9 +1,15 @@
+/** 节点键值类型（即 `node-key` 指向字段的值） */
+type ZlTreeKey = string | number;
+/** 节点原始数据 */
+type ZlTreeData = Record<string, any>;
 type __VLS_Props = {
-    /** 字段映射（arco fieldNames 兼容：title→label、children） */
+    /** 字段映射（arco fieldNames 兼容：title→label、children；disabled/isLeaf 填数据里的布尔字段名） */
     fieldNames?: {
         key?: string;
         title?: string;
         children?: string;
+        disabled?: string;
+        isLeaf?: string;
     };
     /** 搜索框透传（el-input 属性） */
     inputSearchProps?: Record<string, any>;
@@ -13,15 +19,33 @@ type __VLS_Props = {
     disableFilter?: boolean;
     /** 是否显示树区域加载状态 */
     loading?: boolean;
+    /** 显示复选框（多选），取值可用 `v-model:checked-keys` 或 `getCheckedKeys()` */
+    showCheckbox?: boolean;
+    /** 勾选时父子不关联（每个节点独立勾选） */
+    checkStrictly?: boolean;
+    /** 勾选父节点时联动勾选全部子孙（懒加载未展开的层级需要展开后才纳入） */
+    checkDescendants?: boolean;
 };
+type __VLS_PublicProps = {
+    'checkedKeys'?: ZlTreeKey[];
+    'halfCheckedKeys'?: ZlTreeKey[];
+} & __VLS_Props;
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: Partial<Record<string, (_: any) => any>> & {
         'search-extra'?(_: {}): any;
+        default?(_: {
+            node: any;
+            data: any;
+        }): any;
         title?(_: {
             node: any;
             data: any;
         }): any;
+        icon?(_: {
+            node: any;
+            data: any;
+        }): any;
     };
     refs: {
         treeRef: unknown;
@@ -29,12 +53,69 @@ declare function __VLS_template(): {
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_component: import('vue').DefineComponent<__VLS_PublicProps, {
+    elTree: any;
+    /** 勾选节点的 key 数组；`getCheckedKeys(true)` 只取叶子节点 */
+    getCheckedKeys: (leafOnly?: boolean) => ZlTreeKey[];
+    /** 勾选节点的数据数组；`leafOnly` 只要叶子，`includeHalfChecked` 连半选节点一起返回 */
+    getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) => ZlTreeData[];
+    /** 半选节点的 key 数组（父子联动下部分勾选的父节点） */
+    getHalfCheckedKeys: () => ZlTreeKey[];
+    /** 半选节点的数据数组 */
+    getHalfCheckedNodes: () => ZlTreeData[];
+    /** 按 key 数组设置勾选；`leafOnly` 表示这些 key 只对应叶子节点（父节点由联动推导） */
+    setCheckedKeys: (keys: ZlTreeKey[], leafOnly?: boolean) => void;
+    /** 设置单个节点勾选态：`data` 传 key 或节点数据，`deep=false` 表示不联动父子 */
+    setChecked: (data: ZlTreeKey | ZlTreeData, checked: boolean, deep?: boolean) => void;
+    /** 全选 / 取消全选（跳过 `props.disabled` 命中的节点；懒加载未展开层级需先 `expandAll()`） */
+    setAllChecked: (checked?: boolean) => void;
+    /** 清空所有勾选与半选 */
+    clearChecked: () => void;
+    /** 当前高亮（选中）节点的 key，无选中返回 `null` */
+    getCurrentKey: () => ZlTreeKey | null;
+    /** 当前高亮节点的数据，无选中返回 `null` */
+    getCurrentNode: () => ZlTreeData | null;
+    /** 设置高亮节点：传 `null` 取消高亮，`expandParent` 是否自动展开父级 */
+    setCurrentKey: (key?: ZlTreeKey | null, expandParent?: boolean) => void;
+    /** 按节点实例设置高亮 */
+    setCurrentNode: (node: any, expandParent?: boolean) => void;
+    /** 按值过滤节点（配合 `filterTreeNode`；传空串恢复全量显示） */
+    filter: (value: string) => void;
+    /** 展开全部已加载节点 */
+    expandAll: () => void;
+    /** 收起全部节点 */
+    collapseAll: () => void;
+    /** 取节点实例（可读 `node.checked` / `node.expanded` / `node.level` 等内部状态） */
+    getNode: (data: ZlTreeKey | ZlTreeData) => any;
+    /** 取从根到该节点的完整路径数据（面包屑、级联回显用） */
+    getNodePath: (data: ZlTreeKey | ZlTreeData) => ZlTreeData[];
+    /** 按 key 替换子节点数据（懒加载接口回来后刷新某一支） */
+    updateKeyChildren: (key: ZlTreeKey, data: ZlTreeData[]) => void;
+    /** 在父节点下追加子节点：`parentData` 传 key / 数据 / 节点实例，缺省追加到根 */
+    append: (data: ZlTreeData, parentData?: ZlTreeKey | ZlTreeData | any) => void;
+    /** 在参考节点之前插入兄弟节点 */
+    insertBefore: (data: ZlTreeData, refData: ZlTreeKey | ZlTreeData | any) => void;
+    /** 在参考节点之后插入兄弟节点 */
+    insertAfter: (data: ZlTreeData, refData: ZlTreeKey | ZlTreeData | any) => void;
+    /** 删除节点（传 key 或节点数据） */
+    remove: (data: ZlTreeKey | ZlTreeData | any) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:checkedKeys": (value: ZlTreeKey[]) => any;
+    "update:halfCheckedKeys": (value: ZlTreeKey[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:checkedKeys"?: ((value: ZlTreeKey[]) => any) | undefined;
+    "onUpdate:halfCheckedKeys"?: ((value: ZlTreeKey[]) => any) | undefined;
+}>, {
     fieldNames: {
         key?: string;
         title?: string;
         children?: string;
+        disabled?: string;
+        isLeaf?: string;
     };
+    showCheckbox: boolean;
+    checkStrictly: boolean;
+    checkDescendants: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     treeRef: unknown;
 }, any>;

package/dist/components/ZlTree/index.vue.mjs

@@ -1,109 +1,256 @@
-import { defineComponent as F, useAttrs as R, useSlots as $, ref as h, computed as r, watch as L, resolveComponent as v, resolveDirective as j, withDirectives as y, openBlock as u, createElementBlock as _, createVNode as n, mergeProps as k, withCtx as a, renderSlot as f, createCommentVNode as N, createElementVNode as g, unref as I, createSlots as K, normalizeProps as S, guardReactiveProps as z, createTextVNode as M, toDisplayString as O, renderList as U, vShow as q, createBlock as G } from "vue";
-import H from "../ZlAutoTooltip/index.vue.mjs";
-import J from "../ZlEmpty/index.vue.mjs";
-import V from "../ZlIcon/index.vue.mjs";
-const Q = { class: "zl-tree" }, W = {
+import { defineComponent as J, useModel as x, useAttrs as Q, useSlots as X, ref as w, computed as c, watch as K, nextTick as v, onMounted as Y, resolveComponent as z, resolveDirective as ee, withDirectives as B, openBlock as N, createElementBlock as M, createVNode as i, mergeProps as P, withCtx as p, renderSlot as u, createCommentVNode as T, createElementVNode as V, createSlots as te, normalizeProps as A, guardReactiveProps as b, createTextVNode as le, toDisplayString as oe, renderList as se, vShow as re, createBlock as ne, mergeModels as ce } from "vue";
+import ae from "../ZlAutoTooltip/index.vue.mjs";
+import de from "../ZlEmpty/index.vue.mjs";
+import _ from "../ZlIcon/index.vue.mjs";
+const ie = { class: "zl-tree" }, ue = {
   key: 0,
   class: "zl-tree-search"
-}, X = { class: "zl-tree-body" }, Y = { class: "zl-tree-node" }, re = /* @__PURE__ */ F({
+}, fe = { class: "zl-tree-body" }, he = { class: "zl-tree-node" }, Ce = /* @__PURE__ */ J({
   name: "ZlTree",
   inheritAttrs: !1,
   __name: "index",
-  props: {
+  props: /* @__PURE__ */ ce({
     fieldNames: { default: () => ({ key: "key", title: "title", children: "children" }) },
     inputSearchProps: {},
     filterTreeNode: {},
     disableFilter: { type: Boolean },
-    loading: { type: Boolean }
-  },
-  setup(s, { expose: b }) {
-    const o = s, m = R(), x = $(), i = h(null), c = h(""), P = r(() => ({
-      label: o.fieldNames.title,
-      children: o.fieldNames.children
-    }));
-    L(c, (e) => {
-      i.value?.filter(e);
+    loading: { type: Boolean },
+    showCheckbox: { type: Boolean, default: !1 },
+    checkStrictly: { type: Boolean, default: !1 },
+    checkDescendants: { type: Boolean, default: !1 }
+  }, {
+    checkedKeys: {},
+    checkedKeysModifiers: {},
+    halfCheckedKeys: {},
+    halfCheckedKeysModifiers: {}
+  }),
+  emits: ["update:checkedKeys", "update:halfCheckedKeys"],
+  setup(n, { expose: $ }) {
+    const f = n, C = x(n, "checkedKeys"), E = x(n, "halfCheckedKeys"), s = Q(), L = X(), l = w(null), h = w(""), D = ["default", "title", "icon"], H = c(() => Object.keys(L).filter((e) => !D.includes(e))), Z = c(() => {
+      const e = f.fieldNames, t = {
+        label: e.title ?? "title",
+        children: e.children ?? "children"
+      };
+      e.disabled && (t.disabled = e.disabled), e.isLeaf && (t.isLeaf = e.isLeaf);
+      const o = s.props ?? {};
+      return { ...t, ...o };
+    }), F = c(
+      () => s["node-key"] ?? s.nodeKey ?? f.fieldNames.key ?? "key"
+    ), R = [
+      "props",
+      "node-key",
+      "nodeKey",
+      "filter-node-method",
+      "filterNodeMethod",
+      "onCheck",
+      "on-check"
+    ], j = c(() => {
+      const e = {};
+      for (const [t, o] of Object.entries(s))
+        R.includes(t) || (e[t] = o);
+      return e;
+    }), S = c(() => !(s.data ?? []).length);
+    K(h, (e) => {
+      l.value?.filter(e);
     });
-    function w(e, t) {
-      return e ? String(t[o.fieldNames.title] ?? "").includes(e) : !0;
+    function I(e, t) {
+      return e ? String(t[f.fieldNames.title ?? "title"] ?? "").includes(e) : !0;
     }
-    const B = r(() => o.filterTreeNode ?? w), T = r(() => o.fieldNames.key ?? "key"), p = r(() => !(m.data ?? []).length), C = ["icon", "title"], E = r(() => Object.keys(x).filter((e) => !C.includes(e)));
-    return b(
-      new Proxy(
-        {},
-        {
-          get(e, t) {
-            return i.value?.[t];
-          },
-          has(e, t) {
-            return t in (i.value ?? {});
-          }
-        }
-      )
-    ), (e, t) => {
-      const Z = v("el-input"), A = v("el-tree"), D = j("loading");
-      return y((u(), _("div", Q, [
-        s.disableFilter ? N("", !0) : (u(), _("div", W, [
-          n(Z, k({
-            modelValue: c.value,
-            "onUpdate:modelValue": t[0] || (t[0] = (l) => c.value = l),
+    const O = c(() => {
+      const e = s["filter-node-method"] ?? s.filterNodeMethod;
+      return typeof e == "function" ? e : f.filterTreeNode ?? I;
+    });
+    let m = !1;
+    function W(e) {
+      m = !0, e(), v(() => m = !1);
+    }
+    function y() {
+      const e = C.value;
+      !Array.isArray(e) || !l.value || l.value.setCheckedKeys(e);
+    }
+    function a() {
+      W(() => {
+        C.value = l.value?.getCheckedKeys?.() ?? [], E.value = l.value?.getHalfCheckedKeys?.() ?? [];
+      });
+    }
+    function U(e, t) {
+      a(), q("onCheck", [e, t]);
+    }
+    function q(e, t) {
+      const o = s[e] ?? s[e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()], g = Array.isArray(o) ? o : [o];
+      for (const k of g)
+        typeof k == "function" && k(...t);
+    }
+    K(
+      () => C.value,
+      () => {
+        m || v(y);
+      },
+      { deep: !0 }
+    ), K(
+      () => s.data,
+      () => {
+        v(y);
+      }
+    ), Y(() => {
+      y();
+    });
+    function G(e = !0) {
+      return (l.value?.store?._getAllNodes?.() ?? []).filter((o) => !e || !o.disabled).map((o) => o.key).filter((o) => o != null);
+    }
+    return $({
+      /** 内部 `el-tree` 实例：下面未列出的原生能力（`store` 等）从这里取 */
+      get elTree() {
+        return l.value;
+      },
+      /** 勾选节点的 key 数组；`getCheckedKeys(true)` 只取叶子节点 */
+      getCheckedKeys: (e) => l.value?.getCheckedKeys(e) ?? [],
+      /** 勾选节点的数据数组；`leafOnly` 只要叶子，`includeHalfChecked` 连半选节点一起返回 */
+      getCheckedNodes: (e, t) => l.value?.getCheckedNodes(e, t) ?? [],
+      /** 半选节点的 key 数组（父子联动下部分勾选的父节点） */
+      getHalfCheckedKeys: () => l.value?.getHalfCheckedKeys() ?? [],
+      /** 半选节点的数据数组 */
+      getHalfCheckedNodes: () => l.value?.getHalfCheckedNodes() ?? [],
+      /** 按 key 数组设置勾选；`leafOnly` 表示这些 key 只对应叶子节点（父节点由联动推导） */
+      setCheckedKeys: (e, t) => {
+        l.value?.setCheckedKeys(e, t), a();
+      },
+      /** 设置单个节点勾选态：`data` 传 key 或节点数据，`deep=false` 表示不联动父子 */
+      setChecked: (e, t, o = !0) => {
+        l.value?.setChecked(e, t, o), a();
+      },
+      /** 全选 / 取消全选（跳过 `props.disabled` 命中的节点；懒加载未展开层级需先 `expandAll()`） */
+      setAllChecked: (e = !0) => {
+        const t = e ? G() : [];
+        l.value?.setCheckedKeys(t), a();
+      },
+      /** 清空所有勾选与半选 */
+      clearChecked: () => {
+        l.value?.setCheckedKeys([]), a();
+      },
+      /** 当前高亮（选中）节点的 key，无选中返回 `null` */
+      getCurrentKey: () => l.value?.getCurrentKey() ?? null,
+      /** 当前高亮节点的数据，无选中返回 `null` */
+      getCurrentNode: () => l.value?.getCurrentNode() ?? null,
+      /** 设置高亮节点：传 `null` 取消高亮，`expandParent` 是否自动展开父级 */
+      setCurrentKey: (e, t = !0) => {
+        l.value?.setCurrentKey(e, t);
+      },
+      /** 按节点实例设置高亮 */
+      setCurrentNode: (e, t = !0) => {
+        l.value?.setCurrentNode(e, t);
+      },
+      /** 按值过滤节点（配合 `filterTreeNode`；传空串恢复全量显示） */
+      filter: (e) => {
+        h.value = e, l.value?.filter(e);
+      },
+      /** 展开全部已加载节点 */
+      expandAll: () => {
+        (l.value?.store?._getAllNodes?.() ?? []).forEach((t) => t.expand());
+      },
+      /** 收起全部节点 */
+      collapseAll: () => {
+        (l.value?.store?._getAllNodes?.() ?? []).forEach((t) => t.collapse());
+      },
+      /** 取节点实例（可读 `node.checked` / `node.expanded` / `node.level` 等内部状态） */
+      getNode: (e) => l.value?.getNode(e),
+      /** 取从根到该节点的完整路径数据（面包屑、级联回显用） */
+      getNodePath: (e) => l.value?.getNodePath(e) ?? [],
+      /** 按 key 替换子节点数据（懒加载接口回来后刷新某一支） */
+      updateKeyChildren: (e, t) => {
+        l.value?.updateKeyChildren(e, t), v(y);
+      },
+      /** 在父节点下追加子节点：`parentData` 传 key / 数据 / 节点实例，缺省追加到根 */
+      append: (e, t) => {
+        l.value?.append(e, t);
+      },
+      /** 在参考节点之前插入兄弟节点 */
+      insertBefore: (e, t) => {
+        l.value?.insertBefore(e, t);
+      },
+      /** 在参考节点之后插入兄弟节点 */
+      insertAfter: (e, t) => {
+        l.value?.insertAfter(e, t);
+      },
+      /** 删除节点（传 key 或节点数据） */
+      remove: (e) => {
+        l.value?.remove(e);
+      }
+    }), (e, t) => {
+      const o = z("el-input"), g = z("el-tree"), k = ee("loading");
+      return B((N(), M("div", ie, [
+        n.disableFilter ? T("", !0) : (N(), M("div", ue, [
+          i(o, P({
+            modelValue: h.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (r) => h.value = r),
             clearable: ""
-          }, s.inputSearchProps, { "suffix-icon": null }), {
-            suffix: a(() => [
-              n(V, {
+          }, n.inputSearchProps, { "suffix-icon": null }), {
+            suffix: p(() => [
+              i(_, {
                 icon: "zl:search",
                 style: { cursor: "pointer" }
               })
             ]),
             _: 1
           }, 16, ["modelValue"]),
-          f(e.$slots, "search-extra")
+          u(e.$slots, "search-extra")
         ])),
-        g("div", X, [
-          y(n(A, k({
+        V("div", fe, [
+          B(i(g, P({
             ref_key: "treeRef",
-            ref: i
-          }, I(m), {
-            props: P.value,
-            "node-key": T.value,
-            "filter-node-method": B.value
-          }), K({
-            default: a(({ node: l, data: d }) => [
-              f(e.$slots, "title", S(z({ node: l, data: d })), () => [
-                g("span", Y, [
-                  n(V, {
-                    icon: l.isLeaf ? "zl:document-color" : "zl:folder-color",
-                    class: "zl-tree-node__icon"
-                  }, null, 8, ["icon"]),
-                  n(H, null, {
-                    default: a(() => [
-                      M(O(l.label), 1)
+            ref: l
+          }, j.value, {
+            props: Z.value,
+            "node-key": F.value,
+            "filter-node-method": O.value,
+            "show-checkbox": n.showCheckbox,
+            "check-strictly": n.checkStrictly,
+            "check-descendants": n.checkDescendants,
+            onCheck: U
+          }), te({
+            default: p(({ node: r, data: d }) => [
+              u(e.$slots, "default", {
+                node: r,
+                data: d
+              }, () => [
+                u(e.$slots, "title", A(b({ node: r, data: d })), () => [
+                  V("span", he, [
+                    u(e.$slots, "icon", A(b({ node: r, data: d })), () => [
+                      i(_, {
+                        icon: r.isLeaf ? "zl:document-color" : "zl:folder-color",
+                        class: "zl-tree-node__icon"
+                      }, null, 8, ["icon"])
                     ]),
-                    _: 2
-                  }, 1024)
+                    i(ae, null, {
+                      default: p(() => [
+                        le(oe(r.label), 1)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ])
                 ])
               ])
             ]),
             _: 2
           }, [
-            U(E.value, (l) => ({
-              name: l,
-              fn: a((d) => [
-                f(e.$slots, l, S(z(d)))
+            se(H.value, (r) => ({
+              name: r,
+              fn: p((d) => [
+                u(e.$slots, r, A(b(d)))
               ])
             }))
-          ]), 1040, ["props", "node-key", "filter-node-method"]), [
-            [q, !p.value]
+          ]), 1040, ["props", "node-key", "filter-node-method", "show-checkbox", "check-strictly", "check-descendants"]), [
+            [re, !S.value]
           ]),
-          p.value ? (u(), G(J, { key: 0 })) : N("", !0)
+          S.value ? (N(), ne(de, { key: 0 })) : T("", !0)
         ])
       ])), [
-        [D, s.loading]
+        [k, n.loading]
       ]);
     };
   }
 });
 export {
-  re as default
+  Ce as default
 };
 //# sourceMappingURL=index.vue.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.8.3",
+  "version": "0.10.0",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.8.3",
-    "@zl-ui-kit/utils": "0.8.3",
-    "@zl-ui-kit/icons": "0.8.3"
+    "@zl-ui-kit/composables": "0.10.0",
+    "@zl-ui-kit/icons": "0.10.0",
+    "@zl-ui-kit/utils": "0.10.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0",
@@ -98,10 +98,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
-    "@jichuang/vite-config": "1.0.0",
     "@jichuang/eslint-config": "1.0.0",
+    "@jichuang/vite-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
-    "@zl-ui-kit/theme": "0.8.3"
+    "@zl-ui-kit/theme": "0.10.0"
   },
   "repository": {
     "type": "git",