Update code: fixed bugs and added new features

src/components/SelectMulti.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+interface DataItem {
+  id: number;
+  name: string;
+}
+
+import { ref, computed, onMounted } from 'vue'
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxButton,
+  ComboboxOptions,
+  ComboboxOption,
+  TransitionRoot
+} from '@headlessui/vue'
+import { CheckIcon, ChevronUpDownIcon } from '@heroicons/vue/20/solid'
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  data: {
+    type: Array as () => DataItem[],
+    default: []
+  }
+})
+const emit = defineEmits(["update:selected"])
+
+const data = computed(() => [{ id: 0, name: props.placeholder }, ...props.data]);
+
+let selected = ref<DataItem[]>([data.value[0]])
+let query = ref('')
+let filteredData = computed(() =>
+  query.value === ''
+    ? data.value
+    : data.value.filter((item: DataItem) =>
+      item.name
+        .toLowerCase()
+        .replace(/\s+/g, '')
+        .includes(query.value.toLowerCase().replace(/\s+/g, ''))
+    )
+)
+
+const show = ref(false)
+ const removeJenis = (item: DataItem) => {
+    selected.value = selected.value.filter((i) => i.id !== item.id)
+  }
+onMounted(() => {
+})
+
+
+</script>
+
+<template>
+  <Combobox @update:modelValue="value => emit('update:selected', value)" v-model="selected" v-slot="{ open }" multiple="">
+    <div class="relative mt-1">
+      
+      <div
+        class="relative w-full cursor-default overflow-hidden rounded-lg bg-gray-200 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+        <ComboboxInput class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :displayValue="(item: any) => (show || open ? '' : item.name)" @change="query = $event.target.value"
+          @click="show = true" @blur="show = false" defaultValue="" />
+
+        <ComboboxButton id="Test" class="absolute inset-y-0 right-0 flex items-center pr-2">
+          <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
+        </ComboboxButton>
+      </div>
+      <span class="block flex flex-wrap gap-2">
+        <span v-if="selected.length == 0" class="p-0.5">Empty</span>
+        <span v-for="item in selected" :key="item.id" class="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10">
+          <span>{{ item.name }}</span>
+          <svg class="h-4 w-4 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg" @click.stop.prevent="removeJenis(item)">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </span>
+      </span>
+      <TransitionRoot :show="show || open" leave="transition ease-in duration-100" leaveFrom="opacity-100"
+        leaveTo="opacity-0" @after-leave="query = ''">
+        <ComboboxOptions static
+          class="absolute mt-1 z-10 max-h-60 w-full overflow-auto rounded-md bg-gray-200 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+          <div v-if="filteredData.length === 0 && query !== ''"
+            class="relative cursor-default select-none py-2 px-4 text-gray-700">
+            Nothing found.
+          </div>
+
+          <ComboboxOption v-for="item in filteredData" as="template" :key="item.id" :value="item"
+            v-slot="{ selected, active }">
+            <li class="relative cursor-default select-none py-2 pl-10 pr-4" :class="{
+              'bg-teal-600 text-white': active,
+              'text-gray-900': !active
+            }">
+              <span class="block truncate" :class="{ 'font-medium': selected, 'font-normal': !selected }">
+                {{ item.name }}
+              </span>
+              <span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3"
+                :class="{ 'text-white': active, 'text-teal-600': !active }">
+                <CheckIcon class="h-5 w-5" aria-hidden="true" />
+              </span>
+            </li>
+          </ComboboxOption>
+        </ComboboxOptions>
+      </TransitionRoot>
+    </div>
+  </Combobox>
+</template>