antdv-next 0.0.111 → 1.0.0-alpha.2

package/dist/typography/Base/index.js

@@ -0,0 +1,453 @@
+import { useComponentBaseConfig } from "../../config-provider/context.js";
+import { getAttrStyleAndClass as getAttrStyleAndClass$1, useMergeSemantic, useToArr, useToProps } from "../../_util/hooks/useMergeSemantic.js";
+import "../../_util/hooks/index.js";
+import { toPropsRefs } from "../../_util/tools.js";
+import tooltip_default from "../../tooltip/index.js";
+import useLocale_default from "../../locale/useLocale.js";
+import isNonNullable_default from "../../_util/isNonNullable.js";
+import { isStyleSupport } from "../../_util/styleChecker.js";
+import Editable_default from "../Editable.js";
+import useCopyClick_default from "../hooks/useCopyClick.js";
+import useMergedConfig from "../hooks/useMergedConfig.js";
+import usePrevious_default from "../hooks/usePrevious.js";
+import useTooltipProps_default from "../hooks/useTooltipProps.js";
+import Typography_default from "../Typography.js";
+import { isEleEllipsis, isValidText, toList } from "./util.js";
+import CopyBtn_default from "./CopyBtn.js";
+import Ellipsis_default from "./Ellipsis.js";
+import EllipsisTooltip_default from "./EllipsisTooltip.js";
+import { Fragment, computed, createVNode, defineComponent, h, mergeProps, nextTick, onBeforeUnmount, shallowRef, watch, watchEffect } from "vue";
+import { classNames } from "@v-c/util";
+import { filterEmpty } from "@v-c/util/dist/props-util";
+import { EditOutlined } from "@antdv-next/icons";
+import ResizeObserver from "@v-c/resize-observer";
+
+//#region src/typography/Base/index.tsx
+const ELLIPSIS_STR = "...";
+const DECORATION_PROPS = [
+	"delete",
+	"mark",
+	"code",
+	"underline",
+	"strong",
+	"keyboard",
+	"italic"
+];
+function wrapperDecorations(props, content) {
+	let currentContent = content;
+	function wrap(tag, needed) {
+		if (!needed) return;
+		currentContent = h(tag, null, currentContent);
+	}
+	wrap("strong", props.strong);
+	wrap("u", props.underline);
+	wrap("del", props.delete);
+	wrap("code", props.code);
+	wrap("mark", props.mark);
+	wrap("kbd", props.keyboard);
+	wrap("i", props.italic);
+	return currentContent;
+}
+const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) => {
+	const typographyRef = shallowRef();
+	const typographyDom = computed(() => {
+		const val = typographyRef.value;
+		if (val && typeof val === "object" && "el" in val) return val.el;
+		return val;
+	});
+	const editIconRef = shallowRef();
+	const { prefixCls, direction: contextDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("typography", props);
+	const mergedDirection = computed(() => props.direction ?? contextDirection.value);
+	const { classes, styles } = toPropsRefs(props, "classes", "styles");
+	const mergedProps = computed(() => {
+		return {
+			...props,
+			direction: mergedDirection.value
+		};
+	});
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps));
+	const [textLocale] = useLocale_default("Text");
+	const [enableEdit, editConfig] = useMergedConfig(computed(() => props.editable));
+	const editing = shallowRef(editConfig.value.editing ?? false);
+	watch(editConfig, (config) => {
+		if (config.editing !== void 0) editing.value = !!config.editing;
+	});
+	const triggerType = computed(() => editConfig.value.triggerType ?? ["icon"]);
+	const triggerEdit = (edit) => {
+		if (edit) editConfig.value.onStart?.();
+		editing.value = edit;
+		emit("update:editing", edit);
+		if (edit) emit("edit:start");
+	};
+	const prevEditing = usePrevious_default(() => editing.value);
+	watch(() => editing.value, (val) => {
+		if (!val && prevEditing.value) nextTick(() => {
+			editIconRef.value?.focus();
+		});
+	}, { flush: "post" });
+	const onEditClick = (e) => {
+		e?.preventDefault();
+		if (props.disabled) return;
+		triggerEdit(true);
+	};
+	const onEditChange = (value) => {
+		editConfig.value.onChange?.(value);
+		emit("edit:change", value);
+		triggerEdit(false);
+	};
+	const onEditCancel = () => {
+		editConfig.value.onCancel?.();
+		emit("edit:cancel");
+		triggerEdit(false);
+	};
+	const [enableCopy, copyConfig] = useMergedConfig(computed(() => props.copyable));
+	const childrenNodes = shallowRef([]);
+	const { copied, copyLoading, onClick: onCopyClick } = useCopyClick_default({
+		copyConfig,
+		getText: () => childrenNodes.value
+	});
+	const handleCopyClick = async (e) => {
+		if (props.disabled) return;
+		await onCopyClick(e);
+		emit("copy", e);
+	};
+	const isLineClampSupport = shallowRef(false);
+	const isTextOverflowSupport = shallowRef(false);
+	const isJsEllipsis = shallowRef(false);
+	const isNativeEllipsis = shallowRef(false);
+	const isNativeVisible = shallowRef(true);
+	const [enableEllipsis, rawEllipsisConfig] = useMergedConfig(computed(() => props.ellipsis));
+	const ellipsisConfig = computed(() => ({
+		expandable: false,
+		symbol: (isExpanded) => isExpanded ? textLocale?.value?.collapse : textLocale?.value?.expand,
+		...rawEllipsisConfig.value
+	}));
+	const expanded = shallowRef(ellipsisConfig.value.defaultExpanded || false);
+	watch(() => ellipsisConfig.value.expanded, (val) => {
+		if (val !== void 0) expanded.value = val;
+	});
+	const mergedEnableEllipsis = computed(() => enableEllipsis.value && (!expanded.value || ellipsisConfig.value.expandable === "collapsible"));
+	const rows = computed(() => ellipsisConfig.value.rows ?? 1);
+	const needMeasureEllipsis = computed(() => {
+		return mergedEnableEllipsis.value && (ellipsisConfig.value.suffix !== void 0 || ellipsisConfig.value.onEllipsis || ellipsisConfig.value.expandable || enableEdit.value || enableCopy.value);
+	});
+	watchEffect(() => {
+		if (enableEllipsis.value && !needMeasureEllipsis.value) {
+			isLineClampSupport.value = isStyleSupport("webkitLineClamp");
+			isTextOverflowSupport.value = isStyleSupport("textOverflow");
+		}
+	});
+	const cssEllipsis = shallowRef(mergedEnableEllipsis.value);
+	const canUseCssEllipsis = computed(() => {
+		if (needMeasureEllipsis.value) return false;
+		if (rows.value === 1) return isTextOverflowSupport.value;
+		return isLineClampSupport.value;
+	});
+	watch([canUseCssEllipsis, mergedEnableEllipsis], () => {
+		cssEllipsis.value = canUseCssEllipsis.value && mergedEnableEllipsis.value;
+	}, { immediate: true });
+	const isMergedEllipsis = computed(() => mergedEnableEllipsis.value && (cssEllipsis.value ? isNativeEllipsis.value : isJsEllipsis.value));
+	const cssTextOverflow = computed(() => mergedEnableEllipsis.value && rows.value === 1 && cssEllipsis.value);
+	const cssLineClamp = computed(() => mergedEnableEllipsis.value && rows.value > 1 && cssEllipsis.value);
+	const onExpandClick = (e, info) => {
+		expanded.value = info.expanded;
+		emit("update:expanded", info.expanded);
+		emit("expand", info.expanded, e);
+		ellipsisConfig.value.onExpand?.(e, info);
+	};
+	const ellipsisWidth = shallowRef(0);
+	const onResize = ({ offsetWidth }) => {
+		ellipsisWidth.value = offsetWidth;
+	};
+	const onJsEllipsis = (jsEllipsis) => {
+		const changed = isJsEllipsis.value !== jsEllipsis;
+		isJsEllipsis.value = jsEllipsis;
+		if (changed) ellipsisConfig.value.onEllipsis?.(jsEllipsis);
+	};
+	watch(() => [
+		enableEllipsis.value,
+		cssEllipsis.value,
+		childrenNodes.value,
+		cssLineClamp.value,
+		isNativeVisible.value,
+		ellipsisWidth.value
+	], () => {
+		const textEle = typographyDom.value;
+		if (enableEllipsis.value && cssEllipsis.value && textEle) {
+			const currentEllipsis = isEleEllipsis(textEle);
+			if (isNativeEllipsis.value !== currentEllipsis) isNativeEllipsis.value = currentEllipsis;
+		}
+	}, { flush: "post" });
+	let observer = null;
+	watch(() => [cssEllipsis.value, mergedEnableEllipsis.value], () => {
+		observer?.disconnect();
+		if (typeof IntersectionObserver === "undefined" || !typographyDom.value || !cssEllipsis.value || !mergedEnableEllipsis.value) return;
+		observer = new IntersectionObserver(() => {
+			if (typographyDom.value) isNativeVisible.value = !!typographyDom.value.offsetParent;
+		});
+		if (typographyDom.value) observer.observe(typographyDom.value);
+	}, {
+		flush: "post",
+		immediate: true
+	});
+	onBeforeUnmount(() => {
+		observer?.disconnect();
+		observer = null;
+	});
+	const tooltipProps = useTooltipProps_default(computed(() => ellipsisConfig.value.tooltip), computed(() => editConfig.value.text), childrenNodes);
+	const getChildrenText = computed(() => {
+		for (const node of childrenNodes.value) {
+			if (isValidText(node)) return node;
+			if (node?.children && isValidText(node.children)) return node.children;
+		}
+	});
+	const topAriaLabel = computed(() => {
+		if (!enableEllipsis.value || cssEllipsis.value) return void 0;
+		return [
+			editConfig.value.text,
+			getChildrenText.value,
+			props.title,
+			tooltipProps.value?.title
+		].find(isValidText);
+	});
+	const renderExpand = () => {
+		const { expandable, symbol } = ellipsisConfig.value;
+		if (props.disabled) return null;
+		return expandable ? createVNode("button", {
+			"type": "button",
+			"key": "expand",
+			"class": classNames(`${prefixCls.value}-${expanded.value ? "collapse" : "expand"}`, mergedClassNames.value.expand),
+			"onClick": (e) => onExpandClick(e, { expanded: !expanded.value }),
+			"aria-label": expanded.value ? textLocale?.value?.collapse : textLocale?.value?.expand,
+			"style": mergedStyles.value.expand
+		}, [typeof symbol === "function" ? symbol(expanded.value) : symbol]) : null;
+	};
+	const renderEdit = () => {
+		if (!enableEdit.value || props.disabled) return null;
+		const { icon, tooltip, tabIndex } = editConfig.value;
+		const tooltipNodes = toList(tooltip);
+		const editTitle = tooltip === false ? "" : tooltipNodes[0] ?? textLocale?.value?.edit;
+		const ariaLabel = typeof editTitle === "string" ? editTitle : "";
+		return triggerType.value.includes("icon") ? createVNode(tooltip_default, {
+			"key": "edit",
+			"title": tooltip === false ? "" : editTitle
+		}, { default: () => [createVNode("button", {
+			"type": "button",
+			"ref": editIconRef,
+			"class": classNames(`${prefixCls.value}-edit`, mergedClassNames.value.edit),
+			"onClick": onEditClick,
+			"aria-label": ariaLabel,
+			"tabindex": tabIndex,
+			"style": mergedStyles.value.edit
+		}, [icon || createVNode(EditOutlined, { role: "button" }, null)])] }) : null;
+	};
+	const renderCopy = () => {
+		if (!enableCopy.value || props.disabled) return null;
+		return createVNode(CopyBtn_default, mergeProps({ "key": "copy" }, copyConfig.value, {
+			"prefixCls": prefixCls.value,
+			"copied": copied.value,
+			"locale": textLocale?.value,
+			"onCopy": handleCopyClick,
+			"loading": copyLoading.value,
+			"iconOnly": !isNonNullable_default(getChildrenText.value),
+			"className": mergedClassNames.value.copy,
+			"style": mergedStyles.value.copy
+		}), null);
+	};
+	const renderOperations = (canEllipsis) => {
+		return [
+			canEllipsis && renderExpand(),
+			renderEdit(),
+			renderCopy()
+		];
+	};
+	const renderEllipsis = (canEllipsis) => {
+		return [
+			canEllipsis && !expanded.value && createVNode("span", {
+				"aria-hidden": true,
+				"key": "ellipsis"
+			}, [ELLIPSIS_STR]),
+			ellipsisConfig.value.suffix,
+			renderOperations(canEllipsis)
+		];
+	};
+	const componentCls = computed(() => classNames({
+		[`${prefixCls.value}-${props.type}`]: props.type,
+		[`${prefixCls.value}-disabled`]: props.disabled,
+		[`${prefixCls.value}-ellipsis`]: enableEllipsis.value,
+		[`${prefixCls.value}-ellipsis-single-line`]: cssTextOverflow.value,
+		[`${prefixCls.value}-ellipsis-multiple-line`]: cssLineClamp.value
+	}, mergedClassNames.value.root));
+	return () => {
+		const { className: attrClass, style: attrStyle, restAttrs } = getAttrStyleAndClass$1(attrs);
+		const children = filterEmpty(slots?.default?.());
+		childrenNodes.value = children;
+		const clickHandler = triggerType.value.includes("text") ? onEditClick : (e) => emit("click", e);
+		const mergedClassName = classNames(componentCls.value, attrClass);
+		const mergedStyle = [
+			mergedStyles.value.root,
+			cssLineClamp.value ? { WebkitLineClamp: rows.value } : null,
+			attrStyle
+		];
+		if (editing.value) return createVNode(Editable_default, {
+			"value": editConfig.value.text ?? (getChildrenText.value != null ? String(getChildrenText.value) : ""),
+			"onSave": onEditChange,
+			"onCancel": onEditCancel,
+			"onEnd": () => {
+				editConfig.value.onEnd?.();
+				emit("edit:end");
+			},
+			"prefixCls": prefixCls.value,
+			"className": classNames(attrClass, mergedClassNames.value.root, props.rootClass, contextClassName.value),
+			"style": [
+				mergedStyles.value.root,
+				contextStyle.value,
+				attrStyle
+			],
+			"direction": mergedDirection.value,
+			"component": props.component,
+			"maxLength": editConfig.value.maxLength,
+			"autoSize": editConfig.value.autoSize,
+			"enterIcon": editConfig.value.enterIcon
+		}, null);
+		return createVNode(ResizeObserver, {
+			"onResize": onResize,
+			"disabled": !mergedEnableEllipsis.value
+		}, { default: () => [createVNode(EllipsisTooltip_default, {
+			"tooltipProps": tooltipProps.value,
+			"enableEllipsis": mergedEnableEllipsis.value,
+			"isEllipsis": isMergedEllipsis.value
+		}, { default: () => [createVNode(Typography_default, mergeProps({
+			"class": mergedClassName,
+			"prefixCls": prefixCls.value,
+			"style": mergedStyle,
+			"component": props.component,
+			"ref": typographyRef,
+			"direction": mergedDirection.value,
+			"onClick": clickHandler,
+			"title": props.title,
+			"aria-label": topAriaLabel.value,
+			"rootClass": props.rootClass
+		}, restAttrs), { default: () => [createVNode(Ellipsis_default, mergeProps({
+			"enableMeasure": mergedEnableEllipsis.value && !cssEllipsis.value,
+			"text": children,
+			"rows": rows.value,
+			"width": ellipsisWidth.value
+		}, { onEllipsis: onJsEllipsis }, {
+			"expanded": expanded.value,
+			"miscDeps": [
+				copied.value,
+				expanded.value,
+				copyLoading.value,
+				enableEdit.value,
+				enableCopy.value,
+				textLocale?.value,
+				ellipsisConfig.value.suffix,
+				ellipsisConfig.value.symbol,
+				...DECORATION_PROPS.map((key) => props[key])
+			]
+		}), { default: (node, canEllipsis) => {
+			return wrapperDecorations(props, createVNode(Fragment, null, [node.length > 0 && canEllipsis && !expanded.value && topAriaLabel.value ? createVNode("span", {
+				"key": "show-content",
+				"aria-hidden": true
+			}, [node]) : node, createVNode(Fragment, null, [renderEllipsis(canEllipsis)])]));
+		} })] })] })] });
+	};
+}, {
+	emits: [
+		"click",
+		"expand",
+		"copy",
+		"edit:start",
+		"edit:change",
+		"edit:cancel",
+		"edit:end",
+		"update:expanded",
+		"update:editing"
+	],
+	props: {
+		title: {
+			type: String,
+			required: false
+		},
+		editable: {
+			type: [Boolean, Object],
+			required: false
+		},
+		copyable: {
+			type: [Boolean, Object],
+			required: false
+		},
+		type: {
+			type: String,
+			required: false
+		},
+		disabled: {
+			type: Boolean,
+			required: false
+		},
+		ellipsis: {
+			type: [Boolean, Object],
+			required: false
+		},
+		code: {
+			type: Boolean,
+			required: false
+		},
+		mark: {
+			type: Boolean,
+			required: false
+		},
+		underline: {
+			type: Boolean,
+			required: false
+		},
+		delete: {
+			type: Boolean,
+			required: false
+		},
+		strong: {
+			type: Boolean,
+			required: false
+		},
+		keyboard: {
+			type: Boolean,
+			required: false
+		},
+		italic: {
+			type: Boolean,
+			required: false
+		},
+		component: { required: false },
+		direction: {
+			type: [String, null],
+			required: false
+		},
+		classes: {
+			type: [Object, Function],
+			required: false
+		},
+		styles: {
+			type: [Object, Function],
+			required: false
+		},
+		id: {
+			type: String,
+			required: false
+		},
+		rootClass: {
+			type: String,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		}
+	},
+	name: "ATypographyBase",
+	inheritAttrs: false
+});
+var Base_default = Base;
+
+//#endregion
+export { Base_default as default };

package/dist/typography/Base/util.js

@@ -0,0 +1,33 @@
+import { isDev } from "../../_util/warning.js";
+import { getSlotPropsFnRun } from "../../_util/tools.js";
+
+//#region src/typography/Base/util.ts
+function toList(val) {
+	if (val === false) return [false, false];
+	return Array.isArray(val) ? val : [val];
+}
+function getNode(dom, defaultNode, needDom) {
+	dom = getSlotPropsFnRun({}, { dom }, "dom");
+	defaultNode = getSlotPropsFnRun({}, { defaultNode }, "defaultNode");
+	if (dom === true || dom === void 0) return defaultNode;
+	return dom || needDom && defaultNode;
+}
+/**
+* Check for element is native ellipsis
+* ref:
+* - https://github.com/ant-design/ant-design/issues/50143
+* - https://github.com/ant-design/ant-design/issues/50414
+*/
+function isEleEllipsis(ele) {
+	const childDiv = document.createElement("em");
+	ele.appendChild(childDiv);
+	if (isDev) childDiv.className = "ant-typography-css-ellipsis-content-measure";
+	const rect = ele.getBoundingClientRect();
+	const childRect = childDiv.getBoundingClientRect();
+	ele.removeChild(childDiv);
+	return rect.left > childRect.left || childRect.right > rect.right || rect.top > childRect.top || childRect.bottom > rect.bottom;
+}
+const isValidText = (val) => ["string", "number"].includes(typeof val);
+
+//#endregion
+export { getNode, isEleEllipsis, isValidText, toList };

package/dist/typography/Editable.js

@@ -0,0 +1,146 @@
+import { toPropsRefs } from "../_util/tools.js";
+import { cloneElement } from "../_util/vueNode.js";
+import TextArea_default from "../input/TextArea.js";
+import style_default from "./style/index.js";
+import { createVNode, defineComponent, mergeDefaults, onMounted, shallowRef, watch } from "vue";
+import { clsx } from "@v-c/util";
+import { EnterOutlined } from "@antdv-next/icons";
+import KeyCode from "@v-c/util/dist/KeyCode";
+
+//#region src/typography/Editable.tsx
+const defaults = { autoSize: true };
+const Editable = /* @__PURE__ */ defineComponent((props) => {
+	const { prefixCls, direction, maxLength, autoSize } = toPropsRefs(props, "prefixCls", "direction", "maxLength", "autoSize");
+	const ref$1 = shallowRef();
+	const inComposition = shallowRef(false);
+	const lastKeyCode = shallowRef(null);
+	const current = shallowRef(props.value);
+	watch(() => props.value, (val) => {
+		current.value = val;
+	});
+	onMounted(() => {
+		if (ref$1.value?.resizableTextArea) {
+			const { textArea } = ref$1.value.resizableTextArea;
+			textArea.focus();
+			const { length } = textArea.value;
+			textArea.setSelectionRange(length, length);
+		}
+	});
+	const onChange = ({ target }) => {
+		current.value = target.value.replace(/[\n\r]/g, "");
+	};
+	const onCompositionStart = () => {
+		inComposition.value = true;
+	};
+	const onCompositionEnd = () => {
+		inComposition.value = false;
+	};
+	const onKeyDown = ({ keyCode }) => {
+		if (inComposition.value) return;
+		lastKeyCode.value = keyCode;
+	};
+	const confirmChange = () => {
+		props?.onSave?.(current.value.trim());
+	};
+	const onKeyUp = ({ keyCode, ctrlKey, altKey, metaKey, shiftKey }) => {
+		if (lastKeyCode.value !== keyCode || inComposition.value || ctrlKey || altKey || metaKey || shiftKey) return;
+		if (keyCode === KeyCode.ENTER) {
+			confirmChange();
+			props?.onEnd?.();
+		} else if (keyCode === KeyCode.ESC) props?.onCancel?.();
+	};
+	const onBlur = () => {
+		confirmChange();
+	};
+	const [hashId, cssVarCls] = style_default(prefixCls);
+	const icon = props.enterIcon ?? createVNode(EnterOutlined, null, null);
+	return () => {
+		const { component, className } = props;
+		const textAreaClassName = clsx(prefixCls.value, `${prefixCls.value}-edit-content`, {
+			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
+			[`${prefixCls.value}-${component}`]: !!component
+		}, className, hashId.value, cssVarCls.value);
+		return createVNode("div", {
+			"class": textAreaClassName,
+			"style": props.style
+		}, [createVNode(TextArea_default, {
+			"ref": ref$1,
+			"maxlength": maxLength.value,
+			"value": current.value,
+			"onChange": onChange,
+			"onKeydown": onKeyDown,
+			"onKeyup": onKeyUp,
+			"onCompositionstart": onCompositionStart,
+			"onCompositionend": onCompositionEnd,
+			"onBlur": onBlur,
+			"aria-label": props["aria-label"],
+			"rows": 1,
+			"autoSize": autoSize.value
+		}, null), icon !== null ? cloneElement(icon, { class: `${prefixCls.value}-edit-content-confirm` }) : null]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		"aria-label": {
+			type: String,
+			required: false
+		},
+		onSave: {
+			type: Function,
+			required: true
+		},
+		onCancel: {
+			type: Function,
+			required: true
+		},
+		onEnd: {
+			type: Function,
+			required: false
+		},
+		className: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		direction: {
+			type: [String, null],
+			required: false
+		},
+		maxLength: {
+			type: Number,
+			required: false
+		},
+		autoSize: { required: false },
+		enterIcon: {
+			type: [
+				Function,
+				Boolean,
+				String,
+				Number,
+				null,
+				Object
+			],
+			required: false
+		},
+		component: {
+			type: String,
+			required: false
+		}
+	}, defaults),
+	name: "TypographyEditable",
+	inheritAttrs: false
+});
+var Editable_default = Editable;
+
+//#endregion
+export { Editable_default as default };

package/dist/typography/Link.d.ts

@@ -0,0 +1,16 @@
+import { BlockProps, TypographyBaseEmits, TypographySlots } from "./interface.js";
+import * as vue410 from "vue";
+import { SlotsType } from "vue";
+
+//#region src/typography/Link.d.ts
+interface LinkProps extends BlockProps {
+  ellipsis?: boolean;
+  href?: string;
+  target?: string;
+  rel?: string;
+}
+declare const Link: vue410.DefineSetupFnComponent<LinkProps, TypographyBaseEmits, SlotsType<TypographySlots>, LinkProps & {
+  [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
+}, vue410.PublicProps>;
+//#endregion
+export { Link, LinkProps };