add component for selecting contributors

components/ContributorSelector.vue

@@ -0,0 +1,75 @@
+<script
+  setup
+  lang="ts"
+  generic="TOption extends string | number | boolean | object"
+>
+import type { ContributorModel } from "@bcc-code/bmm-sdk-fetch";
+import { ContributorApi } from "@bcc-code/bmm-sdk-fetch";
+
+defineProps<{
+  label?: string;
+  options: TOption[];
+  optionKey: (option: TOption) => string | number;
+  displayValue: (option: TOption) => string;
+}>();
+
+const modelValue = defineModel<ContributorModel[]>();
+const searchTerm = ref<string>("");
+const contributors = ref<ContributorModel[]>([]);
+//const search = defineModel<string>("search");
+
+watchDebounced(
+  searchTerm,
+  async (search) => {
+    if (search === "" || !search) {
+      contributors.value = [];
+      return;
+    }
+    contributors.value =
+      await new ContributorApi().contributorSearchUnpublishedTermGet({
+        term: search,
+      });
+  },
+  { debounce: 100, immediate: true },
+);
+</script>
+
+<template>
+  <div>
+    <div v-if="label" class="type-subtitle-2 mb-1 block text-label-1">
+      {{ label }}
+    </div>
+    <div>
+      <div
+        v-for="item in modelValue"
+        v-bind:key="item.id"
+        class="bg-background-2 px-4 py-2"
+      >
+        {{ item.name }}
+        <div class="inline-block" @click="modelValue = []">
+          <NuxtIcon name="icon.close.small" class="opacity-50" />
+        </div>
+      </div>
+    </div>
+    <input
+      ref="searchbox"
+      v-model="searchTerm"
+      type="text"
+      placeholder="add a contributor"
+      class="w-full truncate rounded-lg border border-label-separator bg-background-2 px-4 py-2"
+    />
+    <div v-if="contributors.length > 0" class="absolute z-50 rounded-xl p-1">
+      <div
+        class="min-w-56 max-w-80 select-none overflow-y-auto whitespace-nowrap rounded-xl bg-background-3 p-1 text-sm shadow-lg ring-1 ring-label-separator focus-visible:outline-none"
+      >
+        <div
+          v-for="item in contributors"
+          v-bind:key="item.id"
+          class="type-subtitle-2 flex w-full items-center justify-between whitespace-normal rounded-lg px-3 py-2 text-left"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

pages/lyrics/[id].vue

@@ -169,34 +169,15 @@ function useDefaultLongCopyright() {
       </header>
       <div class="grid gap-8 lg:grid-cols-2 lg:grid-rows-1">
         <div class="row-start-1 flex flex-col gap-6 md:col-start-2">
-          <ComboSearchBox
+          <ContributorSelector
             v-model:search="contributorSearch"
             v-model="lyricists"
             :label="$t('track.details.text')"
             :options="contributors"
             :option-key="(c) => c.id"
             :display-value="(option) => option.name!"
           >
-            <template #option="{ option, selected }">
-              <div class="flex grow items-baseline gap-2">
-                <span>{{ option.name }}</span>
-                <div
-                  class="type-subtitle-3 flex items-baseline gap-0.5 text-label-3"
-                >
-                  <span>{{ option.interpretReferences }}</span>
-                  ·
-                  <span>{{ option.otherReferences }}</span>
-                </div>
-                <NuxtIcon
-                  :class="[
-                    'ml-auto',
-                    { 'opacity-100': selected, 'opacity-0': !selected },
-                  ]"
-                  name="icon.checkmark"
-                />
-              </div>
-            </template>
-          </ComboSearchBox>
+          </ContributorSelector>
           <ComboSearchBox
             v-model:search="contributorSearch"
             v-model="composers"