BNav script setup conversion

Author: issayah

src/components/BNav.vue

@@ -4,32 +4,33 @@
   </ul>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BNavProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BNav',
-  props: {
-    align: {type: String},
-    fill: {type: Boolean, default: false},
-    justified: {type: Boolean, default: false},
-    pills: {type: Boolean, default: false},
-    tabs: {type: Boolean, default: false},
-    vertical: {type: Boolean, default: false},
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      'flex-column': props.vertical,
-      [`justify-content-${props.align}`]: props.align,
-      'nav-tabs': props.tabs,
-      'nav-pills': props.pills,
-      'nav-fill': props.fill,
-      'nav-justified': props.justified,
-    }))
+interface BNavProps {
+  align?: string
+  fill?: boolean
+  justified?: boolean
+  pills?: boolean
+  tabs?: boolean
+  vertical?: boolean
+}
 
-    return {
-      classes,
-    }
-  },
+const props = withDefaults(defineProps<BNavProps>(), {
+  fill: false,
+  justified: false,
+  pills: false,
+  tabs: false,
+  vertical: false,
 })
+
+const classes = computed(() => ({
+  'flex-column': props.vertical,
+  [`justify-content-${props.align}`]: props.align,
+  'nav-tabs': props.tabs,
+  'nav-pills': props.pills,
+  'nav-fill': props.fill,
+  'nav-justified': props.justified,
+}))
 </script>

src/components/BNavItem.vue

@@ -3,33 +3,31 @@
     <a
       :href="href"
       class="nav-link"
-      :tabindex="disabled ? -1 : null"
-      :aria-disabled="disabled ? true : null"
+      :tabindex="disabled ? -1 : undefined"
+      :aria-disabled="disabled ? true : undefined"
     >
       <slot />
     </a>
   </li>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent} from 'vue'
+<script setup lang="ts">
+// import type {BNavItemProps} from '@/types/components'
+import {computed} from 'vue'
 
-export default defineComponent({
-  name: 'BNavItem',
-  props: {
-    active: {type: Boolean, default: false},
-    disabled: {type: Boolean, default: false},
-    href: {type: String, required: false},
-  },
-  setup(props) {
-    const classes = computed(() => ({
-      active: props.active,
-      disabled: props.disabled,
-    }))
+interface BNavItemProps {
+  active?: boolean
+  disabled?: boolean
+  href?: string
+}
 
-    return {
-      classes,
-    }
-  },
+const props = withDefaults(defineProps<BNavItemProps>(), {
+  active: false,
+  disabled: false,
 })
+
+const classes = computed(() => ({
+  active: props.active,
+  disabled: props.disabled,
+}))
 </script>