fix: display checkbox for boolean values

Author: cafadev

demo-element-plus/src/viewer/FCheckboxViewer.vue

@@ -20,12 +20,6 @@
 import { FCheckbox, useForm } from '@fancy-crud/vue'
 import { Bus, ResetFieldsByFormIdCommand } from '@fancy-crud/core'
 
-// const options = [
-//   'Option 1',
-//   'Option 2',
-//   'Option 3',
-// ]
-
 const options = [
   { label: 'Option 1', value: 'option-1' },
   { label: 'Option 2', value: 'option-2' },
@@ -37,15 +31,35 @@ const bus = new Bus()
 const form = useForm({
   id: 'checkbox-field',
   fields: {
+    terms: {
+      label: 'By clicking this checkbox, you agree to our terms and conditions',
+      type: 'checkbox',
+      inRow: true,
+      modelValue: false,
+    },
     checkbox: {
       label: 'Checkbox',
       type: 'checkbox',
+      inRow: true,
+      options: [true],
+    },
+    artists: {
+      label: 'Artists',
+      type: 'checkbox',
       multiple: true,
-      modelValue: [],
       optionLabel: 'label',
-      // optionValue: 'value',
+      optionValue: 'value',
       options,
-      inRow: true,
+      modelValue: ['option-1'],
+    },
+    artists2: {
+      label: 'Artists 2',
+      type: 'checkbox',
+      multiple: true,
+      optionLabel: 'name',
+      optionValue: 'id',
+      url: 'artists/',
+      modelValue: ['option-1'],
     },
   },
   settings: {

demo-quasar/src/viewer/FCheckboxViewer.vue

@@ -20,12 +20,6 @@
 import { FCheckbox, useForm } from '@fancy-crud/vue'
 import { Bus, ResetFieldsByFormIdCommand } from '@fancy-crud/core'
 
-// const options = [
-//   'Option 1',
-//   'Option 2',
-//   'Option 3',
-// ]
-
 const options = [
   { label: 'Option 1', value: 'option-1' },
   { label: 'Option 2', value: 'option-2' },
@@ -37,15 +31,35 @@ const bus = new Bus()
 const form = useForm({
   id: 'checkbox-field',
   fields: {
+    terms: {
+      label: 'By clicking this checkbox, you agree to our terms and conditions',
+      type: 'checkbox',
+      inRow: true,
+      modelValue: false,
+    },
     checkbox: {
       label: 'Checkbox',
       type: 'checkbox',
+      inRow: true,
+      options: [true],
+    },
+    artists: {
+      label: 'Artists',
+      type: 'checkbox',
       multiple: true,
-      modelValue: [],
       optionLabel: 'label',
       optionValue: 'value',
       options,
-      inRow: false,
+      modelValue: ['option-1'],
+    },
+    artists2: {
+      label: 'Artists 2',
+      type: 'checkbox',
+      multiple: true,
+      optionLabel: 'name',
+      optionValue: 'id',
+      url: 'artists/',
+      modelValue: ['option-1'],
     },
   },
   settings: {

packages/vue/src/forms/composables/fields/checkbox.ts

@@ -12,7 +12,15 @@ export function useCheckboxField<T = any>(props: DefaultProps & { field: Normali
 
   const { validate } = useRules(fields, ruleConfigStore.searchById(props.formId))
 
-  const { options } = useOptions(props)
+  const isABooleanCheckbox = (
+    !Array.isArray(props.field.options)
+    && !props.field.multiple
+    && !props.field.url
+    && !props.field.optionLabel
+    && !props.field.optionValue
+  )
+
+  const { options } = useOptions(props, isABooleanCheckbox)
   const { hintText, hasFieldErrors } = useHintText(props)
 
   const inRowDisplay = computed(() => {

packages/vue/src/forms/composables/fields/utils/options.ts

@@ -5,15 +5,26 @@ interface Props {
     options?: any[]
     optionValue?: string
     optionLabel?: string
+    label?: string
   }
 }
 
-export function useOptions(props: Props) {
+export function useOptions(props: Props, isABooleanCheckbox: boolean) {
   const options = computed(() => {
-    const options = props.field.options || []
+    let options = props.field.options || []
+    let defaultOptionValue = ''
+    let defaultOptionLabel = ''
 
-    const optionValue = props.field.optionValue || ''
-    const optionLabel = props.field.optionLabel || ''
+    if (isABooleanCheckbox) {
+      options = [
+        { label: props.field.label, value: true },
+      ]
+      defaultOptionLabel = 'label'
+      defaultOptionValue = 'value'
+    }
+
+    const optionValue = props.field.optionValue || defaultOptionValue
+    const optionLabel = props.field.optionLabel || defaultOptionLabel
 
     return options.reduce((previousValue: Options, currentValue: any): Options => {
       const value: unknown = currentValue[optionValue] || currentValue