feat\!: remove deprecated dark props. Use useColorMode composable or directive

feat: number props can now accept string | number for more versatility

refactor: remove v-bind and v-on declarations where approprate -- declare them in template and remove computedAttrs syntax

refactor: place static classes in templates, and not in computedClasses

feat\!: standardize class props. ig labelClasses => labelClass... In addition, they have type any instead of the sometimes mix of Object or String

refactor: use useStateClass where appropriate

Author: VividLemon

packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue

@@ -11,7 +11,12 @@
       :horizontal="horizontal"
       :visible="visible"
       :is-nav="isNav"
-      v-on="events"
+      @show="$emit('show', $event)"
+      @shown="emit('shown', $event)"
+      @hide="emit('hide', $event)"
+      @hidden="emit('hidden', $event)"
+      @hide-prevented="emit('hide-prevented')"
+      @show-prevented="emit('show-prevented')"
     >
       <template #header="{visible: toggleVisible, toggle: slotToggle}">
         <component :is="headerTag" :id="`${computedId}-heading`" class="accordion-header">
@@ -88,15 +93,6 @@ defineSlots<{
   title?: (props: Record<string, never>) => any
 }>()
 
-const events = {
-  'show': (e: BvTriggerableEvent) => emit('show', e),
-  'shown': (e: BvTriggerableEvent) => emit('shown', e),
-  'hide': (e: BvTriggerableEvent) => emit('hide', e),
-  'hidden': (e: BvTriggerableEvent) => emit('hidden', e),
-  'hide-prevented': () => emit('hide-prevented'),
-  'show-prevented': () => emit('show-prevented'),
-}
-
 const modelValue = useVModel(props, 'modelValue', emit, {passive: true})
 
 const parentData = inject(accordionInjectionKey, null)

packages/bootstrap-vue-next/src/components/BAlert/BAlert.vue

@@ -31,7 +31,7 @@ import type {Booleanish, ButtonType, ButtonVariant, ColorVariant} from '../../ty
 import {computed, onBeforeUnmount, ref, useSlots, watch, watchEffect} from 'vue'
 import {useBooleanish, useCountdown} from '../../composables'
 import {isEmptySlot} from '../../utils'
-import {useElementHover, useVModel} from '@vueuse/core'
+import {useElementHover, useToNumber, useVModel} from '@vueuse/core'
 
 const props = withDefaults(
   defineProps<{
@@ -44,7 +44,7 @@ const props = withDefaults(
     variant?: ColorVariant | null
     closeContent?: string
     immediate?: Booleanish
-    interval?: number
+    interval?: number | string
     showOnPause?: Booleanish
   }>(),
   {
@@ -87,6 +87,7 @@ const fadeBoolean = useBooleanish(() => props.fade)
 const immediateBoolean = useBooleanish(() => props.immediate)
 const showOnPauseBoolean = useBooleanish(() => props.showOnPause)
 const noHoverPauseBoolean = useBooleanish(() => props.noHoverPause)
+const intervalNumber = useToNumber(() => props.interval)
 
 const hasCloseSlot = computed(() => !isEmptySlot(slots.close))
 
@@ -107,7 +108,7 @@ const {
   stop,
   isPaused,
   value: remainingMs,
-} = useCountdown(countdownLength, () => props.interval, {
+} = useCountdown(countdownLength, intervalNumber, {
   immediate: typeof modelValue.value === 'number' && immediateBoolean.value,
 })
 
@@ -122,7 +123,9 @@ const closeAttrs = computed(() => ({
   type: 'button' as ButtonType,
 }))
 
-watchEffect(() => emit('close-countdown', remainingMs.value))
+watchEffect(() => {
+  emit('close-countdown', remainingMs.value)
+})
 
 const closeClicked = (): void => {
   if (typeof modelValue.value === 'boolean') {

packages/bootstrap-vue-next/src/components/BAvatar/BAvatar.vue

@@ -4,7 +4,9 @@
     class="b-avatar"
     :class="computedClasses"
     :style="computedStyle"
-    v-bind="computedAttrs"
+    v-bind="computedLinkProps"
+    :type="buttonBoolean && !computedLink ? props.buttonType : undefined"
+    :disabled="disabledBoolean || null"
     @click="clicked"
   >
     <span v-if="hasDefaultSlot" class="b-avatar-custom">
@@ -26,16 +28,21 @@
 <script setup lang="ts">
 import {avatarGroupInjectionKey, isEmptySlot, isLink, isNumeric, pick, toFloat} from '../../utils'
 import {computed, type CSSProperties, inject, type StyleValue, useSlots} from 'vue'
-import type {Booleanish, ButtonType, ColorVariant, Size, TextColorVariant} from '../../types'
+import type {
+  BLinkProps,
+  Booleanish,
+  ButtonType,
+  ColorVariant,
+  Size,
+  TextColorVariant,
+} from '../../types'
 import {useBooleanish} from '../../composables'
 import BLink from '../BLink/BLink.vue'
-import type {BLinkProps} from '../../types/BLinkProps'
 
 const props = withDefaults(
   defineProps<
     {
       alt?: string
-      ariaLabel?: string
       badge?: boolean | string
       badgeLeft?: Booleanish
       badgeOffset?: string
@@ -55,7 +62,6 @@ const props = withDefaults(
     } & Omit<BLinkProps, 'event' | 'routerTag'>
   >(),
   {
-    ariaLabel: undefined,
     badgeOffset: undefined,
     icon: undefined,
     size: undefined,
@@ -138,12 +144,8 @@ const computedVariant = computed<ColorVariant | null>(
 
 const computedRounded = computed<string | boolean>(() => parentData?.rounded.value ?? props.rounded)
 
-const computedAttrs = computed(() => ({
-  'type': buttonBoolean.value && !computedLink.value ? props.buttonType : undefined,
-  'aria-label': props.ariaLabel || null,
-  'disabled': disabledBoolean.value || null,
-  // Link props
-  ...(computedLink.value
+const computedLinkProps = computed(() =>
+  computedLink.value
     ? pick(props, [
         'active',
         'activeClass',
@@ -163,8 +165,8 @@ const computedAttrs = computed(() => ({
         'underlineOpacity',
         'underlineOpacityHover',
       ])
-    : {}),
-}))
+    : {}
+)
 
 const badgeClasses = computed(() => ({
   [`bg-${props.badgeVariant}`]: props.badgeVariant !== null,
@@ -249,7 +251,9 @@ const clicked = (e: MouseEvent): void => {
   if (!disabledBoolean.value && (computedLink.value || buttonBoolean.value)) emit('click', e)
 }
 
-const onImgError = (e: Event): void => emit('img-error', e)
+const onImgError = (e: Event) => {
+  emit('img-error', e)
+}
 </script>
 
 <script lang="ts">

packages/bootstrap-vue-next/src/components/BAvatar/BAvatarGroup.vue

@@ -9,9 +9,10 @@
 <script setup lang="ts">
 import {computed, provide, readonly, type StyleValue, toRef} from 'vue'
 import type {Booleanish, ColorVariant, Size} from '../../types'
-import {avatarGroupInjectionKey, isNumeric, toFloat} from '../../utils'
+import {avatarGroupInjectionKey} from '../../utils'
 import {useBooleanish} from '../../composables'
 import {computeSize} from './BAvatar.vue'
+import {useToNumber} from '@vueuse/shared'
 
 const props = withDefaults(
   defineProps<{
@@ -40,19 +41,15 @@ defineSlots<{
 const squareBoolean = useBooleanish(() => props.square)
 
 const computedSize = computed<string | null>(() => computeSize(props.size))
+const overlapNumber = useToNumber(() => props.overlap)
 
-const overlapScale = computed<number>(
-  () => Math.min(Math.max(computeOverlap(props.overlap), 0), 1) / 2
-)
+const overlapScale = computed<number>(() => Math.min(Math.max(overlapNumber.value, 0), 1) / 2)
 
 const paddingStyle = computed<StyleValue>(() => {
   const value = computedSize.value ? `calc(${computedSize.value} * ${overlapScale.value})` : null
   return value ? {paddingLeft: value, paddingRight: value} : {}
 })
 
-const computeOverlap = (value: any): number =>
-  typeof value === 'string' && isNumeric(value) ? toFloat(value, 0) : value || 0
-
 provide(avatarGroupInjectionKey, {
   overlapScale,
   size: readonly(toRef(props, 'size')),

packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue

@@ -8,9 +8,8 @@
 import {isLink, pick} from '../../utils'
 import {useBooleanish} from '../../composables'
 import {computed} from 'vue'
-import type {Booleanish} from '../../types'
+import type {BLinkProps, Booleanish} from '../../types'
 import BLink from '../BLink/BLink.vue'
-import type {BLinkProps} from '../../types/BLinkProps'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue

@@ -18,7 +18,7 @@ import {pick} from '../../utils'
 import {useBooleanish} from '../../composables'
 import {computed} from 'vue'
 import BLink from '../BLink/BLink.vue'
-import type {BLinkProps} from '../../types/BLinkProps'
+import type {BLinkProps} from '../../types'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/bootstrap-vue-next/src/components/BButton/BButton.vue

@@ -3,7 +3,22 @@
     :is="computedTag"
     class="btn"
     :class="computedClasses"
-    v-bind="computedAttrs"
+    :aria-disabled="nonStandardTag ? disabledBoolean : null"
+    :aria-pressed="isToggle ? pressedBoolean : null"
+    :autocomplete="isToggle ? 'off' : null"
+    :disabled="isButton ? disabledBoolean : null"
+    :href="props.href"
+    :rel="computedLink ? props.rel : null"
+    :role="nonStandardTag || computedLink ? 'button' : null"
+    :target="computedLink ? props.target : null"
+    :type="isButton ? props.type : null"
+    :to="!isButton ? props.to : null"
+    :append="computedLink ? props.append : null"
+    :active-class="isBLink ? activeClass : null"
+    :event="isBLink ? event : null"
+    :replace="isBLink ? replace : null"
+    :router-component-name="isBLink ? routerComponentName : null"
+    :router-tag="isBLink ? routerTag : null"
     @click="clicked"
   >
     <div
@@ -28,11 +43,10 @@
 import {computed} from 'vue'
 import BSpinner from '../BSpinner.vue'
 import {useBooleanish} from '../../composables'
-import type {Booleanish, ButtonType, ButtonVariant, Size} from '../../types'
+import type {BLinkProps, Booleanish, ButtonType, ButtonVariant, Size} from '../../types'
 import {isLink} from '../../utils'
 import BLink from '../BLink/BLink.vue'
 import {useVModel} from '@vueuse/core'
-import type {BLinkProps} from '../../types/BLinkProps'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -129,25 +143,6 @@ const computedClasses = computed(() => [
   },
 ])
 
-const computedAttrs = computed(() => ({
-  'aria-disabled': nonStandardTag.value ? disabledBoolean.value : null,
-  'aria-pressed': isToggle.value ? pressedBoolean.value : null,
-  'autocomplete': isToggle.value ? 'off' : null,
-  'disabled': isButton.value ? disabledBoolean.value : null,
-  'href': props.href,
-  'rel': computedLink.value ? props.rel : null,
-  'role': nonStandardTag.value || computedLink.value ? 'button' : null,
-  'target': computedLink.value ? props.target : null,
-  'type': isButton.value ? props.type : null,
-  'to': !isButton.value ? props.to : null,
-  'append': computedLink.value ? props.append : null,
-  'activeClass': isBLink.value ? props.activeClass : null,
-  'event': isBLink.value ? props.event : null,
-  'replace': isBLink.value ? props.replace : null,
-  'routerComponentName': isBLink.value ? props.routerComponentName : null,
-  'routerTag': isBLink.value ? props.routerTag : null,
-}))
-
 const computedTag = computed<string | typeof BLink>(() =>
   isBLink.value ? BLink : props.href ? 'a' : props.tag
 )

packages/bootstrap-vue-next/src/components/BCard/BCard.vue

@@ -5,14 +5,30 @@
     </slot>
     <BCardHeader
       v-if="header || hasHeaderSlot || headerHtml"
-      v-bind="headerAttrs"
+      :bg-variant="headerBgVariant"
+      :border-variant="headerBorderVariant"
+      :html="headerHtml"
+      :tag="headerTag"
+      :text-variant="headerTextVariant"
       :class="headerClass"
     >
       <slot name="header">
         {{ header }}
       </slot>
     </BCardHeader>
-    <BCardBody v-if="!noBodyBoolean" v-bind="bodyAttrs" :class="bodyClass">
+    <BCardBody
+      v-if="!noBodyBoolean"
+      :overlay="overlay"
+      :body-bg-variant="bodyBgVariant"
+      :body-tag="bodyTag"
+      :body-text-variant="bodyTextVariant"
+      :subtitle="subtitle"
+      :subtitle-tag="subtitleTag"
+      :subtitle-text-variant="subtitleTextVariant"
+      :title="title"
+      :title-tag="titleTag"
+      :class="bodyClass"
+    >
       <slot>
         {{ bodyText }}
       </slot>
@@ -22,7 +38,11 @@
     </slot>
     <BCardFooter
       v-if="footer || hasFooterSlot || footerHtml"
-      v-bind="footerAttrs"
+      :bg-variant="footerBgVariant"
+      :border-variant="footerBorderVariant"
+      :html="footerHtml"
+      :tag="footerTag"
+      :text-variant="footerTextVariant"
       :class="footerClass"
     >
       <slot name="footer">
@@ -166,34 +186,6 @@ const computedClasses = computed(() => ({
   'flex-row-reverse': imgEndBoolean.value,
 }))
 
-const headerAttrs = computed(() => ({
-  bgVariant: props.headerBgVariant,
-  borderVariant: props.headerBorderVariant,
-  html: props.headerHtml,
-  tag: props.headerTag,
-  textVariant: props.headerTextVariant,
-}))
-
-const bodyAttrs = computed(() => ({
-  overlay: props.overlay,
-  bodyBgVariant: props.bodyBgVariant,
-  bodyTag: props.bodyTag,
-  bodyTextVariant: props.bodyTextVariant,
-  subtitle: props.subtitle,
-  subtitleTag: props.subtitleTag,
-  subtitleTextVariant: props.subtitleTextVariant,
-  title: props.title,
-  titleTag: props.titleTag,
-}))
-
-const footerAttrs = computed(() => ({
-  bgVariant: props.footerBgVariant,
-  borderVariant: props.footerBorderVariant,
-  html: props.footerHtml,
-  tag: props.footerTag,
-  textVariant: props.footerTextVariant,
-}))
-
 const imgAttr = computed(() => ({
   src: props.imgSrc,
   alt: props.imgAlt,

packages/bootstrap-vue-next/src/components/BCard/BCardGroup.vue

@@ -34,5 +34,5 @@ const cardTypeClass = computed(() =>
   deckBoolean.value ? 'card-deck' : columnsBoolean.value ? 'card-columns' : 'card-group'
 )
 
-const computedClasses = computed(() => [cardTypeClass.value])
+const computedClasses = computed(() => cardTypeClass.value)
 </script>