ServiceAccordion の実装

src/components/UI/BaseSelect.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
+import { computed } from 'vue'
+import Icon from '/@/components/UI/Icon.vue'
+
+interface Props {
+  modelValue: string
+  options: string[]
+  searchable?: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const value = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v)
+})
+</script>
+
+<template>
+  <v-select
+    v-model="value"
+    :options="options"
+    :clearable="false"
+    :class="$style.select"
+    :searchable="searchable"
+  >
+    <template #option="{ label }">
+      <div :class="$style.item">
+        <icon
+          v-if="value === label"
+          name="mdi:tick-circle-outline"
+          :class="$style.icon"
+        />
+        <p :class="$style.label">{{ label }}</p>
+      </div>
+    </template>
+  </v-select>
+</template>
+
+<style lang="scss" module>
+.item {
+  display: grid;
+  grid-template-columns: 24px 1fr;
+  gap: 8px;
+  .icon {
+    color: $color-primary;
+  }
+  .label {
+    grid-column: 2;
+  }
+}
+
+.select {
+  --vs-border-radius: 8px;
+  --vs-border-color: #{$color-primary};
+
+  // dropdown のスタイル
+  :global(.vs__dropdown-menu) {
+    margin-top: 8px;
+    border-top-style: solid;
+    border-radius: var(--vs-border-radius);
+    --vs-dropdown-option-padding: 4px 8px;
+
+    --vs-dropdown-option--active-bg: #{$color-background-dim};
+    --vs-dropdown-option--active-color: #{$color-text};
+  }
+
+  // combobox のスタイル
+  :global(.vs__dropdown-toggle) {
+    --vs-selected-color: #{$color-text};
+    border-color: $color-secondary;
+    border-radius: var(--vs-border-radius);
+
+    // combobox の右側のアイコン
+    --vs-actions-padding: 4px 8px 0 3px;
+    --vs-controls-color: #{$color-secondary-text};
+  }
+
+  // dropdown が開いているときの combobox のスタイル
+  &:global(.vs--open) {
+    :global(.vs__dropdown-toggle) {
+      border-color: var(--vs-border-color);
+    }
+
+    :global(.vs__selected) {
+      opacity: 1;
+    }
+  }
+}
+</style>

src/components/UI/ServiceAccordion.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BaseSelect from '/@/components/UI/BaseSelect.vue'
+import { services, serviceNameToType } from '/@/consts/services'
+import { AccountType } from '/@/lib/apis'
+
+const options = Array.from(services.values()).map(service => service.name)
+
+interface Props {
+  modelValue: AccountType
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: AccountType): void
+}>()
+
+const value = computed({
+  get: () => services.get(props.modelValue)?.name ?? '',
+  set: v =>
+    emit('update:modelValue', serviceNameToType(v) ?? AccountType.homepage)
+})
+</script>
+
+<template>
+  <base-select v-model="value" :options="options" searchable />
+</template>

src/consts/services.ts

@@ -100,3 +100,10 @@ export const services: ServiceRecord = new Map([
 export const serviceArray: ServiceWithType[] = Array.from(
   services.entries()
 ).map(([type, service]) => ({ ...service, type }))
+
+export const serviceNameToType = (name: string): AccountType | undefined => {
+  const entry = Array.from(services).find(
+    ([, service]) => service.name === name
+  )
+  return entry?.[0]
+}