Fixing building errors

Author: sfe-efficy

src/components/BFormGroup/BFormGroup.vue

@@ -1,21 +1,21 @@
 <script lang="ts">
+import useId from '@/composables/useId'
 import {RX_SPACE_SPLIT} from '@/constants/regex'
 import {arrayIncludes} from '@/utils/array'
 import {cssEscape} from '@/utils/css-escape'
 import {attemptFocus, getAttr, isVisible, removeAttr, select, selectAll, setAttr} from '@/utils/dom'
 import {IS_BROWSER} from '@/utils/env'
+import getID from '@/utils/getID'
 import {isBoolean} from '@/utils/inspect'
+import {normalizeSlot} from '@/utils/normalize-slot'
 import {stringToInteger} from '@/utils/number'
 import {suffixPropName} from '@/utils/props'
 import {computed, defineComponent, h, nextTick, onMounted, ref, watch} from 'vue'
-import useId from '@/composables/useId'
-import {normalizeSlot} from '@/utils/normalize-slot'
-import getID from '@/utils/getID'
 import BCol from '../BCol.vue'
-import BFormValidFeedback from '../BForm/BFormValidFeedback.vue'
 import BFormInvalidFeedback from '../BForm/BFormInvalidFeedback.vue'
 import BFormRow from '../BForm/BFormRow.vue'
 import BFormText from '../BForm/BFormText.vue'
+import BFormValidFeedback from '../BForm/BFormValidFeedback.vue'
 
 const INPUTS = ['input', 'select', 'textarea']
 // Selector for finding first input in the form group
@@ -69,20 +69,18 @@ export default defineComponent({
     const ariaDescribedby: string | null = null as string | null
     const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl']
 
-    const getAlignClasses = (props: any, prefix: string) => {
-      const alignClasses = breakPoints.reduce((result: string[], breakpoint) => {
+    const getAlignClasses = (props: any, prefix: string) =>
+      breakPoints.reduce((result: string[], breakpoint) => {
         const propValue: string = props[suffixPropName(breakpoint, `${prefix}Align`)] || null
         if (propValue) {
           result.push(['text', breakpoint, propValue].filter((p) => p).join('-'))
         }
 
         return result
       }, [])
-      return alignClasses
-    }
 
-    const getColProps = (props: any, prefix: string) => {
-      const colProps: any = breakPoints.reduce((result: any, breakpoint: string) => {
+    const getColProps = (props: any, prefix: string) =>
+      breakPoints.reduce((result: any, breakpoint: string) => {
         let propValue = props[suffixPropName(breakpoint, `${prefix}Cols`)]
         // Handle case where the prop's value is an empty string,
         // which represents `true`
@@ -103,8 +101,6 @@ export default defineComponent({
         }
         return result
       }, {})
-      return colProps
-    }
 
     const content = ref()
 
@@ -277,7 +273,7 @@ export default defineComponent({
     let $invalidFeedback = null
     const invalidFeedbackContent =
       normalizeSlot(SLOT_NAME_INVALID_FEEDBACK, {}, slots) || this.invalidFeedback
-    const invalidFeedbackId = invalidFeedbackContent ? getID('_BV_feedback_invalid_') : null
+    const invalidFeedbackId = invalidFeedbackContent ? getID('_BV_feedback_invalid_') : undefined
 
     if (invalidFeedbackContent) {
       $invalidFeedback = h(
@@ -287,7 +283,6 @@ export default defineComponent({
           id: invalidFeedbackId,
           state: props.state,
           tooltip: props.tooltip,
-          tabindex: invalidFeedbackContent ? '-1' : null,
         },
         {default: () => invalidFeedbackContent}
       )
@@ -296,7 +291,7 @@ export default defineComponent({
     let $validFeedback = null
     const validFeedbackContent =
       normalizeSlot(SLOT_NAME_VALID_FEEDBACK, {}, slots) || this.validFeedback
-    const validFeedbackId = validFeedbackContent ? getID('_BV_feedback_valid_') : null
+    const validFeedbackId = validFeedbackContent ? getID('_BV_feedback_valid_') : undefined
 
     if (validFeedbackContent) {
       $validFeedback = h(
@@ -306,7 +301,6 @@ export default defineComponent({
           id: validFeedbackId,
           state: props.state,
           tooltip: props.tooltip,
-          tabindex: validFeedbackContent ? '-1' : null,
         },
         {default: () => validFeedbackContent}
         // validFeedbackContent
@@ -315,13 +309,12 @@ export default defineComponent({
 
     let $description = null
     const descriptionContent = normalizeSlot(SLOT_NAME_DESCRIPTION, {}, slots) || this.description
-    const descriptionId = descriptionContent ? getID('_BV_description_') : null
+    const descriptionId = descriptionContent ? getID('_BV_description_') : undefined
     if (descriptionContent) {
       $description = h(
         BFormText,
         {
           id: descriptionId,
-          tabindex: '-1',
         },
         {default: () => descriptionContent}
       )

src/components/BNavItemDropdown.vue

@@ -18,12 +18,12 @@ interface BNavItemDropdownProps {
   text?: string
   size?: Size
   offset?: string
-  autoClose?: string
+  autoClose?: boolean | 'inside' | 'outside'
   dark?: boolean
   dropleft?: boolean
   dropright?: boolean
   dropup?: boolean
-  right?: boolean | string
+  right?: boolean
   left?: boolean | string
   offsetParent?: boolean
   split?: boolean
@@ -32,7 +32,7 @@ interface BNavItemDropdownProps {
 }
 
 withDefaults(defineProps<BNavItemDropdownProps>(), {
-  autoClose: 'true',
+  autoClose: true,
   dark: false,
   dropleft: false,
   dropright: false,

src/components/BTable/BTable.vue

@@ -44,15 +44,15 @@ export default defineComponent({
     const computedFields = computed(() => itemHelper.normaliseFields(props.fields, props.items))
 
     return () => {
-      let theadTop: VNode | null
-      theadTop = null
+      let theadTop: VNode | null = null
       if (slots['thead-top']) {
-        theadTop = slots['thead-top']()
+        theadTop = slots['thead-top']() as unknown as VNode
       }
 
       let theadSub: VNode | null
       theadSub = null
       if (slots['thead-sub']) {
+        const slotReference = slots['thead-sub'] as unknown as (arg: object) => VNode
         theadSub = h(
           'tr',
 
@@ -63,7 +63,7 @@ export default defineComponent({
                 scope: 'col',
                 class: [field.class, field.thClass, field.variant ? `table-${field.variant}` : ''],
               },
-              slots['thead-sub']({items: computedFields.value, ...field})
+              slotReference({items: computedFields.value, ...field}) as unknown as VNode
             )
           )
         )
@@ -75,7 +75,7 @@ export default defineComponent({
           'tr',
           computedFields.value.map((field) => {
             const slotName = `head(${field.key})`
-            let thContent = field.label
+            let thContent: any = field.label
 
             if (slots[slotName]) {
               thContent = slots[slotName]?.({
@@ -110,15 +110,15 @@ export default defineComponent({
               },
               computedFields.value.map((field) => {
                 const slotName = `cell(${field.key})`
-                let tdContent = tr[field.key]
+                let tdContent = tr[field.key] as unknown as VNode
 
                 if (slots[slotName]) {
                   tdContent = slots[slotName]?.({
                     value: tr[field.key],
                     index,
                     item: tr,
                     items: props.items,
-                  })
+                  }) as unknown as VNode
                 }
 
                 return h(

src/components/BToast/plugin.ts

@@ -1,31 +1,18 @@
+import type {BootstrapVueOptions, ColorVariant, ContainerPosition} from '@/types'
+import getID from '@/utils/getID'
 import {
   App,
   ComponentPublicInstance,
   computed,
   ComputedRef,
-  getCurrentInstance,
-  h,
   inject,
   isReactive,
-  nextTick,
-  onMounted,
-  onUpdated,
   Plugin,
-  provide,
   reactive,
-  ref,
   Ref,
-  render,
-  resolveComponent,
-  shallowReactive,
   VNode,
-  watch,
-  watchEffect,
 } from 'vue'
 
-import type {BootstrapVueOptions, ColorVariant, ContainerPosition} from '@/types'
-import getID from '@/utils/getID'
-
 export interface ToastContent {
   title?: string
   body?: string | VNode
@@ -88,7 +75,7 @@ export class ToastInstance {
     if (position) {
       return computed<Array<Toast>>(() =>
         this.vm.toasts.filter((toast) => {
-          if (toast.options.pos == position && toast.options.value) {
+          if (toast.options.pos === position && toast.options.value) {
             return toast
           }
         })
@@ -100,7 +87,7 @@ export class ToastInstance {
 
   remove(...forDeletion: [string]): void {
     this.vm.toasts = this.vm.toasts.filter((item) => {
-      if (!forDeletion.includes(item.options.id)) {
+      if (item.options.id && !forDeletion.includes(item.options.id)) {
         return item
       }
     })
@@ -137,7 +124,9 @@ export class ToastInstance {
     return this.show(content, {variant: 'success', ...options})
   }
 
-  hide(): void {}
+  hide(): void {
+    //empty...
+  }
 }
 
 export class ToastController {
@@ -148,7 +137,7 @@ export class ToastController {
     this.vms = {}
   }
 
-  // Assume Root Vm if no paramters are passed
+  // Assume Root Vm if no parameters are passed
   public getOrCreateViewModel(): ToastVM
   public getOrCreateViewModel(vm?: ToastVM): ToastVM
   public getOrCreateViewModel(vm?: any): ToastVM {
@@ -190,7 +179,7 @@ export class ToastController {
 
 // default global inject key to fetch the controller
 const injectkey = Symbol()
-const rootkey = 'root'
+const rootkey = 'root' // TODO: I guess this variable is not used in any place...
 
 const defaults = {
   container: undefined,
@@ -205,13 +194,12 @@ export function useToast(
 ): ToastInstance | undefined
 
 export function useToast(vm?: any, key: symbol = injectkey): ToastInstance | undefined {
-  //lets get our controller to fetch the toast instance
+  //let's get our controller to fetch the toast instance
   const controller = inject(key !== null ? key : injectkey) as ToastController
 
-  // not paramters passed, use root if defined
+  // not parameters passed, use root if defined
   if (!vm) {
-    const local_vm = new ToastInstance(controller.getOrCreateViewModel())
-    return local_vm
+    return new ToastInstance(controller.getOrCreateViewModel())
   }
 
   // use toast generically

src/utils/bvEvent.ts

@@ -22,7 +22,10 @@ export class BvEvent {
     }
 
     // Merge defaults first, the eventInit, and the type last
-    // so it can't be overwritten
+    // so, it can't be overwritten
+    // TODO: Find a better way to avoid the original error...
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     assign(this, BvEvent.Defaults, this.constructor.Defaults, eventInit, {eventType})
 
     // Freeze some props as readonly, but leave them enumerable

src/utils/normalize-slot.ts

@@ -1,8 +1,8 @@
+import {VNode} from '@vue/runtime-core'
 import {Slots} from 'vue'
 import {isFunction} from './inspect'
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-export const normalizeSlot = (name: string, scope = {}, $slots: Slots = {}) => {
+export const normalizeSlot = (name: string, scope = {}, $slots: Slots = {}): VNode => {
   // Ensure names is an array
   const names = [name]
   let slot
@@ -11,5 +11,5 @@ export const normalizeSlot = (name: string, scope = {}, $slots: Slots = {}) => {
     slot = $slots[name]
   }
   // Note: in Vue 3.x, slots have been unified. No more scoped slots and all slots are exposed as functions
-  return slot && isFunction(slot) ? slot(scope) : slot
+  return (slot && isFunction(slot) ? slot(scope) : slot) as unknown as VNode
 }