You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
12 KiB
1 lines
12 KiB
{"ast":null,"code":"import { defineComponent, ref, computed, onMounted, openBlock, createBlock, Transition, unref, withCtx, withDirectives, createElementVNode, normalizeClass, normalizeStyle, resolveDynamicComponent, createCommentVNode, toDisplayString, renderSlot, createElementBlock, Fragment, vShow, withModifiers, createVNode } from 'vue';\nimport { useEventListener, useTimeoutFn } from '@vueuse/core';\nimport { ElIcon } from '../../icon/index.mjs';\nimport { notificationProps, notificationEmits } from './notification.mjs';\nimport _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';\nimport { useGlobalComponentSettings } from '../../config-provider/src/hooks/use-global-config.mjs';\nimport { TypeComponentsMap, CloseComponents } from '../../../utils/vue/icon.mjs';\nimport { EVENT_CODE } from '../../../constants/aria.mjs';\nconst __default__ = defineComponent({\n name: \"ElNotification\"\n});\nconst _sfc_main = /* @__PURE__ */defineComponent({\n ...__default__,\n props: notificationProps,\n emits: notificationEmits,\n setup(__props, {\n expose\n }) {\n const props = __props;\n const {\n ns,\n zIndex\n } = useGlobalComponentSettings(\"notification\");\n const {\n nextZIndex,\n currentZIndex\n } = zIndex;\n const {\n Close\n } = CloseComponents;\n const visible = ref(false);\n let timer = void 0;\n const typeClass = computed(() => {\n const type = props.type;\n return type && TypeComponentsMap[props.type] ? ns.m(type) : \"\";\n });\n const iconComponent = computed(() => {\n if (!props.type) return props.icon;\n return TypeComponentsMap[props.type] || props.icon;\n });\n const horizontalClass = computed(() => props.position.endsWith(\"right\") ? \"right\" : \"left\");\n const verticalProperty = computed(() => props.position.startsWith(\"top\") ? \"top\" : \"bottom\");\n const positionStyle = computed(() => {\n var _a;\n return {\n [verticalProperty.value]: `${props.offset}px`,\n zIndex: (_a = props.zIndex) != null ? _a : currentZIndex.value\n };\n });\n function startTimer() {\n if (props.duration > 0) {\n ({\n stop: timer\n } = useTimeoutFn(() => {\n if (visible.value) close();\n }, props.duration));\n }\n }\n function clearTimer() {\n timer == null ? void 0 : timer();\n }\n function close() {\n visible.value = false;\n }\n function onKeydown({\n code\n }) {\n if (code === EVENT_CODE.delete || code === EVENT_CODE.backspace) {\n clearTimer();\n } else if (code === EVENT_CODE.esc) {\n if (visible.value) {\n close();\n }\n } else {\n startTimer();\n }\n }\n onMounted(() => {\n startTimer();\n nextZIndex();\n visible.value = true;\n });\n useEventListener(document, \"keydown\", onKeydown);\n expose({\n visible,\n close\n });\n return (_ctx, _cache) => {\n return openBlock(), createBlock(Transition, {\n name: unref(ns).b(\"fade\"),\n onBeforeLeave: _ctx.onClose,\n onAfterLeave: $event => _ctx.$emit(\"destroy\"),\n persisted: \"\"\n }, {\n default: withCtx(() => [withDirectives(createElementVNode(\"div\", {\n id: _ctx.id,\n class: normalizeClass([unref(ns).b(), _ctx.customClass, unref(horizontalClass)]),\n style: normalizeStyle(unref(positionStyle)),\n role: \"alert\",\n onMouseenter: clearTimer,\n onMouseleave: startTimer,\n onClick: _ctx.onClick\n }, [unref(iconComponent) ? (openBlock(), createBlock(unref(ElIcon), {\n key: 0,\n class: normalizeClass([unref(ns).e(\"icon\"), unref(typeClass)])\n }, {\n default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(iconComponent))))]),\n _: 1\n }, 8, [\"class\"])) : createCommentVNode(\"v-if\", true), createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"group\"))\n }, [createElementVNode(\"h2\", {\n class: normalizeClass(unref(ns).e(\"title\")),\n textContent: toDisplayString(_ctx.title)\n }, null, 10, [\"textContent\"]), withDirectives(createElementVNode(\"div\", {\n class: normalizeClass(unref(ns).e(\"content\")),\n style: normalizeStyle(!!_ctx.title ? void 0 : {\n margin: 0\n })\n }, [renderSlot(_ctx.$slots, \"default\", {}, () => [!_ctx.dangerouslyUseHTMLString ? (openBlock(), createElementBlock(\"p\", {\n key: 0\n }, toDisplayString(_ctx.message), 1)) : (openBlock(), createElementBlock(Fragment, {\n key: 1\n }, [createCommentVNode(\" Caution here, message could've been compromised, never use user's input as message \"), createElementVNode(\"p\", {\n innerHTML: _ctx.message\n }, null, 8, [\"innerHTML\"])], 2112))])], 6), [[vShow, _ctx.message]]), _ctx.showClose ? (openBlock(), createBlock(unref(ElIcon), {\n key: 0,\n class: normalizeClass(unref(ns).e(\"closeBtn\")),\n onClick: withModifiers(close, [\"stop\"])\n }, {\n default: withCtx(() => [createVNode(unref(Close))]),\n _: 1\n }, 8, [\"class\", \"onClick\"])) : createCommentVNode(\"v-if\", true)], 2)], 46, [\"id\", \"onClick\"]), [[vShow, visible.value]])]),\n _: 3\n }, 8, [\"name\", \"onBeforeLeave\", \"onAfterLeave\"]);\n };\n }\n});\nvar NotificationConstructor = /* @__PURE__ */_export_sfc(_sfc_main, [[\"__file\", \"notification.vue\"]]);\nexport { NotificationConstructor as default };","map":{"version":3,"names":["name","ns","zIndex","useGlobalComponentSettings","nextZIndex","currentZIndex","Close","CloseComponents","visible","ref","timer","typeClass","computed","type","props","TypeComponentsMap","m","iconComponent","icon","horizontalClass","position","endsWith","verticalProperty","startsWith","positionStyle","_a","value","offset","startTimer","duration","stop","useTimeoutFn","close","clearTimer","onKeydown","code","EVENT_CODE","delete","backspace","esc","onMounted","useEventListener","document","expose","_ctx","_cache","openBlock","createBlock","Transition"],"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 <Close />\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 { CloseComponents, TypeComponentsMap } 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, notificationProps } from './notification'\n\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'ElNotification',\n})\n\nconst props = defineProps(notificationProps)\ndefineEmits(notificationEmits)\n\nconst { ns, zIndex } = useGlobalComponentSettings('notification')\nconst { nextZIndex, currentZIndex } = zIndex\n\nconst { Close } = CloseComponents\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({ 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 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":";;;;;;;;mCAkDc;EACZA,IAAM;AACR;;;;;;;;;IAKA,MAAM;MAAEC,EAAA;MAAIC;IAAO,IAAIC,0BAAA,CAA2B,cAAc;IAC1D;MAAEC,UAAY;MAAAC;IAAA,CAAkB,GAAAH,MAAA;IAEhC;MAAEI;IAAA,CAAU,GAAAC,eAAA;IAEZ,MAAAC,OAAA,GAAUC,GAAA,CAAI,KAAK;IACzB,IAAIC,KAAkC;IAEhC,MAAAC,SAAA,GAAYC,QAAA,CAAS,MAAM;MAC/B,MAAMC,IAAA,GAAOC,KAAM,CAAAD,IAAA;MACZ,OAAAA,IAAA,IAAQE,iBAAA,CAAkBD,KAAM,CAAAD,IAAI,IAAIZ,EAAG,CAAAe,CAAA,CAAEH,IAAI,CAAI;IAAA,CAC7D;IAEK,MAAAI,aAAA,GAAgBL,QAAA,CAAS,MAAM;MACnC,IAAI,CAACE,KAAA,CAAMD,IAAM,EACjB,OAAyBC,KAAA,CAAAI,IAAA;MAC1B,OAAAH,iBAAA,CAAAD,KAAA,CAAAD,IAAA,KAAAC,KAAA,CAAAI,IAAA;IAED;IAAwB,MAAAC,eAChB,GAAkBP,QAAA,OAAOE,KAAc,CAAAM,QAAA,CAAAC,QAAA;IAC/C,MAAAC,gBAAA,GAAAV,QAAA,OAAAE,KAAA,CAAAM,QAAA,CAAAG,UAAA;IAEA,MAAMC,aAAmB,GAAAZ,QAAA;MAAS,IAAAa,EAChC;MACF;QAEM,CAAAH,gBAAA,CAAgBI,KAAA,MAA8BZ,KAAA,CAAAa,MAAA;QAC3CzB,MAAA,GAAAuB,EAAA,GAAAX,KAAA,CAAAZ,MAAA,YAAAuB,EAAA,GAAApB,aAAA,CAAAqB;MAAA;IACoC,CACzC;IACF,SAAAE,WAAA;MACD,IAAAd,KAAA,CAAAe,QAAA;QAGK;UAAAC,IAAA,EAAApB;QAAA,IAAiBqB,YAAG;UACtB,IAAAvB,OAAA,CAAAkB,KAAA,EAAIM,KAAM,EAAM;QACd,CAAI,EAAAlB,KAAA,CAAAe,QAAA;MAAqB;IACV;IAErB,SAAAI,WAAA;MAEAvB,KAAA,IAAsB,gBAAAA,KAAA;IACpB;IACF,SAAAsB,MAAA;MAEAxB,OAAS,CAAQkB,KAAA;IACf;IACF,SAAAQ,UAAA;MAAAC;IAAA;MAES,IAAAA,IAAA,KAAAC,UAAY,CAAKC,MAAkB,IAAAF,IAAA,KAAAC,UAAA,CAAAE,SAAA;QAC1CL,UAAa;MACX,CAAW,UAAAE,IAAA,KAAAC,UAAA,CAAAG,GAAA;QACb,IAAA/B,OAAoB,CAAAkB,KAAA;UAElBM,KAAA;QACE;MAAM,CACR;QACKJ,UAAA;MACL;IAAW;IAEfY,SAAA;MAGAZ,UAAgB;MACHxB,UAAA;MACAI,OAAA,CAAAkB,KAAA;IACX;IACFe,gBAAC,CAAAC,QAAA,aAAAR,SAAA;IAEgBS,MAAA;MAEJnC,OAAA;MACXwB;IAAA;IAEA,QAAAY,IAAA,EAAAC,MAAA;MACD,OAAAC,SAAA,IAAAC,WAAA,CAAAC,UAAA","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|