@zboson/ui 0.0.0-stage → 0.0.2

package/dist/tree/style/index.js

@@ -0,0 +1,279 @@
+import { genFocusOutline, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import genCollapseMotion from "../../style/motion/collapse.js";
+import { getStyle } from "../../checkbox/style/index.js";
+import { genDirectoryStyle } from "./directory.js";
+import { Keyframes, unit } from "@zboson/cssinjs";
+//#region src/tree/style/index.ts
+const treeNodeFX = new Keyframes("ant-tree-node-fx-do-not-use", {
+	"0%": { opacity: 0 },
+	"100%": { opacity: 1 }
+});
+function getSwitchStyle(prefixCls, token) {
+	return { [`.${prefixCls}-switcher-icon`]: {
+		display: "inline-block",
+		fontSize: 10,
+		verticalAlign: "baseline",
+		svg: { transition: `transform ${token.motionDurationSlow}` }
+	} };
+}
+function getDropIndicatorStyle(prefixCls, token) {
+	return { [`.${prefixCls}-drop-indicator`]: {
+		position: "absolute",
+		zIndex: 1,
+		height: 2,
+		backgroundColor: token.colorPrimary,
+		borderRadius: 1,
+		pointerEvents: "none",
+		"&:after": {
+			position: "absolute",
+			top: -3,
+			insetInlineStart: -6,
+			width: 8,
+			height: 8,
+			backgroundColor: "transparent",
+			border: `${unit(token.lineWidthBold)} solid ${token.colorPrimary}`,
+			borderRadius: "50%",
+			content: "\"\""
+		}
+	} };
+}
+function genBaseStyle(prefixCls, token) {
+	const { treeCls, treeNodeCls, treeNodePadding, titleHeight, indentSize, switcherSize, motionDurationMid, nodeSelectedBg, nodeHoverBg, colorTextQuaternary, controlItemBgActiveDisabled } = token;
+	return { [treeCls]: {
+		...resetComponent(token),
+		["--vc-virtual-list-scrollbar-bg"]: token.colorSplit,
+		background: token.colorBgContainer,
+		borderRadius: token.borderRadius,
+		transition: `background-color ${token.motionDurationSlow}`,
+		"&-rtl": { direction: "rtl" },
+		[`&${treeCls}-rtl ${treeCls}-switcher_close ${treeCls}-switcher-icon svg`]: { transform: "rotate(90deg)" },
+		[`${treeCls}-list`]: { "&:focus-visible": {
+			outline: "none",
+			[`${treeNodeCls}-active ${treeCls}-node-content-wrapper`]: { ...genFocusOutline(token) }
+		} },
+		[`${treeCls}-list-scrollbar`]: {
+			cursor: "pointer",
+			"&:hover": { backgroundColor: token.colorFillQuaternary }
+		},
+		[`${treeCls}-list-holder-inner`]: { alignItems: "flex-start" },
+		[`&${treeCls}-block-node`]: { [`${treeCls}-list-holder-inner`]: {
+			alignItems: "stretch",
+			[`${treeCls}-node-content-wrapper`]: { flex: "auto" },
+			[`${treeNodeCls}.dragging:after`]: {
+				position: "absolute",
+				inset: 0,
+				border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorPrimary}`,
+				opacity: 0,
+				animationName: treeNodeFX,
+				animationDuration: token.motionDurationSlow,
+				animationPlayState: "running",
+				animationFillMode: "forwards",
+				content: "\"\"",
+				pointerEvents: "none",
+				borderRadius: token.borderRadius
+			}
+		} },
+		[treeNodeCls]: {
+			display: "flex",
+			alignItems: "flex-start",
+			marginBottom: treeNodePadding,
+			lineHeight: unit(titleHeight),
+			position: "relative",
+			"&:before": {
+				content: "\"\"",
+				position: "absolute",
+				zIndex: 1,
+				insetInlineStart: 0,
+				width: "100%",
+				top: "100%",
+				height: treeNodePadding
+			},
+			[`&-disabled ${treeCls}-node-content-wrapper`]: {
+				color: token.colorTextDisabled,
+				cursor: "not-allowed",
+				"&:hover": { background: "transparent" }
+			},
+			[`${treeCls}-checkbox-disabled + ${treeCls}-node-selected,&${treeNodeCls}-disabled${treeNodeCls}-selected ${treeCls}-node-content-wrapper`]: { backgroundColor: controlItemBgActiveDisabled },
+			[`${treeCls}-checkbox-disabled`]: { pointerEvents: "unset" },
+			[`&:not(${treeNodeCls}-disabled)`]: { [`${treeCls}-node-content-wrapper`]: { "&:hover": { color: token.nodeHoverColor } } },
+			[`&-active ${treeCls}-node-content-wrapper`]: { background: token.controlItemBgHover },
+			[`&:not(${treeNodeCls}-disabled).filter-node ${treeCls}-title`]: {
+				color: token.colorPrimary,
+				fontWeight: token.fontWeightStrong
+			},
+			"&-draggable": {
+				cursor: "grab",
+				[`${treeCls}-draggable-icon`]: {
+					flexShrink: 0,
+					width: switcherSize,
+					textAlign: "center",
+					visibility: "visible",
+					color: colorTextQuaternary
+				},
+				[`&${treeNodeCls}-disabled ${treeCls}-draggable-icon`]: { visibility: "hidden" }
+			}
+		},
+		[`${treeCls}-indent`]: {
+			alignSelf: "stretch",
+			whiteSpace: "nowrap",
+			userSelect: "none",
+			"&-unit": {
+				display: "inline-block",
+				width: indentSize
+			}
+		},
+		[`${treeCls}-draggable-icon`]: { visibility: "hidden" },
+		[`${treeCls}-switcher, ${treeCls}-checkbox`]: { marginInlineEnd: token.calc(token.calc(switcherSize).sub(token.controlInteractiveSize)).div(2).equal() },
+		[`${treeCls}-checkbox`]: {
+			flexShrink: 0,
+			alignSelf: "flex-start",
+			marginBlockStart: token.calc(token.calc(titleHeight).sub(token.controlInteractiveSize)).div(2).equal()
+		},
+		[`${treeCls}-switcher`]: {
+			...getSwitchStyle(prefixCls, token),
+			position: "relative",
+			flex: "none",
+			alignSelf: "stretch",
+			width: switcherSize,
+			textAlign: "center",
+			cursor: "pointer",
+			userSelect: "none",
+			transition: `all ${token.motionDurationSlow}`,
+			"&-noop": { cursor: "unset" },
+			"&:before": {
+				pointerEvents: "none",
+				content: "\"\"",
+				width: switcherSize,
+				height: titleHeight,
+				position: "absolute",
+				left: {
+					_skip_check_: true,
+					value: 0
+				},
+				top: 0,
+				borderRadius: token.borderRadius,
+				transition: `all ${token.motionDurationSlow}`
+			},
+			[`&:not(${treeCls}-switcher-noop):hover:before`]: { backgroundColor: token.colorBgTextHover },
+			[`&_close ${treeCls}-switcher-icon svg`]: { transform: "rotate(-90deg)" },
+			"&-loading-icon": { color: token.colorPrimary },
+			"&-leaf-line": {
+				position: "relative",
+				zIndex: 1,
+				display: "inline-block",
+				width: "100%",
+				height: "100%",
+				"&:before": {
+					position: "absolute",
+					top: 0,
+					insetInlineEnd: token.calc(switcherSize).div(2).equal(),
+					bottom: token.calc(treeNodePadding).mul(-1).equal(),
+					marginInlineStart: token.calc(token.lineWidth).mul(-1).equal(),
+					borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+					content: "\"\""
+				},
+				"&:after": {
+					position: "absolute",
+					width: token.calc(token.calc(switcherSize).div(2).equal()).mul(.8).equal(),
+					height: token.calc(titleHeight).div(2).equal(),
+					borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+					content: "\"\""
+				}
+			}
+		},
+		[`${treeCls}-node-content-wrapper`]: {
+			position: "relative",
+			minHeight: titleHeight,
+			paddingBlock: 0,
+			paddingInline: token.paddingXS,
+			background: "transparent",
+			borderRadius: token.borderRadius,
+			cursor: "pointer",
+			transition: [
+				`all ${motionDurationMid}`,
+				"border 0s",
+				"line-height 0s",
+				"box-shadow 0s"
+			].join(", "),
+			...getDropIndicatorStyle(prefixCls, token),
+			"&:hover": { backgroundColor: nodeHoverBg },
+			[`&${treeCls}-node-selected`]: {
+				color: token.nodeSelectedColor,
+				backgroundColor: nodeSelectedBg
+			},
+			[`${treeCls}-iconEle`]: {
+				display: "inline-block",
+				width: switcherSize,
+				height: titleHeight,
+				textAlign: "center",
+				verticalAlign: "top",
+				"&:empty": { display: "none" }
+			}
+		},
+		[`${treeCls}-unselectable ${treeCls}-node-content-wrapper:hover`]: { backgroundColor: "transparent" },
+		[`${treeNodeCls}.drop-container > [draggable]`]: { boxShadow: `0 0 0 2px ${token.colorPrimary}` },
+		"&-show-line": {
+			[`${treeCls}-indent-unit`]: {
+				position: "relative",
+				height: "100%",
+				"&:before": {
+					position: "absolute",
+					top: 0,
+					insetInlineEnd: token.calc(switcherSize).div(2).equal(),
+					bottom: token.calc(treeNodePadding).mul(-1).equal(),
+					borderInlineEnd: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
+					content: "\"\""
+				},
+				"&-end:before": { display: "none" }
+			},
+			[`${treeCls}-switcher`]: {
+				background: "transparent",
+				"&-line-icon": { verticalAlign: "-0.15em" }
+			}
+		},
+		[`${treeNodeCls}-leaf-last ${treeCls}-switcher-leaf-line:before`]: {
+			top: "auto !important",
+			bottom: "auto !important",
+			height: `${unit(token.calc(titleHeight).div(2).equal())} !important`
+		}
+	} };
+}
+function genTreeStyle(prefixCls, token, enableDirectory = true) {
+	const treeCls = `.${prefixCls}`;
+	const treeToken = mergeToken(token, {
+		treeCls,
+		treeNodeCls: `${treeCls}-treenode`,
+		treeNodePadding: token.calc(token.paddingXS).div(2).equal()
+	});
+	return [genBaseStyle(prefixCls, treeToken), enableDirectory && genDirectoryStyle(treeToken)].filter(Boolean);
+}
+function initComponentToken(token) {
+	const { controlHeightSM, controlItemBgHover, controlItemBgActive } = token;
+	const titleHeight = controlHeightSM;
+	return {
+		titleHeight,
+		switcherSize: titleHeight,
+		indentSize: titleHeight,
+		nodeHoverBg: controlItemBgHover,
+		nodeHoverColor: token.colorText,
+		nodeSelectedBg: controlItemBgActive,
+		nodeSelectedColor: token.colorText
+	};
+}
+const prepareComponentToken = (token) => {
+	const { colorTextLightSolid, colorPrimary } = token;
+	return {
+		...initComponentToken(token),
+		directoryNodeSelectedColor: colorTextLightSolid,
+		directoryNodeSelectedBg: colorPrimary
+	};
+};
+var style_default = genStyleHooks("Tree", (token, { prefixCls }) => [
+	{ [token.componentCls]: getStyle(`${prefixCls}-checkbox`, token) },
+	genTreeStyle(prefixCls, token),
+	genCollapseMotion(token)
+], prepareComponentToken);
+//#endregion
+export { style_default as default, genBaseStyle, genTreeStyle, initComponentToken, prepareComponentToken };

package/dist/tree/utils/dictUtil.d.ts

@@ -0,0 +1,15 @@
+import { TreeProps as TreeProps$1 } from "../Tree.js";
+import { DataNode, Key } from "@v-c/tree";
+//#region src/tree/utils/dictUtil.d.ts
+type FieldNames = TreeProps$1['fieldNames'];
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+declare function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, fieldNames }: {
+  treeData: DataNode[];
+  expandedKeys: Key[];
+  startKey?: Key;
+  endKey?: Key;
+  fieldNames?: FieldNames;
+}): Key[];
+declare function convertDirectoryKeysToNodes(treeData: DataNode[], keys: Key[], fieldNames?: FieldNames): DataNode[];
+//#endregion
+export { calcRangeKeys, convertDirectoryKeysToNodes };

package/dist/tree/utils/dictUtil.js

@@ -0,0 +1,53 @@
+import { isNonNullable } from "../../_util/is.js";
+import { fillFieldNames } from "@v-c/tree";
+//#region src/tree/utils/dictUtil.ts
+const RECORD_NONE = 0;
+const RECORD_START = 1;
+const RECORD_END = 2;
+function traverseNodesKey(treeData, callback, fieldNames) {
+	const { key: fieldKey, children: fieldChildren } = fieldNames;
+	function processNode(dataNode) {
+		const key = dataNode[fieldKey];
+		const children = dataNode[fieldChildren];
+		if (callback(key, dataNode) !== false) traverseNodesKey(children || [], callback, fieldNames);
+	}
+	treeData.forEach(processNode);
+}
+/** 计算选中范围，只考虑expanded情况以优化性能 */
+function calcRangeKeys({ treeData, expandedKeys, startKey, endKey, fieldNames }) {
+	const keys = [];
+	let record = RECORD_NONE;
+	if (!isNonNullable(startKey) || !isNonNullable(endKey)) return [];
+	if (startKey === endKey) return [startKey];
+	function matchKey(key) {
+		return key === startKey || key === endKey;
+	}
+	traverseNodesKey(treeData, (key, node) => {
+		if (record === RECORD_END) return false;
+		if (matchKey(key)) {
+			keys.push(key);
+			if (record === RECORD_NONE) record = RECORD_START;
+			else if (record === RECORD_START) {
+				record = RECORD_END;
+				return false;
+			}
+		} else if (record === RECORD_START && !node.disabled && node.selectable !== false) keys.push(key);
+		return expandedKeys.includes(key);
+	}, fillFieldNames(fieldNames));
+	return keys;
+}
+function convertDirectoryKeysToNodes(treeData, keys, fieldNames) {
+	const restKeys = [...keys];
+	const nodes = [];
+	traverseNodesKey(treeData, (key, node) => {
+		const index = restKeys.indexOf(key);
+		if (index !== -1) {
+			nodes.push(node);
+			restKeys.splice(index, 1);
+		}
+		return !!restKeys.length;
+	}, fillFieldNames(fieldNames));
+	return nodes;
+}
+//#endregion
+export { calcRangeKeys, convertDirectoryKeysToNodes };

package/dist/tree/utils/dropIndicator.d.ts

@@ -0,0 +1,12 @@
+import { DirectionType } from "../../config-provider/context.js";
+//#region src/tree/utils/dropIndicator.d.ts
+declare const offset = 4;
+declare function dropIndicatorRender(props: {
+  dropPosition: -1 | 0 | 1;
+  dropLevelOffset: number;
+  indent: number;
+  prefixCls: string;
+  direction: DirectionType;
+}): import("vue/jsx-runtime").JSX.Element;
+//#endregion
+export { dropIndicatorRender as default, offset };

package/dist/tree/utils/dropIndicator.js

@@ -0,0 +1,30 @@
+import { createVNode } from "vue";
+//#region src/tree/utils/dropIndicator.tsx
+const offset = 4;
+function dropIndicatorRender(props) {
+	const { dropPosition, dropLevelOffset, prefixCls, indent, direction = "ltr" } = props;
+	const startPosition = direction === "ltr" ? "left" : "right";
+	const endPosition = direction === "ltr" ? "right" : "left";
+	const style = {
+		[startPosition]: `${-dropLevelOffset * indent + 4}px`,
+		[endPosition]: 0
+	};
+	switch (dropPosition) {
+		case -1:
+			style.top = `-3px`;
+			break;
+		case 1:
+			style.bottom = `-3px`;
+			break;
+		default:
+			style.bottom = `-3px`;
+			style[startPosition] = `${indent + 4}px`;
+			break;
+	}
+	return createVNode("div", {
+		"style": style,
+		"class": `${prefixCls}-drop-indicator`
+	}, null);
+}
+//#endregion
+export { dropIndicatorRender as default, offset };

package/dist/tree/utils/iconUtil.d.ts

@@ -0,0 +1,15 @@
+import { VueNode } from "../../_util/type.js";
+import { AntTreeNodeProps, SwitcherIcon, TreeLeafIcon } from "../Tree.js";
+//#region src/tree/utils/iconUtil.d.ts
+interface SwitcherIconProps {
+  prefixCls: string;
+  treeNodeProps: AntTreeNodeProps;
+  switcherIcon?: SwitcherIcon;
+  switcherLoadingIcon?: VueNode;
+  showLine?: boolean | {
+    showLeafIcon: boolean | TreeLeafIcon;
+  };
+}
+declare const SwitcherIconCom: import("vue").DefineSetupFnComponent<SwitcherIconProps, {}, {}, SwitcherIconProps & {}, import("vue").PublicProps>;
+//#endregion
+export { SwitcherIconCom as default };

package/dist/tree/utils/iconUtil.js

@@ -0,0 +1,71 @@
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { createVNode, defineComponent, isVNode } from "vue";
+import { CaretDownFilled, FileOutlined, LoadingOutlined, MinusSquareOutlined, PlusSquareOutlined } from "@zboson/icons";
+//#region src/tree/utils/iconUtil.tsx
+const SwitcherIconCom = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	return () => {
+		const { prefixCls, switcherIcon, treeNodeProps, showLine } = props;
+		const switcherLoadingIcon = getSlotPropsFnRun(slots, props, "switcherLoadingIcon");
+		const { isLeaf, expanded, loading } = treeNodeProps;
+		if (loading) {
+			if (isVNode(switcherLoadingIcon)) return switcherLoadingIcon;
+			return createVNode(LoadingOutlined, { "class": `${prefixCls}-switcher-loading-icon` }, null);
+		}
+		let showLeafIcon;
+		if (showLine && typeof showLine === "object") showLeafIcon = showLine.showLeafIcon;
+		if (isLeaf) {
+			if (!showLine) return null;
+			if (typeof showLeafIcon !== "boolean" && !!showLeafIcon) {
+				const leafIcon = typeof showLeafIcon === "function" ? showLeafIcon(treeNodeProps) : showLeafIcon;
+				const leafCls = `${prefixCls}-switcher-line-custom-icon`;
+				if (isVNode(showLeafIcon)) return createVNode(showLeafIcon, { class: leafCls });
+				return leafIcon;
+			}
+			return showLeafIcon ? createVNode(FileOutlined, { "class": `${prefixCls}-switcher-line-icon` }, null) : createVNode("span", { "class": `${prefixCls}-switcher-leaf-line` }, null);
+		}
+		const switcherCls = `${prefixCls}-switcher-icon`;
+		let switcher = typeof switcherIcon === "function" ? switcherIcon(treeNodeProps) : switcherIcon;
+		if (Array.isArray(switcher) && switcher.length === 1) switcher = switcher[0];
+		if (isVNode(switcher)) return createVNode(switcher, { class: [switcher.props?.classes, showLine ? `${prefixCls}-switcher-line-icon` : switcherCls] });
+		if (switcher !== void 0) return switcher;
+		if (showLine) return expanded ? createVNode(MinusSquareOutlined, { "class": `${prefixCls}-switcher-line-icon` }, null) : createVNode(PlusSquareOutlined, { "class": `${prefixCls}-switcher-line-icon` }, null);
+		return createVNode(CaretDownFilled, { "class": switcherCls }, null);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		treeNodeProps: {
+			type: Object,
+			required: true
+		},
+		switcherIcon: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		switcherLoadingIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		showLine: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		}
+	},
+	name: "SwitcherIconCom",
+	inheritAttrs: false
+});
+//#endregion
+export { SwitcherIconCom as default };

package/dist/tree-select/index.d.ts

@@ -0,0 +1,178 @@
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNamesType, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.js";
+import { SizeType } from "../config-provider/SizeContext.js";
+import { InputStatus } from "../_util/statusUtils.js";
+import { SelectCommonPlacement } from "../_util/motion.js";
+import { SwitcherIcon, TreeProps } from "../tree/Tree.js";
+import "../tree/index.js";
+import { Variant } from "../config-provider/context.js";
+import { App, CSSProperties, PublicProps, VNode, VNodeChild } from "vue";
+import { DataNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode, TreeSelectProps as TreeSelectProps$1 } from "@v-c/tree-select";
+//#region src/tree-select/index.d.ts
+type RawValue = string | number;
+interface LabeledValue {
+  key?: string;
+  value: RawValue;
+  label: VueNode;
+}
+type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[];
+type TreeSelectSemanticName = keyof TreeSelectSemanticClassNames & keyof TreeSelectSemanticStyles;
+interface TreeSelectSemanticClassNames {
+  root?: string;
+  prefix?: string;
+  input?: string;
+  suffix?: string;
+  content?: string;
+  placeholder?: string;
+  item?: string;
+  itemContent?: string;
+  itemRemove?: string;
+}
+interface TreeSelectSemanticStyles {
+  root?: CSSProperties;
+  prefix?: CSSProperties;
+  input?: CSSProperties;
+  suffix?: CSSProperties;
+  content?: CSSProperties;
+  placeholder?: CSSProperties;
+  item?: CSSProperties;
+  itemContent?: CSSProperties;
+  itemRemove?: CSSProperties;
+}
+type TreeSelectPopupSemanticName = keyof TreeSelectPopupSemanticClassNames & keyof TreeSelectPopupSemanticStyles;
+interface TreeSelectPopupSemanticClassNames {
+  root?: string;
+  item?: string;
+  itemTitle?: string;
+  itemSwitcher?: string;
+}
+interface TreeSelectPopupSemanticStyles {
+  root?: CSSProperties;
+  item?: CSSProperties;
+  itemTitle?: CSSProperties;
+  itemSwitcher?: CSSProperties;
+}
+type TreeSelectClassNamesType = SemanticClassNamesType<TreeSelectProps, TreeSelectSemanticClassNames> & {
+  popup?: TreeSelectPopupSemanticClassNames;
+};
+type TreeSelectStylesType = SemanticStylesType<TreeSelectProps, TreeSelectSemanticStyles> & {
+  popup?: TreeSelectPopupSemanticStyles;
+};
+interface BaseTreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<TreeSelectProps$1<ValueType, OptionType>, 'showTreeIcon' | 'treeMotion' | 'mode' | 'getInputElement' | 'backfill' | 'treeLine' | 'switcherIcon' | 'classNames' | 'styles' | 'style' | 'onSelect' | 'onTreeExpand' | 'onTreeLoad' | 'onChange' | 'onDeselect' | 'onPopupScroll' | 'onPopupVisibleChange' | 'onSearch' | 'popupRender'> {
+  size?: SizeType;
+  disabled?: boolean;
+  status?: InputStatus;
+  variant?: Variant;
+}
+interface TreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends BaseTreeSelectProps<ValueType, OptionType>, TreeSelectEmitsProps<ValueType, OptionType> {
+  styles?: TreeSelectStylesType;
+  classes?: TreeSelectClassNamesType;
+  suffixIcon?: VueNode;
+  size?: SizeType;
+  disabled?: boolean;
+  placement?: SelectCommonPlacement;
+  /** @deprecated Please use `classes.popup.root` instead */
+  popupClassName?: string;
+  /** @deprecated Please use `classes.popup.root` instead */
+  dropdownClassName?: string;
+  /** @deprecated Please use `popupRender` instead */
+  dropdownRender?: (menu: VNode) => VNodeChild;
+  popupRender?: (menu: VNode) => VNodeChild;
+  /** @deprecated Please use `styles.popup.root` instead */
+  dropdownStyle?: CSSProperties;
+  /** @deprecated Use `variant` instead. */
+  bordered?: boolean;
+  treeLine?: TreeProps['showLine'];
+  status?: InputStatus;
+  switcherIcon?: SwitcherIcon | TreeSelectProps$1<ValueType, OptionType>['switcherIcon'];
+  rootClass?: string;
+  /** @deprecated Please use `popupMatchSelectWidth` instead */
+  dropdownMatchSelectWidth?: boolean | number;
+  popupMatchSelectWidth?: boolean | number;
+  /**
+   * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+   *   default behavior, you can hide it by setting `suffixIcon` to null.
+   */
+  showArrow?: boolean;
+  /**
+   * @default "outlined"
+   */
+  variant?: Variant;
+}
+interface TreeSelectEmits<ValueType = any, OptionType extends DataNode = DataNode> {
+  'focus': (e: FocusEvent) => void;
+  'blur': (e: FocusEvent) => void;
+  'openChange': (open: boolean) => void;
+  'dropdownVisibleChange': (open: boolean) => void;
+  'select': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onSelect']>;
+  'treeExpand': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onTreeExpand']>;
+  'treeLoad': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onTreeLoad']>;
+  'change': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onChange']>;
+  'update:value': (value: any) => void;
+  'deselect': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onDeselect']>;
+  'popupScroll': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onPopupScroll']>;
+  'search': NonNullable<TreeSelectProps$1<ValueType, OptionType>['onSearch']>;
+}
+interface TreeSelectEmitsProps<ValueType = any, OptionType extends DataNode = DataNode> {
+  onFocus?: TreeSelectEmits['focus'];
+  onBlur?: TreeSelectEmits['blur'];
+  onOpenChange?: TreeSelectEmits['openChange'];
+  onDropdownVisibleChange?: TreeSelectEmits['dropdownVisibleChange'];
+  onSelect?: TreeSelectEmits<ValueType, OptionType>['select'];
+  onTreeExpand?: TreeSelectEmits<ValueType, OptionType>['treeExpand'];
+  onTreeLoad?: TreeSelectEmits<ValueType, OptionType>['treeLoad'];
+  onChange?: TreeSelectEmits<ValueType, OptionType>['change'];
+  'onUpdate:value'?: TreeSelectEmits['update:value'];
+  onDeselect?: TreeSelectEmits<ValueType, OptionType>['deselect'];
+  onPopupScroll?: TreeSelectEmits<ValueType, OptionType>['popupScroll'];
+  onSearch?: TreeSelectEmits<ValueType, OptionType>['search'];
+}
+interface TreeSelectSlots<OptionType extends DataNode = DataNode> {
+  suffixIcon?: () => any;
+  tagRender?: (props: any) => any;
+  notFoundContent?: () => any;
+  switcherIcon?: () => any;
+  treeTitleRender?: (nodeData: OptionType) => any;
+}
+interface TreeSelectInstance<ValueType = any, OptionType extends DataNode = DataNode> {
+  $props: TreeSelectProps<ValueType, OptionType> & PublicProps;
+  $emit: {
+    (event: 'focus', ...args: Parameters<TreeSelectEmits['focus']>): void;
+    (event: 'blur', ...args: Parameters<TreeSelectEmits['blur']>): void;
+    (event: 'openChange', ...args: Parameters<TreeSelectEmits['openChange']>): void;
+    (event: 'dropdownVisibleChange', ...args: Parameters<TreeSelectEmits['dropdownVisibleChange']>): void;
+    (event: 'select', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['select']>): void;
+    (event: 'treeExpand', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['treeExpand']>): void;
+    (event: 'treeLoad', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['treeLoad']>): void;
+    (event: 'change', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['change']>): void;
+    (event: 'update:value', ...args: Parameters<TreeSelectEmits['update:value']>): void;
+    (event: 'deselect', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['deselect']>): void;
+    (event: 'popupScroll', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['popupScroll']>): void;
+    (event: 'search', ...args: Parameters<TreeSelectEmits<ValueType, OptionType>['search']>): void;
+  };
+  $slots: TreeSelectSlots<OptionType>;
+  focus: () => void;
+  blur: () => void;
+  scrollTo: (arg: any) => void;
+}
+interface TreeSelectConstructor {
+  new <ValueType = any, OptionType extends DataNode = DataNode>(props: TreeSelectProps<ValueType, OptionType>): TreeSelectInstance<ValueType, OptionType>;
+  /**
+   * Non-generic fallback signature. TypeScript infers from the last overload,
+   * so this keeps render-function usage like `h(TreeSelect, props)` resolvable
+   * against Vue's `Constructor<P>` overload of `h` (see #634), while the
+   * generic signature above still drives template/Volar inference.
+   */
+  new (props: TreeSelectProps<any, any>): TreeSelectInstance<any, any>;
+  install: (app: App) => void;
+  TreeNode: typeof TreeNode;
+  SHOW_ALL: typeof SHOW_ALL;
+  SHOW_PARENT: typeof SHOW_PARENT;
+  SHOW_CHILD: typeof SHOW_CHILD;
+  _InternalPanelDoNotUseOrYouWillBeFired: any;
+}
+declare const TreeSelect: TreeSelectConstructor;
+declare const TreeSelectNode: import("vue").DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any>, PublicProps>;
+//#endregion
+export { LabeledValue, SelectValue, TreeSelectClassNamesType, TreeSelectConstructor, TreeSelectEmits, TreeSelectEmitsProps, TreeSelectNode, TreeSelectPopupSemanticClassNames, TreeSelectPopupSemanticName, TreeSelectPopupSemanticStyles, TreeSelectProps, TreeSelectSemanticClassNames, TreeSelectSemanticName, TreeSelectSemanticStyles, TreeSelectSlots, TreeSelectStylesType, TreeSelect as default };