@element-plus/nightly 0.0.20260722 → 0.0.20260724

package/lib/components/notification/src/notification.vue_vue_type_script_setup_true_lang.js

@@ -4,6 +4,7 @@ const require_event = require("../../../utils/dom/event.js");
 const require_icon = require("../../../utils/vue/icon.js");
 const require_index = require("../../icon/index.js");
 const require_use_global_config = require("../../config-provider/src/hooks/use-global-config.js");
+const require_index$1 = require("../../progress/index.js");
 const require_notification = require("./notification.js");
 let _vueuse_core = require("@vueuse/core");
 let vue = require("vue");
@@ -23,10 +24,28 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 		const { nextZIndex, currentZIndex } = zIndex;
 		const visible = (0, vue.ref)(false);
 		let timer = void 0;
+		const percentage = (0, vue.ref)(100);
+		let elapsed = 0;
+		let startedAt = 0;
 		const typeClass = (0, vue.computed)(() => {
 			const type = props.type;
 			return type && require_icon.TypeComponentsMap[props.type] ? ns.m(type) : "";
 		});
+		const showProgressBar = (0, vue.computed)(() => !!props.progress && props.duration > 0);
+		const progressStatus = (0, vue.computed)(() => {
+			switch (props.type) {
+				case "success": return "success";
+				case "warning": return "warning";
+				case "error": return "exception";
+				default: return;
+			}
+		});
+		const progressProps = (0, vue.computed)(() => ({
+			status: progressStatus.value,
+			strokeWidth: 3,
+			showText: false,
+			...typeof props.progress === "object" ? props.progress : void 0
+		}));
 		const iconComponent = (0, vue.computed)(() => {
 			if (!props.type) return props.icon;
 			return require_icon.TypeComponentsMap[props.type] || props.icon;
@@ -39,16 +58,43 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 				zIndex: props.zIndex ?? currentZIndex.value
 			};
 		});
+		const { pause: pauseProgress, resume: resumeProgress } = (0, _vueuse_core.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} = (0, _vueuse_core.useTimeoutFn)(() => {
+			if (props.duration <= 0) return;
+			timer?.();
+			pauseProgress();
+			startedAt = Date.now();
+			const remaining = Math.max(0, props.duration - elapsed);
+			({stop: timer} = (0, _vueuse_core.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 (require_event.getEventCode(event)) {
@@ -60,6 +106,8 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 					if (visible.value) close();
 					break;
 				default:
+					if (isHovered && props.pauseOnHover) break;
+					clearTimer();
 					startTimer();
 					break;
 			}
@@ -91,33 +139,41 @@ var notification_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (
 					]),
 					style: (0, vue.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 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
-					key: 0,
-					class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("icon"), typeClass.value])
-				}, {
-					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(iconComponent.value)))]),
-					_: 1
-				}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("group")) }, [
-					(0, vue.createElementVNode)("h2", {
-						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title")),
-						textContent: (0, vue.toDisplayString)(__props.title)
-					}, null, 10, _hoisted_2),
-					(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content")),
-						style: (0, vue.normalizeStyle)(!!__props.title ? void 0 : { margin: 0 })
-					}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_3, (0, vue.toDisplayString)(__props.message), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createCommentVNode)(" Caution here, message could've been compromised, never use user's input as message "), (0, vue.createElementVNode)("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vue.vShow, __props.message]]),
-					__props.showClose ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
+				}, [
+					iconComponent.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
 						key: 0,
-						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("closeBtn")),
-						onClick: (0, vue.withModifiers)(close, ["stop"])
+						class: (0, vue.normalizeClass)([(0, vue.unref)(ns).e("icon"), typeClass.value])
 					}, {
-						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.closeIcon)))]),
+						default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(iconComponent.value)))]),
 						_: 1
-					}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)
-				], 2)], 46, _hoisted_1), [[vue.vShow, visible.value]])]),
+					}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true),
+					(0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("group")) }, [
+						(0, vue.createElementVNode)("h2", {
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("title")),
+							textContent: (0, vue.toDisplayString)(__props.title)
+						}, null, 10, _hoisted_2),
+						(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("content")),
+							style: (0, vue.normalizeStyle)(!!__props.title ? void 0 : { margin: 0 })
+						}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [!__props.dangerouslyUseHTMLString ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_3, (0, vue.toDisplayString)(__props.message), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [(0, vue.createCommentVNode)(" Caution here, message could've been compromised, never use user's input as message "), (0, vue.createElementVNode)("p", { innerHTML: __props.message }, null, 8, _hoisted_4)], 2112))])], 6), [[vue.vShow, __props.message]]),
+						__props.showClose ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(require_index.ElIcon), {
+							key: 0,
+							class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("closeBtn")),
+							onClick: (0, vue.withModifiers)(close, ["stop"])
+						}, {
+							default: (0, vue.withCtx)(() => [((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(__props.closeIcon)))]),
+							_: 1
+						}, 8, ["class"])) : (0, vue.createCommentVNode)("v-if", true)
+					], 2),
+					showProgressBar.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+						key: 1,
+						class: (0, vue.normalizeClass)((0, vue.unref)(ns).e("progress")),
+						"aria-hidden": "true"
+					}, [(0, vue.createVNode)((0, vue.unref)(require_index$1.ElProgress), (0, vue.mergeProps)(progressProps.value, { percentage: percentage.value }), null, 16, ["percentage"])], 2)) : (0, vue.createCommentVNode)("v-if", true)
+				], 46, _hoisted_1), [[vue.vShow, visible.value]])]),
 				_: 3
 			}, 8, ["name", "onBeforeLeave"]);
 		};

package/lib/components/notification/src/notification.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification.vue_vue_type_script_setup_true_lang.js","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.js","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":";;;;;;;;;;;;;;;;;;;;;EA6DA,MAAM,QAAQ;EAiBd,MAAM,EAAE,IAAI,WAAW,0BAAA,2BAA2B,eAAc;EAChE,MAAM,EAAE,YAAY,kBAAkB;EAEtC,MAAM,WAAA,GAAA,IAAA,KAAc,MAAK;EACzB,IAAI,QAAkC,KAAA;EACtC,MAAM,cAAA,GAAA,IAAA,KAAiB,IAAG;EAC1B,IAAI,UAAU;EACd,IAAI,YAAY;EAEhB,MAAM,aAAA,GAAA,IAAA,gBAA2B;GAC/B,MAAM,OAAO,MAAM;GACnB,OAAO,QAAQ,aAAA,kBAAkB,MAAM,QAAQ,GAAG,EAAE,KAAK,GAAG;IAC7D;EAED,MAAM,mBAAA,GAAA,IAAA,gBAAiC,CAAC,CAAC,MAAM,YAAY,MAAM,WAAW,EAAC;EAE7E,MAAM,kBAAA,GAAA,IAAA,gBAEE;GACN,QAAQ,MAAM,MAAd;IACE,KAAK,WACH,OAAO;IACT,KAAK,WACH,OAAO;IACT,KAAK,SACH,OAAO;IACT,SACE;;IAEL;EAED,MAAM,iBAAA,GAAA,IAAA,iBAAgC;GACpC,QAAQ,eAAe;GACvB,aAAa;GACb,UAAU;GACV,GAAI,OAAO,MAAM,aAAa,WAAW,MAAM,WAAW,KAAA;GAC3D,EAAC;EAEF,MAAM,iBAAA,GAAA,IAAA,gBAA+B;GACnC,IAAI,CAAC,MAAM,MAAM,OAAO,MAAM;GAC9B,OAAO,aAAA,kBAAkB,MAAM,SAAS,MAAM;IAC/C;EAED,MAAM,mBAAA,GAAA,IAAA,gBACJ,MAAM,SAAS,SAAS,QAAQ,GAAG,UAAU,OAC/C;EAEA,MAAM,oBAAA,GAAA,IAAA,gBACJ,MAAM,SAAS,WAAW,MAAM,GAAG,QAAQ,SAC7C;EAEA,MAAM,iBAAA,GAAA,IAAA,gBAA8C;GAClD,OAAO;KACJ,iBAAiB,QAAQ,GAAG,MAAM,OAAO;IAC1C,QAAQ,MAAM,UAAU,cAAc;IACxC;IACD;EAGD,MAAM,EAAE,OAAO,eAAe,QAAQ,oBAAA,GAAA,aAAA,qBAC9B;GACJ,WAAW,QAAQ,KAAK,IACtB,GACA,OAAQ,UAAU,KAAK,KAAK,GAAG,aAAa,MAAM,WAAY,IAChE;KAEF,KACA,EAAE,WAAW,OAAM,CACrB;EAEA,SAAS,aAAa;GACpB,IAAI,MAAM,YAAY,GAAG;GAEzB,SAAQ;GACR,eAAc;GACd,YAAY,KAAK,KAAI;GAErB,MAAM,YAAY,KAAK,IAAI,GAAG,MAAM,WAAW,QAAO;GAGrD,CAAC,CAAE,MAAM,UAAA,GAAA,aAAA,oBAA6B;IACrC,IAAI,QAAQ,OAAO,OAAM;MACxB,UAAU;GAGb,IAAI,gBAAgB,OAAO;IACzB,WAAW,QAAS,YAAY,MAAM,WAAY;IAClD,gBAAe;;;EAInB,SAAS,aAAa;GACpB,SAAQ;GACR,eAAc;GACd,IAAI,YAAY,GAAG;IACjB,WAAW,KAAK,KAAK,GAAG;IACxB,YAAY;;;EAIhB,IAAI,YAAY;EAEhB,SAAS,eAAe;GACtB,YAAY;GACZ,IAAI,MAAM,cAAc,YAAW;;EAGrC,SAAS,eAAe;GACtB,YAAY;GACZ,IAAI,MAAM,cAAc,YAAW;;EAGrC,SAAS,QAAQ;GACf,QAAQ,QAAQ;GAChB,YAAW;;EAGb,SAAS,UAAU,OAAsB;GAGvC,QAFa,cAAA,aAAa,MAEd,EAAZ;IACE,KAAK,aAAA,WAAW;IAChB,KAAK,aAAA,WAAW;KACd,YAAY;KACZ;IACF,KAAK,aAAA,WAAW;KAEd,IAAI,QAAQ,OACV,OAAM;KAER;IACF;KAEE,IAAI,aAAa,MAAM,cAAc;KACrC,YAAW;KACX,YAAW;KACX;;;EAKN,CAAA,GAAA,IAAA,iBAAgB;GACd,YAAW;GACX,YAAW;GACX,QAAQ,QAAQ;IACjB;EAED,CAAA,GAAA,aAAA,kBAAiB,UAAU,WAAW,UAAS;EAE/C,SAAa;GACX;;GAEA;GACD,CAAA;;qDA/Lc,IAAA,YAAA;IAtCV,OAAA,GAAA,IAAA,OAAM,GAAE,CAAC,EAAC,OAAA;IACV,eAAc,QAAA;IACd,cAAW,OAAA,OAAA,OAAA,MAAA,WAAEA,KAAAA,MAAK,UAAA;IAHrB,WAAA;;oCAsCQ,EAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,oBAAA,OAAA;KA/BH,IAAI,QAAA;KACJ,QAAA,GAAA,IAAA,gBAAK;qBAAG,GAAE,CAAC,GAAC;MAAI,QAAA;MAAa,gBAAA;MAAe,CAAA;KAC5C,QAAA,GAAA,IAAA,gBAAO,cAAA,MAAa;KACrB,MAAK;KACJ,cAAY;KACZ,cAAY;KACZ,SAAK,OAAA,OAAA,OAAA,MAAA,GAAA,SAAE,QAAA,WAAA,QAAA,QAAA,GAAA,KAAO;;KAEA,cAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAEL,cAAA,OAAA,EAAA;;MAFqB,QAAA,GAAA,IAAA,gBAAK,EAAA,GAAA,IAAA,OAAG,GAAE,CAAC,EAAC,OAAA,EAAU,UAAA,MAAS,CAAA;;sCAC3B,GAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,yBAAjB,cAAA,MAAa,CAAA,EAAA,CAAA;;;iCAkBzB,OAAA,EAhBA,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA,EAAA,EAAA;kCAC6B,MAAA;OAAvC,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,QAAA,CAAA;6CAAmB,QAAM,MAAD;;0DAWlC,OAAA;OARH,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,UAAA,CAAA;OACX,QAAA,GAAA,IAAA,gBAAK,CAAA,CAAI,QAAA,QAAQ,KAAA,IAAS,EAAA,QAAA,GAAA,CAAA;8BAMpB,KAAA,QAAA,WAAA,EAAA,QAAA,CAAA,CAHK,QAAA,6BAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAA2C,KAAA,aAAA,GAAA,IAAA,iBAAd,QAAA,QAAO,EAAA,EAAA,MAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEjB,IAAA,UAAA,EAAA,KAAA,GAAA,EAAA,EAAA,GAAA,IAAA,oBAD7B,uFAA2F,GAAA,GAAA,IAAA,oBAC9D,KAAA,EAAnB,WAAQ,QAAA,SAAO,EAAA,MAAA,GAAA,WAAA,CAAA,EAAA,KAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,CAAA,CAAA,IAAA,OAPnB,QAAA,QAAO,CAAA,CAAA;MAUF,QAAA,cAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,OAEL,cAAA,OAAA,EAAA;;OAFiB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,WAAA,CAAA;OAAe,UAAA,GAAA,IAAA,eAAY,OAAK,CAAA,OAAA,CAAA;;uCACvC,GAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,cAAA,GAAA,IAAA,yBAAb,QAAA,UAAS,CAAA,EAAA,CAAA;;;;KAGlB,gBAAA,UAAA,GAAA,IAAA,YAAA,GAAA,GAAA,IAAA,oBAEL,OAAA;;MAFuB,QAAA,GAAA,IAAA,iBAAA,GAAA,IAAA,OAAO,GAAE,CAAC,EAAC,WAAA,CAAA;MAAc,eAAY;6CACD,gBAAA,WAAA,GAAA,GAAA,IAAA,YAA1C,cAA0C,OAA7B,EAAG,YAAY,WAAA,OAAU,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,CAAA,EAAA,EAAA,KAAA,GAAA,IAAA,oBAAA,QAAA,KAAA;qCA9BrD,QAAA,MAAO,CAAA,CAAA,CAAA,CAAA"}

package/lib/components/notification/src/notification2.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification2.js","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.js","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/lib/components/notification/src/notify.js

@@ -55,7 +55,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();
 	} };
 };
 require_notification.notificationTypes.forEach((type) => {
@@ -95,7 +95,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/lib/components/notification/src/notify.js.map

@@ -1 +1 @@
-{"version":3,"file":"notify.js","names":["isClient","isElement","NotificationConstructor","isUndefined","notificationTypes"],"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":"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"}
+{"version":3,"file":"notify.js","names":["isClient","isElement","NotificationConstructor","isUndefined","notificationTypes"],"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/lib/components/notification/style/css.js

@@ -1,3 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../base/style/css.js");
+require("../../progress/style/css.js");
 require("@element-plus/nightly/theme-chalk/el-notification.css");

package/lib/components/notification/style/index.js

@@ -1,3 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../../base/style/index.js");
+require("../../progress/style/index.js");
 require("@element-plus/nightly/theme-chalk/src/notification.scss");

package/lib/components/pagination/src/pagination.d.ts

@@ -120,10 +120,10 @@ declare const _default: _$vue.DefineComponent<ExtractPropTypes<{
   "onPrev-click"?: ((val: number) => any) | undefined;
   "onNext-click"?: ((val: number) => any) | undefined;
 }>, {
-  readonly layout: string;
   readonly small: boolean;
   readonly teleported: EpPropMergeType<BooleanConstructor, unknown, unknown>;
   readonly disabled: boolean;
+  readonly layout: string;
   readonly popperClass: ClassValue;
   readonly popperStyle: StyleValue;
   readonly background: boolean;

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

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

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

@@ -30,6 +30,9 @@ declare const __VLS_base: _$vue.DefineComponent<PopoverProps, {
   "onAfter-enter"?: (() => any) | undefined;
   "onAfter-leave"?: (() => any) | undefined;
 }>, {
+  showAfter: number;
+  hideAfter: number;
+  autoClose: number;
   offset: number;
   teleported: boolean;
   effect: PopperEffect;
@@ -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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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: {