Add checkboxes

index.html

@@ -11,7 +11,9 @@
             value='{"sections": [
             {"name": "Personal", "intro": "Jaöaöd", "fields": [
                 {"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
-                {"name": "Geschlecht", "type": "SelectField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
+                {"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
+                {"name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
+                {"name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
                 {"name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
                 {"name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
             ]},

src/Eventform.ce.vue

@@ -122,6 +122,8 @@ import useNav from './composables/useNav.js';
 import FieldText from './components/fields/Text.vue';
 import FieldTextarea from './components/fields/Textarea.vue';
 import FieldDropdown from './components/fields/Dropdown.vue';
+import FieldCheckboxes from './components/fields/Checkboxes.vue';
+import FieldCheckbox from './components/fields/Checkbox.vue';
 import FieldRadio from './components/fields/Radio.vue';
 import EditIcon from './components/icons/EditIcon.vue';
 import DeleteIcon from './components/icons/DeleteIcon.vue';
@@ -160,6 +162,8 @@ function resolveComponentName(field) {
         TextareaField: FieldTextarea,
         DropdownField: FieldDropdown,
         RadioField: FieldRadio,
+        CheckboxesField: FieldCheckboxes,
+        CheckboxField: FieldCheckbox,
     }[field.type];
 }
 

src/components/fields/Checkbox.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="relative">
+        <div class="grid grid-cols-1 gap-2 mt-3">
+            <label :for="field.key" class="block relative flex items-center">
+                <input :id="field.key" v-model="inner" type="checkbox" :name="field.key" class="peer absolute invisible" />
+                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
+                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
+                <span class="pl-8 text-gray-600" v-text="field.description"></span>
+            </label>
+        </div>
+
+        <field-label :name="field.name" :required="field.required" inline></field-label>
+    </div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => value === true || value === false,
+    },
+    field: {
+        required: true,
+        validator: (value) =>
+            hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'description']) &&
+            typeof value.required === 'boolean' &&
+            typeof value.key === 'string' &&
+            value.key.length > 0 &&
+            typeof value.name === 'string' &&
+            typeof value.description === 'string' &&
+            value.name.length > 0,
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>

src/components/fields/Checkboxes.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="relative">
+        <div class="grid grid-cols-1 gap-2 mt-3">
+            <label v-for="(option, index) in field.options" :key="index" :for="`${field.key}-${index}`" class="block relative flex items-center">
+                <input :id="`${field.key}-${index}`" v-model="inner" type="checkbox" :name="field.key" :value="option" class="peer absolute invisible" />
+                <span class="border-neutral-400 border-4 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 rounded block"></span>
+                <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
+                <span class="pl-8 text-gray-600" v-text="option"></span>
+            </label>
+        </div>
+
+        <field-label :name="field.name" :required="field.required" inline></field-label>
+    </div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+const props = defineProps({
+    modelValue: {
+        required: true,
+        validator: (value) => Array.isArray(value),
+    },
+    field: {
+        required: true,
+        validator: (value) =>
+            hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'options']) &&
+            typeof value.required === 'boolean' &&
+            typeof value.key === 'string' &&
+            value.key.length > 0 &&
+            typeof value.name === 'string' &&
+            value.name.length > 0 &&
+            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']) &&
+            typeof value.options === 'object',
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>