feat: add support for arbitrary model type in TagInput

src/components/generic/TagInput.vue

@@ -18,7 +18,7 @@
       :key="index"
       class="tw-py-1 tw-px-2 tw-flex tw-items-center tw-bg-gray-100 tw-flex-none tw-rounded tw-max-w-full"
     >
-      <span class="tw-min-w-0 tw-truncate tw-flex-1">{{ tag }}</span>
+      <span class="tw-min-w-0 tw-truncate tw-flex-1">{{ getLabel(tag) }}</span>
       <button type="button" class="btn tw-text-xs tw-p-0 tw-flex-none" @click="removeTag(index)">
         <icon-system-uicons-cross />
       </button>
@@ -26,17 +26,29 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts" setup generic="T = string">
 import { computed, ref } from 'vue'
 import { useUpdatableState } from '@/util'
 
 defineOptions({ compatConfig: { MODE: 3 } })
 
-const props = defineProps<{
-  modelValue: string[]
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: T[]
+    transformInput?: (input: {
+      label: string
+      key: string | number | undefined
+    }) => Promise<T | undefined>
+    getLabel?: (value: T) => string
+  }>(),
+  {
+    list: undefined,
+    transformInput: async ({ label }: { label: string }) => label as T,
+    getLabel: (value: T) => value as string,
+  },
+)
 const emit = defineEmits<{
-  'update:modelValue': [string[]]
+  'update:modelValue': [T[]]
 }>()
 const value = useUpdatableState(
   computed(() => props.modelValue),
@@ -45,9 +57,12 @@ const value = useUpdatableState(
 const tagInputValue = ref('')
 const inputEl = ref<HTMLInputElement>()
 
-function addTag() {
-  value.value.push(tagInputValue.value)
-  tagInputValue.value = ''
+async function addTag(label: string, key?: number | string | undefined) {
+  const newValue = await props.transformInput({ label, key })
+  if (newValue !== undefined) {
+    value.value.push(newValue)
+    tagInputValue.value = ''
+  }
 }
 
 function removeTag(index: number) {