Merge pull request bootstrap-vue-next#1384 from VividLemon/main

fix: prop active and activeClass across the library have been standar…

Author: VividLemon

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

@@ -81,7 +81,7 @@ const props = withDefaults(
     variant: 'secondary',
     // Link props
     active: undefined,
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     href: undefined,
     // noPrefetch: {type: [Boolean, String] as PropType<Booleanish>, default: false},

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

@@ -33,7 +33,7 @@ const props = withDefaults(
     variant: 'secondary',
     // Link props
     active: undefined,
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     disabled: false,
     href: undefined,

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

@@ -37,7 +37,7 @@ const props = withDefaults(
     text: undefined,
     // Link props
     active: false,
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     disabled: false,
     event: 'click',

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

@@ -85,7 +85,7 @@ const props = withDefaults(
     block: false,
     loadingText: 'Loading...',
     // Link props
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     disabled: false,
     event: 'click',

packages/bootstrap-vue-next/src/components/BDropdown/BDropdownItem.vue

@@ -1,17 +1,17 @@
 <template>
   <li role="presentation">
     <component
-      :is="tag"
+      :is="computedTag"
       class="dropdown-item"
       :class="computedClasses"
       :disabled="disabledBoolean"
       :aria-disabled="disabledBoolean ? true : null"
       :aria-current="activeBoolean ? true : null"
-      :href="tag === 'a' ? href : null"
+      :href="computedTag === 'a' ? href : null"
       :rel="rel"
-      :type="tag === 'button' ? 'button' : null"
+      :type="computedTag === 'button' ? 'button' : null"
       :target="target"
-      v-bind="componentAttrs"
+      v-bind="computedLinkProps"
       @click="clicked"
     >
       <slot />
@@ -21,33 +21,48 @@
 
 <script setup lang="ts">
 import BLink from '../BLink/BLink.vue'
-import {computed, inject, useAttrs} from 'vue'
-import type {Booleanish, ClassValue, ColorVariant, LinkTarget} from '../../types'
+import {computed, inject} from 'vue'
+import type {BLinkProps, ClassValue} from '../../types'
 import {useBooleanish} from '../../composables'
-import {collapseInjectionKey, dropdownInjectionKey, navbarInjectionKey} from '../../utils'
+import {
+  collapseInjectionKey,
+  dropdownInjectionKey,
+  isLink,
+  navbarInjectionKey,
+  pick,
+} from '../../utils'
 
 defineOptions({
   inheritAttrs: false,
 })
 
 const props = withDefaults(
-  defineProps<{
-    href?: string
-    linkClass?: ClassValue
-    active?: Booleanish
-    disabled?: Booleanish
-    rel?: string
-    target?: LinkTarget
-    variant?: ColorVariant | null
-  }>(),
+  defineProps<
+    {
+      linkClass?: ClassValue
+    } & Omit<BLinkProps, 'event' | 'routerTag'>
+  >(),
   {
-    active: false,
-    disabled: false,
-    rel: undefined,
-    target: '_self',
-    variant: null,
     linkClass: undefined,
+    // Link props
+    active: undefined,
+    activeClass: undefined,
+    append: false,
     href: undefined,
+    // noPrefetch: {type: [Boolean, String] as PropType<Booleanish>, default: false},
+    // prefetch: {type: [Boolean, String] as PropType<Booleanish>, default: null},
+    rel: undefined,
+    replace: false,
+    routerComponentName: 'router-link',
+    target: '_self',
+    to: undefined,
+    opacity: undefined,
+    opacityHover: undefined,
+    underlineVariant: null,
+    underlineOffset: undefined,
+    underlineOffsetHover: undefined,
+    underlineOpacity: undefined,
+    underlineOpacityHover: undefined,
   }
 )
 
@@ -63,8 +78,6 @@ defineSlots<{
   default?: (props: Record<string, never>) => any
 }>()
 
-const attrs = useAttrs()
-
 const computedClasses = computed(() => [
   props.linkClass,
   {
@@ -74,19 +87,41 @@ const computedClasses = computed(() => [
   },
 ])
 
-const tag = computed<'button' | 'a' | typeof BLink>(() =>
-  props.href ? 'a' : attrs.to ? BLink : 'button'
+const computedLink = computed<boolean>(() => isLink(props))
+
+const computedTag = computed<typeof BLink | 'button' | 'a'>(() =>
+  computedLink.value ? BLink : props.href ? 'a' : 'button'
 )
 
-const componentAttrs = computed(() => ({
-  ...(attrs.to ? {activeClass: 'active', ...attrs} : attrs),
-}))
+const computedLinkProps = computed(() =>
+  computedLink.value
+    ? pick(props, [
+        'active',
+        'activeClass',
+        'append',
+        'href',
+        'rel',
+        'replace',
+        'routerComponentName',
+        'target',
+        'to',
+        'variant',
+        'opacity',
+        'opacityHover',
+        'underlineVariant',
+        'underlineOffset',
+        'underlineOffsetHover',
+        'underlineOpacity',
+        'underlineOpacityHover',
+      ])
+    : {}
+)
 
 const collapseData = inject(collapseInjectionKey, null)
 const dropdownData = inject(dropdownInjectionKey, null)
 const navbarData = inject(navbarInjectionKey, null)
 
-// Pretty sure this emits if tag is not button and is disabled
+// Pretty sure this emits if computedTag is not button and is disabled
 const clicked = (e: MouseEvent): void => {
   emit('click', e)
   if (navbarData !== null) {

packages/bootstrap-vue-next/src/components/BDropdown/dropdown-item.spec.ts

@@ -42,14 +42,12 @@ describe('dropdown-item', () => {
     expect($blink.exists()).toBe(true)
   })
 
-  it('child is tag prefers a over blink', () => {
+  it('child prefers to be blink when href and to', () => {
     const wrapper = mount(BDropdownItem, {
       props: {href: '/abc', to: '/abc'},
     })
-    const $a = wrapper.find('a')
     const $blink = wrapper.findComponent(BLink)
-    expect($blink.exists()).toBe(false)
-    expect($a.exists()).toBe(true)
+    expect($blink.exists()).toBe(true)
   })
 
   it('child is tag prefers Blink over button', () => {

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

@@ -37,7 +37,7 @@ defineSlots<{
 
 const props = withDefaults(defineProps<BLinkProps>(), {
   active: undefined,
-  activeClass: 'router-link-active',
+  activeClass: undefined,
   append: false,
   disabled: false,
   event: 'click',
@@ -151,7 +151,7 @@ const routerAttr = computed(() => ({
 }))
 
 const computedLinkClasses = computed(() => ({
-  [props.activeClass]: activeBoolean.value,
+  [props.activeClass ?? 'active']: activeBoolean.value,
   disabled: disabledBoolean.value,
 }))
 
@@ -176,7 +176,7 @@ const clicked = (e: MouseEvent): void => {
  */
 export const BLINK_PROPS = {
   active: {type: [Boolean, String, undefined] as PropType<Booleanish>, default: undefined},
-  activeClass: {type: String, default: 'router-link-active'},
+  activeClass: {type: String, default: undefined},
   append: {type: [Boolean, String] as PropType<Booleanish>, default: false},
   disabled: {type: [Boolean, String] as PropType<Booleanish>, default: false},
   event: {type: [String, Array], default: 'click'},

packages/bootstrap-vue-next/src/components/BLink/link.spec.ts

@@ -139,7 +139,7 @@ describe('link', () => {
     })
 
     expect(wrapper.element.tagName).toBe('A')
-    expect(wrapper.classes()).toContain('router-link-active')
+    expect(wrapper.classes()).toContain('active')
     expect(wrapper.classes().length).toBe(1)
   })
 

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

@@ -4,7 +4,7 @@
       class="nav-link"
       :class="linkClass"
       v-bind="{...computedLinkProps, ...linkAttrs}"
-      :active-class="activeClass ?? 'active'"
+      :active-class="activeClass"
       :tabindex="disabledBoolean ? -1 : undefined"
       :aria-disabled="disabledBoolean ? true : undefined"
       @click="emit('click', $event)"
@@ -37,7 +37,7 @@ const props = withDefaults(
     linkClass: undefined,
     // Link props
     active: undefined,
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     linkAttrs: undefined,
     disabled: false,

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

@@ -25,7 +25,7 @@ const props = withDefaults(
     tag: 'div',
     // Link props
     active: undefined,
-    activeClass: 'router-link-active',
+    activeClass: undefined,
     append: false,
     disabled: false,
     href: undefined,