refactor: WIP script setup BLinkProps items

chore: update package

refactor: standardize the flow of interface emits and props

Author: VividLemon

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

@@ -18,14 +18,18 @@ interface BAccordionProps {
   modelValue?: string
 }
 
+interface BAccordionEmits {
+  (e: 'update:modelValue', value: string): void
+}
+
 const props = withDefaults(defineProps<BAccordionProps>(), {
   flush: false,
   free: false,
   id: undefined,
   modelValue: undefined,
 })
 
-const emit = defineEmits<(e: 'update:modelValue', value: string) => void>()
+const emit = defineEmits<BAccordionEmits>()
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -58,6 +58,16 @@ interface BAccordionItemProps {
   isNav?: Booleanish
 }
 
+interface BAccordionItemEmits {
+  (e: 'show', value: BvTriggerableEvent): void
+  (e: 'shown', value: BvTriggerableEvent): void
+  (e: 'hide', value: BvTriggerableEvent): void
+  (e: 'hidden', value: BvTriggerableEvent): void
+  (e: 'hide-prevented'): void
+  (e: 'show-prevented'): void
+  (e: 'update:modelValue', value: boolean): void
+}
+
 const props = withDefaults(defineProps<BAccordionItemProps>(), {
   headerTag: 'h2',
   id: undefined,
@@ -70,16 +80,6 @@ const props = withDefaults(defineProps<BAccordionItemProps>(), {
   visible: false,
 })
 
-interface BAccordionItemEmits {
-  (e: 'show', value: BvTriggerableEvent): void
-  (e: 'shown', value: BvTriggerableEvent): void
-  (e: 'hide', value: BvTriggerableEvent): void
-  (e: 'hidden', value: BvTriggerableEvent): void
-  (e: 'hide-prevented'): void
-  (e: 'show-prevented'): void
-  (e: 'update:modelValue', value: boolean): void
-}
-
 const emit = defineEmits<BAccordionItemEmits>()
 
 defineSlots<{

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

@@ -53,6 +53,12 @@ interface BAlertProps {
   showOnPause?: Booleanish
 }
 
+interface BAlertEmits {
+  (e: 'closed'): void
+  (e: 'close-countdown', value: number): void
+  (e: 'update:modelValue', value: boolean | number): void
+}
+
 const props = withDefaults(defineProps<BAlertProps>(), {
   closeContent: undefined,
   closeVariant: 'secondary',
@@ -67,12 +73,6 @@ const props = withDefaults(defineProps<BAlertProps>(), {
   showOnPause: true,
 })
 
-interface BAlertEmits {
-  (e: 'closed'): void
-  (e: 'close-countdown', value: number): void
-  (e: 'update:modelValue', value: boolean | number): void
-}
-
 const emit = defineEmits<BAlertEmits>()
 
 defineSlots<{

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

@@ -50,6 +50,11 @@ interface BAvatarProps {
   variant?: ColorVariant | null
 }
 
+interface BAvatarEmits {
+  (e: 'click', value: MouseEvent): void
+  (e: 'img-error', value: Event): void
+}
+
 const props = withDefaults(defineProps<BAvatarProps>(), {
   ariaLabel: undefined,
   badgeOffset: undefined,
@@ -71,11 +76,6 @@ const props = withDefaults(defineProps<BAvatarProps>(), {
   variant: 'secondary',
 })
 
-interface BAvatarEmits {
-  (e: 'click', value: MouseEvent): void
-  (e: 'img-error', value: Event): void
-}
-
 const emit = defineEmits<BAvatarEmits>()
 
 defineSlots<{

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

@@ -4,62 +4,84 @@
   </component>
 </template>
 
-<script lang="ts">
-import {isLink, omit, pluckProps} from '../../utils'
+<script setup lang="ts">
+import {isLink, pluckProps} from '../../utils'
 import {useBooleanish} from '../../composables'
-import {computed, defineComponent, type PropType, type SlotsType} from 'vue'
+import {computed} from 'vue'
 import type {Booleanish, ColorVariant} from '../../types'
-import BLink, {BLINK_PROPS} from '../BLink/BLink.vue'
+import BLink, {type BLinkProps} from '../BLink/BLink.vue'
 
-const linkProps = omit(BLINK_PROPS, ['event', 'routerTag'] as const)
+defineSlots<{
+  default?: Record<string, never>
+}>()
 
-export default defineComponent({
-  slots: Object as SlotsType<{
-    default?: Record<string, never>
-  }>,
-  components: {BLink},
-  props: {
-    ...linkProps,
-    pill: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    tag: {type: String, default: 'span'},
-    textIndicator: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    dotIndicator: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    variant: {type: String as PropType<ColorVariant | null>, default: 'secondary'},
-  },
-  setup(props) {
-    const pillBoolean = useBooleanish(() => props.pill)
-    const textIndicatorBoolean = useBooleanish(() => props.textIndicator)
-    const dotIndicatorBoolean = useBooleanish(() => props.dotIndicator)
-    const activeBoolean = useBooleanish(() => props.active)
-    const disabledBoolean = useBooleanish(() => props.disabled)
+interface BBadgeProps {
+  pill?: Booleanish
+  tag?: string
+  textIndicator?: Booleanish
+  dotIndicator?: Booleanish
+  variant?: ColorVariant | null
+}
 
-    const computedLink = computed<boolean>(() => isLink(props))
+const props = withDefaults(defineProps<BBadgeProps & Omit<BLinkProps, 'event' | 'routerTag'>>(), {
+  pill: false,
+  tag: 'span',
+  textIndicator: false,
+  dotIndicator: false,
+  variant: 'secondary',
+  // Link props
+  active: undefined,
+  activeClass: 'router-link-active',
+  append: false,
+  disabled: 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,
+  // End link props
+})
 
-    const computedTag = computed<string | typeof BLink>(() =>
-      computedLink.value ? BLink : props.tag
-    )
+const pillBoolean = useBooleanish(() => props.pill)
+const textIndicatorBoolean = useBooleanish(() => props.textIndicator)
+const dotIndicatorBoolean = useBooleanish(() => props.dotIndicator)
+const activeBoolean = useBooleanish(() => props.active)
+const disabledBoolean = useBooleanish(() => props.disabled)
 
-    const computedClasses = computed(() => ({
-      [`bg-${props.variant}`]: props.variant !== null,
-      'active': activeBoolean.value,
-      'disabled': disabledBoolean.value,
-      'text-dark': props.variant !== null && ['warning', 'info', 'light'].includes(props.variant),
-      'rounded-pill': pillBoolean.value,
-      'position-absolute top-0 start-100 translate-middle':
-        textIndicatorBoolean.value || dotIndicatorBoolean.value,
-      'p-2 border border-light rounded-circle': dotIndicatorBoolean.value,
-      'text-decoration-none': computedLink.value,
-    }))
+const computedLink = computed<boolean>(() => isLink(props))
 
-    const computedLinkProps = computed(() =>
-      computedLink.value ? pluckProps(props, linkProps) : {}
-    )
+const computedTag = computed<string | typeof BLink>(() => (computedLink.value ? BLink : props.tag))
 
-    return {
-      computedClasses,
-      computedLinkProps,
-      computedTag,
-    }
-  },
-})
+const computedClasses = computed(() => ({
+  [`bg-${props.variant}`]: props.variant !== null,
+  'active': activeBoolean.value,
+  'disabled': disabledBoolean.value,
+  'text-dark': props.variant !== null && ['warning', 'info', 'light'].includes(props.variant),
+  'rounded-pill': pillBoolean.value,
+  'position-absolute top-0 start-100 translate-middle':
+    textIndicatorBoolean.value || dotIndicatorBoolean.value,
+  'p-2 border border-light rounded-circle': dotIndicatorBoolean.value,
+  'text-decoration-none': computedLink.value,
+}))
+
+const computedLinkProps = computed(() =>
+  computedLink.value
+    ? pluckProps(props, {
+        active: true,
+        activeClass: true,
+        append: true,
+        disabled: true,
+        href: true,
+        rel: true,
+        replace: true,
+        routerComponentName: true,
+        target: true,
+        to: true,
+        variant: true,
+      } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+    : {}
+)
 </script>

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

@@ -13,64 +13,90 @@
   </li>
 </template>
 
-<script lang="ts">
-import {omit, pluckProps} from '../../utils'
+<script setup lang="ts">
+import {pluckProps} from '../../utils'
 import {useBooleanish} from '../../composables'
-import {computed, defineComponent, type PropType, type SlotsType} from 'vue'
-import BLink, {BLINK_PROPS} from '../BLink/BLink.vue'
+import {computed} from 'vue'
+import BLink, {type BLinkProps} from '../BLink/BLink.vue'
 import type {Booleanish} from '../../types'
 
-const linkProps = omit(BLINK_PROPS, ['event', 'routerTag'] as const)
+defineSlots<{
+  default?: Record<string, never>
+}>()
 
-export default defineComponent({
-  slots: Object as SlotsType<{
-    default?: Record<string, never>
-  }>,
-  components: {BLink},
-  props: {
-    ...linkProps,
-    active: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    ariaCurrent: {type: String, default: 'location'},
-    disabled: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    text: {type: String, default: undefined},
-  },
-  emits: ['click'],
-  setup(props, {emit}) {
-    const activeBoolean = useBooleanish(() => props.active)
-    const disabledBoolean = useBooleanish(() => props.disabled)
+interface BBreadcrumbItemProps {
+  active?: Booleanish
+  ariaCurrent?: string
+  disabled?: Booleanish
+  text?: string
+}
 
-    const computedClasses = computed(() => ({
-      active: activeBoolean.value,
-    }))
+interface BBreadcrumbItemEmits {
+  (e: 'click', value: MouseEvent): void
+}
 
-    const computedTag = computed<'span' | typeof BLink>(() =>
-      activeBoolean.value ? 'span' : BLink
-    )
+const props = withDefaults(
+  defineProps<BBreadcrumbItemProps & Omit<BLinkProps, 'event' | 'routerTag'>>(),
+  {
+    active: false,
+    ariaCurrent: 'location',
+    text: undefined,
+    // Link props
+    activeClass: 'router-link-active',
+    append: false,
+    disabled: false,
+    event: 'click',
+    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',
+    routerTag: 'a',
+    target: '_self',
+    to: undefined,
+    variant: undefined,
+    // End link props
+  }
+)
 
-    const computedAriaCurrent = computed(() =>
-      activeBoolean.value ? props.ariaCurrent : undefined
-    )
+const emit = defineEmits<BBreadcrumbItemEmits>()
 
-    const computedLinkProps = computed(() =>
-      computedTag.value !== 'span' ? pluckProps(props, linkProps) : {}
-    )
+const activeBoolean = useBooleanish(() => props.active)
+const disabledBoolean = useBooleanish(() => props.disabled)
 
-    const clicked = (e: MouseEvent): void => {
-      if (disabledBoolean.value || activeBoolean.value) {
-        e.preventDefault()
-        e.stopImmediatePropagation()
-        return
-      }
-      if (!disabledBoolean.value) emit('click', e)
-    }
+const computedClasses = computed(() => ({
+  active: activeBoolean.value,
+}))
 
-    return {
-      computedLinkProps,
-      computedClasses,
-      computedTag,
-      computedAriaCurrent,
-      clicked,
-    }
-  },
-})
+const computedTag = computed<'span' | typeof BLink>(() => (activeBoolean.value ? 'span' : BLink))
+
+const computedAriaCurrent = computed(() => (activeBoolean.value ? props.ariaCurrent : undefined))
+
+const computedLinkProps = computed(() =>
+  computedTag.value !== 'span'
+    ? pluckProps(props, {
+        active: true,
+        activeClass: true,
+        append: true,
+        disabled: true,
+        href: true,
+        rel: true,
+        replace: true,
+        routerComponentName: true,
+        target: true,
+        to: true,
+        variant: true,
+      } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
+    : {}
+)
+
+const clicked = (e: MouseEvent): void => {
+  if (disabledBoolean.value || activeBoolean.value) {
+    e.preventDefault()
+    e.stopImmediatePropagation()
+    return
+  }
+  if (!disabledBoolean.value) emit('click', e)
+}
 </script>