antdv-next 0.0.111 → 1.0.0-alpha.1

package/dist/tree/Tree.js

@@ -0,0 +1,420 @@
+import { useComponentBaseConfig } from "../config-provider/context.js";
+import useToken from "../theme/useToken.js";
+import "../theme/internal.js";
+import { useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
+import motion_default from "../_util/motion.js";
+import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import style_default from "./style/index.js";
+import dropIndicator_default from "./utils/dropIndicator.js";
+import iconUtil_default from "./utils/iconUtil.js";
+import { computed, createVNode, defineComponent, mergeDefaults, mergeProps, shallowRef } from "vue";
+import { clsx } from "@v-c/util";
+import { getAttrStyleAndClass } from "@v-c/util/dist/props-util";
+import { HolderOutlined } from "@antdv-next/icons";
+import { omit } from "es-toolkit";
+import VcTree from "@v-c/tree";
+
+//#region src/tree/Tree.tsx
+const Tree = /* @__PURE__ */ defineComponent((props, { slots, emit, expose, attrs }) => {
+	const { virtual, prefixCls, rootPrefixCls, direction, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("tree", props);
+	const treeRef = shallowRef();
+	const { classes, styles, motion: customMotion } = toPropsRefs(props, "classes", "styles", "motion");
+	const contextDisabled = useDisabledContext();
+	const mergedDisabled = computed(() => props?.disabled ?? contextDisabled.value);
+	const motion = computed(() => customMotion.value ?? {
+		...motion_default(rootPrefixCls.value),
+		appear: false
+	});
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			disabled: mergedDisabled.value,
+			motion: motion.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const [, token] = useToken();
+	const itemHeight = computed(() => token.value.paddingXS / 2 + (token.value.Tree?.titleHeight || token.value.controlHeightSM));
+	expose({ scrollTo(...args) {
+		treeRef.value?.scrollTo?.(...args);
+	} });
+	return () => {
+		const { draggable, showLine, selectable, blockNode, showIcon, checkable, rootClass, tabindex } = props;
+		const { className, style, restAttrs } = getAttrStyleAndClass(attrs);
+		const draggableIcon = getSlotPropsFnRun(slots, props, "draggableIcon");
+		const draggableConfigFn = () => {
+			if (!draggable) return false;
+			let mergedDraggable = {};
+			switch (typeof draggable) {
+				case "function":
+					mergedDraggable.nodeDraggable = draggable;
+					break;
+				case "object":
+					mergedDraggable = { ...draggable };
+					break;
+				default: break;
+			}
+			if (mergedDraggable.icon !== false) mergedDraggable.icon = draggableIcon || mergedDraggable.icon || createVNode(HolderOutlined, null, null);
+			return mergedDraggable;
+		};
+		const draggableConfig = draggableConfigFn();
+		const switcherIcon = slots?.switcherIcon ?? props?.switcherIcon;
+		const switcherLoadingIcon = getSlotPropsFnRun(slots, props, "switcherLoadingIcon");
+		const renderSwitcherIcon = (nodeProps) => createVNode(iconUtil_default, {
+			"prefixCls": prefixCls.value,
+			"switcherIcon": switcherIcon,
+			"switcherLoadingIcon": switcherLoadingIcon,
+			"treeNodeProps": nodeProps,
+			"showLine": showLine
+		}, null);
+		const newProps = {
+			...omit(props, ["icon"]),
+			disabled: mergedDisabled.value,
+			showLine: Boolean(showLine),
+			dropIndicatorRender: dropIndicator_default
+		};
+		const onAttrs = {
+			onCheck(checked, info) {
+				emit("check", checked, info);
+				emit("update:checkedKeys", checked);
+			},
+			onClick(...args) {
+				emit("click", ...args);
+			},
+			onExpand(expandKeys, info) {
+				emit("expand", expandKeys, info);
+				emit("update:expandedKeys", expandKeys);
+			},
+			onBlur(e) {
+				emit("blur", e);
+			},
+			onLoad(loadKeys, info) {
+				emit("load", loadKeys, info);
+			},
+			onFocus(e) {
+				emit("focus", e);
+			},
+			onActiveChange(key) {
+				emit("activeChange", key);
+				emit("update:activeKey", key);
+			},
+			onDrop(info) {
+				emit("drop", info);
+			},
+			onDragEnd(info) {
+				emit("dragend", info);
+			},
+			onDragEnter(info) {
+				emit("dragenter", info);
+			},
+			onDragLeave(info) {
+				emit("dragleave", info);
+			},
+			onDragOver(info) {
+				emit("dragover", info);
+			},
+			onDoubleClick(e) {
+				emit("doubleClick", e);
+				emit("dblclick", e);
+			},
+			onContextMenu(e) {
+				emit("contextmenu", e);
+			},
+			onKeyDown(e) {
+				emit("keydown", e);
+			},
+			onScroll(e) {
+				emit("scroll", e);
+			},
+			onRightClick(info) {
+				emit("rightClick", info);
+			},
+			onSelect(keys, info) {
+				emit("select", keys, info);
+				emit("update:selectedKeys", keys);
+			},
+			onDragStart(info) {
+				emit("dragstart", info);
+			},
+			onMouseEnter(e) {
+				emit("mouseenter", e);
+			},
+			onMouseLeave(e) {
+				emit("mouseleave", e);
+			}
+		};
+		const icon = slots?.icon ?? props?.icon;
+		const titleRender = slots?.titleRender ?? props?.titleRender;
+		return createVNode(VcTree, mergeProps(restAttrs, { "ref": treeRef }, newProps, {
+			"virtual": props?.virtual ?? virtual.value,
+			"itemHeight": props?.itemHeight ?? itemHeight.value
+		}, onAttrs, {
+			"icon": icon,
+			"titleRender": titleRender,
+			"motion": motion.value,
+			"prefixCls": prefixCls.value,
+			"className": clsx({
+				[`${prefixCls.value}-icon-hide`]: !showIcon,
+				[`${prefixCls.value}-block-node`]: blockNode,
+				[`${prefixCls.value}-unselectable`]: !selectable,
+				[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+				[`${prefixCls.value}-disabled`]: mergedDisabled.value
+			}, contextClassName.value, className, hashId.value, cssVarCls.value),
+			"tabIndex": tabindex,
+			"style": {
+				...contextStyle.value,
+				...style
+			},
+			"rootClassName": clsx(mergedClassNames.value?.root, rootClass),
+			"rootStyle": mergedStyles.value?.root,
+			"classNames": mergedClassNames.value,
+			"styles": mergedStyles.value,
+			"direction": direction.value,
+			"checkable": checkable ? createVNode("span", { "class": `${prefixCls.value}-checkbox-inner` }, null) : checkable,
+			"selectable": selectable,
+			"switcherIcon": renderSwitcherIcon,
+			"draggable": draggableConfig
+		}), { default: slots?.default });
+	};
+}, {
+	emits: [
+		"click",
+		"check",
+		"expand",
+		"select",
+		"blur",
+		"focus",
+		"rightClick",
+		"dblclick",
+		"doubleClick",
+		"contextmenu",
+		"dragstart",
+		"dragenter",
+		"dragover",
+		"dragleave",
+		"drop",
+		"dragend",
+		"load",
+		"mouseleave",
+		"mouseenter",
+		"scroll",
+		"activeChange",
+		"update:expandedKeys",
+		"update:checkedKeys",
+		"update:selectedKeys",
+		"update:activeKey"
+	],
+	props: /* @__PURE__ */ mergeDefaults({
+		rootClass: {
+			type: String,
+			required: false
+		},
+		showLine: {
+			type: [Boolean, Object],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		multiple: {
+			type: Boolean,
+			required: false
+		},
+		autoExpandParent: {
+			type: Boolean,
+			required: false
+		},
+		checkStrictly: {
+			type: Boolean,
+			required: false
+		},
+		checkable: {
+			type: Boolean,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandAll: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandParent: {
+			type: Boolean,
+			required: false
+		},
+		defaultExpandedKeys: {
+			type: Array,
+			required: false
+		},
+		expandedKeys: {
+			type: Array,
+			required: false
+		},
+		checkedKeys: {
+			type: [Array, Object],
+			required: false
+		},
+		defaultCheckedKeys: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		defaultSelectedKeys: {
+			type: Array,
+			required: false
+		},
+		selectable: {
+			type: Boolean,
+			required: false
+		},
+		filterAntTreeNode: {
+			type: Function,
+			required: false
+		},
+		loadedKeys: {
+			type: Array,
+			required: false
+		},
+		draggable: {
+			type: [
+				Function,
+				Boolean,
+				Object
+			],
+			required: false
+		},
+		showIcon: {
+			type: Boolean,
+			required: false
+		},
+		icon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		switcherIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		switcherLoadingIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		blockNode: {
+			type: Boolean,
+			required: false
+		},
+		tabindex: {
+			type: Number,
+			required: false
+		},
+		focusable: {
+			type: Boolean,
+			required: false
+		},
+		activeKey: {
+			type: [
+				String,
+				Number,
+				null
+			],
+			required: false
+		},
+		treeData: {
+			type: Array,
+			required: false
+		},
+		fieldNames: {
+			type: Object,
+			required: false
+		},
+		expandAction: {
+			type: [Boolean, String],
+			required: false
+		},
+		allowDrop: {
+			type: Function,
+			required: false
+		},
+		titleRender: {
+			type: Function,
+			required: false
+		},
+		dropIndicatorRender: {
+			type: Function,
+			required: false
+		},
+		loadData: {
+			type: Function,
+			required: false
+		},
+		filterTreeNode: {
+			type: Function,
+			required: false
+		},
+		motion: {
+			type: Object,
+			required: false
+		},
+		height: {
+			type: Number,
+			required: false
+		},
+		itemHeight: {
+			type: Number,
+			required: false
+		},
+		scrollWidth: {
+			type: Number,
+			required: false
+		},
+		itemScrollOffset: {
+			type: Number,
+			required: false
+		},
+		virtual: {
+			type: Boolean,
+			required: false
+		},
+		rootStyle: {
+			type: Object,
+			required: false
+		}
+	}, {
+		showIcon: false,
+		blockNode: false,
+		checkable: false,
+		selectable: true
+	}),
+	name: "ATree",
+	inheritAttrs: false
+});
+var Tree_default = Tree;
+
+//#endregion
+export { Tree_default as default };

package/dist/tree/index.d.ts

@@ -0,0 +1,12 @@
+import { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, Tree, TreeEmits, TreeProps as TreeProps$1, TreeSlots } from "./Tree.js";
+import { DirectoryTree, DirectoryTreeEmits, DirectoryTreeProps, DirectoryTreeSlots, ExpandAction } from "./DirectoryTree.js";
+import { BasicDataNode as BasicDataNode$1, DataNode as DataNode$1, TreeNode } from "@v-c/tree";
+
+//#region src/tree/index.d.ts
+
+declare const Tree$1: typeof Tree & {
+  DirectoryTree: typeof DirectoryTree;
+  TreeNode: typeof TreeNode;
+};
+//#endregion
+export { type BasicDataNode$1 as BasicDataNode, type DataNode$1 as DataNode, Tree$1 as Tree };

package/dist/tree/index.js

@@ -0,0 +1,17 @@
+import Tree_default from "./Tree.js";
+import DirectoryTree_default from "./DirectoryTree.js";
+import { TreeNode } from "@v-c/tree";
+
+//#region src/tree/index.tsx
+const Tree = Tree_default;
+Tree.DirectoryTree = DirectoryTree_default;
+Tree.TreeNode = TreeNode;
+Tree.install = (app) => {
+	app.component(Tree.name, Tree);
+	app.component(DirectoryTree_default.name, DirectoryTree_default);
+	app.component("ATreeOption", TreeNode);
+};
+var tree_default = Tree;
+
+//#endregion
+export { tree_default as default };

package/dist/tree/style/directory.js

@@ -0,0 +1,34 @@
+//#region src/tree/style/directory.ts
+function genDirectoryStyle({ treeCls, treeNodeCls, directoryNodeSelectedBg, directoryNodeSelectedColor, motionDurationMid, borderRadius, controlItemBgHover }) {
+	return { [`${treeCls}${treeCls}-directory ${treeNodeCls}`]: {
+		[`${treeCls}-node-content-wrapper`]: {
+			"position": "static",
+			[`&:has(${treeCls}-drop-indicator)`]: { position: "relative" },
+			[`> *:not(${treeCls}-drop-indicator)`]: { position: "relative" },
+			"&:hover": { background: "transparent" },
+			"&:before": {
+				position: "absolute",
+				inset: 0,
+				transition: `background-color ${motionDurationMid}`,
+				content: "\"\"",
+				borderRadius
+			},
+			"&:hover:before": { background: controlItemBgHover }
+		},
+		[`${treeCls}-switcher, ${treeCls}-checkbox, ${treeCls}-draggable-icon`]: { zIndex: 1 },
+		"&-selected": {
+			background: directoryNodeSelectedBg,
+			borderRadius,
+			[`${treeCls}-switcher, ${treeCls}-draggable-icon`]: { color: directoryNodeSelectedColor },
+			[`${treeCls}-node-content-wrapper`]: {
+				"color": directoryNodeSelectedColor,
+				"background": "transparent",
+				"&, &:hover": { color: directoryNodeSelectedColor },
+				"&:before, &:hover:before": { background: directoryNodeSelectedBg }
+			}
+		}
+	} };
+}
+
+//#endregion
+export { genDirectoryStyle };

package/dist/tree/style/index.d.ts

@@ -0,0 +1,51 @@
+import "../../theme/internal.js";
+import "vue";
+import { CSSObject } from "@antdv-next/cssinjs";
+
+//#region src/tree/style/index.d.ts
+interface TreeSharedToken {
+  /**
+   * @desc 节点标题高度
+   * @descEN Node title height
+   */
+  titleHeight: number;
+  /**
+   * @desc 缩进宽度
+   * @descEN Indent width of tree
+   */
+  indentSize?: number;
+  /**
+   * @desc 节点悬浮态背景色
+   * @descEN Background color of hovered node
+   */
+  nodeHoverBg: string;
+  /**
+   * @desc 节点悬浮态态文字颜色
+   * @descEN Text color of hovered node
+   */
+  nodeHoverColor: string;
+  /**
+   * @desc 节点选中态背景色
+   * @descEN Background color of selected node
+   */
+  nodeSelectedBg: string;
+  /**
+   * @desc 节点选中态文字颜色
+   * @descEN Text color of selected node
+   */
+  nodeSelectedColor: string;
+}
+interface ComponentToken extends TreeSharedToken {
+  /**
+   * @desc 目录树节点选中文字颜色
+   * @descEN Text color of selected directory node
+   */
+  directoryNodeSelectedColor: string;
+  /**
+   * @desc 目录树节点选中背景色
+   * @descEN Background color of selected directory node
+   */
+  directoryNodeSelectedBg: string;
+}
+//#endregion
+export { ComponentToken, TreeSharedToken };