feat: added toggleable prop to navbar

Author: DavidGalicia

packages/bootstrap-vue-3/src/BootstrapVue.ts

@@ -69,9 +69,13 @@ import BLink from './components/BLink/BLink.vue'
 import BListGroup from './components/BListGroup/BListGroup.vue'
 import BListGroupItem from './components/BListGroup/BListGroupItem.vue'
 import BModal from './components/BModal.vue'
-import BNav from './components/BNav.vue'
-import BNavItem from './components/BNavItem.vue'
-import BNavItemDropdown from './components/BNavItemDropdown.vue'
+import BNav from './components/BNav/BNav.vue'
+import BNavbar from './components/BNav/BNavbar.vue'
+import BNavbarBrand from './components/BNav/BNavbarBrand.vue'
+import BNavbarNav from './components/BNav/BNavbarNav.vue'
+import BNavbarToggle from './components/BNav/BNavbarToggle.vue'
+import BNavItem from './components/BNav/BNavItem.vue'
+import BNavItemDropdown from './components/BNav/BNavItemDropdown.vue'
 import BOffcanvas from './components/BOffcanvas.vue'
 import BOverlay from './components/BOverlay/BOverlay.vue'
 import BPagination from './components/BPagination/BPagination.vue'
@@ -181,6 +185,10 @@ export {
   BListGroupItem,
   BModal,
   BNav,
+  BNavbar,
+  BNavbarBrand,
+  BNavbarNav,
+  BNavbarToggle,
   BNavItem,
   BNavItemDropdown,
   BOffcanvas,
@@ -304,6 +312,10 @@ declare module '@vue/runtime-core' {
     BListGroupItem: typeof BListGroupItem
     BModal: typeof BModal
     BNav: typeof BNav
+    BNavbar: typeof BNavbar
+    BNavbarBrand: typeof BNavbarBrand
+    BNavbarNav: typeof BNavbarNav
+    BNavbarToggle: typeof BNavbarToggle
     BNavItem: typeof BNavItem
     BNavItemDropdown: typeof BNavItemDropdown
     BOffcanvas: typeof BOffcanvas

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

@@ -53,7 +53,7 @@ const emit = defineEmits<BCollapseEmits>()
 const element = ref<HTMLElement>()
 const instance = ref<Collapse>()
 const classes = computed(() => ({
-  show: props.modelValue,
+  'show': props.modelValue,
   'navbar-collapse': props.isNav,
 }))
 

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

@@ -8,26 +8,32 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import {ColorVariant} from '../../types/index'
+import {ColorVariant, NavbarBreakpoint} from '../../types/index'
 
 interface Props {
   variant?: ColorVariant
+  toggleable?: NavbarBreakpoint
 }
 
 const props = withDefaults(defineProps<Props>(), {
   variant: 'light',
+  toggleable: false, // navbar never collapses
 })
 
 const classes = computed(() => {
   const result: {[key: string]: boolean} = {
     'navbar': true,
-    'navbar-expand-lg': true,
     'navbar-light': props.variant === 'light',
     'navbar-dark': props.variant !== 'light',
+    'navbar-expand': props.toggleable === false, // for navbars that never collapse
   }
+
+  if (typeof props.toggleable === 'string') {
+    result[`navbar-expand-${props.toggleable}`] = true
+  }
+
   result[`bg-${props.variant}`] = true
+
   return result
 })
 </script>
-
-<style scoped></style>

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

@@ -1,22 +1,21 @@
 <template>
-  <a v-if="href" :href="href" class="navbar-brand">
+  <BLink v-if="href || to" :href="href" :to="to">
     <slot></slot>
-  </a>
-  <router-link v-else-if="to" :to="to">
-    <slot></slot>
-  </router-link>
+  </BLink>
   <div v-else>
     <slot></slot>
   </div>
 </template>
 
 <script setup lang="ts">
+import BLink from '../BLink/BLink.vue'
+import {RouteLocationRaw} from 'vue-router'
+
 interface Props {
+  tag?: 'div'
   href?: string
-  to?: any
+  to?: RouteLocationRaw
 }
 
 defineProps<Props>()
 </script>
-
-<style scoped></style>

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

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

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

@@ -18,12 +18,10 @@ const classes = ref({
   'collapsed': true,
 })
 
-function onButtonClicked() {
+const onButtonClicked = () => {
   classes.value.collapsed = !classes.value.collapsed
 
   const el = document.getElementById(props.target)
   el?.classList.toggle('show')
 }
 </script>
-
-<style scoped></style>

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

@@ -0,0 +1,39 @@
+import {mount} from '@vue/test-utils'
+import {describe, expect, it} from 'vitest'
+import BNavbarBrand from './BNavbarBrand.vue'
+import App from '../../App.vue'
+import {createRouter, createWebHistory} from 'vue-router'
+
+describe('navbar-brand', () => {
+  const routes = [
+    {
+      path: '/',
+      name: 'Home',
+      component: App,
+    },
+    {
+      path: '/test-route',
+      name: 'TestRoute',
+      component: App,
+    },
+  ]
+  const router = createRouter({
+    history: createWebHistory(),
+    routes,
+  })
+  it("generates a router-link tag when the 'to' prop is passed", async () => {
+    const wrapper = mount(BNavbarBrand, {
+      slots: {
+        default: 'test link',
+      },
+      props: {
+        to: {name: 'TestRoute'},
+      },
+      global: {
+        plugins: [router],
+      },
+    })
+
+    expect(wrapper.html()).toContain('href="/test-route"')
+  }, 5000)
+})