UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 1.86 kB
{"version":3,"file":"badge2.mjs","names":[],"sources":["../../../../../../packages/components/badge/src/badge.vue"],"sourcesContent":["<template>\n <div :class=\"ns.b()\">\n <slot />\n <transition :name=\"`${ns.namespace.value}-zoom-in-center`\">\n <sup\n v-if=\"!hidden && (content || isDot || $slots.content)\"\n :class=\"[\n ns.e('content'),\n ns.em('content', type),\n ns.is('fixed', !!$slots.default),\n ns.is('dot', isDot),\n ns.is('hide-zero', !showZero && value === 0),\n badgeClass,\n ]\"\n :style=\"style\"\n >\n <slot name=\"content\" :value=\"content\">\n {{ content }}\n </slot>\n </sup>\n </transition>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { addUnit, isNumber } from '@element-plus/utils'\n\nimport type { StyleValue } from 'vue'\nimport type { BadgeProps } from './badge'\n\ndefineOptions({\n name: 'ElBadge',\n})\n\nconst props = withDefaults(defineProps<BadgeProps>(), {\n badgeStyle: undefined,\n value: '',\n max: 99,\n type: 'danger',\n showZero: true,\n offset: () => [0, 0],\n})\n\nconst ns = useNamespace('badge')\n\nconst content = computed<string>(() => {\n if (props.isDot) return ''\n if (isNumber(props.value) && isNumber(props.max)) {\n return props.max < props.value ? `${props.max}+` : `${props.value}`\n }\n return `${props.value}`\n})\n\nconst style = computed<StyleValue>(() => {\n return [\n {\n backgroundColor: props.color,\n marginRight: addUnit(-props.offset[0]),\n marginTop: addUnit(props.offset[1]),\n },\n props.badgeStyle ?? {},\n ]\n})\n\ndefineExpose({\n /** @description badge content */\n content,\n})\n</script>\n"],"mappings":""}