{"version":3,"file":"index.vue.mjs","sources":["../../../../../../components/message/src/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { noop, useResizeObserver, useTimeoutFn } from '@vueuse/core'\nimport { computed, onMounted, ref } from 'vue'\nimport FnIcon from '../../icon/src/index.vue'\nimport { getLastOffset, getSvgIncon } from './message'\nimport type { MessageType } from './types'\nconst props = withDefaults(\n  defineProps<{\n    message: string\n    duration?: number\n    id: string\n    showIcon?: boolean\n    offset?: number\n    closeBtn?: boolean\n    severity?: MessageType\n  }>(),\n  {\n    severity: 'info',\n    duration: 2000,\n    offset: 20,\n    closeBtn: false,\n    showIcon: true,\n  },\n)\ndefineEmits(['destroy'])\n\nconst visible = ref(false)\nconst height = ref(0)\nconst elRef = ref<HTMLDivElement>()\nlet clearTimer = noop\n\nfunction startTimer() {\n  if (props.duration === 0)\n    return\n  ;({ stop: clearTimer } = useTimeoutFn(() => {\n    visible.value = false\n    clearTimer = noop\n  }, props.duration))\n}\n\nonMounted(() => {\n  startTimer()\n  visible.value = true\n})\n\nuseResizeObserver(elRef as any, () => {\n  height.value = elRef.value!.getBoundingClientRect().height\n})\nconst lastOffset = computed(() => getLastOffset(props.id) + props.offset)\nconst bottom = computed((): number => height.value + lastOffset.value)\n\ndefineExpose({ bottom, lastOffset, visible })\n</script>\n\n<template>\n  <Transition name=\"fn-message-fade\" @after-leave=\"$emit('destroy')\">\n    <div\n      v-show=\"visible\"\n      :id=\"id\"\n      ref=\"elRef\"\n      class=\"fn-message\"\n      :class=\"[`${severity}-container`]\"\n      :style=\"{ top: `${lastOffset}px` }\"\n      @mouseenter=\"clearTimer\"\n      @mouseleave=\"startTimer\"\n    >\n      <div class=\"message-content\">\n        <i v-if=\"props.showIcon\" v-html=\"getSvgIncon(props.severity)\" />\n        {{ message }}\n      </div>\n      <div v-if=\"closeBtn\" class=\"close-btn\" @click=\"visible = false\">\n        <fn-icon icon=\"material-symbols:close\" size=\"18px\" />\n      </div>\n    </div>\n  </Transition>\n</template>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BM,IAAA,MAAA,OAAA,GAAU,IAAI,KAAK,CAAA,CAAA;AACnB,IAAA,MAAA,MAAA,GAAS,IAAI,CAAC,CAAA,CAAA;AACpB,IAAA,MAAM,QAAQ,GAAoB,EAAA,CAAA;AAClC,IAAA,IAAI,UAAa,GAAA,IAAA,CAAA;AAEjB,IAAA,SAAS,UAAa,GAAA;AACpB,MAAA,IAAI,MAAM,QAAa,KAAA,CAAA;AACrB,QAAA,OAAA;AACD,MAAA,CAAC,EAAE,IAAA,EAAM,UAAW,EAAA,GAAI,aAAa,MAAM;AAC1C,QAAA,OAAA,CAAQ,KAAQ,GAAA,KAAA,CAAA;AACH,QAAA,UAAA,GAAA,IAAA,CAAA;AAAA,OACf,EAAG,MAAM,QAAQ,CAAA,EAAA;AAAA,KACnB;AAEA,IAAA,SAAA,CAAU,MAAM;AACH,MAAA,UAAA,EAAA,CAAA;AACX,MAAA,OAAA,CAAQ,KAAQ,GAAA,IAAA,CAAA;AAAA,KACjB,CAAA,CAAA;AAED,IAAA,iBAAA,CAAkB,OAAc,MAAM;AACpC,MAAA,MAAA,CAAO,KAAQ,GAAA,KAAA,CAAM,KAAO,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AAAA,KACrD,CAAA,CAAA;AACK,IAAA,MAAA,UAAA,GAAa,SAAS,MAAM,aAAA,CAAc,MAAM,EAAE,CAAA,GAAI,MAAM,MAAM,CAAA,CAAA;AACxE,IAAA,MAAM,SAAS,QAAS,CAAA,MAAc,MAAO,CAAA,KAAA,GAAQ,WAAW,KAAK,CAAA,CAAA;AAErE,IAAA,MAAA,CAAa,EAAE,MAAA,EAAQ,UAAY,EAAA,OAAA,EAAS,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}