BTabs script setup conversion

Author: issayah

src/components/BTabs/BTab.vue

@@ -11,44 +11,45 @@
   </component>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, inject} from 'vue'
-import {injectionKey, ParentData} from './BTabs.vue'
+<script setup lang="ts">
+// import type {BTabProps} from '@/types/components'
+import {computed, inject} from 'vue'
+import {injectionKey} from './BTabs.vue'
 
-export default defineComponent({
-  name: 'BTab',
-  props: {
-    active: {type: Boolean, default: false},
-    buttonId: {type: String, default: null},
-    disabled: {type: Boolean, default: false},
-    id: {type: String},
-    lazy: {type: Boolean, default: false},
-    noBody: {type: [Boolean, String], default: false},
-    tag: {type: String, default: 'div'},
-    title: {type: String},
-    titleItemClass: {type: [Array, Object, String], default: null},
-    titleLinkAttributes: {type: Object, default: null},
-    titleLinkClass: {type: [Array, Object, String], default: null},
-  },
-  setup(props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const parentData: ParentData = inject(injectionKey)!
+interface BTabProps {
+  id: string
+  title: string
+  active?: boolean
+  buttonId?: string
+  disabled?: boolean
+  lazy?: boolean
+  noBody?: boolean | string
+  tag?: string
+  titleItemClass?: Array<unknown> | Record<string, unknown> | string
+  titleLinkAttributes?: Record<string, unknown>
+  titleLinkClass?: Array<unknown> | Record<string, unknown> | string
+}
 
-    const computedLazy = computed(() => parentData?.lazy || props.lazy)
-    const computedActive = computed(() => props.active && !props.disabled)
-    const showSlot = computed(() => computedActive.value || !computedLazy.value)
-    const classes = computed(() => ({
-      'active': props.active,
-      'show': props.active,
-      'card-body': parentData.card && props.noBody === false,
-    }))
-
-    return {
-      classes,
-      computedLazy,
-      computedActive,
-      showSlot,
-    }
-  },
+const props = withDefaults(defineProps<BTabProps>(), {
+  active: false,
+  buttonId: undefined,
+  disabled: false,
+  lazy: false,
+  noBody: false,
+  tag: 'div',
+  titleItemClass: undefined,
+  titleLinkAttributes: undefined,
+  titleLinkClass: undefined,
 })
+
+const parentData = inject(injectionKey, null)
+
+const computedLazy = computed<boolean>(() => parentData?.lazy || props.lazy)
+const computedActive = computed<boolean>(() => props.active && !props.disabled)
+const showSlot = computed<boolean>(() => computedActive.value || !computedLazy.value)
+const classes = computed(() => ({
+  'active': props.active,
+  'show': props.active,
+  'card-body': parentData?.card && props.noBody === false,
+}))
 </script>