From 7c4f626c5a3a037100579fafd8a897ab78b5880f Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Sun, 8 Sep 2024 15:08:18 +0200
Subject: [PATCH] #78 : Fixed chipsInput component

---
 src/components/forms/ChipsInput.vue           | 52 +++++++++++++------
 .../partials/object/ObjectDetails.vue         |  2 +-
 .../partials/tile/TileDetails.vue             |  2 +-
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 0fcf4ad..fd48ba7 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -1,46 +1,68 @@
 <template>
   <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">
+    <div v-for="(chip, i) in internalValue" :key="i" class="flex gap-2.5 items-center bg-cyan rounded py-1 px-2">
       <span class="text-xs">{{ chip }}</span>
-      <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>
+      <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"
+      >
+        ×
+      </button>
     </div>
-    <input class="outline-none border-none p-1" placeholder="Tag name" v-model="currentInput" @keypress.enter.prevent="addChip" @keydown.backspace="handleBackspace" />
+    <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 lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import type { Ref } from 'vue'
 
 interface Props {
-  modelValue: string[]
+  modelValue?: string[]
 }
 
-const props = defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => []
+})
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string[]): void
 }>()
 
 const currentInput: Ref<string> = ref('')
+const internalValue = ref<string[]>([])
+
+// Initialize internalValue with props.modelValue
+watch(() => props.modelValue, (newValue) => {
+  internalValue.value = newValue ? [...newValue] : []
+}, { immediate: true })
 
 const addChip = () => {
-  if (currentInput.value.trim() && !props.modelValue.includes(currentInput.value)) {
-    emit('update:modelValue', [...props.modelValue, currentInput.value.trim()])
+  const trimmedInput = currentInput.value.trim()
+  if (trimmedInput && !internalValue.value.includes(trimmedInput)) {
+    internalValue.value.push(trimmedInput)
+    emit('update:modelValue', internalValue.value)
     currentInput.value = ''
   }
 }
 
 const deleteChip = (index: number) => {
-  emit(
-    'update:modelValue',
-    props.modelValue.filter((_, i) => i !== index)
-  )
+  internalValue.value.splice(index, 1)
+  emit('update:modelValue', internalValue.value)
 }
 
 const handleBackspace = (event: KeyboardEvent) => {
-  if (event.key === 'Backspace' && currentInput.value === '' && props.modelValue.length > 0) {
-    emit('update:modelValue', props.modelValue.slice(0, -1))
+  if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
+    internalValue.value.pop()
+    emit('update:modelValue', internalValue.value)
   }
 }
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
index 32694cb..aa07b08 100644
--- a/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue
@@ -65,7 +65,7 @@ const zoneEditorStore = useZoneEditorStore()
 const selectedObject = computed(() => assetManagerStore.selectedObject)
 
 const objectName = ref('')
-const objectTags = ref([] as string[])
+const objectTags = ref<string[]>([])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 const objectIsAnimated = ref(false)
diff --git a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
index 9e56c72..4e949e9 100644
--- a/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
+++ b/src/components/gameMaster/assetManager/partials/tile/TileDetails.vue
@@ -38,7 +38,7 @@ const zoneEditorStore = useZoneEditorStore()
 const selectedTile = computed(() => assetManagerStore.selectedTile)
 
 const tileName = ref('')
-const tileTags = ref()
+const tileTags = ref<string[]>([])
 
 if (!selectedTile.value) {
   console.error('No tile selected')