fix(BTransition): allowTransProps to work

fix: transProps working in BTransition cascades fixes for components that rely on it, ex: Overlay noFade

perf(BTransition): replace ref with cached computed properties

refactor(BTransition): use script setup syntax and templates

test: transition.spec.ts not done

Author: VividLemon

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

@@ -1,65 +1,65 @@
-<script lang="ts">
+<template>
+  <Transition v-bind="computedAttrs">
+    <slot />
+  </Transition>
+</template>
+
+<script setup lang="ts">
 import type {Booleanish, TransitionMode} from '../../types'
 import {isPlainObject} from '../../utils'
-import {defineComponent, h, PropType, ref, toRef, Transition} from 'vue'
+import {computed, toRef} from 'vue'
 import {useBooleanish} from '../../composables'
 
-const NO_FADE_PROPS = {
-  name: '',
-  enterActiveClass: '',
-  enterToClass: '',
-  leaveActiveClass: '',
-  leaveToClass: 'showing',
-  enterFromClass: 'showing',
-  leaveFromClass: '',
-}
-
-const FADE_PROPS = {
-  ...NO_FADE_PROPS,
-  enterActiveClass: 'fade showing',
-  leaveActiveClass: 'fade showing',
+interface Props {
+  appear?: Booleanish
+  mode?: TransitionMode
+  noFade?: Booleanish
+  transProps?: Record<string, unknown>
 }
 
-export default defineComponent({
-  props: {
-    appear: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    mode: {type: String as PropType<TransitionMode>, required: false},
-    noFade: {type: [Boolean, String] as PropType<Booleanish>, default: false},
-    transProps: {type: Object, required: false},
-  },
-  setup(props, {slots}) {
-    const appearBoolean = useBooleanish(toRef(props, 'appear'))
-    const noFadeBoolean = useBooleanish(toRef(props, 'noFade'))
+const props = withDefaults(defineProps<Props>(), {
+  appear: false,
+  noFade: false,
+})
 
-    const transProperties = ref(props.transProps)
-    if (!isPlainObject(transProperties.value)) {
-      transProperties.value = noFadeBoolean.value ? NO_FADE_PROPS : FADE_PROPS
-      if (appearBoolean.value) {
-        // Default the appear classes to equal the enter classes
-        transProperties.value = {
-          ...transProperties.value,
-          appear: true,
-          appearClass: transProperties.value.enterClass,
-          appearActiveClass: transProperties.value.enterActiveClass,
-          appearToClass: transProperties.value.enterToClass,
-        }
-      }
-    }
-    transProperties.value = {
-      mode: props.mode,
-      ...transProperties.value,
-      // We always need `css` true
-      css: true,
-    }
+const appearBoolean = useBooleanish(toRef(props, 'appear'))
+const noFadeBoolean = useBooleanish(toRef(props, 'noFade'))
 
-    return () =>
-      h(
-        Transition,
-        {...transProperties.value},
-        {
-          default: () => (slots.default ? slots.default() : []),
-        }
-      )
-  },
+const fadeProperties = computed(() => {
+  const NO_FADE_PROPS = {
+    name: '',
+    enterActiveClass: '',
+    enterToClass: '',
+    leaveActiveClass: '',
+    leaveToClass: 'showing',
+    enterFromClass: 'showing',
+    leaveFromClass: '',
+  }
+  const FADE_PROPS = {
+    ...NO_FADE_PROPS,
+    enterActiveClass: 'fade showing',
+    leaveActiveClass: 'fade showing',
+  }
+  return noFadeBoolean.value ? NO_FADE_PROPS : FADE_PROPS
 })
+
+const baseProperties = computed(() => ({mode: props.mode, css: true, ...fadeProperties.value}))
+
+const computedAttrs = computed(() =>
+  isPlainObject(props.transProps)
+    ? {
+        // Order matters here since the props.transProps would get overwritten if it came first
+        // But the goal of props.transProps is to overwrite base properties
+        ...baseProperties.value,
+        ...props.transProps,
+      }
+    : appearBoolean.value
+    ? {
+        ...baseProperties.value,
+        appear: true,
+        appearActiveClass: fadeProperties.value.enterActiveClass,
+        appearToClass: fadeProperties.value.enterToClass,
+      }
+    : baseProperties.value
+)
 </script>

packages/bootstrap-vue-3/src/components/BTransition/transition.spec.ts

@@ -1,7 +1,7 @@
 import {enableAutoUnmount, mount} from '@vue/test-utils'
 import {afterEach, describe, expect, it} from 'vitest'
 import BTransition from './BTransition.vue'
-import {Transition} from 'vue'
+import {Component, Transition} from 'vue'
 
 describe('transition', () => {
   enableAutoUnmount(afterEach)
@@ -23,4 +23,48 @@ describe('transition', () => {
     const $transition = wrapper.findComponent(Transition)
     expect($transition.exists()).toBe(true)
   })
+
+  it('Transition has prop css true when prop transProps', () => {
+    const wrapper = mount(BTransition, {
+      props: {transProps: {enterActiveClass: 'foo'}},
+    })
+    const $transition = wrapper.getComponent(Transition as Component)
+    expect($transition.props('css')).toBe(true)
+  })
+
+  it('Transition has mode undefined by default when prop transProps', () => {
+    const wrapper = mount(BTransition, {
+      props: {transProps: {enterActiveClass: 'foo'}},
+    })
+    const $transition = wrapper.getComponent(Transition as Component)
+    expect($transition.props('mode')).toBeUndefined()
+  })
+
+  it('Transition has mode to be prop mode when prop transProps', () => {
+    const wrapper = mount(BTransition, {
+      props: {transProps: {enterActiveClass: 'foo', mode: 'in-out'}},
+    })
+    const $transition = wrapper.getComponent(Transition as Component)
+    expect($transition.props('mode')).toBe('in-out')
+  })
+
+  it('Transition has props from transProps', () => {
+    const wrapper = mount(BTransition, {
+      props: {transProps: {enterActiveClass: 'foo'}},
+    })
+    const $transition = wrapper.getComponent(Transition as Component)
+    expect($transition.props('enterActiveClass')).toBe('foo')
+  })
+
+  // Test for when appear is true but trans props is also true
+
+  // Test for when appear is false but trans props is also true
+
+  // Test for when appear is true
+
+  // Test for when appear is false
+
+  // Test for when appear is true but fade is also true
+
+  // Test for when appear is true but fade is false
 })