From 4da70d94b9d3606328bd8118d6ab172b94a41216 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Mon, 17 Jun 2024 00:01:21 +0200
Subject: [PATCH] Add container classes

---
 src/components/Box.vue                |  2 +-
 src/components/FieldLabel.vue         |  2 +-
 src/components/fields/Checkboxes.vue  | 17 +-------
 src/components/fields/Nami.vue        | 18 ++++++--
 src/components/fields/Text.vue        |  7 +---
 src/components/fields/VCheckboxes.vue | 60 +++++++++++++++++++++++++++
 src/components/fields/VText.vue       |  2 +-
 src/composables/useColumns.js         |  5 ++-
 8 files changed, 85 insertions(+), 28 deletions(-)
 create mode 100644 src/components/fields/VCheckboxes.vue

diff --git a/src/components/Box.vue b/src/components/Box.vue
index a37586a..64f1da7 100644
--- a/src/components/Box.vue
+++ b/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>
diff --git a/src/components/FieldLabel.vue b/src/components/FieldLabel.vue
index 65961bb..ef51e7b 100644
--- a/src/components/FieldLabel.vue
+++ b/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
diff --git a/src/components/fields/Checkboxes.vue b/src/components/fields/Checkboxes.vue
index 3837ca3..6bd4a0d 100644
--- a/src/components/fields/Checkboxes.vue
+++ b/src/components/fields/Checkboxes.vue
@@ -1,21 +1,10 @@
 <template>
-    <div class="relative">
-        <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>
+    <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>
 </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),
diff --git a/src/components/fields/Nami.vue b/src/components/fields/Nami.vue
index 4f8ff94..711a54a 100644
--- a/src/components/fields/Nami.vue
+++ b/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">
-                        <div class="mt-2" :class="containerClasses">
+                    <accordion v-model="openValue" :index="index" :title="member.innerFormName" v-for="(member, index) in inner" :key="index" type="info">
+                        <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) {
diff --git a/src/components/fields/Text.vue b/src/components/fields/Text.vue
index 1ee2655..411ea94 100644
--- a/src/components/fields/Text.vue
+++ b/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),
diff --git a/src/components/fields/VCheckboxes.vue b/src/components/fields/VCheckboxes.vue
new file mode 100644
index 0000000..a503f73
--- /dev/null
+++ b/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>
diff --git a/src/components/fields/VText.vue b/src/components/fields/VText.vue
index b220ae8..9d4e444 100644
--- a/src/components/fields/VText.vue
+++ b/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>
 
diff --git a/src/composables/useColumns.js b/src/composables/useColumns.js
index f4553b9..b1f1ffb 100644
--- a/src/composables/useColumns.js
+++ b/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,
     };
 }