vft 0.0.524 → 0.0.525

package/lib/components/tree/model/useDragNode.cjs

@@ -1 +1,111 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("@vft/utils");require("@vueuse/core");require("../../config-provider/hooks/use-global-config.cjs");const b=require("vue");require("lodash-es");require("../../form/index.cjs");const B=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const h=Symbol("dragEvents");function x({props:u,ctx:f,el$:q,dropIndicator$:T,store:C}){const g=B.useNamespace("tree"),d=b.ref({showDropIndicator:!1,draggingNode:null,dropNode:null,allowDrop:!0,dropType:null}),$=({event:r,treeNode:t})=>{if(typeof u.allowDrag=="function"&&!u.allowDrag(t.node))return r.preventDefault(),!1;r.dataTransfer.effectAllowed="move";try{r.dataTransfer.setData("text/plain","")}catch{}d.value.draggingNode=t,f.emit("node-drag-start",t.node,r)},S=({event:r,treeNode:t})=>{const e=t,o=d.value.dropNode;o&&o.node.id!==e.node.id&&p.removeClass(o.$el,g.is("drop-inner"));const n=d.value.draggingNode;if(!n||!e)return;let l=!0,i=!0,s=!0,m=!0;typeof u.allowDrop=="function"&&(l=u.allowDrop(n.node,e.node,"prev"),m=i=u.allowDrop(n.node,e.node,"inner"),s=u.allowDrop(n.node,e.node,"next")),r.dataTransfer.dropEffect=i||l||s?"move":"none",(l||i||s)&&o?.node.id!==e.node.id&&(o&&f.emit("node-drag-leave",n.node,o.node,r),f.emit("node-drag-enter",n.node,e.node,r)),(l||i||s)&&(d.value.dropNode=e),e.node.nextSibling===n.node&&(s=!1),e.node.previousSibling===n.node&&(l=!1),e.node.contains(n.node,!1)&&(i=!1),(n.node===e.node||n.node.contains(e.node))&&(l=!1,i=!1,s=!1);const c=e.$el.getBoundingClientRect(),v=q.value.getBoundingClientRect();let a;const P=l?i?.25:s?.45:1:-1,E=s?i?.75:l?.55:0:1;let D=-9999;const y=r.clientY-c.top;y<c.height*P?a="before":y>c.height*E?a="after":i?a="inner":a="none";const N=e.$el.querySelector(`.${g.be("node","expand-icon")}`).getBoundingClientRect(),w=T.value;a==="before"?D=N.top-v.top:a==="after"&&(D=N.bottom-v.top),w.style.top=`${D}px`,w.style.left=`${N.right-v.left}px`,a==="inner"?p.addClass(e.$el,g.is("drop-inner")):p.removeClass(e.$el,g.is("drop-inner")),d.value.showDropIndicator=a==="before"||a==="after",d.value.allowDrop=d.value.showDropIndicator||m,d.value.dropType=a,f.emit("node-drag-over",n.node,e.node,r)},I=r=>{const{draggingNode:t,dropType:e,dropNode:o}=d.value;if(r.preventDefault(),r.dataTransfer.dropEffect="move",t&&o){const n={data:t.node.data};e!=="none"&&t.node.remove(),e==="before"?o.node.parent.insertBefore(n,o.node):e==="after"?o.node.parent.insertAfter(n,o.node):e==="inner"&&o.node.insertChild(n),e!=="none"&&C.value.registerNode(n),p.removeClass(o.$el,g.is("drop-inner")),f.emit("node-drag-end",t.node,o.node,e,r),e!=="none"&&f.emit("node-drop",t.node,o.node,e,r)}t&&!o&&f.emit("node-drag-end",t.node,null,e,r),d.value.showDropIndicator=!1,d.value.draggingNode=null,d.value.dropNode=null,d.value.allowDrop=!0};return b.provide(h,{treeNodeDragStart:$,treeNodeDragOver:S,treeNodeDragEnd:I}),{dragState:d}}exports.dragEventsKey=h;exports.useDragNodeHandler=x;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_index = require("../../../hooks/use-namespace/index.cjs");
+let _vft_utils = require("@vft/utils");
+let vue = require("vue");
+//#region ../../packages/components/tree/model/useDragNode.ts
+const dragEventsKey = Symbol("dragEvents");
+function useDragNodeHandler({ props, ctx, el$, dropIndicator$, store }) {
+	const ns = require_index.useNamespace("tree");
+	const dragState = (0, vue.ref)({
+		showDropIndicator: false,
+		draggingNode: null,
+		dropNode: null,
+		allowDrop: true,
+		dropType: null
+	});
+	const treeNodeDragStart = ({ event, treeNode }) => {
+		if (typeof props.allowDrag === "function" && !props.allowDrag(treeNode.node)) {
+			event.preventDefault();
+			return false;
+		}
+		event.dataTransfer.effectAllowed = "move";
+		try {
+			event.dataTransfer.setData("text/plain", "");
+		} catch {}
+		dragState.value.draggingNode = treeNode;
+		ctx.emit("node-drag-start", treeNode.node, event);
+	};
+	const treeNodeDragOver = ({ event, treeNode }) => {
+		const dropNode = treeNode;
+		const oldDropNode = dragState.value.dropNode;
+		if (oldDropNode && oldDropNode.node.id !== dropNode.node.id) (0, _vft_utils.removeClass)(oldDropNode.$el, ns.is("drop-inner"));
+		const draggingNode = dragState.value.draggingNode;
+		if (!draggingNode || !dropNode) return;
+		let dropPrev = true;
+		let dropInner = true;
+		let dropNext = true;
+		let userAllowDropInner = true;
+		if (typeof props.allowDrop === "function") {
+			dropPrev = props.allowDrop(draggingNode.node, dropNode.node, "prev");
+			userAllowDropInner = dropInner = props.allowDrop(draggingNode.node, dropNode.node, "inner");
+			dropNext = props.allowDrop(draggingNode.node, dropNode.node, "next");
+		}
+		event.dataTransfer.dropEffect = dropInner || dropPrev || dropNext ? "move" : "none";
+		if ((dropPrev || dropInner || dropNext) && oldDropNode?.node.id !== dropNode.node.id) {
+			if (oldDropNode) ctx.emit("node-drag-leave", draggingNode.node, oldDropNode.node, event);
+			ctx.emit("node-drag-enter", draggingNode.node, dropNode.node, event);
+		}
+		if (dropPrev || dropInner || dropNext) dragState.value.dropNode = dropNode;
+		if (dropNode.node.nextSibling === draggingNode.node) dropNext = false;
+		if (dropNode.node.previousSibling === draggingNode.node) dropPrev = false;
+		if (dropNode.node.contains(draggingNode.node, false)) dropInner = false;
+		if (draggingNode.node === dropNode.node || draggingNode.node.contains(dropNode.node)) {
+			dropPrev = false;
+			dropInner = false;
+			dropNext = false;
+		}
+		const targetPosition = dropNode.$el.getBoundingClientRect();
+		const treePosition = el$.value.getBoundingClientRect();
+		let dropType;
+		const prevPercent = dropPrev ? dropInner ? .25 : dropNext ? .45 : 1 : -1;
+		const nextPercent = dropNext ? dropInner ? .75 : dropPrev ? .55 : 0 : 1;
+		let indicatorTop = -9999;
+		const distance = event.clientY - targetPosition.top;
+		if (distance < targetPosition.height * prevPercent) dropType = "before";
+		else if (distance > targetPosition.height * nextPercent) dropType = "after";
+		else if (dropInner) dropType = "inner";
+		else dropType = "none";
+		const iconPosition = dropNode.$el.querySelector(`.${ns.be("node", "expand-icon")}`).getBoundingClientRect();
+		const dropIndicator = dropIndicator$.value;
+		if (dropType === "before") indicatorTop = iconPosition.top - treePosition.top;
+		else if (dropType === "after") indicatorTop = iconPosition.bottom - treePosition.top;
+		dropIndicator.style.top = `${indicatorTop}px`;
+		dropIndicator.style.left = `${iconPosition.right - treePosition.left}px`;
+		if (dropType === "inner") (0, _vft_utils.addClass)(dropNode.$el, ns.is("drop-inner"));
+		else (0, _vft_utils.removeClass)(dropNode.$el, ns.is("drop-inner"));
+		dragState.value.showDropIndicator = dropType === "before" || dropType === "after";
+		dragState.value.allowDrop = dragState.value.showDropIndicator || userAllowDropInner;
+		dragState.value.dropType = dropType;
+		ctx.emit("node-drag-over", draggingNode.node, dropNode.node, event);
+	};
+	const treeNodeDragEnd = (event) => {
+		const { draggingNode, dropType, dropNode } = dragState.value;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+		if (draggingNode && dropNode) {
+			const draggingNodeCopy = { data: draggingNode.node.data };
+			if (dropType !== "none") draggingNode.node.remove();
+			if (dropType === "before") dropNode.node.parent.insertBefore(draggingNodeCopy, dropNode.node);
+			else if (dropType === "after") dropNode.node.parent.insertAfter(draggingNodeCopy, dropNode.node);
+			else if (dropType === "inner") dropNode.node.insertChild(draggingNodeCopy);
+			if (dropType !== "none") store.value.registerNode(draggingNodeCopy);
+			(0, _vft_utils.removeClass)(dropNode.$el, ns.is("drop-inner"));
+			ctx.emit("node-drag-end", draggingNode.node, dropNode.node, dropType, event);
+			if (dropType !== "none") ctx.emit("node-drop", draggingNode.node, dropNode.node, dropType, event);
+		}
+		if (draggingNode && !dropNode) ctx.emit("node-drag-end", draggingNode.node, null, dropType, event);
+		dragState.value.showDropIndicator = false;
+		dragState.value.draggingNode = null;
+		dragState.value.dropNode = null;
+		dragState.value.allowDrop = true;
+	};
+	(0, vue.provide)(dragEventsKey, {
+		treeNodeDragStart,
+		treeNodeDragOver,
+		treeNodeDragEnd
+	});
+	return { dragState };
+}
+//#endregion
+exports.dragEventsKey = dragEventsKey;
+exports.useDragNodeHandler = useDragNodeHandler;

package/lib/components/tree/model/useKeydown.cjs

@@ -1 +1,82 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../constants/aria.cjs"),b=require("@vueuse/core");require("@vft/utils");require("../../config-provider/hooks/use-global-config.cjs");const c=require("vue");require("lodash-es");require("../../form/index.cjs");const h=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");function q({el$:u},f){const o=h.useNamespace("tree"),t=c.shallowRef([]),s=c.shallowRef([]);c.onMounted(()=>{E()}),c.onUpdated(()=>{t.value=Array.from(u.value.querySelectorAll("[role=treeitem]")),s.value=Array.from(u.value.querySelectorAll("input[type=checkbox]"))}),c.watch(s,r=>{r.forEach(n=>{n.setAttribute("tabindex","-1")})});const y=r=>{const n=r.target;if(!n.className.includes(o.b("node")))return;const i=r.code;t.value=Array.from(u.value.querySelectorAll(`.${o.is("focusable")}[role=treeitem]`));const a=t.value.indexOf(n);let e;if([l.EVENT_CODE.up,l.EVENT_CODE.down].includes(i)){if(r.preventDefault(),i===l.EVENT_CODE.up){e=a===-1?0:a!==0?a-1:t.value.length-1;const d=e;for(;!f.value.getNode(t.value[e].dataset.key).canFocus;){if(e--,e===d){e=-1;break}e<0&&(e=t.value.length-1)}}else{e=a===-1?0:a<t.value.length-1?a+1:0;const d=e;for(;!f.value.getNode(t.value[e].dataset.key).canFocus;){if(e++,e===d){e=-1;break}e>=t.value.length&&(e=0)}}e!==-1&&t.value[e].focus()}[l.EVENT_CODE.left,l.EVENT_CODE.right].includes(i)&&(r.preventDefault(),n.click());const v=n.querySelector('[type="checkbox"]');[l.EVENT_CODE.enter,l.EVENT_CODE.space].includes(i)&&v&&(r.preventDefault(),v.click())};b.useEventListener(u,"keydown",y);const E=()=>{t.value=Array.from(u.value.querySelectorAll(`.${o.is("focusable")}[role=treeitem]`)),s.value=Array.from(u.value.querySelectorAll("input[type=checkbox]"));const r=u.value.querySelectorAll(`.${o.is("checked")}[role=treeitem]`);if(r.length){r[0].setAttribute("tabindex","0");return}t.value[0]?.setAttribute("tabindex","0")}}exports.useKeydown=q;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_index = require("../../../hooks/use-namespace/index.cjs");
+const require_aria = require("../../../constants/aria.cjs");
+let _vueuse_core = require("@vueuse/core");
+let vue = require("vue");
+//#region ../../packages/components/tree/model/useKeydown.ts
+function useKeydown({ el$ }, store) {
+	const ns = require_index.useNamespace("tree");
+	const treeItems = (0, vue.shallowRef)([]);
+	const checkboxItems = (0, vue.shallowRef)([]);
+	(0, vue.onMounted)(() => {
+		initTabIndex();
+	});
+	(0, vue.onUpdated)(() => {
+		treeItems.value = Array.from(el$.value.querySelectorAll("[role=treeitem]"));
+		checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
+	});
+	(0, vue.watch)(checkboxItems, (val) => {
+		val.forEach((checkbox) => {
+			checkbox.setAttribute("tabindex", "-1");
+		});
+	});
+	const handleKeydown = (ev) => {
+		const currentItem = ev.target;
+		if (!currentItem.className.includes(ns.b("node"))) return;
+		const code = ev.code;
+		treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
+		const currentIndex = treeItems.value.indexOf(currentItem);
+		let nextIndex;
+		if ([require_aria.EVENT_CODE.up, require_aria.EVENT_CODE.down].includes(code)) {
+			ev.preventDefault();
+			if (code === require_aria.EVENT_CODE.up) {
+				nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.value.length - 1;
+				const startIndex = nextIndex;
+				while (true) {
+					if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) break;
+					nextIndex--;
+					if (nextIndex === startIndex) {
+						nextIndex = -1;
+						break;
+					}
+					if (nextIndex < 0) nextIndex = treeItems.value.length - 1;
+				}
+			} else {
+				nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.value.length - 1 ? currentIndex + 1 : 0;
+				const startIndex = nextIndex;
+				while (true) {
+					if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) break;
+					nextIndex++;
+					if (nextIndex === startIndex) {
+						nextIndex = -1;
+						break;
+					}
+					if (nextIndex >= treeItems.value.length) nextIndex = 0;
+				}
+			}
+			nextIndex !== -1 && treeItems.value[nextIndex].focus();
+		}
+		if ([require_aria.EVENT_CODE.left, require_aria.EVENT_CODE.right].includes(code)) {
+			ev.preventDefault();
+			currentItem.click();
+		}
+		const hasInput = currentItem.querySelector("[type=\"checkbox\"]");
+		if ([require_aria.EVENT_CODE.enter, require_aria.EVENT_CODE.space].includes(code) && hasInput) {
+			ev.preventDefault();
+			hasInput.click();
+		}
+	};
+	(0, _vueuse_core.useEventListener)(el$, "keydown", handleKeydown);
+	const initTabIndex = () => {
+		treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
+		checkboxItems.value = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
+		const checkedItem = el$.value.querySelectorAll(`.${ns.is("checked")}[role=treeitem]`);
+		if (checkedItem.length) {
+			checkedItem[0].setAttribute("tabindex", "0");
+			return;
+		}
+		treeItems.value[0]?.setAttribute("tabindex", "0");
+	};
+}
+//#endregion
+exports.useKeydown = useKeydown;

package/lib/components/tree/model/useNodeExpandEventBroadcast.cjs

@@ -1 +1,20 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue");function a(e){const o=r.inject("TreeNodeMap",null),d={treeNodeExpand:n=>{e.node!==n&&e.node.collapse()},children:[]};return o&&o.children.push(d),r.provide("TreeNodeMap",d),{broadcastExpanded:n=>{if(e.accordion)for(const t of d.children)t.treeNodeExpand(n)}}}exports.useNodeExpandEventBroadcast=a;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+let vue = require("vue");
+//#region ../../packages/components/tree/model/useNodeExpandEventBroadcast.ts
+function useNodeExpandEventBroadcast(props) {
+	const parentNodeMap = (0, vue.inject)("TreeNodeMap", null);
+	const currentNodeMap = {
+		treeNodeExpand: (node) => {
+			if (props.node !== node) props.node.collapse();
+		},
+		children: []
+	};
+	if (parentNodeMap) parentNodeMap.children.push(currentNodeMap);
+	(0, vue.provide)("TreeNodeMap", currentNodeMap);
+	return { broadcastExpanded: (node) => {
+		if (!props.accordion) return;
+		for (const childNode of currentNodeMap.children) childNode.treeNodeExpand(node);
+	} };
+}
+//#endregion
+exports.useNodeExpandEventBroadcast = useNodeExpandEventBroadcast;

package/lib/components/tree/model/util.cjs

@@ -1 +1,28 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t="$treeNodeId",a=function(r,e){!e||e[t]||Object.defineProperty(e,t,{value:r.id,enumerable:!1,configurable:!1,writable:!1})},c=function(r,e){return r?e[r]:e[t]},l=(r,e,o)=>{const u=r.value.currentNode;o();const n=r.value.currentNode;u!==n&&e("current-change",n?n.data:null,n)};exports.NODE_KEY=t;exports.getNodeKey=c;exports.handleCurrentChange=l;exports.markNodeData=a;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region ../../packages/components/tree/model/util.ts
+const NODE_KEY = "$treeNodeId";
+const markNodeData = function(node, data) {
+	if (!data || data["$treeNodeId"]) return;
+	Object.defineProperty(data, NODE_KEY, {
+		value: node.id,
+		enumerable: false,
+		configurable: false,
+		writable: false
+	});
+};
+const getNodeKey = function(key, data) {
+	if (!key) return data[NODE_KEY];
+	return data[key];
+};
+const handleCurrentChange = (store, emit, setCurrent) => {
+	const preCurrentNode = store.value.currentNode;
+	setCurrent();
+	const currentNode = store.value.currentNode;
+	if (preCurrentNode === currentNode) return;
+	emit("current-change", currentNode ? currentNode.data : null, currentNode);
+};
+//#endregion
+exports.NODE_KEY = NODE_KEY;
+exports.getNodeKey = getNodeKey;
+exports.handleCurrentChange = handleCurrentChange;
+exports.markNodeData = markNodeData;

package/lib/components/tree/style/css.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/base.css");require("vft/theme-style/vft-checkbox.css");require("vft/theme-style/vft-tree.css");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../base/style/css.cjs");
+require("../../checkbox/style/css.cjs");
+require("vft/theme-style/vft-tree.css");

package/lib/components/tree/style/index.cjs

@@ -1 +1,4 @@
-"use strict";require("vft/theme-style/src/base.scss");require("vft/theme-style/src/checkbox.scss");require("vft/theme-style/src/tree.scss");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../base/style/index.cjs");
+require("../../checkbox/style/index.cjs");
+require("vft/theme-style/src/tree.scss");

package/lib/components/tree/tree-node-content.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region ../../packages/components/tree/tree-node-content.vue
+var tree_node_content_default = require("./tree-node-content.vue_vue_type_script_lang.cjs").default;
+//#endregion
+exports.default = tree_node_content_default;

package/lib/components/tree/tree-node-content.vue_vue_type_script_lang.cjs

@@ -0,0 +1,33 @@
+const require_index = require("../../hooks/use-namespace/index.cjs");
+let vue = require("vue");
+//#region ../../packages/components/tree/tree-node-content.vue?vue&type=script&lang.ts
+var tree_node_content_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
+	name: "VftTreeNodeContent",
+	props: {
+		node: {
+			type: Object,
+			required: true
+		},
+		renderContent: Function
+	},
+	setup(props) {
+		const ns = require_index.useNamespace("tree");
+		const nodeInstance = (0, vue.inject)("NodeInstance");
+		const tree = (0, vue.inject)("RootTree");
+		return () => {
+			const node = props.node;
+			const { data, store } = node;
+			return props.renderContent ? props.renderContent(vue.h, {
+				_self: nodeInstance,
+				node,
+				data,
+				store
+			}) : tree.ctx.slots.default ? tree.ctx.slots.default({
+				node,
+				data
+			}) : (0, vue.h)("span", { class: ns.be("node", "label") }, [node.label]);
+		};
+	}
+});
+//#endregion
+exports.default = tree_node_content_vue_vue_type_script_lang_default;

package/lib/components/tree/tree-node.cjs

@@ -0,0 +1,118 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require__plugin_vue_export_helper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const require_tree_node_vue_vue_type_script_lang = require("./tree-node.vue_vue_type_script_lang.cjs");
+let vue = require("vue");
+//#region ../../packages/components/tree/tree-node.vue
+const _hoisted_1 = [
+	"aria-expanded",
+	"aria-disabled",
+	"aria-checked",
+	"draggable",
+	"data-key"
+];
+const _hoisted_2 = ["aria-expanded"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+	const _component_icon = (0, vue.resolveComponent)("icon");
+	const _component_tree_checkbox = (0, vue.resolveComponent)("tree-checkbox");
+	const _component_node_content = (0, vue.resolveComponent)("node-content");
+	const _component_tree_node = (0, vue.resolveComponent)("tree-node", true);
+	const _component_collapse_transition = (0, vue.resolveComponent)("collapse-transition");
+	return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+		ref: "node$",
+		class: (0, vue.normalizeClass)([
+			_ctx.ns.b("node"),
+			_ctx.ns.is("expanded", _ctx.expanded),
+			_ctx.ns.is("current", _ctx.node.isCurrent),
+			_ctx.ns.is("hidden", !_ctx.node.visible),
+			_ctx.ns.is("focusable", !_ctx.node.disabled),
+			_ctx.ns.is("checked", !_ctx.node.disabled && _ctx.node.checked),
+			_ctx.getNodeClass(_ctx.node)
+		]),
+		role: "treeitem",
+		tabindex: "-1",
+		"aria-expanded": _ctx.expanded,
+		"aria-disabled": _ctx.node.disabled,
+		"aria-checked": _ctx.node.checked,
+		draggable: _ctx.tree.props.draggable,
+		"data-key": _ctx.getNodeKey(_ctx.node),
+		onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"])),
+		onContextmenu: _cache[2] || (_cache[2] = (...args) => _ctx.handleContextMenu && _ctx.handleContextMenu(...args)),
+		onDragstart: _cache[3] || (_cache[3] = (0, vue.withModifiers)((...args) => _ctx.handleDragStart && _ctx.handleDragStart(...args), ["stop"])),
+		onDragover: _cache[4] || (_cache[4] = (0, vue.withModifiers)((...args) => _ctx.handleDragOver && _ctx.handleDragOver(...args), ["stop"])),
+		onDragend: _cache[5] || (_cache[5] = (0, vue.withModifiers)((...args) => _ctx.handleDragEnd && _ctx.handleDragEnd(...args), ["stop"])),
+		onDrop: _cache[6] || (_cache[6] = (0, vue.withModifiers)((...args) => _ctx.handleDrop && _ctx.handleDrop(...args), ["stop"]))
+	}, [(0, vue.createElementVNode)("div", {
+		class: (0, vue.normalizeClass)(_ctx.ns.be("node", "content")),
+		style: (0, vue.normalizeStyle)({ paddingLeft: `${(_ctx.node.level - 1) * _ctx.tree.props.indent}px` })
+	}, [
+		(0, vue.createVNode)(_component_icon, {
+			icon: _ctx.tree.props.icon || "icon-caret-right",
+			class: (0, vue.normalizeClass)([
+				_ctx.ns.be("node", "expand-icon"),
+				_ctx.ns.is("leaf", _ctx.node.isLeaf),
+				{ expanded: !_ctx.node.isLeaf && _ctx.expanded }
+			]),
+			onClick: (0, vue.withModifiers)(_ctx.handleExpandIconClick, ["stop"])
+		}, null, 8, [
+			"icon",
+			"class",
+			"onClick"
+		]),
+		_ctx.showCheckbox ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_tree_checkbox, {
+			key: 0,
+			"model-value": _ctx.node.checked,
+			indeterminate: _ctx.node.indeterminate,
+			disabled: !!_ctx.node.disabled,
+			onClick: _cache[0] || (_cache[0] = (0, vue.withModifiers)(() => {}, ["stop"])),
+			onChange: _ctx.handleCheckChange
+		}, null, 8, [
+			"model-value",
+			"indeterminate",
+			"disabled",
+			"onChange"
+		])) : (0, vue.createCommentVNode)("v-if", true),
+		_ctx.node.loading ? ((0, vue.openBlock)(), (0, vue.createBlock)(_component_icon, {
+			key: 1,
+			icon: "icon-loading",
+			rotate: "",
+			class: (0, vue.normalizeClass)([_ctx.ns.be("node", "loading-icon"), _ctx.ns.is("loading")])
+		}, null, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true),
+		(0, vue.createVNode)(_component_node_content, {
+			node: _ctx.node,
+			"render-content": _ctx.renderContent
+		}, null, 8, ["node", "render-content"])
+	], 6), (0, vue.createVNode)(_component_collapse_transition, null, {
+		default: (0, vue.withCtx)(() => [!_ctx.renderAfterExpand || _ctx.childNodeRendered ? (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+			key: 0,
+			class: (0, vue.normalizeClass)(_ctx.ns.be("node", "children")),
+			role: "group",
+			"aria-expanded": _ctx.expanded
+		}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(_ctx.node.childNodes, (child) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)(_component_tree_node, {
+				key: _ctx.getNodeKey(child),
+				"render-content": _ctx.renderContent,
+				"render-after-expand": _ctx.renderAfterExpand,
+				"show-checkbox": _ctx.showCheckbox,
+				node: child,
+				accordion: _ctx.accordion,
+				props: _ctx.props,
+				onNodeExpand: _ctx.handleChildNodeExpand
+			}, null, 8, [
+				"render-content",
+				"render-after-expand",
+				"show-checkbox",
+				"node",
+				"accordion",
+				"props",
+				"onNodeExpand"
+			]);
+		}), 128))], 10, _hoisted_2)), [[vue.vShow, _ctx.expanded]]) : (0, vue.createCommentVNode)("v-if", true)]),
+		_: 1
+	})], 42, _hoisted_1)), [[vue.vShow, _ctx.node.visible]]);
+}
+var tree_node_default = /* @__PURE__ */ require__plugin_vue_export_helper.default(require_tree_node_vue_vue_type_script_lang.default, [["render", _sfc_render]]);
+//#endregion
+exports.default = tree_node_default;

package/lib/components/tree/tree-node.vue_vue_type_script_lang.cjs

@@ -0,0 +1,182 @@
+const require_error = require("../../utils/error.cjs");
+const require_index = require("../../hooks/use-namespace/index.cjs");
+const require_index$1 = require("../icon/index.cjs");
+const require_index$2 = require("../checkbox/index.cjs");
+const require_index$3 = require("../collapse-transition/index.cjs");
+const require_util = require("./model/util.cjs");
+const require_node = require("./model/node.cjs");
+const require_useDragNode = require("./model/useDragNode.cjs");
+const require_useNodeExpandEventBroadcast = require("./model/useNodeExpandEventBroadcast.cjs");
+const require_tree_node_content = require("./tree-node-content.cjs");
+let _vft_utils = require("@vft/utils");
+let vue = require("vue");
+//#region ../../packages/components/tree/tree-node.vue?vue&type=script&lang.ts
+var tree_node_vue_vue_type_script_lang_default = (0, vue.defineComponent)({
+	name: "TreeNode",
+	components: {
+		CollapseTransition: require_index$3.VftCollapseTransition,
+		TreeCheckbox: require_index$2.VftCheckbox,
+		NodeContent: require_tree_node_content.default,
+		Icon: require_index$1.VftIcon
+	},
+	props: {
+		node: {
+			type: require_node.default,
+			default: () => ({})
+		},
+		props: {
+			type: Object,
+			default: () => ({})
+		},
+		accordion: Boolean,
+		renderContent: Function,
+		renderAfterExpand: Boolean,
+		showCheckbox: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["node-expand"],
+	setup(props, ctx) {
+		const ns = require_index.useNamespace("tree");
+		const { broadcastExpanded } = require_useNodeExpandEventBroadcast.useNodeExpandEventBroadcast(props);
+		const tree = (0, vue.inject)("RootTree");
+		const expanded = (0, vue.ref)(false);
+		const childNodeRendered = (0, vue.ref)(false);
+		const oldChecked = (0, vue.ref)(null);
+		const oldIndeterminate = (0, vue.ref)(null);
+		const node$ = (0, vue.ref)(null);
+		const dragEvents = (0, vue.inject)(require_useDragNode.dragEventsKey);
+		const instance = (0, vue.getCurrentInstance)();
+		(0, vue.provide)("NodeInstance", instance);
+		if (!tree) require_error.debugWarn("Tree", "Can not find node's tree.");
+		if (props.node.expanded) {
+			expanded.value = true;
+			childNodeRendered.value = true;
+		}
+		const childrenKey = tree.props.children || "children";
+		(0, vue.watch)(() => {
+			const children = props.node.data[childrenKey];
+			return children && [...children];
+		}, () => {
+			props.node.updateChildren();
+		});
+		(0, vue.watch)(() => props.node.indeterminate, (val) => {
+			handleSelectChange(props.node.checked, val);
+		});
+		(0, vue.watch)(() => props.node.checked, (val) => {
+			handleSelectChange(val, props.node.indeterminate);
+		});
+		(0, vue.watch)(() => props.node.expanded, (val) => {
+			(0, vue.nextTick)(() => expanded.value = val);
+			if (val) childNodeRendered.value = true;
+		});
+		const getNodeKey$1 = (node) => {
+			return require_util.getNodeKey(tree.props.nodeKey, node.data);
+		};
+		const getNodeClass = (node) => {
+			const nodeClassFunc = props.props.class;
+			if (!nodeClassFunc) return {};
+			let className;
+			if ((0, _vft_utils.isFunction)(nodeClassFunc)) {
+				const { data } = node;
+				className = nodeClassFunc(data, node);
+			} else className = nodeClassFunc;
+			if ((0, _vft_utils.isString)(className)) return { [className]: true };
+			else return className;
+		};
+		const handleSelectChange = (checked, indeterminate) => {
+			if (oldChecked.value !== checked || oldIndeterminate.value !== indeterminate) tree.ctx.emit("check-change", props.node.data, checked, indeterminate);
+			oldChecked.value = checked;
+			oldIndeterminate.value = indeterminate;
+		};
+		const handleClick = (e) => {
+			require_util.handleCurrentChange(tree.store, tree.ctx.emit, () => tree.store.value.setCurrentNode(props.node));
+			tree.currentNode.value = props.node;
+			if (tree.props.expandOnClickNode) handleExpandIconClick();
+			if (tree.props.checkOnClickNode && !props.node.disabled) handleCheckChange(null, { target: { checked: !props.node.checked } });
+			tree.ctx.emit("node-click", props.node.data, props.node, instance, e);
+		};
+		const handleContextMenu = (event) => {
+			if (tree.instance.vnode.props.onNodeContextmenu) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+			tree.ctx.emit("node-contextmenu", event, props.node.data, props.node, instance);
+		};
+		const handleExpandIconClick = () => {
+			if (props.node.isLeaf) return;
+			if (expanded.value) {
+				tree.ctx.emit("node-collapse", props.node.data, props.node, instance);
+				props.node.collapse();
+			} else {
+				props.node.expand();
+				ctx.emit("node-expand", props.node.data, props.node, instance);
+			}
+		};
+		const handleCheckChange = (value, ev) => {
+			props.node.setChecked(ev.target.checked, !tree.props.checkStrictly);
+			(0, vue.nextTick)(() => {
+				const store = tree.store.value;
+				tree.ctx.emit("check", props.node.data, {
+					checkedNodes: store.getCheckedNodes(),
+					checkedKeys: store.getCheckedKeys(),
+					halfCheckedNodes: store.getHalfCheckedNodes(),
+					halfCheckedKeys: store.getHalfCheckedKeys()
+				});
+			});
+		};
+		const handleChildNodeExpand = (nodeData, node, instance) => {
+			broadcastExpanded(node);
+			tree.ctx.emit("node-expand", nodeData, node, instance);
+		};
+		const handleDragStart = (event) => {
+			if (!tree.props.draggable) return;
+			dragEvents.treeNodeDragStart({
+				event,
+				treeNode: props
+			});
+		};
+		const handleDragOver = (event) => {
+			event.preventDefault();
+			if (!tree.props.draggable) return;
+			dragEvents.treeNodeDragOver({
+				event,
+				treeNode: {
+					$el: node$.value,
+					node: props.node
+				}
+			});
+		};
+		const handleDrop = (event) => {
+			event.preventDefault();
+		};
+		const handleDragEnd = (event) => {
+			if (!tree.props.draggable) return;
+			dragEvents.treeNodeDragEnd(event);
+		};
+		return {
+			ns,
+			node$,
+			tree,
+			expanded,
+			childNodeRendered,
+			oldChecked,
+			oldIndeterminate,
+			getNodeKey: getNodeKey$1,
+			getNodeClass,
+			handleSelectChange,
+			handleClick,
+			handleContextMenu,
+			handleExpandIconClick,
+			handleCheckChange,
+			handleChildNodeExpand,
+			handleDragStart,
+			handleDragOver,
+			handleDrop,
+			handleDragEnd
+		};
+	}
+});
+//#endregion
+exports.default = tree_node_vue_vue_type_script_lang_default;

package/lib/components/tree/tree.cjs

@@ -0,0 +1,8 @@
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+//#region ../../packages/components/tree/tree.vue
+var tree_default = require("./tree.vue_vue_type_script_setup_true_lang.cjs").default;
+//#endregion
+exports.default = tree_default;

package/lib/components/tree/tree.type.cjs

@@ -1 +1 @@
-"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });