@fy-/fws-vue 2.1.44 → 2.1.46

package/components/ui/DefaultInput.vue

@@ -3,11 +3,10 @@ import type { ErrorObject } from '@vuelidate/core'
 import { computed, ref, toRef } from 'vue'
 import { useTranslation } from '../../composables/translations'
 import DefaultTagInput from './DefaultTagInput.vue'
-// import VueTailwindDatepicker from "vue-tailwind-datepicker";
 
 type modelValueType = string | number | string[] | number[] | undefined
-
 type checkboxValueType = any[] | Set<any> | undefined | boolean
+
 const props = withDefaults(
   defineProps<{
     id: string
@@ -52,29 +51,19 @@ const props = withDefaults(
     dpOptions: () => ({}),
   },
 )
-/* function disableDatesAdult(date: Date) {
-  if (!props.disableDatesUnder18) return false
-  const today = new Date()
-  const date18YearsAgo = new Date(
-    today.getFullYear() - 18,
-    today.getMonth(),
-    today.getDate(),
-  )
-
-  return date >= date18YearsAgo
-} */
 
 const translate = useTranslation()
 const inputRef = ref<HTMLInputElement>()
+
 const errorProps = toRef(props, 'error')
 const errorVuelidateProps = toRef(props, 'errorVuelidate')
+
 const checkErrors = computed(() => {
   if (errorProps.value) return errorProps.value
   if (errorVuelidateProps.value && errorVuelidateProps.value.length > 0) {
-    const err = `vuelidate_validator_${errorVuelidateProps.value[0].$validator.toString()}`
-    return translate(err)
+    const errKey = `vuelidate_validator_${errorVuelidateProps.value[0].$validator.toString()}`
+    return translate(errKey)
   }
-
   return null
 })
 
@@ -85,39 +74,43 @@ function blur() {
   if (inputRef.value) inputRef.value.blur()
 }
 function getInputRef() {
-  if (inputRef.value) return inputRef.value
+  return inputRef.value
 }
+
 const emit = defineEmits([
   'update:modelValue',
   'update:checkboxValue',
   'focus',
   'blur',
 ])
+
 function handleFocus() {
   emit('focus', props.id)
 }
-
 function handleBlur() {
   emit('blur', props.id)
 }
 
-const model = computed({
+const model = computed<modelValueType>({
   get: () => props.modelValue,
-  set: (items) => {
-    emit('update:modelValue', items)
+  set: (value) => {
+    emit('update:modelValue', value)
   },
 })
-const modelCheckbox = computed({
+
+const modelCheckbox = computed<checkboxValueType>({
   get: () => props.checkboxValue,
-  set: (items) => {
-    emit('update:checkboxValue', items)
+  set: (value) => {
+    emit('update:checkboxValue', value)
   },
 })
+
 defineExpose({ focus, blur, getInputRef })
 </script>
 
 <template>
   <div>
+    <!-- TEXT, PASSWORD, EMAIL, SEARCH, DATE, DATETIME, URL, TEXTAREA, SELECT, PHONE, TEL, RANGE, CHIPS, TAGS, MASK, DATEPICKER -->
     <template
       v-if="
         [
@@ -142,6 +135,7 @@ defineExpose({ focus, blur, getInputRef })
       "
     >
       <div class="flex flex-col gap-2">
+        <!-- Basic input types -->
         <div
           v-if="
             [
@@ -162,12 +156,16 @@ defineExpose({ focus, blur, getInputRef })
           class="relative"
         >
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}
-            <template v-if="type === 'range'"> ({{ model }}) </template>
+          >
+            {{ label }}
+            <template v-if="type === 'range'">
+              ({{ model }})
+            </template>
           </label>
+
           <input
             :id="id"
             ref="inputRef"
@@ -176,29 +174,33 @@ defineExpose({ focus, blur, getInputRef })
             :name="id"
             :class="{
               'error': checkErrors,
-              'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500':
-                type !== 'range',
-              'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700':
-                type === 'range',
+              'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5  dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400  dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500': type !== 'range',
+              'w-full h-2 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700': type === 'range',
             }"
             :autocomplete="autocomplete"
             :min="type === 'range' ? minRange : undefined"
             :max="type === 'range' ? maxRange : undefined"
             :placeholder="placeholder"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
             @focus="handleFocus"
             @blur="handleBlur"
           >
+
+          <!-- Range Input Extra Labels -->
           <template v-if="type === 'range'">
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-0 -bottom-6"
-            >Min ({{ minRange }})
+            >
+              Min ({{ minRange }})
             </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-1/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
-            >{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span>
+            >
+              {{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}
+            </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute start-2/3 -translate-x-1/2 rtl:translate-x-1/2 -bottom-6"
             >
@@ -206,38 +208,20 @@ defineExpose({ focus, blur, getInputRef })
             </span>
             <span
               class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6"
-            >Max ({{ maxRange }})</span>
+            >
+              Max ({{ maxRange }})
+            </span>
           </template>
         </div>
-        <!--
-        <div v-if="type == 'datepicker'">
-          <label
-            :for="id"
-            v-if="label || placeholder"
-            class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-            >{{ label ? label : placeholder }}
-          </label>
-          <div class="relative">
-            <VueTailwindDatepicker
-              v-model="model"
-              :disable-date="disableDatesAdult"
-              :formatter="{
-                date: 'YYYY-MM-DD',
-                month: 'MMM',
-              }"
-              :placeholder="placeholder"
-              as-single
-            ></VueTailwindDatepicker>
-          </div>
-        </div>
-        -->
 
+        <!-- CHIPS / TAGS -->
         <div v-if="type === 'chips' || type === 'tags'">
           <label
-            v-if="label || placeholder"
+            v-if="showLabel && (label || placeholder)"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label ? label : placeholder }}
+          >
+            {{ label ? label : placeholder }}
           </label>
           <!-- @vue-skip -->
           <DefaultTagInput
@@ -251,12 +235,16 @@ defineExpose({ focus, blur, getInputRef })
             :max-lenght-per-tag="maxLengthPerTag"
           />
         </div>
+
+        <!-- TEXTAREA (AUTO-GROW) -->
         <div v-else-if="type === 'textarea-grow'" class="group relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <div class="grow-wrap">
             <!-- @vue-skip -->
             <textarea
@@ -269,9 +257,13 @@ defineExpose({ focus, blur, getInputRef })
               }"
               :placeholder="placeholder"
               :disabled="disabled"
-              :aria-describedby="help ? `${id}-help` : id"
+              :aria-describedby="help ? `${id}-help` : undefined"
               :required="req"
-              class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg
+                     border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500
+                     dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400
+                     dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
               @focus="handleFocus"
               @blur="handleBlur"
             />
@@ -284,16 +276,19 @@ defineExpose({ focus, blur, getInputRef })
                 model?.toString().length > dpOptions.counterMax,
             }"
           >
-            {{ model?.toString().length }} /
-            {{ dpOptions.counterMax }} characters
+            {{ model?.toString().length }} / {{ dpOptions.counterMax }} characters
           </div>
         </div>
+
+        <!-- TEXTAREA (REGULAR) -->
         <div v-else-if="type === 'textarea'" class="group relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <!-- @vue-skip -->
           <textarea
             :id="id"
@@ -305,9 +300,14 @@ defineExpose({ focus, blur, getInputRef })
             }"
             :placeholder="placeholder"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
-            class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50 rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500 focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            class="block p-2.5 w-full text-sm text-fv-neutral-900 bg-fv-neutral-50
+                   rounded-lg border border-fv-neutral-300 focus:ring-fv-primary-500
+                   focus:border-fv-primary-500 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
+                   dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500
+                   dark:focus:border-fv-primary-500"
             @focus="handleFocus"
             @blur="handleBlur"
           />
@@ -319,34 +319,42 @@ defineExpose({ focus, blur, getInputRef })
                 model?.toString().length > dpOptions.counterMax,
             }"
           >
-            {{ model?.toString().length }} /
-            {{ dpOptions.counterMax }} characters
+            {{ model?.toString().length }} / {{ dpOptions.counterMax }} characters
           </div>
         </div>
+
+        <!-- SELECT -->
         <div v-else-if="type === 'select'" class="relative">
           <label
-            v-if="label"
+            v-if="showLabel && label"
             :for="id"
             class="block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <select
             :id="id"
             ref="inputRef"
             v-model="model"
             :name="id"
             :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :required="req"
             :class="{
               error: checkErrors,
             }"
-            class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500 block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            class="bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm
+                   rounded-lg focus:ring-fv-primary-500 focus:border-fv-primary-500
+                   block w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
+                   dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500
+                   dark:focus:border-fv-primary-500"
             @focus="handleFocus"
             @blur="handleBlur"
           >
             <option
               v-for="opt in options"
-              :key="opt[0].toString()"
+              :key="opt[0]?.toString()"
               :value="opt[0]"
             >
               {{ opt[1] }}
@@ -355,6 +363,8 @@ defineExpose({ focus, blur, getInputRef })
         </div>
       </div>
     </template>
+
+    <!-- TOGGLE (switch) -->
     <template v-else-if="type === 'toggle'">
       <label
         class="inline-flex items-center mb-5 cursor-pointer"
@@ -369,39 +379,60 @@ defineExpose({ focus, blur, getInputRef })
           :false-value="checkboxFalseValue"
           :disabled="disabled"
           class="sr-only peer"
+          :aria-invalid="checkErrors ? 'true' : 'false'"
+          :aria-describedby="help ? `${id}-help` : undefined"
+          :aria-checked="modelCheckbox ? 'true' : 'false'"
+          role="switch"
           @focus="handleFocus"
           @blur="handleBlur"
         >
         <div
-          class="relative flex-0 flex-shrink-0 w-11 h-6 bg-fv-neutral-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-fv-primary-300 dark:peer-focus:ring-fv-primary-800 rounded-full peer dark:bg-fv-neutral-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-fv-neutral-300 after:border after:rounded-full after:w-5 after:h-5 after:transition-all dark:border-fv-neutral-600 peer-checked:bg-fv-primary-600"
+          class="relative flex-0 flex-shrink-0 w-11 h-6 bg-fv-neutral-200 peer-focus:outline-none
+                 peer-focus:ring-4 peer-focus:ring-fv-primary-300 dark:peer-focus:ring-fv-primary-800
+                 rounded-full peer dark:bg-fv-neutral-700 peer-checked:after:translate-x-full
+                 rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white
+                 after:content-[''] after:absolute after:top-[2px] after:start-[2px]
+                 after:bg-white after:border-fv-neutral-300 after:border after:rounded-full
+                 after:w-5 after:h-5 after:transition-all dark:border-fv-neutral-600
+                 peer-checked:bg-fv-primary-600"
         />
         <span
           class="ms-3 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
         >
           {{ label }}
           <template v-if="help">
-            <p class="text-fv-neutral-600 dark:text-fv-neutral-400 !text-sm">
+            <p
+              :id="help ? `${id}-help` : undefined"
+              class="text-fv-neutral-600 dark:text-fv-neutral-400 !text-sm"
+            >
               {{ help }}
             </p>
           </template>
         </span>
       </label>
     </template>
+
+    <!-- CHECKBOX / RADIO -->
     <template v-else-if="type === 'checkbox' || type === 'radio'">
       <div class="flex mb-4">
         <div class="flex items-center h-5">
           <input
             :id="id"
+            ref="inputRef"
             v-model="modelCheckbox"
             :class="{
               error: checkErrors,
             }"
-            :aria-describedby="help ? `${id}-help` : id"
+            :aria-describedby="help ? `${id}-help` : undefined"
             :type="type"
             :true-value="checkboxTrueValue"
             :false-value="checkboxFalseValue"
             :disabled="disabled"
-            class="w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300 rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600 dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800 focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600"
+            :aria-invalid="checkErrors ? 'true' : 'false'"
+            class="w-4 h-4 text-fv-primary-600 bg-fv-neutral-100 border-fv-neutral-300
+                   rounded focus:ring-fv-primary-500 dark:focus:ring-fv-primary-600
+                   dark:ring-offset-fv-neutral-800 dark:focus:ring-offset-fv-neutral-800
+                   focus:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600"
             @focus="handleFocus"
             @blur="handleBlur"
           >
@@ -410,7 +441,9 @@ defineExpose({ focus, blur, getInputRef })
           <label
             :for="id"
             class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
-          >{{ label }}</label>
+          >
+            {{ label }}
+          </label>
           <p
             v-if="help"
             :id="`${id}-help`"
@@ -421,10 +454,18 @@ defineExpose({ focus, blur, getInputRef })
         </div>
       </div>
     </template>
-    <p v-if="checkErrors" class="mt-0.5 text-sm text-red-600 dark:text-red-300">
+
+    <!-- Error message -->
+    <p
+      v-if="checkErrors"
+      class="mt-0.5 text-sm text-red-600 dark:text-red-300"
+      role="alert"
+      aria-live="assertive"
+    >
       {{ checkErrors }}
     </p>
 
+    <!-- Help text (for other input types) -->
     <p
       v-if="help && !['checkbox', 'radio', 'toggle'].includes(type)"
       :id="`${id}-help`"
@@ -440,7 +481,7 @@ input,
 textarea,
 select {
   &.error {
-    @apply border-red-500  dark:border-red-400;
+    @apply border-red-500 dark:border-red-400;
   }
 }
 </style>

package/components/ui/DefaultTagInput.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { useEventBus } from '../../composables/event-bus'
 
+/**
+ * Tag color variants
+ */
 type colorType = 'blue' | 'red' | 'green' | 'purple' | 'orange' | 'neutral'
 
+/**
+ * Define component properties
+ */
 const props = withDefaults(
   defineProps<{
     modelValue: string[]
@@ -14,8 +20,13 @@ const props = withDefaults(
     autofocus?: boolean
     help?: string
     maxLenghtPerTag?: number
+    /** Error string; if present, the border turns red and you can display a helper message */
     error?: string
     copyButton?: boolean
+    /** If true, prevents the user from adding duplicate tags */
+    noDuplicates?: boolean
+    /** If > 0, sets the maximum number of tags allowed */
+    maxTags?: number
   }>(),
   {
     copyButton: false,
@@ -24,12 +35,22 @@ const props = withDefaults(
     label: 'Tags',
     separators: () => [','],
     autofocus: false,
+    noDuplicates: false,
+    maxTags: 0,
   },
 )
 
+/**
+ * Refs & Data
+ */
 const textInput = ref<HTMLElement>()
+const isMaxReached = ref(false)
 
 const emit = defineEmits(['update:modelValue'])
+
+/**
+ * Create a two-way computed property for modelValue
+ */
 const model = computed({
   get: () => props.modelValue,
   set: (items) => {
@@ -37,75 +58,151 @@ const model = computed({
   },
 })
 
+/**
+ * Watch the model to see if maxTags is reached
+ */
+watch(
+  () => model.value.length,
+  (newLength) => {
+    if (props.maxTags && props.maxTags > 0) {
+      isMaxReached.value = newLength >= props.maxTags
+    }
+  },
+  { immediate: true },
+)
+
+/**
+ * Focus on the input if autofocus is enabled
+ */
 onMounted(() => {
   if (props.autofocus) {
     focusInput()
   }
 })
+
+/**
+ * Event Bus example (if you'd like notifications)
+ */
 const eventBus = useEventBus()
+
+/**
+ * Copy the tags to clipboard
+ */
 async function copyText() {
   const text = model.value.join(', ')
   await navigator.clipboard.writeText(text)
+
+  // Example event bus notification
   eventBus.emit('SendNotif', {
-    title: 'Text copied!',
+    title: 'Tags copied!',
     type: 'success',
     time: 2500,
   })
 }
 
-function handleInput(event: any) {
+/**
+ * On each character input, check if user typed a separator
+ */
+function handleInput(event: Event) {
+  const inputEvent = event as InputEvent
+  if (!inputEvent.data) return
   const separatorsRegex = new RegExp(props.separators.join('|'))
-  if (separatorsRegex.test(event.data)) {
+  if (separatorsRegex.test(inputEvent.data)) {
     addTag()
   }
 }
 
+/**
+ * Add a tag by splitting on the separator
+ */
 function addTag() {
-  if (!textInput.value) return
+  if (!textInput.value || isMaxReached.value) return
 
   const separatorsRegex = new RegExp(props.separators.join('|'))
-  if (!textInput.value.textContent) return
-  const newTags = textInput.value.textContent
+  const textContent = textInput.value.textContent?.trim()
+
+  if (!textContent) return
+
+  const newTags = textContent
     .split(separatorsRegex)
     .map((tag: string) => tag.trim())
     .filter((tag: string) => tag.length > 0)
-  model.value.push(...newTags)
+
+  // Remove duplicates if noDuplicates is enabled
+  const filteredTags = props.noDuplicates
+    ? newTags.filter(tag => !model.value.includes(tag))
+    : newTags
+
+  // If maxTags is set, ensure adding tags doesn't exceed the limit
+  if (props.maxTags && props.maxTags > 0) {
+    const slotsAvailable = props.maxTags - model.value.length
+    filteredTags.splice(slotsAvailable)
+  }
+
+  model.value.push(...filteredTags)
   textInput.value.textContent = ''
 }
 
+/**
+ * Remove a tag by index
+ */
 function removeTag(index: number) {
   model.value.splice(index, 1)
   focusInput()
 }
 
+/**
+ * Handle backspace/delete on an empty input
+ */
 function removeLastTag() {
   if (!textInput.value) return
   if (textInput.value.textContent === '') {
+    // If input is empty, remove the last tag
     model.value.pop()
   }
   else {
-    if (!textInput.value.textContent) return
-    textInput.value.textContent = textInput.value.textContent.slice(0, -1)
-
-    const range = document.createRange()
-    const sel = window.getSelection()
-    range.selectNodeContents(textInput.value)
-    range.collapse(false)
-    if (!sel) return
-    sel.removeAllRanges()
-    sel.addRange(range)
+    // Otherwise, remove the last character in the input
+    if (textInput.value.textContent) {
+      textInput.value.textContent = textInput.value.textContent.slice(0, -1)
+    }
+    placeCursorToEnd()
   }
 }
-function focusInput() {
+
+/**
+ * Place the cursor at the end of the contenteditable text
+ */
+function placeCursorToEnd() {
   if (!textInput.value) return
+  const range = document.createRange()
+  const sel = window.getSelection()
+  range.selectNodeContents(textInput.value)
+  range.collapse(false)
+  if (!sel) return
+  sel.removeAllRanges()
+  sel.addRange(range)
+}
 
-  textInput.value.focus()
+/**
+ * Focus the contenteditable input
+ */
+function focusInput() {
+  if (textInput.value) {
+    textInput.value.focus()
+    placeCursorToEnd()
+  }
 }
 
-function handlePaste(e: any) {
-  if (!textInput.value) return
-  // @ts-expect-error: Property 'clipboardData' does not exist on type 'ClipboardEvent'.
-  const text = (e.clipboardData || window.clipboardData).getData('text')
+/**
+ * Handle pasting text
+ */
+function handlePaste(e: ClipboardEvent) {
+  if (!textInput.value || isMaxReached.value) return
+
+  const clipboardData = e.clipboardData ?? (window as any).clipboardData
+  if (!clipboardData) return
+
+  const text = clipboardData.getData('text')
   const separatorsRegex = new RegExp(props.separators.join('|'), 'g')
   const pasteText = text.replace(separatorsRegex, ',')
   textInput.value.textContent += pasteText
@@ -115,16 +212,34 @@ function handlePaste(e: any) {
 </script>
 
 <template>
-  <div>
+  <div class="space-y-1 w-full">
+    <!-- Optional label -->
+    <label
+      v-if="label"
+      :for="`tags_${id}`"
+      class="block text-sm font-medium dark:text-white"
+    >
+      {{ label }}
+      <!-- optional help text -->
+      <span v-if="help" class="ml-1 text-xs text-fv-neutral-500 dark:text-fv-neutral-300">{{ help }}</span>
+    </label>
+
     <div
-      :class="`tags-input ${$props.error ? 'error' : ''}`"
+      class="tags-input" :class="[
+        $props.error ? 'error' : '',
+        isMaxReached ? 'pointer-events-none opacity-75' : '',
+      ]"
+      role="textbox"
+      :aria-label="label || 'Tags input'"
+      :aria-invalid="$props.error ? 'true' : 'false'"
       @click="focusInput"
       @keydown.delete.prevent="removeLastTag"
       @keydown.enter.prevent="addTag"
     >
+      <!-- Render each tag -->
       <span
         v-for="(tag, index) in model"
-        :key="index"
+        :key="`${tag}-${index}`"
         class="tag"
         :class="{
           red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
@@ -132,13 +247,18 @@ function handlePaste(e: any) {
         }"
       >
         {{ tag }}
-        <button type="button" @click.prevent="removeTag(index)">
+        <button
+          type="button"
+          class="flex items-center"
+          aria-label="Remove tag"
+          @click.prevent="removeTag(index)"
+        >
           <svg
-            class="w-4 h-4"
+            class="w-3 h-3"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
-            stroke-width="1.5"
+            stroke-width="2"
             stroke="currentColor"
           >
             <path
@@ -149,18 +269,33 @@ function handlePaste(e: any) {
           </svg>
         </button>
       </span>
+
+      <!-- Contenteditable input for typing/pasting tags -->
       <div
         :id="`tags_${id}`"
         ref="textInput"
-        contenteditable
+        contenteditable="true"
         class="input"
-        placeholder="Add a tag..."
+        :placeholder="isMaxReached
+          ? 'Max tags reached'
+          : 'Type or paste and press Enter...'"
         @input="handleInput"
         @paste.prevent="handlePaste"
       />
     </div>
+
+    <!-- Inline error display if needed -->
+    <p v-if="$props.error" class="text-xs text-red-500 mt-1">
+      {{ $props.error }}
+    </p>
+
+    <!-- Copy button / or any additional actions -->
     <div v-if="copyButton" class="flex justify-end mt-1">
-      <button class="btn neutral small" type="button" @click.prevent="copyText">
+      <button
+        class="btn neutral small"
+        type="button"
+        @click.prevent="copyText"
+      >
         Copy tags
       </button>
     </div>
@@ -168,42 +303,65 @@ function handlePaste(e: any) {
 </template>
 
 <style scoped>
+/* Container for all tags plus input */
 .tags-input {
+  @apply w-full flex flex-wrap gap-2 items-center shadow-sm bg-fv-neutral-50
+    border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm
+    focus-within:ring-fv-primary-500 focus-within:border-fv-primary-500
+    p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
+    dark:placeholder-fv-neutral-400 dark:text-white
+    dark:focus-within:ring-fv-primary-500 dark:focus-within:border-fv-primary-500;
   cursor: text;
-  @apply flex flex-wrap gap-2  items-center shadow-sm bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-sm focus:ring-fv-primary-500 focus:border-fv-primary-500 w-full p-2.5 dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white dark:focus:ring-fv-primary-500 dark:focus:border-fv-primary-500;
-  &.error {
-    @apply border-red-500  dark:border-red-400 border !important;
-  }
 }
-.tag-label {
-  @apply block mb-2 text-sm font-medium text-fv-neutral-900 dark:text-white;
+
+/* Error border */
+.tags-input.error {
+  @apply border-red-500 dark:border-red-400 border !important;
 }
+
+/* Tag styling */
 .tag {
-  @apply inline-flex gap-1   font-medium  px-2.5 py-0.5 rounded text-black dark:text-white;
-  &.blue {
-    @apply bg-blue-400  dark:bg-blue-900;
-  }
-  &.red {
-    @apply bg-red-400  dark:bg-red-900;
-  }
-  &.green {
-    @apply bg-green-400  dark:bg-green-900;
-  }
-  &.purple {
-    @apply bg-purple-400  dark:bg-purple-900;
-  }
-  &.orange {
-    @apply bg-orange-400  dark:bg-orange-900;
-  }
-  &.neutral {
-    @apply bg-fv-neutral-400  dark:bg-fv-neutral-900;
-  }
+  @apply inline-flex gap-1 items-center
+    font-medium px-2.5 py-0.5 rounded text-black
+    dark:text-white cursor-default;
+}
+
+/* Color variants */
+.tag.blue {
+  @apply bg-blue-400 dark:bg-blue-800;
+}
+.tag.red {
+  @apply bg-red-400 dark:bg-red-800;
+}
+.tag.green {
+  @apply bg-green-400 dark:bg-green-800;
+}
+.tag.purple {
+  @apply bg-purple-400 dark:bg-purple-800;
+}
+.tag.orange {
+  @apply bg-orange-400 dark:bg-orange-800;
+}
+.tag.neutral {
+  @apply bg-fv-neutral-400 dark:bg-fv-neutral-900;
 }
 
+/* The editable input area for new tags */
 .input {
-  flex-grow: 1;
-  min-width: 100px;
-  outline: none;
-  border: none;
+  @apply flex-grow min-w-[100px] outline-none border-none break-words;
+}
+
+/* Example button classes */
+.btn {
+  @apply inline-flex items-center justify-center rounded text-sm px-3 py-1
+    border border-transparent font-medium focus:outline-none
+    focus-visible:ring-2 focus-visible:ring-offset-2;
+}
+.btn.small {
+  @apply text-xs px-2 py-1;
+}
+.btn.neutral {
+  @apply bg-fv-neutral-300 hover:bg-fv-neutral-400 text-black
+    dark:bg-fv-neutral-600 dark:hover:bg-fv-neutral-500;
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.1.44",
+  "version": "2.1.46",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",