{"version":3,"file":"notification.mjs","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, typeClass]\"\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\n          v-if=\"showClose\"\n          :class=\"[ns.e('closeBtn'), typeClass]\"\n          @click.stop=\"close\"\n        >\n          <IconSmallCross />\n        </el-icon>\n      </div>\n    </div>\n  </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponents, TypeComponentsMap } from '@park-ui/utils'\nimport { EVENT_CODE } from '@park-ui/constants'\nimport { ElIcon } from '@park-ui/components/icon'\nimport { useNamespace } from '@park-ui/hooks'\nimport { notificationEmits, notificationProps } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElNotification',\n})\nconst props = defineProps(notificationProps)\ndefineEmits(notificationEmits)\n\nconst ns = useNamespace('notification')\nconst { IconSmallCross } = TypeComponents\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 ''\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,\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({ code }: KeyboardEvent) {\n  if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\n    clearTimer() // press delete/backspace clear timer\n  } else if (code === EVENT_CODE.esc) {\n    // press esc to close the notification\n    if (visible.value) {\n      close()\n    }\n  } else {\n    startTimer() // resume timer\n  }\n}\n\n// lifecycle\nonMounted(() => {\n  startTimer()\n  visible.value = true\n})\n\nuseEventListener(document, 'keydown', onKeydown)\n\ndefineExpose({\n  visible,\n  /** @description close notification */\n  close,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,IAAA,MAAA,EAAA,GAAA,aAAA,cAAA,CAAA,CAAA;AACA,IAAA,MAAA,EAAA,cAAA,EAAA,GAAA,cAAA,CAAA;AACA,IAAA,MAAA,OAAA,GAAA,IAAA,KAAA,CAAA,CAAA;AACA,IAAA,IAAA,KAAA,GAAA,KAAA,CAAA,CAAA;AAEA,IAAA,MAAA,SAAA,GAAA,SAAA,MAAA;AACA,MAAA,MAAA,OAAA,KAAA,CAAA,IAAA,CAAA;AACA,MAAA,OAAA,QAAA,iBAAA,CAAA,KAAA,CAAA,QAAA,EAAA,CAAA,CAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,aAAA,GAAA,SAAA,MAAA;AACA,MAAA,IAAA,CAAA,KAAA,CAAA,IAAA;AAAA,QAAA,OAAA,EAAA,CAAA;AACA,MAAA,OAAA,iBAAA,CAAA,KAAA,CAAA,IAAA,CAAA,IAAA,KAAA,CAAA,IAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,MAAA,eAAA,GAAA,SAAA,MACA,KAAA,CAAA,SAAA,QAAA,CAAA,OAAA,CAAA,GAAA,OAAA,GAAA,MACA,CAAA,CAAA;AAEA,IAAA,MAAA,gBAAA,GAAA,SAAA,MACA,KAAA,CAAA,SAAA,UAAA,CAAA,KAAA,CAAA,GAAA,KAAA,GAAA,QACA,CAAA,CAAA;AAEA,IAAA,MAAA,aAAA,GAAA,SAAA,MAAA;AACA,MAAA,OAAA;AAAA,QACA,CAAA,gBAAA,CAAA,KAAA,GAAA,CAAA,EAAA,KAAA,CAAA,MAAA,CAAA,EAAA,CAAA;AAAA,QACA,QAAA,KAAA,CAAA,MAAA;AAAA,OACA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,SAAA,UAAA,GAAA;AACA,MAAA,IAAA,KAAA,CAAA,WAAA,CAAA,EAAA;AACA,QAAA,CAAA;AAAA,QAAA,CAAA,EAAA,IAAA,EAAA,KAAA,EAAA,GAAA,aAAA,MAAA;AACA,UAAA,IAAA,OAAA,CAAA,KAAA;AAAA,YAAA,KAAA,EAAA,CAAA;AAAA,SACA,EAAA,MAAA,QAAA,CAAA,EAAA;AAAA,OACA;AAAA,KACA;AAEA,IAAA,SAAA,UAAA,GAAA;AACA,MAAA,KAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,KAAA,EAAA,CAAA;AAAA,KACA;AAEA,IAAA,SAAA,KAAA,GAAA;AACA,MAAA,OAAA,CAAA,KAAA,GAAA,KAAA,CAAA;AAAA,KACA;AAEA,IAAA,SAAA,SAAA,CAAA,EAAA,IAAA,EAAA,EAAA;AACA,MAAA,IAAA,IAAA,KAAA,UAAA,CAAA,MAAA,IAAA,IAAA,KAAA,WAAA,SAAA,EAAA;AACA,QAAA,UAAA,EAAA,CAAA;AAAA,OACA,MAAA,IAAA,IAAA,KAAA,UAAA,CAAA,GAAA,EAAA;AAEA,QAAA,IAAA,QAAA,KAAA,EAAA;AACA,UAAA,KAAA,EAAA,CAAA;AAAA,SACA;AAAA,OACA,MAAA;AACA,QAAA,UAAA,EAAA,CAAA;AAAA,OACA;AAAA,KACA;AAGA,IAAA,SAAA,CAAA,MAAA;AACA,MAAA,UAAA,EAAA,CAAA;AACA,MAAA,OAAA,CAAA,KAAA,GAAA,IAAA,CAAA;AAAA,KACA,CAAA,CAAA;AAEA,IAAA,gBAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,CAAA;AAEA,IAAA,MAAA,CAAA;AAAA,MACA,OAAA;AAAA,MAEA,KAAA;AAAA,KACA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}