Merge pull request #715 from VividLemon/master

fix(#714): v-bind={text} causes breaking items to not display text in nested BLink component

Author: VividLemon

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

@@ -3,16 +3,18 @@
     <component
       :is="computedTag"
       :aria-current="computedAriaCurrent"
-      v-bind="$props"
+      v-bind="computedTag !== 'span' ? pluckedLinkProps : undefined"
       @click="clicked"
     >
-      <slot />
+      <slot>
+        {{ text }}
+      </slot>
     </component>
   </li>
 </template>
 
 <script lang="ts">
-import {omit} from '../../utils'
+import {omit, pluckProps} from '../../utils'
 import {useBooleanish} from '../../composables'
 import {computed, defineComponent, PropType, toRef} from 'vue'
 import BLink, {BLINK_PROPS} from '../BLink/BLink.vue'
@@ -55,7 +57,13 @@ export default defineComponent({
       if (!disabledBoolean.value) emit('click', e)
     }
 
+    // TODO test and make sure that only the correct props are given to BLINK
+    // Since the BLink resolved to an <a>, passing "text" prop down caused
+    // <a> slot text to be overwritten by prop text!
+    const pluckedLinkProps = computed(() => pluckProps(props, linkProps))
+
     return {
+      pluckedLinkProps,
       liClasses,
       computedTag,
       computedAriaCurrent,

packages/bootstrap-vue-3/src/components/BBreadcrumb/breadcrum.spec.ts renamed to packages/bootstrap-vue-3/src/components/BBreadcrumb/breadcrumb.spec.ts

@@ -1,9 +1,9 @@
 <template>
-  <component :is="tag" class="placeholder" :class="classes" />
+  <component :is="tag" class="placeholder" :class="classes" :style="computedStyle" />
 </template>
 
 <script setup lang="ts">
-import {computed} from 'vue'
+import {computed, StyleValue} from 'vue'
 import {ColorVariant} from '../../types'
 
 interface Props {
@@ -19,28 +19,32 @@ const props = withDefaults(defineProps<Props>(), {
   tag: 'span',
 })
 
-/**
- * Converts numbers, strings, or strings in percent to a string
- * ex 100% => 100 for w-100
- */
-const filterer = (str: string | number | undefined): string | undefined =>
-  str === undefined
+const widthString = computed<string | undefined>(() =>
+  props.width === undefined
     ? undefined
-    : typeof str === 'string'
-    ? str.indexOf('%') === -1
-      ? str
-      : str.replaceAll('%', '')
-    : str.toString()
+    : typeof props.width === 'number'
+    ? props.width.toString()
+    : props.width.includes('%')
+    ? props.width.replaceAll('%', '')
+    : props.width
+)
 
-const colsString = computed<string | undefined>(() => filterer(props.cols))
-
-const widthString = computed<string | undefined>(() => filterer(props.width))
+const colsString = computed<string | undefined>(() =>
+  props.cols === undefined
+    ? undefined
+    : typeof props.cols === 'number'
+    ? props.cols.toString()
+    : props.cols
+)
 
 const classes = computed(() => ({
-  [`col-${colsString.value}`]: colsString.value !== undefined,
-  [`w-${widthString.value}`]: colsString.value === undefined && widthString.value !== undefined,
+  [`col-${colsString.value}`]: colsString.value !== undefined && widthString.value === undefined,
   [`bg-${props.variant}`]: props.variant !== undefined,
   [`placeholder-${props.size}`]: props.size !== undefined,
   [`placeholder-${props.animation}`]: props.animation !== undefined,
 }))
+
+const computedStyle = computed<StyleValue | undefined>(() =>
+  widthString.value === undefined ? undefined : `width: ${widthString.value}%;`
+)
 </script>

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

@@ -0,0 +1,30 @@
+import {enableAutoUnmount, mount} from '@vue/test-utils'
+import {afterEach, describe, expect, it} from 'vitest'
+import BPlaceholderWrapper from './BPlaceholderWrapper.vue'
+
+describe('placeholder-wrapper', () => {
+  enableAutoUnmount(afterEach)
+
+  it('renders slot default by default', () => {
+    const wrapper = mount(BPlaceholderWrapper, {
+      slots: {default: 'default', loading: 'loading'},
+    })
+    expect(wrapper.text()).toBe('default')
+  })
+
+  it('renders slot default when prop loading false', () => {
+    const wrapper = mount(BPlaceholderWrapper, {
+      props: {loading: false},
+      slots: {default: 'default', loading: 'loading'},
+    })
+    expect(wrapper.text()).toBe('default')
+  })
+
+  it('renders slot loading when prop loading true', () => {
+    const wrapper = mount(BPlaceholderWrapper, {
+      props: {loading: true},
+      slots: {default: 'default', loading: 'loading'},
+    })
+    expect(wrapper.text()).toBe('loading')
+  })
+})

packages/bootstrap-vue-3/src/components/BPlaceholder/placeholder-wrapper.spec.ts

@@ -38,34 +38,27 @@ describe('placeholder', () => {
     expect(wrapper.classes()).toContain('col-6')
   })
 
-  it('has class col-{type} when prop cols is string and contains %', () => {
-    const wrapper = mount(BPlaceholder, {
-      props: {cols: '%6%'},
-    })
-    expect(wrapper.classes()).toContain('col-6')
-  })
-
-  it('has class w-{type} when prop width is number', async () => {
+  it('has style width: {type}%; when prop width is number', async () => {
     const wrapper = mount(BPlaceholder, {
       props: {width: 6},
     })
-    expect(wrapper.classes()).toContain('w-6')
+    expect(wrapper.attributes('style')).toContain('width: 6%;')
     await wrapper.setProps({width: undefined})
-    expect(wrapper.classes()).not.toContain('w-6')
+    expect(wrapper.attributes('style')).toBeUndefined()
   })
 
-  it('has class w-{type} when prop width is string', () => {
+  it('has style width: {type}%; when prop width is string', () => {
     const wrapper = mount(BPlaceholder, {
       props: {width: '6'},
     })
-    expect(wrapper.classes()).toContain('w-6')
+    expect(wrapper.attributes('style')).toContain('width: 6%;')
   })
 
-  it('has class w-{type} when prop width is string and contains %', () => {
+  it('has style width: {type}%; when prop width is string and contains %', () => {
     const wrapper = mount(BPlaceholder, {
       props: {width: '%6%'},
     })
-    expect(wrapper.classes()).toContain('w-6')
+    expect(wrapper.attributes('style')).toContain('width: 6%;')
   })
 
   it('has class bg-{type} when prop variant', async () => {