refac: defineComponent => vue3 setup

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>

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>