antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/tree/style/index.js

@@ -0,0 +1,264 @@
+import { genFocusOutline, resetComponent } from "../../style/index.js";
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import collapse_default from "../../style/motion/collapse.js";
+import "../../style/motion/index.js";
+import { getStyle } from "../../checkbox/style/index.js";
+import { genDirectoryStyle } from "./directory.js";
+import { Keyframes, unit } from "@antdv-next/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, 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)" },
+		[`&-focused:not(:hover):not(${treeCls}-active-focused)`]: genFocusOutline(token),
+		[`${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: `1px solid ${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: titleHeight,
+					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(titleHeight).sub(token.controlInteractiveSize)).div(2).equal() },
+		[`${treeCls}-switcher`]: {
+			...getSwitchStyle(prefixCls, token),
+			"position": "relative",
+			"flex": "none",
+			"alignSelf": "stretch",
+			"width": titleHeight,
+			"textAlign": "center",
+			"cursor": "pointer",
+			"userSelect": "none",
+			"transition": `all ${token.motionDurationSlow}`,
+			"&-noop": { cursor: "unset" },
+			"&:before": {
+				pointerEvents: "none",
+				content: "\"\"",
+				width: titleHeight,
+				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(titleHeight).div(2).equal(),
+					bottom: token.calc(treeNodePadding).mul(-1).equal(),
+					marginInlineStart: -1,
+					borderInlineEnd: `1px solid ${token.colorBorder}`,
+					content: "\"\""
+				},
+				"&:after": {
+					position: "absolute",
+					width: token.calc(token.calc(titleHeight).div(2).equal()).mul(.8).equal(),
+					height: token.calc(titleHeight).div(2).equal(),
+					borderBottom: `1px solid ${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 ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`,
+			...getDropIndicatorStyle(prefixCls, token),
+			"&:hover": { backgroundColor: nodeHoverBg },
+			[`&${treeCls}-node-selected`]: {
+				color: token.nodeSelectedColor,
+				backgroundColor: nodeSelectedBg
+			},
+			[`${treeCls}-iconEle`]: {
+				"display": "inline-block",
+				"width": titleHeight,
+				"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(titleHeight).div(2).equal(),
+					bottom: token.calc(treeNodePadding).mul(-1).equal(),
+					borderInlineEnd: `1px solid ${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,
+		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),
+	collapse_default(token)
+], prepareComponentToken);
+
+//#endregion
+export { style_default as default, genTreeStyle, initComponentToken };

package/dist/tree/utils/dictUtil.js

@@ -0,0 +1,54 @@
+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 (startKey && startKey === endKey) return [startKey];
+	if (!startKey || !endKey) return [];
+	function matchKey(key) {
+		return key === startKey || key === endKey;
+	}
+	traverseNodesKey(treeData, (key) => {
+		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) 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.js

@@ -0,0 +1,33 @@
+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 + offset}px`,
+		[endPosition]: 0
+	};
+	switch (dropPosition) {
+		case -1:
+			style.top = `-3px`;
+			break;
+		case 1:
+			style.bottom = `-3px`;
+			break;
+		default:
+			style.bottom = `-3px`;
+			style[startPosition] = `${indent + offset}px`;
+			break;
+	}
+	return createVNode("div", {
+		"style": style,
+		"class": `${prefixCls}-drop-indicator`
+	}, null);
+}
+var dropIndicator_default = dropIndicatorRender;
+
+//#endregion
+export { dropIndicator_default as default };

package/dist/tree/utils/iconUtil.js

@@ -0,0 +1,72 @@
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { createVNode, defineComponent, isVNode } from "vue";
+import { CaretDownFilled, FileOutlined, LoadingOutlined, MinusSquareOutlined, PlusSquareOutlined } from "@antdv-next/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: 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,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		showLine: {
+			type: [Boolean, Object],
+			required: false
+		}
+	},
+	name: "SwitcherIconCom",
+	inheritAttrs: false
+});
+var iconUtil_default = SwitcherIconCom;
+
+//#endregion
+export { iconUtil_default as default };

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

@@ -0,0 +1,98 @@
+import { SizeType } from "../config-provider/SizeContext.js";
+import { VueNode } from "../_util/type.js";
+import { SemanticClassNames, SemanticClassNamesType, SemanticStyles, SemanticStylesType } from "../_util/hooks/useMergeSemantic.js";
+import "../_util/hooks/index.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 * as vue108 from "vue";
+import { App, CSSProperties, SlotsType } from "vue";
+import { DataNode, SHOW_ALL, SHOW_CHILD, SHOW_PARENT, TreeNode, TreeSelectProps } from "@v-c/tree-select";
+
+//#region src/tree-select/index.d.ts
+
+type SemanticName = 'root' | 'prefix' | 'input' | 'suffix' | 'content' | 'placeholder' | 'item' | 'itemContent' | 'itemRemove';
+type PopupSemantic = 'item' | 'itemTitle' | 'root';
+type TreeSelectClassNamesType = SemanticClassNamesType<TreeSelectProps$1, SemanticName> & {
+  popup?: SemanticClassNames<PopupSemantic>;
+};
+type TreeSelectStylesType = SemanticStylesType<TreeSelectProps$1, SemanticName> & {
+  popup?: SemanticStyles<PopupSemantic>;
+};
+interface BaseTreeSelectProps<ValueType = any, OptionType extends DataNode = DataNode> extends Omit<TreeSelectProps<ValueType, OptionType>, 'showTreeIcon' | 'treeMotion' | 'mode' | 'getInputElement' | 'backfill' | 'treeLine' | 'switcherIcon' | 'classNames' | 'styles' | 'style' | 'onSelect' | 'onTreeExpand' | 'onTreeLoad' | 'onChange' | 'onDeselect' | 'onPopupScroll' | 'onPopupVisibleChange' | 'onSearch'> {
+  size?: SizeType;
+  disabled?: boolean;
+  status?: InputStatus;
+  variant?: Variant;
+}
+interface TreeSelectProps$1<ValueType = any, OptionType extends DataNode = DataNode> extends BaseTreeSelectProps<ValueType, OptionType> {
+  styles?: TreeSelectStylesType;
+  classes?: TreeSelectClassNamesType;
+  suffixIcon?: VueNode;
+  size?: SizeType;
+  disabled?: boolean;
+  placement?: SelectCommonPlacement;
+  /** @deprecated Please use `classNames.popup.root` instead */
+  popupClassName?: string;
+  /** @deprecated Please use `classNames.popup.root` instead */
+  dropdownClassName?: string;
+  /** @deprecated Please use `popupRender` instead */
+  dropdownRender?: (menu: any) => any;
+  popupRender?: (menu: any) => any;
+  /** @deprecated Please use `styles.popup.root` instead */
+  dropdownStyle?: CSSProperties;
+  /** @deprecated Use `variant` instead. */
+  bordered?: boolean;
+  treeLine?: TreeProps['showLine'];
+  status?: InputStatus;
+  switcherIcon?: SwitcherIcon | TreeSelectProps<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;
+  /**
+   * @since 5.13.0
+   * @default "outlined"
+   */
+  variant?: Variant;
+}
+interface TreeSelectEmits {
+  'openChange': (open: boolean) => void;
+  'dropdownVisibleChange': (open: boolean) => void;
+  'select': NonNullable<TreeSelectProps['onSelect']>;
+  'treeExpand': NonNullable<TreeSelectProps['onTreeExpand']>;
+  'treeLoad': NonNullable<TreeSelectProps['onTreeLoad']>;
+  'change': NonNullable<TreeSelectProps['onChange']>;
+  'update:value': (value: any) => void;
+  'deselect': NonNullable<TreeSelectProps['onDeselect']>;
+  'popupScroll': NonNullable<TreeSelectProps['onPopupScroll']>;
+  'search': NonNullable<TreeSelectProps['onSearch']>;
+  [key: string]: (...args: any[]) => void;
+}
+interface TreeSelectSlots {
+  suffixIcon?: () => any;
+  tagRender?: (props: any) => any;
+  notFoundContent?: () => any;
+  switcherIcon?: () => any;
+  treeTitleRender?: (nodeData: DataNode) => any;
+}
+declare const InternalTreeSelect: vue108.DefineSetupFnComponent<TreeSelectProps$1<any, DataNode>, TreeSelectEmits, SlotsType<TreeSelectSlots>, TreeSelectProps$1<any, DataNode> & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue108.PublicProps>;
+declare const TreeSelect: typeof InternalTreeSelect & {
+  install: (app: App) => void;
+  TreeNode: typeof TreeNode;
+  SHOW_ALL: typeof SHOW_ALL;
+  SHOW_PARENT: typeof SHOW_PARENT;
+  SHOW_CHILD: typeof SHOW_CHILD;
+};
+declare const TreeSelectNode: vue108.DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any>, vue108.PublicProps>;
+//#endregion
+export { TreeSelect, TreeSelectEmits, TreeSelectNode, TreeSelectProps$1 as TreeSelectProps, TreeSelectSlots };