antdv-next 1.6.0 → 1.7.0

package/dist/tree-select/index.js

@@ -1,17 +1,18 @@
 import { devUseWarning, isDev } from "../_util/warning.js";
+import { useFormItemInputContext } from "../form/context.js";
 import { useComponentBaseConfig, useConfig } from "../config-provider/context.js";
 import { useSize } from "../config-provider/hooks/useSize.js";
 import useToken from "../theme/useToken.js";
 import { useCompactItemContext } from "../space/Compact.js";
-import { getAttrStyleAndClass, useMergeSemantic, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
+import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../_util/hooks/useMergeSemantic.js";
 import { useZIndex } from "../_util/hooks/useZIndex.js";
 import { getSlotPropsFnRun, toPropsRefs } from "../_util/tools.js";
 import useCSSVarCls from "../config-provider/hooks/useCSSVarCls.js";
 import { useDisabledContext } from "../config-provider/DisabledContext.js";
+import { useLocaleGetter } from "../locale/useLocale.js";
 import genPurePanel from "../_util/PurePanel.js";
 import { getMergedStatus, getStatusClassNames } from "../_util/statusUtils.js";
 import { DefaultRenderEmpty } from "../config-provider/defaultRenderEmpty.js";
-import { useFormItemInputContext } from "../form/context.js";
 import useVariant from "../form/hooks/useVariant.js";
 import mergedBuiltinPlacements from "../select/mergedBuiltinPlacements.js";
 import style_default from "../select/style/index.js";
@@ -71,7 +72,8 @@ const omitKeys = [
 	"classes"
 ];
 const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expose, emit, attrs }) => {
-	const { prefixCls: treeSelectPrefixCls, getPopupContainer: getContextPopupContainer, direction, styles: contextStyles, classes: contextClassNames, switcherIcon, virtual, getPrefixCls, rootPrefixCls } = useComponentBaseConfig("treeSelect", props, ["switcherIcon"], "tree-select");
+	const { prefixCls: treeSelectPrefixCls, getPopupContainer: getContextPopupContainer, direction, class: contextClassName, style: contextStyle, styles: contextStyles, classes: contextClassNames, switcherIcon, virtual, getPrefixCls, rootPrefixCls } = useComponentBaseConfig("treeSelect", props, ["switcherIcon"], "tree-select");
+	const getGlobalLocale = useLocaleGetter("global");
 	const configCtx = useConfig();
 	const { prefixCls: customizePrefixCls, variant: customVariant, size: customizeSize, disabled: customDisabled, status: customStatus, classes, styles } = toPropsRefs(props, "prefixCls", "variant", "size", "disabled", "status", "classes", "styles");
 	const bordered = computed(() => props?.bordered ?? true);
@@ -114,7 +116,8 @@ const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expo
 		status: mergedStatus.value,
 		variant: variant.value
 	}));
-	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, styles), useToProps(mergedProps), computed(() => {
+	const contextStyleRoot = useSemanticRootStyle(contextStyle);
+	const [mergedClassNames, mergedStyles] = useMergeSemantic(useToArr(contextClassNames, classes), useToArr(contextStyles, contextStyleRoot, styles), useToProps(mergedProps), computed(() => {
 		return { popup: { _default: "root" } };
 	}));
 	const mergedOnOpenChange = (open) => {
@@ -142,7 +145,7 @@ const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expo
 		const { popupClassName, dropdownClassName, rootClass, popupRender, dropdownRender, popupMatchSelectWidth, dropdownMatchSelectWidth, treeCheckable, multiple, allowClear, treeLine, listHeight, builtinPlacements, switcherIcon: customSwitcherIcon, treeIcon, getPopupContainer, choiceTransitionName, transitionName, treeExpandAction, showCheckedStrategy, treeCheckStrictly } = props;
 		const restProps = omit(props, omitKeys);
 		const treeTitleRender = slots?.treeTitleRender ?? props.treeTitleRender;
-		const mergedPopupClassName = clsx(popupClassName || dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, { [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === "rtl" }, rootClass, mergedClassNames.value.root, mergedClassNames.value.popup?.root, cssVarCls.value, rootCls.value, treeSelectRootCls.value, hashId.value);
+		const mergedPopupClassName = clsx(popupClassName || dropdownClassName, `${treeSelectPrefixCls.value}-dropdown`, { [`${treeSelectPrefixCls.value}-dropdown-rtl`]: direction.value === "rtl" }, rootClass, mergedClassNames.value.popup?.root, cssVarCls.value, rootCls.value, treeSelectRootCls.value, hashId.value);
 		const { style, className, restAttrs } = getAttrStyleAndClass(attrs);
 		const mergedPopupRender = usePopupRender(popupRender || dropdownRender);
 		const customSuffixIcon = getSlotPropsFnRun(slots, props, "suffixIcon", false);
@@ -160,7 +163,11 @@ const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expo
 			prefixCls: prefixCls.value,
 			componentName: "TreeSelect"
 		});
-		const mergedAllowClear = allowClear === true ? { clearIcon } : allowClear;
+		const mergedAllowClear = allowClear ? {
+			clearIcon,
+			label: getGlobalLocale().clear,
+			...typeof allowClear === "object" ? allowClear : {}
+		} : allowClear;
 		const notFoundContent = getSlotPropsFnRun(slots, props, "notFoundContent", false);
 		let mergedNotFound;
 		if (notFoundContent !== void 0) mergedNotFound = notFoundContent;
@@ -211,7 +218,7 @@ const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expo
 			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
 			[`${prefixCls.value}-${variant.value}`]: enableVariantCls.value,
 			[`${prefixCls.value}-in-form-item`]: isFormItemInput
-		}, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback), compactItemClassnames.value, className, rootClass, mergedClassNames?.value?.root, cssVarCls.value, rootCls.value, treeSelectRootCls.value, hashId.value);
+		}, getStatusClassNames(prefixCls.value, mergedStatus.value, hasFeedback), compactItemClassnames.value, contextClassName.value, className, rootClass, mergedClassNames?.value?.root, cssVarCls.value, rootCls.value, treeSelectRootCls.value, hashId.value);
 		const mergedSwitcherIcon = slots?.switcherIcon ?? customSwitcherIcon ?? switcherIcon.value;
 		const renderSwitcherIcon = (nodeProps) => createVNode(SwitcherIconCom, {
 			"prefixCls": treePrefixCls.value,
@@ -252,7 +259,6 @@ const InternalTreeSelect = /* @__PURE__ */ defineComponent((props, { slots, expo
 			"treeMotion": null,
 			"popupClassName": mergedPopupClassName,
 			"popupStyle": {
-				...mergedStyles.value.root,
 				...mergedStyles.value.popup?.root,
 				zIndex: zIndex.value
 			},

package/dist/typography/Base/index.js

@@ -1,4 +1,5 @@
 import { useComponentBaseConfig } from "../../config-provider/context.js";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
 import { getAttrStyleAndClass, useMergeSemantic, useSemanticRootStyle, useToArr, useToProps } from "../../_util/hooks/useMergeSemantic.js";
 import { toPropsRefs as toPropsRefs$1 } from "../../_util/tools.js";
 import InternalTooltip from "../../tooltip/index.js";
@@ -22,6 +23,8 @@ import useDelayState from "@v-c/util/dist/hooks/useDelayState";
 import ResizeObserver from "@v-c/resize-observer";
 //#region src/typography/Base/index.tsx
 const ELLIPSIS_STR = "...";
+const DEFAULT_SHIMMER_DURATION = 1;
+const DEFAULT_SHIMMER_CONFIG = { duration: DEFAULT_SHIMMER_DURATION };
 const DECORATION_PROPS = [
 	"delete",
 	"mark",
@@ -54,7 +57,7 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 		return val;
 	});
 	const editIconRef = shallowRef();
-	const { prefixCls, direction: contextDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("typography", props);
+	const { prefixCls, rootPrefixCls, direction: contextDirection, class: contextClassName, style: contextStyle, classes: contextClassNames, styles: contextStyles } = useComponentBaseConfig("typography", props);
 	const mergedDirection = computed(() => props.direction ?? contextDirection.value);
 	const { classes, styles } = toPropsRefs$1(props, "classes", "styles");
 	const mergedProps = computed(() => {
@@ -97,6 +100,7 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 		triggerEdit(false);
 	};
 	const [enableCopy, copyConfig] = useMergedConfig(computed(() => props.copyable));
+	const [enableShimmer, shimmerConfig] = useMergedConfig(computed(() => props.shimmer), DEFAULT_SHIMMER_CONFIG);
 	const childrenNodes = shallowRef([]);
 	const { copied, copyLoading, onClick: onCopyClick } = useCopyClick({
 		copyConfig,
@@ -240,7 +244,7 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			"aria-label": ariaLabel,
 			"tabindex": tabIndex,
 			"style": mergedStyles.value.action
-		}, [icon || createVNode(EditOutlined, { role: "button" }, null)])] }) : null;
+		}, [icon || createVNode(EditOutlined, null, null)])] }) : null;
 	};
 	const renderCopy = () => {
 		if (!enableCopy.value) return null;
@@ -281,6 +285,7 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 	const componentCls = computed(() => classNames({
 		[`${prefixCls.value}-${props.type}`]: props.type,
 		[`${prefixCls.value}-disabled`]: props.disabled,
+		[`${prefixCls.value}-shimmer`]: enableShimmer.value && !props.disabled,
 		[`${prefixCls.value}-ellipsis`]: enableEllipsis.value,
 		[`${prefixCls.value}-ellipsis-single-line`]: cssTextOverflow.value,
 		[`${prefixCls.value}-ellipsis-multiple-line`]: cssLineClamp.value,
@@ -296,6 +301,15 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 		};
 		const mergedClassName = classNames(componentCls.value, attrClass);
 		const mergedStyle = [
+			enableShimmer.value ? (() => {
+				const [varName] = genCssVar(rootPrefixCls.value, "typography");
+				const duration = shimmerConfig.value?.duration;
+				const [motionTime = DEFAULT_SHIMMER_DURATION, waitTime = 1] = Array.isArray(duration) ? duration : [duration];
+				return {
+					[varName("shimmer-motion-time")]: motionTime,
+					[varName("shimmer-wait-time")]: waitTime
+				};
+			})() : null,
 			mergedStyles.value.root,
 			cssLineClamp.value ? { WebkitLineClamp: rows.value } : null,
 			attrStyle
@@ -337,6 +351,8 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			"onClick": clickHandler,
 			"title": props.title,
 			"aria-label": topAriaLabel.value,
+			"aria-busy": enableShimmer.value ? !props.disabled : void 0,
+			"aria-disabled": enableShimmer.value && props.disabled ? true : void 0,
 			"rootClass": props.rootClass
 		}, restAttrs), { default: () => [createVNode(Ellipsis, mergeProps({
 			"enableMeasure": mergedEnableEllipsis.value && !cssEllipsis.value,
@@ -396,6 +412,11 @@ const Base = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			required: false,
 			default: void 0
 		},
+		shimmer: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		actions: {
 			type: Object,
 			required: false

package/dist/typography/Link.js

@@ -76,6 +76,11 @@ const Link = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			required: false,
 			default: void 0
 		},
+		shimmer: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		actions: {
 			type: Object,
 			required: false

package/dist/typography/Paragraph.js

@@ -57,6 +57,11 @@ const Paragraph = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }
 			required: false,
 			default: void 0
 		},
+		shimmer: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		actions: {
 			type: Object,
 			required: false

package/dist/typography/Text.js

@@ -73,6 +73,11 @@ const Text = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			required: false,
 			default: void 0
 		},
+		shimmer: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		actions: {
 			type: Object,
 			required: false

package/dist/typography/Title.js

@@ -77,6 +77,11 @@ const Title = /* @__PURE__ */ defineComponent((props, { slots, attrs, emit }) =>
 			required: false,
 			default: void 0
 		},
+		shimmer: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
 		actions: {
 			type: Object,
 			required: false

package/dist/typography/hooks/useMergedConfig.js

@@ -5,7 +5,7 @@ function useMergedConfig(propConfig, templateConfig) {
 	return [support, computed(() => {
 		const current = unref(propConfig);
 		return {
-			...templateConfig,
+			...support.value ? templateConfig : null,
 			...support.value && typeof current === "object" ? current : null
 		};
 	})];

package/dist/typography/interface.d.ts

@@ -63,6 +63,9 @@ interface TypographySemanticStyles {
 }
 type TypographyClassNamesType = SemanticClassNamesType<BlockProps, TypographySemanticClassNames>;
 type TypographyStylesType = SemanticStylesType<BlockProps, TypographySemanticStyles>;
+interface ShimmerConfig {
+  duration?: number | [motionTime: number, waitTime: number];
+}
 interface BlockProps extends ComponentBaseProps {
   title?: string;
   editable?: boolean | EditConfig;
@@ -70,6 +73,10 @@ interface BlockProps extends ComponentBaseProps {
   type?: BaseType;
   disabled?: boolean;
   ellipsis?: boolean | EllipsisConfig;
+  /**
+   * @since 1.7.0
+   */
+  shimmer?: boolean | ShimmerConfig;
   /**
    * @since 1.3.0
    */
@@ -110,4 +117,4 @@ interface TypographyBaseProps extends ComponentBaseProps {
   title?: string;
 }
 //#endregion
-export { ActionsConfig, BaseType, BlockProps, CopyConfig, EditConfig, EllipsisConfig, TypographyBaseEmits, TypographyBaseProps, TypographyClassNamesType, TypographySemanticClassNames, TypographySemanticStyles, TypographySlots, TypographyStylesType };
+export { ActionsConfig, BaseType, BlockProps, CopyConfig, EditConfig, EllipsisConfig, ShimmerConfig, TypographyBaseEmits, TypographyBaseProps, TypographyClassNamesType, TypographySemanticClassNames, TypographySemanticStyles, TypographySlots, TypographyStylesType };

package/dist/typography/style/index.js

@@ -1,6 +1,6 @@
 import { operationUnit } from "../../style/index.js";
 import { genStyleHooks } from "../../theme/util/genStyleUtils.js";
-import { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles } from "./mixins.js";
+import { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getShimmerStyles, getTitleStyles } from "./mixins.js";
 //#region src/typography/style/index.ts
 const genTypographyStyle = (token) => {
 	const { componentCls, titleMarginTop } = token;
@@ -64,6 +64,7 @@ const genTypographyStyle = (token) => {
 		...getEditableStyles(token),
 		...getCopyableStyles(token),
 		...getEllipsisStyles(),
+		[`&${componentCls}-shimmer`]: getShimmerStyles(token),
 		"&-rtl": { direction: "rtl" }
 	} };
 };

package/dist/typography/style/mixins.d.ts

@@ -9,5 +9,6 @@ declare const getResetStyles: GenerateStyle<TypographyToken, CSSObject>;
 declare const getEditableStyles: GenerateStyle<TypographyToken, CSSObject>;
 declare const getCopyableStyles: GenerateStyle<TypographyToken, CSSObject>;
 declare function getEllipsisStyles(): CSSObject;
+declare function getShimmerStyles(token: TypographyToken): CSSObject;
 //#endregion
-export { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles };
+export { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getShimmerStyles, getTitleStyles };

package/dist/typography/style/mixins.js

@@ -1,5 +1,6 @@
 import { operationUnit } from "../../style/index.js";
-import { unit } from "@antdv-next/cssinjs";
+import { genCssVar } from "../../theme/util/genStyleUtils.js";
+import { Keyframes, unit } from "@antdv-next/cssinjs";
 import { gold } from "@ant-design/colors";
 //#region src/typography/style/mixins.ts
 function getTitleStyle(fontSize, lineHeight, color, token) {
@@ -172,7 +173,7 @@ const getEditableStyles = (token) => {
 			insetInlineEnd: token.calc(token.marginXS).add(2).equal(),
 			insetBlockEnd: token.marginXS,
 			color: token.colorIcon,
-			fontWeight: "normal",
+			fontWeight: 400,
 			fontSize: token.fontSize,
 			fontStyle: "normal",
 			pointerEvents: "none"
@@ -227,5 +228,27 @@ function getEllipsisStyles() {
 		}
 	};
 }
+function getShimmerStyles(token) {
+	const [, varRef] = genCssVar(token.antCls, "typography");
+	const motionTime = varRef("shimmer-motion-time", "1");
+	const waitTime = varRef("shimmer-wait-time", "1");
+	const shimmerAnimation = new Keyframes("antTypographyShimmer", {
+		"0%": { backgroundPosition: "-66.6667% 100%, 0 0" },
+		"100%": { backgroundPosition: `calc(166.6667% + 233.3334% * ${waitTime} / ${motionTime}) 100%, 0 0` }
+	});
+	return {
+		backgroundClip: "text, text",
+		WebkitBackgroundClip: "text, text",
+		WebkitTextFillColor: "transparent",
+		backgroundImage: ["linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), white, rgba(255, 255, 255, 0.8), transparent)", "linear-gradient(currentColor, currentColor)"].join(", "),
+		backgroundSize: "40% 100%, 100% 100%",
+		backgroundRepeat: "no-repeat",
+		animationName: shimmerAnimation,
+		animationDuration: `calc((${motionTime} + ${waitTime}) * 1s)`,
+		animationIterationCount: "infinite",
+		animationTimingFunction: "linear",
+		animationFillMode: "forwards"
+	};
+}
 //#endregion
-export { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getTitleStyles };
+export { getCopyableStyles, getEditableStyles, getEllipsisStyles, getLinkStyles, getResetStyles, getShimmerStyles, getTitleStyles };

package/dist/upload/Upload.d.ts

@@ -21,6 +21,7 @@ interface InternalUploadProps extends UploadProps$1, UploadEmitsProps {}
 interface UploadEmitsProps {
   onChange?: UploadEmits['change'];
   onDrop?: UploadEmits['drop'];
+  onFocus?: UploadEmits['focus'];
   'onUpdate:fileList'?: UploadEmits['update:fileList'];
 }
 declare const InternalUpload: import("vue").DefineSetupFnComponent<InternalUploadProps, UploadEmits<any>, SlotsType<UploadSlots<any>>, InternalUploadProps, import("vue").PublicProps>;

package/dist/upload/Upload.js

@@ -284,6 +284,9 @@ const InternalUpload = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 		delete rcUploadProps.className;
 		delete rcUploadProps.style;
 		if (!hasChildren || mergedDisabled.value) delete rcUploadProps.id;
+		const onFocus = (e) => {
+			emit("focus", e);
+		};
 		const mergedRootCls = clsx(`${prefixCls.value}-wrapper`, contextClassName.value, mergedClassNames.value.root, rootClass.value, cssVarCls.value, rootCls.value, hashId.value, {
 			[`${prefixCls.value}-rtl`]: direction.value === "rtl",
 			[`${prefixCls.value}-picture-card-wrapper`]: listType.value === "picture-card",
@@ -300,7 +303,8 @@ const InternalUpload = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 			return createVNode("span", mergeProps(restAttrs, {
 				"class": mergedRootCls,
 				"ref": wrapRef,
-				"style": mergedRootStyle
+				"style": mergedRootStyle,
+				"onFocusin": onFocus
 			}), [createVNode("div", {
 				"class": dragCls,
 				"style": mergedStyles.value.trigger,
@@ -322,12 +326,14 @@ const InternalUpload = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 		if (listType.value === "picture-card" || listType.value === "picture-circle") return createVNode("span", mergeProps(restAttrs, {
 			"class": mergedRootCls,
 			"ref": wrapRef,
-			"style": mergedRootStyle
+			"style": mergedRootStyle,
+			"onFocusin": onFocus
 		}), [renderUploadList(uploadButton, hasChildren)]);
 		return createVNode("span", mergeProps(restAttrs, {
 			"class": mergedRootCls,
 			"ref": wrapRef,
-			"style": mergedRootStyle
+			"style": mergedRootStyle,
+			"onFocusin": onFocus
 		}), [uploadButton, renderUploadList()]);
 	};
 }, {
@@ -504,6 +510,7 @@ const InternalUpload = /* @__PURE__ */ defineComponent((props, { slots, attrs, e
 	emits: [
 		"change",
 		"drop",
+		"focus",
 		"update:fileList"
 	],
 	name: "AUpload",

package/dist/upload/UploadList/ListItem.js

@@ -1,6 +1,7 @@
 import { useComponentBaseConfig } from "../../config-provider/context.js";
 import { getAttrStyleAndClass } from "../../_util/hooks/useMergeSemantic.js";
 import InternalTooltip from "../../tooltip/index.js";
+import { isRenderable } from "../../_util/is.js";
 import progress_default from "../../progress/index.js";
 import { Transition, computed, createVNode, defineComponent, isVNode, mergeProps, onMounted, shallowRef, watch } from "vue";
 import { clsx } from "@v-c/util";
@@ -50,6 +51,7 @@ const ListItem = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 		} catch {
 			linkProps = {};
 		}
+		const { onClick: linkOnClick, ...restLinkProps } = linkProps || {};
 		const removeIcon = (typeof showRemoveIcon === "function" ? showRemoveIcon(file) : showRemoveIcon) ? actionIconRender((typeof customRemoveIcon === "function" ? customRemoveIcon(file) : customRemoveIcon) || createVNode(DeleteOutlined, null, null), () => onClose(file), prefixCls, locale.removeFile, true) : null;
 		const downloadIcon = (typeof showDownloadIcon === "function" ? showDownloadIcon(file) : showDownloadIcon) && mergedStatus.value === "done" ? actionIconRender((typeof customDownloadIcon === "function" ? customDownloadIcon(file) : customDownloadIcon) || createVNode(DownloadOutlined, null, null), () => onDownload(file), prefixCls, locale.downloadFile) : null;
 		const downloadOrDelete = listType.value !== "picture-card" && listType.value !== "picture-circle" && createVNode("span", {
@@ -57,7 +59,7 @@ const ListItem = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			"class": clsx(`${prefixCls}-list-item-actions`, { picture: listType.value === "picture" })
 		}, [downloadIcon, removeIcon]);
 		const extraContent = typeof customExtra === "function" ? customExtra(file) : customExtra;
-		const extra = extraContent && createVNode("span", { "class": `${prefixCls}-list-item-extra` }, [extraContent]);
+		const extra = isRenderable(extraContent) && createVNode("span", { "class": `${prefixCls}-list-item-extra` }, [extraContent]);
 		const listItemNameClass = clsx(`${prefixCls}-list-item-name`);
 		const onPreviewKeyDown = (e) => {
 			if (e.key === "Enter" || e.key === " ") {
@@ -77,9 +79,12 @@ const ListItem = /* @__PURE__ */ defineComponent((props, { attrs }) => {
 			"rel": "noopener noreferrer",
 			"class": listItemNameClass,
 			"title": file.name
-		}, linkProps, {
+		}, restLinkProps, {
 			"href": file.url,
-			"onClick": (e) => onPreview(file, e)
+			"onClick": (e) => {
+				linkOnClick?.(e);
+				if (!e.defaultPrevented) onPreview(file, e);
+			}
 		}), [file.name, extra]) : createVNode("span", mergeProps({
 			"key": "view",
 			"class": listItemNameClass

package/dist/upload/interface.d.ts

@@ -130,6 +130,7 @@ interface UploadProps<T = any> {
 interface UploadEmits<T = any> {
   'change': (info: UploadChangeParam<UploadFile<T>>) => void;
   'drop': (event: DragEvent) => void;
+  'focus': (event: FocusEvent) => void;
   'update:fileList': (fileList: UploadFile<T>[]) => void;
 }
 interface UploadSlots<T = any> {