feat(WIP): process 등용 등

- ColorSelect 색을 가득 채움,
- ColorSelect 결과값을 둥글게
- procGeneralList의 column 가변형 정의
- 등용 brief 조사 처리 버그 수정

hwe/ts/processing/GeneralSelect.vue

@@ -5,6 +5,8 @@
     :allow-empty="false"
     :options="forFind"
     :group-select="false"
+    :group-values="groupByNation ? 'values' : undefined"
+    group-label="nationID"
     label="searchText"
     track-by="value"
     :show-labels="false"
@@ -18,7 +20,21 @@
     :searchable="searchMode"
   >
     <template v-slot:option="props">
-      <div v-html="props.option.title"></div>
+      <div v-if="props.option.title" v-html="props.option.title"></div>
+      <div
+        v-if="props.option.$groupLabel !== undefined"
+        class="margin-filler"
+        :style="{
+          backgroundColor: groupByNation.get(props.option.$groupLabel).color,
+          color: isBrightColor(
+            groupByNation.get(props.option.$groupLabel).color
+          )
+            ? 'black'
+            : 'white',
+        }"
+      >
+        {{ groupByNation.get(props.option.$groupLabel).name }}
+      </div>
     </template>
     <template v-slot:singleLabel="props">
       {{ props.option.simpleName }}
@@ -29,10 +45,13 @@
 import { getNpcColor } from "@/common_legacy";
 import { automata초성All } from "@/util/automata초성";
 import { filter초성withAlphabet } from "@/util/filter초성withAlphabet";
+import { isBrightColor } from "@/util/isBrightColor";
+import { unwrap } from "@/util/unwrap";
 import { defineComponent, PropType } from "vue";
 import {
   procGeneralItem,
   procGeneralList,
+  procNationItem,
 } from "./processingRes";
 
 type SelectedGeneral = {
@@ -58,6 +77,11 @@ export default defineComponent({
       required: false,
       default: undefined,
     },
+    groupByNation: {
+      type: Map as PropType<Map<number, procNationItem>>,
+      required: false,
+      default: undefined,
+    },
   },
   emits: ["update:modelValue"],
   watch: {
@@ -70,15 +94,41 @@ export default defineComponent({
     },
   },
   data() {
-    const forFind = [];
+    const forFind: (
+      | SelectedGeneral
+      | {
+          values: SelectedGeneral[];
+          nationID: number;
+        }
+    )[] = [];
+    const forFindGroup = new Map<number, SelectedGeneral[]>();
     const targets = new Map<number, SelectedGeneral>();
 
     let selectedGeneral;
 
     for (const gen of this.generals) {
+      let groupArray = forFind;
+      if (this.groupByNation) {
+        const nationID = gen.nationID ?? 0;
+        if (!forFindGroup.has(nationID)) {
+          const nationItem = unwrap(this.groupByNation.get(nationID));
+          let tmpArr: SelectedGeneral[] = [];
+          forFindGroup.set(nationID, tmpArr);
+          groupArray = tmpArr;
+
+          forFind.push({
+            nationID: nationItem.id,
+            values: tmpArr,
+          });
+        } else {
+          groupArray = unwrap(forFindGroup.get(nationID));
+        }
+      }
 
       const nameColor = getNpcColor(gen.npc);
-      const name = nameColor?`<span style="color:${nameColor}">${gen.name}</span>`:gen.name;
+      const name = nameColor
+        ? `<span style="color:${nameColor}">${gen.name}</span>`
+        : gen.name;
 
       const [filteredTextH, filteredTextA] = filter초성withAlphabet(gen.name);
       const [filteredTextHL1, filteredTextHL2] = automata초성All(filteredTextH);
@@ -86,9 +136,7 @@ export default defineComponent({
         value: gen.no,
         title: this.textHelper
           ? this.textHelper(gen)
-          : `${name} (${gen.leadership}/${gen.leadership}/${
-              gen.intel
-            })`,
+          : `${name} (${gen.leadership}/${gen.leadership}/${gen.intel})`,
         simpleName: gen.name,
         searchText: `${gen.name} ${filteredTextH} ${filteredTextA} ${filteredTextHL1} ${filteredTextHL2}`,
         obj: gen,
@@ -96,14 +144,16 @@ export default defineComponent({
       if (gen.no == this.modelValue) {
         selectedGeneral = obj;
       }
-      forFind.push(obj);
+      groupArray.push(obj);
       targets.set(gen.no, obj);
     }
+    console.log(forFind);
     return {
       selectedGeneral,
       searchMode: true,
       forFind,
       targets,
+      isBrightColor,
     };
   },
 });
@@ -128,5 +178,12 @@ export default defineComponent({
   input {
     color: $vue-multiselect-color;
   }
+
+  .multiselect__option--group {
+    padding: 0;
+  }
+  .margin-filler {
+    padding: calc($vue-multiselect-padding-y + 0.17em) $vue-multiselect-padding-x;
+  }
 }
 </style>