Merge pull request #751 from VividLemon/main

Various fixes and improvements

Author: VividLemon

apps/docs/docs/.vuepress/PluginComponentReference/client/components/component-doc.vue

@@ -143,7 +143,7 @@
   </div>
 </template>
 <script lang="ts">
-import {resolveComponent, defineComponent, computed, ComputedRef, ConcreteComponent, ref, Ref} from 'vue'
+import {resolveComponent, defineComponent, computed, ConcreteComponent, ref, Ref} from 'vue'
 import AnchoredHeading from './anchored-heading'
 import {hyphenate} from '../../../utils'
 // type definitions
@@ -191,15 +191,15 @@ export default defineComponent({
       props.component as string
     ) as ConcreteComponent
 
-    const componentPropsMetaObj: ComputedRef<any> = computed(() => {
+    const componentPropsMetaObj = computed(() => {
       return props.propsMeta.reduce((obj, propMeta) => {
         if (propMeta.prop) {
           obj[propMeta.prop] = propMeta
         }
         return obj
       }, {})
     })
-    const githubURL: ComputedRef<string> = computed(() => {
+    const githubURL = computed(() => {
       const name = component.name ?? component.__name ?? ''
       if (name.indexOf('{') !== -1) {
         // Example component (most likely an auto generated component)
@@ -213,14 +213,14 @@ export default defineComponent({
 
     // component name kebab
 
-    const componentName: ComputedRef<string> = computed(() => {
+    const componentName = computed(() => {
       return hyphenate(component.name ?? component.__name ?? '')
     })
-    const tag: ComputedRef<string> = computed(() => {
+    const tag = computed(() => {
       return `<${componentName.value}>`
     })
 
-    const propsItems: ComputedRef<any> = computed(() => {
+    const propsItems = computed(() => {
       const props: any = component.props
       const propsMetaObj = componentPropsMetaObj
       return Object.keys(props)
@@ -280,7 +280,7 @@ export default defineComponent({
         })
     })
 
-    const propFields: ComputedRef<any> = computed(() => {
+    const propFields = computed(() => {
       const sortable = propsItems.value.length >= SORT_THRESHOLD
 
       // TODO define Type for propItems
@@ -296,7 +296,7 @@ export default defineComponent({
       ]
     })
 
-    const emitsFields: ComputedRef<any> = computed(() => {
+    const emitsFields = computed(() => {
       const sortable = component.emits?.length >= SORT_THRESHOLD
       return [
         {key: 'emit', label: 'Emit', sortable},
@@ -305,7 +305,7 @@ export default defineComponent({
       ]
     })
 
-    const slotsFields: ComputedRef<any> = computed(() => {
+    const slotsFields = computed(() => {
       const sortable = props.slots.length >= SORT_THRESHOLD
       const hasScopedSlots = props.slots.some(s => s.scope)
       return [
@@ -315,18 +315,18 @@ export default defineComponent({
       ]
     })
 
-    const slotsItems: Ref<any[]> = ref(
+    const slotsItems = ref(
        props.slots ? props.slots.map(slot => ({ ...slot as any})) : []
     )
 
 
-    const vmodelItems: ComputedRef<any> = computed(() => {
+    const vmodelItems = computed(() => {
       //TODO loop through props and emits to determine v-model
       // let match = VMODEL_REGEX.exec(myString);
       return []
     })
 
-    const vmodelFields: ComputedRef<any> = computed(() => {
+    const vmodelFields = computed(() => {
       //TODO loop
       return []
     })

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

@@ -4,7 +4,7 @@
     reference
   </h2>
 
-  <template v-for="component in reference.meta.components">
+  <template v-for="(component, index) in reference.meta.components" :key="index">
     <h3 :id="component.component" tabindex="-1">
       <a class="header-anchor" :href="`#${component.component}`" aria-hidden="true">#</a>
       <code>&lt;{{ component.component }}&gt;</code>
@@ -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>

apps/playground/package.json

@@ -16,8 +16,9 @@
     "vue-router": "4.1.3"
   },
   "devDependencies": {
-    "tsconfig": "workspace:*",
     "@vitejs/plugin-vue": "^3.0.0",
+    "rollup-plugin-visualizer": "^5.7.1",
+    "tsconfig": "workspace:*",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
     "vue-tsc": "^0.38.4"

apps/playground/src/components/Comps/TPagination.vue

@@ -125,7 +125,7 @@ const paginationPageNumber = ref(19)
 const paginationLimit = ref(8)
 const paginationPerPage = ref(2)
 const paginationRows = ref(40)
-const paginationDangerClasses = ref(['border-danger', 'border-5', 'border'])
+const paginationDangerClasses = ['border-danger', 'border-5', 'border']
 
 const handlePaginationPageClick = (event: BvEvent, page: number) => {
   if (page === 7) {

packages/bootstrap-vue-3/package.json

@@ -48,6 +48,7 @@
     "@vue/test-utils": "^2.0.2",
     "bootstrap": "^5.2.0",
     "c8": "^7.12.0",
+    "happy-dom": "^7.5.12",
     "jsdom": "^20.0.0",
     "rollup": "^2.78.1",
     "rollup-plugin-visualizer": "^5.7.1",

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

@@ -1,5 +1,5 @@
 <template>
-  <div :id="computedId" class="accordion" :class="classes">
+  <div :id="computedId" class="accordion" :class="computedClasses">
     <slot />
   </div>
 </template>
@@ -27,12 +27,12 @@ const computedId = useId(toRef(props, 'id'), 'accordion')
 const flushBoolean = useBooleanish(toRef(props, 'flush'))
 const freeBoolean = useBooleanish(toRef(props, 'free'))
 
-const classes = computed(() => ({
+const computedClasses = computed(() => ({
   'accordion-flush': flushBoolean.value,
 }))
 
 if (!freeBoolean.value) {
-  provide(injectionKey, computedId.value.toString())
+  provide(injectionKey, computedId.value)
 }
 </script>
 

packages/bootstrap-vue-3/src/components/BAccordion/BAccordionItem.vue

@@ -17,7 +17,7 @@
     <b-collapse
       :id="computedId"
       class="accordion-collapse"
-      :visible="visibleBoolean"
+      :visible="visible"
       :accordion="parent"
       :aria-labelledby="`heading${computedId}`"
     >
@@ -45,8 +45,9 @@ interface BAccordionItemProps {
 
 const props = withDefaults(defineProps<BAccordionItemProps>(), {visible: false})
 
-const visibleBoolean = useBooleanish(toRef(props, 'visible'))
+const parent = inject<string>(injectionKey, '')
 
 const computedId = useId(toRef(props, 'id'), 'accordion_item')
-const parent = inject(injectionKey, '')
+
+const visibleBoolean = useBooleanish(toRef(props, 'visible'))
 </script>

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

@@ -1,8 +1,8 @@
 <template>
-  <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="classes">
+  <div v-if="isAlertVisible" ref="element" class="alert" role="alert" :class="computedClasses">
     <slot />
     <template v-if="dismissibleBoolean">
-      <button v-if="$slots.close" type="button" data-bs-dismiss="alert" @click="closeClicked">
+      <button v-if="hasCloseSlot" type="button" data-bs-dismiss="alert" @click="closeClicked">
         <slot name="close" />
       </button>
       <b-close-button
@@ -18,9 +18,9 @@
 <script setup lang="ts">
 // import type {BAlertEmits, BAlertProps} from '../types/components'
 import type {Booleanish, ColorVariant} from '../types'
-import {computed, onBeforeUnmount, ref, toRef, watch} from 'vue'
+import {computed, onBeforeUnmount, ref, toRef, useSlots, watch} from 'vue'
 import {Alert} from 'bootstrap'
-import {toInteger} from '../utils'
+import {isEmptySlot, toInteger} from '../utils'
 import {useBooleanish} from '../composables'
 import BCloseButton from './BButton/BCloseButton.vue'
 
@@ -56,19 +56,28 @@ interface BAlertEmits {
 
 const emit = defineEmits<BAlertEmits>()
 
+const slots = useSlots()
+
+let _countDownTimeout: undefined | ReturnType<typeof setTimeout>
+
 const element = ref<HTMLElement | null>(null)
 const instance = ref<Alert>()
-const classes = computed(() => ({
-  [`alert-${props.variant}`]: !!props.variant,
-  'show': !!props.modelValue,
-  'alert-dismissible': dismissibleBoolean.value,
-  // TODO it seems like fade is probably used here
-  // It seems like the issue with trying to set fade is that when using transitions,
-  // The element is null when it's trying to set the transition
-  'fade': !!props.modelValue,
-}))
 
-let _countDownTimeout: undefined | ReturnType<typeof setTimeout>
+const hasCloseSlot = computed<boolean>(() => !isEmptySlot(slots.close))
+
+const isAlertVisible = computed<boolean>(() => !!props.modelValue || showBoolean.value)
+
+const computedClasses = computed(() => [
+  [`alert-${props.variant}`],
+  {
+    'show': !!props.modelValue,
+    'alert-dismissible': dismissibleBoolean.value,
+    // TODO it seems like fade is probably used here
+    // It seems like the issue with trying to set fade is that when using transitions,
+    // The element is null when it's trying to set the transition
+    'fade': !!props.modelValue,
+  },
+])
 
 const parseCountDown = (value: boolean | number): number => {
   if (typeof value === 'boolean') {
@@ -79,20 +88,7 @@ const parseCountDown = (value: boolean | number): number => {
   return numberValue > 0 ? numberValue : 0
 }
 
-const clearCountDownInterval = (): void => {
-  if (_countDownTimeout === undefined) return
-  clearTimeout(_countDownTimeout)
-  _countDownTimeout = undefined
-}
-
 const countDown = ref<number>(parseCountDown(props.modelValue))
-const isAlertVisible = computed<boolean>(() => !!props.modelValue || showBoolean.value)
-
-onBeforeUnmount((): void => {
-  clearCountDownInterval()
-  instance.value?.dispose()
-  instance.value = undefined
-})
 
 const parsedModelValue = computed<boolean>(() => {
   if (props.modelValue === true) {
@@ -107,6 +103,12 @@ const parsedModelValue = computed<boolean>(() => {
   return !!props.modelValue
 })
 
+const clearCountDownInterval = (): void => {
+  if (_countDownTimeout === undefined) return
+  clearTimeout(_countDownTimeout)
+  _countDownTimeout = undefined
+}
+
 const handleShowAndModelChanged = (): void => {
   countDown.value = parseCountDown(props.modelValue)
   if ((parsedModelValue.value || showBoolean.value) && !instance.value)
@@ -138,4 +140,10 @@ watch(countDown, (newValue) => {
     }, 1000)
   }
 })
+
+onBeforeUnmount((): void => {
+  clearCountDownInterval()
+  instance.value?.dispose()
+  instance.value = undefined
+})
 </script>