Tile asset management 90% done

src/components/forms/ChipsInput.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="chip-container">
+    <div v-for="(chip, i) in chips" :key="i" class="chip">
+      {{ chip }}
+      <i class="delete-icon" @click="deleteChip(i)">X</i>
+    </div>
+    <input
+      v-model="currentInput"
+      @keypress.enter="saveChip"
+      @keydown.delete="backspaceDelete"
+    >
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps } from 'vue'
+
+const props = defineProps({
+  set: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const chips = ref([])
+const currentInput = ref('')
+
+const saveChip = () => {
+  if ((props.set && !chips.value.includes(currentInput.value)) || !props.set) {
+    chips.value.push(currentInput.value)
+  }
+  currentInput.value = ''
+}
+
+const deleteChip = (index) => {
+  chips.value.splice(index, 1)
+}
+
+const backspaceDelete = (event) => {
+  if (event.key === 'Backspace' && currentInput.value === '') {
+    chips.value.pop()
+  }
+}
+</script>
+
+<style scoped>
+.chip-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.chip {
+  display: flex;
+  align-items: center;
+  background-color: #e0e0e0;
+  border-radius: 16px;
+  padding: 0 8px;
+  margin: 4px;
+}
+
+.chip i {
+  cursor: pointer;
+  font-size: 18px;
+  margin-left: 4px;
+}
+
+input {
+  border: none;
+  outline: none;
+  padding: 4px;
+  margin: 4px;
+}
+
+.delete-icon {
+  cursor: pointer;
+  color: red;
+  font-weight: bold;
+  font-family: Arial, sans-serif;
+}
+</style>