@will-ui/vue 1.0.0

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

@@ -0,0 +1,187 @@
+import { PropType } from 'vue';
+import { default as useTreeState } from './_use/treeState';
+import { CssVars } from '../../util';
+export type { TreeGlobalConfig } from './config';
+export { TREE_FALLBACK } from './config';
+/** 树节点数据的基础类型约束 */
+export type TreeDataType = Record<string, any>;
+/** useTreeState 返回值，供 ref / TreeChoose 复用 */
+export type TreeState = ReturnType<typeof useTreeState>;
+/**
+ * ref 暴露：常用方法可直接调用；完整能力见 treeState。
+ * @example
+ * treeRef.value?.revealToNode('1-1-2')
+ * treeRef.value?.treeState.getSubmitData()
+ */
+export type TreeExpose = {
+    treeState: TreeState;
+    expandAll: TreeState['expandAll'];
+    collapseAll: TreeState['collapseAll'];
+    expandToNode: TreeState['expandToNode'];
+    revealToNode: TreeState['revealToNode'];
+    scrollToNode: TreeState['scrollToNode'];
+    getSubmitData: TreeState['getSubmitData'];
+    getCheckedKeys: () => Array<string | number>;
+    getSpreadKeys: () => Array<string | number>;
+};
+/**
+ * 运行时 props —— TreeChoose 通过 spread 复用。
+ * 可全局配置的字段 default 须为 undefined。
+ */
+export declare const runtimeProps: {
+    data: {
+        type: PropType<TreeDataType[]>;
+        default: () => TreeDataType[];
+    };
+    modelValue: {
+        type: PropType<string | number>;
+        default: any;
+    };
+    keys: {
+        type: PropType<Array<string | number>>;
+        default: any;
+    };
+    keyField: {
+        type: PropType<string>;
+        default: any;
+    };
+    textField: {
+        type: PropType<string>;
+        default: any;
+    };
+    childField: {
+        type: PropType<string>;
+        default: any;
+    };
+    indent: {
+        type: PropType<number>;
+        default: any;
+    };
+    hasCheckbox: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    checkedMode: {
+        type: PropType<"some" | "every">;
+        default: any;
+    };
+    onlyOneSpread: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    onlyChooseLeaf: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    checkable: {
+        type: PropType<(item: TreeDataType) => boolean>;
+        default: any;
+    };
+    /** 实例行高（px），写入 `--w-prop-tree-size` */
+    size: {
+        type: PropType<number>;
+        default: any;
+    };
+    /** 品牌主色 → `--w-prop-tree-color` */
+    color: {
+        type: PropType<string>;
+        default: any;
+    };
+    /** 实例 CSS 变量 */
+    cssVars: {
+        type: PropType<CssVars>;
+        default: any;
+    };
+};
+/**
+ * 泛型树组件。可全局配置字段见 TreeGlobalConfig / TREE_FALLBACK。
+ */
+declare const Tree: new <T extends TreeDataType = TreeDataType>(props: ({
+    data?: T[];
+    modelValue?: string | number;
+    keys?: Array<string | number>;
+    keyField?: string;
+    textField?: string;
+    childField?: string;
+    indent?: number;
+    hasCheckbox?: boolean;
+    checkedMode?: "some" | "every";
+    onlyOneSpread?: boolean;
+    onlyChooseLeaf?: boolean;
+    checkable?: (item: T) => boolean;
+    /** 实例行高（px），写入 `--w-tree-size` */
+    size?: number;
+    /** 品牌主色 → `--w-prop-tree-color` */
+    color?: string;
+} & ({
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+} | {
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+})) & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps) => import('vue').CreateComponentPublicInstanceWithMixins<{
+    data?: T[];
+    modelValue?: string | number;
+    keys?: Array<string | number>;
+    keyField?: string;
+    textField?: string;
+    childField?: string;
+    indent?: number;
+    hasCheckbox?: boolean;
+    checkedMode?: "some" | "every";
+    onlyOneSpread?: boolean;
+    onlyChooseLeaf?: boolean;
+    checkable?: (item: T) => boolean;
+    /** 实例行高（px），写入 `--w-tree-size` */
+    size?: number;
+    /** 品牌主色 → `--w-prop-tree-color` */
+    color?: string;
+} & ({
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+} | {
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}), {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, import('vue').EmitsOptions, import('vue').PublicProps, {}, false, {}, {}, {}, {}, string, {}, any, import('vue').ComponentProvideOptions, {
+    P: {};
+    B: {};
+    D: {};
+    C: {};
+    M: {};
+    Defaults: {};
+}, ({
+    data?: T[];
+    modelValue?: string | number;
+    keys?: Array<string | number>;
+    keyField?: string;
+    textField?: string;
+    childField?: string;
+    indent?: number;
+    hasCheckbox?: boolean;
+    checkedMode?: "some" | "every";
+    onlyOneSpread?: boolean;
+    onlyChooseLeaf?: boolean;
+    checkable?: (item: T) => boolean;
+    /** 实例行高（px），写入 `--w-tree-size` */
+    size?: number;
+    /** 品牌主色 → `--w-prop-tree-color` */
+    color?: string;
+} & {
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}) | ({
+    data?: T[];
+    modelValue?: string | number;
+    keys?: Array<string | number>;
+    keyField?: string;
+    textField?: string;
+    childField?: string;
+    indent?: number;
+    hasCheckbox?: boolean;
+    checkedMode?: "some" | "every";
+    onlyOneSpread?: boolean;
+    onlyChooseLeaf?: boolean;
+    checkable?: (item: T) => boolean;
+    /** 实例行高（px），写入 `--w-tree-size` */
+    size?: number;
+    /** 品牌主色 → `--w-prop-tree-color` */
+    color?: string;
+} & {
+    [x: `on${Capitalize<string>}`]: (...args: any[]) => any;
+}), {}, {}, {}, {}, {}>;
+export default Tree;

package/dist/components/tree/Tree.js

@@ -0,0 +1,229 @@
+import useComponentConfig from "../../use/useComponentConfig.js";
+import { getParent } from "../../util/tools.js";
+import { mergeStyle, propColorToCssVars, propSizeToCssVars, toCssVarsStyle } from "../../util/cssVars.js";
+import TreeList_default from "./TreeList.js";
+import useTreeState from "./_use/treeState.js";
+import { TREE_FALLBACK } from "./config.js";
+import { computed, createVNode, defineComponent, nextTick, provide, reactive, ref, watch } from "vue";
+//#region components/tree/Tree.tsx
+/** 树节点数据的基础类型约束 */
+/** useTreeState 返回值，供 ref / TreeChoose 复用 */
+/**
+* ref 暴露：常用方法可直接调用；完整能力见 treeState。
+* @example
+* treeRef.value?.revealToNode('1-1-2')
+* treeRef.value?.treeState.getSubmitData()
+*/
+var TreeEmits = [
+	"toggle-spread",
+	"toggle-check",
+	"change",
+	"unchange",
+	"update:modelValue",
+	"update:keys"
+];
+/**
+* 运行时 props —— TreeChoose 通过 spread 复用。
+* 可全局配置的字段 default 须为 undefined。
+*/
+var runtimeProps = {
+	data: {
+		type: Array,
+		default: () => []
+	},
+	modelValue: {
+		type: [String, Number],
+		default: void 0
+	},
+	keys: {
+		type: Array,
+		default: void 0
+	},
+	keyField: {
+		type: String,
+		default: void 0
+	},
+	textField: {
+		type: String,
+		default: void 0
+	},
+	childField: {
+		type: String,
+		default: void 0
+	},
+	indent: {
+		type: Number,
+		default: void 0
+	},
+	hasCheckbox: {
+		type: Boolean,
+		default: void 0
+	},
+	checkedMode: {
+		type: String,
+		default: void 0
+	},
+	onlyOneSpread: {
+		type: Boolean,
+		default: void 0
+	},
+	onlyChooseLeaf: {
+		type: Boolean,
+		default: void 0
+	},
+	checkable: {
+		type: Function,
+		default: void 0
+	},
+	/** 实例行高（px），写入 `--w-prop-tree-size` */
+	size: {
+		type: Number,
+		default: void 0
+	},
+	/** 品牌主色 → `--w-prop-tree-color` */
+	color: {
+		type: String,
+		default: void 0
+	},
+	/** 实例 CSS 变量 */
+	cssVars: {
+		type: Object,
+		default: void 0
+	}
+};
+/**
+* 泛型树组件。可全局配置字段见 TreeGlobalConfig / TREE_FALLBACK。
+*/
+var Tree = /* @__PURE__ */ defineComponent((_props, ctx) => {
+	const { emit, slots, expose } = ctx;
+	const props = _props;
+	const cfg = useComponentConfig("Tree", props, TREE_FALLBACK);
+	const keyField = computed(() => cfg.value.keyField);
+	const textField = computed(() => cfg.value.textField);
+	const childField = computed(() => cfg.value.childField);
+	const indent = computed(() => cfg.value.indent);
+	const hasCheckbox = computed(() => !!cfg.value.hasCheckbox);
+	const checkedMode = computed(() => cfg.value.checkedMode);
+	const onlyOneSpread = computed(() => !!cfg.value.onlyOneSpread);
+	const onlyChooseLeaf = computed(() => !!cfg.value.onlyChooseLeaf);
+	const treeRootRef = ref(null);
+	const stateOptions = reactive({
+		keyField,
+		childField,
+		sourceData: computed(() => props.data),
+		checkedMode,
+		onlyOneSpread,
+		rootElement: treeRootRef
+	});
+	const treeState = useTreeState(stateOptions);
+	const originalToggleSpread = treeState.toggleSpread.bind(treeState);
+	treeState.toggleSpread = (key) => {
+		originalToggleSpread(key);
+		emit("toggle-spread", {
+			key,
+			isSpread: treeState.isSpread(key)
+		});
+	};
+	const originalOnCheckOne = treeState.onCheckOne.bind(treeState);
+	treeState.onCheckOne = (params) => {
+		originalOnCheckOne(params);
+		emit("toggle-check", {
+			...params,
+			getCheckedKeys: () => treeState.getCheckedKeys.value,
+			getSubmitData: treeState.getSubmitData
+		});
+		if (props.keys !== void 0) emit("update:keys", Array.from(treeState.checkedKeys.value));
+	};
+	function handleNodeSelect(key, item) {
+		emit("update:modelValue", key);
+		emit("change", {
+			key,
+			item,
+			getParent: () => getParent({
+				value: key,
+				arr: props.data,
+				prop: keyField.value,
+				children: childField.value
+			})
+		});
+	}
+	function handleNodeUnselect(key, item) {
+		emit("unchange", {
+			key,
+			item
+		});
+	}
+	provide("treeState", treeState);
+	provide("treeProps", reactive({
+		hasCheckbox,
+		modelValue: computed(() => props.modelValue),
+		onlyChooseLeaf,
+		checkable: computed(() => props.checkable)
+	}));
+	provide("treeSlots", slots);
+	provide("treeActions", {
+		handleNodeSelect,
+		handleNodeUnselect
+	});
+	/** 回显：把选中/勾选节点的祖先路径展开（不折叠其它节点） */
+	function revealSelection() {
+		nextTick(() => {
+			if (hasCheckbox.value) {
+				const keys = props.keys;
+				if (Array.isArray(keys)) keys.forEach((k) => treeState.revealToNode(k, false));
+				return;
+			}
+			const v = props.modelValue;
+			if (v !== void 0 && v !== null) treeState.revealToNode(v, false);
+		});
+	}
+	watch(() => props.keys, (newKeys) => {
+		if (newKeys !== void 0 && Array.isArray(newKeys)) {
+			treeState.checkedKeys.value = new Set(newKeys);
+			revealSelection();
+		}
+	}, { immediate: true });
+	watch(() => [
+		props.modelValue,
+		props.data,
+		hasCheckbox.value
+	], () => {
+		revealSelection();
+	}, { immediate: true });
+	expose({
+		treeState,
+		expandAll: (...args) => treeState.expandAll(...args),
+		collapseAll: () => treeState.collapseAll(),
+		expandToNode: (key) => treeState.expandToNode(key),
+		revealToNode: (key, scroll) => treeState.revealToNode(key, scroll),
+		scrollToNode: (key) => treeState.scrollToNode(key),
+		getSubmitData: () => treeState.getSubmitData(),
+		getCheckedKeys: () => treeState.getCheckedKeys.value,
+		getSpreadKeys: () => treeState.getSpreadKeys.value
+	});
+	return () => createVNode("div", {
+		"class": "w-tree",
+		"ref": treeRootRef,
+		"style": mergeStyle(toCssVarsStyle({
+			...indent.value != null ? { "--w-tree-indent": `${indent.value}px` } : void 0,
+			...propSizeToCssVars("tree", props.size),
+			...propColorToCssVars("tree", props.color),
+			...props.cssVars
+		}))
+	}, [createVNode(TreeList_default, {
+		"data": props.data,
+		"keyField": keyField.value,
+		"textField": textField.value,
+		"childField": childField.value,
+		"hasCheckbox": hasCheckbox.value,
+		"level": 0
+	}, null)]);
+}, {
+	name: "Tree",
+	props: runtimeProps,
+	emits: TreeEmits
+});
+//#endregion
+export { Tree as default, runtimeProps };
+
+//# sourceMappingURL=Tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tree.js","names":["defineComponent","provide","reactive","computed","ref","watch","nextTick","createVNode","_createVNode","TreeList","useTreeState","getParent","mergeStyle","propSizeToCssVars","propColorToCssVars","toCssVarsStyle","useComponentConfig","TREE_FALLBACK","TreeEmits","runtimeProps","data","type","Array","default","modelValue","String","Number","undefined","keys","keyField","textField","childField","indent","hasCheckbox","Boolean","checkedMode","onlyOneSpread","onlyChooseLeaf","checkable","Function","size","color","cssVars","Object","Tree","_props","ctx","emit","slots","expose","props","cfg","value","treeRootRef","stateOptions","sourceData","rootElement","treeState","originalToggleSpread","toggleSpread","bind","key","isSpread","originalOnCheckOne","onCheckOne","params","getCheckedKeys","getSubmitData","from","checkedKeys","handleNodeSelect","item","arr","prop","children","handleNodeUnselect","revealSelection","isArray","forEach","k","revealToNode","v","newKeys","Set","immediate","expandAll","args","collapseAll","expandToNode","scroll","scrollToNode","getSpreadKeys","name","emits"],"sources":["../../../components/tree/Tree.tsx"],"sourcesContent":["import {\r\n  defineComponent,\r\n  provide,\r\n  reactive,\r\n  computed,\r\n  ref,\r\n  watch,\r\n  nextTick,\r\n} from 'vue'\r\nimport type { PropType, SetupContext } from 'vue'\r\nimport TreeList from './TreeList'\r\nimport useTreeState from './_use/treeState'\r\nimport { getParent } from '../../util'\r\nimport { mergeStyle, propSizeToCssVars, propColorToCssVars, toCssVarsStyle, type CssVars } from '../../util'\r\nimport useComponentConfig from '../../use/useComponentConfig'\r\nimport { TREE_FALLBACK } from './config'\r\n\r\nexport type { TreeGlobalConfig } from './config'\r\nexport { TREE_FALLBACK } from './config'\r\n\r\n/** 树节点数据的基础类型约束 */\r\nexport type TreeDataType = Record<string, any>\r\n\r\n/** useTreeState 返回值，供 ref / TreeChoose 复用 */\r\nexport type TreeState = ReturnType<typeof useTreeState>\r\n\r\n/**\r\n * ref 暴露：常用方法可直接调用；完整能力见 treeState。\r\n * @example\r\n * treeRef.value?.revealToNode('1-1-2')\r\n * treeRef.value?.treeState.getSubmitData()\r\n */\r\nexport type TreeExpose = {\r\n  treeState: TreeState\r\n  expandAll: TreeState['expandAll']\r\n  collapseAll: TreeState['collapseAll']\r\n  expandToNode: TreeState['expandToNode']\r\n  revealToNode: TreeState['revealToNode']\r\n  scrollToNode: TreeState['scrollToNode']\r\n  getSubmitData: TreeState['getSubmitData']\r\n  getCheckedKeys: () => Array<string | number>\r\n  getSpreadKeys: () => Array<string | number>\r\n}\r\n\r\nconst TreeEmits = [\r\n  'toggle-spread',\r\n  'toggle-check',\r\n  'change',\r\n  'unchange',\r\n  'update:modelValue',\r\n  'update:keys',\r\n] as const\r\n\r\n/**\r\n * 运行时 props —— TreeChoose 通过 spread 复用。\r\n * 可全局配置的字段 default 须为 undefined。\r\n */\r\nexport const runtimeProps = {\r\n  data: {\r\n    type: Array as PropType<TreeDataType[]>,\r\n    default: () => [] as TreeDataType[],\r\n  },\r\n  modelValue: {\r\n    type: [String, Number] as PropType<string | number>,\r\n    default: undefined,\r\n  },\r\n  keys: {\r\n    type: Array as PropType<Array<string | number>>,\r\n    default: undefined,\r\n  },\r\n  keyField: { type: String as PropType<string>, default: undefined },\r\n  textField: { type: String as PropType<string>, default: undefined },\r\n  childField: { type: String as PropType<string>, default: undefined },\r\n  indent: { type: Number as PropType<number>, default: undefined },\r\n  hasCheckbox: { type: Boolean as PropType<boolean>, default: undefined },\r\n  checkedMode: {\r\n    type: String as PropType<'some' | 'every'>,\r\n    default: undefined,\r\n  },\r\n  onlyOneSpread: { type: Boolean as PropType<boolean>, default: undefined },\r\n  onlyChooseLeaf: { type: Boolean as PropType<boolean>, default: undefined },\r\n  checkable: {\r\n    type: Function as PropType<(item: TreeDataType) => boolean>,\r\n    default: undefined,\r\n  },\r\n  /** 实例行高（px），写入 `--w-prop-tree-size` */\r\n  size: { type: Number as PropType<number>, default: undefined },\r\n  /** 品牌主色 → `--w-prop-tree-color` */\r\n  color: { type: String as PropType<string>, default: undefined },\r\n  /** 实例 CSS 变量 */\r\n  cssVars: { type: Object as PropType<CssVars>, default: undefined },\r\n}\r\n\r\n/**\r\n * 泛型树组件。可全局配置字段见 TreeGlobalConfig / TREE_FALLBACK。\r\n */\r\nconst Tree = defineComponent(\r\n  <T extends TreeDataType = TreeDataType>(\r\n    _props: {\r\n      data?: T[]\r\n      modelValue?: string | number\r\n      keys?: Array<string | number>\r\n      keyField?: string\r\n      textField?: string\r\n      childField?: string\r\n      indent?: number\r\n      hasCheckbox?: boolean\r\n      checkedMode?: 'some' | 'every'\r\n      onlyOneSpread?: boolean\r\n      onlyChooseLeaf?: boolean\r\n      checkable?: (item: T) => boolean\r\n      /** 实例行高（px），写入 `--w-tree-size` */\r\n      size?: number\r\n      /** 品牌主色 → `--w-prop-tree-color` */\r\n      color?: string\r\n    },\r\n    ctx: SetupContext,\r\n  ) => {\r\n    const { emit, slots, expose } = ctx\r\n    const props = _props as Record<string, any>\r\n    const cfg = useComponentConfig('Tree', props, TREE_FALLBACK)\r\n\r\n    const keyField = computed(() => cfg.value.keyField as string)\r\n    const textField = computed(() => cfg.value.textField as string)\r\n    const childField = computed(() => cfg.value.childField as string)\r\n    const indent = computed(() => cfg.value.indent as number | undefined)\r\n    const hasCheckbox = computed(() => !!cfg.value.hasCheckbox)\r\n    const checkedMode = computed(() => cfg.value.checkedMode)\r\n    const onlyOneSpread = computed(() => !!cfg.value.onlyOneSpread)\r\n    const onlyChooseLeaf = computed(() => !!cfg.value.onlyChooseLeaf)\r\n\r\n    const treeRootRef = ref<HTMLElement | null>(null)\r\n\r\n    const stateOptions = reactive({\r\n      keyField,\r\n      childField,\r\n      sourceData: computed(() => props.data as TreeDataType[]),\r\n      checkedMode,\r\n      onlyOneSpread,\r\n      rootElement: treeRootRef,\r\n    })\r\n    const treeState = useTreeState(stateOptions)\r\n\r\n    const originalToggleSpread = treeState.toggleSpread.bind(treeState)\r\n    treeState.toggleSpread = (key: string | number) => {\r\n      originalToggleSpread(key)\r\n      emit('toggle-spread', { key, isSpread: treeState.isSpread(key) })\r\n    }\r\n\r\n    type OnCheckOneParams = Parameters<typeof treeState.onCheckOne>[0]\r\n    const originalOnCheckOne: (params: OnCheckOneParams) => void =\r\n      treeState.onCheckOne.bind(treeState)\r\n    treeState.onCheckOne = (params: OnCheckOneParams) => {\r\n      originalOnCheckOne(params)\r\n      emit('toggle-check', {\r\n        ...params,\r\n        getCheckedKeys: () => treeState.getCheckedKeys.value,\r\n        getSubmitData: treeState.getSubmitData,\r\n      })\r\n      if (props.keys !== undefined) {\r\n        emit('update:keys', Array.from(treeState.checkedKeys.value))\r\n      }\r\n    }\r\n\r\n    function handleNodeSelect(key: string | number, item: Record<string, any>) {\r\n      emit('update:modelValue', key)\r\n      emit('change', {\r\n        key,\r\n        item,\r\n        getParent: () =>\r\n          getParent({\r\n            value: key,\r\n            arr: props.data,\r\n            prop: keyField.value,\r\n            children: childField.value,\r\n          }),\r\n      })\r\n    }\r\n    function handleNodeUnselect(\r\n      key: string | number,\r\n      item: Record<string, any>,\r\n    ) {\r\n      emit('unchange', { key, item })\r\n    }\r\n\r\n    provide('treeState', treeState)\r\n    provide(\r\n      'treeProps',\r\n      reactive({\r\n        hasCheckbox,\r\n        modelValue: computed(() => props.modelValue),\r\n        onlyChooseLeaf,\r\n        checkable: computed(() => props.checkable),\r\n      }),\r\n    )\r\n    provide('treeSlots', slots)\r\n    provide('treeActions', {\r\n      handleNodeSelect,\r\n      handleNodeUnselect,\r\n    })\r\n\r\n    /** 回显：把选中/勾选节点的祖先路径展开（不折叠其它节点） */\r\n    function revealSelection() {\r\n      nextTick(() => {\r\n        if (hasCheckbox.value) {\r\n          const keys = props.keys\r\n          if (Array.isArray(keys)) {\r\n            keys.forEach((k: string | number) =>\r\n              treeState.revealToNode(k, false),\r\n            )\r\n          }\r\n          return\r\n        }\r\n        const v = props.modelValue\r\n        if (v !== undefined && v !== null) {\r\n          treeState.revealToNode(v, false)\r\n        }\r\n      })\r\n    }\r\n\r\n    watch(\r\n      () => props.keys,\r\n      (newKeys: any) => {\r\n        if (newKeys !== undefined && Array.isArray(newKeys)) {\r\n          treeState.checkedKeys.value = new Set(newKeys)\r\n          revealSelection()\r\n        }\r\n      },\r\n      { immediate: true },\r\n    )\r\n\r\n    watch(\r\n      () => [props.modelValue, props.data, hasCheckbox.value] as const,\r\n      () => {\r\n        revealSelection()\r\n      },\r\n      { immediate: true },\r\n    )\r\n\r\n    expose({\r\n      treeState,\r\n      expandAll: (...args: Parameters<TreeState['expandAll']>) =>\r\n        treeState.expandAll(...args),\r\n      collapseAll: () => treeState.collapseAll(),\r\n      expandToNode: (key: string | number) => treeState.expandToNode(key),\r\n      revealToNode: (key: string | number, scroll?: boolean) =>\r\n        treeState.revealToNode(key, scroll),\r\n      scrollToNode: (key: string | number) => treeState.scrollToNode(key),\r\n      getSubmitData: () => treeState.getSubmitData(),\r\n      getCheckedKeys: () => treeState.getCheckedKeys.value,\r\n      getSpreadKeys: () => treeState.getSpreadKeys.value,\r\n    } satisfies TreeExpose)\r\n\r\n    return () => (\r\n      <div\r\n        class=\"w-tree\"\r\n        ref={treeRootRef}\r\n        style={mergeStyle(\r\n          toCssVarsStyle({\r\n            ...(indent.value != null\r\n              ? { '--w-tree-indent': `${indent.value}px` }\r\n              : undefined),\r\n            ...propSizeToCssVars('tree', props.size),\r\n            ...propColorToCssVars('tree', props.color),\r\n            ...props.cssVars,\r\n          }),\r\n        )}>\r\n        <TreeList\r\n          data={props.data}\r\n          keyField={keyField.value}\r\n          textField={textField.value}\r\n          childField={childField.value}\r\n          hasCheckbox={hasCheckbox.value}\r\n          level={0}\r\n        />\r\n      </div>\r\n    )\r\n  },\r\n  {\r\n    name: 'Tree',\r\n    props: runtimeProps as any,\r\n    emits: TreeEmits,\r\n  } as any,\r\n)\r\n\r\nexport default Tree\r\n"],"mappings":"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"}

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

@@ -0,0 +1,86 @@
+import { PropType } from 'vue';
+import { TreeDataType } from './Tree';
+export declare const TreeItemProps: {
+    item: {
+        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<{
+    item: {
+        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<{
+    item: {
+        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/TreeItem.js

@@ -0,0 +1,152 @@
+import Icon_default from "../icon/Icon.js";
+import Checkbox_default from "../checkbox/Checkbox.js";
+import SlideDown_default from "../slideDown/SlideDown.js";
+import TreeList_default from "./TreeList.js";
+import { computed, createVNode, defineComponent, inject } from "vue";
+//#region components/tree/TreeItem.tsx
+/**
+* 树节点组件
+* 渲染单个树节点，包含：展开箭头、复选框、节点文本
+* 并在子节点展开时递归渲染 TreeList
+*/
+var TreeItemProps = {
+	item: {
+		type: Object,
+		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 TreeItem_default = /* @__PURE__ */ defineComponent({
+	name: "TreeItem",
+	props: TreeItemProps,
+	setup(props) {
+		const treeState = inject("treeState", {});
+		const treeProps = inject("treeProps", {});
+		const treeSlots = inject("treeSlots", {});
+		const treeActions = inject("treeActions", {});
+		const nodeKey = computed(() => props.item[props.keyField]);
+		const nodeText = computed(() => {
+			return props.item[props.textField];
+		});
+		const children = computed(() => {
+			const childData = props.item[props.childField];
+			return Array.isArray(childData) ? childData : [];
+		});
+		const hasChildren = computed(() => children.value.length > 0);
+		const isSpread = computed(() => treeState.isSpread(nodeKey.value));
+		const isCheckable = computed(() => {
+			if (!treeProps.checkable) return true;
+			return treeProps.checkable(props.item);
+		});
+		function handleToggleSpread() {
+			if (hasChildren.value) treeState.toggleSpread(nodeKey.value);
+		}
+		function RenderIcon() {
+			let DefaultIcon = createVNode(Icon_default, {
+				"name": "w-icon-sort-down",
+				"rotate": !isSpread.value,
+				"deg": -90,
+				"direction": "z"
+			}, null);
+			let SpreadIcon;
+			let FoldIcon;
+			let LeafIcon;
+			if (treeSlots) {
+				if (treeSlots.icon) DefaultIcon = treeSlots.icon({ isSpread: isSpread.value });
+				else {
+					if (treeSlots["icon-spread"]) SpreadIcon = treeSlots["icon-spread"]();
+					if (treeSlots["icon-fold"]) FoldIcon = treeSlots["icon-fold"]();
+				}
+				if (treeSlots["icon-leaf"]) LeafIcon = treeSlots["icon-leaf"]();
+			}
+			if (hasChildren.value) {
+				if (SpreadIcon && FoldIcon) return isSpread.value ? SpreadIcon : FoldIcon;
+				return DefaultIcon;
+			} else if (LeafIcon) return LeafIcon;
+			else if (SpreadIcon) return createVNode("div", { "style": "visibility: hidden;pointer-events: none;" }, [SpreadIcon]);
+			else return createVNode("div", { "style": "visibility: hidden;pointer-events: none;" }, [DefaultIcon]);
+		}
+		function RenderNodeLabel() {
+			if (treeSlots && treeSlots.label) return treeSlots.label({ item: props.item });
+			return createVNode("span", { "class": "w-tree-item-label" }, [nodeText.value]);
+		}
+		function handleNodeClick() {
+			if (!props.hasCheckbox && treeActions.handleNodeSelect) {
+				if (treeProps.onlyChooseLeaf && hasChildren.value) {
+					treeActions.handleNodeUnselect(nodeKey.value, props.item);
+					return;
+				}
+				if (!isCheckable.value) {
+					treeActions.handleNodeUnselect(nodeKey.value, props.item);
+					return;
+				}
+				if (treeProps.modelValue !== nodeKey.value) treeActions.handleNodeSelect(nodeKey.value, props.item);
+			}
+		}
+		return () => createVNode("div", { "class": ["w-tree-node-wrapper"] }, [createVNode("div", {
+			"class": [
+				"w-tree-item",
+				treeProps.modelValue === nodeKey.value ? "w-tree-item-active" : "",
+				!props.hasCheckbox && !isCheckable.value ? "w-tree-item-disabled" : ""
+			],
+			"style": { paddingLeft: `calc(${props.level} * var(--w-tree-indent))` },
+			"data-key": nodeKey.value
+		}, [
+			createVNode("div", {
+				"class": `w-tree-item-arrow ${!hasChildren.value ? "no-children" : ""}`,
+				"onClick": handleToggleSpread
+			}, [RenderIcon()]),
+			props.hasCheckbox && createVNode("div", {
+				"class": "w-tree-item-checkbox",
+				"onClick": (e) => e.stopPropagation()
+			}, [createVNode(Checkbox_default, {
+				"value": nodeKey.value,
+				"modelValue": treeState.checkedKeys.value,
+				"disabled": !isCheckable.value,
+				"onUpdate:model-value": (s) => {
+					treeState.checkedKeys.value = s;
+					const isChecked = s.has ? s.has(nodeKey.value) : s.includes(nodeKey.value);
+					treeState.onCheckOne({
+						key: nodeKey.value,
+						item: props.item,
+						checked: isChecked
+					});
+				}
+			}, null)]),
+			createVNode("div", {
+				"class": "w-tree-item-label-wrapper",
+				"onClick": handleNodeClick
+			}, [createVNode(RenderNodeLabel, null, null)])
+		]), createVNode(SlideDown_default, null, { default: () => [hasChildren.value && isSpread.value && createVNode(TreeList_default, {
+			"data": children.value,
+			"keyField": props.keyField,
+			"textField": props.textField,
+			"childField": props.childField,
+			"hasCheckbox": props.hasCheckbox,
+			"level": props.level + 1
+		}, null)] })]);
+	}
+});
+//#endregion
+export { TreeItemProps, TreeItem_default as default };
+
+//# sourceMappingURL=TreeItem.js.map