From 54fedb994222ef7a294939384b4e48a033c968f0 Mon Sep 17 00:00:00 2001
From: Bernd Storath <999999bst@gmail.com>
Date: Mon, 3 Mar 2025 13:14:15 +0100
Subject: [PATCH] style array field

---
 src/app/components/Form/ArrayField.vue | 31 ++++++++++++++++----------
 src/i18n/locales/en.json               |  4 +++-
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/app/components/Form/ArrayField.vue b/src/app/components/Form/ArrayField.vue
index 10a549e7..f6bdaa01 100644
--- a/src/app/components/Form/ArrayField.vue
+++ b/src/app/components/Form/ArrayField.vue
@@ -1,25 +1,32 @@
 <template>
   <div v-if="data?.length === 0">
-    {{ emptyText || 'No items' }}
+    {{ emptyText || $t('form.noItems') }}
   </div>
-  <div v-else class="flex flex-col">
+  <div v-else class="flex flex-col gap-2">
     <div v-for="(item, i) in data" :key="i">
-      <input
-        :value="item"
-        :name="name"
-        type="text"
-        class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
-        @input="update($event, i)"
+      <div class="flex flex-row gap-1">
+        <input
+          :value="item"
+          :name="name"
+          type="text"
+          class="rounded-lg border-2 border-gray-100 text-gray-500 focus:border-red-800 focus:outline-0 focus:ring-0 dark:border-neutral-800 dark:bg-neutral-700 dark:text-neutral-200 dark:placeholder:text-neutral-400"
+          @input="update($event, i)"
+        />
+        <BaseButton as="input" type="button" value="-" @click="del(i)" />
+      </div>
+    </div>
+    <div class="mt-2">
+      <BaseButton
+        as="input"
+        type="button"
+        :value="$t('form.add')"
+        @click="add"
       />
-      <input type="button" value="-" @click="del(i)" />
     </div>
   </div>
-  <input type="button" value="Add" @click="add" />
 </template>
 
 <script lang="ts" setup>
-// TODO: style
-
 const data = defineModel<string[]>();
 defineProps<{ emptyText?: string[]; name: string }>();
 
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d623508d..79545cf2 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -116,7 +116,9 @@
     "save": "Save",
     "revert": "Revert",
     "sectionGeneral": "General",
-    "sectionAdvanced": "Advanced"
+    "sectionAdvanced": "Advanced",
+    "noItems": "No items",
+    "add": "Add"
   },
   "admin": {
     "general": {