Add cols
This commit is contained in:
parent
8cd6af3221
commit
94bb663ae1
|
@ -10,8 +10,8 @@
|
||||||
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": [
|
value='{"sections": [
|
||||||
{"name": "Personal", "intro": "Jaöaöd", "fields": [
|
{"name": "Personal", "intro": "Jaöaöd", "fields": [
|
||||||
{"name": "Vorname", "type": "TextField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": "", "required": true},
|
{"name": "Vorname", "type": "TextField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "default": "", "required": true},
|
||||||
{"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": [], "required": true, "options": ["lal", "fff", "ccc"]},
|
{"name": "Essen", "type": "CheckboxesField", "columns": {"mobile": 1, "tablet": 2, "desktop": 3}, "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": "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": "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": "Essgewohnheiten", "type": "RadioField", "columns": {"mobile": 2, "tablet": 3, "desktop": 6}, "default": null, "required": true, "options": ["A","Bb","Cc"]},
|
||||||
|
|
|
@ -79,8 +79,18 @@
|
||||||
<slide v-for="(section, index) in v.sections" :key="index">
|
<slide v-for="(section, index) in v.sections" :key="index">
|
||||||
<div class="w-full flex-none px-3 xs:px-6">
|
<div class="w-full flex-none px-3 xs:px-6">
|
||||||
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
|
<div class="text-sm sm_text-base text-gray-800 leading-tight mb-5" v-text="section.intro"></div>
|
||||||
<div class="grid grid-cols-2 gap-4 mt-6 items-start">
|
<div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 mt-6 items-start">
|
||||||
<div v-for="(field, findex) in section.fields" :key="findex" class="flex justify-stretch relative group" :class="{'hover:ring-edit hover:ring-4': editable}">
|
<div
|
||||||
|
v-for="(field, findex) in section.fields"
|
||||||
|
:key="findex"
|
||||||
|
class="flex justify-stretch relative group"
|
||||||
|
:class="{
|
||||||
|
'hover:ring-edit hover:ring-4': editable,
|
||||||
|
[colClasses.mobile[field.columns.mobile]]: true,
|
||||||
|
[colClasses.tablet[field.columns.tablet]]: true,
|
||||||
|
[colClasses.desktop[field.columns.desktop]]: true,
|
||||||
|
}"
|
||||||
|
>
|
||||||
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
|
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :field="field"></component>
|
||||||
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
<div v-if="editable" class="right-0 top-0 -mr-2 -mt-2 absolute hidden space-x-2 group-hover:flex">
|
||||||
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
|
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font ml-2" @click.prevent.stop="$emit('editField', index, findex)">
|
||||||
|
@ -130,6 +140,33 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
|
||||||
|
|
||||||
const emits = defineEmits(['editSection']);
|
const emits = defineEmits(['editSection']);
|
||||||
|
|
||||||
|
const colClasses = {
|
||||||
|
mobile: {
|
||||||
|
1: 'col-span-1',
|
||||||
|
2: 'col-span-2',
|
||||||
|
3: 'col-span-3',
|
||||||
|
4: 'col-span-4',
|
||||||
|
5: 'col-span-5',
|
||||||
|
6: 'col-span-6',
|
||||||
|
},
|
||||||
|
tablet: {
|
||||||
|
1: 'sm:col-span-1',
|
||||||
|
2: 'sm:col-span-2',
|
||||||
|
3: 'sm:col-span-3',
|
||||||
|
4: 'sm:col-span-4',
|
||||||
|
5: 'sm:col-span-5',
|
||||||
|
6: 'sm:col-span-6',
|
||||||
|
},
|
||||||
|
desktop: {
|
||||||
|
1: 'lg:col-span-1',
|
||||||
|
2: 'lg:col-span-2',
|
||||||
|
3: 'lg:col-span-3',
|
||||||
|
4: 'lg:col-span-4',
|
||||||
|
5: 'lg:col-span-5',
|
||||||
|
6: 'lg:col-span-6',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
eventId: {
|
eventId: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|
Loading…
Reference in New Issue