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

Compare commits

base: silva:d7259f828ff8508c21c07aed614eeaaf72bf635d
Branches Tags
silva:master
silva:dev
..
compare: silva:e0ab18a469a831b85f61e10f32d1ad6ede366f43
Branches Tags
silva:master
silva:dev

No commits in common. "d7259f828ff8508c21c07aed614eeaaf72bf635d" and "e0ab18a469a831b85f61e10f32d1ad6ede366f43" have entirely different histories.
d7259f828f ... e0ab18a469

2 changed files with 62 additions and 59 deletions
Show Stats Expand all files Collapse all files

103
src/EventForm.ce.vue
View File

@ -4,81 +4,77 @@
<div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false"> <div class="bg-white @container rounded-lg shadow-lg" x-show="finished === false">
<div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16"> <div class="sticky top-0 z-10 hidden @sm:flex overflow-hidden rounded-t-lg h-12 @md:h-16">
<template v-for="(section, index) in v.sections"> <template v-for="(section, index) in v.sections">
<a <a href="#"
href="#"
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative" class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-full transition duration-300 relative"
:class="{ :class="{
'bg-primary': index <= active, 'bg-primary': index <= active,
'bg-secondary': index > active, 'bg-secondary': index > active,
}" }" @click.prevent="active = index">
@click.prevent="active = index" <svg preserveAspectRatio="none"
>
<svg
preserveAspectRatio="none"
class="h-full w-3 absolute left-0 text-primary transition duration-300" class="h-full w-3 absolute left-0 text-primary transition duration-300"
viewBox="0 0 100 100" viewBox="0 0 100 100" :class="{
:class="{
'opacity-100': index !== 0 && index - 1 <= active, 'opacity-100': index !== 0 && index - 1 <= active,
'opacity-0': !(index !== 0 && index - 1 <= active), 'opacity-0': !(index !== 0 && index - 1 <= active),
}" }">
>
<path d="M0,0 100,50 0,100" fill="currentColor"></path> <path d="M0,0 100,50 0,100" fill="currentColor"></path>
</svg> </svg>
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300" v-html="index + 1"></span> <span
class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font font-goudy transition duration-300"
v-html="index + 1"></span>
<span class="text-sm text-font ml-2" v-html="section.name"></span> <span class="text-sm text-font ml-2" v-html="section.name"></span>
<div v-if="editable" class="hidden @md:flex items-center h-full"> <div v-if="editable" class="hidden @md:flex items-center h-full">
<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)"> <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> <delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a> </a>
</div> </div>
</a> </a>
</template> </template>
<div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6"> <div v-if="editable" class="hidden @md:flex items-center h-full absolute right-0 mr-6">
<a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font" @click.prevent.stop="$emit('addSection')"> <a href="#" class="bg-edit rounded-full flex w-5 h-5 items-center justify-center text-font"
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current"> @click.prevent.stop="$emit('addSection')">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
<path <path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
/>
</svg> </svg>
</a> </a>
</div> </div>
</div> </div>
<div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary"> <div class="flex items-center justify-between px-4 overflow-hidden rounded-t-lg @sm:hidden bg-secondary">
<a <a href="#"
href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none" class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{'opacity-40': !backable}" :class="{ 'opacity-40': !backable }" @click.prevent="back">
@click.prevent="back"
>
<svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001"> <svg class="text-sm text-font fill-current rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" /> <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg> </svg>
</a> </a>
<div class="overflow-hidden"> <div class="overflow-hidden">
<carousel v-model="active"> <carousel v-model="active">
<slide v-for="(section, index) in v.sections" :key="index" class="relative flex flex-no-wrap overflow-hidden"> <slide v-for="(section, index) in v.sections" :key="index"
class="relative flex flex-no-wrap overflow-hidden">
<div class="flex-none w-full"> <div class="flex-none w-full">
<div <div href="#"
href="#"
class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative" class="flex flex-col @md:flex-row items-center justify-center @md:justify-start px-2 flex-auto @md:pl-6 h-12 @md:h-16 transition duration-300 relative"
@click="active = index" @click="active = index">
> <span
<span class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300" v-html="index + 1"></span> class="flex items-center justify-center w-4 @md:w-6 h-4 @md:h-6 rounded-full bg-circle text-font transition duration-300"
v-html="index + 1"></span>
<span class="text-sm text-font" v-html="section.name"></span> <span class="text-sm text-font" v-html="section.name"></span>
</div> </div>
</div> </div>
</slide> </slide>
</carousel> </carousel>
</div> </div>
<a <a href="#"
href="#"
class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none" class="flex items-center justify-center w-7 h-7 flex-none rounded-full bg-circle text-font transition duration-300 flex-none"
:class="{'opacity-40': !nextable}" :class="{ 'opacity-40': !nextable }" @click.prevent="next">
@click.prevent="next"
>
<svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001"> <svg class="text-sm text-font fill-current -rotate-90 w-3 h-3" viewBox="0 0 11.314 7.0710001">
<path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" /> <path d="M 4.95,6.364 5.657,7.071 11.314,1.414 9.9,0 5.657,4.242 1.414,0 0,1.414 Z" />
</svg> </svg>
@ -89,25 +85,28 @@
<carousel v-model="active"> <carousel v-model="active">
<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 @sm:grid-cols-4 @lg:grid-cols-6 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 <div v-for="(field, findex) in section.fields" :key="findex"
v-for="(field, findex) in section.fields" class="flex justify-stretch relative group" :class="{
:key="findex"
class="flex justify-stretch relative group"
:class="{
'hover:ring-edit hover:ring-4': editable, 'hover:ring-edit hover:ring-4': editable,
[colClasses.mobile[field.columns.mobile]]: true, [colClasses.mobile[field.columns.mobile]]: true,
[colClasses.tablet[field.columns.tablet]]: true, [colClasses.tablet[field.columns.tablet]]: true,
[colClasses.desktop[field.columns.desktop]]: true, [colClasses.desktop[field.columns.desktop]]: true,
}" }">
> <component :is="resolveComponentName(field)" v-model="payload[field.key]"
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field"></component> :fields="allFields" :payload="payload" :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"
<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)"> 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)">
<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('deleteField', 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('deleteField', index, findex)">
<delete-icon class="w-3 h-3 fill-current"></delete-icon> <delete-icon class="w-3 h-3 fill-current"></delete-icon>
</a> </a>
</div> </div>
@ -115,11 +114,13 @@
</div> </div>
<div v-if="editable" class="flex justify-center mt-6 relative"> <div v-if="editable" class="flex justify-center mt-6 relative">
<a href="#" class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font" @click.prevent="$emit('addField', index)"> <a href="#"
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current"> class="bg-edit rounded-full flex w-8 h-8 items-center justify-center text-font"
@click.prevent="$emit('addField', index)">
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt"
xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current">
<path <path
d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0" />
/>
</svg> </svg>
</a> </a>
</div> </div>
@ -217,7 +218,7 @@ function reload() {
values.sections.forEach(function (section) { values.sections.forEach(function (section) {
section.fields.forEach(function (field) { section.fields.forEach(function (field) {
p[field.key] = field.value; p[field.key] = field.default;
}); });
}); });
payload.value = p; payload.value = p;

8
src/components/fields/Nami.vue
View File

@ -38,9 +38,9 @@
nochmal auswählen. nochmal auswählen.
</p> </p>
<div class="flex mt-4 space-x-3"> <div class="flex mt-4 space-x-3">
<v-text name="search_firstname" label="Vorname" id="search_firstname" v-model="searchData.vorname" @input="searchForMember(1)"></v-text> <v-text name="search_firstname" label="Vorname" id="search_firstname" v-model="searchData.vorname" @input="searchForMember"></v-text>
<v-text name="search_lastname" label="Nachname" id="search_lastname" v-model="searchData.nachname" @input="searchForMember(1)"></v-text> <v-text name="search_lastname" label="Nachname" id="search_lastname" v-model="searchData.nachname" @input="searchForMember"></v-text>
<v-dropdown name="search_group" label="Stufe" id="search_group" v-model="searchData.untergliederungId" @input="searchForMember(1)" :options="eventMeta.agegroups"></v-dropdown> <v-dropdown name="search_group" label="Stufe" id="search_group" v-model="searchData.untergliederungId" @input="searchForMember" :options="eventMeta.agegroups"></v-dropdown>
</div> </div>
<div class="relative min-h-48"> <div class="relative min-h-48">
<div class="relative grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-2 mt-2"> <div class="relative grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-2 mt-2">
@ -175,6 +175,8 @@ const props = defineProps({
}, },
}); });
const model = ref(null);
const defaultMember = computed(() => { const defaultMember = computed(() => {
var fields = {}; var fields = {};
memberFields.value.forEach((field) => (fields[field.key] = field.default)); memberFields.value.forEach((field) => (fields[field.key] = field.default));