feat!: standardize props in multiple comps

BREAKING-CHANGE: many of the components in the BCard space have props that prepend their name, for example, footerBgVariant, footerBorderVariant, footerHtml, etc. These have been replaced with each corresponding prop, without it's appended name to follow simplicity and single responsiblity.

feat(BCardFooter)!: footerClass prop was removed instead use :class

feat(BCardBody)!: bodyClass was removed instead use :class

feat(BCardHeader)!: headerClass removed instead use :class

feat: BCardImg includes lazy

feat(BCardSubTitle)!: prop subtitle replaced with text

feat(BCardSubTitle)!: prop subTitleTag replaced with tag

feat(BCardSubTitle)!: prop subTitleTextVariant replace with textVariant

feat(BCardBody): can also use prop text instead of default slot

feat(BCardFooter)!: prop footer replaced with prop text

feat(BCardFooter)!:prop footerBgVariant replaced with bgVariant

feat(BCardFooter)!: prop footerBorderVariant replaced with borderVariant

feat(BCardFooter)!: footerHtml replaced with html

feat(BCardFooter)!: footerTag removed use tag

feat(BCardFooter)!: footerTextVariant removed use textVariant

refactor(BCardGroup): move cardType logic out of class object

refactor(BCardGroup): classes is now object

feat(BCardText): expand to include dynamic tag

feat(BCardText): expand to include prop text

feat(BCardTitle)!: prop title replaced with prop text

feat(BCardTitle)!: prop titleTag replaced with prop tag

test: card-body.spec.ts

test: card-footer.spec.ts

test: card-footer.spec.ts

test: card-group.spec.ts

test: card-header.spec.ts

test: card-img.spec.ts

test: card-sub-title.spec.ts

test: card-text.spec.ts

test: card-title.spec.ts

test: card.spec.ts -- not done

test: form-select-option converted to spec.ts

Author: VividLemon

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

@@ -1,5 +1,6 @@
 <template>
   <component :is="tag" class="card" :class="classes">
+    <!-- replace with BCardImg -->
     <img v-if="imgSrc && !imgBottomBoolean" v-bind="imgAttr" :class="imgClasses" />
     <component
       :is="headerTag"
@@ -57,22 +58,22 @@ interface BCardProps {
   bodyBgVariant?: ColorVariant
   bodyClass?: Array<string> | Record<string, boolean | undefined | null> | string
   bodyTag?: string
-  bodyTextVariant?: ColorVariant
+  bodyTextVariant?: TextColorVariant
   borderVariant?: ColorVariant
   footer?: string
   footerBgVariant?: ColorVariant
   footerBorderVariant?: ColorVariant
   footerClass?: Array<string> | Record<string, boolean | undefined | null> | string
   footerHtml?: string
   footerTag?: string
-  footerTextVariant?: ColorVariant
+  footerTextVariant?: TextColorVariant
   header?: string
   headerBgVariant?: ColorVariant
   headerBorderVariant?: ColorVariant
   headerClass?: Array<string> | Record<string, boolean | undefined | null> | string
   headerHtml?: string
   headerTag?: string
-  headerTextVariant?: ColorVariant
+  headerTextVariant?: TextColorVariant
   imgAlt?: string
   imgBottom?: Booleanish
   imgEnd?: Booleanish
@@ -168,8 +169,14 @@ const imgClasses = computed(() => ({
 const imgAttr = computed(() => ({
   src: props.imgSrc,
   alt: props.imgAlt,
-  height: props.imgHeight,
-  width: props.imgWidth,
+  height:
+    (typeof props.imgHeight === 'number'
+      ? props.imgHeight
+      : parseInt(props.imgHeight as string, 10)) || undefined,
+  width:
+    (typeof props.imgWidth === 'number'
+      ? props.imgWidth
+      : parseInt(props.imgWidth as string, 10)) || undefined,
 }))
 
 const subTitleClasses = computed(() => ({

packages/bootstrap-vue-3/src/components/BCard/BCardBody.vue

@@ -1,13 +1,24 @@
 <template>
   <component :is="bodyTag" class="card-body" :class="classes">
-    <b-card-title v-if="title" :title-tag="titleTag" :title="title" />
+    <b-card-title v-if="!!title || $slots.title" :tag="titleTag">
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </b-card-title>
+
     <b-card-sub-title
-      v-if="subTitle"
-      :sub-title-tag="subTitleTag"
-      :sub-title="subTitle"
-      :sub-title-text-variant="subTitleTextVariant"
-    />
-    <slot />
+      v-if="!!subTitle || !!$slots.subTitle"
+      :tag="subTitleTag"
+      :text-variant="subTitleTextVariant"
+    >
+      <slot name="subTitle">
+        {{ subTitle }}
+      </slot>
+    </b-card-sub-title>
+
+    <slot>
+      {{ text }}
+    </slot>
   </component>
 </template>
 
@@ -21,7 +32,6 @@ import {useBooleanish} from '../../composables'
 
 interface BCardBodyProps {
   bodyBgVariant?: ColorVariant
-  bodyClass?: Array<string> | Record<string, boolean | undefined | null> | string
   bodyTag?: string
   bodyTextVariant?: TextColorVariant
   overlay?: Booleanish
@@ -30,6 +40,7 @@ interface BCardBodyProps {
   subTitleTextVariant?: TextColorVariant
   title?: string
   titleTag?: string
+  text?: string
 }
 
 const props = withDefaults(defineProps<BCardBodyProps>(), {

packages/bootstrap-vue-3/src/components/BCard/BCardFooter.vue

@@ -1,35 +1,34 @@
 <template>
-  <component :is="footerTag" class="card-footer" :class="[footerClass, classes]">
+  <component :is="tag" class="card-footer" :class="classes">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-if="!!footerHtml" v-html="footerHtml" />
+    <div v-if="!!html" v-html="html" />
     <slot v-else>
-      {{ footer }}
+      {{ text }}
     </slot>
   </component>
 </template>
 
 <script setup lang="ts">
-// import type {BCardFooterProps} from '../../types/components'
-import type {ColorVariant, TextColorVariant} from '../../types'
+// import type {BCardHeaderProps} from '../../types/components'
 import {computed} from 'vue'
+import type {ColorVariant, TextColorVariant} from '../../types'
 
-interface BCardFooterProps {
-  footer?: string
-  footerBgVariant?: ColorVariant
-  footerBorderVariant?: ColorVariant
-  footerClass?: Array<string> | Record<string, boolean | undefined | null> | string
-  footerHtml?: string
-  footerTag?: string
-  footerTextVariant?: TextColorVariant
+interface BCardHeaderProps {
+  text?: string
+  bgVariant?: ColorVariant
+  borderVariant?: ColorVariant
+  html?: string
+  tag?: string
+  textVariant?: TextColorVariant
 }
 
-const props = withDefaults(defineProps<BCardFooterProps>(), {
-  footerTag: 'div',
+const props = withDefaults(defineProps<BCardHeaderProps>(), {
+  tag: 'div',
 })
 
 const classes = computed(() => ({
-  [`text-${props.footerTextVariant}`]: props.footerTextVariant !== undefined,
-  [`bg-${props.footerBgVariant}`]: props.footerBgVariant !== undefined,
-  [`border-${props.footerBorderVariant}`]: props.footerBorderVariant !== undefined,
+  [`text-${props.textVariant}`]: props.textVariant !== undefined,
+  [`bg-${props.bgVariant}`]: props.bgVariant !== undefined,
+  [`border-${props.borderVariant}`]: props.borderVariant !== undefined,
 }))
 </script>

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

@@ -25,7 +25,11 @@ const props = withDefaults(defineProps<BCardGroupProps>(), {
 const columnsBoolean = useBooleanish(toRef(props, 'columns'))
 const deckBoolean = useBooleanish(toRef(props, 'deck'))
 
-const classes = computed(() =>
+const cardTypeClass = computed(() =>
   deckBoolean.value ? 'card-deck' : columnsBoolean.value ? 'card-columns' : 'card-group'
 )
+
+const classes = computed(() => ({
+  [cardTypeClass.value]: !!cardTypeClass.value,
+}))
 </script>

packages/bootstrap-vue-3/src/components/BCard/BCardHeader.vue

@@ -1,35 +1,34 @@
 <template>
-  <component :is="headerTag" class="card-header" :class="[headerClass, classes]">
+  <component :is="tag" class="card-header" :class="classes">
     <!-- eslint-disable-next-line vue/no-v-html -->
-    <div v-if="!!headerHtml" v-html="headerHtml" />
+    <div v-if="!!html" v-html="html" />
     <slot v-else>
-      {{ header }}
+      {{ text }}
     </slot>
   </component>
 </template>
 
 <script setup lang="ts">
 // import type {BCardHeaderProps} from '../../types/components'
 import {computed} from 'vue'
-import type {ColorVariant} from '../../types'
+import type {ColorVariant, TextColorVariant} from '../../types'
 
 interface BCardHeaderProps {
-  header?: string
-  headerBgVariant?: ColorVariant
-  headerBorderVariant?: ColorVariant
-  headerClass?: Array<string> | Record<string, boolean | undefined | null> | string
-  headerHtml?: string
-  headerTag?: string
-  headerTextVariant?: ColorVariant
+  text?: string
+  bgVariant?: ColorVariant
+  borderVariant?: ColorVariant
+  html?: string
+  tag?: string
+  textVariant?: TextColorVariant
 }
 
 const props = withDefaults(defineProps<BCardHeaderProps>(), {
-  headerTag: 'div',
+  tag: 'div',
 })
 
 const classes = computed(() => ({
-  [`text-${props.headerTextVariant}`]: props.headerTextVariant !== undefined,
-  [`bg-${props.headerBgVariant}`]: props.headerBgVariant !== undefined,
-  [`border-${props.headerBorderVariant}`]: props.headerBorderVariant !== undefined,
+  [`text-${props.textVariant}`]: props.textVariant !== undefined,
+  [`bg-${props.bgVariant}`]: props.bgVariant !== undefined,
+  [`border-${props.borderVariant}`]: props.borderVariant !== undefined,
 }))
 </script>

packages/bootstrap-vue-3/src/components/BCard/BCardImg.vue

@@ -16,6 +16,7 @@ interface BCardImgProps {
   left?: Booleanish
   right?: Booleanish
   src?: string
+  lazy?: Booleanish
   start?: Booleanish
   top?: Booleanish
   width?: number | string
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<BCardImgProps>(), {
   left: false,
   right: false,
   alt: undefined,
+  lazy: false,
   start: false,
   top: false,
 })
@@ -37,8 +39,10 @@ const leftBoolean = useBooleanish(toRef(props, 'left'))
 const rightBoolean = useBooleanish(toRef(props, 'right'))
 const startBoolean = useBooleanish(toRef(props, 'start'))
 const topBoolean = useBooleanish(toRef(props, 'top'))
+const lazyBoolean = useBooleanish(toRef(props, 'lazy'))
 
 const attrs = computed(() => ({
+  loading: lazyBoolean.value ? 'lazy' : 'eager',
   src: props.src,
   alt: props.alt,
   width:
@@ -49,24 +53,24 @@ const attrs = computed(() => ({
     undefined,
 }))
 
-const classes = computed(() => {
-  const align = leftBoolean.value ? 'float-left' : rightBoolean.value ? 'float-right' : ''
+const alignment = computed(() =>
+  leftBoolean.value ? 'float-left' : rightBoolean.value ? 'float-right' : ''
+)
 
-  let baseClass = 'card-img'
+const baseClass = computed(() =>
+  topBoolean.value
+    ? 'card-img-top'
+    : rightBoolean.value || endBoolean.value
+    ? 'card-img-right'
+    : bottomBoolean.value
+    ? 'card-img-bottom'
+    : leftBoolean.value || startBoolean.value
+    ? 'card-img-left'
+    : 'card-img'
+)
 
-  if (topBoolean.value) {
-    baseClass += '-top'
-  } else if (rightBoolean.value || endBoolean.value) {
-    baseClass += '-right'
-  } else if (bottomBoolean.value) {
-    baseClass += '-bottom'
-  } else if (leftBoolean.value || startBoolean.value) {
-    baseClass += '-left'
-  }
-
-  return {
-    [align]: !!align,
-    [baseClass]: true,
-  }
-})
+const classes = computed(() => ({
+  [alignment.value]: !!alignment.value,
+  [baseClass.value]: !!baseClass.value,
+}))
 </script>

packages/bootstrap-vue-3/src/components/BCard/BCardSubTitle.vue

@@ -1,7 +1,7 @@
 <template>
-  <component :is="subTitleTag" class="card-subtitle mb-2" :class="classes">
+  <component :is="tag" class="card-subtitle mb-2" :class="classes">
     <slot>
-      {{ subTitle }}
+      {{ text }}
     </slot>
   </component>
 </template>
@@ -12,17 +12,17 @@ import type {TextColorVariant} from '../../types'
 import {computed} from 'vue'
 
 interface BCardSubtitleProps {
-  subTitle?: string
-  subTitleTag?: string
-  subTitleTextVariant?: TextColorVariant
+  text?: string
+  tag?: string
+  textVariant?: TextColorVariant
 }
 
 const props = withDefaults(defineProps<BCardSubtitleProps>(), {
-  subTitleTag: 'h6',
-  subTitleTextVariant: 'muted',
+  tag: 'h6',
+  textVariant: 'muted',
 })
 
 const classes = computed(() => ({
-  [`text-${props.subTitleTextVariant}`]: !!props.subTitleTextVariant,
+  [`text-${props.textVariant}`]: !!props.textVariant,
 }))
 </script>

packages/bootstrap-vue-3/src/components/BCard/BCardText.vue

@@ -1,5 +1,18 @@
 <template>
-  <p class="card-text">
-    <slot />
-  </p>
+  <component :is="tag" class="card-text">
+    <slot>
+      {{ text }}
+    </slot>
+  </component>
 </template>
+
+<script setup lang="ts">
+interface BCardTextProps {
+  text?: string
+  tag?: string
+}
+
+withDefaults(defineProps<BCardTextProps>(), {
+  tag: 'p',
+})
+</script>

packages/bootstrap-vue-3/src/components/BCard/BCardTitle.vue

@@ -1,7 +1,7 @@
 <template>
-  <component :is="titleTag" class="card-title">
+  <component :is="tag" class="card-title">
     <slot>
-      {{ title }}
+      {{ text }}
     </slot>
   </component>
 </template>
@@ -10,11 +10,11 @@
 // import type {BCardTitleProps} from '../../types/components'
 
 interface BCardTitleProps {
-  title?: string
-  titleTag?: string
+  text?: string
+  tag?: string
 }
 
 withDefaults(defineProps<BCardTitleProps>(), {
-  titleTag: 'h4',
+  tag: 'h4',
 })
 </script>