@element-plus/nightly 0.0.20260723 → 0.0.20260725

package/es/components/notification/src/notification.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notification.mjs","names":[],"sources":["../../../../../../packages/components/notification/src/notification.ts"],"sourcesContent":["import { Close } from '@element-plus/icons-vue'\nimport { buildProps, definePropType, iconPropType } from '@element-plus/utils'\n\nimport type { AppContext, ExtractPublicPropTypes, VNode } from 'vue'\nimport type { ClassValue, IconPropType } from '@element-plus/utils'\nimport type Notification from './notification.vue'\n\nexport const notificationTypes = [\n  'primary',\n  'success',\n  'info',\n  'warning',\n  'error',\n] as const\n\nexport type NotificationType = (typeof notificationTypes)[number] | ''\n\nexport type NotificationPosition =\n  'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\nexport interface NotificationProps {\n  /**\n   * @description custom class name for Notification\n   */\n  customClass?: ClassValue\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString?: boolean\n  /**\n   * @description duration before close. It will not automatically close if set 0\n   */\n  duration?: number\n  /**\n   * @description custom icon component. It will be overridden by `type`\n   */\n  icon?: IconPropType\n  /**\n   * @description notification dom id\n   */\n  id?: string\n  /**\n   * @description description text\n   */\n  message?: string | VNode | (() => VNode)\n  /**\n   * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset\n   */\n  offset?: number\n  /**\n   * @description callback function when notification clicked\n   */\n  onClick?: () => void\n  /**\n   * @description callback function when closed\n   */\n  onClose: () => void\n  /**\n   * @description custom position\n   */\n  position?: NotificationPosition\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description title\n   */\n  title?: string\n  /**\n   * @description notification type\n   */\n  type?: NotificationType\n  /**\n   * @description initial zIndex\n   */\n  zIndex?: number\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon?: IconPropType\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `NotificationProps` instead.\n */\nexport const notificationProps = buildProps({\n  /**\n   * @description custom class name for Notification\n   */\n  customClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString: Boolean,\n  /**\n   * @description duration before close. It will not automatically close if set 0\n   */\n  duration: {\n    type: Number,\n    default: 4500,\n  },\n  /**\n   * @description custom icon component. It will be overridden by `type`\n   */\n  icon: {\n    type: iconPropType,\n  },\n  /**\n   * @description notification dom id\n   */\n  id: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description description text\n   */\n  message: {\n    type: definePropType<string | VNode | (() => VNode)>([\n      String,\n      Object,\n      Function,\n    ]),\n    default: '',\n  },\n  /**\n   * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset\n   */\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description callback function when notification clicked\n   */\n  onClick: {\n    type: definePropType<() => void>(Function),\n    default: () => undefined,\n  },\n  /**\n   * @description callback function when closed\n   */\n  onClose: {\n    type: definePropType<() => void>(Function),\n    required: true,\n  },\n  /**\n   * @description custom position\n   */\n  position: {\n    type: String,\n    values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    default: 'top-right',\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description title\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description notification type\n   */\n  type: {\n    type: String,\n    values: [...notificationTypes, ''],\n    default: '',\n  },\n  /**\n   * @description initial zIndex\n   */\n  zIndex: Number,\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon: {\n    type: iconPropType,\n    default: Close,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `NotificationProps` instead.\n */\nexport type NotificationPropsPublic = ExtractPublicPropTypes<\n  typeof notificationProps\n>\n\nexport const notificationEmits = {\n  destroy: () => true,\n}\nexport type NotificationEmits = typeof notificationEmits\n\nexport type NotificationInstance = InstanceType<typeof Notification> & unknown\n\nexport type NotificationOptions = Omit<NotificationProps, 'id' | 'onClose'> & {\n  /**\n   * @description set the root element for the notification, default to `document.body`\n   */\n  appendTo?: HTMLElement | string\n  /**\n   * @description callback function when closed\n   */\n  onClose?(vm: VNode): void\n}\nexport type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>\n\nexport interface NotificationHandle {\n  close: () => void\n}\n\nexport type NotificationParams = Partial<NotificationOptions> | string | VNode\nexport type NotificationParamsTyped =\n  Partial<NotificationOptionsTyped> | string | VNode\n\nexport interface NotifyFn {\n  (\n    options?: NotificationParams,\n    appContext?: null | AppContext\n  ): NotificationHandle\n  closeAll(): void\n  updateOffsets(position?: NotificationOptions['position']): void\n  _context: AppContext | null\n}\n\nexport type NotifyTypedFn = (\n  options?: NotificationParamsTyped,\n  appContext?: null | AppContext\n) => NotificationHandle\n\nexport interface Notify extends NotifyFn {\n  primary: NotifyTypedFn\n  success: NotifyTypedFn\n  warning: NotifyTypedFn\n  error: NotifyTypedFn\n  info: NotifyTypedFn\n}\n\nexport interface NotificationQueueItem {\n  vm: VNode\n}\n\nexport type NotificationQueue = NotificationQueueItem[]\n"],"mappings":";;;;AAOA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACD;;;;AAyED,MAAa,oBAAoB,WAAW;;;;CAI1C,aAAa;EACX,MAAM,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,0BAA0B;;;;CAI1B,UAAU;EACR,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM,EACJ,MAAM,cACP;;;;CAID,IAAI;EACF,MAAM;EACN,SAAS;EACV;;;;CAID,SAAS;EACP,MAAM,eAA+C;GACnD;GACA;GACA;GACD,CAAC;EACF,SAAS;EACV;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,SAAS;EACP,MAAM,eAA2B,SAAS;EAC1C,eAAe,KAAA;EAChB;;;;CAID,SAAS;EACP,MAAM,eAA2B,SAAS;EAC1C,UAAU;EACX;;;;CAID,UAAU;EACR,MAAM;EACN,QAAQ;GAAC;GAAa;GAAY;GAAgB;GAAc;EAChE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,OAAO;EACL,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,GAAG,mBAAmB,GAAG;EAClC,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,WAAW;EACT,MAAM;EACN,SAAS;EACV;CACF,CAAU;AASX,MAAa,oBAAoB,EAC/B,eAAe,MAChB"}
+{"version":3,"file":"notification.mjs","names":[],"sources":["../../../../../../packages/components/notification/src/notification.ts"],"sourcesContent":["import { Close } from '@element-plus/icons-vue'\nimport { buildProps, definePropType, iconPropType } from '@element-plus/utils'\n\nimport type { AppContext, ExtractPublicPropTypes, Ref, VNode } from 'vue'\nimport type { ClassValue, IconPropType } from '@element-plus/utils'\nimport type { ProgressProps } from '@element-plus/components/progress'\nimport type Notification from './notification.vue'\n\nexport const notificationTypes = [\n  'primary',\n  'success',\n  'info',\n  'warning',\n  'error',\n] as const\n\nexport type NotificationType = (typeof notificationTypes)[number] | ''\n\nexport type NotificationPosition =\n  'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n/**\n * Progress bar configuration. `percentage`, `type`, `duration`, `indeterminate`\n * and `width` are excluded: the bar is always a countdown-driven line.\n */\nexport type NotificationProgress = Omit<\n  Partial<ProgressProps>,\n  'percentage' | 'type' | 'duration' | 'indeterminate' | 'width'\n>\n\nexport interface NotificationProps {\n  /**\n   * @description custom class name for Notification\n   */\n  customClass?: ClassValue\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString?: boolean\n  /**\n   * @description duration before close. It will not automatically close if set 0\n   */\n  duration?: number\n  /**\n   * @description custom icon component. It will be overridden by `type`\n   */\n  icon?: IconPropType\n  /**\n   * @description notification dom id\n   */\n  id?: string\n  /**\n   * @description description text\n   */\n  message?: string | VNode | (() => VNode)\n  /**\n   * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset\n   */\n  offset?: number\n  /**\n   * @description callback function when notification clicked\n   */\n  onClick?: () => void\n  /**\n   * @description callback function when closed\n   */\n  onClose: () => void\n  /**\n   * @description custom position\n   */\n  position?: NotificationPosition\n  /**\n   * @description whether to show a close button\n   */\n  showClose?: boolean\n  /**\n   * @description title\n   */\n  title?: string\n  /**\n   * @description notification type\n   */\n  type?: NotificationType\n  /**\n   * @description initial zIndex\n   */\n  zIndex?: number\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon?: IconPropType\n  /**\n   * @description progress bar indicating auto-close countdown. Set `true` to show a default progress bar, or pass an object to customize it (options of `ElProgress`)\n   */\n  progress?: boolean | NotificationProgress\n  /**\n   * @description whether to pause the timer when hovering over the notification\n   */\n  pauseOnHover?: boolean\n}\n\n/**\n * @deprecated Removed after 3.0.0, Use `NotificationProps` instead.\n */\nexport const notificationProps = buildProps({\n  /**\n   * @description custom class name for Notification\n   */\n  customClass: {\n    type: definePropType<ClassValue>([String, Array, Object, Boolean]),\n    default: '',\n  },\n  /**\n   * @description whether `message` is treated as HTML string\n   */\n  dangerouslyUseHTMLString: Boolean,\n  /**\n   * @description duration before close. It will not automatically close if set 0\n   */\n  duration: {\n    type: Number,\n    default: 4500,\n  },\n  /**\n   * @description custom icon component. It will be overridden by `type`\n   */\n  icon: {\n    type: iconPropType,\n  },\n  /**\n   * @description notification dom id\n   */\n  id: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description description text\n   */\n  message: {\n    type: definePropType<string | VNode | (() => VNode)>([\n      String,\n      Object,\n      Function,\n    ]),\n    default: '',\n  },\n  /**\n   * @description offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset\n   */\n  offset: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description callback function when notification clicked\n   */\n  onClick: {\n    type: definePropType<() => void>(Function),\n    default: () => undefined,\n  },\n  /**\n   * @description callback function when closed\n   */\n  onClose: {\n    type: definePropType<() => void>(Function),\n    required: true,\n  },\n  /**\n   * @description custom position\n   */\n  position: {\n    type: String,\n    values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],\n    default: 'top-right',\n  },\n  /**\n   * @description whether to show a close button\n   */\n  showClose: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description title\n   */\n  title: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description notification type\n   */\n  type: {\n    type: String,\n    values: [...notificationTypes, ''],\n    default: '',\n  },\n  /**\n   * @description initial zIndex\n   */\n  zIndex: Number,\n  /**\n   * @description custom close icon, default is Close\n   */\n  closeIcon: {\n    type: iconPropType,\n    default: Close,\n  },\n  /**\n   * @description progress bar indicating auto-close countdown. Set `true` to show a default progress bar, or pass an object to customize it (options of `ElProgress`)\n   */\n  progress: {\n    type: definePropType<boolean | NotificationProgress>([Boolean, Object]),\n    default: false,\n  },\n  /**\n   * @description whether to pause the timer when hovering over the notification\n   */\n  pauseOnHover: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\n\n/**\n * @deprecated Removed after 3.0.0, Use `NotificationProps` instead.\n */\nexport type NotificationPropsPublic = ExtractPublicPropTypes<\n  typeof notificationProps\n>\n\nexport const notificationEmits = {\n  destroy: () => true,\n}\nexport type NotificationEmits = typeof notificationEmits\n\nexport type NotificationInstance = InstanceType<typeof Notification> & unknown\n\nexport interface NotificationExposed {\n  /** @description close notification */\n  close: () => void\n  visible: Ref<boolean>\n}\n\nexport type NotificationOptions = Omit<NotificationProps, 'id' | 'onClose'> & {\n  /**\n   * @description set the root element for the notification, default to `document.body`\n   */\n  appendTo?: HTMLElement | string\n  /**\n   * @description callback function when closed\n   */\n  onClose?(vm: VNode): void\n}\nexport type NotificationOptionsTyped = Omit<NotificationOptions, 'type'>\n\nexport interface NotificationHandle {\n  close: () => void\n}\n\nexport type NotificationParams = Partial<NotificationOptions> | string | VNode\nexport type NotificationParamsTyped =\n  Partial<NotificationOptionsTyped> | string | VNode\n\nexport interface NotifyFn {\n  (\n    options?: NotificationParams,\n    appContext?: null | AppContext\n  ): NotificationHandle\n  closeAll(): void\n  updateOffsets(position?: NotificationOptions['position']): void\n  _context: AppContext | null\n}\n\nexport type NotifyTypedFn = (\n  options?: NotificationParamsTyped,\n  appContext?: null | AppContext\n) => NotificationHandle\n\nexport interface Notify extends NotifyFn {\n  primary: NotifyTypedFn\n  success: NotifyTypedFn\n  warning: NotifyTypedFn\n  error: NotifyTypedFn\n  info: NotifyTypedFn\n}\n\nexport interface NotificationQueueItem {\n  vm: VNode\n}\n\nexport type NotificationQueue = NotificationQueueItem[]\n"],"mappings":";;;;AAQA,MAAa,oBAAoB;CAC/B;CACA;CACA;CACA;CACA;CACD;;;;AA0FD,MAAa,oBAAoB,WAAW;;;;CAI1C,aAAa;EACX,MAAM,eAA2B;GAAC;GAAQ;GAAO;GAAQ;GAAQ,CAAC;EAClE,SAAS;EACV;;;;CAID,0BAA0B;;;;CAI1B,UAAU;EACR,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM,EACJ,MAAM,cACP;;;;CAID,IAAI;EACF,MAAM;EACN,SAAS;EACV;;;;CAID,SAAS;EACP,MAAM,eAA+C;GACnD;GACA;GACA;GACD,CAAC;EACF,SAAS;EACV;;;;CAID,QAAQ;EACN,MAAM;EACN,SAAS;EACV;;;;CAID,SAAS;EACP,MAAM,eAA2B,SAAS;EAC1C,eAAe,KAAA;EAChB;;;;CAID,SAAS;EACP,MAAM,eAA2B,SAAS;EAC1C,UAAU;EACX;;;;CAID,UAAU;EACR,MAAM;EACN,QAAQ;GAAC;GAAa;GAAY;GAAgB;GAAc;EAChE,SAAS;EACV;;;;CAID,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,OAAO;EACL,MAAM;EACN,SAAS;EACV;;;;CAID,MAAM;EACJ,MAAM;EACN,QAAQ,CAAC,GAAG,mBAAmB,GAAG;EAClC,SAAS;EACV;;;;CAID,QAAQ;;;;CAIR,WAAW;EACT,MAAM;EACN,SAAS;EACV;;;;CAID,UAAU;EACR,MAAM,eAA+C,CAAC,SAAS,OAAO,CAAC;EACvE,SAAS;EACV;;;;CAID,cAAc;EACZ,MAAM;EACN,SAAS;EACV;CACF,CAAU;AASX,MAAa,oBAAoB,EAC/B,eAAe,MAChB"}

package/es/components/notification/src/notification.vue.d.ts

@@ -1,6 +1,6 @@
 import { IconPropType } from "../../../utils/vue/icon.js";
 import { ClassValue } from "../../../utils/typescript.js";
-import { NotificationPosition, NotificationProps, NotificationType } from "./notification.js";
+import { NotificationPosition, NotificationProgress, NotificationProps, NotificationType } from "./notification.js";
 import * as _$vue from "vue";
 
 //#region ../../packages/components/notification/src/notification.vue.d.ts
@@ -18,12 +18,14 @@ declare const __VLS_base: _$vue.DefineComponent<NotificationProps, {
   onDestroy?: (() => any) | undefined;
 }>, {
   type: NotificationType;
-  message: string | _$vue.VNode | (() => _$vue.VNode);
   offset: number;
   position: NotificationPosition;
+  message: string | _$vue.VNode | (() => _$vue.VNode);
   title: string;
   id: string;
   onClick: () => void;
+  progress: boolean | NotificationProgress;
+  pauseOnHover: boolean;
   closeIcon: IconPropType;
   showClose: boolean;
   duration: number;

package/es/components/notification/src/notification.vue_vue_type_script_setup_true_lang.mjs

@@ -3,9 +3,10 @@ import { getEventCode } from "../../../utils/dom/event.mjs";
 import { TypeComponentsMap } from "../../../utils/vue/icon.mjs";
 import { ElIcon } from "../../icon/index.mjs";
 import { useGlobalComponentSettings } from "../../config-provider/src/hooks/use-global-config.mjs";
+import { ElProgress } from "../../progress/index.mjs";
 import { notificationEmits, notificationProps } from "./notification.mjs";
-import { useEventListener, useTimeoutFn } from "@vueuse/core";
-import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
+import { useEventListener, useIntervalFn, useTimeoutFn } from "@vueuse/core";
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, onMounted, openBlock, ref, renderSlot, resolveDynamicComponent, toDisplayString, unref, vShow, withCtx, withDirectives, withModifiers } from "vue";
 //#region ../../packages/components/notification/src/notification.vue?vue&type=script&setup=true&lang.ts
 const _hoisted_1 = ["id"];
 const _hoisted_2 = ["textContent"];
@@ -22,10 +23,28 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 		const { nextZIndex, currentZIndex } = zIndex;
 		const visible = ref(false);
 		let timer = void 0;
+		const percentage = ref(100);
+		let elapsed = 0;
+		let startedAt = 0;
 		const typeClass = computed(() => {
 			const type = props.type;
 			return type && TypeComponentsMap[props.type] ? ns.m(type) : "";
 		});
+		const showProgressBar = computed(() => !!props.progress && props.duration > 0);
+		const progressStatus = computed(() => {
+			switch (props.type) {
+				case "success": return "success";
+				case "warning": return "warning";
+				case "error": return "exception";
+				default: return;
+			}
+		});
+		const progressProps = computed(() => ({
+			status: progressStatus.value,
+			strokeWidth: 3,
+			showText: false,
+			...typeof props.progress === "object" ? props.progress : void 0
+		}));
 		const iconComponent = computed(() => {
 			if (!props.type) return props.icon;
 			return TypeComponentsMap[props.type] || props.icon;
@@ -38,16 +57,43 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 				zIndex: props.zIndex ?? currentZIndex.value
 			};
 		});
+		const { pause: pauseProgress, resume: resumeProgress } = useIntervalFn(() => {
+			percentage.value = Math.max(0, 100 - (elapsed + Date.now() - startedAt) / props.duration * 100);
+		}, 100, { immediate: false });
 		function startTimer() {
-			if (props.duration > 0) ({stop: timer} = useTimeoutFn(() => {
+			if (props.duration <= 0) return;
+			timer?.();
+			pauseProgress();
+			startedAt = Date.now();
+			const remaining = Math.max(0, props.duration - elapsed);
+			({stop: timer} = useTimeoutFn(() => {
 				if (visible.value) close();
-			}, props.duration));
+			}, remaining));
+			if (showProgressBar.value) {
+				percentage.value = remaining / props.duration * 100;
+				resumeProgress();
+			}
 		}
 		function clearTimer() {
 			timer?.();
+			pauseProgress();
+			if (startedAt > 0) {
+				elapsed += Date.now() - startedAt;
+				startedAt = 0;
+			}
+		}
+		let isHovered = false;
+		function onMouseEnter() {
+			isHovered = true;
+			if (props.pauseOnHover) clearTimer();
+		}
+		function onMouseLeave() {
+			isHovered = false;
+			if (props.pauseOnHover) startTimer();
 		}
 		function close() {
 			visible.value = false;
+			clearTimer();
 		}
 		function onKeydown(event) {
 			switch (getEventCode(event)) {
@@ -59,6 +105,8 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					if (visible.value) close();
 					break;
 				default:
+					if (isHovered && props.pauseOnHover) break;
+					clearTimer();
 					startTimer();
 					break;
 			}
@@ -90,33 +138,41 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
 					]),
 					style: normalizeStyle(positionStyle.value),
 					role: "alert",
-					onMouseenter: clearTimer,
-					onMouseleave: startTimer,
+					onMouseenter: onMouseEnter,
+					onMouseleave: onMouseLeave,
 					onClick: _cache[0] || (_cache[0] = (...args) => __props.onClick && __props.onClick(...args))
-				}, [iconComponent.value ? (openBlock(), createBlock(unref(ElIcon), {
-					key: 0,
-					class: normalizeClass([unref(ns).e("icon"), typeClass.value])
-				}, {
-					default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
-					_: 1
-				}, 8, ["class"])) : createCommentVNode("v-if", true), createElementVNode("div", { class: normalizeClass(unref(ns).e("group")) }, [
-					createElementVNode("h2", {
-						class: normalizeClass(unref(ns).e("title")),
-						textContent: toDisplayString(__props.title)
-					}, null, 10, _hoisted_2),
-					withDirectives(createElementVNode("div", {
-						class: normalizeClass(unref(ns).e("content")),
-						style: normalizeStyle(!!__props.title ? void 0 : { margin: 0 })
-					}, [renderSlot(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.message), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vShow, __props.message]]),
-					__props.showClose ? (openBlock(), createBlock(unref(ElIcon), {
+				}, [
+					iconComponent.value ? (openBlock(), createBlock(unref(ElIcon), {
 						key: 0,
-						class: normalizeClass(unref(ns).e("closeBtn")),
-						onClick: withModifiers(close, ["stop"])
+						class: normalizeClass([unref(ns).e("icon"), typeClass.value])
 					}, {
-						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.closeIcon)))]),
+						default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(iconComponent.value)))]),
 						_: 1
-					}, 8, ["class"])) : createCommentVNode("v-if", true)
-				], 2)], 46, _hoisted_1), [[vShow, visible.value]])]),
+					}, 8, ["class"])) : createCommentVNode("v-if", true),
+					createElementVNode("div", { class: normalizeClass(unref(ns).e("group")) }, [
+						createElementVNode("h2", {
+							class: normalizeClass(unref(ns).e("title")),
+							textContent: toDisplayString(__props.title)
+						}, null, 10, _hoisted_2),
+						withDirectives(createElementVNode("div", {
+							class: normalizeClass(unref(ns).e("content")),
+							style: normalizeStyle(!!__props.title ? void 0 : { margin: 0 })
+						}, [renderSlot(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? (openBlock(), createElementBlock("p", _hoisted_3, toDisplayString(__props.message), 1)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" Caution here, message could've been compromised, never use user's input as message "), createElementVNode("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vShow, __props.message]]),
+						__props.showClose ? (openBlock(), createBlock(unref(ElIcon), {
+							key: 0,
+							class: normalizeClass(unref(ns).e("closeBtn")),
+							onClick: withModifiers(close, ["stop"])
+						}, {
+							default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(__props.closeIcon)))]),
+							_: 1
+						}, 8, ["class"])) : createCommentVNode("v-if", true)
+					], 2),
+					showProgressBar.value ? (openBlock(), createElementBlock("div", {
+						key: 1,
+						class: normalizeClass(unref(ns).e("progress")),
+						"aria-hidden": "true"
+					}, [createVNode(unref(ElProgress), mergeProps(progressProps.value, { percentage: percentage.value }), null, 16, ["percentage"])], 2)) : createCommentVNode("v-if", true)
+				], 46, _hoisted_1), [[vShow, visible.value]])]),
 				_: 3
 			}, 8, ["name", "onBeforeLeave"]);
 		};

package/es/components/notification/src/notification.vue_vue_type_script_setup_true_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notification.vue_vue_type_script_setup_true_lang.mjs","names":["$emit"],"sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[ns.b(), customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n      @click=\"onClick\"\n    >\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('group')\">\n        <h2 :class=\"ns.e('title')\" v-text=\"title\" />\n        <div\n          v-show=\"message\"\n          :class=\"ns.e('content')\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromised, never use user's input as message -->\n            <p v-else v-html=\"message\" />\n          </slot>\n        </div>\n        <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n          <component :is=\"closeIcon\" />\n        </el-icon>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, markRaw, onMounted, ref } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponentsMap, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { notificationEmits } from './notification'\nimport { Close } from '@element-plus/icons-vue'\n\nimport type { CSSProperties } from 'vue'\nimport type { NotificationProps } from './notification'\n\ndefineOptions({\n  name: 'ElNotification',\n})\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  customClass: '',\n  duration: 4500,\n  id: '',\n  message: '',\n  offset: 0,\n  onClick: () => undefined,\n  position: 'top-right',\n  showClose: true,\n  title: '',\n  type: '',\n  closeIcon: markRaw(Close),\n})\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\n\nconst typeClass = computed(() => {\n  const type = props.type\n  return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n})\n\nconst iconComponent = computed(() => {\n  if (!props.type) return props.icon\n  return TypeComponentsMap[props.type] || props.icon\n})\n\nconst horizontalClass = computed(() =>\n  props.position.endsWith('right') ? 'right' : 'left'\n)\n\nconst verticalProperty = computed(() =>\n  props.position.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst positionStyle = computed<CSSProperties>(() => {\n  return {\n    [verticalProperty.value]: `${props.offset}px`,\n    zIndex: props.zIndex ?? currentZIndex.value,\n  }\n})\n\nfunction startTimer() {\n  if (props.duration > 0) {\n    ;({ stop: timer } = useTimeoutFn(() => {\n      if (visible.value) close()\n    }, props.duration))\n  }\n}\n\nfunction clearTimer() {\n  timer?.()\n}\n\nfunction close() {\n  visible.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.delete:\n    case EVENT_CODE.backspace:\n      clearTimer() // press delete/backspace clear timer\n      break\n    case EVENT_CODE.esc:\n      // press esc to close the notification\n      if (visible.value) {\n        close()\n      }\n      break\n    default: // resume timer\n      startTimer()\n      break\n  }\n}\n\n// lifecycle\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n})\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"notification.vue_vue_type_script_setup_true_lang.mjs","names":["$emit"],"sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[ns.b(), customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"onMouseEnter\"\n      @mouseleave=\"onMouseLeave\"\n      @click=\"onClick\"\n    >\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('group')\">\n        <h2 :class=\"ns.e('title')\" v-text=\"title\" />\n        <div\n          v-show=\"message\"\n          :class=\"ns.e('content')\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromised, never use user's input as message -->\n            <p v-else v-html=\"message\" />\n          </slot>\n        </div>\n        <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n          <component :is=\"closeIcon\" />\n        </el-icon>\n      </div>\n      <div v-if=\"showProgressBar\" :class=\"ns.e('progress')\" aria-hidden=\"true\">\n        <el-progress v-bind=\"progressProps\" :percentage=\"percentage\" />\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, markRaw, onMounted, ref } from 'vue'\nimport { useEventListener, useIntervalFn, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponentsMap, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ElProgress } from '@element-plus/components/progress'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { notificationEmits } from './notification'\nimport { Close } from '@element-plus/icons-vue'\n\nimport type { CSSProperties } from 'vue'\nimport type { NotificationProps } from './notification'\n\ndefineOptions({\n  name: 'ElNotification',\n})\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  customClass: '',\n  duration: 4500,\n  id: '',\n  message: '',\n  offset: 0,\n  onClick: () => undefined,\n  position: 'top-right',\n  showClose: true,\n  title: '',\n  type: '',\n  closeIcon: markRaw(Close),\n  progress: false,\n  pauseOnHover: true,\n})\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\nconst percentage = ref(100)\nlet elapsed = 0\nlet startedAt = 0\n\nconst typeClass = computed(() => {\n  const type = props.type\n  return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n})\n\nconst showProgressBar = computed(() => !!props.progress && props.duration > 0)\n\nconst progressStatus = computed<\n  'success' | 'warning' | 'exception' | undefined\n>(() => {\n  switch (props.type) {\n    case 'success':\n      return 'success'\n    case 'warning':\n      return 'warning'\n    case 'error':\n      return 'exception'\n    default:\n      return undefined\n  }\n})\n\nconst progressProps = computed(() => ({\n  status: progressStatus.value,\n  strokeWidth: 3,\n  showText: false,\n  ...(typeof props.progress === 'object' ? props.progress : undefined),\n}))\n\nconst iconComponent = computed(() => {\n  if (!props.type) return props.icon\n  return TypeComponentsMap[props.type] || props.icon\n})\n\nconst horizontalClass = computed(() =>\n  props.position.endsWith('right') ? 'right' : 'left'\n)\n\nconst verticalProperty = computed(() =>\n  props.position.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst positionStyle = computed<CSSProperties>(() => {\n  return {\n    [verticalProperty.value]: `${props.offset}px`,\n    zIndex: props.zIndex ?? currentZIndex.value,\n  }\n})\n\n// tick interval matches the 0.1s width transition in the style, keeping the bar smooth\nconst { pause: pauseProgress, resume: resumeProgress } = useIntervalFn(\n  () => {\n    percentage.value = Math.max(\n      0,\n      100 - ((elapsed + Date.now() - startedAt) / props.duration) * 100\n    )\n  },\n  100,\n  { immediate: false }\n)\n\nfunction startTimer() {\n  if (props.duration <= 0) return\n\n  timer?.()\n  pauseProgress()\n  startedAt = Date.now()\n\n  const remaining = Math.max(0, props.duration - elapsed)\n\n  // close timer with remaining duration\n  ;({ stop: timer } = useTimeoutFn(() => {\n    if (visible.value) close()\n  }, remaining))\n\n  // progress bar resumes from current position\n  if (showProgressBar.value) {\n    percentage.value = (remaining / props.duration) * 100\n    resumeProgress()\n  }\n}\n\nfunction clearTimer() {\n  timer?.()\n  pauseProgress()\n  if (startedAt > 0) {\n    elapsed += Date.now() - startedAt\n    startedAt = 0\n  }\n}\n\nlet isHovered = false\n\nfunction onMouseEnter() {\n  isHovered = true\n  if (props.pauseOnHover) clearTimer()\n}\n\nfunction onMouseLeave() {\n  isHovered = false\n  if (props.pauseOnHover) startTimer()\n}\n\nfunction close() {\n  visible.value = false\n  clearTimer()\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.delete:\n    case EVENT_CODE.backspace:\n      clearTimer() // press delete/backspace clear timer\n      break\n    case EVENT_CODE.esc:\n      // press esc to close the notification\n      if (visible.value) {\n        close()\n      }\n      break\n    default: // resume timer\n      // keep the timer paused while the pointer is still over the notification\n      if (isHovered && props.pauseOnHover) break\n      clearTimer()\n      startTimer()\n      break\n  }\n}\n\n// lifecycle\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n})\n</script>\n"],"mappings":"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"}

package/es/components/notification/src/notification2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notification2.mjs","names":[],"sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[ns.b(), customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n      @click=\"onClick\"\n    >\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('group')\">\n        <h2 :class=\"ns.e('title')\" v-text=\"title\" />\n        <div\n          v-show=\"message\"\n          :class=\"ns.e('content')\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromised, never use user's input as message -->\n            <p v-else v-html=\"message\" />\n          </slot>\n        </div>\n        <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n          <component :is=\"closeIcon\" />\n        </el-icon>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, markRaw, onMounted, ref } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponentsMap, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { notificationEmits } from './notification'\nimport { Close } from '@element-plus/icons-vue'\n\nimport type { CSSProperties } from 'vue'\nimport type { NotificationProps } from './notification'\n\ndefineOptions({\n  name: 'ElNotification',\n})\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  customClass: '',\n  duration: 4500,\n  id: '',\n  message: '',\n  offset: 0,\n  onClick: () => undefined,\n  position: 'top-right',\n  showClose: true,\n  title: '',\n  type: '',\n  closeIcon: markRaw(Close),\n})\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\n\nconst typeClass = computed(() => {\n  const type = props.type\n  return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n})\n\nconst iconComponent = computed(() => {\n  if (!props.type) return props.icon\n  return TypeComponentsMap[props.type] || props.icon\n})\n\nconst horizontalClass = computed(() =>\n  props.position.endsWith('right') ? 'right' : 'left'\n)\n\nconst verticalProperty = computed(() =>\n  props.position.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst positionStyle = computed<CSSProperties>(() => {\n  return {\n    [verticalProperty.value]: `${props.offset}px`,\n    zIndex: props.zIndex ?? currentZIndex.value,\n  }\n})\n\nfunction startTimer() {\n  if (props.duration > 0) {\n    ;({ stop: timer } = useTimeoutFn(() => {\n      if (visible.value) close()\n    }, props.duration))\n  }\n}\n\nfunction clearTimer() {\n  timer?.()\n}\n\nfunction close() {\n  visible.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.delete:\n    case EVENT_CODE.backspace:\n      clearTimer() // press delete/backspace clear timer\n      break\n    case EVENT_CODE.esc:\n      // press esc to close the notification\n      if (visible.value) {\n        close()\n      }\n      break\n    default: // resume timer\n      startTimer()\n      break\n  }\n}\n\n// lifecycle\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n})\n</script>\n"],"mappings":""}
+{"version":3,"file":"notification2.mjs","names":[],"sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n  <transition\n    :name=\"ns.b('fade')\"\n    @before-leave=\"onClose\"\n    @after-leave=\"$emit('destroy')\"\n  >\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      :class=\"[ns.b(), customClass, horizontalClass]\"\n      :style=\"positionStyle\"\n      role=\"alert\"\n      @mouseenter=\"onMouseEnter\"\n      @mouseleave=\"onMouseLeave\"\n      @click=\"onClick\"\n    >\n      <el-icon v-if=\"iconComponent\" :class=\"[ns.e('icon'), typeClass]\">\n        <component :is=\"iconComponent\" />\n      </el-icon>\n      <div :class=\"ns.e('group')\">\n        <h2 :class=\"ns.e('title')\" v-text=\"title\" />\n        <div\n          v-show=\"message\"\n          :class=\"ns.e('content')\"\n          :style=\"!!title ? undefined : { margin: 0 }\"\n        >\n          <slot>\n            <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n            <!-- Caution here, message could've been compromised, never use user's input as message -->\n            <p v-else v-html=\"message\" />\n          </slot>\n        </div>\n        <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n          <component :is=\"closeIcon\" />\n        </el-icon>\n      </div>\n      <div v-if=\"showProgressBar\" :class=\"ns.e('progress')\" aria-hidden=\"true\">\n        <el-progress v-bind=\"progressProps\" :percentage=\"percentage\" />\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, markRaw, onMounted, ref } from 'vue'\nimport { useEventListener, useIntervalFn, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponentsMap, getEventCode } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { ElProgress } from '@element-plus/components/progress'\nimport { useGlobalComponentSettings } from '@element-plus/components/config-provider'\nimport { notificationEmits } from './notification'\nimport { Close } from '@element-plus/icons-vue'\n\nimport type { CSSProperties } from 'vue'\nimport type { NotificationProps } from './notification'\n\ndefineOptions({\n  name: 'ElNotification',\n})\n\nconst props = withDefaults(defineProps<NotificationProps>(), {\n  customClass: '',\n  duration: 4500,\n  id: '',\n  message: '',\n  offset: 0,\n  onClick: () => undefined,\n  position: 'top-right',\n  showClose: true,\n  title: '',\n  type: '',\n  closeIcon: markRaw(Close),\n  progress: false,\n  pauseOnHover: true,\n})\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\nconst percentage = ref(100)\nlet elapsed = 0\nlet startedAt = 0\n\nconst typeClass = computed(() => {\n  const type = props.type\n  return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n})\n\nconst showProgressBar = computed(() => !!props.progress && props.duration > 0)\n\nconst progressStatus = computed<\n  'success' | 'warning' | 'exception' | undefined\n>(() => {\n  switch (props.type) {\n    case 'success':\n      return 'success'\n    case 'warning':\n      return 'warning'\n    case 'error':\n      return 'exception'\n    default:\n      return undefined\n  }\n})\n\nconst progressProps = computed(() => ({\n  status: progressStatus.value,\n  strokeWidth: 3,\n  showText: false,\n  ...(typeof props.progress === 'object' ? props.progress : undefined),\n}))\n\nconst iconComponent = computed(() => {\n  if (!props.type) return props.icon\n  return TypeComponentsMap[props.type] || props.icon\n})\n\nconst horizontalClass = computed(() =>\n  props.position.endsWith('right') ? 'right' : 'left'\n)\n\nconst verticalProperty = computed(() =>\n  props.position.startsWith('top') ? 'top' : 'bottom'\n)\n\nconst positionStyle = computed<CSSProperties>(() => {\n  return {\n    [verticalProperty.value]: `${props.offset}px`,\n    zIndex: props.zIndex ?? currentZIndex.value,\n  }\n})\n\n// tick interval matches the 0.1s width transition in the style, keeping the bar smooth\nconst { pause: pauseProgress, resume: resumeProgress } = useIntervalFn(\n  () => {\n    percentage.value = Math.max(\n      0,\n      100 - ((elapsed + Date.now() - startedAt) / props.duration) * 100\n    )\n  },\n  100,\n  { immediate: false }\n)\n\nfunction startTimer() {\n  if (props.duration <= 0) return\n\n  timer?.()\n  pauseProgress()\n  startedAt = Date.now()\n\n  const remaining = Math.max(0, props.duration - elapsed)\n\n  // close timer with remaining duration\n  ;({ stop: timer } = useTimeoutFn(() => {\n    if (visible.value) close()\n  }, remaining))\n\n  // progress bar resumes from current position\n  if (showProgressBar.value) {\n    percentage.value = (remaining / props.duration) * 100\n    resumeProgress()\n  }\n}\n\nfunction clearTimer() {\n  timer?.()\n  pauseProgress()\n  if (startedAt > 0) {\n    elapsed += Date.now() - startedAt\n    startedAt = 0\n  }\n}\n\nlet isHovered = false\n\nfunction onMouseEnter() {\n  isHovered = true\n  if (props.pauseOnHover) clearTimer()\n}\n\nfunction onMouseLeave() {\n  isHovered = false\n  if (props.pauseOnHover) startTimer()\n}\n\nfunction close() {\n  visible.value = false\n  clearTimer()\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  const code = getEventCode(event)\n\n  switch (code) {\n    case EVENT_CODE.delete:\n    case EVENT_CODE.backspace:\n      clearTimer() // press delete/backspace clear timer\n      break\n    case EVENT_CODE.esc:\n      // press esc to close the notification\n      if (visible.value) {\n        close()\n      }\n      break\n    default: // resume timer\n      // keep the timer paused while the pointer is still over the notification\n      if (isHovered && props.pauseOnHover) break\n      clearTimer()\n      startTimer()\n      break\n  }\n}\n\n// lifecycle\nonMounted(() => {\n  startTimer()\n  nextZIndex()\n  visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n})\n</script>\n"],"mappings":""}

package/es/components/notification/src/notify.mjs

@@ -49,7 +49,7 @@ const notify = function(options = {}, context) {
 	notifications[position].push({ vm });
 	appendTo.appendChild(container.firstElementChild);
 	return { close: () => {
-		vm.component.exposed.visible.value = false;
+		vm.component.exposed.close();
 	} };
 };
 notificationTypes.forEach((type) => {
@@ -89,7 +89,7 @@ function close(id, position, userOnClose) {
 }
 function closeAll() {
 	for (const orientedNotifications of Object.values(notifications)) orientedNotifications.forEach(({ vm }) => {
-		vm.component.exposed.visible.value = false;
+		vm.component.exposed.close();
 	});
 }
 function updateOffsets(position = "top-right") {

package/es/components/notification/src/notify.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"notify.mjs","names":["NotificationConstructor"],"sources":["../../../../../../packages/components/notification/src/notify.ts"],"sourcesContent":["import { createVNode, isVNode, render } from 'vue'\nimport {\n  debugWarn,\n  isClient,\n  isElement,\n  isFunction,\n  isString,\n  isUndefined,\n} from '@element-plus/utils'\nimport NotificationConstructor from './notification.vue'\nimport { notificationTypes } from './notification'\n\nimport type { Ref, VNode } from 'vue'\nimport type {\n  NotificationPosition,\n  NotificationProps,\n  NotificationQueue,\n  Notify,\n  NotifyFn,\n} from './notification'\n\n// This should be a queue but considering there were `non-autoclosable` notifications.\nconst notifications: Record<NotificationPosition, NotificationQueue> = {\n  'top-left': [],\n  'top-right': [],\n  'bottom-left': [],\n  'bottom-right': [],\n}\n\n// the gap size between each notification\nconst GAP_SIZE = 16\nlet seed = 1\n\nconst notify: NotifyFn & Partial<Notify> = function (options = {}, context) {\n  if (!isClient) return { close: () => undefined }\n\n  if (isString(options) || isVNode(options)) {\n    options = { message: options }\n  }\n\n  const position = options.position || 'top-right'\n\n  let verticalOffset = options.offset || 0\n  notifications[position].forEach(({ vm }) => {\n    verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE\n  })\n  verticalOffset += GAP_SIZE\n\n  const id = `notification_${seed++}`\n  const userOnClose = options.onClose\n  const props: Partial<NotificationProps> = {\n    ...options,\n    offset: verticalOffset,\n    id,\n    onClose: () => {\n      close(id, position, userOnClose)\n    },\n  }\n\n  let appendTo: HTMLElement | null = document.body\n  if (isElement(options.appendTo)) {\n    appendTo = options.appendTo\n  } else if (isString(options.appendTo)) {\n    appendTo = document.querySelector(options.appendTo)\n  }\n\n  // should fallback to default value with a warning\n  if (!isElement(appendTo)) {\n    debugWarn(\n      'ElNotification',\n      'the appendTo option is not an HTMLElement. Falling back to document.body.'\n    )\n    appendTo = document.body\n  }\n\n  const container = document.createElement('div')\n\n  const vm = createVNode(\n    NotificationConstructor,\n    props,\n    isFunction(props.message)\n      ? props.message\n      : isVNode(props.message)\n        ? () => props.message\n        : null\n  )\n  vm.appContext = isUndefined(context) ? notify._context : context\n\n  // clean notification element preventing mem leak\n  vm.props!.onDestroy = () => {\n    render(null, container)\n  }\n\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  render(vm, container)\n  notifications[position].push({ vm })\n  appendTo.appendChild(container.firstElementChild!)\n\n  return {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    close: () => {\n      ;(vm.component!.exposed as { visible: Ref<boolean> }).visible.value =\n        false\n    },\n  }\n}\nnotificationTypes.forEach((type) => {\n  notify[type] = (options = {}, appContext) => {\n    if (isString(options) || isVNode(options)) {\n      options = {\n        message: options,\n      }\n    }\n    return notify({ ...options, type }, appContext)\n  }\n})\n\n/**\n * This function gets called when user click `x` button or press `esc` or the time reached its limitation.\n * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called\n * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.\n * @param {String} id notification id to be closed\n * @param {Position} position the positioning strategy\n * @param {Function} userOnClose the callback called when close passed by user\n */\nexport function close(\n  id: string,\n  position: NotificationPosition,\n  userOnClose?: (vm: VNode) => void\n): void {\n  // maybe we can store the index when inserting the vm to notification list.\n  const orientedNotifications = notifications[position]\n  const idx = orientedNotifications.findIndex(\n    ({ vm }) => vm.component?.props.id === id\n  )\n  if (idx === -1) return\n  const { vm } = orientedNotifications[idx]\n  if (!vm) return\n  // calling user's on close function before notification gets removed from DOM.\n  userOnClose?.(vm)\n\n  // note that this is called @before-leave, that's why we were able to fetch this property.\n  const removedHeight = vm.el!.offsetHeight\n  const verticalPos = position.split('-')[0]\n  orientedNotifications.splice(idx, 1)\n  const len = orientedNotifications.length\n  if (len < 1) return\n  // starting from the removing item.\n  for (let i = idx; i < len; i++) {\n    // new position equals the current offsetTop minus removed height plus 16px(the gap size between each item)\n    const { el, component } = orientedNotifications[i].vm\n    const pos =\n      Number.parseInt(el!.style[verticalPos], 10) - removedHeight - GAP_SIZE\n    component!.props.offset = pos\n  }\n}\n\nexport function closeAll(): void {\n  // loop through all directions, close them at once.\n  for (const orientedNotifications of Object.values(notifications)) {\n    orientedNotifications.forEach(({ vm }) => {\n      // same as the previous close method, we'd like to make sure lifecycle gets handle properly.\n      ;(vm.component!.exposed as { visible: Ref<boolean> }).visible.value =\n        false\n    })\n  }\n}\n\nexport function updateOffsets(position: NotificationPosition = 'top-right') {\n  let verticalOffset =\n    notifications[position][0]?.vm.component?.props?.offset || 0\n\n  for (const { vm } of notifications[position]) {\n    vm.component!.props.offset = verticalOffset\n    verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE\n  }\n}\n\nnotify.closeAll = closeAll\nnotify.updateOffsets = updateOffsets\nnotify._context = null\n\nexport default notify as Notify\n"],"mappings":";;;;;;;AAsBA,MAAM,gBAAiE;CACrE,YAAY,EAAE;CACd,aAAa,EAAE;CACf,eAAe,EAAE;CACjB,gBAAgB,EAAE;CACnB;AAGD,MAAM,WAAW;AACjB,IAAI,OAAO;AAEX,MAAM,SAAqC,SAAU,UAAU,EAAE,EAAE,SAAS;CAC1E,IAAI,CAAC,UAAU,OAAO,EAAE,aAAa,KAAA,GAAW;CAEhD,IAAI,SAAS,QAAQ,IAAI,QAAQ,QAAQ,EACvC,UAAU,EAAE,SAAS,SAAS;CAGhC,MAAM,WAAW,QAAQ,YAAY;CAErC,IAAI,iBAAiB,QAAQ,UAAU;CACvC,cAAc,UAAU,SAAS,EAAE,SAAS;EAC1C,mBAAmB,GAAG,IAAI,gBAAgB,KAAK;GAC/C;CACF,kBAAkB;CAElB,MAAM,KAAK,gBAAgB;CAC3B,MAAM,cAAc,QAAQ;CAC5B,MAAM,QAAoC;EACxC,GAAG;EACH,QAAQ;EACR;EACA,eAAe;GACb,MAAM,IAAI,UAAU,YAAY;;EAEnC;CAED,IAAI,WAA+B,SAAS;CAC5C,IAAI,UAAU,QAAQ,SAAS,EAC7B,WAAW,QAAQ;MACd,IAAI,SAAS,QAAQ,SAAS,EACnC,WAAW,SAAS,cAAc,QAAQ,SAAS;CAIrD,IAAI,CAAC,UAAU,SAAS,EAAE;EACxB,UACE,kBACA,4EACD;EACD,WAAW,SAAS;;CAGtB,MAAM,YAAY,SAAS,cAAc,MAAM;CAE/C,MAAM,KAAK,YACTA,sBACA,OACA,WAAW,MAAM,QAAQ,GACrB,MAAM,UACN,QAAQ,MAAM,QAAQ,SACd,MAAM,UACZ,KACP;CACD,GAAG,aAAa,YAAY,QAAQ,GAAG,OAAO,WAAW;CAGzD,GAAG,MAAO,kBAAkB;EAC1B,OAAO,MAAM,UAAU;;CAIzB,OAAO,IAAI,UAAU;CACrB,cAAc,UAAU,KAAK,EAAE,IAAI,CAAC;CACpC,SAAS,YAAY,UAAU,kBAAmB;CAElD,OAAO,EAGL,aAAa;EACV,GAAI,UAAW,QAAsC,QAAQ,QAC5D;IAEL;;AAEH,kBAAkB,SAAS,SAAS;CAClC,OAAO,SAAS,UAAU,EAAE,EAAE,eAAe;EAC3C,IAAI,SAAS,QAAQ,IAAI,QAAQ,QAAQ,EACvC,UAAU,EACR,SAAS,SACV;EAEH,OAAO,OAAO;GAAE,GAAG;GAAS;GAAM,EAAE,WAAW;;EAEjD;;;;;;;;;AAUF,SAAgB,MACd,IACA,UACA,aACM;CAEN,MAAM,wBAAwB,cAAc;CAC5C,MAAM,MAAM,sBAAsB,WAC/B,EAAE,SAAS,GAAG,WAAW,MAAM,OAAO,GACxC;CACD,IAAI,QAAQ,IAAI;CAChB,MAAM,EAAE,OAAO,sBAAsB;CACrC,IAAI,CAAC,IAAI;CAET,cAAc,GAAG;CAGjB,MAAM,gBAAgB,GAAG,GAAI;CAC7B,MAAM,cAAc,SAAS,MAAM,IAAI,CAAC;CACxC,sBAAsB,OAAO,KAAK,EAAE;CACpC,MAAM,MAAM,sBAAsB;CAClC,IAAI,MAAM,GAAG;CAEb,KAAK,IAAI,IAAI,KAAK,IAAI,KAAK,KAAK;EAE9B,MAAM,EAAE,IAAI,cAAc,sBAAsB,GAAG;EACnD,MAAM,MACJ,OAAO,SAAS,GAAI,MAAM,cAAc,GAAG,GAAG,gBAAgB;EAChE,UAAW,MAAM,SAAS;;;AAI9B,SAAgB,WAAiB;CAE/B,KAAK,MAAM,yBAAyB,OAAO,OAAO,cAAc,EAC9D,sBAAsB,SAAS,EAAE,SAAS;EAEvC,GAAI,UAAW,QAAsC,QAAQ,QAC5D;GACF;;AAIN,SAAgB,cAAc,WAAiC,aAAa;CAC1E,IAAI,iBACF,cAAc,UAAU,IAAI,GAAG,WAAW,OAAO,UAAU;CAE7D,KAAK,MAAM,EAAE,QAAQ,cAAc,WAAW;EAC5C,GAAG,UAAW,MAAM,SAAS;EAC7B,mBAAmB,GAAG,IAAI,gBAAgB,KAAK;;;AAInD,OAAO,WAAW;AAClB,OAAO,gBAAgB;AACvB,OAAO,WAAW"}
+{"version":3,"file":"notify.mjs","names":["NotificationConstructor"],"sources":["../../../../../../packages/components/notification/src/notify.ts"],"sourcesContent":["import { createVNode, isVNode, render } from 'vue'\nimport {\n  debugWarn,\n  isClient,\n  isElement,\n  isFunction,\n  isString,\n  isUndefined,\n} from '@element-plus/utils'\nimport NotificationConstructor from './notification.vue'\nimport { notificationTypes } from './notification'\n\nimport type { VNode } from 'vue'\nimport type {\n  NotificationExposed,\n  NotificationPosition,\n  NotificationProps,\n  NotificationQueue,\n  Notify,\n  NotifyFn,\n} from './notification'\n\n// This should be a queue but considering there were `non-autoclosable` notifications.\nconst notifications: Record<NotificationPosition, NotificationQueue> = {\n  'top-left': [],\n  'top-right': [],\n  'bottom-left': [],\n  'bottom-right': [],\n}\n\n// the gap size between each notification\nconst GAP_SIZE = 16\nlet seed = 1\n\nconst notify: NotifyFn & Partial<Notify> = function (options = {}, context) {\n  if (!isClient) return { close: () => undefined }\n\n  if (isString(options) || isVNode(options)) {\n    options = { message: options }\n  }\n\n  const position = options.position || 'top-right'\n\n  let verticalOffset = options.offset || 0\n  notifications[position].forEach(({ vm }) => {\n    verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE\n  })\n  verticalOffset += GAP_SIZE\n\n  const id = `notification_${seed++}`\n  const userOnClose = options.onClose\n  const props: Partial<NotificationProps> = {\n    ...options,\n    offset: verticalOffset,\n    id,\n    onClose: () => {\n      close(id, position, userOnClose)\n    },\n  }\n\n  let appendTo: HTMLElement | null = document.body\n  if (isElement(options.appendTo)) {\n    appendTo = options.appendTo\n  } else if (isString(options.appendTo)) {\n    appendTo = document.querySelector(options.appendTo)\n  }\n\n  // should fallback to default value with a warning\n  if (!isElement(appendTo)) {\n    debugWarn(\n      'ElNotification',\n      'the appendTo option is not an HTMLElement. Falling back to document.body.'\n    )\n    appendTo = document.body\n  }\n\n  const container = document.createElement('div')\n\n  const vm = createVNode(\n    NotificationConstructor,\n    props,\n    isFunction(props.message)\n      ? props.message\n      : isVNode(props.message)\n        ? () => props.message\n        : null\n  )\n  vm.appContext = isUndefined(context) ? notify._context : context\n\n  // clean notification element preventing mem leak\n  vm.props!.onDestroy = () => {\n    render(null, container)\n  }\n\n  // instances will remove this item when close function gets called. So we do not need to worry about it.\n  render(vm, container)\n  notifications[position].push({ vm })\n  appendTo.appendChild(container.firstElementChild!)\n\n  return {\n    // instead of calling the onClose function directly, setting this value so that we can have the full lifecycle\n    // for out component, so that all closing steps will not be skipped.\n    // UPDATE: call the exposed close() here rather than setting visible.value = false,\n    // because close() also runs clearTimer() to stop the progress tick and close timeout.\n    close: () => {\n      ;(vm.component!.exposed as NotificationExposed).close()\n    },\n  }\n}\nnotificationTypes.forEach((type) => {\n  notify[type] = (options = {}, appContext) => {\n    if (isString(options) || isVNode(options)) {\n      options = {\n        message: options,\n      }\n    }\n    return notify({ ...options, type }, appContext)\n  }\n})\n\n/**\n * This function gets called when user click `x` button or press `esc` or the time reached its limitation.\n * Emitted by transition@before-leave event so that we can fetch the current notification.offsetHeight, if this was called\n * by @after-leave the DOM element will be removed from the page thus we can no longer fetch the offsetHeight.\n * @param {String} id notification id to be closed\n * @param {Position} position the positioning strategy\n * @param {Function} userOnClose the callback called when close passed by user\n */\nexport function close(\n  id: string,\n  position: NotificationPosition,\n  userOnClose?: (vm: VNode) => void\n): void {\n  // maybe we can store the index when inserting the vm to notification list.\n  const orientedNotifications = notifications[position]\n  const idx = orientedNotifications.findIndex(\n    ({ vm }) => vm.component?.props.id === id\n  )\n  if (idx === -1) return\n  const { vm } = orientedNotifications[idx]\n  if (!vm) return\n  // calling user's on close function before notification gets removed from DOM.\n  userOnClose?.(vm)\n\n  // note that this is called @before-leave, that's why we were able to fetch this property.\n  const removedHeight = vm.el!.offsetHeight\n  const verticalPos = position.split('-')[0]\n  orientedNotifications.splice(idx, 1)\n  const len = orientedNotifications.length\n  if (len < 1) return\n  // starting from the removing item.\n  for (let i = idx; i < len; i++) {\n    // new position equals the current offsetTop minus removed height plus 16px(the gap size between each item)\n    const { el, component } = orientedNotifications[i].vm\n    const pos =\n      Number.parseInt(el!.style[verticalPos], 10) - removedHeight - GAP_SIZE\n    component!.props.offset = pos\n  }\n}\n\nexport function closeAll(): void {\n  // loop through all directions, close them at once.\n  for (const orientedNotifications of Object.values(notifications)) {\n    orientedNotifications.forEach(({ vm }) => {\n      // same as the previous close method, we'd like to make sure lifecycle gets handle properly.\n      // UPDATE: call exposed close() so that clearTimer() also runs.\n      ;(vm.component!.exposed as NotificationExposed).close()\n    })\n  }\n}\n\nexport function updateOffsets(position: NotificationPosition = 'top-right') {\n  let verticalOffset =\n    notifications[position][0]?.vm.component?.props?.offset || 0\n\n  for (const { vm } of notifications[position]) {\n    vm.component!.props.offset = verticalOffset\n    verticalOffset += (vm.el?.offsetHeight || 0) + GAP_SIZE\n  }\n}\n\nnotify.closeAll = closeAll\nnotify.updateOffsets = updateOffsets\nnotify._context = null\n\nexport default notify as Notify\n"],"mappings":"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"}

package/es/components/notification/style/css.mjs

@@ -1,2 +1,3 @@
 import "../../base/style/css.mjs";
+import "../../progress/style/css.mjs";
 import "@element-plus/nightly/theme-chalk/el-notification.css";

package/es/components/notification/style/index.mjs

@@ -1,2 +1,3 @@
 import "../../base/style/index.mjs";
+import "../../progress/style/index.mjs";
 import "@element-plus/nightly/theme-chalk/src/notification.scss";

package/es/components/popconfirm/src/popconfirm.vue.d.ts

@@ -25,9 +25,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopconfirmProps, {
   onCancel?: ((e: MouseEvent) => any) | undefined;
 }>, {
   teleported: boolean;
+  hideAfter: number;
   effect: PopperEffect;
   icon: IconPropType;
-  hideAfter: number;
   width: string | number;
   confirmButtonType: ButtonType;
   cancelButtonType: ButtonType;

package/es/components/popover/src/popover.vue.d.ts

@@ -32,6 +32,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopoverProps, {
 }>, {
   offset: number;
   teleported: boolean;
+  showAfter: number;
+  hideAfter: number;
+  autoClose: number;
   effect: PopperEffect;
   tabindex: string | number;
   visible: boolean | null;
@@ -43,9 +46,6 @@ declare const __VLS_base: _$vue.DefineComponent<PopoverProps, {
   popperOptions: Partial<Options>;
   showArrow: boolean;
   persistent: boolean;
-  showAfter: number;
-  hideAfter: number;
-  autoClose: number;
   trigger: Arrayable<TooltipTriggerType>;
   triggerKeys: string[];
   width: string | number;

package/es/components/radio/src/radio-button.d.ts

@@ -10,7 +10,7 @@ interface RadioButtonProps extends RadioPropsBase {}
  * @deprecated Removed after 3.0.0, Use `RadioButtonProps` instead.
  */
 declare const radioButtonProps: {
-  readonly modelValue: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly modelValue: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   readonly size: {
     readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
@@ -18,8 +18,8 @@ declare const radioButtonProps: {
     __epPropKey: true;
   };
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
-  readonly label: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
-  readonly value: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly label: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly value: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   readonly name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
 };
 /**

package/es/components/radio/src/radio.d.ts

@@ -41,7 +41,7 @@ interface RadioProps extends RadioPropsBase {
  * @deprecated Removed after 3.0.0, Use `RadioPropsBase` instead.
  */
 declare const radioPropsBase: {
-  modelValue: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  modelValue: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   size: {
     readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
@@ -49,8 +49,8 @@ declare const radioPropsBase: {
     __epPropKey: true;
   };
   disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
-  label: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
-  value: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  label: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  value: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
 };
 /**
@@ -58,7 +58,7 @@ declare const radioPropsBase: {
  */
 declare const radioProps: {
   readonly border: BooleanConstructor;
-  readonly modelValue: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly modelValue: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   readonly size: {
     readonly type: _$vue.PropType<EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
     readonly required: false;
@@ -66,8 +66,8 @@ declare const radioProps: {
     __epPropKey: true;
   };
   readonly disabled: EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
-  readonly label: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
-  readonly value: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly label: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  readonly value: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   readonly name: EpPropFinalized<StringConstructor, unknown, unknown, undefined, boolean>;
 };
 declare const radioEmits: {

package/es/components/segmented/src/segmented.d.ts

@@ -63,7 +63,7 @@ declare const segmentedProps: {
   ariaLabel: StringConstructor;
   direction: EpPropFinalized<(new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical") | (((new (...args: any[]) => "horizontal" | "vertical") | (() => "horizontal" | "vertical")) | null)[], unknown, unknown, string, boolean>;
   options: EpPropFinalized<(new (...args: any[]) => Option[]) | (() => Option[]) | (((new (...args: any[]) => Option[]) | (() => Option[])) | null)[], unknown, unknown, () => never[], boolean>;
-  modelValue: EpPropFinalized<(BooleanConstructor | StringConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
+  modelValue: EpPropFinalized<(StringConstructor | BooleanConstructor | NumberConstructor)[], unknown, unknown, undefined, boolean>;
   props: EpPropFinalized<(new (...args: any[]) => Props) | (() => Props) | (((new (...args: any[]) => Props) | (() => Props)) | null)[], unknown, unknown, () => Required<Props>, boolean>;
   block: BooleanConstructor;
   size: {

package/es/components/select/src/option.d.ts

@@ -5,7 +5,7 @@ import * as _$vue from "vue";
 declare const COMPONENT_NAME = "ElOption";
 declare const optionProps: {
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/select/src/option.vue.d.ts

@@ -6,7 +6,7 @@ import * as _$vue from "vue";
 declare const _default: typeof __VLS_export;
 declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;
@@ -59,7 +59,7 @@ declare const __VLS_export: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
   selectOptionClick: () => void;
 }, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
   value: {
-    readonly type: _$vue.PropType<EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>>;
+    readonly type: _$vue.PropType<EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>>;
     readonly required: true;
     readonly validator: ((val: unknown) => boolean) | undefined;
     __epPropKey: true;

package/es/components/select/src/select.d.ts

@@ -34,7 +34,7 @@ declare const selectProps: {
   valueOnClear: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null) | (((new (...args: any[]) => string | number | boolean | Function) | (() => string | number | boolean | Function | null)) | null)[], unknown, unknown, undefined, boolean>;
   name: StringConstructor;
   id: StringConstructor;
-  modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
+  modelValue: EpPropFinalized<(new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null) | (((new (...args: any[]) => string | number | boolean | Record<string, any> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[]) | (() => EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown> | EpPropMergeType<(StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[], unknown, unknown>[] | null)) | null)[], unknown, unknown, undefined, boolean>;
   autocomplete: EpPropFinalized<StringConstructor, unknown, unknown, string, boolean>;
   automaticDropdown: BooleanConstructor;
   size: {