fix(#613): separate computed breaks reactivity

The separated functions are a temporary solution. I may be able to incorporate generics to merge the functionality, but separate the differences

Author: VividLemon

packages/bootstrap-vue-3/src/components/BForm/BFormInvalidFeedback.vue

@@ -8,7 +8,7 @@
 // import type {BFormInvalidFeedbackProps} from '../../types/components'
 import {computed, toRef} from 'vue'
 import type {Booleanish} from '../../types'
-import {useBooleanish} from '../../composables'
+import {useBooleanish, useBooleanishUndefined} from '../../composables'
 
 interface BFormInvalidFeedbackProps {
   ariaLive?: string
@@ -28,8 +28,7 @@ const props = withDefaults(defineProps<BFormInvalidFeedbackProps>(), {
 })
 
 const forceShowBoolean = useBooleanish(toRef(props, 'forceShow'))
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 const tooltipBoolean = useBooleanish(toRef(props, 'tooltip'))
 
 const computedShow = computed<boolean>(

packages/bootstrap-vue-3/src/components/BForm/BFormValidFeedback.vue

@@ -8,7 +8,7 @@
 // import type {BFormValidFeedbackProps} from '../../types/components'
 import {computed, toRef} from 'vue'
 import type {Booleanish} from '../../types'
-import {useBooleanish} from '../../composables'
+import {useBooleanish, useBooleanishUndefined} from '../../composables'
 
 interface BFormValidFeedbackProps {
   ariaLive?: string
@@ -28,8 +28,7 @@ const props = withDefaults(defineProps<BFormValidFeedbackProps>(), {
 })
 
 const forceShowBoolean = useBooleanish(toRef(props, 'forceShow'))
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 const tooltipBoolean = useBooleanish(toRef(props, 'tooltip'))
 
 const computedShow = computed<boolean>(

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

@@ -32,7 +32,14 @@
 <script setup lang="ts">
 // import type {BFormCheckboxEmits, BFormCheckboxProps} from '../../types/components'
 import {computed, onMounted, reactive, Ref, ref, toRef} from 'vue'
-import {getClasses, getInputClasses, getLabelClasses, useBooleanish, useId} from '../../composables'
+import {
+  getClasses,
+  getInputClasses,
+  getLabelClasses,
+  useBooleanish,
+  useBooleanishUndefined,
+  useId,
+} from '../../composables'
 import type {Booleanish, ButtonVariant, InputSize} from '../../types'
 
 interface BFormCheckboxProps {
@@ -80,20 +87,15 @@ const props = withDefaults(defineProps<BFormCheckboxProps>(), {
   value: true,
 })
 
-const indeterminateBoolean =
-  props.indeterminate !== undefined
-    ? useBooleanish(toRef(props, 'indeterminate') as Ref<Booleanish>)
-    : computed(() => undefined)
+const indeterminateBoolean = useBooleanishUndefined(toRef(props, 'indeterminate'))
 const autofocusBoolean = useBooleanish(toRef(props, 'autofocus'))
 const plainBoolean = useBooleanish(toRef(props, 'plain'))
 const buttonBoolean = useBooleanish(toRef(props, 'button'))
 const switchBoolean = useBooleanish(toRef(props, 'switch'))
 const disabledBoolean = useBooleanish(toRef(props, 'disabled'))
 const inlineBoolean = useBooleanish(toRef(props, 'inline'))
-const requiredBoolean =
-  props.required !== undefined ? useBooleanish(toRef(props, 'required')) : computed(() => undefined)
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const requiredBoolean = useBooleanishUndefined(toRef(props, 'required'))
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 
 interface BFormCheckboxEmits {
   (e: 'update:modelValue', value: unknown): void

packages/bootstrap-vue-3/src/components/BFormCheckbox/BFormCheckboxGroup.vue

@@ -32,6 +32,7 @@ import {
   optionToElement,
   slotsToElements,
   useBooleanish,
+  useBooleanishUndefined,
   useId,
 } from '../../composables'
 
@@ -89,8 +90,7 @@ const disabledBoolean = useBooleanish(toRef(props, 'disabled'))
 const plainBoolean = useBooleanish(toRef(props, 'plain'))
 const requiredBoolean = useBooleanish(toRef(props, 'required'))
 const stackedBoolean = useBooleanish(toRef(props, 'stacked'))
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 const switchesBoolean = useBooleanish(toRef(props, 'switches'))
 const validatedBoolean = useBooleanish(toRef(props, 'validated'))
 

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

@@ -31,7 +31,14 @@
 <script setup lang="ts">
 // import type {BFormRadioEmits, BFormRadioProps} from '../../types/components'
 import type {Booleanish, ButtonVariant, InputSize} from '../../types'
-import {getClasses, getInputClasses, getLabelClasses, useBooleanish, useId} from '../../composables'
+import {
+  getClasses,
+  getInputClasses,
+  getLabelClasses,
+  useBooleanish,
+  useBooleanishUndefined,
+  useId,
+} from '../../composables'
 import {computed, onMounted, reactive, ref, toRef} from 'vue'
 
 interface BFormRadioProps {
@@ -83,8 +90,7 @@ const inlineBoolean = useBooleanish(toRef(props, 'inline'))
 const requiredBoolean = useBooleanish(toRef(props, 'required'))
 // TODO state is unused
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 
 interface BFormRadioEmits {
   (e: 'input', value: boolean | string | Array<unknown> | Record<string, unknown> | number): void

packages/bootstrap-vue-3/src/components/BFormRadio/BFormRadioGroup.vue

@@ -29,6 +29,7 @@ import {
   optionToElement,
   slotsToElements,
   useBooleanish,
+  useBooleanishUndefined,
   useId,
 } from '../../composables'
 
@@ -92,8 +93,7 @@ const requiredBoolean = useBooleanish(toRef(props, 'required'))
 const stackedBoolean = useBooleanish(toRef(props, 'stacked'))
 // TODO state is unused
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 // TODO validated is unused
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const validatedBoolean = useBooleanish(toRef(props, 'validated'))

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

@@ -44,7 +44,7 @@ import type {AriaInvalid, Booleanish, Size} from '../../types'
 import {computed, nextTick, onActivated, onMounted, ref, toRef} from 'vue'
 import BFormSelectOption from './BFormSelectOption.vue'
 import BFormSelectOptionGroup from './BFormSelectOptionGroup.vue'
-import {normalizeOptions, useBooleanish, useId} from '../../composables'
+import {normalizeOptions, useBooleanish, useBooleanishUndefined, useId} from '../../composables'
 
 interface BFormSelectProps {
   ariaInvalid?: AriaInvalid
@@ -93,8 +93,7 @@ const disabledBoolean = useBooleanish(toRef(props, 'disabled'))
 const multipleBoolean = useBooleanish(toRef(props, 'multiple'))
 const plainBoolean = useBooleanish(toRef(props, 'plain'))
 const requiredBoolean = useBooleanish(toRef(props, 'required'))
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 
 interface BFormSelectEmits {
   (e: 'input', value: unknown): void

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

@@ -108,7 +108,7 @@
 // import type {BFormTagsEmits, BFormTagsProps} from '../types/components'
 import {computed, onActivated, onMounted, ref, toRef, VNodeNormalizedChildren, watch} from 'vue'
 import BFormTag from './BFormTag.vue'
-import {useBooleanish, useId} from '../../composables'
+import {useBooleanish, useBooleanishUndefined, useId} from '../../composables'
 import type {Booleanish, ButtonVariant, ColorVariant, InputSize, InputType} from '../../types'
 
 interface BFormTagsProps {
@@ -177,8 +177,7 @@ const noOuterFocusBoolean = useBooleanish(toRef(props, 'noOuterFocus'))
 const noTagRemoveBoolean = useBooleanish(toRef(props, 'noTagRemove'))
 const removeOnDeleteBoolean = useBooleanish(toRef(props, 'removeOnDelete'))
 const requiredBoolean = useBooleanish(toRef(props, 'required'))
-const stateBoolean =
-  props.state !== undefined ? useBooleanish(toRef(props, 'state')) : computed(() => undefined)
+const stateBoolean = useBooleanishUndefined(toRef(props, 'state'))
 const tagPillsBoolean = useBooleanish(toRef(props, 'tagPills'))
 
 interface BFormTagsEmits {

packages/bootstrap-vue-3/src/composables/index.ts

@@ -13,11 +13,12 @@ import {
 } from './useFormCheck'
 import useFormInput, {COMMON_INPUT_PROPS} from './useFormInput'
 import {normalizeOptions} from './useFormSelect'
-import useBooleanish from './useBooleanish'
+import {useBooleanish, useBooleanishUndefined} from './useBooleanish'
 import useId from './useId'
 
 export {
   useAlignment,
+  useBooleanishUndefined,
   createBreadcrumb,
   useBreadcrumb,
   useEventListener,
@@ -44,6 +45,7 @@ export default {
   useEventListener,
   bindGroupProps,
   getClasses,
+  useBooleanishUndefined,
   getGroupAttr,
   getGroupClasses,
   getInputClasses,

packages/bootstrap-vue-3/src/composables/useBooleanish.ts

@@ -2,5 +2,10 @@ import type {Booleanish} from '../types'
 import {computed, ComputedRef, Ref} from 'vue'
 import {resolveBooleanish} from '../utils'
 
-export default (el: Ref<Booleanish>): ComputedRef<boolean> =>
+export const useBooleanish = (el: Ref<Booleanish>): ComputedRef<boolean> =>
   computed(() => resolveBooleanish(el.value))
+
+export const useBooleanishUndefined = (
+  el: Ref<Booleanish | undefined>
+): ComputedRef<boolean | undefined> =>
+  computed(() => (el.value !== undefined ? resolveBooleanish(el.value) : undefined))