hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 5.08 kB
Source Map (JSON)
{"version":3,"file":"message2.mjs","sources":["../../../../../../packages/components/message/src/message.vue"],"sourcesContent":["<template>\n <transition name=\"message-fade\" @before-leave=\"onClose\" @after-leave=\"$emit('destroy')\">\n <div\n v-show=\"visible\"\n :id=\"id\"\n ref=\"messageRef\"\n :class=\"[\n namespace + '-message',\n hasDefinedIcon ? `${type === 'error' ? 'danger' : type}` : '',\n showClose ? 'is-closable' : '',\n customClass,\n ]\"\n :style=\"customStyle\"\n role=\"alert\"\n @mouseenter=\"clearTimer\"\n @mouseleave=\"startTimer\"\n >\n <hl-badge\n v-if=\"repeatNum > 1\"\n position=\"lt\"\n round\n :value=\"repeatNum\"\n :type=\"badgeType\"\n class=\"message-badge\"\n />\n <slot v-if=\"type && !dangerouslyUseHTMLString\" name=\"icon\">\n <hl-icon class=\"message-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\n <slot>\n <span\n v-if=\"!dangerouslyUseHTMLString\"\n :class=\"['message-content', 'text-' + textAlign]\"\n >{{ message }}</span>\n <div v-else v-html=\"message\"></div>\n </slot>\n <hl-icon v-if=\"showClose\" class=\"message-close\" @click.stop=\"close\">\n <system-close />\n </hl-icon>\n </div>\n </transition>\n</template>\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, watch } from 'vue'\nimport { useEventListener, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport { EVENT_CODE, MessageTypeIconMap } from '@hongluan-ui/constants'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport HlBadge from '@hongluan-ui/components/badge'\nimport { SystemSuccess, SystemInfo, SystemWarning, SystemClose, SystemError } from '@hongluan-ui/components/system-icon'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport { messageEmits, messageProps } from './message'\nimport { getLastOffset, getOffsetOrSpace } from './instance'\nimport type { BadgeProps } from '@hongluan-ui/components/badge'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n name: 'Message',\n})\n\nconst props = defineProps(messageProps)\ndefineEmits(messageEmits)\n\nconst { namespace } = useNamespace()\n\nconst messageRef = ref<HTMLDivElement>()\nconst visible = ref(false)\nconst height = ref(0)\n\nlet stopTimer: (() => void) | undefined = undefined\n\nconst badgeType = computed<BadgeProps['type']>(() =>\n props.type ? (props.type === 'error' ? 'danger' : props.type) : 'info',\n)\n\nconst lastOffset = computed(() => getLastOffset(props.id))\nconst offset = computed(\n () => getOffsetOrSpace(props.id, props.offset) + lastOffset.value,\n)\nconst bottom = computed((): number => height.value + offset.value)\nconst customStyle = computed<CSSProperties>(() => ({\n top: `${offset.value}px`,\n zIndex: props.zIndex,\n}))\nconst hasDefinedIcon = computed(() => !!MessageTypeIconMap[props.type])\n\n\nfunction startTimer() {\n if (props.duration === 0) return\n ;({ stop: stopTimer } = useTimeoutFn(() => {\n close()\n }, props.duration))\n}\n\nfunction clearTimer() {\n stopTimer?.()\n}\n\nfunction close() {\n visible.value = false\n}\n\nfunction keydown({ code }: KeyboardEvent) {\n if (code === EVENT_CODE.esc) {\n // press esc to close the message\n close()\n }\n}\n\nonMounted(() => {\n startTimer()\n visible.value = true\n})\n\nwatch(\n () => props.repeatNum,\n () => {\n clearTimer()\n startTimer()\n },\n)\n\nuseEventListener(document, 'keydown', keydown)\n\nuseResizeObserver(messageRef, () => {\n height.value = messageRef.value!.getBoundingClientRect().height\n})\n\ndefineExpose({\n visible,\n bottom,\n close,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;oCA4Dc;AAAA,EACZ,MAAM;AACR;;;;;;;AAKA,UAAM,EAAE,cAAc;AAEtB,UAAM,aAAa;AACnB,UAAM,UAAU,IAAI,KAAK;AACzB,UAAM,SAAS,IAAI,CAAC;AAEpB,QAAI,YAAsC;AAE1C,UAAM,YAAY,SAA6B,MAC7C,MAAM,OAAQ,MAAM,SAAS,UAAU,WAAW,MAAM,OAAQ,MAClE;AAEA,UAAM,aAAa,SAAS,MAAM,cAAc,MAAM,EAAE,CAAC;AACzD,UAAM,SAAS,SACb,MAAM,iBAAiB,MAAM,IAAI,MAAM,MAAM,IAAI,WAAW,KAC9D;AACA,UAAM,SAAS,SAAS,MAAc,OAAO,QAAQ,OAAO,KAAK;AACjE,UAAM,cAAc,SAAwB;AAAO,MACjD,KAAK,GAAG,OAAO;AAAA,MACf,QAAQ,MAAM;AAAA,MACd;AACF,UAAM,iBAAiB,SAAS,MAAM,CAAC,CAAC,mBAAmB,MAAM,KAAK;AAGtE,0BAAsB;AACpB,UAAI,MAAM,aAAa;AAAG;AACzB,MAAC,GAAE,MAAM,cAAc,aAAa,MAAM;AACzC;AAAM,SACL,MAAM,QAAQ;AAAA;AAGnB,0BAAsB;AACpB;AAAY;AAGd,qBAAiB;AACf,cAAQ,QAAQ;AAAA;AAGlB,qBAAiB,EAAE,QAAuB;AACxC,UAAI,SAAS,WAAW,KAAK;AAE3B;AAAM;AACR;AAGF,cAAU,MAAM;AACd;AACA,cAAQ,QAAQ;AAAA,KACjB;AAED,UACE,MAAM,MAAM,WACZ,MAAM;AACJ;AACA;AAAW,KAEf;AAEA,qBAAiB,UAAU,WAAW,OAAO;AAE7C,sBAAkB,YAAY,MAAM;AAClC,aAAO,QAAQ,WAAW,MAAO,wBAAwB;AAAA,KAC1D;AAED,WAAa;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,KACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}