element-plus
Version:
A Component Library for Vue 3
1 lines • 2.62 kB
Source Map (JSON)
{"version":3,"file":"alert2.mjs","names":[],"sources":["../../../../../../packages/components/alert/src/alert.vue"],"sourcesContent":["<template>\n <transition :name=\"ns.b('fade')\">\n <div\n v-show=\"visible\"\n :class=\"[ns.b(), ns.m(type), ns.is('center', center), ns.is(effect)]\"\n role=\"alert\"\n >\n <el-icon\n v-if=\"showIcon && ($slots.icon || iconComponent)\"\n :class=\"[ns.e('icon'), ns.is('big', hasDesc)]\"\n >\n <slot name=\"icon\">\n <component :is=\"iconComponent\" />\n </slot>\n </el-icon>\n\n <div :class=\"ns.e('content')\">\n <span\n v-if=\"title || $slots.title\"\n :class=\"[ns.e('title'), { 'with-description': hasDesc }]\"\n >\n <slot name=\"title\">{{ title }}</slot>\n </span>\n <p v-if=\"hasDesc\" :class=\"ns.e('description')\">\n <slot>\n {{ description }}\n </slot>\n </p>\n <template v-if=\"closable\">\n <div\n v-if=\"closeText\"\n :class=\"[ns.e('close-btn'), ns.is('customed')]\"\n @click=\"close\"\n >\n {{ closeText }}\n </div>\n <el-icon v-else :class=\"ns.e('close-btn')\" @click=\"close\">\n <Close />\n </el-icon>\n </template>\n </div>\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, ref, useSlots } from 'vue'\nimport { ElIcon } from '@element-plus/components/icon'\nimport {\n TypeComponents,\n TypeComponentsMap,\n flattedChildren,\n isComment,\n} from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { alertEmits } from './alert'\n\nimport type { AlertProps } from './alert'\n\nconst { Close } = TypeComponents\n\ndefineOptions({\n name: 'ElAlert',\n})\n\nconst props = withDefaults(defineProps<AlertProps>(), {\n title: '',\n description: '',\n type: 'info',\n closable: true,\n closeText: '',\n effect: 'light',\n})\nconst emit = defineEmits(alertEmits)\nconst slots = useSlots()\n\nconst ns = useNamespace('alert')\n\nconst visible = ref(true)\n\nconst iconComponent = computed(() => TypeComponentsMap[props.type])\n\nconst hasDesc = computed(() => {\n if (props.description) return true\n const slotContent = slots.default?.()\n if (!slotContent) return false\n\n const children = flattedChildren(slotContent)\n return children.some((child) => !isComment(child))\n})\n\nconst close = (evt: MouseEvent) => {\n visible.value = false\n emit('close', evt)\n}\n</script>\n"],"mappings":""}