fix: some v-fors in docs missing :key attr

fix(BContainer)!: remove toast props as they didn't work

Author: Issayah

apps/docs/docs/.vuepress/components/DocReference.vue

@@ -25,7 +25,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="prop in component.props">
+          <tr v-for="(prop, index) in component.props" :key="index">
             <td class="text-nowrap">
               <code>{{ prop.prop }}</code>
             </td>
@@ -60,7 +60,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="event in component.events">
+          <tr v-for="(event, index) in component.events" :key="index">
             <td class="text-nowrap">
               <code>{{ event.event }}</code>
             </td>
@@ -83,7 +83,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr v-for="slot in component.slots">
+          <tr v-for="(slot, index) in component.slots" :key="index">
             <td class="text-nowrap">
               <code>{{ slot.name }}</code>
             </td>

apps/docs/docs/components/README.md

@@ -4,7 +4,7 @@ BootstrapVue 3 components
 
 <ClientOnly>
     <b-list-group>
-        <b-list-group-item v-for="(component, key)  in componentList">
+        <b-list-group-item v-for="(component, key)  in componentList" :key="key">
             <RouterLink :to="`./${key}.html`">{{component.name}}</RouterLink>
             <b-badge v-if="component.status=='todo'" variant="warning" pill>TODO</b-badge>
             <b-badge v-else-if="component.status=='wip'" variant="warning" pill>WIP</b-badge>

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

@@ -12,16 +12,16 @@
 
 <script setup lang="ts">
 import {computed, ref} from 'vue'
-import type {Position} from '../types'
+// import type {Position} from '../types'
 // import BToaster from './BToast/BToaster.vue'
 // import {ToastInstance} from './BToast/plugin'
 
 interface Props {
   gutterX?: string
   gutterY?: string
   fluid?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' // boolean | Breakpoint
-  toast?: Record<string, unknown> // Make this strongly typed
-  position?: Position
+  // toast?: Record<string, unknown> // Make this strongly typed
+  // position?: Position
   tag?: string
 }
 
@@ -32,16 +32,13 @@ const props = withDefaults(defineProps<Props>(), {
 
 const container = ref()
 
-const computedClasses = computed(() => [
-  props.position,
-  {
-    container: props.fluid === false,
-    [`container-fluid`]: props.fluid === true,
-    [`container-${props.fluid}`]: typeof props.fluid === 'string',
-    [`gx-${props.gutterX}`]: props.gutterX !== undefined,
-    [`gy-${props.gutterY}`]: props.gutterY !== undefined,
-  },
-])
+const computedClasses = computed(() => ({
+  container: props.fluid === false,
+  [`container-fluid`]: props.fluid === true,
+  [`container-${props.fluid}`]: typeof props.fluid === 'string',
+  [`gx-${props.gutterX}`]: props.gutterX !== undefined,
+  [`gy-${props.gutterY}`]: props.gutterY !== undefined,
+}))
 
 /* TODO finish this system
 const toasts = computed(() => toastInstance?.containerPositions.value)

packages/bootstrap-vue-3/src/components/BSkeleton/BSkeletonTable.vue

@@ -2,21 +2,21 @@
   <b-table-simple v-bind="tableProps">
     <thead v-if="!hideHeaderBoolean">
       <tr>
-        <th v-for="(th, i) in columns" :key="i">
+        <th v-for="(_th, i) in columns" :key="i">
           <b-skeleton />
         </th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="(tr, j) in rows" :key="j">
-        <td v-for="(td, k) in columns" :key="k">
+      <tr v-for="(_tr, j) in rows" :key="j">
+        <td v-for="(_td, k) in columns" :key="k">
           <b-skeleton width="75%" />
         </td>
       </tr>
     </tbody>
     <tfoot v-if="showFooterBoolean">
       <tr>
-        <th v-for="(th, l) in columns" :key="l">
+        <th v-for="(_th, l) in columns" :key="l">
           <b-skeleton />
         </th>
       </tr>

packages/bootstrap-vue-3/src/components/container.spec.ts

@@ -68,13 +68,4 @@ describe('container', () => {
     await wrapper.setProps({gutterY: undefined})
     expect(wrapper.classes()).not.toContain('gy-xxl')
   })
-
-  it('has class from prop position', async () => {
-    const wrapper = mount(BContainer, {
-      props: {position: 'position-sticky'},
-    })
-    expect(wrapper.classes()).toContain('position-sticky')
-    await wrapper.setProps({position: undefined})
-    expect(wrapper.classes()).not.toContain('position-sticky')
-  })
 })