@fy-/fws-vue 2.2.57 → 2.2.58

package/components/ui/DefaultInput.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ErrorObject } from '@vuelidate/core'
-import { computed, ref, toRef } from 'vue'
+import { computed, ref, toRef, watch } from 'vue'
 import { useTranslation } from '../../composables/translations'
 import DefaultTagInput from './DefaultTagInput.vue'
 
@@ -54,6 +54,7 @@ const props = withDefaults(
 
 const translate = useTranslation()
 const inputRef = ref<HTMLInputElement>()
+const floatingActive = ref(false)
 
 const errorProps = toRef(props, 'error')
 const errorVuelidateProps = toRef(props, 'errorVuelidate')
@@ -67,6 +68,11 @@ const checkErrors = computed(() => {
   return null
 })
 
+// Determine if floating label should be active (input has value or is focused)
+watch(() => props.modelValue, (newVal) => {
+  if (newVal) floatingActive.value = true
+}, { immediate: true })
+
 function focus() {
   if (inputRef.value) inputRef.value.focus()
 }
@@ -85,12 +91,21 @@ const emit = defineEmits([
 ])
 
 function handleFocus() {
+  floatingActive.value = true
   emit('focus', props.id)
 }
 function handleBlur() {
+  if (!props.modelValue) floatingActive.value = false
   emit('blur', props.id)
 }
 
+// Copy input value to clipboard
+function copyToClipboard() {
+  if (props.modelValue) {
+    navigator.clipboard.writeText(props.modelValue.toString())
+  }
+}
+
 const model = computed<modelValueType>({
   get: () => props.modelValue,
   set: (value) => {
@@ -155,62 +170,93 @@ defineExpose({ focus, blur, getInputRef })
           "
           class="relative"
         >
+          <!-- Static label -->
           <label
-            v-if="showLabel && label"
+            v-if="showLabel && label && type === 'range'"
             :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 }} ({{ model }})
           </label>
 
-          <input
-            :id="id"
-            ref="inputRef"
-            v-model="model"
-            :type="type === 'datepicker' ? 'date' : type === 'phone' ? 'tel' : type"
-            :name="id"
+          <!-- Floating label (for all except range) -->
+          <label
+            v-if="showLabel && label && type !== 'range'"
+            :for="id"
+            class="absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-fv-neutral-50 dark:bg-fv-neutral-700 px-2 peer-focus:px-2 peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto start-1 pointer-events-none rounded"
             :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',
+              'text-fv-neutral-600 dark:text-fv-neutral-400': !floatingActive,
+              'text-fv-primary-600 dark:text-fv-primary-400': floatingActive,
+              'text-red-600 dark:text-red-400': checkErrors,
+              '-translate-y-4 scale-75 top-2 bg-fv-neutral-50 dark:bg-fv-neutral-700 px-2': floatingActive,
+              '-translate-y-1/2 scale-100 top-1/2 bg-transparent': !floatingActive,
             }"
-            :autocomplete="autocomplete"
-            :min="type === 'range' ? minRange : undefined"
-            :max="type === 'range' ? maxRange : undefined"
-            :placeholder="placeholder"
-            :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : undefined"
-            :required="req"
-            :aria-invalid="checkErrors ? 'true' : 'false'"
-            @focus="handleFocus"
-            @blur="handleBlur"
           >
+            {{ label }}
+          </label>
 
-          <!-- 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 }})
-            </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>
-            <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"
+          <!-- Input element -->
+          <div class="relative">
+            <input
+              :id="id"
+              ref="inputRef"
+              v-model="model"
+              :type="type === 'datepicker' ? 'date' : type === 'phone' ? 'tel' : type"
+              :name="id"
+              :class="{
+                'error': checkErrors,
+                'input-with-floating-label': showLabel && label && type !== 'range',
+                'bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-lg block w-full dark:bg-fv-neutral-700 dark:border-fv-neutral-600 dark:placeholder-fv-neutral-400 dark:text-white transition-all duration-200': type !== 'range',
+                'peer h-10 px-4 pt-5 pb-2': showLabel && label && type !== 'range',
+                'p-2.5': !(showLabel && label) || type === 'range',
+                'border-fv-primary-500 dark:border-fv-primary-500 focus:border-fv-primary-600 dark:focus:border-fv-primary-600': floatingActive && !checkErrors,
+                'focus:ring-2 focus:ring-fv-primary-300 dark:focus:ring-fv-primary-800 focus:ring-opacity-50': type !== 'range',
+                'w-full h-3 bg-fv-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-fv-neutral-700': type === 'range',
+                'pr-10': copyButton,
+              }"
+              :autocomplete="autocomplete"
+              :min="type === 'range' ? minRange : undefined"
+              :max="type === 'range' ? maxRange : undefined"
+              :placeholder="(!showLabel || !label) ? placeholder : ' '"
+              :disabled="disabled"
+              :aria-describedby="help ? `${id}-help` : undefined"
+              :required="req"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              @focus="handleFocus"
+              @blur="handleBlur"
             >
-              {{ (((maxRange - minRange) / 3) * 2 + minRange).toFixed(0) }}
-            </span>
-            <span
-              class="text-sm text-gray-500 dark:text-gray-400 absolute end-0 -bottom-6"
+
+            <!-- Copy button -->
+            <button
+              v-if="copyButton && model"
+              type="button"
+              aria-label="Copy to clipboard"
+              class="absolute inset-y-0 right-0 flex items-center pr-3 text-fv-neutral-500 hover:text-fv-primary-600 dark:text-fv-neutral-400 dark:hover:text-fv-primary-400"
+              @click="copyToClipboard"
             >
-              Max ({{ maxRange }})
-            </span>
+              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+              </svg>
+            </button>
+          </div>
+
+          <!-- Range Input Extra Labels -->
+          <template v-if="type === 'range'">
+            <div class="relative pt-6 mt-2">
+              <div class="flex justify-between gap-1 text-xs text-fv-neutral-500 dark:text-fv-neutral-400 px-1">
+                <span>{{ minRange }}</span>
+                <span>{{ ((maxRange - minRange) / 3 + minRange).toFixed(0) }}</span>
+                <span>{{ (((maxRange - minRange) / 3) * 2 + minRange).toFixed(0) }}</span>
+                <span>{{ maxRange }}</span>
+              </div>
+              <div class="w-full h-1 bg-fv-neutral-200 dark:bg-fv-neutral-700 rounded-full mt-1">
+                <div
+                  class="h-full bg-fv-primary-500 dark:bg-fv-primary-600 rounded-full"
+                  :style="{ width: `${((model as number || minRange) - minRange) / (maxRange - minRange) * 100}%` }"
+                />
+              </div>
+            </div>
           </template>
         </div>
 
@@ -261,16 +307,17 @@ defineExpose({ focus, blur, getInputRef })
               :required="req"
               :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
+                     border border-fv-neutral-300 focus:ring-2 focus:ring-fv-primary-300 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"
+                     dark:text-white dark:focus:ring-fv-primary-800 dark:focus:border-fv-primary-500
+                     transition-colors duration-200 shadow-sm"
               @focus="handleFocus"
               @blur="handleBlur"
             />
           </div>
           <div
             v-if="dpOptions.counterMax && model"
-            class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400"
+            class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400 mt-1 text-right"
             :class="{
               'text-red-500 dark:text-red-300':
                 model?.toString().length > dpOptions.counterMax,
@@ -304,16 +351,16 @@ defineExpose({ focus, blur, getInputRef })
             :required="req"
             :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"
+                   rounded-lg border border-fv-neutral-300 focus:ring-2 focus:ring-fv-primary-300 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-800 dark:focus:border-fv-primary-500
+                   transition-colors duration-200 shadow-sm min-h-[100px]"
             @focus="handleFocus"
             @blur="handleBlur"
           />
           <div
             v-if="dpOptions.counterMax && model"
-            class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400"
+            class="text-sm text-fv-neutral-500 dark:text-fv-neutral-400 mt-1 text-right"
             :class="{
               'text-red-500 dark:text-red-300':
                 model?.toString().length > dpOptions.counterMax,
@@ -332,34 +379,42 @@ defineExpose({ focus, blur, getInputRef })
           >
             {{ label }}
           </label>
-          <select
-            :id="id"
-            ref="inputRef"
-            v-model="model"
-            :name="id"
-            :disabled="disabled"
-            :aria-describedby="help ? `${id}-help` : undefined"
-            :required="req"
-            :class="{
-              error: checkErrors,
-            }"
-            :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()"
-              :value="opt[0]"
+          <div class="relative">
+            <select
+              :id="id"
+              ref="inputRef"
+              v-model="model"
+              :name="id"
+              :disabled="disabled"
+              :aria-describedby="help ? `${id}-help` : undefined"
+              :required="req"
+              :class="{
+                error: checkErrors,
+              }"
+              :aria-invalid="checkErrors ? 'true' : 'false'"
+              class="appearance-none bg-fv-neutral-50 border border-fv-neutral-300 text-fv-neutral-900 text-sm
+                     rounded-lg focus:ring-2 focus:ring-fv-primary-300 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-800
+                     dark:focus:border-fv-primary-500 shadow-sm transition-colors duration-200 pr-10"
+              @focus="handleFocus"
+              @blur="handleBlur"
             >
-              {{ opt[1] }}
-            </option>
-          </select>
+              <option
+                v-for="opt in options"
+                :key="opt[0]?.toString()"
+                :value="opt[0]"
+              >
+                {{ opt[1] }}
+              </option>
+            </select>
+            <!-- Dropdown arrow icon -->
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-fv-neutral-700 dark:text-fv-neutral-300">
+              <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
         </div>
       </div>
     </template>
@@ -367,9 +422,10 @@ defineExpose({ focus, blur, getInputRef })
     <!-- TOGGLE (switch) -->
     <template v-else-if="type === 'toggle'">
       <label
-        class="inline-flex items-center mb-5 cursor-pointer"
+        class="inline-flex items-center mb-5 cursor-pointer group"
         :class="{
-          error: checkErrors,
+          'error': checkErrors,
+          'opacity-70 cursor-not-allowed': disabled,
         }"
       >
         <input
@@ -394,7 +450,7 @@ defineExpose({ focus, blur, getInputRef })
                  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"
+                 peer-checked:bg-fv-primary-600 shadow-sm group-hover:shadow-md transition-all duration-200"
         />
         <span
           class="ms-3 text-sm font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
@@ -414,14 +470,16 @@ defineExpose({ focus, blur, getInputRef })
 
     <!-- CHECKBOX / RADIO -->
     <template v-else-if="type === 'checkbox' || type === 'radio'">
-      <div class="flex mb-4">
+      <div class="flex mb-4" :class="{ 'opacity-70 cursor-not-allowed': disabled }">
         <div class="flex items-center h-5">
           <input
             :id="id"
             ref="inputRef"
             v-model="modelCheckbox"
             :class="{
-              error: checkErrors,
+              'error': checkErrors,
+              'cursor-not-allowed': disabled,
+              'cursor-pointer': !disabled,
             }"
             :aria-describedby="help ? `${id}-help` : undefined"
             :type="type"
@@ -432,7 +490,8 @@ defineExpose({ focus, blur, getInputRef })
             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:ring-2 dark:bg-fv-neutral-700 dark:border-fv-neutral-600
+                   transition-colors duration-200 shadow-sm"
             @focus="handleFocus"
             @blur="handleBlur"
           >
@@ -440,7 +499,8 @@ defineExpose({ focus, blur, getInputRef })
         <div class="ms-2 text-sm">
           <label
             :for="id"
-            class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300"
+            class="font-medium text-fv-neutral-900 dark:text-fv-neutral-300 cursor-pointer"
+            :class="{ 'cursor-not-allowed': disabled }"
           >
             {{ label }}
           </label>
@@ -458,10 +518,13 @@ defineExpose({ focus, blur, getInputRef })
     <!-- Error message -->
     <p
       v-if="checkErrors"
-      class="mt-0.5 text-sm text-red-600 dark:text-red-300"
+      class="mt-0.5 text-sm text-red-600 dark:text-red-300 flex items-center"
       role="alert"
       aria-live="assertive"
     >
+      <svg class="w-4 h-4 mr-1.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+      </svg>
       {{ checkErrors }}
     </p>
 
@@ -481,7 +544,60 @@ input,
 textarea,
 select {
   &.error {
-    @apply border-red-500 dark:border-red-400;
+    @apply border-red-500 dark:border-red-400 focus:border-red-500 dark:focus:border-red-400 focus:ring-red-200 dark:focus:ring-red-800;
   }
 }
+
+/* Range input styling */
+input[type="range"] {
+  @apply appearance-none bg-transparent;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  @apply appearance-none w-4 h-4 rounded-full bg-fv-primary-500 dark:bg-fv-primary-600 cursor-pointer border-0 shadow-md;
+  margin-top: -0.5rem;
+}
+
+input[type="range"]::-moz-range-thumb {
+  @apply w-4 h-4 rounded-full bg-fv-primary-500 dark:bg-fv-primary-600 cursor-pointer border-0 shadow-md;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  @apply ring-2 ring-fv-primary-300 dark:ring-fv-primary-800;
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+  @apply ring-2 ring-fv-primary-300 dark:ring-fv-primary-800;
+}
+
+/* Textarea auto-grow */
+.grow-wrap {
+  @apply grid;
+}
+.grow-wrap::after {
+  content: attr(data-replicated-value) " ";
+  white-space: pre-wrap;
+  visibility: hidden;
+}
+.grow-wrap > textarea {
+  resize: none;
+  overflow: hidden;
+}
+.grow-wrap > textarea,
+.grow-wrap::after {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+/* Add smooth transitions */
+input, select, textarea, input[type="range"]::-webkit-slider-thumb, input[type="range"]::-moz-range-thumb {
+  @apply transition-all duration-200;
+}
+
+/* Floating label styling */
+.input-with-floating-label::placeholder {
+  @apply opacity-0;
+}
+.input-with-floating-label:focus::placeholder {
+  @apply opacity-100 transition-opacity duration-300;
+}
 </style>

package/components/ui/DefaultTagInput.vue

@@ -45,6 +45,7 @@ const props = withDefaults(
  */
 const textInput = ref<HTMLElement>()
 const isMaxReached = ref(false)
+const inputContainer = ref<HTMLElement>()
 
 const emit = defineEmits(['update:modelValue'])
 
@@ -62,7 +63,7 @@ const model = computed({
  * Compute aria-describedby IDs if help or error exist
  */
 const describedByIds = computed(() => {
-  const ids: any[] = []
+  const ids: string[] = []
   if (props.help) {
     ids.push(`help_tags_${props.id}`)
   }
@@ -95,7 +96,7 @@ onMounted(() => {
 })
 
 /**
- * Event Bus example (if you'd like notifications)
+ * Event Bus for notifications
  */
 const eventBus = useEventBus()
 
@@ -104,14 +105,23 @@ const eventBus = useEventBus()
  */
 async function copyText() {
   const text = model.value.join(', ')
-  await navigator.clipboard.writeText(text)
-
-  // Example event bus notification
-  eventBus.emit('SendNotif', {
-    title: 'Tags copied!',
-    type: 'success',
-    time: 2500,
-  })
+
+  try {
+    await navigator.clipboard.writeText(text)
+
+    eventBus.emit('SendNotif', {
+      title: 'Tags copied!',
+      type: 'success',
+      time: 2500,
+    })
+  }
+  catch {
+    eventBus.emit('SendNotif', {
+      title: 'Failed to copy tags',
+      type: 'error',
+      time: 2500,
+    })
+  }
 }
 
 /**
@@ -153,7 +163,7 @@ function addTag() {
     filteredTags.splice(slotsAvailable)
   }
 
-  model.value.push(...filteredTags)
+  model.value = [...model.value, ...filteredTags]
   textInput.value.textContent = ''
 }
 
@@ -161,7 +171,9 @@ function addTag() {
  * Remove a tag by index
  */
 function removeTag(index: number) {
-  model.value.splice(index, 1)
+  const newTags = [...model.value]
+  newTags.splice(index, 1)
+  model.value = newTags
   focusInput()
 }
 
@@ -172,7 +184,11 @@ function removeLastTag() {
   if (!textInput.value) return
   if (textInput.value.textContent === '') {
     // If input is empty, remove the last tag
-    model.value.pop()
+    if (model.value.length > 0) {
+      const newTags = [...model.value]
+      newTags.pop()
+      model.value = newTags
+    }
   }
   else {
     // Otherwise, remove the last character in the input
@@ -223,33 +239,49 @@ function handlePaste(e: ClipboardEvent) {
   e.preventDefault()
   addTag()
 }
+
+/**
+ * Handle keyboard navigation between tags
+ */
+function handleKeyNavigation(e: KeyboardEvent, index: number) {
+  if (e.key === 'ArrowLeft' && index > 0) {
+    const prevTag = inputContainer.value?.querySelector(`[data-index="${index - 1}"] button`) as HTMLElement
+    if (prevTag) prevTag.focus()
+  }
+  else if (e.key === 'ArrowRight' && index < model.value.length - 1) {
+    const nextTag = inputContainer.value?.querySelector(`[data-index="${index + 1}"] button`) as HTMLElement
+    if (nextTag) nextTag.focus()
+  }
+}
 </script>
 
 <template>
-  <div class="space-y-1 w-full">
-    <!-- Optional label -->
-    <label
-      v-if="label"
-      :id="`label_tags_${id}`"
-      :for="`tags_${id}`"
-      class="block text-sm font-medium dark:text-white"
-    >
-      {{ label }}
+  <div class="space-y-2 w-full">
+    <!-- Optional label with help text -->
+    <div v-if="label" class="flex items-center flex-wrap gap-1">
+      <label
+        :id="`label_tags_${id}`"
+        :for="`tags_${id}`"
+        class="block text-sm font-medium dark:text-white"
+      >
+        {{ label }}
+      </label>
       <!-- Optional help text -->
       <span
         v-if="help"
         :id="`help_tags_${id}`"
-        class="ml-1 text-xs text-fv-neutral-500 dark:text-fv-neutral-300"
+        class="text-xs text-fv-neutral-500 dark:text-fv-neutral-300"
       >
         {{ help }}
       </span>
-    </label>
+    </div>
 
     <div
+      ref="inputContainer"
       class="tags-input"
       :class="[
         $props.error ? 'error' : '',
-        isMaxReached ? 'pointer-events-none opacity-75' : '',
+        isMaxReached ? 'max-reached' : '',
       ]"
       role="textbox"
       :aria-labelledby="`label_tags_${id}`"
@@ -264,31 +296,34 @@ function handlePaste(e: ClipboardEvent) {
         v-for="(tag, index) in model"
         :key="`${tag}-${index}`"
         role="listitem"
+        :data-index="index"
         class="tag"
         :class="{
-          red: maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
-          [color]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
+          'tag-error': maxLenghtPerTag > 0 && tag.length > maxLenghtPerTag,
+          [`tag-${color}`]: maxLenghtPerTag === 0 || tag.length <= maxLenghtPerTag,
         }"
       >
-        {{ tag }}
+        <span class="tag-text">{{ tag }}</span>
         <button
           type="button"
-          class="flex items-center"
+          class="tag-remove"
           :aria-label="`Remove tag ${tag}`"
           @click.prevent="removeTag(index)"
+          @keydown="(e) => handleKeyNavigation(e, index)"
         >
           <svg
-            class="w-4 h-4"
+            class="w-3.5 h-3.5"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
-            stroke-width="2"
+            stroke-width="2.5"
             stroke="currentColor"
+            aria-hidden="true"
           >
             <path
               stroke-linecap="round"
               stroke-linejoin="round"
-              d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+              d="M6 18L18 6M6 6l12 12"
             />
           </svg>
         </button>
@@ -301,7 +336,7 @@ function handlePaste(e: ClipboardEvent) {
         contenteditable="true"
         tabindex="0"
         class="input"
-        :placeholder="isMaxReached
+        :data-placeholder="isMaxReached
           ? 'Max tags reached'
           : 'Type or paste and press Enter...'"
         :aria-placeholder="isMaxReached
@@ -312,6 +347,11 @@ function handlePaste(e: ClipboardEvent) {
       />
     </div>
 
+    <!-- Tag counter when maxTags is set -->
+    <div v-if="maxTags > 0" class="tag-counter">
+      <span>{{ model.length }}/{{ maxTags }}</span>
+    </div>
+
     <!-- Inline error display if needed -->
     <p
       v-if="$props.error"
@@ -323,12 +363,28 @@ function handlePaste(e: ClipboardEvent) {
     </p>
 
     <!-- Copy button / or any additional actions -->
-    <div v-if="copyButton" class="flex justify-end mt-1">
+    <div v-if="copyButton" class="copy-button-container">
       <button
-        class="btn neutral small"
+        class="copy-button"
         type="button"
+        :disabled="model.length === 0"
         @click.prevent="copyText"
       >
+        <svg
+          class="w-4 h-4 mr-1"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
+          />
+        </svg>
         Copy tags
       </button>
     </div>
@@ -338,49 +394,126 @@ function handlePaste(e: ClipboardEvent) {
 <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
-    dark:bg-fv-neutral-700 dark:border-fv-neutral-600
-    dark:placeholder-fv-neutral-400 dark:text-white p-1.5
-    dark:focus-within:ring-fv-primary-500 dark:focus-within:border-fv-primary-500;
+  @apply w-full flex flex-wrap gap-2 items-center bg-white
+    border border-fv-neutral-300 text-fv-neutral-900 text-sm rounded-md
+    focus-within:ring-2 focus-within:ring-fv-primary-500 focus-within:border-fv-primary-500
+    dark:bg-fv-neutral-800 dark:border-fv-neutral-600
+    dark:placeholder-fv-neutral-400 dark:text-white p-2
+    dark:focus-within:ring-fv-primary-500 dark:focus-within:border-fv-primary-500
+    transition-all duration-200 ease-in-out shadow-sm;
   cursor: text;
+  min-height: 2.5rem;
+}
+
+/* Max tags reached state */
+.tags-input.max-reached {
+  @apply opacity-80 pointer-events-none bg-fv-neutral-100 dark:bg-fv-neutral-900;
 }
 
 /* Error border */
 .tags-input.error {
-  @apply border-red-500 dark:border-red-400 border !important;
+  @apply border-red-500 dark:border-red-400 ring-1 ring-red-500 dark:ring-red-400 !important;
 }
 
-/* Tag styling */
+/* Tag base styling */
 .tag {
-  @apply inline-flex gap-1 items-center
-    font-medium px-2.5 py-1 rounded text-black
-    dark:text-white cursor-default !important;
+  @apply inline-flex items-center justify-between
+    text-sm font-medium rounded-full px-3 py-1
+    dark:text-white transition-all duration-200 ease-in-out;
 }
 
-/* Color variants */
-.tag.blue {
-  @apply bg-blue-400 dark:bg-blue-800;
+.tag-text {
+  @apply mr-1.5 truncate max-w-[200px];
 }
-.tag.red {
-  @apply bg-red-400 dark:bg-red-800;
+
+/* Tag remove button */
+.tag-remove {
+  @apply rounded-full p-0.5 flex items-center justify-center
+    hover:bg-black/10 dark:hover:bg-white/20
+    focus:outline-none focus:ring-2 focus:ring-offset-1
+    transition-colors duration-200;
+  height: 18px;
+  width: 18px;
 }
-.tag.green {
-  @apply bg-green-400 dark:bg-green-800;
+
+/* Color variants with modern styling */
+.tag-blue {
+  @apply bg-blue-100 text-blue-800
+    dark:bg-blue-900/70 dark:text-blue-100
+    ring-1 ring-blue-400/30 dark:ring-blue-700/30;
 }
-.tag.purple {
-  @apply bg-purple-400 dark:bg-purple-800;
+
+.tag-red, .tag-error {
+  @apply bg-red-100 text-red-800
+    dark:bg-red-900/70 dark:text-red-100
+    ring-1 ring-red-400/30 dark:ring-red-700/30;
+}
+
+.tag-green {
+  @apply bg-green-100 text-green-800
+    dark:bg-green-900/70 dark:text-green-100
+    ring-1 ring-green-400/30 dark:ring-green-700/30;
+}
+
+.tag-purple {
+  @apply bg-purple-100 text-purple-800
+    dark:bg-purple-900/70 dark:text-purple-100
+    ring-1 ring-purple-400/30 dark:ring-purple-700/30;
 }
-.tag.orange {
-  @apply bg-orange-400 dark:bg-orange-800;
+
+.tag-orange {
+  @apply bg-orange-100 text-orange-800
+    dark:bg-orange-900/70 dark:text-orange-100
+    ring-1 ring-orange-400/30 dark:ring-orange-700/30;
 }
-.tag.neutral {
-  @apply bg-fv-neutral-400 dark:bg-fv-neutral-900;
+
+.tag-neutral {
+  @apply bg-fv-neutral-100 text-fv-neutral-800
+    dark:bg-fv-neutral-700/70 dark:text-fv-neutral-100
+    ring-1 ring-fv-neutral-400/30 dark:ring-fv-neutral-500/30;
 }
 
 /* The editable input area for new tags */
 .input {
-  @apply flex-grow min-w-[100px] outline-none border-none break-words;
+  @apply flex-grow min-w-[100px] outline-none border-none break-words p-1;
+  min-height: 1.5rem;
+}
+
+/* Placeholder styling */
+.input:empty:before {
+  content: attr(data-placeholder);
+  @apply text-fv-neutral-400 dark:text-fv-neutral-500;
+}
+
+/* Copy button styling */
+.copy-button-container {
+  @apply flex justify-end mt-2;
+}
+
+.copy-button {
+  @apply inline-flex items-center justify-center
+    bg-fv-neutral-100 hover:bg-fv-neutral-200
+    text-fv-neutral-700 dark:text-fv-neutral-200
+    dark:bg-fv-neutral-700 dark:hover:bg-fv-neutral-600
+    px-3 py-1.5 rounded-md text-sm font-medium
+    transition-colors duration-200 ease-in-out
+    focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fv-primary-500
+    disabled:opacity-50 disabled:cursor-not-allowed;
+}
+
+/* Tag counter styling */
+.tag-counter {
+  @apply text-xs text-right text-fv-neutral-500 dark:text-fv-neutral-400 mt-1;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .tag-text {
+    @apply max-w-[120px];
+  }
+
+  .tags-input {
+    @apply p-1.5;
+  }
 }
 </style>

package/package.json

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