From e5c50e48d3f7b19c358b21855df587d6f313096d Mon Sep 17 00:00:00 2001
From: Hide_D <hided62@gmail.com>
Date: Wed, 13 Jul 2022 22:37:37 +0900
Subject: [PATCH] refac: defineComponent => vue3 setup

---
 hwe/ts/processing/General/che_건국.vue        |  83 +++-----
 hwe/ts/processing/General/che_군량매매.vue    |  62 +++---
 hwe/ts/processing/General/che_등용.vue        |  78 +++----
 hwe/ts/processing/General/che_선양.vue        |  69 +++---
 hwe/ts/processing/General/che_숙련전환.vue    | 198 ++++++++----------
 hwe/ts/processing/General/che_임관.vue        |  79 +++----
 .../processing/General/che_장수대상임관.vue   | 108 ++++------
 hwe/ts/processing/General/che_징병.vue        |  60 +++---
 hwe/ts/processing/General/che_헌납.vue        |  90 +++-----
 hwe/ts/processing/Nation/che_국기변경.vue     |  73 +++----
 hwe/ts/processing/Nation/che_국호변경.vue     |  61 ++----
 hwe/ts/processing/SelectNation.vue            | 126 +++++------
 12 files changed, 452 insertions(+), 635 deletions(-)

diff --git a/hwe/ts/processing/General/che_건국.vue b/hwe/ts/processing/General/che_건국.vue
index d6143493..72339298 100644
--- a/hwe/ts/processing/General/che_건국.vue
+++ b/hwe/ts/processing/General/che_건국.vue
@@ -34,64 +34,49 @@
 </template>
 
 <script lang="ts">
-import ColorSelect from "@/processing/SelectColor.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import type { procNationTypeList } from "../processingRes";
-
-declare const commandName: string;
+declare const staticValues: {
+  commandName: string;
+};
 
 declare const procRes: {
   available건국: boolean;
   colors: string[];
   nationTypes: procNationTypeList;
 };
+</script>
+<script setup lang="ts">
+import ColorSelect from "@/processing/SelectColor.vue";
+import { ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import type { procNationTypeList } from "../processingRes";
 
-export default defineComponent({
-  components: {
-    ColorSelect,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const destNationName = ref("");
-    const selectedColorID = ref(0);
+const commandName = staticValues.commandName;
+const { nationTypes, available건국, colors } = procRes;
 
-    const selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
+const destNationName = ref("");
+const selectedColorID = ref(0);
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          colorType: selectedColorID.value,
-          nationName: destNationName.value,
-          nationType: selectedNationType.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const selectedNationType = ref(Object.values(procRes.nationTypes)[0].type);
 
-    const nationTypesOption: { html: string; value: string }[] = [];
-    for (const nationType of Object.values(procRes.nationTypes)) {
-      nationTypesOption.push({
-        html: nationType.name,
-        value: nationType.type,
-      });
-    }
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      colorType: selectedColorID.value,
+      nationName: destNationName.value,
+      nationType: selectedNationType.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-    return {
-      available건국: procRes.available건국,
-      selectedColorID,
-      selectedNationType,
-      colors: procRes.colors,
-      nationTypes: procRes.nationTypes,
-      nationTypesOption,
-      destNationName,
-      commandName,
-      submit,
-    };
-  },
-});
+const nationTypesOption: { html: string; value: string }[] = [];
+for (const nationType of Object.values(procRes.nationTypes)) {
+  nationTypesOption.push({
+    html: nationType.name,
+    value: nationType.type,
+  });
+}
 </script>
diff --git a/hwe/ts/processing/General/che_군량매매.vue b/hwe/ts/processing/General/che_군량매매.vue
index a8fc7be3..7d3440b7 100644
--- a/hwe/ts/processing/General/che_군량매매.vue
+++ b/hwe/ts/processing/General/che_군량매매.vue
@@ -25,49 +25,39 @@
 </template>
 
 <script lang="ts">
-import SelectAmount from "@/processing/SelectAmount.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-declare const commandName: string;
+declare const staticValues: {
+  commandName: string;
+};
 
 declare const procRes: {
   minAmount: number;
   maxAmount: number;
   amountGuide: number[];
 };
+</script>
+<script setup lang="ts">
+import SelectAmount from "@/processing/SelectAmount.vue";
+import { ref } from "vue";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 
-export default defineComponent({
-  components: {
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const amount = ref(1000);
-    const buyRice = ref(true);
+const commandName = staticValues.commandName;
+const { minAmount, maxAmount, amountGuide } = procRes;
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          amount: amount.value,
-          buyRice: buyRice.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const amount = ref(1000);
+const buyRice = ref(true);
 
-    return {
-      buyRice,
-      amount,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      commandName,
-      submit,
-    };
-  },
-});
+async function submit(e: SubmitEvent) {
+  if(!e.target){
+    return;
+  }
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      amount: amount.value,
+      buyRice: buyRice.value,
+    },
+  });
+  e.target.dispatchEvent(event);
+}
 </script>
diff --git a/hwe/ts/processing/General/che_등용.vue b/hwe/ts/processing/General/che_등용.vue
index 7e7ad996..92f358c7 100644
--- a/hwe/ts/processing/General/che_등용.vue
+++ b/hwe/ts/processing/General/che_등용.vue
@@ -28,8 +28,19 @@
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  commandName: string;
+};
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  nationList: procNationList;
+};
+</script>
+<script setup lang="ts">
 import SelectGeneral from "@/processing/SelectGeneral.vue";
-import { defineComponent, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
@@ -44,54 +55,33 @@ import {
   type procNationList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
 
-declare const procRes: {
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-  nationList: procNationList;
-};
+const commandName = staticValues.commandName;
+const searchable = getProcSearchable();
+const generalList = ref(convertGeneralList(procRes.generalsKey, procRes.generals));
 
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+const selectedGeneralID = ref(generalList.value[0].no);
 
-    const selectedGeneralID = ref(generalList[0].no);
+function textHelpGeneral(gen: procGeneralItem): string {
+  const nameColor = getNpcColor(gen.npc);
+  const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+  return name;
+}
 
-    function textHelpGeneral(gen: procGeneralItem): string {
-      const nameColor = getNpcColor(gen.npc);
-      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
-      return name;
-    }
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destGeneralID: selectedGeneralID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destGeneralID: selectedGeneralID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const nationList = ref(new Map<number, procNationItem>());
 
-    const nationList = new Map<number, procNationItem>();
-    for (const nationItem of procRes.nationList) {
-      nationList.set(nationItem.id, nationItem);
-    }
-
-    return {
-      searchable: getProcSearchable(),
-      selectedGeneralID,
-      generalList,
-      nationList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
+onMounted(() => {
+  for (const nationItem of procRes.nationList) {
+    nationList.value.set(nationItem.id, nationItem);
+  }
 });
 </script>
diff --git a/hwe/ts/processing/General/che_선양.vue b/hwe/ts/processing/General/che_선양.vue
index 3048fdf4..cb00c2ac 100644
--- a/hwe/ts/processing/General/che_선양.vue
+++ b/hwe/ts/processing/General/che_선양.vue
@@ -31,8 +31,19 @@
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  commandName: string;
+};
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+};
+</script>
+
+<script lang="ts" setup>
 import SelectGeneral from "@/processing/SelectGeneral.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
@@ -45,47 +56,25 @@ import {
   type procGeneralRawItemList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
 
-declare const procRes: {
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-};
+const commandName = staticValues.commandName;
+const searchable = getProcSearchable();
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
 
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+const selectedGeneralID = ref(generalList[0].no);
 
-    const selectedGeneralID = ref(generalList[0].no);
+function textHelpGeneral(gen: procGeneralItem): string {
+  const nameColor = getNpcColor(gen.npc);
+  const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+  return `${name} (${gen.leadership}/${gen.strength}/${gen.intel})`;
+}
 
-    function textHelpGeneral(gen: procGeneralItem): string {
-      const nameColor = getNpcColor(gen.npc);
-      const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
-      return `${name} (${gen.leadership}/${gen.strength}/${gen.intel})`;
-    }
-
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destGeneralID: selectedGeneralID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      searchable: getProcSearchable(),
-      selectedGeneralID,
-      generalList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destGeneralID: selectedGeneralID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
diff --git a/hwe/ts/processing/General/che_숙련전환.vue b/hwe/ts/processing/General/che_숙련전환.vue
index 0767854e..e31e817d 100644
--- a/hwe/ts/processing/General/che_숙련전환.vue
+++ b/hwe/ts/processing/General/che_숙련전환.vue
@@ -92,143 +92,119 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-
-declare const commandName: string;
-
-type dexInfo = {
+type DexInfo = {
   amount: number;
   color: string;
   name: string;
 };
-
+declare const staticValues: {
+  commandName: string;
+};
 declare const procRes: {
   ownDexList: {
     armType: number;
     name: string;
     amount: number;
   }[];
-  dexLevelList: dexInfo[];
+  dexLevelList: DexInfo[];
   decreaseCoeff: number;
   convertCoeff: number;
 };
+</script>
 
-export default defineComponent({
-  components: {
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const srcArmTypeID = ref(procRes.ownDexList[0].armType);
-    const destArmTypeID = ref(procRes.ownDexList[0].armType);
+<script lang="ts" setup>
+import { ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          srcArmType: srcArmTypeID.value,
-          destArmType: destArmTypeID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const commandName = staticValues.commandName;
+
+const srcArmTypeID = ref(procRes.ownDexList[0].armType);
+const destArmTypeID = ref(procRes.ownDexList[0].armType);
 
-    function getDexCall(dex: number): { color: string; name: string } {
-      if (dex < 0) {
-        throw `올바르지 않은 수치: ${dex}`;
-      }
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      srcArmType: srcArmTypeID.value,
+      destArmType: destArmTypeID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 
-      let color = "";
-      let name = "";
-      for (const nextDexLevel of procRes.dexLevelList) {
-        if (dex < nextDexLevel.amount) {
-          break;
-        }
-        color = nextDexLevel.color;
-        name = nextDexLevel.name;
-      }
+function getDexCall(dex: number): { color: string; name: string } {
+  if (dex < 0) {
+    throw `올바르지 않은 수치: ${dex}`;
+  }
 
-      return {
-        color,
-        name,
-      };
+  let color = "";
+  let name = "";
+  for (const nextDexLevel of procRes.dexLevelList) {
+    if (dex < nextDexLevel.amount) {
+      break;
     }
-
-    const dexFullInfo = new Map<
-      number,
-      {
-        armType: number;
-        name: string;
-        amount: number;
-        decresedAmount: number;
-        currentInfo: dexInfo;
-        decreasedInfo: dexInfo;
-        afterInfo: Map<number, dexInfo>;
-      }
-    >();
+    color = nextDexLevel.color;
+    name = nextDexLevel.name;
+  }
 
-    for (const dexItem of procRes.ownDexList) {
-      const amount = dexItem.amount;
-      const currentInfo = { ...getDexCall(amount), amount };
+  return {
+    color,
+    name,
+  };
+}
 
-      const decresedAmount = amount * procRes.decreaseCoeff;
-      const decresedAfterAmount = amount - decresedAmount;
-      const decreasedInfo = {
-        ...getDexCall(decresedAfterAmount),
-        amount: decresedAfterAmount,
-      };
+const dexFullInfo = new Map<
+  number,
+  {
+    armType: number;
+    name: string;
+    amount: number;
+    decresedAmount: number;
+    currentInfo: DexInfo;
+    decreasedInfo: DexInfo;
+    afterInfo: Map<number, DexInfo>;
+  }
+>();
 
-      dexFullInfo.set(dexItem.armType, {
-        ...dexItem,
-        decresedAmount,
-        currentInfo,
-        decreasedInfo,
-        afterInfo: new Map(),
-      });
-    }
+for (const dexItem of procRes.ownDexList) {
+  const amount = dexItem.amount;
+  const currentInfo = { ...getDexCall(amount), amount };
 
-    for (const [armType, dexItem] of dexFullInfo.entries()) {
-      for (const [fromArmType, fromDexItem] of dexFullInfo.entries()) {
-        let afterAmount = fromDexItem.decresedAmount * procRes.convertCoeff;
-        if (armType != fromArmType) {
-          afterAmount += dexItem.amount;
-        } else {
-          afterAmount += dexItem.decresedAmount;
-        }
+  const decresedAmount = amount * procRes.decreaseCoeff;
+  const decresedAfterAmount = amount - decresedAmount;
+  const decreasedInfo = {
+    ...getDexCall(decresedAfterAmount),
+    amount: decresedAfterAmount,
+  };
 
-        dexItem.afterInfo.set(fromArmType, {
-          amount: afterAmount,
-          ...getDexCall(afterAmount),
-        });
-      }
-    }
+  dexFullInfo.set(dexItem.armType, {
+    ...dexItem,
+    decresedAmount,
+    currentInfo,
+    decreasedInfo,
+    afterInfo: new Map(),
+  });
+}
 
-    function convDexFormat(value: dexInfo): string {
-      const amount = convNumberFormat(value.amount);
-      return `<span class="f_tnum" style="color:${value.color}">${value.name}</span>,${"\xa0".repeat(
-        Math.max(0, 3 - value.name.length)
-      )} ${amount}`;
+for (const [armType, dexItem] of dexFullInfo.entries()) {
+  for (const [fromArmType, fromDexItem] of dexFullInfo.entries()) {
+    let afterAmount = fromDexItem.decresedAmount * procRes.convertCoeff;
+    if (armType != fromArmType) {
+      afterAmount += dexItem.amount;
+    } else {
+      afterAmount += dexItem.decresedAmount;
     }
 
-    function convNumberFormat(value: number): string {
-      return Math.floor(value).toLocaleString();
-    }
+    dexItem.afterInfo.set(fromArmType, {
+      amount: afterAmount,
+      ...getDexCall(afterAmount),
+    });
+  }
+}
 
-    return {
-      unwrap,
-      ...procRes,
-      srcArmTypeID,
-      destArmTypeID,
-      dexFullInfo,
-      getDexCall,
-      commandName,
-      submit,
-      convDexFormat,
-      convNumberFormat,
-    };
-  },
-});
+function convNumberFormat(value: number): string {
+  return Math.floor(value).toLocaleString();
+}
 </script>
diff --git a/hwe/ts/processing/General/che_임관.vue b/hwe/ts/processing/General/che_임관.vue
index df32a3c5..83d933a9 100644
--- a/hwe/ts/processing/General/che_임관.vue
+++ b/hwe/ts/processing/General/che_임관.vue
@@ -3,13 +3,13 @@
   <div class="bg0">
     <div>
       국가에 임관합니다.
-      <br>
+      <br />
       이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.
-      <br>
+      <br />
       바로 군주의 위치로 이동합니다.
-      <br>
+      <br />
       임관할 국가를 목록에서 선택하세요.
-      <br>
+      <br />
     </div>
     <div class="row">
       <div class="col-6 col-md-3">
@@ -64,60 +64,43 @@
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  commandName: string;
+};
+declare const procRes: {
+  nationList: procNationList;
+};
+</script>
+
+<script lang="ts" setup>
 import SelectNation from "@/processing/SelectNation.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 import { type procNationItem, type procNationList, getProcSearchable } from "../processingRes";
 import { isBrightColor } from "@/util/isBrightColor";
-declare const commandName: string;
 
-declare const procRes: {
-  nationList: procNationList;
-};
+const commandName = staticValues.commandName;
+const searchable = getProcSearchable();
 
-export default defineComponent({
-  components: {
-    SelectNation,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const nationList = new Map<number, procNationItem>();
-    for (const nationItem of procRes.nationList) {
-      nationList.set(nationItem.id, nationItem);
-    }
+const nationList = new Map<number, procNationItem>();
+for (const nationItem of procRes.nationList) {
+  nationList.set(nationItem.id, nationItem);
+}
 
-    const toggleZoom = ref(true);
-    const selectedNationID = ref(procRes.nationList[0].id);
+const toggleZoom = ref(true);
+const selectedNationID = ref(procRes.nationList[0].id);
 
-    function selectedNation(nationID: number) {
-      selectedNationID.value = nationID;
-    }
-
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destNationID: selectedNationID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      searchable: getProcSearchable(),
-      nationList: ref(nationList),
-      selectedNationID,
-      commandName,
-      toggleZoom,
-      isBrightColor,
-      selectedNation,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destNationID: selectedNationID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -181,4 +164,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/hwe/ts/processing/General/che_장수대상임관.vue b/hwe/ts/processing/General/che_장수대상임관.vue
index c644fe57..15ae515c 100644
--- a/hwe/ts/processing/General/che_장수대상임관.vue
+++ b/hwe/ts/processing/General/che_장수대상임관.vue
@@ -1,14 +1,11 @@
 <template>
-  <TopBackBar
-    v-model:searchable="searchable"
-    :title="commandName"
-  />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
   <div class="bg0">
     <div>
-      장수를 따라 임관합니다.<br>
-      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br>
-      바로 군주의 위치로 이동합니다.<br>
-      임관할 국가를 목록에서 선택하세요.<br>
+      장수를 따라 임관합니다.<br />
+      이미 임관/등용되었던 국가는 다시 임관할 수 없습니다.<br />
+      바로 군주의 위치로 이동합니다.<br />
+      임관할 국가를 목록에서 선택하세요.<br />
     </div>
     <div class="row">
       <div class="col-8 col-md-4">
@@ -22,10 +19,7 @@
         />
       </div>
       <div class="col-4 col-md-2 d-grid">
-        <b-button
-          variant="primary"
-          @click="submit"
-        >
+        <b-button variant="primary" @click="submit">
           {{ commandName }}
         </b-button>
       </div>
@@ -73,8 +67,20 @@
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  commandName: string;
+};
+
+declare const procRes: {
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  nationList: procNationList;
+};
+</script>
+
+<script lang="ts" setup>
 import SelectGeneral from "@/processing/SelectGeneral.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
@@ -90,64 +96,34 @@ import {
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
 import { isBrightColor } from "@/util/isBrightColor";
-declare const commandName: string;
 
-declare const procRes: {
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-  nationList: procNationList;
-};
+const commandName = staticValues.commandName;
+const searchable = getProcSearchable();
 
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
 
-    const toggleZoom = ref(true);
-    const selectedGeneralID = ref(generalList[0].no);
+const toggleZoom = ref(true);
+const selectedGeneralID = ref(generalList[0].no);
 
-    function textHelpGeneral(gen: procGeneralItem): string {
-      const nameColor = getNpcColor(gen.npc);
-      const name = nameColor
-        ? `<span style="color:${nameColor}">${gen.name}</span>`
-        : gen.name;
-      return name;
-    }
+function textHelpGeneral(gen: procGeneralItem): string {
+  const nameColor = getNpcColor(gen.npc);
+  const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+  return name;
+}
 
-    const nationList = new Map<number, procNationItem>();
-    for (const nationItem of procRes.nationList) {
-      nationList.set(nationItem.id, nationItem);
-    }
+const nationList = new Map<number, procNationItem>();
+for (const nationItem of procRes.nationList) {
+  nationList.set(nationItem.id, nationItem);
+}
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          destGeneralID: selectedGeneralID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      searchable: getProcSearchable(),
-      nationList: ref(nationList),
-      selectedGeneralID,
-      generalList,
-      commandName,
-      toggleZoom,
-      isBrightColor,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      destGeneralID: selectedGeneralID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -211,4 +187,4 @@ export default defineComponent({
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/hwe/ts/processing/General/che_징병.vue b/hwe/ts/processing/General/che_징병.vue
index 8d7cc8fd..1c048c00 100644
--- a/hwe/ts/processing/General/che_징병.vue
+++ b/hwe/ts/processing/General/che_징병.vue
@@ -230,14 +230,9 @@
 </template>
 
 <script lang="ts">
-import CrewTypeItem from "@/processing/CrewTypeItem.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import type { procArmTypeItem, procCrewTypeItem } from "../processingRes";
-declare const commandName: string;
+declare const staticValues: {
+  commandName: string;
+};
 
 declare const procRes: {
   relYear: number;
@@ -253,15 +248,30 @@ declare const procRes: {
   crew: number;
   gold: number;
 };
+</script>
 
-export default defineComponent({
-  components: {
-    CrewTypeItem,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
+<script lang="ts" setup>
+import CrewTypeItem from "@/processing/CrewTypeItem.vue";
+import { ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import type { procArmTypeItem, procCrewTypeItem } from "../processingRes";
+
+const commandName = staticValues.commandName;
+const {
+  techLevel,
+  goldCoeff,
+  leadership,
+  fullLeadership,
+  armCrewTypes,
+  currentCrewType,
+  crew,
+  gold,
+} = procRes;
+
+const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
 
     async function submit(e: Event) {
       const event = new CustomEvent<Args>("customSubmit", {
@@ -317,24 +327,6 @@ export default defineComponent({
         !(showNotAvailable.value.get(armType) ?? 0)
       );
     }
-
-    return {
-      destCrewType,
-      amount,
-      showNotAvailable,
-      ...procRes,
-      crewTypeMap,
-      commandName,
-      beHalf,
-      beFilled,
-      beFull,
-      submit,
-      toggleShowNotAvailable,
-      trySubmit,
-      unwrap,
-    };
-  },
-});
 </script>
 
 <style lang="scss">
diff --git a/hwe/ts/processing/General/che_헌납.vue b/hwe/ts/processing/General/che_헌납.vue
index 546c88a0..d4a3bb95 100644
--- a/hwe/ts/processing/General/che_헌납.vue
+++ b/hwe/ts/processing/General/che_헌납.vue
@@ -1,41 +1,21 @@
 <template>
   <TopBackBar :title="commandName" />
   <div class="bg0">
-    <div>
-      자신의 자금이나 군량을 국가 재산으로 헌납합니다.
-    </div>
+    <div>자신의 자금이나 군량을 국가 재산으로 헌납합니다.</div>
     <div class="row">
       <div class="col-2 col-md-1">
         자원 :
         <b-button-group>
-          <b-button
-            :pressed="isGold"
-            @click="isGold = true"
-          >
-            금
-          </b-button>
-          <b-button
-            :pressed="!isGold"
-            @click="isGold = false"
-          >
-            쌀
-          </b-button>
+          <b-button :pressed="isGold" @click="isGold = true"> 금 </b-button>
+          <b-button :pressed="!isGold" @click="isGold = false"> 쌀 </b-button>
         </b-button-group>
       </div>
       <div class="col-7 col-md-4">
         금액 :
-        <SelectAmount
-          v-model="amount"
-          :amountGuide="amountGuide"
-          :maxAmount="maxAmount"
-          :minAmount="minAmount"
-        />
+        <SelectAmount v-model="amount" :amountGuide="amountGuide" :maxAmount="maxAmount" :minAmount="minAmount" />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button
-          variant="primary"
-          @click="submit"
-        >
+        <b-button variant="primary" @click="submit">
           {{ commandName }}
         </b-button>
       </div>
@@ -45,50 +25,38 @@
 </template>
 
 <script lang="ts">
-import SelectAmount from "@/processing/SelectAmount.vue";
-import { defineComponent, ref } from "vue";
-import { unwrap } from "@/util/unwrap";
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-declare const commandName: string;
+declare const staticValues: {
+  commandName: string;
+};
 
 declare const procRes: {
   minAmount: number;
   maxAmount: number;
   amountGuide: number[];
 };
+</script>
 
-export default defineComponent({
-  components: {
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const amount = ref(1000);
-    const isGold = ref(true);
+<script lang="ts" setup>
+import SelectAmount from "@/processing/SelectAmount.vue";
+import { ref } from "vue";
+import { unwrap } from "@/util/unwrap";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
 
+const commandName = staticValues.commandName;
+const { minAmount, maxAmount, amountGuide } = procRes;
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          amount: amount.value,
-          isGold: isGold.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
+const amount = ref(1000);
+const isGold = ref(true);
 
-    return {
-      amount,
-      isGold,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      commandName,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      amount: amount.value,
+      isGold: isGold.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
diff --git a/hwe/ts/processing/Nation/che_국기변경.vue b/hwe/ts/processing/Nation/che_국기변경.vue
index be7cb399..6b313a3f 100644
--- a/hwe/ts/processing/Nation/che_국기변경.vue
+++ b/hwe/ts/processing/Nation/che_국기변경.vue
@@ -1,19 +1,11 @@
 <template>
-  <TopBackBar
-    :title="commandName"
-    type="chief"
-  />
+  <TopBackBar :title="commandName" type="chief" />
   <div class="bg0">
-    <div>
-      국기를 변경합니다. 단 1회 가능합니다.<br>
-    </div>
+    <div>국기를 변경합니다. 단 1회 가능합니다.<br /></div>
     <div class="row">
       <div class="col-6 col-md-3">
         색상 :
-        <ColorSelect
-          v-model="selectedColorID"
-          :colors="colors"
-        />
+        <ColorSelect v-model="selectedColorID" :colors="colors" />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">
@@ -22,51 +14,38 @@
       </div>
     </div>
   </div>
-  <BottomBar
-    :title="commandName"
-    type="chief"
-  />
+  <BottomBar :title="commandName" type="chief" />
 </template>
 
 <script lang="ts">
+declare const staticValues: {
+  commandName: string;
+};
+
+declare const procRes: {
+  colors: string[];
+};
+</script>
+
+<script lang="ts" setup>
 import ColorSelect from "@/processing/SelectColor.vue";
-import { defineComponent, ref } from "vue";
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 
-declare const commandName: string;
+const commandName = staticValues.commandName;
+const { colors } = procRes;
 
-declare const procRes: {
-  colors: string[],
-};
+const selectedColorID = ref(0);
 
-export default defineComponent({
-  components: {
-    ColorSelect,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-
-    const selectedColorID = ref(0);
-
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          colorType: selectedColorID.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      selectedColorID,
-      colors: procRes.colors,
-      commandName,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      colorType: selectedColorID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
diff --git a/hwe/ts/processing/Nation/che_국호변경.vue b/hwe/ts/processing/Nation/che_국호변경.vue
index f1c27787..427ae339 100644
--- a/hwe/ts/processing/Nation/che_국호변경.vue
+++ b/hwe/ts/processing/Nation/che_국호변경.vue
@@ -1,19 +1,11 @@
 <template>
-  <TopBackBar
-    :title="commandName"
-    type="chief"
-  />
+  <TopBackBar :title="commandName" type="chief" />
   <div class="bg0">
-    <div>
-      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br>
-    </div>
+    <div>나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br /></div>
     <div class="row">
       <div class="col-6 col-md-3">
         국명 :
-        <b-form-input
-          v-model="destNationName"
-          maxlength="18"
-        />
+        <b-form-input v-model="destNationName" maxlength="18" />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">
@@ -22,43 +14,32 @@
       </div>
     </div>
   </div>
-  <BottomBar
-    :title="commandName"
-    type="chief"
-  />
+  <BottomBar :title="commandName" type="chief" />
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+declare const staticValues: {
+  commandName: string;
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from "vue";
 import { unwrap } from "@/util/unwrap";
 import type { Args } from "@/processing/args";
 import TopBackBar from "@/components/TopBackBar.vue";
 import BottomBar from "@/components/BottomBar.vue";
 
-declare const commandName: string;
+const commandName = staticValues.commandName;
 
-export default defineComponent({
-  components: {
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const destNationName = ref("");
+const destNationName = ref("");
 
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          nationName: destNationName.value,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      destNationName,
-      commandName,
-      submit,
-    };
-  },
-});
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      nationName: destNationName.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
 </script>
diff --git a/hwe/ts/processing/SelectNation.vue b/hwe/ts/processing/SelectNation.vue
index 9ac6cecb..32ad4f48 100644
--- a/hwe/ts/processing/SelectNation.vue
+++ b/hwe/ts/processing/SelectNation.vue
@@ -16,32 +16,32 @@
     :maxHeight="400"
     :searchable="searchable"
   >
-    <template #option="props">
+    <template #option="prop">
       <span
         :style="{
-          color: props.option.notAvailable ? 'red' : undefined,
+          color: prop.option.notAvailable ? 'red' : undefined,
         }"
       >
-        {{ props.option.title }}
-        <span v-if="props.option.info">({{ props.option.info }})</span>
-        {{ props.option.notAvailable ? "(불가)" : undefined }}
+        {{ prop.option.title }}
+        <span v-if="prop.option.info">({{ prop.option.info }})</span>
+        {{ prop.option.notAvailable ? "(불가)" : undefined }}
       </span>
     </template>
-    <template #singleLabel="props">
+    <template #singleLabel="prop">
       <span
         :style="{
-          color: props.option.notAvailable ? 'red' : undefined,
+          color: prop.option.notAvailable ? 'red' : undefined,
         }"
       >
-        {{ props.option.simpleName }}
-        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        {{ prop.option.simpleName }}
+        {{ prop.option.notAvailable ? "(불가)" : undefined }}</span
       >
     </template>
   </v-multiselect>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { convertSearch초성 } from "@/util/convertSearch초성";
-import { defineComponent, type PropType } from "vue";
+import { onMounted, ref, watch, toRef, type PropType } from "vue";
 import type { procNationItem } from "./processingRes";
 
 type SelectedNation = {
@@ -53,56 +53,64 @@ type SelectedNation = {
   notAvailable?: boolean;
 };
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    nations: {
-      type: Map as PropType<Map<number, procNationItem>>,
-      required: true,
-    },
-    searchable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
   },
-  emits: ["update:modelValue"],
-  data() {
-    const forFind = [];
-    const targets = new Map<number, SelectedNation>();
-    let selectedNation;
-    for (const nationItem of this.nations.values()) {
-      const obj: SelectedNation = {
-        value: nationItem.id,
-        title: nationItem.name,
-        info: nationItem.info,
-        simpleName: nationItem.name,
-        notAvailable: nationItem.notAvailable,
-        searchText: convertSearch초성(nationItem.name).join("|"),
-      };
-      if (nationItem.id == this.modelValue) {
-        selectedNation = obj;
-      }
-      forFind.push(obj);
-      targets.set(nationItem.id, obj);
-    }
-    return {
-      selectedNation,
-      forFind,
-      targets,
-    };
+  nations: {
+    type: Map as PropType<Map<number, procNationItem>>,
+    required: true,
   },
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedNation = target;
-    },
-    selectedNation(val: SelectedNation) {
-      this.$emit("update:modelValue", val.value);
-    },
+  searchable: {
+    type: Boolean,
+    required: false,
+    default: true,
   },
 });
+
+const modelValue = toRef(props, 'modelValue');
+watch(
+  modelValue,
+  (val: number) => {
+    const target = targets.value.get(val);
+    selectedNation.value = target;
+  }
+);
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+const forFind = ref<SelectedNation[]>([]);
+const targets = ref(new Map<number, SelectedNation>());
+
+const selectedNation = ref<SelectedNation>();
+watch(selectedNation, (val) => {
+  if (val === undefined) {
+    return;
+  }
+  emit("update:modelValue", val.value);
+});
+
+onMounted(() => {
+  forFind.value = [];
+  targets.value.clear();
+  for (const nationItem of props.nations.values()) {
+    const obj: SelectedNation = {
+      value: nationItem.id,
+      title: nationItem.name,
+      info: nationItem.info,
+      simpleName: nationItem.name,
+      notAvailable: nationItem.notAvailable,
+      searchText: convertSearch초성(nationItem.name).join("|"),
+    };
+    if (nationItem.id == props.modelValue) {
+      selectedNation.value = obj;
+    }
+    forFind.value.push(obj);
+    targets.value.set(nationItem.id, obj);
+  }
+});
+
 </script>