@extclp/vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
1 lines • 4 kB
Source Map (JSON)
{"version":3,"file":"badge.vue2.mjs","sources":["../../../components/badge/badge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Renderer } from '@/components/renderer'\n\nimport { computed } from 'vue'\n\nimport { emitEvent, useNameHelper, useProps } from '@vexip-ui/config'\nimport { badgeProps } from './props'\nimport { badgeTypes } from './symbol'\n\nimport type { BadgeSlots } from './symbol'\n\ndefineOptions({ name: 'Badge' })\n\nconst _props = defineProps(badgeProps)\nconst props = useProps('badge', _props, {\n content: {\n default: null,\n static: true\n },\n max: 0,\n disabled: false,\n isDot: false,\n type: {\n default: 'error',\n validator: value => badgeTypes.includes(value)\n },\n color: null,\n slots: () => ({})\n})\n\nconst slots = defineSlots<BadgeSlots>()\n\nconst nh = useNameHelper('badge')\n\nconst hasSlot = computed(() => {\n return !!slots.default\n})\nconst className = computed(() => {\n return {\n [nh.b()]: true,\n [nh.bs('vars')]: true,\n [nh.bm('inherit')]: props.inherit,\n [nh.bm('not-wrapper')]: !hasSlot.value,\n [nh.bm('is-dot')]: props.isDot\n }\n})\nconst renderContent = computed(() => {\n if (props.isDot) return ''\n\n if (typeof props.content === 'number' && props.max > 0) {\n return props.content > props.max ? `${props.max}+` : props.content\n }\n\n return props.content\n})\nconst transitionName = computed(() => {\n return hasSlot.value ? nh.bs('badge-zoom') : nh.bs('zoom')\n})\nconst title = computed(() => {\n return props.content || props.content === 0 ? props.content.toString() : undefined\n})\nconst showSub = computed(() => {\n return !props.disabled && (props.content || props.content === 0 || props.isDot)\n})\n\nfunction handleBadgeClick(event: MouseEvent) {\n emitEvent(props.onBadgeClick, event)\n}\n</script>\n\n<template>\n <div :class=\"className\">\n <slot>\n <Renderer :renderer=\"props.slots.default\"></Renderer>\n </slot>\n <Transition :name=\"transitionName\">\n <sup\n v-show=\"showSub\"\n :class=\"{\n [nh.be('content')]: true,\n [nh.bem('content', 'fixed')]: hasSlot,\n [nh.bem('content', props.type)]: props.type !== 'error'\n }\"\n :style=\"{ backgroundColor: props.color }\"\n :title=\"title\"\n @click=\"handleBadgeClick\"\n >\n <slot name=\"content\" :content=\"renderContent\">\n <Renderer :renderer=\"props.slots.content\" :data=\"{ content: renderContent }\">\n {{ renderContent }}\n </Renderer>\n </slot>\n </sup>\n </Transition>\n </div>\n</template>\n"],"names":["props","useProps","__props","value","badgeTypes","slots","_useSlots","nh","useNameHelper","hasSlot","computed","className","renderContent","transitionName","title","showSub","handleBadgeClick","event","emitEvent"],"mappings":";;;;;;;;;;;AAcM,UAAAA,IAAQC,EAAS,SADRC,GACyB;AAAA,MACtC,SAAS;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,MACV,OAAO;AAAA,MACP,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,WAAW,CAAAC,MAASC,EAAW,SAASD,CAAK;AAAA,MAC/C;AAAA,MACA,OAAO;AAAA,MACP,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAEKE,IAAQC,EAAA,GAERC,IAAKC,EAAc,OAAO,GAE1BC,IAAUC,EAAS,MAChB,CAAC,CAACL,EAAM,OAChB,GACKM,IAAYD,EAAS,OAClB;AAAA,MACL,CAACH,EAAG,EAAE,CAAC,GAAG;AAAA,MACV,CAACA,EAAG,GAAG,MAAM,CAAC,GAAG;AAAA,MACjB,CAACA,EAAG,GAAG,SAAS,CAAC,GAAGP,EAAM;AAAA,MAC1B,CAACO,EAAG,GAAG,aAAa,CAAC,GAAG,CAACE,EAAQ;AAAA,MACjC,CAACF,EAAG,GAAG,QAAQ,CAAC,GAAGP,EAAM;AAAA,IAC3B,EACD,GACKY,IAAgBF,EAAS,MACzBV,EAAM,QAAc,KAEpB,OAAOA,EAAM,WAAY,YAAYA,EAAM,MAAM,KAC5CA,EAAM,UAAUA,EAAM,MAAM,GAAGA,EAAM,GAAG,MAG1CA,EAAM,OACd,GACKa,IAAiBH,EAAS,MACvBD,EAAQ,QAAQF,EAAG,GAAG,YAAY,IAAIA,EAAG,GAAG,MAAM,CAC1D,GACKO,IAAQJ,EAAS,MACdV,EAAM,WAAWA,EAAM,YAAY,IAAIA,EAAM,QAAQ,SAAa,IAAA,MAC1E,GACKe,IAAUL,EAAS,MAChB,CAACV,EAAM,aAAaA,EAAM,WAAWA,EAAM,YAAY,KAAKA,EAAM,MAC1E;AAED,aAASgB,EAAiBC,GAAmB;AACjC,MAAAC,EAAAlB,EAAM,cAAciB,CAAK;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}