feat(FieldChecklist): new field

Author: kevinkosterr

__tests__/components/fields/FieldChecklist.spec.js

@@ -0,0 +1,124 @@
+import { mountFormGenerator, generatePropsSingleField, generateSchemaSingleField } from '@test/_resources/utils.js'
+import { it, describe, expect, beforeAll } from 'vitest'
+import { config, mount } from '@vue/test-utils'
+
+import FieldChecklist from '@/fields/core/FieldChecklist.vue'
+
+const form = generateSchemaSingleField(
+  'checklistTest',
+  'checklistModel',
+  'checklist',
+  null,
+  'Test label',
+  [],
+  {
+    options: [
+      { name: 'Test 1', value: 'test1' },
+      { name: 'Test 2', value: 'test2' },
+      { name: 'Test 3', value: 'test3' },
+      { name: 'Test 4', value: 'test4' }
+    ]
+  }
+)
+
+const props = generatePropsSingleField(form)
+
+beforeAll(() => {
+  config.global.components = { FieldChecklist }
+})
+
+describe('FieldChecklist', () => {
+
+  it('Should render correctly', () => {
+    const wrapper = mount(FieldChecklist, { props })
+    const checkBoxes = wrapper.findAll('input[type=checkbox]')
+    expect(checkBoxes.length).toBe(4)
+
+    const labels = wrapper.findAll('label')
+    expect(labels.length).toBe(4)
+
+    // Ensure each label has the checkbox that belongs to them
+    labels.forEach((label, idx) => {
+      expect(label.text()).toBe('Test ' + (idx + 1))
+      const checkbox = label.find('input[type=checkbox]')
+      expect(checkbox.attributes().value).toBe('test' + (idx + 1))
+    })
+
+  })
+
+  it('Should render correctly inside form generator', () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    // The first label should be the label that's specified inside the field's schema.
+    expect(formWrapper.find('label').text()).toContain('Test label')
+
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const labels = checklistField.findAll('label')
+    expect(labels.length).toBe(4)
+  })
+
+  it('Should emit onInput event', () => {
+    const wrapper = mount(FieldChecklist, { props })
+    wrapper.find('input[type=checkbox]').trigger('change')
+    expect(wrapper.emitted()).toHaveProperty('onInput')
+  })
+
+  it('Should update model value', async () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const triggerChange = (value) => formWrapper.find(`input[type=checkbox][value=${value}]`).trigger('change')
+
+    triggerChange('test2')
+    expect(formWrapper.vm.model.checklistModel).toContain('test2')
+    triggerChange('test3')
+    expect(formWrapper.vm.model.checklistModel).toContain('test3')
+
+    // Value should be removed, since it is already present in the model
+    triggerChange('test2')
+    expect(formWrapper.vm.model.checklistModel).not.toContain('test2')
+  })
+
+  it('Should update checked state properly', async () => {
+    const formWrapper = mountFormGenerator(form.schema, form.model)
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+
+    const test1Checkbox = () => formWrapper.find('input[type=checkbox][value=test1]')
+    const test4Checkbox = () => formWrapper.find('input[type=checkbox][value=test4')
+
+    // Value shouldn't be checked by default.
+    expect(test1Checkbox().attributes()).not.toHaveProperty('checked')
+    test1Checkbox().trigger('change')
+    await checklistField.vm.$nextTick()
+    expect(checklistField.find('input[type=checkbox][value=test1]').attributes()).toHaveProperty('checked')
+
+    // Value shouldn't be checked by default.
+    expect(test4Checkbox().attributes()).not.toHaveProperty('checked')
+    test4Checkbox().trigger('change')
+    await checklistField.vm.$nextTick()
+    expect(checklistField.find('input[type=checkbox][value=test4]').attributes()).toHaveProperty('checked')
+  })
+
+  it('Should render values present by default, as checked', async () => {
+    const model = { checklistModel: [ 'test2', 'test4' ] }
+    const formWrapper = mountFormGenerator(form.schema, model)
+
+    // Values should be set inside the model of the form generator
+    expect(formWrapper.vm.model.checklistModel).toContain('test2')
+    expect(formWrapper.vm.model.checklistModel).toContain('test4')
+    expect(formWrapper.vm.model.checklistModel).toHaveLength(2)
+
+    const checklistField = formWrapper.findComponent(FieldChecklist)
+    expect(checklistField.exists()).toBe(true)
+    // These values should now be checked, since they are in the model by default
+    expect(checklistField.find('input[type=checkbox][value=test2').attributes()).toHaveProperty('checked')
+    expect(checklistField.find('input[type=checkbox][value=test4').attributes()).toHaveProperty('checked')
+    // These shouldn't be checked, since they are not in the default values
+    expect(checklistField.find('input[type=checkbox][value=test1').attributes()).not.toHaveProperty('checked')
+    expect(checklistField.find('input[type=checkbox][value=test3').attributes()).not.toHaveProperty('checked')
+  })
+
+})

src/fields/core/FieldChecklist.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="field-checklist">
+    <div
+      v-for="checklistItem in field.options"
+      :key="checklistItem.value"
+      class="form-checklist"
+    >
+      <label class="form-check-label">
+        <input
+          type="checkbox"
+          class="form-check-input"
+          :value="checklistItem.value"
+          :checked="currentModelValue.includes(checklistItem.value)"
+          @change="onFieldValueChanged"
+        >
+        {{ checklistItem.name }}
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is heavily inspired by https://github.com/shwld/vfg-field-checkboxlist/
+import {
+  useFieldProps,
+  useFieldEmits,
+  useFieldValidate,
+  useFormModel, useFieldAttributes
+} from '@/composables'
+import { toRefs } from 'vue'
+
+const emits = defineEmits(useFieldEmits())
+const props = defineProps(useFieldProps())
+
+const { field, model } = toRefs(props)
+const { hint } = useFieldAttributes(model.value, field.value)
+const { currentModelValue } = useFormModel(model.value, field.value)
+const { validate, errors } = useFieldValidate(model.value, field.value)
+
+const onFieldValueChanged = ({ target }) => {
+  errors.value = []
+  let newValue
+  const valueAlreadyChecked = currentModelValue.value.includes(target.value)
+
+  if (valueAlreadyChecked) {
+    // If the value was previously already checked, make sure it is removed from the current list of values.
+    newValue = currentModelValue.value.filter(v => v !== target.value)
+  } else {
+    newValue = [ ...currentModelValue.value, target.value ]
+  }
+
+  emits('onInput', newValue)
+
+  // Validate the current array of values whenever a value is (un)checked.
+  validate(newValue).then((validationErrors) => {
+    emits('validated',
+      validationErrors.length === 0, // Is the current value for this field valid?
+      validationErrors, // Actual errors
+      field.value // Field schema/object
+    )
+  })
+}
+
+defineExpose({ hint })
+</script>

src/fields/index.ts

@@ -11,6 +11,8 @@ import FieldNumber from '@/fields/core/FieldNumber.vue'
 import FieldSwitch from '@/fields/core/FieldSwitch.vue'
 import FieldTextarea from '@/fields/core/FieldTextarea.vue'
 import FieldMask from '@/fields/core/FieldMask.vue'
+import FieldChecklist from '@/fields/core/FieldChecklist.vue'
+import FieldCheckbox from '@/fields/core/FieldCheckbox.vue'
 
 import FieldSubmit from '@/fields/core/FieldSubmit.vue'
 import FieldReset from '@/fields/core/FieldReset.vue'
@@ -19,8 +21,8 @@ import FieldButton from '@/fields/core/FieldButton.vue'
 
 const fieldComponents = {
   FieldColor, FieldText, FieldCheckBox, FieldPassword, FieldSelect, FieldSelectNative, FieldRadio,
-  FieldNumber, FieldSubmit, FieldReset, FieldButton, FieldSwitch, FieldTextarea, FieldMask
-]
+  FieldNumber, FieldSubmit, FieldReset, FieldButton, FieldSwitch, FieldTextarea, FieldMask, FieldChecklist,
+  FieldCheckbox
 } as const
 
 type FieldComponentNames = keyof typeof fieldComponents