Merge pull request #728 from VividLemon/master

chore: update pnpm feat: BPlaceholder finalizations

Author: VividLemon

package.json

@@ -26,5 +26,5 @@
     "npm": ">=7.0.0",
     "node": ">=14.0.0"
   },
-  "packageManager": "pnpm@7.12.2"
+  "packageManager": "pnpm@7.13.0"
 }

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/BCardImg.vue

@@ -11,20 +11,20 @@ import {computed, toRef} from 'vue'
 
 interface BCardImgProps {
   alt?: string
+  blank?: Booleanish
+  blankColor?: string
   bottom?: Booleanish
-  end?: Booleanish
+  lazy?: Booleanish
   height?: number | string
   left?: Booleanish
+  start?: Booleanish
   right?: Booleanish
+  end?: Booleanish
+  sizes?: string | Array<string>
   src?: string
-  lazy?: Booleanish
-  start?: Booleanish
+  srcset?: string | Array<string>
   top?: Booleanish
   width?: number | string
-  blank?: Booleanish
-  blankColor?: string
-  sizes?: string | Array<string>
-  srcset?: string | Array<string>
 }
 
 const props = withDefaults(defineProps<BCardImgProps>(), {

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)

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

@@ -4,15 +4,15 @@
 
 <script setup lang="ts">
 import {computed, StyleValue} from 'vue'
-import {ColorVariant} from '../../types'
+import {ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
 
 interface Props {
   tag?: string
   width?: string | number
   cols?: string | number
   variant?: ColorVariant
-  size?: 'xs' | 'sm' | 'lg'
-  animation?: 'glow' | 'wave'
+  size?: PlaceholderSize
+  animation?: PlaceholderAnimation
 }
 
 const props = withDefaults(defineProps<Props>(), {

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

@@ -1,20 +1,22 @@
 <template>
-  <b-card>
-    <!-- TODO add possible blank Img? -->
-    <!-- Problem is BCard doesn't have an option for blank imgs -->
+  <b-card :img-bottom="imgBottomBoolean">
+    <template v-if="!noImgBoolean" #img>
+      <slot name="img">
+        <b-card-img v-bind="imgAttrs" />
+      </slot>
+    </template>
+
     <template v-if="!noHeaderBoolean" #header>
       <slot name="header">
         <b-placeholder v-bind="headerAttrs" />
       </slot>
     </template>
     <slot>
-      <div>
-        <b-placeholder cols="7" />
-        <b-placeholder cols="4" />
-        <b-placeholder cols="4" />
-        <b-placeholder cols="6" />
-        <b-placeholder cols="8" />
-      </div>
+      <b-placeholder cols="7" />
+      <b-placeholder cols="4" />
+      <b-placeholder cols="4" />
+      <b-placeholder cols="6" />
+      <b-placeholder cols="8" />
     </slot>
     <template v-if="!noFooterBoolean" #footer>
       <slot name="footer">
@@ -26,28 +28,32 @@
 
 <script setup lang="ts">
 import BCard from '../BCard/BCard.vue'
+import BCardImg from '../BCard/BCardImg.vue'
 import BPlaceholder from './BPlaceholder.vue'
-import {Booleanish, ColorVariant} from '../../types'
+import {Booleanish, ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
 import {computed, toRef} from 'vue'
 import {useBooleanish} from '../../composables'
 
 interface Props {
   noHeader?: Booleanish
   headerWidth?: string | number
   headerVariant?: ColorVariant
-  headerAnimation?: 'glow' | 'wave'
-  headerSize?: 'xs' | 'sm' | 'lg'
-
+  headerAnimation?: PlaceholderAnimation
+  headerSize?: PlaceholderSize
   noFooter?: Booleanish
   footerWidth?: string | number
   footerVariant?: ColorVariant
-  footerAnimation?: 'glow' | 'wave'
-  footerSize?: 'xs' | 'sm' | 'lg'
-
-  animation?: 'glow' | 'wave'
-  size?: 'xs' | 'sm' | 'lg'
+  footerAnimation?: PlaceholderAnimation
+  footerSize?: PlaceholderSize
+  animation?: PlaceholderAnimation
+  size?: PlaceholderSize
   variant?: ColorVariant
   noButton?: Booleanish
+  imgBottom?: Booleanish
+  imgSrc?: string
+  imgBlankColor?: string
+  imgHeight?: string | number
+  noImg?: Booleanish
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -56,11 +62,17 @@ const props = withDefaults(defineProps<Props>(), {
   footerWidth: 100,
   noHeader: false,
   noFooter: false,
+  imgBlankColor: '#868e96',
+  imgHeight: 100,
+  imgBottom: false,
+  noImg: false,
 })
 
 const noButtonBoolean = useBooleanish(toRef(props, 'noButton'))
 const noHeaderBoolean = useBooleanish(toRef(props, 'noHeader'))
 const noFooterBoolean = useBooleanish(toRef(props, 'noFooter'))
+const noImgBoolean = useBooleanish(toRef(props, 'noImg'))
+const imgBottomBoolean = useBooleanish(toRef(props, 'imgBottom'))
 
 const headerAttrs = computed(() => ({
   width: props.headerWidth,
@@ -83,4 +95,13 @@ const footerAttrs = computed(() => ({
   size: props.footerSize,
   variant: props.footerVariant,
 }))
+
+const imgAttrs = computed(() => ({
+  blank: !props.imgSrc ? true : false,
+  blankColor: props.imgBlankColor,
+  height: !props.imgSrc ? props.imgHeight : undefined,
+  src: props.imgSrc,
+  top: !imgBottomBoolean.value,
+  bottom: imgBottomBoolean.value,
+}))
 </script>

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

@@ -1,67 +1,93 @@
 <template>
-  <b-table-simple v-bind="tableProps">
-    <thead v-if="!hideHeaderBoolean">
-      <tr>
-        <th v-for="(_, i) in headerColumns ?? columns" :key="i">
-          <b-placeholder v-bind="placeholderAttrs" :width="headerWidth" />
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(_, j) in rows" :key="j">
-        <td v-for="(__, k) in columns" :key="k">
-          <b-placeholder v-bind="placeholderAttrs" :width="cellWidth" />
-        </td>
-      </tr>
-    </tbody>
-    <tfoot v-if="showFooterBoolean">
-      <tr>
-        <th v-for="(_, l) in footerColumns ?? columns" :key="l">
-          <b-placeholder v-bind="placeholderAttrs" :width="footerWidth" />
-        </th>
-      </tr>
-    </tfoot>
+  <b-table-simple>
+    <slot name="thead">
+      <thead v-if="!hideHeaderBoolean">
+        <tr>
+          <th v-for="(_, i) in headerColumns ?? columns" :key="i">
+            <b-placeholder v-bind="headerAttrs" />
+          </th>
+        </tr>
+      </thead>
+    </slot>
+    <slot>
+      <tbody>
+        <tr v-for="(_, j) in rows" :key="j">
+          <td v-for="(__, k) in columns" :key="k">
+            <b-placeholder v-bind="placeholderAttrs" />
+          </td>
+        </tr>
+      </tbody>
+    </slot>
+    <slot name="tfoot">
+      <tfoot v-if="showFooterBoolean">
+        <tr>
+          <th v-for="(_, l) in footerColumns ?? columns" :key="l">
+            <b-placeholder v-bind="footerAttrs" />
+          </th>
+        </tr>
+      </tfoot>
+    </slot>
   </b-table-simple>
 </template>
 
 <script setup lang="ts">
 // import type {BSkeletonTableProps} from '../../types/components'
 import {computed, toRef} from 'vue'
-import type {Booleanish, ColorVariant} from '../../types'
+import type {Booleanish, ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
 import {useBooleanish} from '../../composables'
 import BTableSimple from '../BTable/BTableSimple.vue'
 import BPlaceholder from './BPlaceholder.vue'
 
 interface BSkeletonTableProps {
-  animation?: 'wave' | 'glow'
-  columns?: number
-  hideHeader?: Booleanish
   rows?: number
-  showFooter?: Booleanish
-  variant?: ColorVariant
-  size?: 'xs' | 'sm' | 'lg'
-  tableProps?: Record<string, unknown>
-  footerWidth?: string | number
-  headerWidth?: string | number
+  columns?: number
   cellWidth?: string | number
+  size?: PlaceholderSize
+  animation?: PlaceholderAnimation
+  variant?: ColorVariant
   headerColumns?: number
+  hideHeader?: Booleanish
+  headerCellWidth?: string | number
+  headerSize?: PlaceholderSize
+  headerAnimation?: PlaceholderAnimation
+  headerVariant?: ColorVariant
   footerColumns?: number
+  showFooter?: Booleanish
+  footerCellWidth?: string | number
+  footerSize?: PlaceholderSize
+  footerAnimation?: PlaceholderAnimation
+  footerVariant?: ColorVariant
 }
 
 const props = withDefaults(defineProps<BSkeletonTableProps>(), {
   columns: 5,
-  hideHeader: false,
   rows: 3,
-  showFooter: false,
   cellWidth: 100,
-  footerWidth: 100,
-  headerWidth: 100,
+  showFooter: false,
+  footerCellWidth: 100,
+  hideHeader: false,
+  headerCellWidth: 100,
 })
 
 const placeholderAttrs = computed(() => ({
   size: props.size,
   variant: props.variant,
   animation: props.animation,
+  width: props.cellWidth,
+}))
+
+const headerAttrs = computed(() => ({
+  size: props.headerSize,
+  variant: props.headerVariant,
+  animation: props.headerAnimation,
+  width: props.headerCellWidth,
+}))
+
+const footerAttrs = computed(() => ({
+  size: props.footerSize,
+  variant: props.footerVariant,
+  animation: props.footerAnimation,
+  width: props.footerCellWidth,
 }))
 
 const hideHeaderBoolean = useBooleanish(toRef(props, 'hideHeader'))