bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
1 lines • 8.13 kB
Source Map (JSON)
{"version":3,"file":"BBadge-D5ra3W5R.mjs","names":[],"sources":["../src/components/BBadge/BBadge.vue","../src/components/BBadge/BBadge.vue"],"sourcesContent":["<template>\n <component :is=\"computedTag\" class=\"badge\" :class=\"computedClasses\" v-bind=\"computedLinkProps\">\n <ConditionalWrapper\n :skip=\"props.dotIndicator !== true\"\n tag=\"span\"\n v-bind=\"props.dotIndicator ? {class: 'visually-hidden'} : {}\"\n >\n <slot />\n </ConditionalWrapper>\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {useBLinkHelper} from '../../composables/useBLinkHelper'\nimport {useColorVariantClasses} from '../../composables/useColorVariantClasses'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {computed} from 'vue'\nimport type {BBadgeProps} from '../../types/ComponentProps'\nimport BLink from '../BLink/BLink.vue'\nimport ConditionalWrapper from '../ConditionalWrapper.vue'\nimport type {BBadgeSlots} from '../../types'\n\nconst _props = withDefaults(defineProps<BBadgeProps>(), {\n dotIndicator: false,\n pill: false,\n tag: 'span',\n placement: undefined,\n // Link props\n variant: 'secondary',\n // All others use defaults\n active: undefined,\n activeClass: undefined,\n disabled: undefined,\n exactActiveClass: undefined,\n href: undefined,\n icon: undefined,\n opacity: undefined,\n opacityHover: undefined,\n rel: undefined,\n replace: undefined,\n routerComponentName: undefined,\n stretched: false,\n target: undefined,\n to: undefined,\n underlineOffset: undefined,\n underlineOffsetHover: undefined,\n underlineOpacity: undefined,\n underlineOpacityHover: undefined,\n underlineVariant: undefined,\n // End link props\n // ColorExtendables props\n // Variant is here as well\n textVariant: null,\n bgVariant: null,\n // End ColorExtendables props\n})\nconst props = useDefaults(_props, 'BBadge')\ndefineSlots<BBadgeSlots>()\n\nconst {computedLink, computedLinkProps} = useBLinkHelper(props, [\n 'active',\n 'activeClass',\n 'disabled',\n 'exactActiveClass',\n 'href',\n 'icon',\n 'noRel',\n 'opacity',\n 'opacityHover',\n 'noPrefetch',\n 'prefetch',\n 'prefetchOn',\n 'prefetchedClass',\n 'rel',\n 'replace',\n 'routerComponentName',\n 'stretched',\n 'target',\n 'to',\n 'underlineOffset',\n 'underlineOffsetHover',\n 'underlineOpacity',\n 'underlineOpacityHover',\n 'underlineVariant',\n])\n\nconst computedTag = computed(() => (computedLink.value ? BLink : props.tag))\n\nconst placementClasses = computed(() => {\n // dotindicator is implicitly top-end if no placement is set\n const pos = props.placement ?? (props.dotIndicator ? 'top-end' : undefined)\n return [\n 'position-absolute',\n 'translate-middle',\n {\n 'start-0 top-0': pos === 'top-start',\n 'start-0 top-50': pos === 'start',\n 'start-0 top-100': pos === 'bottom-start',\n 'start-50 top-0': pos === 'top',\n 'start-50 top-100': pos === 'bottom',\n 'start-100 top-0': pos === 'top-end',\n 'start-100 top-50': pos === 'end',\n 'start-100 top-100': pos === 'bottom-end',\n },\n ]\n})\n\nconst colorClasses = useColorVariantClasses(props)\nconst computedClasses = computed(() => [\n colorClasses.value,\n props.placement !== undefined || props.dotIndicator === true ? placementClasses.value : undefined,\n {\n 'active': props.active,\n 'disabled': props.disabled,\n 'rounded-pill': props.pill,\n 'p-2 border border-light rounded-circle': props.dotIndicator,\n 'text-decoration-none': computedLink.value,\n },\n])\n</script>\n","<template>\n <component :is=\"computedTag\" class=\"badge\" :class=\"computedClasses\" v-bind=\"computedLinkProps\">\n <ConditionalWrapper\n :skip=\"props.dotIndicator !== true\"\n tag=\"span\"\n v-bind=\"props.dotIndicator ? {class: 'visually-hidden'} : {}\"\n >\n <slot />\n </ConditionalWrapper>\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {useBLinkHelper} from '../../composables/useBLinkHelper'\nimport {useColorVariantClasses} from '../../composables/useColorVariantClasses'\nimport {useDefaults} from '../../composables/useDefaults'\nimport {computed} from 'vue'\nimport type {BBadgeProps} from '../../types/ComponentProps'\nimport BLink from '../BLink/BLink.vue'\nimport ConditionalWrapper from '../ConditionalWrapper.vue'\nimport type {BBadgeSlots} from '../../types'\n\nconst _props = withDefaults(defineProps<BBadgeProps>(), {\n dotIndicator: false,\n pill: false,\n tag: 'span',\n placement: undefined,\n // Link props\n variant: 'secondary',\n // All others use defaults\n active: undefined,\n activeClass: undefined,\n disabled: undefined,\n exactActiveClass: undefined,\n href: undefined,\n icon: undefined,\n opacity: undefined,\n opacityHover: undefined,\n rel: undefined,\n replace: undefined,\n routerComponentName: undefined,\n stretched: false,\n target: undefined,\n to: undefined,\n underlineOffset: undefined,\n underlineOffsetHover: undefined,\n underlineOpacity: undefined,\n underlineOpacityHover: undefined,\n underlineVariant: undefined,\n // End link props\n // ColorExtendables props\n // Variant is here as well\n textVariant: null,\n bgVariant: null,\n // End ColorExtendables props\n})\nconst props = useDefaults(_props, 'BBadge')\ndefineSlots<BBadgeSlots>()\n\nconst {computedLink, computedLinkProps} = useBLinkHelper(props, [\n 'active',\n 'activeClass',\n 'disabled',\n 'exactActiveClass',\n 'href',\n 'icon',\n 'noRel',\n 'opacity',\n 'opacityHover',\n 'noPrefetch',\n 'prefetch',\n 'prefetchOn',\n 'prefetchedClass',\n 'rel',\n 'replace',\n 'routerComponentName',\n 'stretched',\n 'target',\n 'to',\n 'underlineOffset',\n 'underlineOffsetHover',\n 'underlineOpacity',\n 'underlineOpacityHover',\n 'underlineVariant',\n])\n\nconst computedTag = computed(() => (computedLink.value ? BLink : props.tag))\n\nconst placementClasses = computed(() => {\n // dotindicator is implicitly top-end if no placement is set\n const pos = props.placement ?? (props.dotIndicator ? 'top-end' : undefined)\n return [\n 'position-absolute',\n 'translate-middle',\n {\n 'start-0 top-0': pos === 'top-start',\n 'start-0 top-50': pos === 'start',\n 'start-0 top-100': pos === 'bottom-start',\n 'start-50 top-0': pos === 'top',\n 'start-50 top-100': pos === 'bottom',\n 'start-100 top-0': pos === 'top-end',\n 'start-100 top-50': pos === 'end',\n 'start-100 top-100': pos === 'bottom-end',\n },\n ]\n})\n\nconst colorClasses = useColorVariantClasses(props)\nconst computedClasses = computed(() => [\n colorClasses.value,\n props.placement !== undefined || props.dotIndicator === true ? placementClasses.value : undefined,\n {\n 'active': props.active,\n 'disabled': props.disabled,\n 'rounded-pill': props.pill,\n 'p-2 border border-light rounded-circle': props.dotIndicator,\n 'text-decoration-none': computedLink.value,\n },\n])\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,MAAM,QAAQ,YAlCC,SAkCmB,SAAQ;EAG1C,MAAM,EAAC,cAAc,sBAAqB,eAAe,OAAO;GAC9D;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CAAA;EAED,MAAM,cAAc,eAAgB,aAAa,QAAQ,gBAAQ,MAAM,IAAI;EAE3E,MAAM,mBAAmB,eAAe;GAEtC,MAAM,MAAM,MAAM,cAAc,MAAM,eAAe,YAAY,KAAA;AACjE,UAAO;IACL;IACA;IACA;KACE,iBAAiB,QAAQ;KACzB,kBAAkB,QAAQ;KAC1B,mBAAmB,QAAQ;KAC3B,kBAAkB,QAAQ;KAC1B,oBAAoB,QAAQ;KAC5B,mBAAmB,QAAQ;KAC3B,oBAAoB,QAAQ;KAC5B,qBAAqB,QAAQ;;IAEjC;IACD;EAED,MAAM,eAAe,uBAAuB,MAAK;EACjD,MAAM,kBAAkB,eAAe;GACrC,aAAa;GACb,MAAM,cAAc,KAAA,KAAa,MAAM,iBAAiB,OAAO,iBAAiB,QAAQ,KAAA;GACxF;IACE,UAAU,MAAM;IAChB,YAAY,MAAM;IAClB,gBAAgB,MAAM;IACtB,0CAA0C,MAAM;IAChD,wBAAwB,aAAa;;GAExC,CAAA;;uBArHC,YAQY,wBARI,YAAA,MAAW,EAA3B,WAQY,EARiB,OAAK,CAAC,SAAgB,gBAAA,MAAe,EAAA,EAAU,MAAA,kBAAiB,CAAA,EAAA;2BAOtE,CANrB,YAMqB,4BANrB,WAMqB;KALlB,MAAM,MAAA,MAAK,CAAC,iBAAY;KACzB,KAAI;OACI,MAAA,MAAK,CAAC,eAAY,EAAA,OAAA,mBAAA,GAAA,EAAA,CAAA,EAAA;4BAElB,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}