feat: bnav components

Some are not fully finished, and does not include the full list of nav components

Author: VividLemon

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

@@ -73,7 +73,7 @@ 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 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'
@@ -188,7 +188,7 @@ export {
   BNavbar,
   BNavbarBrand,
   BNavbarNav,
-  BNavbarToggle,
+  // BNavbarToggle,
   BNavItem,
   BNavItemDropdown,
   BOffcanvas,
@@ -315,7 +315,7 @@ declare module '@vue/runtime-core' {
     BNavbar: typeof BNavbar
     BNavbarBrand: typeof BNavbarBrand
     BNavbarNav: typeof BNavbarNav
-    BNavbarToggle: typeof BNavbarToggle
+    // BNavbarToggle: typeof BNavbarToggle
     BNavItem: typeof BNavItem
     BNavItemDropdown: typeof BNavItemDropdown
     BOffcanvas: typeof BOffcanvas

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

@@ -1,7 +1,7 @@
 <template>
-  <ul class="nav" :class="classes">
+  <component :is="tag" class="nav" :class="classes">
     <slot />
-  </ul>
+  </component>
 </template>
 
 <script setup lang="ts">
@@ -10,27 +10,36 @@ import {computed} from 'vue'
 
 interface BNavProps {
   align?: string
+  cardHeader?: boolean
   fill?: boolean
   justified?: boolean
   pills?: boolean
+  small?: boolean
   tabs?: boolean
+  tag?: string
   vertical?: boolean
 }
 
 const props = withDefaults(defineProps<BNavProps>(), {
+  cardHeader: false,
   fill: false,
   justified: false,
   pills: false,
+  small: false,
   tabs: false,
+  tag: 'ul',
   vertical: false,
 })
 
 const classes = computed(() => ({
-  'flex-column': props.vertical,
-  [`justify-content-${props.align}`]: props.align,
   'nav-tabs': props.tabs,
-  'nav-pills': props.pills,
+  'nav-pills': props.pills && !props.tabs,
+  'card-header-tabs': !props.vertical && props.cardHeader && props.tabs,
+  'card-header-pills': !props.vertical && props.cardHeader && !props.tabs,
+  'flex-column': props.vertical,
   'nav-fill': props.fill,
   'nav-justified': props.justified,
+  [`justify-content-${props.align}`]: props.align,
+  'small': props.small,
 }))
 </script>

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

@@ -6,29 +6,45 @@
 
 <script setup lang="ts">
 import {computed} from 'vue'
-import type {ColorVariant, NavbarBreakpoint} from '../../types'
+import type {ColorVariant} from '../../types'
 
 interface Props {
-  variant?: ColorVariant
-  toggleable?: NavbarBreakpoint
+  fixed?: string
+  print?: boolean
+  sticky?: boolean
   tag?: string
+  toggleable?: false | 'sm' | 'md' | 'lg' | 'xl' // Type Omit<Breakpoint, 'xxl'>
+  type?: string
+  variant?: ColorVariant
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  variant: 'light',
-  toggleable: false, // navbar never collapses
+  print: false,
+  sticky: false,
   tag: 'nav',
+  toggleable: false, // navbar never collapses
+  type: 'light',
 })
 
 const computedRole = computed<undefined | 'navigation'>(() =>
   props.tag === 'nav' ? undefined : 'navigation'
 )
 
+const computedNavbarExpand = computed<undefined | string>(() =>
+  props.toggleable && typeof props.toggleable === 'string'
+    ? `navbar-expand-${props.toggleable}`
+    : props.toggleable === false
+    ? 'navbar-expand'
+    : undefined
+)
+
 const classes = computed(() => ({
-  'navbar-light': props.variant === 'light',
-  'navbar-dark': props.variant !== 'light',
-  'navbar-expand': props.toggleable === false, // for navbars that never collapse
+  'd-print': props.print,
+  'sticky-top': props.sticky,
+  [`navbar-${props.type}`]: props.type,
   [`bg-${props.variant}`]: props.variant,
-  [`navbar-expand-${props.toggleable}`]: typeof props.toggleable === 'string',
+  [`fixed-${props.fixed}`]: props.fixed,
+  'navbar-expand': props.toggleable === false, // for navbars that never collapse
+  [computedNavbarExpand.value as string]: computedNavbarExpand.value !== undefined,
 }))
 </script>

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

@@ -5,16 +5,40 @@
 </template>
 
 <script setup lang="ts">
+// TODO refactor this to use old setup containing BLINKPROPS and pluckprops utility
+import type {LinkTarget} from '../../types'
 import {computed} from 'vue'
 import type {RouteLocationRaw} from 'vue-router'
 
 interface Props {
-  tag?: string
+  active?: boolean
+  activeClass?: string
+  append?: boolean
+  disabled?: boolean
+  exact?: boolean
+  exactActiveClass?: string
+  exactPath?: boolean
+  exactPathActiveClass?: string
   href?: string
+  noPrefetch?: boolean
+  prefetch?: boolean
+  rel?: string
+  replace?: boolean
+  routerComponentName?: string
+  tag?: string
+  target?: LinkTarget
   to?: RouteLocationRaw
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  active: false,
+  append: false,
+  disabled: false,
+  exact: false,
+  exactPath: false,
+  noPrefetch: false,
+  replace: false,
+  target: '_self',
   tag: 'div',
 })
 

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

@@ -1,5 +1,36 @@
 <template>
-  <ul class="navbar-nav">
+  <ul class="navbar-nav" :class="classes">
     <slot></slot>
   </ul>
 </template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+
+interface Props {
+  align?: string
+  fill?: boolean
+  justified?: boolean
+  small?: boolean
+  tag?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fill: false,
+  justified: false,
+  small: false,
+  tag: 'ul',
+})
+
+const comptuedJustifyContent = computed(() => {
+  const value = props.align === 'left' ? 'start' : props.align === 'right' ? 'end' : props.align
+  return `justify-content-${value}`
+})
+
+const classes = computed(() => ({
+  'nav-fill': props.fill,
+  'nav-justified': props.justified,
+  [comptuedJustifyContent.value]: props.align !== undefined,
+  'small': props.small,
+}))
+</script>

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

@@ -1,18 +1,29 @@
 <template>
-  <button :class="classes" type="button" @click="onButtonClicked">
-    <span class="navbar-toggler-icon"></span>
+  <button
+    v-b-toggle=""
+    class="navbar-toggler"
+    :class="classes"
+    type=""
+    v-bind="attrs"
+    @click="onClick"
+  >
+    <span class="navbar-toggler-icon" />
   </button>
 </template>
 
 <script setup lang="ts">
-import {ref} from 'vue'
+import {BToggle as vBToggle} from '../../directives/index'
+import {computed} from 'vue'
+import {ButtonType} from '../../types'
 
 interface Props {
-  target?: string
   disabled?: boolean // TODO ensure that if the button is disabled that it doesn't collapse
+  label?: string
+  target?: string // TODO target should be required, ignoring the other rules about possibly undefined? It is in B-V
 }
 
 const props = withDefaults(defineProps<Props>(), {
+  label: 'Toggle navigation',
   disabled: false,
 })
 
@@ -22,17 +33,26 @@ interface Emits {
 
 const emit = defineEmits<Emits>()
 
-const classes = ref({
+const attrs = computed(() => ({
+  'type': 'button' as ButtonType,
+  'disabled': props.disabled,
+  'aria-label': props.label,
+}))
+
+const classes = computed(() => ({
   'navbar-toggler': true,
   'collapsed': true,
-})
-
-const onButtonClicked = () => {
-  emit('click')
-
-  classes.value.collapsed = !classes.value.collapsed
-
-  const el = document.getElementById(props.target) // Handle this
-  el?.classList.toggle('show')
+}))
+
+const onClick = (): void => {
+  if (!props.disabled) {
+    emit('click')
+
+    classes.value.collapsed = !classes.value.collapsed
+    if (props.target !== undefined) {
+      const el = document.getElementById(props.target)
+      el?.classList.toggle('show')
+    }
+  }
 }
 </script>