npm update, npm run format, cleaned and enhanced chipsInput JS

src/components/forms/ChipsInput.vue

@@ -2,54 +2,45 @@
   <div class="flex flex-wrap items-center input-cyan gap-1">
     <div v-for="(chip, i) in modelValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
       <span class="text-xs">{{ chip }}</span>
-      <i class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
+      <button type="button" class="text-xs cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)" aria-label="Remove chip">X</button>
     </div>
-    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
+    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, watch } from 'vue'
+import type { Ref } from 'vue'
 
-const props = defineProps({
-  modelValue: {
-    type: Array,
-    default: () => []
-  }
-})
+interface Props {
+  modelValue: string[]
+}
 
-const emit = defineEmits(['update:modelValue'])
+const props = defineProps<Props>()
 
-const currentInput = ref('')
-const internalValue = ref(props.modelValue || [])
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string[]): void
+}>()
 
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    internalValue.value = newVal || []
-  },
-  { immediate: true }
-)
+const currentInput: Ref<string> = ref('')
 
-const saveChip = (event) => {
-  event.preventDefault()
-
-  if (currentInput.value.trim() && !internalValue.value.includes(currentInput.value)) {
-    emit('update:modelValue', [...internalValue.value, currentInput.value])
+const addChip = () => {
+  if (currentInput.value.trim() && !props.modelValue.includes(currentInput.value)) {
+    emit('update:modelValue', [...props.modelValue, currentInput.value.trim()])
     currentInput.value = ''
   }
 }
 
-const deleteChip = (index) => {
+const deleteChip = (index: number) => {
   emit(
     'update:modelValue',
-    internalValue.value.filter((_, i) => i !== index)
+    props.modelValue.filter((_, i) => i !== index)
   )
 }
 
-const backspaceDelete = (event) => {
-  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
-    emit('update:modelValue', internalValue.value.slice(0, -1))
+const handleBackspace = (event: KeyboardEvent) => {
+  if (event.key === 'Backspace' && currentInput.value === '' && props.modelValue.length > 0) {
+    emit('update:modelValue', props.modelValue.slice(0, -1))
   }
 }
 </script>