@will-ui/vue 1.0.0

package/dist/components/tree/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","names":["defineComponent","computed","inject","createVNode","_createVNode","Icon","Checkbox","TreeList","SlideDown","TreeItemProps","item","type","Object","required","keyField","String","default","textField","childField","hasCheckbox","Boolean","level","Number","name","props","setup","treeState","treeProps","treeSlots","treeActions","nodeKey","nodeText","text","children","childData","Array","isArray","hasChildren","value","length","isSpread","isCheckable","checkable","handleToggleSpread","toggleSpread","RenderIcon","DefaultIcon","SpreadIcon","FoldIcon","LeafIcon","icon","RenderNodeLabel","label","handleNodeClick","handleNodeSelect","onlyChooseLeaf","handleNodeUnselect","modelValue","paddingLeft","e","stopPropagation","checkedKeys","s","isChecked","has","includes","onCheckOne","key","checked"],"sources":["../../../components/tree/TreeItem.tsx"],"sourcesContent":["/**\r\n * 树节点组件\r\n * 渲染单个树节点，包含：展开箭头、复选框、节点文本\r\n * 并在子节点展开时递归渲染 TreeList\r\n */\r\nimport { defineComponent, computed, inject } from \"vue\"\r\nimport type { PropType } from \"vue\"\r\nimport Icon from \"../icon\"\r\nimport Checkbox from \"../checkbox\"\r\nimport TreeList from \"./TreeList\"\r\nimport SlideDown from \"../slideDown\"\r\nimport type { TreeDataType } from \"./Tree\"\r\n\r\nexport const TreeItemProps = {\r\n  // 节点数据\r\n  item: {\r\n    type: Object as PropType<TreeDataType>,\r\n    required: true,\r\n  },\r\n  // 字段配置\r\n  keyField: {\r\n    type: String,\r\n    default: \"Id\",\r\n  },\r\n  textField: {\r\n    type: String,\r\n    default: \"Name\",\r\n  },\r\n  childField: {\r\n    type: String,\r\n    default: \"Childs\",\r\n  },\r\n  // 是否有复选框\r\n  hasCheckbox: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  // 缩进级别\r\n  level: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n}\r\n\r\nexport default defineComponent({\r\n  name: \"TreeItem\",\r\n  props: TreeItemProps,\r\n  setup(props) {\r\n    const treeState = inject(\"treeState\", {} as Record<string, any>)\r\n    const treeProps = inject(\"treeProps\", {} as Record<string, any>)\r\n    const treeSlots = inject(\"treeSlots\", {} as Record<string, any>)\r\n    const treeActions = inject(\"treeActions\", {} as Record<string, any>)\r\n\r\n    // 节点的唯一标识\r\n    const nodeKey = computed(() => props.item[props.keyField])\r\n\r\n    // 节点显示文本\r\n    const nodeText = computed(() => {\r\n      const text = props.item[props.textField]\r\n      return text\r\n    })\r\n\r\n    // 获取子节点\r\n    const children = computed(() => {\r\n      const childData = props.item[props.childField]\r\n      return Array.isArray(childData) ? childData : []\r\n    })\r\n\r\n    // 是否有子节点\r\n    const hasChildren = computed(() => children.value.length > 0)\r\n\r\n    // 是否展开\r\n    const isSpread = computed(() => treeState.isSpread(nodeKey.value))\r\n\r\n    // 节点是否可选择\r\n    const isCheckable = computed(() => {\r\n      if (!treeProps.checkable) return true\r\n      return treeProps.checkable(props.item)\r\n    })\r\n\r\n    // 切换展开/折叠\r\n    function handleToggleSpread() {\r\n      if (hasChildren.value) {\r\n        treeState.toggleSpread(nodeKey.value)\r\n      }\r\n    }\r\n\r\n    // 渲染图标逻辑\r\n    function RenderIcon() {\r\n      let DefaultIcon = (\r\n        <Icon\r\n          name=\"w-icon-sort-down\"\r\n          rotate={!isSpread.value}\r\n          deg={-90}\r\n          direction=\"z\"\r\n        />\r\n      )\r\n      let SpreadIcon\r\n      let FoldIcon\r\n      let LeafIcon\r\n      if (treeSlots) {\r\n        if (treeSlots.icon) {\r\n          DefaultIcon = treeSlots.icon({ isSpread: isSpread.value })\r\n        } else {\r\n          if (treeSlots[\"icon-spread\"]) {\r\n            SpreadIcon = treeSlots[\"icon-spread\"]()\r\n          }\r\n          if (treeSlots[\"icon-fold\"]) {\r\n            FoldIcon = treeSlots[\"icon-fold\"]()\r\n          }\r\n        }\r\n        if (treeSlots[\"icon-leaf\"]) {\r\n          LeafIcon = treeSlots[\"icon-leaf\"]()\r\n        }\r\n      }\r\n      if (hasChildren.value) {\r\n        if (SpreadIcon && FoldIcon) {\r\n          return isSpread.value ? SpreadIcon : FoldIcon\r\n        }\r\n        return DefaultIcon\r\n      } else {\r\n        if (LeafIcon) return LeafIcon\r\n        else {\r\n          if (SpreadIcon) {\r\n            return (\r\n              <div style=\"visibility: hidden;pointer-events: none;\">\r\n                {SpreadIcon}\r\n              </div>\r\n            )\r\n          } else {\r\n            return (\r\n              <div style=\"visibility: hidden;pointer-events: none;\">\r\n                {DefaultIcon}\r\n              </div>\r\n            )\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    // 渲染节点\r\n    function RenderNodeLabel() {\r\n      if (treeSlots && treeSlots.label)\r\n        return treeSlots.label({ item: props.item })\r\n      return <span class=\"w-tree-item-label\">{nodeText.value}</span>\r\n    }\r\n\r\n    // 处理节点点击（单选模式）\r\n    function handleNodeClick() {\r\n      // 只有在没有复选框时才触发节点选择\r\n      if (!props.hasCheckbox && treeActions.handleNodeSelect) {\r\n        // 如果启用了 onlyChooseLeaf，则检查是否为叶子节点，不是叶子节点则不触发选择\r\n        if (treeProps.onlyChooseLeaf && hasChildren.value) {\r\n          treeActions.handleNodeUnselect(nodeKey.value, props.item)\r\n          return\r\n        }\r\n        // 如果有 checkable 函数，检查节点是否可选择\r\n        if (!isCheckable.value) {\r\n          treeActions.handleNodeUnselect(nodeKey.value, props.item)\r\n          return\r\n        }\r\n        if (treeProps.modelValue !== nodeKey.value) {\r\n          treeActions.handleNodeSelect(nodeKey.value, props.item)\r\n        }\r\n      }\r\n    }\r\n\r\n    return () => (\r\n      <div class={[\"w-tree-node-wrapper\"]}>\r\n        {/* 第一个节点：渲染当前行 */}\r\n        <div\r\n          class={[\r\n            \"w-tree-item\",\r\n            treeProps.modelValue === nodeKey.value ? \"w-tree-item-active\" : \"\",\r\n            // 单选模式下，如果节点不可选，添加 disabled 类名\r\n            !props.hasCheckbox && !isCheckable.value\r\n              ? \"w-tree-item-disabled\"\r\n              : \"\",\r\n          ]}\r\n          style={{\r\n            paddingLeft: `calc(${props.level} * var(--w-tree-indent))`,\r\n          }}\r\n          data-key={nodeKey.value}>\r\n          {/* 展开/折叠箭头 */}\r\n          <div\r\n            class={`w-tree-item-arrow ${!hasChildren.value ? \"no-children\" : \"\"}`}\r\n            onClick={handleToggleSpread}>\r\n            {RenderIcon()}\r\n          </div>\r\n\r\n          {/* 复选框 */}\r\n          {props.hasCheckbox && (\r\n            <div\r\n              class=\"w-tree-item-checkbox\"\r\n              onClick={(e: MouseEvent) => e.stopPropagation()}>\r\n              {/**  */}\r\n              <Checkbox\r\n                value={nodeKey.value}\r\n                modelValue={treeState.checkedKeys.value}\r\n                disabled={!isCheckable.value}\r\n                onUpdate:model-value={(s) => {\r\n                  treeState.checkedKeys.value = s\r\n                  // 获取当前节点的新选中状态\r\n                  const isChecked = s.has\r\n                    ? s.has(nodeKey.value)\r\n                    : s.includes(nodeKey.value)\r\n                  treeState.onCheckOne({\r\n                    key: nodeKey.value,\r\n                    item: props.item,\r\n                    checked: isChecked,\r\n                  })\r\n                }}\r\n              />\r\n            </div>\r\n          )}\r\n\r\n          {/* 节点文本 */}\r\n          <div class=\"w-tree-item-label-wrapper\" onClick={handleNodeClick}>\r\n            <RenderNodeLabel />\r\n          </div>\r\n        </div>\r\n\r\n        {/* 第二个节点：占位并递归渲染子节点 */}\r\n        <SlideDown>\r\n          {hasChildren.value && isSpread.value && (\r\n            <TreeList\r\n              data={children.value}\r\n              keyField={props.keyField}\r\n              textField={props.textField}\r\n              childField={props.childField}\r\n              hasCheckbox={props.hasCheckbox}\r\n              level={props.level + 1}\r\n            />\r\n          )}\r\n        </SlideDown>\r\n      </div>\r\n    )\r\n  },\r\n})\r\n"],"mappings":"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"}

package/dist/components/tree/TreeList.d.ts

@@ -0,0 +1,86 @@
+import { PropType } from 'vue';
+import { TreeDataType } from './Tree';
+export declare const TreeListProps: {
+    data: {
+        type: PropType<TreeDataType[]>;
+        required: boolean;
+    };
+    keyField: {
+        type: StringConstructor;
+        default: string;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    childField: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasCheckbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<TreeDataType[]>;
+        required: boolean;
+    };
+    keyField: {
+        type: StringConstructor;
+        default: string;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    childField: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasCheckbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: {
+        type: PropType<TreeDataType[]>;
+        required: boolean;
+    };
+    keyField: {
+        type: StringConstructor;
+        default: string;
+    };
+    textField: {
+        type: StringConstructor;
+        default: string;
+    };
+    childField: {
+        type: StringConstructor;
+        default: string;
+    };
+    hasCheckbox: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    level: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{}>, {
+    keyField: string;
+    textField: string;
+    childField: string;
+    hasCheckbox: boolean;
+    level: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/tree/TreeList.js

@@ -0,0 +1,52 @@
+import TreeItem_default from "./TreeItem.js";
+import { createVNode, defineComponent } from "vue";
+//#region components/tree/TreeList.tsx
+/**
+* 树列表组件
+* 负责渲染树节点列表，每个节点由 TreeItem 渲染
+*/
+var TreeListProps = {
+	data: {
+		type: Array,
+		required: true
+	},
+	keyField: {
+		type: String,
+		default: "Id"
+	},
+	textField: {
+		type: String,
+		default: "Name"
+	},
+	childField: {
+		type: String,
+		default: "Childs"
+	},
+	hasCheckbox: {
+		type: Boolean,
+		default: false
+	},
+	level: {
+		type: Number,
+		default: 0
+	}
+};
+var TreeList_default = /* @__PURE__ */ defineComponent({
+	name: "TreeList",
+	props: TreeListProps,
+	setup(props) {
+		return () => createVNode("div", { "class": "w-tree-list" }, [props.data.map((item) => createVNode(TreeItem_default, {
+			"key": item[props.keyField],
+			"item": item,
+			"keyField": props.keyField,
+			"textField": props.textField,
+			"childField": props.childField,
+			"hasCheckbox": props.hasCheckbox,
+			"level": props.level
+		}, null))]);
+	}
+});
+//#endregion
+export { TreeListProps, TreeList_default as default };
+
+//# sourceMappingURL=TreeList.js.map

package/dist/components/tree/TreeList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeList.js","names":["defineComponent","createVNode","_createVNode","TreeItem","TreeListProps","data","type","Array","required","keyField","String","default","textField","childField","hasCheckbox","Boolean","level","Number","name","props","setup","map","item"],"sources":["../../../components/tree/TreeList.tsx"],"sourcesContent":["/**\r\n * 树列表组件\r\n * 负责渲染树节点列表，每个节点由 TreeItem 渲染\r\n */\r\nimport { defineComponent } from \"vue\"\r\nimport type { PropType } from \"vue\"\r\nimport TreeItem from \"./TreeItem\"\r\nimport type { TreeDataType } from \"./Tree\"\r\n\r\nexport const TreeListProps = {\r\n  // 数据源\r\n  data: {\r\n    type: Array as PropType<TreeDataType[]>,\r\n    required: true,\r\n  },\r\n  // 字段配置\r\n  keyField: {\r\n    type: String,\r\n    default: \"Id\",\r\n  },\r\n  textField: {\r\n    type: String,\r\n    default: \"Name\",\r\n  },\r\n  childField: {\r\n    type: String,\r\n    default: \"Childs\",\r\n  },\r\n  // 是否有复选框\r\n  hasCheckbox: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  // 当前层级\r\n  level: {\r\n    type: Number,\r\n    default: 0,\r\n  },\r\n}\r\n\r\nexport default defineComponent({\r\n  name: \"TreeList\",\r\n  props: TreeListProps,\r\n  setup(props) {\r\n    return () => (\r\n      <div class=\"w-tree-list\">\r\n        {props.data.map((item) => (\r\n          <TreeItem\r\n            key={item[props.keyField]}\r\n            item={item}\r\n            keyField={props.keyField}\r\n            textField={props.textField}\r\n            childField={props.childField}\r\n            hasCheckbox={props.hasCheckbox}\r\n            level={props.level}\r\n          />\r\n        ))}\r\n      </div>\r\n    )\r\n  },\r\n})\r\n"],"mappings":";;;;;;;AASA,IAAaI,gBAAgB;CAE3BC,MAAM;EACJC,MAAMC;EACNC,UAAU;CACZ;CAEAC,UAAU;EACRH,MAAMI;EACNC,SAAS;CACX;CACAC,WAAW;EACTN,MAAMI;EACNC,SAAS;CACX;CACAE,YAAY;EACVP,MAAMI;EACNC,SAAS;CACX;CAEAG,aAAa;EACXR,MAAMS;EACNJ,SAAS;CACX;CAEAK,OAAO;EACLV,MAAMW;EACNN,SAAS;CACX;AACF;AAEA,IAAA,mBAAeX,gCAAgB;CAC7BkB,MAAM;CACNC,OAAOf;CACPgB,MAAMD,OAAO;EACX,aAAOjB,YAAA,OAAA,EAAA,SAAA,cAAA,GAAA,CAEFiB,MAAMd,KAAKgB,KAAKC,SAAIpB,YAAAC,kBAAA;GAAA,OAEZmB,KAAKH,MAAMV;GAAS,QACnBa;GAAI,YACAH,MAAMV;GAAQ,aACbU,MAAMP;GAAS,cACdO,MAAMN;GAAU,eACfM,MAAML;GAAW,SACvBK,MAAMH;EAAK,GAAA,IAAA,CAErB,CAAC,CAAA;CAGR;AACF,CAAC"}

package/dist/components/tree/_use/treeState.d.ts

@@ -0,0 +1,45 @@
+import { Ref } from 'vue';
+type KeyType = string | number;
+interface IOpts {
+    keyField: string;
+    childField: string;
+    sourceData: Record<string, any>[];
+    checkedMode?: "some" | "every";
+    onlyOneSpread?: boolean;
+    rootElement?: Ref<HTMLElement | null> | HTMLElement | null;
+}
+export default function useTreeState(opts: IOpts): {
+    spreadKeys: Ref<Set<KeyType> & Omit<Set<KeyType>, keyof Set<any>>, Set<KeyType> | (Set<KeyType> & Omit<Set<KeyType>, keyof Set<any>>)>;
+    checkedKeys: Ref<Set<KeyType> & Omit<Set<KeyType>, keyof Set<any>>, Set<KeyType> | (Set<KeyType> & Omit<Set<KeyType>, keyof Set<any>>)>;
+    getSpreadKeys: import('vue').ComputedRef<KeyType[]>;
+    getCheckedKeys: import('vue').ComputedRef<KeyType[]>;
+    toggleSpread: (key: KeyType) => void;
+    expand: (key: KeyType) => void;
+    collapse: (key: KeyType) => void;
+    isSpread: (key: KeyType) => boolean;
+    expandAll: (batchSize?: number) => void;
+    collapseAll: () => void;
+    toggleCheck: (key: KeyType) => void;
+    check: (key: KeyType) => void;
+    uncheck: (key: KeyType) => void;
+    isChecked: (key: KeyType) => boolean;
+    checkMultiple: (keys: KeyType[]) => void;
+    uncheckMultiple: (keys: KeyType[]) => void;
+    checkAll: (keys: KeyType[]) => void;
+    uncheckAll: () => void;
+    clearAll: () => void;
+    reset: () => void;
+    onCheckOne: ({ key, checked, }: {
+        key: KeyType;
+        checked: boolean;
+        item: Record<string, any>;
+    }) => void;
+    getSubmitData: () => {
+        keys: KeyType[];
+        rows: Record<string, any>[];
+    };
+    expandToNode: (key: KeyType) => void;
+    revealToNode: (key: KeyType, scroll?: boolean) => void;
+    scrollToNode: (key: KeyType) => void;
+};
+export {};

package/dist/components/tree/_use/treeState.js

@@ -0,0 +1,417 @@
+import { getChildren, getParent } from "../../../util/tools.js";
+import { computed, ref, unref } from "vue";
+//#region components/tree/_use/treeState.ts
+/**
+* 树组件状态管理
+* 管理节点的展开/折叠和选中状态
+*/
+function useTreeState(opts) {
+	const spreadKeys = ref(/* @__PURE__ */ new Set());
+	const checkedKeys = ref(/* @__PURE__ */ new Set());
+	/**
+	* 切换节点的展开/折叠状态
+	*/
+	function toggleSpread(key) {
+		if (opts.onlyOneSpread) {
+			const { ids } = getParent({
+				value: key,
+				arr: opts.sourceData,
+				prop: opts.keyField,
+				children: opts.childField
+			});
+			const parentId = ids.length >= 2 ? ids[ids.length - 2] : null;
+			let siblings = [];
+			if (parentId !== null) siblings = getDirectChildren(parentId);
+			else siblings = opts.sourceData;
+			const siblingKeys = siblings.map((sibling) => sibling[opts.keyField]);
+			const newSet = new Set(spreadKeys.value);
+			if (newSet.has(key)) newSet.delete(key);
+			else {
+				siblingKeys.forEach((siblingKey) => {
+					newSet.delete(siblingKey);
+				});
+				newSet.add(key);
+			}
+			spreadKeys.value = newSet;
+		} else {
+			const newSet = new Set(spreadKeys.value);
+			if (newSet.has(key)) newSet.delete(key);
+			else newSet.add(key);
+			spreadKeys.value = newSet;
+		}
+	}
+	/**
+	* 展开指定节点
+	*/
+	function expand(key) {
+		const newSet = new Set(spreadKeys.value);
+		newSet.add(key);
+		spreadKeys.value = newSet;
+	}
+	/**
+	* 折叠指定节点
+	*/
+	function collapse(key) {
+		const newSet = new Set(spreadKeys.value);
+		newSet.delete(key);
+		spreadKeys.value = newSet;
+	}
+	/**
+	* 判断节点是否展开
+	*/
+	function isSpread(key) {
+		return spreadKeys.value.has(key);
+	}
+	/**
+	* 展开所有节点
+	* @param batchSize 每批处理的节点数量，默认 20，设为 0 表示不分批
+	*/
+	function expandAll(batchSize = 20) {
+		const allKeys = [];
+		function collectKeys(nodes) {
+			nodes.forEach((node) => {
+				allKeys.push(node[opts.keyField]);
+				const children = node[opts.childField];
+				if (children && Array.isArray(children) && children.length > 0) collectKeys(children);
+			});
+		}
+		collectKeys(opts.sourceData);
+		if (batchSize <= 0) {
+			const newSet = new Set(spreadKeys.value);
+			allKeys.forEach((key) => newSet.add(key));
+			spreadKeys.value = newSet;
+		} else {
+			let index = 0;
+			function processBatch() {
+				const batch = allKeys.slice(index, index + batchSize);
+				const newSet = new Set(spreadKeys.value);
+				batch.forEach((key) => newSet.add(key));
+				spreadKeys.value = newSet;
+				index += batchSize;
+				if (index < allKeys.length) requestAnimationFrame(processBatch);
+			}
+			requestAnimationFrame(processBatch);
+		}
+	}
+	/**
+	* 折叠所有节点
+	*/
+	function collapseAll() {
+		spreadKeys.value = /* @__PURE__ */ new Set();
+	}
+	/**
+	* 切换节点的选中状态
+	*/
+	function toggleCheck(key) {
+		const newSet = new Set(checkedKeys.value);
+		if (newSet.has(key)) newSet.delete(key);
+		else newSet.add(key);
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 选中指定节点
+	*/
+	function check(key) {
+		const newSet = new Set(checkedKeys.value);
+		newSet.add(key);
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 取消选中指定节点
+	*/
+	function uncheck(key) {
+		const newSet = new Set(checkedKeys.value);
+		newSet.delete(key);
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 判断节点是否选中
+	*/
+	function isChecked(key) {
+		return checkedKeys.value.has(key);
+	}
+	/**
+	* 批量选中节点
+	*/
+	function checkMultiple(keys) {
+		const newSet = new Set(checkedKeys.value);
+		keys.forEach((key) => newSet.add(key));
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 批量取消选中节点
+	*/
+	function uncheckMultiple(keys) {
+		const newSet = new Set(checkedKeys.value);
+		keys.forEach((key) => newSet.delete(key));
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 选中所有节点
+	*/
+	function checkAll(keys) {
+		const newSet = new Set(checkedKeys.value);
+		keys.forEach((key) => newSet.add(key));
+		checkedKeys.value = newSet;
+	}
+	/**
+	* 取消所有选中
+	*/
+	function uncheckAll() {
+		checkedKeys.value = /* @__PURE__ */ new Set();
+	}
+	/**
+	* 清空所有状态
+	*/
+	function clearAll() {
+		spreadKeys.value = /* @__PURE__ */ new Set();
+		checkedKeys.value = /* @__PURE__ */ new Set();
+	}
+	/**
+	* 获取展开的 keys 数组
+	*/
+	const getSpreadKeys = computed(() => Array.from(spreadKeys.value));
+	/**
+	* 获取选中的 keys 数组
+	*/
+	const getCheckedKeys = computed(() => Array.from(checkedKeys.value));
+	/**
+	* 重置状态
+	*/
+	function reset() {
+		spreadKeys.value = /* @__PURE__ */ new Set();
+		checkedKeys.value = /* @__PURE__ */ new Set();
+	}
+	/**选择时，数据联动相关方法 */
+	function onCheckOne({ key, checked }) {
+		if (!opts.checkedMode) return;
+		const children = getChildren({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		if (children.length > 0) {
+			const childKeys = children.map((child) => child[opts.keyField]);
+			if (checked) checkMultiple(childKeys);
+			else uncheckMultiple(childKeys);
+		}
+		if (checked) check(key);
+		else uncheck(key);
+		if (opts.checkedMode === "some") {
+			if (checked) updateParentCheckStateForSome(key);
+			else updateParentUncheckStateForSome(key);
+		} else if (opts.checkedMode === "every") {
+			if (checked) updateParentCheckStateForEvery(key);
+			else updateParentUncheckState(key);
+		}
+	}
+	/**
+	* some 模式：更新父节点选中状态（选中时，父级也要选中）
+	*/
+	function updateParentCheckStateForSome(key) {
+		const { ids } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		for (let i = ids.length - 2; i >= 0; i--) check(ids[i]);
+	}
+	/**
+	* some 模式：取消时更新父节点状态（检查同级是否有选中的）
+	*/
+	function updateParentUncheckStateForSome(key) {
+		const { ids } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		for (let i = ids.length - 2; i >= 0; i--) {
+			const parentId = ids[i];
+			if (getDirectChildren(parentId).some((child) => checkedKeys.value.has(child[opts.keyField]))) check(parentId);
+			else uncheck(parentId);
+		}
+	}
+	/**
+	* every 模式：更新父节点选中状态（只有所有同级都选中时，父级才选中）
+	*/
+	function updateParentCheckStateForEvery(key) {
+		const { ids } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		for (let i = ids.length - 2; i >= 0; i--) {
+			const parentId = ids[i];
+			const parentChildren = getDirectChildren(parentId);
+			if (parentChildren.length > 0 && parentChildren.every((child) => checkedKeys.value.has(child[opts.keyField]))) check(parentId);
+			else break;
+		}
+	}
+	/**
+	* 取消父节点的选中状态
+	*/
+	function updateParentUncheckState(key) {
+		const { ids } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		for (let i = ids.length - 2; i >= 0; i--) uncheck(ids[i]);
+	}
+	/**
+	* 获取节点的直接子节点（不包括孙节点）
+	*/
+	function getDirectChildren(parentKey) {
+		const { rows } = getParent({
+			value: parentKey,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		if (rows.length === 0) return [];
+		const children = rows[rows.length - 1][opts.childField];
+		return children && Array.isArray(children) ? children : [];
+	}
+	/**
+	* 判断节点是否应该被收集（用于提交数据）
+	* 规则：
+	* - 叶子节点：直接收集
+	* - 非叶子节点：只有当所有直接子节点都被选中时才收集
+	*/
+	function shouldCollectNode(key) {
+		const directChildren = getDirectChildren(key);
+		if (directChildren.length === 0) return true;
+		return directChildren.every((child) => checkedKeys.value.has(child[opts.keyField]));
+	}
+	/**
+	* 判断节点是否有选中的祖先节点
+	*/
+	function hasCheckedAncestor(key) {
+		const { ids: parentIds } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		return parentIds.slice(0, -1).some((parentId) => checkedKeys.value.has(parentId));
+	}
+	/**
+	* 获取要提交给后台的数据
+	* @returns { keys: KeyType[], rows: Record<string, any>[] } 选中的keys数组和对应的行数据数组
+	*
+	* 规则：
+	* - some/every 模式：当子级全部选中时，只收集父级；子级未全部选中时，只收集子级
+	* - 无模式：直接返回 checkedKeys 中的所有数据
+	*/
+	function getSubmitData() {
+		if (!opts.checkedMode) {
+			const keys = Array.from(checkedKeys.value);
+			return {
+				keys,
+				rows: keys.map((key) => findNodeByKey(key)).filter((row) => row !== null)
+			};
+		}
+		const resultKeys = /* @__PURE__ */ new Set();
+		for (const key of checkedKeys.value) {
+			if (hasCheckedAncestor(key)) continue;
+			if (shouldCollectNode(key)) resultKeys.add(key);
+		}
+		const keys = Array.from(resultKeys);
+		return {
+			keys,
+			rows: keys.map((key) => findNodeByKey(key)).filter((row) => row !== null)
+		};
+	}
+	/**
+	* 根据 key 查找节点数据
+	*/
+	function findNodeByKey(key) {
+		const { rows } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		if (rows.length === 0) return null;
+		return rows[rows.length - 1];
+	}
+	/**
+	* 展开到目标节点（会先折叠其它节点），并滚动到可视区。
+	* 适合「定位某一项」；回显请用 revealToNode，避免把其它展开状态清掉。
+	*/
+	function expandToNode(key) {
+		collapseAll();
+		revealToNode(key, true);
+	}
+	/**
+	* 仅展开祖先路径，不折叠其它节点；可选滚动。
+	* 适合 v-model / v-model:keys 回显时把深层节点露出来。
+	*/
+	function revealToNode(key, scroll = false) {
+		const { ids } = getParent({
+			value: key,
+			arr: opts.sourceData,
+			prop: opts.keyField,
+			children: opts.childField
+		});
+		if (ids.length === 0) return;
+		const parentIds = ids.slice(0, -1);
+		if (parentIds.length === 0) {
+			if (scroll) setTimeout(() => scrollToNode(key), 50);
+			return;
+		}
+		const newSet = new Set(spreadKeys.value);
+		parentIds.forEach((parentId) => newSet.add(parentId));
+		spreadKeys.value = newSet;
+		if (scroll) setTimeout(() => scrollToNode(key), 350);
+	}
+	/**
+	* 将指定节点滚动到可视区域
+	* @param key 节点的 key 值
+	*/
+	function scrollToNode(key) {
+		const container = unref(opts.rootElement);
+		if (!container) return;
+		const nodeElement = container.querySelector(`[data-key="${key}"]`);
+		if (nodeElement) nodeElement.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+	}
+	return {
+		spreadKeys,
+		checkedKeys,
+		getSpreadKeys,
+		getCheckedKeys,
+		toggleSpread,
+		expand,
+		collapse,
+		isSpread,
+		expandAll,
+		collapseAll,
+		toggleCheck,
+		check,
+		uncheck,
+		isChecked,
+		checkMultiple,
+		uncheckMultiple,
+		checkAll,
+		uncheckAll,
+		clearAll,
+		reset,
+		onCheckOne,
+		getSubmitData,
+		expandToNode,
+		revealToNode,
+		scrollToNode
+	};
+}
+//#endregion
+export { useTreeState as default };
+
+//# sourceMappingURL=treeState.js.map