Add container classes

src/components/Box.vue

@@ -6,7 +6,7 @@
             v-text="step"
             v-if="step"
         ></div>
-        <div class="flex flex-row items-center rounded form-group shadow-sm group" :class="[colors[type].container, type, sizes[size].container]">
+        <div class="flex flex-row items-center rounded form-group shadow-sm group" :class="[colors[type].container, type, 'box', sizes[size].container]">
             <div class="flex-grow text-sm" :class="colors[type].text">
                 <slot />
             </div>

src/components/FieldLabel.vue

@@ -1,5 +1,5 @@
 <template>
-    <span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
+    <span class="text-gray-600 flex bg-white items-center text-xs @sm:text-sm group-[.info]:bg-blue-200" :class="{'left-0 ': inline, 'left-2 px-1 absolute -top-3': !inline}">
         <span v-text="name"></span> <span v-show="required" class="text-red-800 ml-1">*</span>
         <hint :value="hint" class="ml-2" v-if="hint" small></hint>
         <button

src/components/fields/Checkboxes.vue

@@ -1,21 +1,10 @@
 <template>
-    <div class="relative">
+    <v-checkboxes :intro="field.intro" :options="field.options" :label="field.name" :name="field.key" :id="field.key" :hint="field.hint" v-model="inner"></v-checkboxes>
-        <field-label :name="field.name" :required="false" :hint="field.hint" inline></field-label>
-        <div class="grid grid-cols-1 gap-2 pt-1">
-            <div class="text-sm text-gray-600" v-text="field.intro" v-if="field.intro"></div>
-            <label v-for="(option, index) in field.options" :key="index" :for="`${innerId}-${index}`" class="block relative flex items-start">
-                <input :id="`${innerId}-${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="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] 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>
-            </label>
-        </div>
-    </div>
 </template>
 
 <script setup>
 import {computed} from 'vue';
-import FieldLabel from '../FieldLabel.vue';
+import VCheckboxes from './VCheckboxes.vue';
 
 const emit = defineEmits(['update:modelValue']);
 const props = defineProps({
@@ -39,8 +28,6 @@ const props = defineProps({
     },
 });
 
-const innerId = computed(() => (props.id ? props.id : props.field.key));
-
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),

src/components/fields/Nami.vue

@@ -89,8 +89,8 @@
                     "weiter".
                 </p>
                 <div class="grid gap-2 mt-6">
-                    <accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="success">
+                    <accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info">
-                        <div class="mt-2" :class="containerClasses">
+                        <div class="mt-2" :class="containerClassesSm">
                             <template v-for="(memberField, memberIndex) in memberFields">
                                 <v-checkbox
                                     v-if="memberField.type === 'CheckboxField'"
@@ -149,6 +149,17 @@
                                     :class="colClassesForField(memberField)"
                                     type="number"
                                 ></v-text>
+                                <v-checkboxes
+                                    v-if="memberField.type === 'CheckboxesField'"
+                                    :intro="memberField.intro"
+                                    :options="memberField.options"
+                                    :label="memberField.name"
+                                    :name="memberField.key"
+                                    :id="memberField.key"
+                                    :hint="memberField.hint"
+                                    :class="colClassesForField(memberField)"
+                                    v-model="member[memberField.key]"
+                                ></v-checkboxes>
                             </template>
                         </div>
                     </accordion>
@@ -170,6 +181,7 @@
 <script setup>
 import {computed, ref, warn} from 'vue';
 import VDropdown from './VDropdown.vue';
+import VCheckboxes from './VCheckboxes.vue';
 import VText from './VText.vue';
 import useFields from '../../composables/useFieldsWithoutNami.js';
 import Info from '../Info.vue';
@@ -183,7 +195,7 @@ import Accordion from '../Accordion.vue';
 import useColumns from '../../composables/useColumns.js';
 
 const eventMeta = useEventMeta();
-const {colClassesForField, containerClasses} = useColumns();
+const {colClassesForField, containerClassesSm} = useColumns();
 const {login, logout, user, loginData, searchData, searchForMember, resetSearchData, searchResults, searching} = useAdremaLogin();
 
 if (user.value !== null) {

src/components/fields/Text.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="innerId" :hint="field.hint" v-model="inner"></v-text>
+    <v-text type="text" :required="field.required" :name="field.key" :label="field.name" :id="field.key" :hint="field.hint" v-model="inner"></v-text>
 </template>
 
 <script setup>
@@ -23,13 +23,8 @@ const props = defineProps({
             value.name.length > 0 &&
             hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
     },
-    id: {
-        required: false,
-    },
 });
 
-const innerId = computed(() => (props.id ? props.id : props.field.key));
-
 const inner = computed({
     get: () => props.modelValue,
     set: (v) => emit('update:modelValue', v),

src/components/fields/VCheckboxes.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="relative">
+        <field-label :name="label" :required="false" :hint="hint" inline></field-label>
+        <div class="grid grid-cols-1 gap-2 pt-1 group-[.box]:gap-0">
+            <div class="text-sm text-gray-600" v-text="intro" v-if="intro"></div>
+            <label v-for="(option, index) in options" :key="index" :for="`${id}-${index}`" class="block relative flex items-start">
+                <input :id="`${id}-${index}`" v-model="inner" type="checkbox" :name="name" :value="option" class="peer absolute invisible" />
+                <span
+                    class="border-neutral-400 border-4 group-[.box]:border-2 border-solid peer-checked:border-primary absolute left-0 w-6 h-6 group-[.box]:w-4 group-[.box]:h-4 group-[.box]:top-[5px] rounded block top-0"
+                ></span>
+                <span class="peer-checked:bg-primary left-[0.5rem] top-[0.5rem] group-[.box]:top-[0.58rem] group-[.box]:left-[0.25rem] w-2 h-2 absolute rounded block top-0"></span>
+                <span class="pl-8 pt-1 @sm:pt-0 text-gray-600 text-sm @sm:text-base" v-text="option"></span>
+            </label>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import FieldLabel from '../FieldLabel.vue';
+
+const emit = defineEmits(['update:modelValue']);
+
+const props = defineProps({
+    modelValue: {
+        required: true,
+    },
+    name: {
+        required: true,
+        type: String,
+    },
+    id: {
+        required: true,
+        type: String,
+    },
+    label: {
+        required: true,
+        type: String,
+    },
+    options: {
+        required: true,
+        type: Object,
+    },
+    hint: {
+        required: false,
+        validator: (value) => value === null || typeof value === 'string',
+        default: () => null,
+    },
+    intro: {
+        required: false,
+        validator: (value) => value === null || typeof value === 'string',
+        default: () => null,
+    },
+});
+
+const inner = computed({
+    get: () => props.modelValue,
+    set: (v) => emit('update:modelValue', v),
+});
+</script>

src/components/fields/VText.vue

@@ -14,7 +14,7 @@
         <div v-if="hint" class="absolute right-0 mr-2 flex items-center h-full">
             <hint :value="hint"></hint>
         </div>
-        <field-label :name="label" class="group-[.info]:bg-blue-200" :required="required"></field-label>
+        <field-label :name="label" :required="required"></field-label>
     </label>
 </template>
 

src/composables/useColumns.js

@@ -28,7 +28,9 @@ export default function useColumns() {
         },
     };
 
-    const containerClasses = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 gap-6 items-start';
+    const containerClassesDefault = 'grid grid-cols-2 @sm:grid-cols-4 @lg:grid-cols-6 items-start';
+    const containerClassesSm = containerClassesDefault + ' gap-4';
+    const containerClasses = containerClassesDefault + ' gap-6';
 
     function colClassesForField(field) {
         return {
@@ -42,5 +44,6 @@ export default function useColumns() {
         colClasses,
         colClassesForField,
         containerClasses,
+        containerClassesSm,
     };
 }