fix(BFormCheckbox): can use primitives and arrays. fixes bootstrap-vue-next#1382

Author: xvaara

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

@@ -92,7 +92,7 @@ const props = withDefaults(
     inline: false,
     size: undefined,
     value: true,
-    uncheckedValue: false,
+    uncheckedValue: undefined,
   }
 )
 
@@ -146,27 +146,46 @@ const localValue = computed({
       ? parentData.modelValue.value
           .map((el) => JSON.stringify(el))
           .includes(JSON.stringify(props.value))
+      : Array.isArray(modelValue.value)
+      ? modelValue.value?.map((el) => JSON.stringify(el)).includes(JSON.stringify(props.value))
       : JSON.stringify(modelValue.value) === JSON.stringify(props.value),
   set: (newValue) => {
-    const updateValue = newValue ? props.value : props.uncheckedValue
-
+    const updateValue = newValue
+      ? props.value
+      : props.uncheckedValue === undefined
+      ? false
+      : props.uncheckedValue
     emit('input', updateValue)
-    modelValue.value = updateValue
+
+    if (parentData === null && Array.isArray(modelValue.value)) {
+      if (newValue) {
+        modelValue.value.push(props.value)
+        if (props.uncheckedValue !== undefined)
+          modelValue.value = modelValue.value.filter(
+            (x) => JSON.stringify(x) !== JSON.stringify(props.uncheckedValue)
+          )
+      } else {
+        if (props.uncheckedValue !== undefined) modelValue.value.push(props.uncheckedValue)
+        modelValue.value = modelValue.value.filter(
+          (x) => JSON.stringify(x) !== JSON.stringify(props.value)
+        )
+      }
+    } else {
+      modelValue.value = updateValue
+      if (parentData !== null) {
+        if (updateValue === false) {
+          parentData.remove(props.value)
+        } else {
+          parentData.set(props.value)
+        }
+      }
+    }
     nextTick(() => {
       emit('change', updateValue)
     })
   },
 })
 
-watch(modelValue, (newValue) => {
-  if (parentData === null) return
-  if (newValue === false) {
-    parentData.remove(props.value)
-    return
-  }
-  parentData.set(props.value)
-})
-
 const computedRequired = computed(
   () =>
     !!(props.name ?? parentData?.name.value) &&

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

@@ -150,7 +150,9 @@ provide(checkboxGroupKey, {
   set: (
     value: unknown[] | Set<unknown> | boolean | string | Record<string, unknown> | number | null
   ) => {
-    const localValue = [...modelValue.value]
+    let localValue = [...modelValue.value]
+    // clean up the value so we don't end up with duplicates
+    localValue = localValue.filter((x) => JSON.stringify(x) !== JSON.stringify(value))
     localValue.push(value)
 
     emit('input', localValue)
@@ -162,9 +164,9 @@ provide(checkboxGroupKey, {
   remove: (
     value: unknown[] | Set<unknown> | boolean | string | Record<string, unknown> | number | null
   ) => {
-    const localValue = [...modelValue.value]
-    // TODO if the value is an array, set, or object, indexOf may not work correctly
-    localValue.splice(modelValue.value.indexOf(value), 1)
+    let localValue = [...modelValue.value]
+    // TODO if the value is an array, set, or object, filter may not work correctly
+    localValue = localValue.filter((x) => JSON.stringify(x) !== JSON.stringify(value))
 
     emit('input', localValue)
     modelValue.value = localValue