silva
/
adrema-form
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add checkboxes

This commit is contained in:
philipp lang 2023-12-26 00:59:18 +01:00
parent af277e34ad
commit 8cd6af3221
4 changed files with 94 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -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}
]},

4
src/Eventform.ce.vue
View File

@ -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];
}

43
src/components/fields/Checkbox.vue Normal file
View File

@ -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>

44
src/components/fields/Checkboxes.vue Normal file
View File

@ -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>