start input list with add and delete actions

src/client/vite/src/components/Forms/Error/Dropdown.vue

@@ -0,0 +1,63 @@
+<script setup>
+/** 
+  @name Forms/Error/Dropdown.vue
+  @description This component is used to display a feedback message on a dropdown field.
+  It is used with /Forms/Field components.
+  @example
+  {
+    isValid: false,
+    isValue: false,
+  }
+  @param {boolean} [isValid=false] - Check if the field is valid
+  @param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
+  @param {boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
+  @param {string} [errorClass=""] - Additional class
+*/
+
+const props = defineProps({
+  isValid: {
+    type: Boolean,
+    required: false,
+  },
+  isValue: {
+    type: Boolean,
+    required: false,
+  },
+  isValueTaken: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  errorClass: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<template>
+  <div
+    :aria-hidden="props.isValid ? 'true' : 'false'"
+    :class="[
+      props.isValid ? 'hidden' : '',
+      'select-dropdown-btn last first',
+      props.errorClass,
+    ]"
+    role="alert"
+  >
+    <p class="input-error-dropdown-msg">
+      {{
+        props.isValid
+          ? $t("inp_input_valid")
+          : props.isNoMatch
+          ? $t("inp_input_no_match")
+          : props.isValueTaken
+          ? $t("inp_input_error_taken")
+          : !props.isValue
+          ? $t("inp_input_error_required")
+          : $t("inp_input_error")
+      }}
+    </p>
+  </div>
+</template>

src/client/vite/src/components/Forms/Error/Field.vue

@@ -10,6 +10,7 @@
   }
   @param {boolean} [isValid=false] - Check if the field is valid
   @param {boolean} [isValue=false] - Check if the field has a value, display a different message if the field is empty or not
+  @param {boolean} [isValueTaken=false] - Check if input is already taken. Use with list input.
   @param {string} [errorClass=""] - Additional class
 */
 
@@ -22,6 +23,11 @@ const props = defineProps({
     type: Boolean,
     required: false,
   },
+  isValueTaken: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   errorClass: {
     type: String,
     required: false,
@@ -39,6 +45,10 @@ const props = defineProps({
     {{
       props.isValid
         ? $t("inp_input_valid")
+        : props.isNoMatch
+        ? $t("inp_input_no_match")
+        : props.isValueTaken
+        ? $t("inp_input_error_taken")
         : !props.isValue
         ? $t("inp_input_error_required")
         : $t("inp_input_error")

src/client/vite/src/components/Forms/Field/Combobox.vue

@@ -13,6 +13,7 @@ import { contentIndex } from "@utils/tabindex.js";
 import Container from "@components/Widget/Container.vue";
 import Header from "@components/Forms/Header/Field.vue";
 import ErrorField from "@components/Forms/Error/Field.vue";
+import ErrorDropdown from "@components/Forms/Error/Dropdown.vue";
 import { useUUID } from "@utils/global.js";
 
 /**
@@ -431,18 +432,14 @@ const emits = defineEmits(["inp"]);
             :value="inp.value"
             :type="'text'"
           />
-          <div
-            class="select-dropdown-btn"
+          <ErrorDropdown
             v-if="!inp.isMatching"
-            :aria-hidden="!inp.isMatching ? 'true' : 'false'"
-            role="alert"
-          >
-            <p class="combobox-no-match">
-              {{ $t("inp_combobox_no_match") }}
-            </p>
-          </div>
+            :isNoMatch="true"
+            :isValid="false"
+          />
         </div>
         <div
+          v-if="inp.isMatching"
           data-select-dropdown-items
           :id="`${inp.id}-list`"
           :aria-hidden="select.isOpen ? 'false' : 'true'"