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

package-lock.json

@@ -4836,9 +4836,9 @@
       }
     },
     "node_modules/jsdom": {
-      "version": "24.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
-      "integrity": "sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==",
+      "version": "24.1.1",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.1.tgz",
+      "integrity": "sha512-5O1wWV99Jhq4DV7rCLIoZ/UIhyQeDR7wHVyZAHAshbrvZsLs+Xzz7gtwnlJTJDjleiTKh54F4dXrX70vJQTyJQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4848,11 +4848,11 @@
         "form-data": "^4.0.0",
         "html-encoding-sniffer": "^4.0.0",
         "http-proxy-agent": "^7.0.2",
-        "https-proxy-agent": "^7.0.4",
+        "https-proxy-agent": "^7.0.5",
         "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.10",
+        "nwsapi": "^2.2.12",
         "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.7.0",
+        "rrweb-cssom": "^0.7.1",
         "saxes": "^6.0.0",
         "symbol-tree": "^3.2.4",
         "tough-cookie": "^4.1.4",
@@ -4861,7 +4861,7 @@
         "whatwg-encoding": "^3.1.1",
         "whatwg-mimetype": "^4.0.0",
         "whatwg-url": "^14.0.0",
-        "ws": "^8.17.0",
+        "ws": "^8.18.0",
         "xml-name-validator": "^5.0.0"
       },
       "engines": {

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>

src/components/utilities/Controls.vue

@@ -1,11 +1,5 @@
 <template>
-  <Image
-    :depth="2"
-    texture="waypoint"
-    :x="waypoint.x"
-    :y="waypoint.y"
-    :visible="waypoint.visible"
-  />
+  <Image :depth="2" texture="waypoint" :x="waypoint.x" :y="waypoint.y" :visible="waypoint.visible" />
 </template>
 
 <script setup lang="ts">