Merge pull request #524 from VividLemon/nav

feat: bnav components

Author: mariusa

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

@@ -6,6 +6,7 @@
     class="collapse"
     :class="classes"
     :data-bs-parent="accordion || null"
+    :is-nav="isNav"
   >
     <slot :visible="modelValue" :close="close" />
   </component>
@@ -27,6 +28,7 @@ interface BCollapseProps {
   tag?: string
   toggle?: boolean
   visible?: boolean
+  isNav?: boolean
 }
 
 const props = withDefaults(defineProps<BCollapseProps>(), {
@@ -35,6 +37,7 @@ const props = withDefaults(defineProps<BCollapseProps>(), {
   tag: 'div',
   toggle: false,
   visible: false,
+  isNav: false,
 })
 
 interface BCollapseEmits {
@@ -50,7 +53,8 @@ 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,
 }))
 
 const close = () => emit('update:modelValue', false)

packages/bootstrap-vue-3/src/components/BNav.vue renamed to 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/BNavItem.vue renamed to packages/bootstrap-vue-3/src/components/BNav/BNavItem.vue

@@ -1,24 +1,29 @@
 <template>
   <li class="nav-item" :class="classes">
-    <a
+    <b-link
       :href="href"
+      :to="to"
       class="nav-link"
+      :class="classes"
       :tabindex="disabled ? -1 : undefined"
       :aria-disabled="disabled ? true : undefined"
     >
       <slot />
-    </a>
+    </b-link>
   </li>
 </template>
 
 <script setup lang="ts">
 // import type {BNavItemProps} from '../types/components'
+import BLink from '../BLink/BLink.vue'
 import {computed} from 'vue'
+import type {RouteLocationRaw} from 'vue-router'
 
 interface BNavItemProps {
   active?: boolean
   disabled?: boolean
   href?: string
+  to?: RouteLocationRaw
 }
 
 const props = withDefaults(defineProps<BNavItemProps>(), {

packages/bootstrap-vue-3/src/components/BNavItemDropdown.vue renamed to packages/bootstrap-vue-3/src/components/BNav/BNavItemDropdown.vue

@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 // import type {BNavItemDropdownProps} from '../types/components'
-import type {ButtonVariant, Size} from '../types'
-import BDropdown from './BDropdown/BDropdown.vue'
+import type {ButtonVariant, Size} from '../../types'
+import BDropdown from '../BDropdown/BDropdown.vue'
 
 interface BNavItemDropdownProps {
   id?: string

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

@@ -0,0 +1,50 @@
+<template>
+  <component :is="tag" class="navbar" :class="classes" :role="computedRole">
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import type {ColorVariant} from '../../types'
+
+interface Props {
+  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>(), {
+  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(() => ({
+  'd-print': props.print,
+  'sticky-top': props.sticky,
+  [`navbar-${props.type}`]: props.type,
+  [`bg-${props.variant}`]: props.variant,
+  [`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

@@ -0,0 +1,48 @@
+<template>
+  <component :is="computedTag" v-bind="attrs">
+    <slot />
+  </component>
+</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'
+// TODO this components is not done
+interface Props {
+  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',
+})
+
+const computedTag = computed<string>(() => (props.to ? 'b-link' : props.href ? 'a' : props.tag))
+
+const attrs = computed(() => ({target: props.target, href: props.href, to: props.to}))
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <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

@@ -0,0 +1,58 @@
+<template>
+  <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 {BToggle as vBToggle} from '../../directives/index'
+import {computed} from 'vue'
+import {ButtonType} from '../../types'
+
+interface Props {
+  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,
+})
+
+interface Emits {
+  (e: 'click'): void
+}
+
+const emit = defineEmits<Emits>()
+
+const attrs = computed(() => ({
+  'type': 'button' as ButtonType,
+  'disabled': props.disabled,
+  'aria-label': props.label,
+}))
+
+const classes = computed(() => ({
+  'navbar-toggler': true,
+  'collapsed': true,
+}))
+
+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>