@sdata/web-vue 3.27.0 → 3.29.0

package/es/input-mask/presets.js

@@ -0,0 +1,220 @@
+//#region components/input-mask/presets.ts
+var testPattern = (pattern, value) => {
+	pattern.lastIndex = 0;
+	return pattern.test(value);
+};
+var filterCharacters = (pattern) => (value) => Array.from(value).filter((character) => testPattern(pattern, character)).join("");
+var acceptsIpv4 = (value) => {
+	if (!/^\d*(?:\.\d*){0,3}$/.test(value)) return false;
+	return value.split(".").every((part) => part.length <= 3 && (!part || Number(part) <= 255));
+};
+var acceptsIpv6 = (value) => {
+	var _value$match, _value$match2;
+	if (!/^[0-9A-Fa-f:]*$/.test(value)) return false;
+	if (value.includes(":::")) return false;
+	if (((_value$match = value.match(/::/g)) !== null && _value$match !== void 0 ? _value$match : []).length > 1) return false;
+	if (((_value$match2 = value.match(/:/g)) !== null && _value$match2 !== void 0 ? _value$match2 : []).length > 7) return false;
+	return value.split(":").every((part) => part.length <= 4);
+};
+var formatDateTimeDigits = (digits, dateTimeSeparator) => {
+	const value = digits.slice(0, 14);
+	let result = value.slice(0, 4);
+	if (value.length >= 4) result += "-";
+	result += value.slice(4, 6);
+	if (value.length >= 6) result += "-";
+	result += value.slice(6, 8);
+	if (value.length >= 8) result += dateTimeSeparator;
+	result += value.slice(8, 10);
+	if (value.length >= 10) result += ":";
+	result += value.slice(10, 12);
+	if (value.length >= 12) result += ":";
+	result += value.slice(12, 14);
+	return result;
+};
+var normalizeDateTime = (dateTimeSeparator) => (value) => {
+	const normalized = filterCharacters(/[0-9TtZz:+\-. ]/)(value);
+	const suffix = normalized.slice(19);
+	if (normalized.includes(".") || /[Zz+]/.test(normalized) || suffix.includes("-")) return normalized;
+	return formatDateTimeDigits(normalized.replace(/\D/g, ""), dateTimeSeparator);
+};
+var normalizeIban = (value) => filterCharacters(/[A-Za-z0-9]/)(value).toUpperCase().slice(0, 34).replace(/(.{4})(?=.)/g, "$1 ");
+var looseUriCharacters = /[^\s]/u;
+var inputMaskPresets = {
+	"date": {
+		placeholder: "YYYY-MM-DD",
+		inputMode: "numeric",
+		mask: "9999-99-99"
+	},
+	"time": {
+		placeholder: "HH:MM:SS",
+		inputMode: "numeric",
+		mask: "99:99:99"
+	},
+	"datetime": {
+		placeholder: "2026-08-06 10:30:00",
+		inputMode: "text",
+		normalize: normalizeDateTime(" "),
+		accepts: (value) => /^\d{0,4}(?:-\d{0,2}(?:-\d{0,2}(?:[Tt ]\d{0,2}(?::\d{0,2}(?::\d{0,2}(?:\.\d{0,6})?(?:[Zz]|[+-]\d{0,2}(?::\d{0,2})?)?)?)?)?)?)?$/.test(value)
+	},
+	"rfc3339": {
+		placeholder: "2026-08-06T10:30:00+08:00",
+		inputMode: "text",
+		normalize: normalizeDateTime("T"),
+		accepts: (value) => /^\d{0,4}(?:-\d{0,2}(?:-\d{0,2}(?:[Tt]\d{0,2}(?::\d{0,2}(?::\d{0,2}(?:\.\d{0,6})?(?:[Zz]|[+-]\d{0,2}(?::\d{0,2})?)?)?)?)?)?)?$/.test(value)
+	},
+	"ip": {
+		placeholder: "192.168.1.1 或 2001:db8::1",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:.]/),
+		accepts: (value) => acceptsIpv4(value) || acceptsIpv6(value)
+	},
+	"ipv4": {
+		placeholder: "192.168.1.1",
+		inputMode: "decimal",
+		normalize: filterCharacters(/[0-9.]/),
+		accepts: acceptsIpv4
+	},
+	"ipv6": {
+		placeholder: "2001:db8::1",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:]/),
+		accepts: acceptsIpv6
+	},
+	"ip-range": {
+		placeholder: "192.168.1.0/24",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f:./]/),
+		accepts: (value) => {
+			const slash = value.lastIndexOf("/");
+			if (slash === -1) return acceptsIpv4(value) || acceptsIpv6(value);
+			const ip = value.slice(0, slash);
+			const prefix = value.slice(slash + 1);
+			if (!(acceptsIpv4(ip) || acceptsIpv6(ip))) return false;
+			if (prefix === "") return true;
+			if (!/^\d{0,3}$/.test(prefix)) return false;
+			const prefixNum = Number(prefix);
+			if (prefixNum > 128) return false;
+			if (ip.includes(".") && !ip.includes(":") && prefixNum > 32) return false;
+			return true;
+		}
+	},
+	"url": {
+		placeholder: "https://example.com/path",
+		inputMode: "url",
+		normalize: filterCharacters(/[A-Za-z0-9:/?#@!$&'()*+,;=._~%\u005B\u005D-]/),
+		accepts: (value) => /^(?:[A-Za-z][A-Za-z\d+.-]*:\/{0,2})?[A-Za-z0-9:/?#@!$&'()*+,;=._~%\u005B\u005D-]*$/.test(value)
+	},
+	"email": {
+		placeholder: "name@example.com",
+		inputMode: "email",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^[^\s@]*(?:@[^\s@]*)?$/u.test(value)
+	},
+	"fqdn": {
+		placeholder: "example.com",
+		inputMode: "url",
+		normalize: filterCharacters(/* @__PURE__ */ new RegExp("[\\p{Letter}\\p{Number}._*-]", "u")),
+		accepts: (value) => !value.includes("..")
+	},
+	"semver": {
+		placeholder: "1.2.3-beta.1+build.7",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z.+-]/),
+		accepts: (value) => /^(?:0|[1-9]\d*)?(?:\.(?:0|[1-9]\d*)?)?(?:\.(?:0|[1-9]\d*)?)?(?:-[0-9A-Za-z-]*(?:\.[0-9A-Za-z-]*)*)?(?:\+[0-9A-Za-z-]*(?:\.[0-9A-Za-z-]*)*)?$/.test(value)
+	},
+	"uuid": {
+		placeholder: "550e8400-e29b-41d4-a716-446655440000",
+		inputMode: "text",
+		mask: "hhhhhhhh-hhhh-hhhh-hhhh-hhhhhhhhhhhh",
+		formatChars: { h: /[0-9A-Fa-f]/ }
+	},
+	"mac-address": {
+		placeholder: "01:23:45:67:89:ab",
+		inputMode: "text",
+		mask: "hh:hh:hh:hh:hh:hh",
+		formatChars: { h: /[0-9A-Fa-f]/ }
+	},
+	"lat-long": {
+		placeholder: "31.2304, 121.4737",
+		inputMode: "text",
+		normalize: filterCharacters(/[-0-9+., ]/),
+		accepts: (value) => /^[-+]?\d*(?:\.\d*)?(?:, ?[-+]?\d*(?:\.\d*)?)?$/.test(value)
+	},
+	"hex-color": {
+		placeholder: "#1677ff",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Fa-f#]/),
+		accepts: (value) => /^#?[0-9A-Fa-f]{0,8}$/.test(value)
+	},
+	"rgb-color": {
+		placeholder: "rgb(22, 119, 255)",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9a-zA-Z().,% ]/),
+		accepts: (value) => /^r(?:g(?:b(?:a)?)?)?\(?(?:\d{0,3}(?:, ?\d{0,3}(?:, ?\d{0,3}(?:, ?(?:\d{0,3}(?:\.\d{0,3})?%?)?)?)?)?)?\)?$/i.test(value)
+	},
+	"hsl": {
+		placeholder: "hsl(210, 100%, 50%)",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9a-zA-Z().,% ]/),
+		accepts: (value) => /^h(?:s(?:l(?:a)?)?)?\(?(?:\d{0,3}(?:, ?\d{0,3}%?(?:, ?\d{0,3}%?(?:, ?(?:\d{0,3}(?:\.\d{0,3})?%?)?)?)?)?)?\)?$/i.test(value)
+	},
+	"imei": {
+		placeholder: "12-345678-901234-5",
+		inputMode: "numeric",
+		mask: "99-999999-999999-9"
+	},
+	"issn": {
+		placeholder: "1234-567X",
+		inputMode: "text",
+		mask: "9999-999x",
+		formatChars: { x: /[0-9Xx]/ }
+	},
+	"isrc": {
+		placeholder: "US-AAA-26-12345",
+		inputMode: "text",
+		mask: "aa-aaa-99-99999"
+	},
+	"iso6346": {
+		placeholder: "MSCU 123456 7",
+		inputMode: "text",
+		mask: "aaaa 999999 9"
+	},
+	"jwt": {
+		placeholder: "header.payload.signature",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z._-]/),
+		accepts: (value) => /^[0-9A-Za-z_-]*(?:\.[0-9A-Za-z_-]*){0,2}$/.test(value)
+	},
+	"mime-type": {
+		placeholder: "application/json",
+		inputMode: "text",
+		normalize: filterCharacters(/[0-9A-Za-z!#$&^_.+/-]/),
+		accepts: (value) => /^[^/\s]*(?:\/[^/\s]*)?$/.test(value)
+	},
+	"mailto-uri": {
+		placeholder: "mailto:name@example.com",
+		inputMode: "email",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:mailto:?)?[^\s]*$/i.test(value)
+	},
+	"data-uri": {
+		placeholder: "data:text/plain;base64,...",
+		inputMode: "text",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:data:?)?[^\s]*$/i.test(value)
+	},
+	"magnet-uri": {
+		placeholder: "magnet:?xt=urn:btih:...",
+		inputMode: "text",
+		normalize: filterCharacters(looseUriCharacters),
+		accepts: (value) => /^(?:magnet:?)?[^\s]*$/i.test(value)
+	},
+	"iban": {
+		placeholder: "GB82 WEST 1234 5698 7654 32",
+		inputMode: "text",
+		normalize: normalizeIban,
+		accepts: (value) => /^[A-Z0-9 ]{0,42}$/.test(value)
+	}
+};
+//#endregion
+export { inputMaskPresets };

package/es/input-mask/style/css.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/input-mask/style/index.css

@@ -0,0 +1,20 @@
+/******** borderSize *******/
+/******** borderStyle *******/
+/******** radius *******/
+/******** shadow distance *******/
+/******** size *******/
+/******** spacing *******/
+/******** shadow *******/
+/******** opacity *******/
+/******** fontSize *******/
+/******** fontWeight ********/
+/******** Primary *******/
+/******** success *******/
+/******** warning *******/
+/******** danger *******/
+/******** link *******/
+/******** radius *******/
+/********* icon hover *********/
+.sd-input-mask .sd-input {
+  font-variant-numeric: tabular-nums;
+}

package/es/input-mask/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../input/style';
+import './index.scss';

package/es/input-mask/style/index.js

@@ -0,0 +1 @@
+import "./index.scss";

package/es/input-mask/style/index.scss

@@ -0,0 +1,10 @@
+@use '@style/theme/index.scss' as theme;
+@use '@components/input-mask/style/token.scss' as *;
+@use 'sass:string';
+
+$input-mask-prefix-cls: string.unquote('#{theme.$prefix}-input-mask');
+$input-prefix-cls: string.unquote('#{theme.$prefix}-input');
+
+.#{$input-mask-prefix-cls} .#{$input-prefix-cls} {
+  font-variant-numeric: $input-mask-font-variant-numeric;
+}

package/es/input-mask/style/token.scss

@@ -0,0 +1,5 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+
+$input-mask-font-variant-numeric: tabular-nums;

package/es/input-mask/types.d.ts

@@ -0,0 +1,49 @@
+export type InputMaskSize = 'mini' | 'small' | 'medium' | 'large';
+export type InputMaskToken = string | RegExp;
+export type InputMaskPattern = string | readonly InputMaskToken[];
+export interface InputMaskSelection {
+    start: number;
+    end: number;
+}
+export interface InputMaskState {
+    value: string;
+    selection: InputMaskSelection | null;
+}
+export type InputMaskBeforeChange = (nextState: InputMaskState, previousState: InputMaskState) => InputMaskState;
+export interface InputMaskPresetDefinition {
+    placeholder: string;
+    inputMode?: 'decimal' | 'email' | 'numeric' | 'search' | 'tel' | 'text' | 'url';
+    mask?: InputMaskPattern;
+    formatChars?: Readonly<Record<string, RegExp>>;
+    normalize?: (value: string) => string;
+    accepts?: (value: string) => boolean;
+}
+export interface InputMaskProps {
+    modelValue?: string;
+    defaultValue?: string;
+    mask?: InputMaskPattern;
+    preset?: InputMaskPresetName;
+    maskChar?: string | null;
+    formatChars?: Readonly<Record<string, RegExp>>;
+    alwaysShowMask?: boolean;
+    beforeMaskedValueChange?: InputMaskBeforeChange;
+    size?: InputMaskSize;
+    allowClear?: boolean;
+    disabled?: boolean;
+    readonly?: boolean | string;
+    error?: boolean;
+    placeholder?: string;
+    fitWidth?: boolean;
+    maxWFull?: boolean;
+    showWordLimit?: boolean;
+    maxLength?: number | {
+        length: number;
+        errorOnly?: boolean;
+    };
+    wordLength?: (value: string) => number;
+    wordSlice?: (value: string, maxLength: number) => string;
+    inputAttrs?: Record<string, unknown>;
+    prepend?: string;
+    append?: string;
+}
+export type InputMaskPresetName = 'data-uri' | 'date' | 'datetime' | 'email' | 'fqdn' | 'hex-color' | 'hsl' | 'iban' | 'imei' | 'ip' | 'ip-range' | 'ipv4' | 'ipv6' | 'isrc' | 'iso6346' | 'issn' | 'jwt' | 'lat-long' | 'mac-address' | 'magnet-uri' | 'mailto-uri' | 'mime-type' | 'rgb-color' | 'rfc3339' | 'semver' | 'time' | 'url' | 'uuid';

package/es/sd-vue.js

@@ -105,6 +105,7 @@ import preview_group_default from "./image/preview-group.js";
 import Image from "./image/index.js";
 import FilePreviewer from "./file-previewer/index.js";
 import Icon from "./icon-component/index.js";
+import InputMask from "./input-mask/index.js";
 import KvList from "./kv-list/index.js";
 import content_default from "./layout/content.js";
 import footer_default from "./layout/footer.js";
@@ -194,6 +195,7 @@ var components = {
 	JsonForm,
 	KvList,
 	Input,
+	InputMask,
 	InputNumber,
 	InputTag,
 	Mention,

package/es/textarea/textarea.vue_vue_type_script_setup_true_lang.js

@@ -12,6 +12,7 @@ import { useCursor } from "../_hooks/use-cursor.js";
 import { useFitWidth } from "../_hooks/use-fit-width.js";
 import { isReadonlyModificationKey, useReadonlyTip, useReadonlyTipText } from "../_hooks/use-readonly-tip.js";
 import { INPUT_EVENTS } from "../_utils/constant.js";
+import { countGraphemes, sliceGraphemes } from "../_utils/grapheme.js";
 import { omit } from "../_utils/omit.js";
 import pick from "../_utils/pick.js";
 import Tooltip from "../tooltip/index.js";
@@ -191,9 +192,8 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			return props.maxLength;
 		});
 		const getValueLength = (value) => {
-			var _value$length;
 			if (isFunction(props.wordLength)) return props.wordLength(value);
-			return (_value$length = value.length) !== null && _value$length !== void 0 ? _value$length : 0;
+			return countGraphemes(value);
 		};
 		const valueLength = computed(() => getValueLength(computedValue.value));
 		const mergedError = computed(() => _mergedError.value || Boolean(computedMaxLength.value && maxLengthErrorOnly.value && valueLength.value > computedMaxLength.value));
@@ -214,10 +214,9 @@ var textarea_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			});
 		};
 		const updateValue = (value, inner = true) => {
-			if (computedMaxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > computedMaxLength.value) {
-				var _props$wordSlice, _props$wordSlice2;
-				value = (_props$wordSlice = (_props$wordSlice2 = props.wordSlice) === null || _props$wordSlice2 === void 0 ? void 0 : _props$wordSlice2.call(props, value, computedMaxLength.value)) !== null && _props$wordSlice !== void 0 ? _props$wordSlice : value.slice(0, computedMaxLength.value);
-			}
+			if (computedMaxLength.value && !maxLengthErrorOnly.value && getValueLength(value) > computedMaxLength.value) if (isFunction(props.wordSlice)) value = props.wordSlice(value, computedMaxLength.value);
+			else if (isFunction(props.wordLength)) value = value.slice(0, computedMaxLength.value);
+			else value = sliceGraphemes(value, computedMaxLength.value);
 			_value.value = value;
 			if (inner) emit("update:modelValue", value);
 			keepControl();

package/es/toolbar/toolbar.vue_vue_type_script_setup_true_lang.js

@@ -27,6 +27,8 @@ var toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			type: Boolean,
 			default: true
 		},
+		searchBtn: {},
+		resetBtn: {},
 		showActions: {
 			type: Boolean,
 			default: true
@@ -175,21 +177,17 @@ var toolbar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 					_: 3
 				}, 8, ["class"])) : createCommentVNode("", true), _ctx.$slots.extra ? renderSlot(_ctx.$slots, "extra", {}, void 0, void 0, 1) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [
 					renderSlot(_ctx.$slots, "action-prepend"),
-					__props.showSearch ? (openBlock(), createBlock(unref(Button), {
+					__props.showSearch ? (openBlock(), createBlock(unref(Button), mergeProps({
 						key: 0,
-						type: "primary",
-						onClick: handleSearch
-					}, {
+						type: "primary"
+					}, __props.searchBtn, { onClick: handleSearch }), {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.searchText), 1)]),
 						_: 1
-					})) : createCommentVNode("", true),
-					__props.showReset ? (openBlock(), createBlock(unref(Button), {
-						key: 1,
-						onClick: _cache[1] || (_cache[1] = ($event) => reset())
-					}, {
+					}, 16)) : createCommentVNode("", true),
+					__props.showReset ? (openBlock(), createBlock(unref(Button), mergeProps({ key: 1 }, __props.resetBtn, { onClick: _cache[1] || (_cache[1] = ($event) => reset()) }), {
 						default: withCtx(() => [createTextVNode(toDisplayString(__props.resetText), 1)]),
 						_: 1
-					})) : createCommentVNode("", true),
+					}, 16)) : createCommentVNode("", true),
 					renderSlot(_ctx.$slots, "action-append")
 				], 64))], 2)) : createCommentVNode("", true)]),
 				_: 3

package/es/toolbar/types.d.ts

@@ -1,3 +1,4 @@
+import type { ButtonProps } from '../button';
 import type { JsonFormSchema } from '../json-form';
 import type { SpinProps } from '../spin';
 export type ToolbarModelValue = Record<string, unknown>;
@@ -7,6 +8,8 @@ export interface ToolbarProps {
     spinProps?: SpinProps;
     showSearch?: boolean;
     showReset?: boolean;
+    searchBtn?: ButtonProps;
+    resetBtn?: ButtonProps;
     showActions?: boolean;
     searchText?: string;
     resetText?: string;

package/es/upload/context.d.ts

@@ -6,6 +6,7 @@ export interface UploadContext {
     iconCls?: string;
     customIcon?: CustomIcon;
     showRemoveButton?: boolean;
+    showStartButton?: boolean;
     showRetryButton?: boolean;
     showCancelButton?: boolean;
     showPreviewButton?: boolean;

package/es/upload/index.d.ts

@@ -62,6 +62,10 @@ declare const Upload: {
             type: BooleanConstructor;
             default: boolean;
         };
+        showStartButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showRetryButton: {
             type: BooleanConstructor;
             default: boolean;
@@ -155,6 +159,7 @@ declare const Upload: {
         autoUpload: boolean;
         showFileList: boolean;
         showRemoveButton: boolean;
+        showStartButton: boolean;
         showRetryButton: boolean;
         showCancelButton: boolean;
         showUploadButton: boolean | {
@@ -231,6 +236,10 @@ declare const Upload: {
             type: BooleanConstructor;
             default: boolean;
         };
+        showStartButton: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
         showRetryButton: {
             type: BooleanConstructor;
             default: boolean;
@@ -316,6 +325,7 @@ declare const Upload: {
         autoUpload: boolean;
         showFileList: boolean;
         showRemoveButton: boolean;
+        showStartButton: boolean;
         showRetryButton: boolean;
         showCancelButton: boolean;
         showUploadButton: boolean | {
@@ -389,6 +399,10 @@ declare const Upload: {
         type: BooleanConstructor;
         default: boolean;
     };
+    showStartButton: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     showRetryButton: {
         type: BooleanConstructor;
         default: boolean;
@@ -482,6 +496,7 @@ declare const Upload: {
     autoUpload: boolean;
     showFileList: boolean;
     showRemoveButton: boolean;
+    showStartButton: boolean;
     showRetryButton: boolean;
     showCancelButton: boolean;
     showUploadButton: boolean | {

package/es/upload/style/index.css

@@ -16,7 +16,7 @@
 /******** radius *******/
 /********* icon hover *********/
 .sd-upload {
-  display: inline-block;
+  display: block;
   max-width: 100%;
   cursor: pointer;
 }

package/es/upload/style/index.scss

@@ -5,7 +5,7 @@
 $upload-prefix-cls: string.unquote('#{theme.$prefix}-upload');
 
 .#{$upload-prefix-cls} {
-  display: inline-block;
+  display: block;
   max-width: 100%;
   cursor: pointer;
 

package/es/upload/upload-picture-item.js

@@ -6,6 +6,7 @@ import IconImageClose from "../icon/icon-image-close/index.js";
 import IconDelete from "../icon/icon-delete/index.js";
 import { uploadInjectionKey } from "./context.js";
 import IconUpload from "../icon/icon-upload/index.js";
+import IconPlayArrowFill from "../icon/icon-play-arrow-fill/index.js";
 import upload_progress_default from "./upload-progress.js";
 import { Fragment, computed, createVNode, defineComponent, inject, mergeProps } from "vue";
 //#region components/upload/upload-picture-item.tsx
@@ -33,7 +34,7 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 			}
 		};
 		const renderCard = () => {
-			var _uploadCtx$slots$imag, _uploadCtx$slots, _uploadCtx$slots$imag2, _ref, _uploadCtx$slots$erro, _uploadCtx$slots2, _uploadCtx$slots2$err, _uploadCtx$customIcon, _uploadCtx$customIcon2, _ref2, _uploadCtx$slots$prev, _uploadCtx$slots3, _uploadCtx$slots3$pre, _uploadCtx$customIcon3, _uploadCtx$customIcon4, _ref3, _uploadCtx$slots$retr, _uploadCtx$slots4, _uploadCtx$slots4$ret, _uploadCtx$customIcon5, _uploadCtx$customIcon6, _ref4, _uploadCtx$slots$remo, _uploadCtx$slots5, _uploadCtx$slots5$rem, _uploadCtx$customIcon7, _uploadCtx$customIcon8, _uploadCtx$slots6, _uploadCtx$slots6$ext;
+			var _uploadCtx$slots$imag, _uploadCtx$slots, _uploadCtx$slots$imag2, _ref, _uploadCtx$slots$erro, _uploadCtx$slots2, _uploadCtx$slots2$err, _uploadCtx$customIcon, _uploadCtx$customIcon2, _ref2, _uploadCtx$slots$prev, _uploadCtx$slots3, _uploadCtx$slots3$pre, _uploadCtx$customIcon3, _uploadCtx$customIcon4, _ref3, _uploadCtx$slots$star, _uploadCtx$slots4, _uploadCtx$slots4$sta, _uploadCtx$customIcon5, _uploadCtx$customIcon6, _ref4, _uploadCtx$slots$retr, _uploadCtx$slots5, _uploadCtx$slots5$ret, _uploadCtx$customIcon7, _uploadCtx$customIcon8, _ref5, _uploadCtx$slots$remo, _uploadCtx$slots6, _uploadCtx$slots6$rem, _uploadCtx$customIcon9, _uploadCtx$customIcon10, _uploadCtx$slots7, _uploadCtx$slots7$ext;
 			if (props.file.status === "uploading") return createVNode(upload_progress_default, {
 				"file": props.file,
 				"listType": "picture-card"
@@ -41,7 +42,7 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 			return createVNode(Fragment, null, [(_uploadCtx$slots$imag = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots$imag2 = (_uploadCtx$slots = uploadCtx.slots).image) === null || _uploadCtx$slots$imag2 === void 0 ? void 0 : _uploadCtx$slots$imag2.call(_uploadCtx$slots, { fileItem: props.file })) !== null && _uploadCtx$slots$imag !== void 0 ? _uploadCtx$slots$imag : createVNode("img", mergeProps({
 				"src": props.file.url,
 				"alt": props.file.name
-			}, (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.imageLoading) ? { loading: uploadCtx.imageLoading } : void 0), null), createVNode("div", { "class": `${itemCls}-mask` }, [props.file.status === "error" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showCancelButton) && createVNode("div", { "class": `${itemCls}-error-tip` }, [createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-error`] }, [(_ref = (_uploadCtx$slots$erro = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots2$err = (_uploadCtx$slots2 = uploadCtx.slots)["error-icon"]) === null || _uploadCtx$slots2$err === void 0 ? void 0 : _uploadCtx$slots2$err.call(_uploadCtx$slots2)) !== null && _uploadCtx$slots$erro !== void 0 ? _uploadCtx$slots$erro : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon = uploadCtx.customIcon) === null || _uploadCtx$customIcon === void 0 || (_uploadCtx$customIcon2 = _uploadCtx$customIcon.errorIcon) === null || _uploadCtx$customIcon2 === void 0 ? void 0 : _uploadCtx$customIcon2.call(_uploadCtx$customIcon)) !== null && _ref !== void 0 ? _ref : createVNode(IconImageClose, null, null)])]), createVNode("div", { "class": `${itemCls}-operation` }, [
+			}, (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.imageLoading) ? { loading: uploadCtx.imageLoading } : void 0), null), createVNode("div", { "class": `${itemCls}-mask` }, [props.file.status === "error" && createVNode("div", { "class": `${itemCls}-error-tip` }, [createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-error`] }, [(_ref = (_uploadCtx$slots$erro = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots2$err = (_uploadCtx$slots2 = uploadCtx.slots)["error-icon"]) === null || _uploadCtx$slots2$err === void 0 ? void 0 : _uploadCtx$slots2$err.call(_uploadCtx$slots2)) !== null && _uploadCtx$slots$erro !== void 0 ? _uploadCtx$slots$erro : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon = uploadCtx.customIcon) === null || _uploadCtx$customIcon === void 0 || (_uploadCtx$customIcon2 = _uploadCtx$customIcon.errorIcon) === null || _uploadCtx$customIcon2 === void 0 ? void 0 : _uploadCtx$customIcon2.call(_uploadCtx$customIcon)) !== null && _ref !== void 0 ? _ref : createVNode(IconImageClose, null, null)])]), createVNode("div", { "class": `${itemCls}-operation` }, [
 				props.file.status !== "error" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showPreviewButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-preview`],
 					"role": "button",
@@ -50,14 +51,22 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onPreview(props.file),
 					"onKeydown": onActionKeydown(() => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onPreview(props.file))
 				}, [(_ref2 = (_uploadCtx$slots$prev = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots3$pre = (_uploadCtx$slots3 = uploadCtx.slots)["preview-icon"]) === null || _uploadCtx$slots3$pre === void 0 ? void 0 : _uploadCtx$slots3$pre.call(_uploadCtx$slots3)) !== null && _uploadCtx$slots$prev !== void 0 ? _uploadCtx$slots$prev : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon3 = uploadCtx.customIcon) === null || _uploadCtx$customIcon3 === void 0 || (_uploadCtx$customIcon4 = _uploadCtx$customIcon3.previewIcon) === null || _uploadCtx$customIcon4 === void 0 ? void 0 : _uploadCtx$customIcon4.call(_uploadCtx$customIcon3)) !== null && _ref2 !== void 0 ? _ref2 : createVNode(IconEye, null, null)]),
-				["init", "error"].includes(props.file.status) && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRetryButton) && createVNode("span", {
+				props.file.status === "init" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showStartButton) && createVNode("span", {
+					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-start`],
+					"role": "button",
+					"tabindex": "0",
+					"aria-label": t("upload.start"),
+					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file),
+					"onKeydown": onActionKeydown(() => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file))
+				}, [(_ref3 = (_uploadCtx$slots$star = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots4$sta = (_uploadCtx$slots4 = uploadCtx.slots)["start-icon"]) === null || _uploadCtx$slots4$sta === void 0 ? void 0 : _uploadCtx$slots4$sta.call(_uploadCtx$slots4)) !== null && _uploadCtx$slots$star !== void 0 ? _uploadCtx$slots$star : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon5 = uploadCtx.customIcon) === null || _uploadCtx$customIcon5 === void 0 || (_uploadCtx$customIcon6 = _uploadCtx$customIcon5.startIcon) === null || _uploadCtx$customIcon6 === void 0 ? void 0 : _uploadCtx$customIcon6.call(_uploadCtx$customIcon5)) !== null && _ref3 !== void 0 ? _ref3 : createVNode(IconPlayArrowFill, null, null)]),
+				props.file.status === "error" && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRetryButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-upload`],
 					"role": "button",
 					"tabindex": "0",
 					"aria-label": t("a11y.retryUpload"),
 					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file),
 					"onKeydown": onActionKeydown(() => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file))
-				}, [(_ref3 = (_uploadCtx$slots$retr = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots4$ret = (_uploadCtx$slots4 = uploadCtx.slots)["retry-icon"]) === null || _uploadCtx$slots4$ret === void 0 ? void 0 : _uploadCtx$slots4$ret.call(_uploadCtx$slots4)) !== null && _uploadCtx$slots$retr !== void 0 ? _uploadCtx$slots$retr : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon5 = uploadCtx.customIcon) === null || _uploadCtx$customIcon5 === void 0 || (_uploadCtx$customIcon6 = _uploadCtx$customIcon5.retryIcon) === null || _uploadCtx$customIcon6 === void 0 ? void 0 : _uploadCtx$customIcon6.call(_uploadCtx$customIcon5)) !== null && _ref3 !== void 0 ? _ref3 : createVNode(IconUpload, null, null)]),
+				}, [(_ref4 = (_uploadCtx$slots$retr = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots5$ret = (_uploadCtx$slots5 = uploadCtx.slots)["retry-icon"]) === null || _uploadCtx$slots5$ret === void 0 ? void 0 : _uploadCtx$slots5$ret.call(_uploadCtx$slots5)) !== null && _uploadCtx$slots$retr !== void 0 ? _uploadCtx$slots$retr : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon7 = uploadCtx.customIcon) === null || _uploadCtx$customIcon7 === void 0 || (_uploadCtx$customIcon8 = _uploadCtx$customIcon7.retryIcon) === null || _uploadCtx$customIcon8 === void 0 ? void 0 : _uploadCtx$customIcon8.call(_uploadCtx$customIcon7)) !== null && _ref4 !== void 0 ? _ref4 : createVNode(IconUpload, null, null)]),
 				!(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.disabled) && (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRemoveButton) && createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-remove`],
 					"role": "button",
@@ -68,8 +77,8 @@ var upload_picture_item_default = /* @__PURE__ */ defineComponent({
 						var _uploadCtx$onRemove;
 						return uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$onRemove = uploadCtx.onRemove) === null || _uploadCtx$onRemove === void 0 ? void 0 : _uploadCtx$onRemove.call(uploadCtx, props.file);
 					})
-				}, [(_ref4 = (_uploadCtx$slots$remo = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots5$rem = (_uploadCtx$slots5 = uploadCtx.slots)["remove-icon"]) === null || _uploadCtx$slots5$rem === void 0 ? void 0 : _uploadCtx$slots5$rem.call(_uploadCtx$slots5)) !== null && _uploadCtx$slots$remo !== void 0 ? _uploadCtx$slots$remo : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon7 = uploadCtx.customIcon) === null || _uploadCtx$customIcon7 === void 0 || (_uploadCtx$customIcon8 = _uploadCtx$customIcon7.removeIcon) === null || _uploadCtx$customIcon8 === void 0 ? void 0 : _uploadCtx$customIcon8.call(_uploadCtx$customIcon7)) !== null && _ref4 !== void 0 ? _ref4 : createVNode(IconDelete, null, null)]),
-				uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots6$ext = (_uploadCtx$slots6 = uploadCtx.slots)["extra-button"]) === null || _uploadCtx$slots6$ext === void 0 ? void 0 : _uploadCtx$slots6$ext.call(_uploadCtx$slots6, props.file)
+				}, [(_ref5 = (_uploadCtx$slots$remo = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots6$rem = (_uploadCtx$slots6 = uploadCtx.slots)["remove-icon"]) === null || _uploadCtx$slots6$rem === void 0 ? void 0 : _uploadCtx$slots6$rem.call(_uploadCtx$slots6)) !== null && _uploadCtx$slots$remo !== void 0 ? _uploadCtx$slots$remo : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon9 = uploadCtx.customIcon) === null || _uploadCtx$customIcon9 === void 0 || (_uploadCtx$customIcon10 = _uploadCtx$customIcon9.removeIcon) === null || _uploadCtx$customIcon10 === void 0 ? void 0 : _uploadCtx$customIcon10.call(_uploadCtx$customIcon9)) !== null && _ref5 !== void 0 ? _ref5 : createVNode(IconDelete, null, null)]),
+				uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots7$ext = (_uploadCtx$slots7 = uploadCtx.slots)["extra-button"]) === null || _uploadCtx$slots7$ext === void 0 ? void 0 : _uploadCtx$slots7$ext.call(_uploadCtx$slots7, props.file)
 			])])]);
 		};
 		return () => createVNode("span", { "class": cls.value }, [renderCard()]);

package/es/upload/upload-progress.js

@@ -28,29 +28,33 @@ var upload_progress_default = /* @__PURE__ */ defineComponent({
 		const uploadCtx = inject(uploadInjectionKey, void 0);
 		const renderIcon = () => {
 			if (props.file.status === "error") {
-				var _uploadCtx$slots$retr, _uploadCtx$slots, _uploadCtx$slots$retr2, _uploadCtx$customIcon, _uploadCtx$customIcon2;
+				var _ref, _uploadCtx$slots$retr, _uploadCtx$slots$retr2, _uploadCtx$slots, _uploadCtx$customIcon, _uploadCtx$customIcon2;
+				if (!(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRetryButton)) return null;
 				return createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-upload`],
 					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file)
-				}, [(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showRetryButton) && ((_uploadCtx$slots$retr = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots$retr2 = (_uploadCtx$slots = uploadCtx.slots)["retry-icon"]) === null || _uploadCtx$slots$retr2 === void 0 ? void 0 : _uploadCtx$slots$retr2.call(_uploadCtx$slots)) !== null && _uploadCtx$slots$retr !== void 0 ? _uploadCtx$slots$retr : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon = uploadCtx.customIcon) === null || _uploadCtx$customIcon === void 0 || (_uploadCtx$customIcon2 = _uploadCtx$customIcon.retryIcon) === null || _uploadCtx$customIcon2 === void 0 ? void 0 : _uploadCtx$customIcon2.call(_uploadCtx$customIcon)) || props.listType === "picture-card" ? createVNode(IconUpload, null, null) : t("upload.retry")]);
+				}, [(_ref = (_uploadCtx$slots$retr = (_uploadCtx$slots$retr2 = (_uploadCtx$slots = uploadCtx.slots)["retry-icon"]) === null || _uploadCtx$slots$retr2 === void 0 ? void 0 : _uploadCtx$slots$retr2.call(_uploadCtx$slots)) !== null && _uploadCtx$slots$retr !== void 0 ? _uploadCtx$slots$retr : (_uploadCtx$customIcon = uploadCtx.customIcon) === null || _uploadCtx$customIcon === void 0 || (_uploadCtx$customIcon2 = _uploadCtx$customIcon.retryIcon) === null || _uploadCtx$customIcon2 === void 0 ? void 0 : _uploadCtx$customIcon2.call(_uploadCtx$customIcon)) !== null && _ref !== void 0 ? _ref : props.listType === "picture-card" ? createVNode(IconUpload, null, null) : t("upload.retry")]);
 			}
 			if (props.file.status === "done") {
-				var _ref, _uploadCtx$slots$succ, _uploadCtx$slots2, _uploadCtx$slots2$suc, _uploadCtx$customIcon3, _uploadCtx$customIcon4;
-				return createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-success`] }, [(_ref = (_uploadCtx$slots$succ = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots2$suc = (_uploadCtx$slots2 = uploadCtx.slots)["success-icon"]) === null || _uploadCtx$slots2$suc === void 0 ? void 0 : _uploadCtx$slots2$suc.call(_uploadCtx$slots2)) !== null && _uploadCtx$slots$succ !== void 0 ? _uploadCtx$slots$succ : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon3 = uploadCtx.customIcon) === null || _uploadCtx$customIcon3 === void 0 || (_uploadCtx$customIcon4 = _uploadCtx$customIcon3.successIcon) === null || _uploadCtx$customIcon4 === void 0 ? void 0 : _uploadCtx$customIcon4.call(_uploadCtx$customIcon3)) !== null && _ref !== void 0 ? _ref : createVNode(IconCheck, null, null)]);
+				var _ref2, _uploadCtx$slots$succ, _uploadCtx$slots2, _uploadCtx$slots2$suc, _uploadCtx$customIcon3, _uploadCtx$customIcon4;
+				return createVNode("span", { "class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-success`] }, [(_ref2 = (_uploadCtx$slots$succ = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots2$suc = (_uploadCtx$slots2 = uploadCtx.slots)["success-icon"]) === null || _uploadCtx$slots2$suc === void 0 ? void 0 : _uploadCtx$slots2$suc.call(_uploadCtx$slots2)) !== null && _uploadCtx$slots$succ !== void 0 ? _uploadCtx$slots$succ : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon3 = uploadCtx.customIcon) === null || _uploadCtx$customIcon3 === void 0 || (_uploadCtx$customIcon4 = _uploadCtx$customIcon3.successIcon) === null || _uploadCtx$customIcon4 === void 0 ? void 0 : _uploadCtx$customIcon4.call(_uploadCtx$customIcon3)) !== null && _ref2 !== void 0 ? _ref2 : createVNode(IconCheck, null, null)]);
+			}
+			if (props.file.status === "init") {
+				if (!(uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showStartButton)) return null;
+				return createVNode(Tooltip, { "content": t("upload.start") }, { default: () => {
+					var _ref3, _uploadCtx$slots$star, _uploadCtx$slots3, _uploadCtx$slots3$sta, _uploadCtx$customIcon5, _uploadCtx$customIcon6;
+					return [createVNode("span", {
+						"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-start`],
+						"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file)
+					}, [(_ref3 = (_uploadCtx$slots$star = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots3$sta = (_uploadCtx$slots3 = uploadCtx.slots)["start-icon"]) === null || _uploadCtx$slots3$sta === void 0 ? void 0 : _uploadCtx$slots3$sta.call(_uploadCtx$slots3)) !== null && _uploadCtx$slots$star !== void 0 ? _uploadCtx$slots$star : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon5 = uploadCtx.customIcon) === null || _uploadCtx$customIcon5 === void 0 || (_uploadCtx$customIcon6 = _uploadCtx$customIcon5.startIcon) === null || _uploadCtx$customIcon6 === void 0 ? void 0 : _uploadCtx$customIcon6.call(_uploadCtx$customIcon5)) !== null && _ref3 !== void 0 ? _ref3 : createVNode(IconPlayArrowFill, null, null)])];
+				} });
 			}
-			if (props.file.status === "init") return createVNode(Tooltip, { "content": t("upload.start") }, { default: () => {
-				var _ref2, _uploadCtx$slots$star, _uploadCtx$slots3, _uploadCtx$slots3$sta, _uploadCtx$customIcon5, _uploadCtx$customIcon6;
-				return [createVNode("span", {
-					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-start`],
-					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onUpload(props.file)
-				}, [(_ref2 = (_uploadCtx$slots$star = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots3$sta = (_uploadCtx$slots3 = uploadCtx.slots)["start-icon"]) === null || _uploadCtx$slots3$sta === void 0 ? void 0 : _uploadCtx$slots3$sta.call(_uploadCtx$slots3)) !== null && _uploadCtx$slots$star !== void 0 ? _uploadCtx$slots$star : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon5 = uploadCtx.customIcon) === null || _uploadCtx$customIcon5 === void 0 || (_uploadCtx$customIcon6 = _uploadCtx$customIcon5.startIcon) === null || _uploadCtx$customIcon6 === void 0 ? void 0 : _uploadCtx$customIcon6.call(_uploadCtx$customIcon5)) !== null && _ref2 !== void 0 ? _ref2 : createVNode(IconPlayArrowFill, null, null)])];
-			} });
 			return (uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.showCancelButton) && createVNode(Tooltip, { "content": t("upload.cancel") }, { default: () => {
-				var _ref3, _uploadCtx$slots$canc, _uploadCtx$slots4, _uploadCtx$slots4$can, _uploadCtx$customIcon7, _uploadCtx$customIcon8;
+				var _ref4, _uploadCtx$slots$canc, _uploadCtx$slots4, _uploadCtx$slots4$can, _uploadCtx$customIcon7, _uploadCtx$customIcon8;
 				return [createVNode("span", {
 					"class": [uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls, `${uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.iconCls}-cancel`],
 					"onClick": () => uploadCtx === null || uploadCtx === void 0 ? void 0 : uploadCtx.onAbort(props.file)
-				}, [(_ref3 = (_uploadCtx$slots$canc = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots4$can = (_uploadCtx$slots4 = uploadCtx.slots)["cancel-icon"]) === null || _uploadCtx$slots4$can === void 0 ? void 0 : _uploadCtx$slots4$can.call(_uploadCtx$slots4)) !== null && _uploadCtx$slots$canc !== void 0 ? _uploadCtx$slots$canc : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon7 = uploadCtx.customIcon) === null || _uploadCtx$customIcon7 === void 0 || (_uploadCtx$customIcon8 = _uploadCtx$customIcon7.cancelIcon) === null || _uploadCtx$customIcon8 === void 0 ? void 0 : _uploadCtx$customIcon8.call(_uploadCtx$customIcon7)) !== null && _ref3 !== void 0 ? _ref3 : createVNode(IconPause, null, null)])];
+				}, [(_ref4 = (_uploadCtx$slots$canc = uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$slots4$can = (_uploadCtx$slots4 = uploadCtx.slots)["cancel-icon"]) === null || _uploadCtx$slots4$can === void 0 ? void 0 : _uploadCtx$slots4$can.call(_uploadCtx$slots4)) !== null && _uploadCtx$slots$canc !== void 0 ? _uploadCtx$slots$canc : uploadCtx === null || uploadCtx === void 0 || (_uploadCtx$customIcon7 = uploadCtx.customIcon) === null || _uploadCtx$customIcon7 === void 0 || (_uploadCtx$customIcon8 = _uploadCtx$customIcon7.cancelIcon) === null || _uploadCtx$customIcon8 === void 0 ? void 0 : _uploadCtx$customIcon8.call(_uploadCtx$customIcon7)) !== null && _ref4 !== void 0 ? _ref4 : createVNode(IconPause, null, null)])];
 			} });
 		};
 		const renderProgress = () => {