fix: vite-plugin-dts issues and apps/docs

Fixed apps/docs not able to build without it's peer imports. Upgraded @vuepress/plugin*'s. Some vite-plugin-dts issues were caused from https://github.com/qmhc/vite-plugin-dts#take-type-error-when-using-both-script-and-setup-script-in-vue-component , The components that don't contain that fix, are somehow fixed with converting to pure TS interfaces. I don't know why it worked, but it did.

Author: VividLemon

apps/docs/package.json

@@ -8,11 +8,13 @@
     "deploy": "./scripts/deploy.sh"
   },
   "devDependencies": {
+    "@vuepress/client": "2.0.0-beta.45",
+    "@vuepress/plugin-register-components": "2.0.0-beta.49",
+    "@vuepress/plugin-search": "2.0.0-beta.49",
     "bootstrap": "5.x.x",
-    "tsconfig": "workspace:*",
-    "@vuepress/plugin-search": "^2.0.0-beta.48",
-    "@vuepress/plugin-register-components": "^2.0.0-beta.48",
     "bootstrap-vue-3": "workspace:*",
+    "tsconfig": "workspace:*",
+    "vue": "^3.2.37",
     "vuepress": "^2.0.0-beta.48"
   }
 }

apps/playground/src/App.vue

@@ -365,7 +365,11 @@
     <!-- Form -->
     <div class="my-2">
       <h2>Form</h2>
-      <b-form @submit.stop.prevent>
+      <!-- TODO doing @submit.stop.prevent alone is not allowed -->
+      <!-- This is an issue for people that want to stop propogation -->
+      <!-- A workaround is to do () => {} -->
+      <!-- But that's not a great solution -->
+      <b-form @submit.stop.prevent="() => {}">
         <label for="text-password">Password</label>
         <b-form-input
           id="text-password"

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

@@ -25,11 +25,11 @@
 </template>
 
 <script setup lang="ts">
-// import type { BAvatarProps, BAvatarEmits } from '../types/components'
+// import type { BAvatarProps, BAvatarEmits, InputSize } from '../types/components'
 import {isEmptySlot} from '../../utils/dom'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, inject, StyleValue, useSlots} from 'vue'
-import type {ColorVariant, InputSize} from '../../types'
+import type {ColorVariant} from '../../types'
 import {isNumber, isNumeric, isString} from '../../utils/inspect'
 import {toFloat} from '../../utils/number'
 import {injectionKey} from './BAvatarGroup.vue'
@@ -47,7 +47,8 @@ interface BAvatarProps {
   disabled?: boolean
   icon?: string
   rounded?: boolean | string
-  size?: InputSize | string | number
+  size?: 'sm' | 'md' | 'lg' | string
+  // size?: InputSize | string
   square?: boolean
   src?: string
   text?: string

packages/bootstrap-vue-3/src/components/BAvatar/BAvatarGroup.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script setup lang="ts">
-// import type { BAvatarGroupParentData, BAvatarGroupProps } from '../types/components'
+// import type { BAvatarGroupParentData, BAvatarGroupProps, InputSize } from '../types/components'
 import type {BAvatarGroupParentData} from '../../types/components'
 import {computed, InjectionKey, provide, StyleValue} from 'vue'
-import type {ColorVariant, InputSize} from '../../types'
+import type {ColorVariant} from '../../types'
 import {mathMax, mathMin} from '../../utils/math'
 import {toFloat} from '../../utils/number'
 import {computeSize} from './BAvatar.vue'
@@ -19,7 +19,8 @@ import {isNumeric, isString} from '../../utils/inspect'
 interface BAvatarGroupProps {
   overlap?: number | string
   rounded?: boolean | string
-  size?: InputSize | string
+  size?: 'sm' | 'md' | 'lg' | string
+  // size?: InputSize | string
   square?: boolean
   tag?: string
   variant?: ColorVariant

packages/bootstrap-vue-3/src/components/BDropdown/BDropdownGroup.vue

@@ -26,6 +26,7 @@
 <script setup lang="ts">
 // import type {BDropdownGroupProps} from '../../types/components'
 import type {ColorVariant} from '../../types'
+import {computed} from 'vue'
 
 interface BDropdownGroupProps {
   id?: string
@@ -56,8 +57,7 @@ const classes = computed(() => ({
 </script>
 
 <script lang="ts">
-import {computed, defineComponent} from 'vue'
-export default defineComponent({
+export default {
   inheritAttrs: false,
-})
+}
 </script>

packages/bootstrap-vue-3/src/components/BDropdown/BDropdownItem.vue

@@ -14,6 +14,7 @@
 
 <script setup lang="ts">
 // import type {BDropdownItemButtonEmits, BDropdownItemProps} from '../../types/components'
+import {computed, useAttrs} from 'vue'
 import type {ColorVariant, LinkTarget} from '../../types'
 
 interface BDropdownItemProps {
@@ -65,8 +66,7 @@ const clicked = (e: MouseEvent): void => emit('click', e)
 </script>
 
 <script lang="ts">
-import {computed, defineComponent, useAttrs} from 'vue'
-export default defineComponent({
+export default {
   inheritAttrs: false,
-})
+}
 </script>

packages/bootstrap-vue-3/src/components/BDropdown/BDropdownItemButton.vue

@@ -9,6 +9,7 @@
 <script setup lang="ts">
 // import type {BDropdownItemButtonEmits, BDropdownItemButtonProps} from '../../types/components'
 import type {ButtonType, ColorVariant} from '../../types'
+import {computed} from 'vue'
 
 interface BDropdownItemButtonProps {
   buttonClass?: string | Array<unknown> | Record<string, unknown>
@@ -47,8 +48,7 @@ const clicked = (e: MouseEvent): void => emit('click', e)
 </script>
 
 <script lang="ts">
-import {computed, defineComponent} from 'vue'
-export default defineComponent({
+export default {
   inheritAttrs: false,
-})
+}
 </script>

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

@@ -31,6 +31,7 @@
 
 <script setup lang="ts">
 // import type {BFormCheckboxEmits, BFormCheckboxProps} from '../../types/components'
+import {computed, onMounted, ref} from 'vue'
 import {getClasses, getInputClasses, getLabelClasses, useId} from '../../composables'
 import type {ButtonVariant, InputSize} from '../../types'
 
@@ -145,8 +146,7 @@ onMounted((): void => {
 </script>
 
 <script lang="ts">
-import {computed, defineComponent, onMounted, ref} from 'vue'
-export default defineComponent({
+export default {
   inheritAttrs: false,
-})
+}
 </script>

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

@@ -50,7 +50,7 @@ interface BFormRadioProps {
   buttonVariant?: ButtonVariant
   inline?: boolean
   required?: boolean
-  state?: boolean | null
+  state?: boolean
   value?: string | boolean | Record<string, unknown> | number
 }
 

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

@@ -7,11 +7,11 @@
 <script setup lang="ts">
 // import type {BListGroupProps} from '../../types/components'
 import {computed, InjectionKey, provide} from 'vue'
-import type {Breakpoint} from '../../types'
+// import type {Breakpoint} from '../../types'
 
 interface BListGroupProps {
   flush?: boolean
-  horizontal?: boolean | Breakpoint
+  horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
   numbered?: boolean
   tag?: string
 }