refac: defineComponent => vue3 setup

hwe/ts/processing/General/che_건국.vue

@@ -34,29 +34,28 @@
 </template>
 
 <script lang="ts">
-import ColorSelect from "@/processing/SelectColor.vue";
+declare const staticValues: {
-import { defineComponent, ref } from "vue";
+  commandName: string;
-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 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";
+
+const commandName = staticValues.commandName;
+const { nationTypes, available건국, colors } = procRes;
 
-export default defineComponent({
-  components: {
-    ColorSelect,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const destNationName = ref("");
 const selectedColorID = ref(0);
 
@@ -80,18 +79,4 @@ export default defineComponent({
     value: nationType.type,
   });
 }
-
-    return {
-      available건국: procRes.available건국,
-      selectedColorID,
-      selectedNationType,
-      colors: procRes.colors,
-      nationTypes: procRes.nationTypes,
-      nationTypesOption,
-      destNationName,
-      commandName,
-      submit,
-    };
-  },
-});
 </script>

hwe/ts/processing/General/che_군량매매.vue

@@ -25,49 +25,39 @@
 </template>
 
 <script lang="ts">
-import SelectAmount from "@/processing/SelectAmount.vue";
+declare const staticValues: {
-import { defineComponent, ref } from "vue";
+  commandName: string;
-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 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";
+
+const commandName = staticValues.commandName;
+const { minAmount, maxAmount, amountGuide } = procRes;
 
-export default defineComponent({
-  components: {
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const amount = ref(1000);
 const buyRice = ref(true);
 
-    async function submit(e: Event) {
+async function submit(e: SubmitEvent) {
+  if(!e.target){
+    return;
+  }
   const event = new CustomEvent<Args>("customSubmit", {
     detail: {
       amount: amount.value,
       buyRice: buyRice.value,
     },
   });
-      unwrap(e.target).dispatchEvent(event);
+  e.target.dispatchEvent(event);
 }
-
-    return {
-      buyRice,
-      amount,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      commandName,
-      submit,
-    };
-  },
-});
 </script>

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,24 +55,12 @@ import {
   type procNationList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
 
-declare const procRes: {
+const commandName = staticValues.commandName;
-  generals: procGeneralRawItemList;
+const searchable = getProcSearchable();
-  generalsKey: procGeneralKey[];
+const generalList = ref(convertGeneralList(procRes.generalsKey, procRes.generals));
-  nationList: procNationList;
-};
 
-export default defineComponent({
+const selectedGeneralID = ref(generalList.value[0].no);
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
-
-    const selectedGeneralID = ref(generalList[0].no);
 
 function textHelpGeneral(gen: procGeneralItem): string {
   const nameColor = getNpcColor(gen.npc);
@@ -78,20 +77,11 @@ export default defineComponent({
   unwrap(e.target).dispatchEvent(event);
 }
 
-    const nationList = new Map<number, procNationItem>();
+const nationList = ref(new Map<number, procNationItem>());
-    for (const nationItem of procRes.nationList) {
-      nationList.set(nationItem.id, nationItem);
-    }
 
-    return {
+onMounted(() => {
-      searchable: getProcSearchable(),
+  for (const nationItem of procRes.nationList) {
-      selectedGeneralID,
+    nationList.value.set(nationItem.id, nationItem);
-      generalList,
+  }
-      nationList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
 });
 </script>

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,20 +56,9 @@ import {
   type procGeneralRawItemList,
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
 
-declare const procRes: {
+const commandName = staticValues.commandName;
-  generals: procGeneralRawItemList;
+const searchable = getProcSearchable();
-  generalsKey: procGeneralKey[];
-};
-
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
 
 const selectedGeneralID = ref(generalList[0].no);
@@ -77,15 +77,4 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      searchable: getProcSearchable(),
-      selectedGeneralID,
-      generalList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
 </script>

hwe/ts/processing/General/che_숙련전환.vue

@@ -92,37 +92,35 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+type DexInfo = {
-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 = {
   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>
+
+<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";
+
+const commandName = staticValues.commandName;
 
-export default defineComponent({
-  components: {
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const srcArmTypeID = ref(procRes.ownDexList[0].armType);
 const destArmTypeID = ref(procRes.ownDexList[0].armType);
 
@@ -164,9 +162,9 @@ export default defineComponent({
     name: string;
     amount: number;
     decresedAmount: number;
-        currentInfo: dexInfo;
+    currentInfo: DexInfo;
-        decreasedInfo: dexInfo;
+    decreasedInfo: DexInfo;
-        afterInfo: Map<number, dexInfo>;
+    afterInfo: Map<number, DexInfo>;
   }
 >();
 
@@ -206,29 +204,7 @@ export default defineComponent({
   }
 }
 
-    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}`;
-    }
-
 function convNumberFormat(value: number): string {
   return Math.floor(value).toLocaleString();
 }
-
-    return {
-      unwrap,
-      ...procRes,
-      srcArmTypeID,
-      destArmTypeID,
-      dexFullInfo,
-      getDexCall,
-      commandName,
-      submit,
-      convDexFormat,
-      convNumberFormat,
-    };
-  },
-});
 </script>

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,27 +64,27 @@
 </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: {
+const commandName = staticValues.commandName;
-  nationList: procNationList;
+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);
@@ -93,10 +93,6 @@ export default defineComponent({
 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: {
@@ -105,19 +101,6 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      searchable: getProcSearchable(),
-      nationList: ref(nationList),
-      selectedNationID,
-      commandName,
-      toggleZoom,
-      isBrightColor,
-      selectedNation,
-      submit,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped>

hwe/ts/processing/General/che_장수대상임관.vue

@@ -1,14 +1,11 @@
 <template>
-  <TopBackBar
+  <TopBackBar v-model:searchable="searchable" :title="commandName" />
-    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
+        <b-button variant="primary" @click="submit">
-          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,34 +96,18 @@ import {
 } from "../processingRes";
 import { getNpcColor } from "@/common_legacy";
 import { isBrightColor } from "@/util/isBrightColor";
-declare const commandName: string;
 
-declare const procRes: {
+const commandName = staticValues.commandName;
-  generals: procGeneralRawItemList;
+const searchable = getProcSearchable();
-  generalsKey: procGeneralKey[];
-  nationList: procNationList;
-};
 
-export default defineComponent({
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
-  components: {
-    SelectGeneral,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
 
 const toggleZoom = ref(true);
 const selectedGeneralID = ref(generalList[0].no);
 
 function textHelpGeneral(gen: procGeneralItem): string {
   const nameColor = getNpcColor(gen.npc);
-      const name = nameColor
+  const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
-        ? `<span style="color:${nameColor}">${gen.name}</span>`
-        : gen.name;
   return name;
 }
 
@@ -134,20 +124,6 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      searchable: getProcSearchable(),
-      nationList: ref(nationList),
-      selectedGeneralID,
-      generalList,
-      commandName,
-      toggleZoom,
-      isBrightColor,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped>

hwe/ts/processing/General/che_징병.vue

@@ -230,14 +230,9 @@
 </template>
 
 <script lang="ts">
-import CrewTypeItem from "@/processing/CrewTypeItem.vue";
+declare const staticValues: {
-import { defineComponent, ref } from "vue";
+  commandName: string;
-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 procRes: {
   relYear: number;
@@ -253,14 +248,29 @@ declare const procRes: {
   crew: number;
   gold: number;
 };
+</script>
+
+<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;
 
-export default defineComponent({
-  components: {
-    CrewTypeItem,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const amount = ref(procRes.fullLeadership - Math.floor(procRes.crew / 100));
 
     async function submit(e: Event) {
@@ -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">

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
+          <b-button :pressed="isGold" @click="isGold = true"> 금 </b-button>
-            :pressed="isGold"
+          <b-button :pressed="!isGold" @click="isGold = false"> 쌀 </b-button>
-            @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
+        <SelectAmount v-model="amount" :amountGuide="amountGuide" :maxAmount="maxAmount" :minAmount="minAmount" />
-          v-model="amount"
-          :amountGuide="amountGuide"
-          :maxAmount="maxAmount"
-          :minAmount="minAmount"
-        />
       </div>
       <div class="col-3 col-md-2 d-grid">
-        <b-button
+        <b-button variant="primary" @click="submit">
-          variant="primary"
-          @click="submit"
-        >
           {{ commandName }}
         </b-button>
       </div>
@@ -45,31 +25,31 @@
 </template>
 
 <script lang="ts">
-import SelectAmount from "@/processing/SelectAmount.vue";
+declare const staticValues: {
-import { defineComponent, ref } from "vue";
+  commandName: string;
-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 procRes: {
   minAmount: number;
   maxAmount: number;
   amountGuide: number[];
 };
+</script>
+
+<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;
 
-export default defineComponent({
-  components: {
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 const amount = ref(1000);
 const isGold = ref(true);
 
-
 async function submit(e: Event) {
   const event = new CustomEvent<Args>("customSubmit", {
     detail: {
@@ -79,16 +59,4 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      amount,
-      isGold,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      commandName,
-      submit,
-    };
-  },
-});
 </script>

hwe/ts/processing/Nation/che_국기변경.vue

@@ -1,19 +1,11 @@
 <template>
-  <TopBackBar
+  <TopBackBar :title="commandName" type="chief" />
-    :title="commandName"
-    type="chief"
-  />
   <div class="bg0">
-    <div>
+    <div>국기를 변경합니다. 단 1회 가능합니다.<br /></div>
-      국기를 변경합니다. 단 1회 가능합니다.<br>
-    </div>
     <div class="row">
       <div class="col-6 col-md-3">
         색상 :
-        <ColorSelect
+        <ColorSelect v-model="selectedColorID" :colors="colors" />
-          v-model="selectedColorID"
-          :colors="colors"
-        />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">
@@ -22,33 +14,29 @@
       </div>
     </div>
   </div>
-  <BottomBar
+  <BottomBar :title="commandName" type="chief" />
-    :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[],
-};
-
-export default defineComponent({
-  components: {
-    ColorSelect,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
 
 const selectedColorID = ref(0);
 
@@ -60,13 +48,4 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      selectedColorID,
-      colors: procRes.colors,
-      commandName,
-      submit,
-    };
-  },
-});
 </script>

hwe/ts/processing/Nation/che_국호변경.vue

@@ -1,19 +1,11 @@
 <template>
-  <TopBackBar
+  <TopBackBar :title="commandName" type="chief" />
-    :title="commandName"
-    type="chief"
-  />
   <div class="bg0">
-    <div>
+    <div>나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br /></div>
-      나라의 이름을 바꿉니다. 황제가 된 후 1회 가능합니다.<br>
-    </div>
     <div class="row">
       <div class="col-6 col-md-3">
         국명 :
-        <b-form-input
+        <b-form-input v-model="destNationName" maxlength="18" />
-          v-model="destNationName"
-          maxlength="18"
-        />
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">
@@ -22,27 +14,24 @@
       </div>
     </div>
   </div>
-  <BottomBar
+  <BottomBar :title="commandName" type="chief" />
-    :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("");
 
 async function submit(e: Event) {
@@ -53,12 +42,4 @@ export default defineComponent({
   });
   unwrap(e.target).dispatchEvent(event);
 }
-
-    return {
-      destNationName,
-      commandName,
-      submit,
-    };
-  },
-});
 </script>

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 }}
+        {{ prop.option.title }}
-        <span v-if="props.option.info">({{ props.option.info }})</span>
+        <span v-if="prop.option.info">({{ prop.option.info }})</span>
-        {{ props.option.notAvailable ? "(불가)" : undefined }}
+        {{ 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 }}
+        {{ prop.option.simpleName }}
-        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        {{ 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,8 +53,7 @@ type SelectedNation = {
   notAvailable?: boolean;
 };
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   modelValue: {
     type: Number,
     required: true,
@@ -68,13 +67,36 @@ export default defineComponent({
     required: false,
     default: true,
   },
-  },
+});
-  emits: ["update:modelValue"],
+
-  data() {
+const modelValue = toRef(props, 'modelValue');
-    const forFind = [];
+watch(
-    const targets = new Map<number, SelectedNation>();
+  modelValue,
-    let selectedNation;
+  (val: number) => {
-    for (const nationItem of this.nations.values()) {
+    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,
@@ -83,26 +105,12 @@ export default defineComponent({
       notAvailable: nationItem.notAvailable,
       searchText: convertSearch초성(nationItem.name).join("|"),
     };
-      if (nationItem.id == this.modelValue) {
+    if (nationItem.id == props.modelValue) {
-        selectedNation = obj;
+      selectedNation.value = obj;
     }
-      forFind.push(obj);
+    forFind.value.push(obj);
-      targets.set(nationItem.id, obj);
+    targets.value.set(nationItem.id, obj);
   }
-    return {
-      selectedNation,
-      forFind,
-      targets,
-    };
-  },
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedNation = target;
-    },
-    selectedNation(val: SelectedNation) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
 });
+
 </script>