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

Compare commits

base: silva:b0d3dd80fd625f140fd5b8b7d717aea1297ce9b2
Branches Tags
silva:master
silva:dev
..
compare: silva:57b4ce7c953746975b6e06aab972ed60c5b5eed5
Branches Tags
silva:master
silva:dev

No commits in common. "b0d3dd80fd625f140fd5b8b7d717aea1297ce9b2" and "57b4ce7c953746975b6e06aab972ed60c5b5eed5" have entirely different histories.
b0d3dd80fd ... 57b4ce7c95

7 changed files with 27 additions and 20 deletions
Show Stats Expand all files Collapse all files

16
index.html
View File

@ -8,9 +8,21 @@
<body style="padding: 50px"> <body style="padding: 50px">
<event-form <event-form
style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)" style="--primary: hsl(181, 75%, 26%); --secondary: hsl(181, 75%, 35%); --font: hsl(181, 84%, 78%); --circle: hsl(181, 86%, 16%)"
value='{"sections": [
{"name": "Personal", "intro": "Jaöaöd", "fields": [
{"key": "vorname", "name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": "", "required": true},
{"key": "essen", "name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 2, "desktop": 3}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
{"key": "datenschutz", "name": "Datenschutz", "description": "Ich akzeptire das abfghg", "type": "CheckboxField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": false, "required": true},
{"key": "geschlecht", "name": "Geschlecht", "type": "DropdownField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"key": "essg", "name": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
{"key": "nachn", "name": "Nachname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true}
]},
{"name": "Veranstaltung", "intro": "Jaöaöd", "fields": [
]},
{"name": "Abschicken", "intro": "Jaöaöd", "fields": [
]}
]}'
fields='[{"id":"TextField","name":"Text","default":{"name":"","type":"TextField","columns":{"mobile":2,"tablet":4,"desktop":12},"default":"","required":false}}]' fields='[{"id":"TextField","name":"Text","default":{"name":"","type":"TextField","columns":{"mobile":2,"tablet":4,"desktop":12},"default":"","required":false}}]'
value='{"sections":[{"name":"a","fields":[{"name":"test","type":"CheckboxesField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":[],"required":false,"options":["a","b"],"key":"test"},{"name":"eee","type":"CheckboxField","columns":{"mobile":2,"tablet":4,"desktop":5},"default":false,"required":true,"description":"test","key":"eee"},{"name":"dd","type":"DropdownField","columns":{"mobile":1,"tablet":2,"desktop":4},"default":null,"required":true,"options":["a","b","c"],"key":"dd"},{"name":"aaaa","type":"RadioField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":null,"required":true,"options":["a","d"],"key":"aaaa"},{"name":"assa","type":"TextareaField","columns":{"mobile":2,"tablet":4,"desktop":6},"default":null,"required":true,"rows":5,"key":"assa"}]}]}'
editable
></event-form> ></event-form>
<script type="module" src="src/main.js"></script> <script type="module" src="src/main.js"></script>
</body> </body>

1
package.json
View File

@ -6,7 +6,6 @@
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build", "build": "vite build",
"build-dev": "vite build --sourcemap inline",
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {

3
src/Eventform.ce.vue
View File

@ -24,9 +24,6 @@
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)"> <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editSection', index)">
<edit-icon class="w-3 h-3 fill-current"></edit-icon> <edit-icon class="w-3 h-3 fill-current"></edit-icon>
</a> </a>
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('deleteSection', index)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a>
</div> </div>
</a> </a>
</template> </template>

15
src/components/fields/Checkbox.vue
View File

@ -1,14 +1,12 @@
<template> <template>
<div class="relative"> <div class="relative">
<div class="grid grid-cols-1 gap-2"> <div class="grid grid-cols-1 gap-2 mt-3">
<label :for="field.key" class="p-0 block leading-none relative flex items-start"> <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" /> <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 top-0"></span> <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-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block top-0"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base"> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="field.description"></span>
<span v-text="field.description"></span> <span v-show="field.required" class="text-red-800 ml-1">*</span>
<span v-show="field.required" class="text-red-800">*</span>
</span>
</label> </label>
</div> </div>
</div> </div>
@ -16,6 +14,7 @@
<script setup> <script setup>
import {computed} from 'vue'; import {computed} from 'vue';
import FieldLabel from '../FieldLabel.vue';
const emit = defineEmits(['update:modelValue']); const emit = defineEmits(['update:modelValue']);
const props = defineProps({ const props = defineProps({

6
src/components/fields/Checkboxes.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="relative"> <div class="relative">
<div class="grid grid-cols-1 gap-2 mt-3"> <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-start"> <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" /> <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="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-[0.5rem] top-[0.5rem] w-2 h-2 absolute rounded block"></span> <span class="peer-checked:bg-primary left-2 w-2 h-2 absolute rounded block"></span>
<span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span> <span class="pl-8 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
</label> </label>
</div> </div>

2
src/components/fields/Text.vue
View File

@ -20,7 +20,7 @@ const emit = defineEmits(['update:modelValue']);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: true, required: true,
validator: (value) => value === null || typeof value === 'string', validator: (value) => typeof value === 'string',
}, },
field: { field: {
required: true, required: true,

4
src/components/fields/Textarea.vue
View File

@ -19,12 +19,12 @@ const emit = defineEmits(['update:modelValue']);
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
required: true, required: true,
validator: (value) => value === null || typeof value === 'string', validator: (value) => typeof value === 'string',
}, },
field: { field: {
required: true, required: true,
validator: (value) => validator: (value) =>
hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default', 'rows']) && hasKeys(value, ['required', 'type', 'key', 'columns', 'name', 'default']) &&
typeof value.required === 'boolean' && typeof value.required === 'boolean' &&
typeof value.key === 'string' && typeof value.key === 'string' &&
value.key.length > 0 && value.key.length > 0 &&