hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 4.79 kB
Source Map (JSON)
{"version":3,"file":"notification2.mjs","sources":["../../../../../../packages/components/notification/src/notification.vue"],"sourcesContent":["<template>\n <transition\n name=\"notification-fade\"\n @before-leave=\"onClose\"\n @after-leave=\"$emit('destroy')\"\n >\n <div\n v-show=\"visible\"\n :id=\"id\"\n :class=\"[\n namespace + '-panel',\n namespace + '-notification',\n 'at-' + position,\n customClass,\n horizontalClass,\n hasDefinedIcon ? `${type === 'error' ? 'danger' : type}` : '',\n ]\"\n :style=\"positionStyle\"\n role=\"notification\"\n @mouseenter=\"clearTimer\"\n @mouseleave=\"startTimer\"\n @click=\"onClick\"\n >\n <div class=\"panel-header\">\n <div v-show=\"type || $slots.icon\" class=\"panel-header-left\">\n <slot name=\"icon\">\n <hl-icon>\n <system-success v-if=\"type === 'success'\" />\n <system-info v-if=\"type === 'info'\" />\n <system-warning v-if=\"type === 'warning'\" />\n <system-error v-if=\"type === 'danger' || type === 'error'\" />\n </hl-icon>\n </slot>\n </div>\n <span class=\"panel-title\" v-text=\"title\"></span>\n <div v-if=\"showClose\" class=\"panel-header-right\">\n <button\n class=\"panel-close\"\n @click.stop=\"close\"\n >\n <hl-icon>\n <system-close />\n </hl-icon>\n </button>\n </div>\n </div>\n <div\n v-show=\"message\"\n class=\"panel-body\"\n :style=\"!!title ? undefined : { margin: 0 }\"\n >\n <slot>\n <span v-if=\"!dangerouslyUseHTMLString\">{{ message }}</span>\n <span v-else v-html=\"message\"></span>\n </slot>\n </div>\n </div>\n </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, ref, onMounted } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE, MessageTypeIconMap } from '@hongluan-ui/constants'\nimport { useNamespace, useZIndex } from '@hongluan-ui/hooks'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemSuccess, SystemInfo, SystemWarning, SystemClose, SystemError } from '@hongluan-ui/components/system-icon'\nimport { notificationProps, notificationEmits } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'Notification',\n})\n\nconst props = defineProps(notificationProps)\ndefineEmits(notificationEmits)\n\nconst { namespace } = useNamespace()\nconst { currentZIndex } = useZIndex()\n\nconst visible = ref(false)\nlet timer: (() => void) | undefined = undefined\n\nconst hasDefinedIcon = computed(() => !!MessageTypeIconMap[props.type])\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({ 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":";;;;;;;;;;;;;;;;;oCAsEc;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA,UAAM,EAAE,cAAc;AACtB,UAAM,EAAE,kBAAkB;AAE1B,UAAM,UAAU,IAAI,KAAK;AACzB,QAAI,QAAkC;AAEtC,UAAM,iBAAiB,SAAS,MAAM,CAAC,CAAC,mBAAmB,MAAM,KAAK;AACtE,UAAM,kBAAkB,SAAS,MAC/B,MAAM,SAAS,SAAS,OAAO,IAAI,UAAU,MAC/C;AAEA,UAAM,mBAAmB,SAAS,MAChC,MAAM,SAAS,WAAW,KAAK,IAAI,QAAQ,QAC7C;AAEA,UAAM,gBAAgB,SAAwB,MAAM;AAClD,aAAO;AAAA;AAC8B,QACnC;AAAsC;AACxC;AAGF;AACE;AACE,2BAAmB;AACjB,sBAAY;AAAO;AAAM,iBAClB;AAAQ;AACnB;AAGF;AACE;AAAQ;AAGV;AACE;AAAgB;AAGlB;AACE;AACE,mBAAW;AAAA;AAGX;AACE;AAAM;AACR;AAEA;AAAW;AACb;AAIF;AACE;AACA;AAAgB;AAGlB;AAEA;AAAa;AACX,MAEA;AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}