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

Extract column logic

This commit is contained in:
philipp lang 2024-06-14 01:39:15 +02:00
parent 194cff40d5
commit 3a83c46430
2 changed files with 60 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/EventForm.ce.vue
View File

@ -90,16 +90,14 @@
<slide v-for="(section, index) in v.sections" :key="index">
<div v-if="active === index" 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="grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 mt-6 items-start">
<div class="mt-6" :class="containerClasses">
<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,
...colClassesForField(field),
}"
>
<component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field" class="grow"></component>
@ -137,16 +135,16 @@
</div>
<div class="isolate self-center justify-self-end row-span-2 sm:pt-8 sm:pb-8 relative -right-3">
<!--
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
-->
<div class="absolute right-0 top-0 h-full flex items-center justify-end">
<div class="bg-primary w-96 h-96 flex [clip-path:circle(50%_at_110%_50%)] sm:[clip-path:circle(50%_at_80%_50%)]"></div>
</div>
<div class="overflow-hidden rounded-l-lg rotate-2 shadow relative z-10 -left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
<div class="overflow-hidden rounded-l-lg -rotate-2 shadow relative left-2">
<img class="w-64 h-32 object-cover" src="" />
</div>
-->
</div>
<div class="self-end flex-grow pb-8 pl-8 pr-8 sm:pr-0 pt-6 sm:pt-0">
<div class="font-bold text-xl">Vielen Dank für deine Anmeldung.</div>
@ -168,41 +166,16 @@ import DeleteIcon from './components/icons/DeleteIcon.vue';
import useToastify from './composables/useToastify.js';
import useFields from './composables/useFields.js';
import SettingIcon from './components/icons/SettingIcon.vue';
import useColumns from './composables/useColumns.js';
const {scroll} = useScroll();
const {errorFromResponse} = useToastify();
const {colClassesForField, containerClasses} = useColumns();
const finished = ref(false);
const eventForm = ref(null);
const emits = defineEmits(['addSection', 'editSection', 'deleteSection', 'editField', 'deleteField', 'active']);
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({
editable: {
type: Boolean,

46
src/composables/useColumns.js Normal file
View File

@ -0,0 +1,46 @@
import {ref} from 'vue';
export default function useColumns() {
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 containerClasses = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 items-start';
function colClassesForField(field) {
return {
[colClasses.mobile[field.columns.mobile]]: true,
[colClasses.tablet[field.columns.tablet]]: true,
[colClasses.desktop[field.columns.desktop]]: true,
};
}
return {
colClasses,
colClassesForField,
containerClasses,
};
}