Worked on zone objects, tile tags and searching

src/components/forms/ChipsInput.vue

@@ -1,44 +1,34 @@
 <template>
   <div class="chip-container">
-    <div v-for="(chip, i) in chips" :key="i" class="chip">
+    <div v-for="(chip, i) in modelValue" :key="i" class="chip">
       <span>{{ chip }}</span>
       <i class="delete-icon" @click="deleteChip(i)">X</i>
     </div>
-    <input
-      v-model="currentInput"
-      @keypress.enter="saveChip"
-      @keydown.delete="backspaceDelete"
-    >
+    <input v-model="currentInput" @keyup.enter="saveChip" @keydown.delete="backspaceDelete" />
   </div>
 </template>
 
 <script setup>
-import { ref, defineProps } from 'vue'
+import { ref } from 'vue'
 
-const props = defineProps({
-  set: {
-    type: Boolean,
-    default: true
-  }
-})
+const modelValue = defineModel('modelValue', { type: Array, default: () => [] })
 
-const chips = ref([])
 const currentInput = ref('')
 
 const saveChip = () => {
-  if ((props.set && !chips.value.includes(currentInput.value)) || !props.set) {
-    chips.value.push(currentInput.value)
+  if (currentInput.value.trim() && !modelValue.value.includes(currentInput.value)) {
+    modelValue.value = [...modelValue.value, currentInput.value]
+    currentInput.value = ''
   }
-  currentInput.value = ''
 }
 
 const deleteChip = (index) => {
-  chips.value.splice(index, 1)
+  modelValue.value = modelValue.value.filter((_, i) => i !== index)
 }
 
 const backspaceDelete = (event) => {
-  if (event.key === 'Backspace' && currentInput.value === '') {
-    chips.value.pop()
+  if (event.key === 'Backspace' && currentInput.value === '' && modelValue.value.length > 0) {
+    modelValue.value = modelValue.value.slice(0, -1)
   }
 }
 </script>
@@ -78,11 +68,7 @@ const backspaceDelete = (event) => {
     outline: none;
     padding: 4px;
     margin: 4px;
-    color:white;
+    color: white;
   }
-
-  
 }
-
-
-</style>
+</style>