feat: navbar stub work

Author: DavidGalicia

packages/bootstrap-vue-3/package-lock.json

@@ -48,7 +48,6 @@
     "rollup": "^2.76.0",
     "rollup-plugin-visualizer": "5.x.x",
     "sass": "1.x.x",
-    "tsconfig": "workspace:*",
     "typescript": "4.x.x",
     "vite": "2.x.x",
     "vite-plugin-dts": "1.x.x",

packages/bootstrap-vue-3/package.json

@@ -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 {
@@ -51,6 +54,7 @@ const element = ref<HTMLElement>()
 const instance = ref<Collapse>()
 const classes = computed(() => ({
   show: props.modelValue,
+  'navbar-collapse': props.isNav,
 }))
 
 const close = () => emit('update:modelValue', false)

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

@@ -0,0 +1,36 @@
+<template>
+  <ul class="nav" :class="classes">
+    <slot />
+  </ul>
+</template>
+
+<script setup lang="ts">
+// import type {BNavProps} from '../types/components'
+import {computed} from 'vue'
+
+interface BNavProps {
+  align?: string
+  fill?: boolean
+  justified?: boolean
+  pills?: boolean
+  tabs?: boolean
+  vertical?: boolean
+}
+
+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>

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

@@ -0,0 +1,38 @@
+<template>
+  <li class="nav-item" :class="classes">
+    <b-link
+      :href="href"
+      :to="to"
+      class="nav-link"
+      :class="classes"
+      :tabindex="disabled ? -1 : undefined"
+      :aria-disabled="disabled ? true : undefined"
+    >
+      <slot />
+    </b-link>
+  </li>
+</template>
+
+<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'
+
+interface BNavItemProps {
+  active?: boolean
+  disabled?: boolean
+  href?: string
+  to?: RouteLocationRaw
+}
+
+const props = withDefaults(defineProps<BNavItemProps>(), {
+  active: false,
+  disabled: false,
+})
+
+const classes = computed(() => ({
+  active: props.active,
+  disabled: props.disabled,
+}))
+</script>

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

@@ -0,0 +1,48 @@
+<template>
+  <li class="nav-item dropdown">
+    <b-dropdown v-bind="$props">
+      <template v-for="(_, slot) in $slots" #[slot]="scope">
+        <slot :name="slot" v-bind="scope || {}" />
+      </template>
+    </b-dropdown>
+  </li>
+</template>
+
+<script setup lang="ts">
+// import type {BNavItemDropdownProps} from '../types/components'
+import type {ButtonVariant, Size} from '../../types'
+import BDropdown from '../BDropdown/BDropdown.vue'
+
+interface BNavItemDropdownProps {
+  id?: string
+  text?: string
+  size?: Size
+  offset?: string
+  autoClose?: boolean | 'inside' | 'outside'
+  dark?: boolean
+  dropleft?: boolean
+  dropright?: boolean
+  dropup?: boolean
+  right?: boolean
+  left?: boolean | string
+  offsetParent?: boolean
+  split?: boolean
+  splitVariant?: ButtonVariant
+  noCaret?: boolean
+  variant?: ButtonVariant
+}
+
+withDefaults(defineProps<BNavItemDropdownProps>(), {
+  autoClose: true,
+  dark: false,
+  dropleft: false,
+  dropright: false,
+  dropup: false,
+  right: false,
+  left: false,
+  offsetParent: false,
+  split: false,
+  noCaret: false,
+  variant: 'link',
+})
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <nav :class="classes">
+    <div class="container-fluid">
+      <slot></slot>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue'
+import {ColorVariant} from '../../types/index'
+
+interface Props {
+  variant?: ColorVariant
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'light',
+})
+
+const classes = computed(() => {
+  const result: {[key: string]: boolean} = {
+    'navbar': true,
+    'navbar-expand-lg': true,
+    'navbar-light': props.variant === 'light',
+    'navbar-dark': props.variant !== 'light',
+  }
+  result[`bg-${props.variant}`] = true
+  return result
+})
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,22 @@
+<template>
+  <a v-if="href" :href="href" class="navbar-brand">
+    <slot></slot>
+  </a>
+  <router-link v-else-if="to" :to="to">
+    <slot></slot>
+  </router-link>
+  <div v-else>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  href?: string
+  to?: any
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,9 @@
+<template>
+  <ul class="navbar-nav">
+    <slot></slot>
+  </ul>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped></style>

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

@@ -0,0 +1,29 @@
+<template>
+  <button :class="classes" type="button" @click="onButtonClicked">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+interface Props {
+  target: string
+}
+
+const props = defineProps<Props>()
+
+const classes = ref({
+  'navbar-toggler': true,
+  'collapsed': true,
+})
+
+function onButtonClicked() {
+  classes.value.collapsed = !classes.value.collapsed
+
+  const el = document.getElementById(props.target)
+  el?.classList.toggle('show')
+}
+</script>
+
+<style scoped></style>