Merge pull request #735 from VividLemon/master

fix(BTransition): allowTransProps to work

Author: VividLemon

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

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import {computed, StyleValue} from 'vue'
-import {ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
+import type {ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
 
 interface Props {
   tag?: string

packages/bootstrap-vue-3/src/components/BPlaceholder/BPlaceholderCard.vue

@@ -32,7 +32,7 @@ import BCard from '../BCard/BCard.vue'
 import BCardImg from '../BCard/BCardImg.vue'
 import BPlaceholder from './BPlaceholder.vue'
 import BPlaceholderButton from './BPlaceholderButton.vue'
-import {Booleanish, ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
+import type {Booleanish, ColorVariant, PlaceholderAnimation, PlaceholderSize} from '../../types'
 import {computed, toRef} from 'vue'
 import {useBooleanish} from '../../composables'
 

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

@@ -1,65 +1,64 @@
-<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(() =>
+  props.transProps !== undefined
+    ? {
+        // 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
 })

packages/bootstrap-vue-3/src/utils/cssEscape.ts

@@ -5,16 +5,16 @@ const escapeChar = (value: string) => `\\${value}`
 /**
  * The `cssEscape()` util is based on this `CSS.escape()` polyfill: https://github.com/mathiasbynens/CSS.escape
  *
- * @param {any} value
+ * @param {unknown} value
  */
-export default (value: any): string => {
-  value = toString(value)
+export default (value: unknown): string => {
+  const val = toString(value)
 
-  const {length} = value
-  const firstCharCode = value.charCodeAt(0)
+  const {length} = val
+  const firstCharCode = val.charCodeAt(0)
 
-  return value.split('').reduce((result: string, char: string, index: number) => {
-    const charCode = value.charCodeAt(index)
+  return val.split('').reduce((result: string, char: string, index: number) => {
+    const charCode = val.charCodeAt(index)
 
     // If the character is NULL (U+0000), use (U+FFFD) as replacement
     if (charCode === 0x0000) {

packages/bootstrap-vue-3/src/utils/inspect.ts

@@ -2,7 +2,8 @@
  * @param obj
  * @returns
  */
-export const isObject = (obj: unknown): boolean => obj !== null && typeof obj === 'object'
+export const isObject = (obj: unknown): obj is Record<PropertyKey, unknown> =>
+  obj !== null && typeof obj === 'object'
 
 /**
  * @param value
@@ -16,5 +17,5 @@ export const isNumeric = (value: unknown): boolean => /^[0-9]*\.?[0-9]+$/.test(S
  * @param obj
  * @returns
  */
-export const isPlainObject = (obj: unknown): boolean =>
+export const isPlainObject = (obj: unknown): obj is Record<PropertyKey, unknown> =>
   Object.prototype.toString.call(obj) === '[object Object]'

packages/bootstrap-vue-3/src/utils/props.ts

@@ -1,7 +1,7 @@
 // Suffix can be a falsey value so nothing is appended to string
 // (helps when looping over props & some shouldn't change)
 
-import {upperFirst} from '.'
+import {upperFirst} from './stringUtils'
 
 /**
  * Use data last parameters to allow for currying

packages/bootstrap-vue-3/src/utils/stringUtils.ts

@@ -18,9 +18,7 @@ export const toString = (val: unknown, spaces = 2): string =>
     ? val
     : val === undefined || val === null
     ? ''
-    : Array.isArray(val) ||
-      (isPlainObject(val) &&
-        (val as Record<string, unknown>).toString === Object.prototype.toString)
+    : Array.isArray(val) || (isPlainObject(val) && val.toString === Object.prototype.toString)
     ? JSON.stringify(val, null, spaces)
     : String(val)