fix: various tags styles and props

Author: VividLemon

packages/bootstrap-vue-3/src/components/BNav/BNavItem.vue

@@ -15,9 +15,9 @@
 
 <script setup lang="ts">
 // import type {BNavItemProps} from '../types/components'
-import {computed} from 'vue'
-import {RouteLocationRaw} from 'vue-router'
 import BLink from '../BLink/BLink.vue'
+import {computed} from 'vue'
+import type {RouteLocationRaw} from 'vue-router'
 
 interface BNavItemProps {
   active?: boolean

packages/bootstrap-vue-3/src/components/BNav/BNavbar.vue

@@ -1,39 +1,34 @@
 <template>
-  <nav :class="classes">
-    <div class="container-fluid">
-      <slot></slot>
-    </div>
-  </nav>
+  <component :is="tag" class="navbar" :class="classes" :role="computedRole">
+    <slot />
+  </component>
 </template>
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {ColorVariant, NavbarBreakpoint} from '../../types/index'
+import type {ColorVariant, NavbarBreakpoint} from '../../types'
 
 interface Props {
   variant?: ColorVariant
   toggleable?: NavbarBreakpoint
+  tag?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'light',
   toggleable: false, // navbar never collapses
+  tag: 'nav',
 })
 
-const classes = computed(() => {
-  const result: {[key: string]: boolean} = {
-    'navbar': true,
-    'navbar-light': props.variant === 'light',
-    'navbar-dark': props.variant !== 'light',
-    'navbar-expand': props.toggleable === false, // for navbars that never collapse
-  }
+const computedRole = computed<null | 'navigation'>(() =>
+  props.tag === 'nav' ? null : 'navigation'
+)
 
-  if (typeof props.toggleable === 'string') {
-    result[`navbar-expand-${props.toggleable}`] = true
-  }
-
-  result[`bg-${props.variant}`] = true
-
-  return result
-})
+const classes = computed(() => ({
+  'navbar-light': props.variant === 'light',
+  'navbar-dark': props.variant !== 'light',
+  'navbar-expand': props.toggleable === false, // for navbars that never collapse
+  [`bg-${props.variant}`]: props.variant,
+  [`navbar-expand-${props.toggleable}`]: typeof props.toggleable === 'string',
+}))
 </script>

packages/bootstrap-vue-3/src/components/BNav/BNavbarBrand.vue

@@ -1,21 +1,27 @@
 <template>
-  <BLink v-if="href || to" :href="href" :to="to">
-    <slot></slot>
-  </BLink>
-  <div v-else>
-    <slot></slot>
-  </div>
+  <component :is="computedTag" v-bind="attrs">
+    <slot />
+  </component>
 </template>
 
 <script setup lang="ts">
-import BLink from '../BLink/BLink.vue'
-import {RouteLocationRaw} from 'vue-router'
+import {computed} from 'vue'
+import type {RouteLocationRaw} from 'vue-router'
 
 interface Props {
-  tag?: 'div'
+  tag?: string
   href?: string
   to?: RouteLocationRaw
 }
 
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  tag: 'div',
+})
+
+const computedTag = computed<string>(() => (props.to ? 'b-link' : props.href ? 'a' : props.tag))
+
+const attrs = computed(() => ({
+  href: props.href,
+  to: props.to,
+}))
 </script>

packages/bootstrap-vue-3/src/components/BNav/BNavbarNav.vue

@@ -3,5 +3,3 @@
     <slot></slot>
   </ul>
 </template>
-
-<script setup lang="ts"></script>

packages/bootstrap-vue-3/src/components/BNav/BNavbarToggle.vue

@@ -8,20 +8,31 @@
 import {ref} from 'vue'
 
 interface Props {
-  target: string
+  target?: string
+  disabled?: boolean // TODO ensure that if the button is disabled that it doesn't collapse
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+})
+
+interface Emits {
+  (e: 'click'): void
+}
+
+const emit = defineEmits<Emits>()
 
 const classes = ref({
   'navbar-toggler': true,
   'collapsed': true,
 })
 
 const onButtonClicked = () => {
+  emit('click')
+
   classes.value.collapsed = !classes.value.collapsed
 
-  const el = document.getElementById(props.target)
+  const el = document.getElementById(props.target) // Handle this
   el?.classList.toggle('show')
 }
 </script>