element-plus
Version:
A Component Library for Vue 3
1 lines • 5.86 kB
Source Map (JSON)
{"version":3,"file":"notification2.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]\"\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\"></h2>\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 compromized, nerver use user's input as message -->\n <!-- eslint-disable-next-line -->\n <p v-else v-html=\"message\"></p>\n </slot>\n </div>\n <el-icon v-if=\"showClose\" :class=\"ns.e('closeBtn')\" @click.stop=\"close\">\n <close />\n </el-icon>\n </div>\n </div>\n </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted } from 'vue'\nimport { useEventListener, useTimeoutFn } from '@vueuse/core'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { useNamespace } from '@element-plus/hooks'\nimport { notificationProps, notificationEmits } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n name: 'ElNotification',\n\n components: {\n ElIcon,\n ...TypeComponents,\n },\n\n props: notificationProps,\n emits: notificationEmits,\n\n setup(props) {\n const ns = useNamespace('notification')\n const visible = ref(false)\n let timer: (() => void) | undefined = undefined\n\n const typeClass = computed(() => {\n const type = props.type\n return type && TypeComponentsMap[props.type] ? ns.m(type) : ''\n })\n\n const iconComponent = computed(() => {\n return TypeComponentsMap[props.type] || props.icon || ''\n })\n\n const horizontalClass = computed(() =>\n props.position.endsWith('right') ? 'right' : 'left'\n )\n\n const verticalProperty = computed(() =>\n props.position.startsWith('top') ? 'top' : 'bottom'\n )\n\n const positionStyle = computed<CSSProperties>(() => {\n return {\n [verticalProperty.value]: `${props.offset}px`,\n zIndex: props.zIndex,\n }\n })\n\n function startTimer() {\n if (props.duration > 0) {\n ;({ stop: timer } = useTimeoutFn(() => {\n if (visible.value) close()\n }, props.duration))\n }\n }\n\n function clearTimer() {\n timer?.()\n }\n\n function close() {\n visible.value = false\n }\n\n function 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\n onMounted(() => {\n startTimer()\n visible.value = true\n })\n\n useEventListener(document, 'keydown', onKeydown)\n\n return {\n ns,\n horizontalClass,\n typeClass,\n iconComponent,\n positionStyle,\n visible,\n\n close,\n clearTimer,\n startTimer,\n }\n },\n})\n</script>\n"],"names":["_openBlock","_createBlock","_createElementVNode","_normalizeClass","_normalizeStyle","_createCommentVNode","_createElementBlock","_withCtx"],"mappings":";;;;;;;;;;;;AAmDA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,OACG;AAAA;AAAA,EAGL,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AACxB,UAAM,UAAU,IAAI;AACpB,QAAI,QAAkC;AAEtC,UAAM,YAAY,SAAS,MAAM;AAC/B,YAAM,OAAO,MAAM;AACnB,aAAO,QAAQ,kBAAkB,MAAM,QAAQ,GAAG,EAAE,QAAQ;AAAA;AAG9D,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,kBAAkB,MAAM,SAAS,MAAM,QAAQ;AAAA;AAGxD,UAAM,kBAAkB,SAAS,MAC/B,MAAM,SAAS,SAAS,WAAW,UAAU;AAG/C,UAAM,mBAAmB,SAAS,MAChC,MAAM,SAAS,WAAW,SAAS,QAAQ;AAG7C,UAAM,gBAAgB,SAAwB,MAAM;AAClD,aAAO;AAAA,SACJ,iBAAiB,QAAQ,GAAG,MAAM;AAAA,QACnC,QAAQ,MAAM;AAAA;AAAA;AAIlB,0BAAsB;AACpB,UAAI,MAAM,WAAW,GAAG;AACtB;AAAC,QAAC,GAAE,MAAM,UAAU,aAAa,MAAM;AACrC,cAAI,QAAQ;AAAO;AAAA,WAClB,MAAM;AAAA;AAAA;AAIb,0BAAsB;AACpB;AAAA;AAGF,qBAAiB;AACf,cAAQ,QAAQ;AAAA;AAGlB,uBAAmB,EAAE,QAAuB;AAC1C,UAAI,SAAS,WAAW,UAAU,SAAS,WAAW,WAAW;AAC/D;AAAA,iBACS,SAAS,WAAW,KAAK;AAElC,YAAI,QAAQ,OAAO;AACjB;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAKJ,cAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA;AAGlB,qBAAiB,UAAU,WAAW;AAEtC,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;;;;;SAxIKA,aAAIC;AAAA,IACV,cAAY,EAAE;AAAA,IACd,eAAW;AAAA;;qBAEZ;AAAA,qBAESC;AAAA,QACN,SAAK;AAAA,QACL,OAAKC,eAAE,mBAAa;AAAA,QACrB,OAAKC,eAAO;AAAA,QACX;AAAA,QACA,cAAU,uCAAE;AAAA,QACZ,cAAK,uCAAE,mCAAO;AAAA;SAEA;AAAA;UAAgB,KAAK;AAAA;;2BAClC;AAAA;;;4BAEFC,mBAiBM;AAAA,2BAjBK,OAAE;AAAA;WACX;AAAA,6BAAU,MAAE;AAAA,kCAAe,QAAc;AAAA;uBACzC;AAAA,yBAEQH,mBAAM;AAAA,YACX,OAAKC,oBAAI;AAAA;aAEV;AAAA,uBACY,wBAAwB;AAAA,6DAGlCG,mBAA+B,oEAF/BA;AAAA,gBACAD;AAAA,gBACAA,mBAA+B;AAAA;;;iBARlB;AAAA;;;YAWU,KAAK;AAAA,YAAqB,OAAKF,oBAAO;AAAA;;qBAC/DI,QAAS;AAAA;;;;;aA3BE;AAAA;;;;;;;;;;"}