feat: add Tag component

src/components/generic/Tag.vue

+<template>
+  <span
+    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">{{ label }}</span>
+    <button
+      v-if="removable"
+      type="button"
+      class="btn tw-text-xs tw-p-0 tw-flex-none"
+      @click="emit('remove')"
+    >
+      <icon-system-uicons-cross />
+    </button>
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ compatConfig: { MODE: 3 } })
+defineProps<{
+  label: string
+  removable?: boolean
+}>()
+const emit = defineEmits<{
+  remove: []
+}>()
+</script>

src/components/generic/TagInput.vue

@@ -13,22 +13,20 @@
       @click.stop
     />
 
-    <span
+    <Tag
       v-for="(tag, index) in modelValue"
       :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">{{ 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>
-    </span>
+      :label="getLabel(tag)"
+      removable
+      @remove="removeTag(index)"
+    />
   </div>
 </template>
 
 <script lang="ts" setup generic="T = string">
 import { computed, ref } from 'vue'
 import { useUpdatableState } from '@/util'
+import Tag from '@/components/generic/Tag.vue'
 
 defineOptions({ compatConfig: { MODE: 3 } })