test: placeholder-card.spec.ts

test: placeholder-table.spec.ts

refactor: use PlaceholderAnimation external type in Placeholder comps

refactor: use PlaceholderSize external type in Placeholder comps

feat(BPlaceholderTable): slot thead to overwrite default thead

feat(BPlaceholderTable): slot tfoot to overwrite default tfoot

feat(BPlaceholderTable): bplaceholder thead attrs are separated

feat(BPlaceholderTable): bplaceholder tfoot attrs are separated

fix(BPlaceholderCard): remove unnecessary inner div on body

refactor(BPlaceholderCard): use external PlaceholderAnimation type

refactor(BPlaceholderCard): use external PlaceholderSize type

refactor(BPlaceholder): use external PlaceholderAnimation type

refactor(BPlaceholder): use external PlaceholderSize type

Author: VividLemon

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

@@ -12,13 +12,11 @@
       </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">
@@ -32,23 +30,23 @@
 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

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

@@ -1,67 +1,96 @@
 <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'))