{"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":""}