feat(BCard): add img slot above or below header

test: for above bcard changes

Author: VividLemon

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

@@ -1,6 +1,8 @@
 <template>
   <component :is="tag" class="card" :class="classes">
-    <b-card-img v-if="imgSrc && !imgBottomBoolean" v-bind="imgAttr" />
+    <slot v-if="!imgBottomBoolean" name="img">
+      <b-card-img v-if="imgSrc" v-bind="imgAttr" />
+    </slot>
     <b-card-header
       v-if="header || $slots.header || headerHtml"
       v-bind="headerAttrs"
@@ -27,7 +29,9 @@
         {{ footer }}
       </slot>
     </b-card-footer>
-    <b-card-img v-if="imgSrc && imgBottomBoolean" v-bind="imgAttr" />
+    <slot v-if="imgBottomBoolean" name="img">
+      <b-card-img v-if="imgSrc" v-bind="imgAttr" />
+    </slot>
   </component>
 </template>
 

packages/bootstrap-vue-3/src/components/BCard/card.spec.ts

@@ -98,6 +98,37 @@ describe('card', () => {
     expect(wrapper.classes()).not.toContain('flex-row-reverse')
   })
 
+  it('renders img slot', () => {
+    const wrapper = mount(BCard, {
+      slots: {img: 'foobar'},
+    })
+    expect(wrapper.text()).toBe('foobar')
+  })
+
+  it('renders img in correct order when not prop imgBottom', () => {
+    const wrapper = mount(BCard, {
+      props: {header: 'header', bodyText: 'bodyText', footer: 'footer', imgBottom: false},
+      slots: {img: 'img'},
+    })
+    expect(wrapper.text()).toBe('imgheaderbodyTextfooter')
+  })
+
+  it('does not render b-card-img when slot img', () => {
+    const wrapper = mount(BCard, {
+      slots: {img: 'img'},
+    })
+    const $cardimg = wrapper.findComponent(BCardImg)
+    expect($cardimg.exists()).toBe(false)
+  })
+
+  it('renders img in correct order when prop imgBottom', () => {
+    const wrapper = mount(BCard, {
+      props: {header: 'header', bodyText: 'bodyText', footer: 'footer', imgBottom: true},
+      slots: {img: 'img'},
+    })
+    expect(wrapper.text()).toBe('headerbodyTextfooterimg')
+  })
+
   it('does not have child BCardImg by default', () => {
     const wrapper = mount(BCard)
     const $img = wrapper.findComponent(BCardImg)