feat(WIP): 커맨드창 vue-multiselect

hwe/func.php

@@ -477,7 +477,7 @@ function getCommandTable(General $general){
             }
             $subList[] = [
                 'value'=>Util::getClassNameFromObj($commandObj),
-                'compansation'=>$commandObj->getCompensationStyle(),
+                'compensation'=>$commandObj->getCompensationStyle(),
                 'possible'=>$commandObj->hasMinConditionMet(),
                 'title'=>$commandObj->getCommandDetailTitle(),
                 'reqArg'=>$commandObj::$reqArg,

hwe/scss/vue-multiselect.scss

@@ -1,5 +1,13 @@
 @use "sass:math";
 
+$vue-multiselect-disabled-color: $white;
+$vue-multiselect-disabled-bg: $gray-700;
+$form-select-color: $white;
+$vue-multiselect-bg: $black;
+$vue-multiselect-color: $white;
+$vue-multiselect-tag-color: $white;
+$vue-multiselect-spinner-color: $white;
+
 $vue-multiselect-padding-x: $form-select-padding-x !default;
 $vue-multiselect-padding-y: $form-select-padding-y !default;
 $vue-multiselect-min-height: $input-height !default;
@@ -13,7 +21,7 @@ $vue-multiselect-color: $form-select-color !default;
 $vue-multiselect-disabled-bg: $form-select-disabled-bg !default;
 $vue-multiselect-disabled-color: $form-select-disabled-color !default;
 
-$vue-multiselect-option-selected-bg: #f3f3f3 !default;
+$vue-multiselect-option-selected-bg: $dark !default;
 $vue-multiselect-option-selected-color: $body-color !default;
 $vue-multiselect-option-highlight-color: #fff !default;
 $vue-multiselect-option-highlight-bg: $primary !default;

hwe/ts/ReservedCommand.vue

@@ -128,33 +128,29 @@
       </div>
     </div>
     <div class="row gx-0">
-      <div class="col-9 d-grid">
+      <div class="col-9">
         <v-multiselect
           v-model="selectedCommand"
           :allow-empty="false"
           :options="commandList"
-          :group-select="true"
+          :group-select="false"
           group-values="values"
           group-label="category"
           label="title"
           track-by="value"
           open-direction="top"
+          :show-labels="false"
+          selectLabel="선택(엔터)"
+          selectGroupLabel=""
+          selectedLabel="선택됨"
+          deselectLabel="해제(엔터)"
+          deselectGroupLabel=""
+          placeholder="턴 선택"
+          :maxHeight="400"
         >
+          <template v-slot:noResult>검색 결과가 없습니다.</template>
+          <template v-slot:option="props"><!--FIXME: 카테고리--><span :class="props.option.compensation>0?'compensatePositive':(props.option.compensation<0?'compensateNegative':'compensateNeutral')">{{ props.option.title }}</span></template>
         </v-multiselect>
-        <!--<b-form-select v-model="selectedCommand"
-          ><b-form-select-option-group
-            v-for="cgroup in commandList"
-            :key="cgroup['category']"
-            :label="cgroup['category']"
-            ><b-form-select-option
-              v-for="(citem, ckey) in cgroup['values']"
-              :value="ckey"
-              :key="ckey"
-              >{{ citem.title
-              }}{{ citem.possible ? "" : "(불가)" }}</b-form-select-option
-            >
-          </b-form-select-option-group></b-form-select
-        >-->
       </div>
       <div class="col-3 d-grid">
         <b-button @click="reserveCommand()" variant="primary">실행</b-button>
@@ -221,13 +217,11 @@ for (const commandCategories of commandList) {
   if (!commandCategories.values) {
     continue;
   }
-  for (const [commandName, commandObj] of Object.entries(
-    commandCategories.values
-  )) {
+  for (const commandObj of commandCategories.values) {
     if (!commandObj.reqArg) {
       continue;
     }
-    listReqArgCommand.add(commandName);
+    listReqArgCommand.add(commandObj.value);
   }
 }
 
@@ -434,7 +428,7 @@ export default defineComponent({
     const pressed = Array.from<boolean>({ length: maxTurn }).fill(false);
     pressed[0] = true;
 
-    const selectedCommand =  commandList[0].values[0];
+    const selectedCommand = commandList[0].values[0];
 
     const emptyTurn: TurnObjWithTime[] = Array.from<TurnObjWithTime>({
       length: maxTurn,
@@ -486,6 +480,17 @@ export default defineComponent({
 @include media-breakpoint-up(md) {
   .commandPad {
     margin-left: 10px;
+
+    .multiselect__content-wrapper {
+      width: 133.3%;
+    }
+
+    .multiselect__single {
+      display: inline-block;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+    }
   }
 }