メンバー入力コンポーネント

package.json

@@ -18,7 +18,8 @@
     "pinia": "^2.0.22",
     "ress": "^5.0.2",
     "vue": "^3.2.39",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.5",
+    "vue-select": "^4.0.0-beta.5"
   },
   "devDependencies": {
     "@iconify/json": "^2.1.106",

src/components/UI/MemberInput.vue

@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
+
+import { computed, nextTick, onUnmounted, ref } from 'vue'
+import { User } from '/@/lib/apis'
+import { useUserStore } from '/@/store/user'
+import UserIcon from './UserIcon.vue'
+
+const store = useUserStore()
+const { users } = storeToRefs(store)
+store.fetchUsers()
+
+interface Props {
+  modelValue: User[]
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: User[]): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
+
+const limit = ref(10)
+const search = ref('')
+
+const filtered = computed(
+  () => users.value?.filter(user => user.name.includes(search.value)) ?? []
+)
+const options = computed(() => filtered.value.slice(0, limit.value))
+const hasNextPage = computed(() => filtered.value.length > options.value.length)
+
+const onSearch = (v: string) => {
+  search.value = v
+}
+
+const infiniteScroll = async (entries: IntersectionObserverEntry[]) => {
+  const entry = entries[0]
+  if (entry?.isIntersecting) {
+    const ul = (entry.target as HTMLUListElement).offsetParent
+    const scrollTop = ul?.scrollTop ?? 0
+    limit.value += 10
+
+    await nextTick()
+    if (ul !== null) {
+      ul.scrollTop = scrollTop
+    }
+  }
+}
+
+const footerRef = ref<HTMLUListElement>()
+const observer = new IntersectionObserver(infiniteScroll)
+onUnmounted(() => {
+  observer.disconnect()
+})
+
+const onOpen = async () => {
+  if (!hasNextPage.value) return
+
+  await nextTick()
+  if (footerRef.value !== undefined) {
+    observer.observe(footerRef.value)
+  }
+}
+const onClose = () => {
+  observer.disconnect()
+}
+</script>
+
+<template>
+  <v-select
+    v-model="value"
+    :options="options"
+    placeholder="メンバー"
+    label="name"
+    :class="$style.select"
+    class="select"
+    multiple
+    :close-on-select="false"
+    deselect-from-dropdown
+    @open="onOpen"
+    @close="onClose"
+    @search="onSearch"
+  >
+    <template #selected-option-container="{ option }">
+      <p class="vs__selected">{{ option.name }},</p>
+    </template>
+    <template #option="{ name }">
+      <div :class="$style.item">
+        <user-icon :user-id="name" />
+        <p>{{ name }}</p>
+      </div>
+    </template>
+    <template #list-footer>
+      <li v-if="hasNextPage" ref="footerRef">Loading...</li>
+    </template>
+    <template #no-options>
+      <p>ユーザーが見つかりませんでした</p>
+    </template>
+  </v-select>
+</template>
+
+<style lang="scss" module>
+.select {
+  --vs-dropdown-option-padding: 4px 8px;
+  --vs-search-input-placeholder-color: #{$color-secondary};
+  --vs-border-color: #{$color-secondary};
+  --vs-dropdown-option--active-bg: #{$color-background-dim};
+  --vs-dropdown-option--active-color: #{$color-text};
+  --vs-dropdown-option--deselect-bg: #{$color-background-dim};
+  --vs-dropdown-option--deselect-color: #{$color-text};
+  --vs-selected-border-style: none;
+  --vs-selected-bg: transparent;
+  --vs-selected-color: #{$color-text};
+  --vs-controls-color: #{$color-secondary};
+  &:focus-within {
+    --vs-border-color: #{$color-primary};
+  }
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  line-height: 2rem;
+  &[aria-selected='true'] {
+    background-color: $color-background-dim;
+  }
+}
+
+.select :global(.vs__selected-options) {
+  &::before {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background-color: $color-secondary;
+    mask: url('/icons/account.svg') no-repeat center center;
+    margin-top: 4px;
+    margin-left: 4px;
+  }
+  &:focus-within::before {
+    background-color: $color-primary;
+  }
+}
+.select :global(.vs__dropdown-option--selected) {
+  background-color: $color-background-dim;
+  &:hover {
+    filter: brightness(0.95);
+  }
+}
+</style>

src/components/UI/UserIcon.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+interface Props {
+  userId: string
+  size?: number
+}
+const props = withDefaults(defineProps<Props>(), { size: 24 })
+const src = computed(
+  () =>
+    // TODO: userIdから画像を読み込む `https://q.trap.jp/api/v3/public/icon/${props.userId}`
+    `https://q.trap.jp/api/v3/public/icon/toshi00`
+)
+
+const styles = computed(() => ({
+  height: `${props.size}px`,
+  width: `${props.size}px`
+}))
+</script>
+
+<template>
+  <img :class="$style.icon" :src="src" :style="styles" />
+</template>
+
+<style lang="scss" module>
+.icon {
+  border-radius: 50%;
+}
+</style>

src/store/user.ts

@@ -0,0 +1,23 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+import apis, { User } from '/@/lib/apis'
+
+export const useUserStore = defineStore('user', () => {
+  const users = ref<User[] | null>(null)
+
+  const fetchUsers = async () => {
+    if (users.value !== null) {
+      return users.value
+    }
+
+    const res = await apis.getUsers()
+    users.value = res.data
+    return res.data
+  }
+
+  return {
+    users,
+    fetchUsers
+  }
+})

src/types/vue-select.d.ts

@@ -0,0 +1 @@
+declare module 'vue-select'