bootstrap-vue-next
Version:
Seamless integration of Vue 3, Bootstrap 5, and TypeScript for modern, type-safe UI development
1 lines • 13.6 kB
Source Map (JSON)
{"version":3,"file":"BButton-DPCH-g3G.mjs","names":[],"sources":["../src/components/BButton/BButton.vue","../src/components/BButton/BButton.vue"],"sourcesContent":["<template>\n <component\n :is=\"computedTag\"\n ref=\"_element\"\n class=\"btn\"\n v-bind=\"linkProps\"\n :class=\"computedClasses\"\n :aria-disabled=\"computedAriaDisabled\"\n :aria-pressed=\"isToggle ? pressedValue : null\"\n :autocomplete=\"isToggle ? 'off' : null\"\n :disabled=\"isButton ? props.disabled : null\"\n :href=\"props.href\"\n :rel=\"computedLink ? props.rel : null\"\n :role=\"nonStandardTag || computedLink ? 'button' : null\"\n :target=\"computedLink ? props.target : null\"\n :type=\"isButton ? props.type : null\"\n :to=\"!isButton ? props.to : null\"\n @click=\"clicked\"\n >\n <slot v-if=\"props.loading\" name=\"loading\">\n <template v-if=\"!props.loadingFill\">\n {{ props.loadingText }}\n </template>\n <slot name=\"loading-spinner\">\n <BSpinner\n :small=\"props.size !== 'lg'\"\n :label=\"props.loadingFill ? props.loadingText : undefined\"\n />\n </slot>\n </slot>\n <slot v-else />\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed, useTemplateRef} from 'vue'\nimport BSpinner from '../BSpinner/BSpinner.vue'\nimport {useBLinkHelper} from '../../composables/useBLinkHelper'\nimport BLink from '../BLink/BLink.vue'\nimport {useLinkClasses} from '../../composables/useLinkClasses'\nimport {onKeyStroke} from '@vueuse/core'\nimport type {BButtonProps} from '../../types/ComponentProps'\nimport {useDefaults} from '../../composables/useDefaults'\nimport type {ColorVariant} from '../../types/ColorTypes'\nimport {type BButtonEmits, type BButtonSlots} from '../../types'\n\nconst _props = withDefaults(defineProps<Omit<BButtonProps, 'pressed'>>(), {\n loading: false,\n loadingFill: false,\n loadingText: 'Loading...',\n pill: false,\n size: 'md',\n squared: false,\n tag: 'button',\n type: 'button',\n // Link props\n active: false, // Why is this active: false?\n variant: 'secondary',\n // All others use defaults\n activeClass: undefined,\n disabled: undefined,\n exactActiveClass: undefined,\n stretched: false,\n href: undefined,\n icon: false,\n opacity: undefined,\n opacityHover: undefined,\n rel: undefined,\n replace: undefined,\n routerComponentName: undefined,\n routerTag: undefined,\n target: undefined,\n to: undefined,\n underlineOffset: undefined,\n underlineOffsetHover: undefined,\n underlineOpacity: undefined,\n underlineOpacityHover: undefined,\n underlineVariant: null,\n // End link props\n})\nconst props = useDefaults(_props, 'BButton')\nconst emit = defineEmits<BButtonEmits>()\ndefineSlots<BButtonSlots>()\n\nconst element = useTemplateRef<HTMLButtonElement | null>('_element')\n\nconst pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})\n\nconst {computedLink, computedLinkProps} = useBLinkHelper(props, [\n 'activeClass',\n 'exactActiveClass',\n 'replace',\n 'routerComponentName',\n 'routerTag',\n 'noPrefetch',\n 'prefetch',\n 'prefetchOn',\n 'prefetchedClass',\n])\n\nconst isToggle = computed(() => typeof pressedValue.value === 'boolean')\nconst isButton = computed(\n () => props.tag === 'button' && props.href === undefined && props.to === undefined\n)\nconst isBLink = computed(() => props.to !== undefined)\nconst nonStandardTag = computed(() => (props.href !== undefined ? false : !isButton.value))\n\nconst linkProps = computed(() => (isBLink.value ? computedLinkProps.value : []))\nconst computedAriaDisabled = computed(() => {\n if (props.href === '#' && props.disabled) return true\n\n return nonStandardTag.value ? props.disabled : null\n})\n\nconst variantIsLinkType = computed(() => props.variant?.startsWith('link') || false)\nconst variantIsLinkTypeSubset = computed(() => props.variant?.startsWith('link-') || false)\nconst linkValueClasses = useLinkClasses(\n computed(() => ({\n ...(variantIsLinkType.value\n ? {\n icon: props.icon,\n opacity: props.opacity,\n opacityHover: props.opacityHover,\n underlineOffset: props.underlineOffset,\n underlineOffsetHover: props.underlineOffsetHover,\n underlineOpacity: props.underlineOpacity,\n underlineOpacityHover: props.underlineOpacityHover,\n underlineVariant: props.underlineVariant,\n variant:\n variantIsLinkTypeSubset.value === true\n ? (props.variant?.slice(5) as ColorVariant)\n : null,\n }\n : undefined),\n }))\n)\nconst computedClasses = computed(() => [\n variantIsLinkType.value === true && computedLink.value === false\n ? linkValueClasses.value\n : undefined,\n [`btn-${props.size}`],\n {\n [`btn-${props.variant}`]: props.variant !== null && variantIsLinkTypeSubset.value === false,\n 'active': props.active || pressedValue.value,\n 'rounded-pill': props.pill,\n 'rounded-0': props.squared,\n 'disabled': props.disabled,\n },\n])\n\nconst computedTag = computed(() => (isBLink.value ? BLink : props.href ? 'a' : props.tag))\n\nconst clicked = (e: Readonly<MouseEvent>): void => {\n if (props.disabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n emit('click', e)\n if (isToggle.value) pressedValue.value = !pressedValue.value\n}\n\nonKeyStroke(\n [' ', 'enter'],\n (e) => {\n if (props.href === '#') {\n e.preventDefault()\n element.value?.click()\n }\n },\n {target: element}\n)\n</script>\n","<template>\n <component\n :is=\"computedTag\"\n ref=\"_element\"\n class=\"btn\"\n v-bind=\"linkProps\"\n :class=\"computedClasses\"\n :aria-disabled=\"computedAriaDisabled\"\n :aria-pressed=\"isToggle ? pressedValue : null\"\n :autocomplete=\"isToggle ? 'off' : null\"\n :disabled=\"isButton ? props.disabled : null\"\n :href=\"props.href\"\n :rel=\"computedLink ? props.rel : null\"\n :role=\"nonStandardTag || computedLink ? 'button' : null\"\n :target=\"computedLink ? props.target : null\"\n :type=\"isButton ? props.type : null\"\n :to=\"!isButton ? props.to : null\"\n @click=\"clicked\"\n >\n <slot v-if=\"props.loading\" name=\"loading\">\n <template v-if=\"!props.loadingFill\">\n {{ props.loadingText }}\n </template>\n <slot name=\"loading-spinner\">\n <BSpinner\n :small=\"props.size !== 'lg'\"\n :label=\"props.loadingFill ? props.loadingText : undefined\"\n />\n </slot>\n </slot>\n <slot v-else />\n </component>\n</template>\n\n<script setup lang=\"ts\">\nimport {computed, useTemplateRef} from 'vue'\nimport BSpinner from '../BSpinner/BSpinner.vue'\nimport {useBLinkHelper} from '../../composables/useBLinkHelper'\nimport BLink from '../BLink/BLink.vue'\nimport {useLinkClasses} from '../../composables/useLinkClasses'\nimport {onKeyStroke} from '@vueuse/core'\nimport type {BButtonProps} from '../../types/ComponentProps'\nimport {useDefaults} from '../../composables/useDefaults'\nimport type {ColorVariant} from '../../types/ColorTypes'\nimport {type BButtonEmits, type BButtonSlots} from '../../types'\n\nconst _props = withDefaults(defineProps<Omit<BButtonProps, 'pressed'>>(), {\n loading: false,\n loadingFill: false,\n loadingText: 'Loading...',\n pill: false,\n size: 'md',\n squared: false,\n tag: 'button',\n type: 'button',\n // Link props\n active: false, // Why is this active: false?\n variant: 'secondary',\n // All others use defaults\n activeClass: undefined,\n disabled: undefined,\n exactActiveClass: undefined,\n stretched: false,\n href: undefined,\n icon: false,\n opacity: undefined,\n opacityHover: undefined,\n rel: undefined,\n replace: undefined,\n routerComponentName: undefined,\n routerTag: undefined,\n target: undefined,\n to: undefined,\n underlineOffset: undefined,\n underlineOffsetHover: undefined,\n underlineOpacity: undefined,\n underlineOpacityHover: undefined,\n underlineVariant: null,\n // End link props\n})\nconst props = useDefaults(_props, 'BButton')\nconst emit = defineEmits<BButtonEmits>()\ndefineSlots<BButtonSlots>()\n\nconst element = useTemplateRef<HTMLButtonElement | null>('_element')\n\nconst pressedValue = defineModel<BButtonProps['pressed']>('pressed', {default: undefined})\n\nconst {computedLink, computedLinkProps} = useBLinkHelper(props, [\n 'activeClass',\n 'exactActiveClass',\n 'replace',\n 'routerComponentName',\n 'routerTag',\n 'noPrefetch',\n 'prefetch',\n 'prefetchOn',\n 'prefetchedClass',\n])\n\nconst isToggle = computed(() => typeof pressedValue.value === 'boolean')\nconst isButton = computed(\n () => props.tag === 'button' && props.href === undefined && props.to === undefined\n)\nconst isBLink = computed(() => props.to !== undefined)\nconst nonStandardTag = computed(() => (props.href !== undefined ? false : !isButton.value))\n\nconst linkProps = computed(() => (isBLink.value ? computedLinkProps.value : []))\nconst computedAriaDisabled = computed(() => {\n if (props.href === '#' && props.disabled) return true\n\n return nonStandardTag.value ? props.disabled : null\n})\n\nconst variantIsLinkType = computed(() => props.variant?.startsWith('link') || false)\nconst variantIsLinkTypeSubset = computed(() => props.variant?.startsWith('link-') || false)\nconst linkValueClasses = useLinkClasses(\n computed(() => ({\n ...(variantIsLinkType.value\n ? {\n icon: props.icon,\n opacity: props.opacity,\n opacityHover: props.opacityHover,\n underlineOffset: props.underlineOffset,\n underlineOffsetHover: props.underlineOffsetHover,\n underlineOpacity: props.underlineOpacity,\n underlineOpacityHover: props.underlineOpacityHover,\n underlineVariant: props.underlineVariant,\n variant:\n variantIsLinkTypeSubset.value === true\n ? (props.variant?.slice(5) as ColorVariant)\n : null,\n }\n : undefined),\n }))\n)\nconst computedClasses = computed(() => [\n variantIsLinkType.value === true && computedLink.value === false\n ? linkValueClasses.value\n : undefined,\n [`btn-${props.size}`],\n {\n [`btn-${props.variant}`]: props.variant !== null && variantIsLinkTypeSubset.value === false,\n 'active': props.active || pressedValue.value,\n 'rounded-pill': props.pill,\n 'rounded-0': props.squared,\n 'disabled': props.disabled,\n },\n])\n\nconst computedTag = computed(() => (isBLink.value ? BLink : props.href ? 'a' : props.tag))\n\nconst clicked = (e: Readonly<MouseEvent>): void => {\n if (props.disabled) {\n e.preventDefault()\n e.stopPropagation()\n return\n }\n emit('click', e)\n if (isToggle.value) pressedValue.value = !pressedValue.value\n}\n\nonKeyStroke(\n [' ', 'enter'],\n (e) => {\n if (props.href === '#') {\n e.preventDefault()\n element.value?.click()\n }\n },\n {target: element}\n)\n</script>\n"],"mappings":"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"}