@fewangsit/wangsvue 1.5.219-alpha.0 → 1.5.219-alpha.2

package/tree/index.es.js

@@ -1,17 +1,25 @@
-import { defineComponent as ee, useSlots as te, computed as W, onMounted as se, onBeforeUnmount as le, ref as i, shallowRef as oe, nextTick as $, watch as U, createBlock as ne, openBlock as ae, mergeProps as de, createSlots as ie, withCtx as re, renderSlot as ce } from "vue";
-import { e as S } from "../event-bus/index.es.js";
-import { u as ue } from "../plugins/WangsVue.es.js";
-import { m as pe } from "../utils/mergePropsWithDefaults.util.es.js";
-import { _ as fe } from "../basetree/index.es.js";
-const ye = (p, f = !1) => Object.fromEntries(
-  Object.entries(p).filter(([K, s]) => {
-    const C = s.checked && !s.partialChecked, O = f || K != "-1";
-    return C && O;
-  })
-), P = (p) => p ? p.flatMap((f) => [
-  { ...f },
-  ...P(f.children)
-]) : [], be = /* @__PURE__ */ ee({
+import { defineComponent, useSlots, computed, onMounted, onBeforeUnmount, ref, shallowRef, nextTick, watch, createBlock, openBlock, mergeProps, createSlots, withCtx, renderSlot } from "vue";
+import { e as eventBus } from "../event-bus/index.es.js";
+import { u as useWangsVueConfig } from "../plugins/WangsVue.es.js";
+import { m as mergePropsWithDefaults } from "../utils/mergePropsWithDefaults.util.es.js";
+import { _ as _sfc_main$1 } from "../basetree/index.es.js";
+const filterNodeKeys = (nodeKeys, includeNodeAllKey = false) => {
+  return Object.fromEntries(
+    Object.entries(nodeKeys).filter(([key, value]) => {
+      const isNodeChecked = value.checked && !value.partialChecked;
+      const shouldIncludeNode = includeNodeAllKey || key != "-1";
+      return isNodeChecked && shouldIncludeNode;
+    })
+  );
+};
+const flattenTreeNodeChildren = (nodes) => {
+  if (!nodes) return [];
+  return nodes.flatMap((node) => [
+    { ...node },
+    ...flattenTreeNodeChildren(node.children)
+  ]);
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Tree",
   props: {
     filter: {},
@@ -21,23 +29,23 @@ const ye = (p, f = !1) => Object.fromEntries(
     selectedKeys: { default: void 0 },
     selectedTreeNodes: {},
     selectionMode: { default: "checkbox" },
-    useOption: { type: Boolean, default: !1 },
+    useOption: { type: Boolean, default: false },
     listLabelsNoOption: {},
     treeNodeMenus: {},
-    autoSelectAll: { type: Boolean, default: !1 },
-    selectLastNode: { type: Boolean, default: !1 },
-    disableNodeAll: { type: Boolean, default: !1 },
-    includeNodeAllKey: { type: Boolean, default: !1 },
+    autoSelectAll: { type: Boolean, default: false },
+    selectLastNode: { type: Boolean, default: false },
+    disableNodeAll: { type: Boolean, default: false },
+    includeNodeAllKey: { type: Boolean, default: false },
     disableKeys: {},
     exactDisableKeys: {},
     readonly: { type: Boolean },
     selectDisposableOnly: { type: Boolean },
     flattenDisposableNode: { type: Boolean },
     excludedKeys: {},
-    shouldEmitEventOnChange: { type: Boolean, default: !1 },
+    shouldEmitEventOnChange: { type: Boolean, default: false },
     level: {},
     value: {},
-    propagateSelection: { type: Boolean, default: !0 },
+    propagateSelection: { type: Boolean, default: true },
     expandedKeys: {},
     selectionKeys: {},
     metaKeySelection: { type: Boolean },
@@ -62,210 +70,310 @@ const ye = (p, f = !1) => Object.fromEntries(
     nodeSelectedWhen: {}
   },
   emits: ["update:selectedKeys", "update:selectedTreeNodes", "nodeSelect", "nodeUnselect", "toggleMenu"],
-  setup(p, { expose: f, emit: K }) {
-    const s = p, C = te(), { defaultProps: O } = ue("Tree"), j = W(() => pe(s, O)), c = K;
-    se(() => {
-      S.on("tree:update-tree-nodes", x), E(s.filter), k();
-    }), le(() => {
-      S.off("tree:update-tree-nodes", x);
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const slots = useSlots();
+    const { defaultProps } = useWangsVueConfig("Tree");
+    const config = computed(() => mergePropsWithDefaults(props, defaultProps));
+    const emit = __emit;
+    onMounted(() => {
+      eventBus.on("tree:update-tree-nodes", handleUpdateTreeNodes);
+      updateTreeFilter(props.filter);
+      fetchTreeList();
+    });
+    onBeforeUnmount(() => {
+      eventBus.off("tree:update-tree-nodes", handleUpdateTreeNodes);
     });
-    const g = i(!0), G = i((/* @__PURE__ */ new Date()).getTime().toString()), F = i(), y = i([]), h = i([]), v = i({}), b = i(!1), d = i({ "-1": !0 }), w = i(!1), m = W({
-      get: () => s.selectedKeys ?? {},
-      set: (e) => {
-        c("update:selectedKeys", e);
+    const isLoading = ref(true);
+    const treeNodeID = ref((/* @__PURE__ */ new Date()).getTime().toString());
+    const tree = ref();
+    const treeNodes = ref([]);
+    const flatNodes = ref([]);
+    const parents = ref({});
+    const isExpandedAll = ref(false);
+    const expandedKeys = ref({ "-1": true });
+    const showDisposableGroups = ref(false);
+    const selectedKeysModel = computed({
+      get: () => props.selectedKeys ?? {},
+      set: (keys) => {
+        emit("update:selectedKeys", keys);
       }
-    }), r = oe({}), H = (e) => {
-      if (s.selectionMode === "checkbox") {
-        const t = (l, o) => {
-          l.forEach((n) => {
-            var N;
-            const u = JSON.stringify(n.key), a = !!(e != null && e.includes(Number(n.key)));
-            r.value[u] = { checked: a }, (N = n.children) != null && N.length && t(n.children, u), o && V(o);
+    });
+    const initialChecked = shallowRef({});
+    const setInitialChecked = (keys) => {
+      if (props.selectionMode === "checkbox") {
+        const traverse = (nodes, parentKey) => {
+          nodes.forEach((node) => {
+            var _a;
+            const key = JSON.stringify(node.key);
+            const checked = !!(keys == null ? void 0 : keys.includes(Number(node.key)));
+            initialChecked.value[key] = { checked };
+            if ((_a = node.children) == null ? void 0 : _a.length) traverse(node.children, key);
+            if (parentKey) setInitialParent(parentKey);
           });
         };
-        t(y.value);
+        traverse(treeNodes.value);
       } else {
-        const t = e == null ? void 0 : e[0];
-        t && (r.value = { [t]: !0 });
+        const key = keys == null ? void 0 : keys[0];
+        if (key) {
+          initialChecked.value = { [key]: true };
+        }
       }
-    }, R = (e) => Array.isArray(e) && e.every((t) => typeof t == "number"), V = (e) => {
-      const t = z(e), l = r.value[e].checked || t, o = !t && Q(e);
-      r.value[e] = {
+    };
+    const isNumberArray = (value) => {
+      return Array.isArray(value) && value.every((item) => typeof item === "number");
+    };
+    const setInitialParent = (parentKey) => {
+      const isAllChildChecked = isAllChildrenChecked(parentKey);
+      const checked = initialChecked.value[parentKey].checked || isAllChildChecked;
+      const partialChecked = !isAllChildChecked && isSomeChildrenChecked(parentKey);
+      initialChecked.value[parentKey] = {
         // It should be checked when not partial checked, when it partially checked, the checked value should be false
-        checked: !o && l,
-        partialChecked: o
+        checked: !partialChecked && checked,
+        partialChecked
       };
-    }, z = (e) => {
-      var t;
-      return (t = v.value[e]) == null ? void 0 : t.every((l) => {
-        var n;
-        const o = JSON.stringify(l);
-        return (n = r.value[o]) == null ? void 0 : n.checked;
+    };
+    const isAllChildrenChecked = (parentKey) => {
+      var _a;
+      return (_a = parents.value[parentKey]) == null ? void 0 : _a.every((child) => {
+        var _a2;
+        const childKey = JSON.stringify(child);
+        return (_a2 = initialChecked.value[childKey]) == null ? void 0 : _a2.checked;
+      });
+    };
+    const isSomeChildrenChecked = (parentKey) => {
+      var _a;
+      return (_a = parents.value[parentKey]) == null ? void 0 : _a.some((child) => {
+        var _a2, _b;
+        const childKey = JSON.stringify(child);
+        return ((_a2 = initialChecked.value[childKey]) == null ? void 0 : _a2.checked) || ((_b = initialChecked.value[childKey]) == null ? void 0 : _b.partialChecked);
       });
-    }, Q = (e) => {
-      var t;
-      return (t = v.value[e]) == null ? void 0 : t.some((l) => {
-        var n, u;
-        const o = JSON.stringify(l);
-        return ((n = r.value[o]) == null ? void 0 : n.checked) || ((u = r.value[o]) == null ? void 0 : u.partialChecked);
+    };
+    const responseMapping = (datas) => {
+      return datas.map((data) => {
+        var _a;
+        if ((_a = data.children) == null ? void 0 : _a.length) {
+          parents.value = {
+            ...parents.value,
+            [data.key.toString()]: data.children.map((child) => Number(child.key))
+          };
+          data.children = responseMapping(data.children);
+        }
+        if (props.disableNodeWhen) data.selectable = !props.disableNodeWhen(data);
+        return data;
       });
-    }, A = (e) => e.map((t) => {
-      var l;
-      return (l = t.children) != null && l.length && (v.value = {
-        ...v.value,
-        [t.key.toString()]: t.children.map((o) => Number(o.key))
-      }, t.children = A(t.children)), s.disableNodeWhen && (t.selectable = !s.disableNodeWhen(t)), t;
-    }), x = () => {
-      (async () => (c("update:selectedKeys", {}), await k(!1), M()))();
-    }, k = async (e = !0) => {
+    };
+    const handleUpdateTreeNodes = () => {
+      (async () => {
+        emit("update:selectedKeys", {});
+        await fetchTreeList(false);
+        updateSelectedTreeNodes();
+      })();
+    };
+    const fetchTreeList = async (initialFetch = true) => {
       try {
-        g.value = !0;
-        const { data: t } = await j.value.fetchTree(
-          s.type,
-          s.params
+        isLoading.value = true;
+        const { data } = await config.value.fetchTree(
+          props.type,
+          props.params
         ) ?? { data: [] };
-        if (t) {
-          const l = A(t);
-          h.value = P(t), y.value = l, sessionStorage.setItem(`${s.type}Tree`, JSON.stringify(l)), sessionStorage.setItem(
-            `flatten${s.type}nodes`,
-            JSON.stringify(h.value)
+        if (data) {
+          const mappedNode = responseMapping(data);
+          flatNodes.value = flattenTreeNodeChildren(data);
+          treeNodes.value = mappedNode;
+          sessionStorage.setItem(`${props.type}Tree`, JSON.stringify(mappedNode));
+          sessionStorage.setItem(
+            `flatten${props.type}nodes`,
+            JSON.stringify(flatNodes.value)
           );
         }
-        s.selectLastNode && s.selectionMode === "single" && await $(X), s.autoSelectAll && s.selectionMode === "checkbox" && await $(Z);
+        if (props.selectLastNode && props.selectionMode === "single")
+          await nextTick(selectLastSelectedNode);
+        if (props.autoSelectAll && props.selectionMode === "checkbox")
+          await nextTick(selectAllNode);
       } finally {
-        R(s.selectedKeys) && (H(s.selectedKeys), m.value = r.value), e || S.emit("tree:tree-updated"), g.value = !1;
+        if (isNumberArray(props.selectedKeys)) {
+          setInitialChecked(props.selectedKeys);
+          selectedKeysModel.value = initialChecked.value;
+        }
+        if (!initialFetch) eventBus.emit("tree:tree-updated");
+        isLoading.value = false;
       }
-    }, X = async () => {
-      var N, D;
-      const e = sessionStorage.getItem(
-        `${s.type.toLowerCase()}Node`
-      ), t = (N = y.value) == null ? void 0 : N[0], l = (D = t == null ? void 0 : t.children) == null ? void 0 : D[0], o = e ? JSON.parse(e) : null, n = (o == null ? void 0 : o.key) == -1, u = s.disableNodeAll ? l : t, a = n && s.disableNodeAll ? (
+    };
+    const selectLastSelectedNode = async () => {
+      var _a, _b;
+      const lastSelectedNode = sessionStorage.getItem(
+        `${props.type.toLowerCase()}Node`
+      );
+      const allNode = (_a = treeNodes.value) == null ? void 0 : _a[0];
+      const firstChildOfAll = (_b = allNode == null ? void 0 : allNode.children) == null ? void 0 : _b[0];
+      const parsedLastNode = lastSelectedNode ? JSON.parse(lastSelectedNode) : null;
+      const isAllNode = (parsedLastNode == null ? void 0 : parsedLastNode.key) == -1;
+      const fallbackNodeWhenLastNodeEmpty = props.disableNodeAll ? firstChildOfAll : allNode;
+      const lastNode = isAllNode && props.disableNodeAll ? (
         // When last node is All, and disableNodeExist, it should select the firstChild of all
-        l
-      ) : o ?? u;
-      if ((a == null ? void 0 : a.key) != null && Y(a == null ? void 0 : a.key)) {
-        m.value = { [a == null ? void 0 : a.key]: !0 };
-        const J = sessionStorage.getItem(
-          `${s.type.toLowerCase()}NodeExpandedKeys`
+        firstChildOfAll
+      ) : parsedLastNode ?? fallbackNodeWhenLastNodeEmpty;
+      if ((lastNode == null ? void 0 : lastNode.key) != null && lastNodeExistOnTree(lastNode == null ? void 0 : lastNode.key)) {
+        selectedKeysModel.value = { [lastNode == null ? void 0 : lastNode.key]: true };
+        const expandedKeysStored = sessionStorage.getItem(
+          `${props.type.toLowerCase()}NodeExpandedKeys`
         );
-        J && (d.value = JSON.parse(J)), B(a);
+        if (expandedKeysStored) expandedKeys.value = JSON.parse(expandedKeysStored);
+        setLastSelectedNode(lastNode);
       }
-    }, Y = (e) => h.value.some((t) => t.key === e), B = (e) => {
-      c("nodeSelect", e), s.shouldEmitEventOnChange && (sessionStorage.setItem(
-        `${s.type.toLowerCase()}Node`,
-        JSON.stringify(e)
-      ), sessionStorage.setItem(
-        `${s.type.toLowerCase()}NodeExpandedKeys`,
-        JSON.stringify(d.value)
-      ));
-    }, Z = () => {
-      const e = {};
-      h.value.forEach((t) => {
-        e[t.key] = {
-          checked: !0,
-          partialChecked: !1
+    };
+    const lastNodeExistOnTree = (key) => {
+      return flatNodes.value.some((node) => node.key === key);
+    };
+    const setLastSelectedNode = (node) => {
+      emit("nodeSelect", node);
+      if (!props.shouldEmitEventOnChange) return;
+      sessionStorage.setItem(
+        `${props.type.toLowerCase()}Node`,
+        JSON.stringify(node)
+      );
+      sessionStorage.setItem(
+        `${props.type.toLowerCase()}NodeExpandedKeys`,
+        JSON.stringify(expandedKeys.value)
+      );
+    };
+    const selectAllNode = () => {
+      const temmpSelection = {};
+      flatNodes.value.forEach((node) => {
+        temmpSelection[node.key] = {
+          checked: true,
+          partialChecked: false
         };
-      }), m.value = e;
-    }, T = () => {
-      b.value = !0;
-      for (const e of y.value)
-        L(e);
-      d.value = { ...d.value };
-    }, L = (e) => {
-      var t;
-      if ((t = e.children) != null && t.length) {
-        d.value[e.key ?? ""] = !0;
-        for (const l of e.children)
-          L(l);
+      });
+      selectedKeysModel.value = temmpSelection;
+    };
+    const expandAll = () => {
+      isExpandedAll.value = true;
+      for (const node of treeNodes.value) {
+        expandNode(node);
       }
-    }, q = () => {
-      d.value = { "-1": !0 }, b.value = !1;
-    }, M = () => {
-      if (s.selectedKeys) {
-        const e = Array.isArray(s.selectedKeys) ? s.selectedKeys : Object.keys(
-          ye(s.selectedKeys, s.includeNodeAllKey)
-        ).map(Number), t = h.value.filter(
-          (l) => e.includes(l.key)
+      expandedKeys.value = { ...expandedKeys.value };
+    };
+    const expandNode = (node) => {
+      var _a;
+      if ((_a = node.children) == null ? void 0 : _a.length) {
+        expandedKeys.value[node.key ?? ""] = true;
+        for (const child of node.children) {
+          expandNode(child);
+        }
+      }
+    };
+    const collapseAll = () => {
+      expandedKeys.value = { "-1": true };
+      isExpandedAll.value = false;
+    };
+    const updateSelectedTreeNodes = () => {
+      if (props.selectedKeys) {
+        const selectedKeys = Array.isArray(props.selectedKeys) ? props.selectedKeys : Object.keys(
+          filterNodeKeys(props.selectedKeys, props.includeNodeAllKey)
+        ).map(Number);
+        const selectedNodes = flatNodes.value.filter(
+          (node) => selectedKeys.includes(node.key)
         );
-        s.shouldEmitEventOnChange && (sessionStorage.setItem(
-          `${s.type.toLowerCase()}Keys`,
-          JSON.stringify(e)
-        ), S.emit("tree:selection-changed", {
-          keys: JSON.stringify(e)
-        })), c("update:selectedTreeNodes", t);
+        if (props.shouldEmitEventOnChange) {
+          sessionStorage.setItem(
+            `${props.type.toLowerCase()}Keys`,
+            JSON.stringify(selectedKeys)
+          );
+          eventBus.emit("tree:selection-changed", {
+            keys: JSON.stringify(selectedKeys)
+          });
+        }
+        emit("update:selectedTreeNodes", selectedNodes);
       }
-    }, E = (e) => {
-      e != null && e.length ? T() : I();
-    }, _ = (e) => {
-      s.readonly || B(e);
-    }, I = () => {
-      d.value = { "-1": !0 };
     };
-    return U(
-      () => s.filter,
-      (e) => {
-        E(e);
+    const updateTreeFilter = (query) => {
+      if (query == null ? void 0 : query.length) expandAll();
+      else expandNodeAll();
+    };
+    const onNodeSelected = (event) => {
+      if (!props.readonly) {
+        setLastSelectedNode(event);
       }
-    ), U(
-      () => [s.selectedKeys, s.type],
-      async (e, t) => {
-        e[1] !== t[1] && (c("update:selectedKeys", {}), await k()), M();
+    };
+    const expandNodeAll = () => {
+      expandedKeys.value = { "-1": true };
+    };
+    watch(
+      () => props.filter,
+      (query) => {
+        updateTreeFilter(query);
       }
-    ), f({
-      treeNodes: y,
-      flatNodes: h,
-      isLoading: g,
-      showDisposableGroups: w,
-      isExpandedAll: b,
-      collapseAll: q,
-      expandAll: T,
-      expandNodeAll: I,
-      fetchTreeList: k
-    }), (e, t) => (ae(), ne(fe, de({
-      id: G.value,
-      ref_key: "tree",
-      ref: F
-    }, e.$attrs, {
-      "expanded-keys": d.value,
-      "onUpdate:expandedKeys": t[0] || (t[0] = (l) => d.value = l),
-      "selection-keys": m.value,
-      "onUpdate:selectionKeys": t[1] || (t[1] = (l) => m.value = l),
-      class: { readonly: s.readonly },
-      "disable-keys": e.disableKeys,
-      "disable-node-all": s.disableNodeAll,
-      "disable-node-when": e.disableNodeWhen,
-      "exact-disable-keys": e.exactDisableKeys,
-      "exact-disable-node-when": e.exactDisableNodeWhen,
-      "filter-text": e.filter,
-      "list-labels-no-option": e.listLabelsNoOption,
-      loading: g.value,
-      "node-selected-when": e.nodeSelectedWhen,
-      "propagate-selection": e.propagateSelection,
-      "selection-mode": s.selectionMode,
-      "show-disposable-groups": w.value,
-      "tree-node-menus": e.treeNodeMenus,
-      "use-option": e.useOption,
-      value: y.value,
-      onNodeCollapse: t[2] || (t[2] = (l) => b.value = !1),
-      onNodeSelect: _,
-      onNodeUnselect: t[3] || (t[3] = (l) => c("nodeUnselect", l)),
-      onToggleMenu: t[4] || (t[4] = (l) => c("toggleMenu", l)),
-      "filter-by": "name"
-    }), ie({ _: 2 }, [
-      C.default ? {
-        name: "default",
-        fn: re(({ node: l, checked: o, disabled: n }) => [
-          ce(e.$slots, "default", {
-            checked: o,
-            disabled: n,
-            node: l
-          })
-        ]),
-        key: "0"
-      } : void 0
-    ]), 1040, ["id", "expanded-keys", "selection-keys", "class", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-keys", "exact-disable-node-when", "filter-text", "list-labels-no-option", "loading", "node-selected-when", "propagate-selection", "selection-mode", "show-disposable-groups", "tree-node-menus", "use-option", "value"]));
+    );
+    watch(
+      () => [props.selectedKeys, props.type],
+      async (newValue, oldValue) => {
+        if (newValue[1] !== oldValue[1]) {
+          emit("update:selectedKeys", {});
+          await fetchTreeList();
+        }
+        updateSelectedTreeNodes();
+      }
+    );
+    __expose({
+      treeNodes,
+      flatNodes,
+      isLoading,
+      showDisposableGroups,
+      isExpandedAll,
+      collapseAll,
+      expandAll,
+      expandNodeAll,
+      fetchTreeList
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, mergeProps({
+        id: treeNodeID.value,
+        ref_key: "tree",
+        ref: tree
+      }, _ctx.$attrs, {
+        "expanded-keys": expandedKeys.value,
+        "onUpdate:expandedKeys": _cache[0] || (_cache[0] = ($event) => expandedKeys.value = $event),
+        "selection-keys": selectedKeysModel.value,
+        "onUpdate:selectionKeys": _cache[1] || (_cache[1] = ($event) => selectedKeysModel.value = $event),
+        class: { readonly: props.readonly },
+        "disable-keys": _ctx.disableKeys,
+        "disable-node-all": props.disableNodeAll,
+        "disable-node-when": _ctx.disableNodeWhen,
+        "exact-disable-keys": _ctx.exactDisableKeys,
+        "exact-disable-node-when": _ctx.exactDisableNodeWhen,
+        "filter-text": _ctx.filter,
+        "list-labels-no-option": _ctx.listLabelsNoOption,
+        loading: isLoading.value,
+        "node-selected-when": _ctx.nodeSelectedWhen,
+        "propagate-selection": _ctx.propagateSelection,
+        "selection-mode": props.selectionMode,
+        "show-disposable-groups": showDisposableGroups.value,
+        "tree-node-menus": _ctx.treeNodeMenus,
+        "use-option": _ctx.useOption,
+        value: treeNodes.value,
+        onNodeCollapse: _cache[2] || (_cache[2] = ($event) => isExpandedAll.value = false),
+        onNodeSelect: onNodeSelected,
+        onNodeUnselect: _cache[3] || (_cache[3] = ($event) => emit("nodeUnselect", $event)),
+        onToggleMenu: _cache[4] || (_cache[4] = ($event) => emit("toggleMenu", $event)),
+        "filter-by": "name"
+      }), createSlots({ _: 2 }, [
+        slots.default ? {
+          name: "default",
+          fn: withCtx(({ node, checked, disabled }) => [
+            renderSlot(_ctx.$slots, "default", {
+              checked,
+              disabled,
+              node
+            })
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1040, ["id", "expanded-keys", "selection-keys", "class", "disable-keys", "disable-node-all", "disable-node-when", "exact-disable-keys", "exact-disable-node-when", "filter-text", "list-labels-no-option", "loading", "node-selected-when", "propagate-selection", "selection-mode", "show-disposable-groups", "tree-node-menus", "use-option", "value"]);
+    };
   }
 });
 export {
-  be as _
+  _sfc_main as _
 };