Merge pull request #4244 from traPtitech/feat/search_in_form_selector

FormSelectorFilterable.vueを作成

package.json

@@ -47,6 +47,7 @@
     "turndown-plugin-gfm": "^1.0.2",
     "vue": "^3.3.4",
     "vue-router": "^4.1.5",
+    "vue-select": "^4.0.0-beta.6",
     "vue-slider-component": "^4.0.0-beta.9",
     "zod": "^3.22.4"
   },
@@ -62,6 +63,7 @@
     "@types/serviceworker": "^0.0.67",
     "@types/throttle-debounce": "^5.0.0",
     "@types/turndown": "^5.0.3",
+    "@types/vue-select": "^3.16.8",
     "@types/webappsec-credential-management": "^0.6.4",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",

src/components/Settings/BrowserTab/OpenMode.vue

@@ -5,7 +5,7 @@
       <p>
         特定のチャンネルを指定します。OFFの場合は最後に開いたチャンネルが設定されます。
       </p>
-      <form-selector
+      <form-selector-filterable
         v-if="openMode === 'particular'"
         v-model="openChannelNameValue"
         :options="channelOptions"
@@ -22,7 +22,7 @@
 
 <script lang="ts" setup>
 import AToggle from '/@/components/UI/AToggle.vue'
-import FormSelector from '/@/components/UI/FormSelector.vue'
+import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
 import type { OpenMode } from '/@/store/app/browserSettings'
 import useChannelPath from '/@/composables/useChannelPath'
 import useChannelOptions from '/@/composables/useChannelOptions'

src/components/UI/FormSelectorFilterable.vue

@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <label v-if="label" :for="id" :class="$style.label">
+      {{ label }}
+    </label>
+    <!-- https://vue-select.org/api/props.html -->
+    <v-select
+      :id="id"
+      v-model="selectedOptionValue"
+      :options="options"
+      label="key"
+      :reduce="(option: Option) => option.value"
+      :selectable="(option: Option) => option.value !== null"
+      :clearable="false"
+      :data-background="background"
+      :class="$style.select"
+    ></v-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useModelValueSyncer } from '/@/composables/useModelSyncer'
+import { randomString } from '/@/lib/basic/randomString'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
+
+type Option = { key: string; value: string | null }
+type Background = 'primary' | 'secondary'
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | null
+    background?: Background
+    options: Array<Option>
+    label?: string
+  }>(),
+  {
+    modelValue: '',
+    background: 'secondary'
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', _val: string | null): void
+}>()
+
+const selectedOptionValue = useModelValueSyncer(props, emit)
+const id = randomString()
+</script>
+
+<style lang="scss" module>
+.label {
+  @include color-ui-primary;
+  margin-bottom: 4px;
+  display: block;
+}
+// https://vue-select.org/guide/css.html
+.select {
+  // background
+  @include background-secondary;
+  &[data-background='primary'] {
+    @include background-primary;
+  }
+  border-radius: 4px;
+  height: 30px;
+  :global(.vs__dropdown-toggle),
+  :global(.vs__selected-options),
+  :global(.vs__actions),
+  :global(.vs__selected),
+  :global(.vs__search) {
+    height: 100%;
+  }
+
+  // Search Input
+  --vs-search-input-color: var(--theme-ui-primary-default);
+
+  // Borders
+  --vs-border-color: transparent;
+  --vs-border-width: 2px;
+  --vs-border-style: solid;
+  --vs-border-radius: 4px;
+  &:focus-within {
+    --vs-border-color: var(--theme-accent-focus-default);
+  }
+
+  // Controls
+  --vs-controls-color: var(--theme-ui-secondary-default);
+
+  // Selected
+  --vs-selected-color: var(--theme-ui-primary-default);
+
+  // Dropdown
+  --vs-dropdown-bg: var(--theme-background-secondary-default);
+  &[data-background='primary'] {
+    --vs-dropdown-bg: var(--theme-background-primary-default);
+  }
+
+  // Active State
+  --vs-dropdown-option--active-bg: var(--theme-background-primary-default);
+  &[data-background='primary'] {
+    --vs-dropdown-option--active-bg: var(--theme-background-secondary-default);
+  }
+  --vs-dropdown-option--active-color: var(--theme-ui-primary-default);
+}
+</style>

src/views/Settings/ProfileTab.vue

@@ -8,7 +8,7 @@
         prevent-modal
         :class="$style.icon"
       />
-      <image-upload v-model="newIcon" rounded :class="$style.uploder" />
+      <image-upload v-model="newIcon" rounded :class="$style.uploader" />
     </div>
     <div :class="$style.element">
       <h3 :class="$style.header">表示名</h3>
@@ -35,7 +35,7 @@
     </div>
     <div :class="$style.element">
       <h3 :class="$style.header">ホームチャンネル</h3>
-      <form-selector
+      <form-selector-filterable
         v-model="state.homeChannel"
         :options="channelOptions"
         :class="$style.form"
@@ -149,12 +149,13 @@ const useIsLengthValid = (state: Profile) => {
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import ImageUpload from '/@/components/Settings/ImageUpload.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
-import FormSelector from '/@/components/UI/FormSelector.vue'
+import FormSelectorFilterable from '/@/components/UI/FormSelectorFilterable.vue'
 import FormButton from '/@/components/UI/FormButton.vue'
 import FormTextArea from '/@/components/UI/FormTextArea.vue'
 import InlineMarkdown from '/@/components/UI/InlineMarkdown.vue'
 
 const { detail: detailMayBeUndefined } = useMeStore()
+
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 const detail = computed(() => detailMayBeUndefined.value!)
 
@@ -209,7 +210,7 @@ const canUpdate = computed(
     left: 36px;
   }
 }
-.uploder {
+.uploader {
   margin-left: 12px;
 }
 .bioContainer {