Extract column logic

src/EventForm.ce.vue

@@ -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,
+                                            ...colClassesForField(field),
-                                            [colClasses.tablet[field.columns.tablet]]: true,
-                                            [colClasses.desktop[field.columns.desktop]]: true,
                                         }"
                                     >
                                         <component :is="resolveComponentName(field)" v-model="payload[field.key]" :fields="allFields" :payload="payload" :field="field" class="grow"></component>
@@ -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,

src/composables/useColumns.js

@@ -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,
+    };
+}