Merge branch 'main' of https://github.com/devhus/bootstrap-vue-next

Author: devhus

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
-  "packages/bootstrap-vue-next": "0.9.22",
+  "packages/bootstrap-vue-next": "0.9.23",
   "packages/nuxt": "0.1.3"
 }

apps/docs/.vitepress/config.ts

@@ -1,15 +1,25 @@
 import {defineConfig} from 'vitepress'
 import Icons from 'unplugin-icons/vite'
 
+const title = 'BootstrapVueNext'
+const description = 'Quickly and Easily Integrate Bootstrap V5 Components With Vue 3'
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  title: 'BootstrapVueNext',
-  description: 'BootstrapVueNext Documentation',
+  title,
+  description,
   base: '/bootstrap-vue-next/',
   srcDir: 'src',
   // TODO fix & remove this
   ignoreDeadLinks: true,
-  head: [['link', {rel: 'icon', type: 'image/x-icon', href: '/bootstrap-vue-next/favicon.ico'}]],
+  head: [
+    ['link', {rel: 'icon', type: 'image/x-icon', href: '/bootstrap-vue-next/favicon.ico'}],
+    ['meta', {property: 'og:title', name: 'og:title', content: title}],
+    ['meta', {property: 'og:description', name: 'og:description', content: description}],
+    ['meta', {property: 'twitter:card', name: 'twitter:card', content: 'summary'}],
+    ['meta', {property: 'twitter:title', name: 'twitter:title', content: title}],
+    ['meta', {property: 'twitter:description', name: 'twitter:description', content: description}],
+  ],
   vite: {
     plugins: [Icons()],
   },

apps/docs/.vitepress/theme/Layout.vue

@@ -34,43 +34,41 @@
       </BNavbarNav>
     </BCollapse>
     <BNav>
-      <BButton
-        :variant="null"
+      <BNavItem
         :href="globalData.githubUrl"
-        aria-label="Open Github"
+        :link-attrs="{'aria-label': 'Open Our Github'}"
         target="_blank"
         rel="noopener"
       >
         <GithubIcon aria-hidden />
-      </BButton>
-      <BButton
-        :variant="null"
+      </BNavItem>
+      <BNavItem
         :href="globalData.opencollectiveUrl"
-        aria-label="Open Github"
+        :link-attrs="{'aria-label': 'Open Our Opencollective'}"
         target="_blank"
         rel="noopener"
       >
         <OpencollectiveIcon />
-      </BButton>
-      <BButton
-        :variant="null"
+      </BNavItem>
+      <BNavItem
         :href="globalData.discordUrl"
-        aria-label="Open Discord Server"
+        :link-attrs="{'aria-label': 'Open Our Discord Server'}"
+        aria-label=""
         target="_blank"
         rel="noopener"
       >
         <DiscordIcon aria-hidden />
-      </BButton>
+      </BNavItem>
       <ClientOnly>
-        <BDropdown :variant="null">
+        <BNavItemDropdown>
           <!-- TODO there's no way to adjust these options, say if you wanted to remove the padding -->
           <template #button-content>
             <component :is="currentIcon" :aria-label="`Toggle theme (${dark})`" />
           </template>
           <BDropdownItem v-for="el in options" :key="el" :active="dark === el" @click="set(el)">
             <component :is="map[el]" /> {{ el }}
           </BDropdownItem>
-        </BDropdown>
+        </BNavItemDropdown>
       </ClientOnly>
     </BNav>
     <BNavbarToggle v-b-toggle.otp-menu class="otp-menu-toggle">
@@ -137,11 +135,10 @@
 
 <script setup lang="ts">
 import {
-  BButton,
   BCol,
   BCollapse,
   BContainer,
-  BDropdown,
+  BNavItemDropdown,
   BDropdownItem,
   BNav,
   BNavbar,
@@ -162,7 +159,7 @@ import MoonStarsFill from '~icons/bi/moon-stars-fill'
 import SunFill from '~icons/bi/sun-fill'
 import ChevronRight from '~icons/bi/chevron-right'
 import CircleHalf from '~icons/bi/circle-half'
-import {useData, withBase, useRoute} from 'vitepress'
+import {useData, useRoute, withBase} from 'vitepress'
 import {appInfoKey} from './keys'
 import {useMediaQuery} from '@vueuse/core'
 import TableOfContentsNav from '../../src/components/TableOfContentsNav.vue'

apps/docs/src/index.md

@@ -48,7 +48,7 @@ With more than 35 components, several directives and composibles (and growing),
 
 <div class="d-flex gap-2 mt-4">
   <BButton :to="withBase('/docs')" variant="primary">Get Started</BButton>
-  <BButton :href="globalData.githubUrl" target="_blank" aria-label="Open Github" rel="noopener" variant="outline-secondary">GitHub</BButton>
+  <BButton :href="globalData.githubUrl" target="_blank" rel="noopener" variant="outline-secondary">GitHub</BButton>
 </div>
 
 ## Integrate with Nuxt.js

packages/bootstrap-vue-next/CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
 
+## [0.9.23](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.22...bootstrap-vue-next-v0.9.23) (2023-07-08)
+
+
+### Features
+
+* **BNavItem:** add prop linkAttrs so you can add specific attributes to the link that aren't included as props ([14d1ebf](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/14d1ebfbc533e8a9217465d117e0a50978987b77))
+
+
+### Bug Fixes
+
+* **BOffcanvas:** Aria enhancements -- multiple Offcanvas causes duplicate id ([e8bcda5](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/e8bcda5260d62c87b03f44e6e03fb9ce991cdb6d))
+* replace some instances of TS 'as' with 'satisfies' ([14d1ebf](https://github.com/bootstrap-vue-next/bootstrap-vue-next/commit/14d1ebfbc533e8a9217465d117e0a50978987b77))
+
 ## [0.9.22](https://github.com/bootstrap-vue-next/bootstrap-vue-next/compare/bootstrap-vue-next-v0.9.21...bootstrap-vue-next-v0.9.22) (2023-07-07)
 
 

packages/bootstrap-vue-next/package.json

@@ -2,7 +2,7 @@
   "name": "bootstrap-vue-next",
   "displayName": "BootstrapVueNext",
   "description": "Bootstrap Vue 3 is an early and lovely component library for Vue 3 & Nuxt 3 based on Bootstrap 5 and Typescript.",
-  "version": "0.9.22",
+  "version": "0.9.23",
   "license": "MIT",
   "main": "./dist/bootstrap-vue-next.umd.js",
   "module": "./dist/bootstrap-vue-next.mjs",

packages/bootstrap-vue-next/src/components/BAccordion/BAccordionItem.vue

@@ -5,7 +5,7 @@
       v-model="modelValue"
       class="accordion-collapse"
       v-bind="$attrs"
-      :aria-labelledby="`heading${computedId}`"
+      :aria-labelledby="`${computedId}-heading`"
       :tag="tag"
       :toggle="toggle"
       :horizontal="horizontal"
@@ -14,7 +14,7 @@
       v-on="events"
     >
       <template #header="{visible: toggleVisible, toggle: slotToggle}">
-        <component :is="headerTag" :id="`heading${computedId}`" class="accordion-header">
+        <component :is="headerTag" :id="`${computedId}-heading`" class="accordion-header">
           <button
             class="accordion-button"
             :class="{collapsed: !toggleVisible}"

packages/bootstrap-vue-next/src/components/BAccordion/accordion-item.spec.ts

@@ -80,7 +80,7 @@ describe('accordion-item', () => {
       props: {id: 'foobar'},
     })
     const [, $bcollapse] = wrapper.findComponent(BCollapse).findAll('*')
-    expect($bcollapse.attributes('aria-labelledby')).toBe('headingfoobar')
+    expect($bcollapse.attributes('aria-labelledby')).toBe('foobar-heading')
   })
 
   it('headerTag is h2 by default', () => {
@@ -114,7 +114,7 @@ describe('accordion-item', () => {
       props: {id: 'foobar'},
     })
     const $h2 = wrapper.get('h2')
-    expect($h2.attributes('id')).toBe('headingfoobar')
+    expect($h2.attributes('id')).toBe('foobar-heading')
   })
 
   it('h2 child has button child', () => {

packages/bootstrap-vue-next/src/components/BBadge/BBadge.vue

@@ -101,7 +101,7 @@ const computedLinkProps = computed(() =>
         underlineOpacity: true,
         underlineOpacityHover: true,
         icon: true,
-      } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+      } satisfies Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
     : {}
 )
 </script>

packages/bootstrap-vue-next/src/components/BBreadcrumb/BBreadcrumbItem.vue

@@ -100,7 +100,7 @@ const computedLinkProps = computed(() =>
         underlineOpacity: true,
         underlineOpacityHover: true,
         icon: true,
-      } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+      } satisfies Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
     : {}
 )
 

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

@@ -3,7 +3,7 @@
     <BLink
       class="nav-link"
       :class="linkClasses"
-      v-bind="$props"
+      v-bind="{...linkProps, ...linkAttrs}"
       active-class="active"
       :tabindex="disabledBoolean ? -1 : undefined"
       :aria-disabled="disabledBoolean ? true : undefined"
@@ -14,9 +14,11 @@
 </template>
 
 <script setup lang="ts">
+import {computed} from 'vue'
 import BLink from '../BLink/BLink.vue'
 import {useBooleanish} from '../../composables'
 import type {BLinkProps} from '../../types/BLinkProps'
+import {pluckProps} from '../../utils'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -27,6 +29,7 @@ const props = withDefaults(
   defineProps<
     {
       linkClasses?: string
+      linkAttrs?: Record<string, unknown>
     } & Omit<BLinkProps, 'event' | 'routerTag'>
   >(),
   {
@@ -35,6 +38,7 @@ const props = withDefaults(
     active: undefined,
     activeClass: 'router-link-active',
     append: false,
+    linkAttrs: undefined,
     disabled: false,
     href: undefined,
     // noPrefetch: {type: [Boolean, String] as PropType<Booleanish>, default: false},
@@ -58,4 +62,28 @@ const props = withDefaults(
 )
 
 const disabledBoolean = useBooleanish(() => props.disabled)
+
+const linkProps = computed(() =>
+  pluckProps(props, {
+    active: true,
+    activeClass: true,
+    append: true,
+    disabled: true,
+    href: true,
+    icon: true,
+    opacity: true,
+    opacityHover: true,
+    rel: true,
+    replace: true,
+    routerComponentName: true,
+    target: true,
+    to: true,
+    underlineOffset: true,
+    underlineOffsetHover: true,
+    underlineOpacity: true,
+    underlineOpacityHover: true,
+    underlineVariant: true,
+    variant: true,
+  } satisfies Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+)
 </script>

packages/bootstrap-vue-next/src/components/BNavbar/BNavbarBrand.vue

@@ -74,7 +74,7 @@ const computedLinkProps = computed(() =>
         underlineOpacity: true,
         underlineOpacityHover: true,
         icon: true,
-      } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+      } satisfies Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
     : {}
 )
 </script>

packages/bootstrap-vue-next/src/components/BOffcanvas/BOffcanvas.vue

@@ -21,15 +21,15 @@
         role="dialog"
         :class="computedClasses"
         tabindex="-1"
-        aria-labelledby="offcanvasLabel"
+        :aria-labelledby="`${computedId}-offcanvas-label`"
         data-bs-backdrop="false"
         v-bind="$attrs"
         @keyup.esc="hide('esc')"
       >
         <template v-if="lazyShowing">
           <div v-if="!noHeaderBoolean" class="offcanvas-header" :class="headerClass">
             <slot name="header" v-bind="{visible: modelValueBoolean, placement, hide}">
-              <h5 id="offcanvasLabel" class="offcanvas-title">
+              <h5 :id="`${computedId}-offcanvas-label`" class="offcanvas-title">
                 <slot name="title">
                   {{ title }}
                 </slot>