From 78011748de2ac248cbffa31be20518d2ccd81977 Mon Sep 17 00:00:00 2001
From: rei <h.watanabe360@gmail.com>
Date: Tue, 26 Mar 2024 22:12:01 +0900
Subject: [PATCH] =?UTF-8?q?vue-select=E3=81=AEimport=E3=81=8C=E3=81=86?=
 =?UTF-8?q?=E3=81=BE=E3=81=8F=E3=81=84=E3=81=8B=E3=81=AA=E3=81=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                            |  9 ++++++
 package.json                                 |  1 +
 src/components/UI/FormSelectorFilterable.vue | 32 +++++++++++---------
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 12915523d..4c6426405 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "vue": "^3.3.4",
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.1.5",
+        "vue-select": "^4.0.0-beta.6",
         "vue-slider-component": "^4.0.0-beta.9",
         "zod": "^3.22.4"
       },
@@ -11561,6 +11562,14 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue-select": {
+      "version": "4.0.0-beta.6",
+      "resolved": "https://registry.npmjs.org/vue-select/-/vue-select-4.0.0-beta.6.tgz",
+      "integrity": "sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==",
+      "peerDependencies": {
+        "vue": "3.x"
+      }
+    },
     "node_modules/vue-slider-component": {
       "version": "4.0.0-beta.9",
       "resolved": "https://registry.npmjs.org/vue-slider-component/-/vue-slider-component-4.0.0-beta.9.tgz",
diff --git a/package.json b/package.json
index d6d1006c7..543117d96 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.1.5",
+    "vue-select": "^4.0.0-beta.6",
     "vue-slider-component": "^4.0.0-beta.9",
     "zod": "^3.22.4"
   },
diff --git a/src/components/UI/FormSelectorFilterable.vue b/src/components/UI/FormSelectorFilterable.vue
index 1c3190cea..be9dc39ac 100644
--- a/src/components/UI/FormSelectorFilterable.vue
+++ b/src/components/UI/FormSelectorFilterable.vue
@@ -3,15 +3,18 @@
     <label v-if="label" :for="id" :class="$style.label">
       {{ label }}
     </label>
-    <vue-multiselect
+    <v-select
       :id="id"
       v-model="selectedOption"
       :options="options"
-      track-by="key"
       label="key"
-      :class="$style.inputContainer"
-      @select="updateModelValue"
-    ></vue-multiselect>
+      :class="$style.multiselect"
+      @option:selected="updateModelValue"
+    >
+      <template #option="p">
+        <div :class="$style.option">{{ p.option.key }}</div>
+      </template>
+    </v-select>
   </div>
 </template>
 
@@ -19,6 +22,8 @@
 import { ref } from 'vue'
 import { randomString } from '/@/lib/basic/randomString'
 import VueMultiselect from 'vue-multiselect'
+import vSelect from 'vue-select'
+import 'vue-select/dist/vue-select.css'
 
 type Option = { key: string; value: string | null }
 const props = withDefaults(
@@ -40,7 +45,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', _val: string | null): void
 }>()
 
-const selectedOption = ref<Option | null>(null)
+const selectedOption = ref<Option | null>(
+  props.options.find(o => o.value === props.modelValue) ?? null
+)
 const updateModelValue = (selectedOption: Option) => {
   emit('update:modelValue', selectedOption?.value ?? null)
 }
@@ -53,25 +60,20 @@ const id = randomString()
   margin-bottom: 4px;
   display: block;
 }
-.inputContainer {
+.multiselect {
   @include color-ui-primary;
   @include background-secondary;
   @include size-body1;
   height: 30px;
   border-radius: 4px;
-  &[data-on-secondary] {
-    @include background-primary;
-  }
-
   border: solid 2px transparent;
   &:focus-within {
     border-color: $theme-accent-focus-default;
   }
 }
-.select {
-  margin: 0 8px;
+.option {
+  @include color-ui-primary;
+  @include background-secondary;
   width: 100%;
-  color: inherit;
-  background: inherit;
 }
 </style>