antdv-next 0.0.0 → 1.0.0-alpha.1

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

@@ -0,0 +1,8 @@
+import { TreeSharedToken } from "../../tree/style/index.js";
+import "../../theme/internal.js";
+import { Ref } from "vue";
+
+//#region src/tree-select/style/index.d.ts
+interface ComponentToken extends TreeSharedToken {}
+//#endregion
+export { ComponentToken };

package/dist/tree-select/style/index.js

@@ -0,0 +1,35 @@
+import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
+import { mergeToken } from "../../theme/internal.js";
+import { getStyle } from "../../checkbox/style/index.js";
+import { genTreeStyle, initComponentToken } from "../../tree/style/index.js";
+import { unit } from "@antdv-next/cssinjs";
+
+//#region src/tree-select/style/index.ts
+const genBaseStyle = (token) => {
+	const { componentCls, treePrefixCls, colorBgElevated } = token;
+	const treeCls = `.${treePrefixCls}`;
+	return [{ [`${componentCls}-dropdown`]: [
+		{ padding: `${unit(token.paddingXS)} ${unit(token.calc(token.paddingXS).div(2).equal())}` },
+		genTreeStyle(treePrefixCls, mergeToken(token, { colorBgContainer: colorBgElevated }), false),
+		{ [treeCls]: {
+			borderRadius: 0,
+			[`${treeCls}-list-holder-inner`]: {
+				alignItems: "stretch",
+				[`${treeCls}-treenode`]: { [`${treeCls}-node-content-wrapper`]: { flex: "auto" } }
+			}
+		} },
+		getStyle(`${treePrefixCls}-checkbox`, token),
+		{ "&-rtl": {
+			direction: "rtl",
+			[`${treeCls}-switcher${treeCls}-switcher_close`]: { [`${treeCls}-switcher-icon svg`]: { transform: "rotate(90deg)" } }
+		} }
+	] }];
+};
+function useTreeSelectStyle(prefixCls, treePrefixCls, rootCls) {
+	return genStyleHooks("TreeSelect", (token) => {
+		return genBaseStyle(mergeToken(token, { treePrefixCls: treePrefixCls.value }));
+	}, initComponentToken, { resetFont: false })(prefixCls, rootCls);
+}
+
+//#endregion
+export { useTreeSelectStyle as default };

package/dist/typography/Base/CopyBtn.js

@@ -0,0 +1,108 @@
+import tooltip_default from "../../tooltip/index.js";
+import { getNode, toList } from "./util.js";
+import { createVNode, defineComponent } from "vue";
+import { classNames } from "@v-c/util";
+import { CheckOutlined, CopyOutlined, LoadingOutlined } from "@antdv-next/icons";
+
+//#region src/typography/Base/CopyBtn.tsx
+const CopyBtn = /* @__PURE__ */ defineComponent((props, { emit }) => {
+	const handleCopy = (e) => {
+		emit("copy", e);
+	};
+	return () => {
+		const tooltipNodes = toList(props.tooltips);
+		const iconNodes = toList(props.icon);
+		const { copied: copiedText, copy: copyText } = props.locale ?? {};
+		const systemStr = props.copied ? copiedText : copyText;
+		const copyTitle = getNode(tooltipNodes[props.copied ? 1 : 0], systemStr);
+		const ariaLabel = typeof copyTitle === "string" ? copyTitle : systemStr;
+		return createVNode(tooltip_default, { "title": copyTitle }, { default: () => [createVNode("button", {
+			"type": "button",
+			"class": classNames(`${props.prefixCls}-copy`, {
+				[`${props.prefixCls}-copy-success`]: props.copied,
+				[`${props.prefixCls}-copy-icon-only`]: props.iconOnly
+			}, props.className),
+			"onClick": handleCopy,
+			"aria-label": ariaLabel,
+			"tabindex": props.tabIndex,
+			"style": props.style
+		}, [props.copied ? getNode(iconNodes[1], createVNode(CheckOutlined, null, null), true) : getNode(iconNodes[0], props.loading ? createVNode(LoadingOutlined, null, null) : createVNode(CopyOutlined, null, null), true)])] });
+	};
+}, {
+	emits: ["copy"],
+	props: {
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		copied: {
+			type: Boolean,
+			required: true
+		},
+		locale: {
+			type: Object,
+			required: true
+		},
+		iconOnly: {
+			type: Boolean,
+			required: true
+		},
+		loading: {
+			type: Boolean,
+			required: true
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		text: {
+			type: [String, Function],
+			required: false
+		},
+		icon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object,
+				Array
+			],
+			required: false
+		},
+		tooltips: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object,
+				Array
+			],
+			required: false
+		},
+		format: {
+			type: String,
+			required: false
+		},
+		tabIndex: {
+			type: Number,
+			required: false
+		}
+	},
+	name: "TypographyCopyBtn",
+	inheritAttrs: false
+});
+CopyBtn.install = (app) => {
+	app.component(CopyBtn.name, CopyBtn);
+};
+var CopyBtn_default = CopyBtn;
+
+//#endregion
+export { CopyBtn_default as default };

package/dist/typography/Base/Ellipsis.js

@@ -0,0 +1,240 @@
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+import { getTextNodeArr } from "../../_util/vueNode.js";
+import toList_default from "../../_util/toList.js";
+import { isValidText } from "./util.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, nextTick, shallowRef, watch, watchEffect } from "vue";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+
+//#region src/typography/Base/Ellipsis.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const MeasureText = /* @__PURE__ */ defineComponent({
+	props: { style: {
+		type: Object,
+		required: false
+	} },
+	name: "TypographyMeasureText",
+	inheritAttrs: false,
+	setup(props, { slots, expose }) {
+		const spanRef = shallowRef();
+		expose({
+			isExceed: () => {
+				const span = spanRef.value;
+				return span.scrollHeight > span.clientHeight;
+			},
+			getHeight: () => spanRef.value?.clientHeight || 0
+		});
+		return () => createVNode("span", {
+			"aria-hidden": true,
+			"ref": spanRef,
+			"style": {
+				position: "fixed",
+				display: "block",
+				left: 0,
+				top: 0,
+				pointerEvents: "none",
+				backgroundColor: "rgba(255, 0, 0, 0.65)",
+				...props.style
+			}
+		}, [slots.default?.()]);
+	}
+});
+function getNodesLen(nodeList) {
+	return nodeList.reduce((totalLen, node) => totalLen + (isValidText(node) ? String(node).length : 1), 0);
+}
+function sliceNodes(nodeList, len) {
+	let currLen = 0;
+	const currentNodeList = [];
+	for (let i = 0; i < nodeList.length; i += 1) {
+		if (currLen === len) return currentNodeList;
+		const node = nodeList[i];
+		const nodeLen = isValidText(node) ? String(node).length : 1;
+		const nextLen = currLen + nodeLen;
+		if (nextLen > len) {
+			const restLen = len - currLen;
+			currentNodeList.push(String(node).slice(0, restLen));
+			return currentNodeList;
+		}
+		currentNodeList.push(node);
+		currLen = nextLen;
+	}
+	return nodeList;
+}
+const STATUS_MEASURE_NONE = 0;
+const STATUS_MEASURE_PREPARE = 1;
+const STATUS_MEASURE_START = 2;
+const STATUS_MEASURE_NEED_ELLIPSIS = 3;
+const STATUS_MEASURE_NO_NEED_ELLIPSIS = 4;
+const lineClipStyle = {
+	display: "-webkit-box",
+	overflow: "hidden",
+	WebkitBoxOrient: "vertical"
+};
+const Ellipsis = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const nodeList = computed(() => getTextNodeArr(filterEmpty(toList_default(getSlotPropsFnRun({}, props, "text"), true))));
+	const nodeLen = computed(() => getNodesLen(nodeList.value));
+	const ellipsisCutIndex = shallowRef(null);
+	const cutMidRef = shallowRef();
+	const measureWhiteSpaceRef = shallowRef();
+	const needEllipsisRef = shallowRef();
+	const descRowsEllipsisRef = shallowRef();
+	const symbolRowEllipsisRef = shallowRef();
+	const canEllipsis = shallowRef(false);
+	const needEllipsis = shallowRef(STATUS_MEASURE_NONE);
+	const ellipsisHeight = shallowRef(0);
+	const parentWhiteSpace = shallowRef(null);
+	watch([
+		() => props.enableMeasure,
+		() => props.width,
+		nodeLen,
+		() => props.rows
+	], ([enableMeasure, width, len, rows]) => {
+		if (enableMeasure && width && len && rows) needEllipsis.value = STATUS_MEASURE_PREPARE;
+		else needEllipsis.value = STATUS_MEASURE_NONE;
+	}, { immediate: true });
+	watch(needEllipsis, async (status) => {
+		await nextTick();
+		if (status === STATUS_MEASURE_PREPARE) {
+			needEllipsis.value = STATUS_MEASURE_START;
+			parentWhiteSpace.value = measureWhiteSpaceRef.value ? getComputedStyle(measureWhiteSpaceRef.value).whiteSpace : null;
+		} else if (status === STATUS_MEASURE_START) {
+			const isOverflow = !!needEllipsisRef.value?.isExceed();
+			needEllipsis.value = isOverflow ? STATUS_MEASURE_NEED_ELLIPSIS : STATUS_MEASURE_NO_NEED_ELLIPSIS;
+			ellipsisCutIndex.value = isOverflow ? [0, nodeLen.value] : null;
+			canEllipsis.value = isOverflow;
+			const baseRowsEllipsisHeight = needEllipsisRef.value?.getHeight?.() || 0;
+			const descRowsEllipsisHeight = props.rows === 1 ? 0 : descRowsEllipsisRef.value?.getHeight?.() || 0;
+			const symbolRowEllipsisHeight = symbolRowEllipsisRef.value?.getHeight?.() || 0;
+			ellipsisHeight.value = Math.max(baseRowsEllipsisHeight, descRowsEllipsisHeight + symbolRowEllipsisHeight) + 1;
+			props.onEllipsis?.(isOverflow);
+		}
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	const cutMidIndex = shallowRef(0);
+	watchEffect(() => {
+		const range = ellipsisCutIndex.value;
+		if (range) cutMidIndex.value = Math.ceil((range[0] + range[1]) / 2);
+	});
+	watch(ellipsisCutIndex, async () => {
+		await nextTick();
+		const [minIndex, maxIndex] = ellipsisCutIndex.value || [0, 0];
+		if (minIndex !== maxIndex) {
+			const isOverflow = (cutMidRef.value?.getHeight() || 0) > ellipsisHeight.value;
+			let targetMidIndex = cutMidIndex.value;
+			if (maxIndex - minIndex === 1) targetMidIndex = isOverflow ? minIndex : maxIndex;
+			ellipsisCutIndex.value = isOverflow ? [minIndex, targetMidIndex] : [targetMidIndex, maxIndex];
+		}
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	return () => {
+		const fullContent = slots?.default?.(nodeList.value, false);
+		const finalContentFn = () => {
+			if (!props.enableMeasure) return slots?.default?.(nodeList.value, false);
+			if (needEllipsis.value !== STATUS_MEASURE_NEED_ELLIPSIS || !ellipsisCutIndex.value || ellipsisCutIndex.value[0] !== ellipsisCutIndex.value[1]) {
+				const content = slots?.default?.(nodeList.value, false);
+				if ([STATUS_MEASURE_NO_NEED_ELLIPSIS, STATUS_MEASURE_NONE].includes(needEllipsis.value)) return content;
+				return createVNode("span", { "style": {
+					...lineClipStyle,
+					WebkitLineClamp: props.rows
+				} }, [content]);
+			}
+			return slots?.default?.(props.expanded ? nodeList.value : sliceNodes(nodeList.value, ellipsisCutIndex.value[0]), canEllipsis.value);
+		};
+		const finalContent = finalContentFn();
+		const measureStyle = {
+			width: `${props.width}px`,
+			margin: 0,
+			padding: 0,
+			whiteSpace: parentWhiteSpace.value === "nowrap" ? "normal" : "inherit"
+		};
+		return createVNode(Fragment, null, [
+			finalContent,
+			needEllipsis.value === STATUS_MEASURE_START && createVNode(Fragment, null, [
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: props.rows
+					},
+					"ref": needEllipsisRef
+				}, _isSlot(fullContent) ? fullContent : { default: () => [fullContent] }),
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: props.rows - 1
+					},
+					"ref": descRowsEllipsisRef
+				}, _isSlot(fullContent) ? fullContent : { default: () => [fullContent] }),
+				createVNode(MeasureText, {
+					"style": {
+						...measureStyle,
+						...lineClipStyle,
+						WebkitLineClamp: 1
+					},
+					"ref": symbolRowEllipsisRef
+				}, { default: () => [slots?.default?.([], true)] })
+			]),
+			needEllipsis.value === STATUS_MEASURE_NEED_ELLIPSIS && ellipsisCutIndex.value && ellipsisCutIndex.value[0] !== ellipsisCutIndex.value[1] && createVNode(MeasureText, {
+				"style": {
+					...measureStyle,
+					top: `400px`
+				},
+				"ref": cutMidRef
+			}, { default: () => [slots?.default?.(sliceNodes(nodeList.value, cutMidIndex.value), true)] }),
+			needEllipsis.value === STATUS_MEASURE_PREPARE && createVNode("span", {
+				"style": { whiteSpace: "inherit" },
+				"ref": measureWhiteSpaceRef
+			}, null)
+		]);
+	};
+}, {
+	props: {
+		enableMeasure: {
+			type: Boolean,
+			required: false
+		},
+		text: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		width: {
+			type: Number,
+			required: true
+		},
+		rows: {
+			type: Number,
+			required: true
+		},
+		onEllipsis: {
+			type: Function,
+			required: true
+		},
+		expanded: {
+			type: Boolean,
+			required: true
+		},
+		miscDeps: {
+			type: Array,
+			required: true
+		}
+	},
+	name: "TypographyEllipsis",
+	inheritAttrs: false
+});
+var Ellipsis_default = Ellipsis;
+
+//#endregion
+export { Ellipsis_default as default };

package/dist/typography/Base/EllipsisTooltip.js

@@ -0,0 +1,32 @@
+import tooltip_default from "../../tooltip/index.js";
+import { createVNode, defineComponent, mergeProps } from "vue";
+
+//#region src/typography/Base/EllipsisTooltip.tsx
+const EllipsisTooltip = /* @__PURE__ */ defineComponent({
+	props: {
+		tooltipProps: {
+			type: Object,
+			required: false
+		},
+		enableEllipsis: {
+			type: Boolean,
+			required: true
+		},
+		isEllipsis: {
+			type: Boolean,
+			required: false
+		}
+	},
+	name: "TypographyEllipsisTooltip",
+	inheritAttrs: false,
+	setup(props, { slots }) {
+		return () => {
+			if (!props.tooltipProps?.title || !props.enableEllipsis) return slots.default?.();
+			return createVNode(tooltip_default, mergeProps({ "open": props.isEllipsis ? void 0 : false }, props.tooltipProps), { default: () => [slots.default?.()] });
+		};
+	}
+});
+var EllipsisTooltip_default = EllipsisTooltip;
+
+//#endregion
+export { EllipsisTooltip_default as default };