refac: defineComponent => vue3 setup

hwe/ts/ChiefCenter/BottomItem.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
+  <div :class="[`chiefBox${chiefLevel}`, 'subRows']" :style="style" @click="onClick">
-    :class="[`chiefBox${chiefLevel}`, 'subRows']"
-    :style="style"
-    @click="$emit('click', this)"
-  >
     <div
       class="bg1 nameHeader"
       :style="{
@@ -33,15 +29,14 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
 import { getNpcColor } from "@/common_legacy";
 import type { ChiefResponse } from "@/defs/API/NationCommand";
 import { mb_strwidth } from "@/util/mb_strwidth";
-import { defineComponent, type PropType } from "vue";
+import type { PropType } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
+defineProps({
-  props: {
     chiefLevel: VueTypes.integer.isRequired,
     style: VueTypes.object.isRequired,
     officer: {
@@ -49,11 +44,17 @@ export default defineComponent({
       default: undefined,
     },
     isMe: VueTypes.bool.isRequired,
-  },
+  });
-  emits: ["click"],
+
-  methods: {
+const emit = defineEmits<{
-    mb_strwidth,
+  (event: "click", value: HTMLElement): void,
-    getNpcColor,
+}>();
-  },
+
-});
+function onClick(event: MouseEvent){
+  if(!event.target){
+    return;
+  }
+  const elem = event.target as HTMLElement;
+  emit("click", elem);
+}
 </script>

hwe/ts/PageNationStratFinan.vue

@@ -234,19 +234,8 @@
     <BottomBar title="내무부" />
   </BContainer>
 </template>
-<script lang="ts">
-import TipTap from "./components/TipTap.vue";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import { computed, defineComponent, reactive, ref, toRefs } from "vue";
-import { isString } from "lodash";
-import { type diplomacyState, diplomacyStateInfo, type NationStaticItem } from "./defs";
-import { SammoAPI } from "./SammoAPI";
-import { joinYearMonth } from "@/util/joinYearMonth";
-import { parseYearMonth } from "@/util/parseYearMonth";
-import { useToast, BContainer } from "bootstrap-vue-3";
-import { unwrap } from "./util/unwrap";
 
+<script lang="ts">
 type NationItem = NationStaticItem & {
   cityCnt: number;
   diplomacy: {
@@ -292,31 +281,50 @@ declare const staticValues: {
     max: number;
   };
 };
+</script>
+<script setup lang="ts">
+import TipTap from "./components/TipTap.vue";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { computed, reactive, ref, toRefs } from "vue";
+import { isString } from "lodash";
+import { type diplomacyState, diplomacyStateInfo, type NationStaticItem } from "./defs";
+import { SammoAPI } from "./SammoAPI";
+import { joinYearMonth } from "@/util/joinYearMonth";
+import { parseYearMonth } from "@/util/parseYearMonth";
+import { useToast, BContainer } from "bootstrap-vue-3";
+import { unwrap } from "./util/unwrap";
 
-export default defineComponent({
+const toasts = unwrap(useToast());
-  components: {
+const self = reactive(staticValues);
-    TopBackBar,
+const {
-    BottomBar,
+  editable,
-    TipTap,
+  nationMsg,
-    BContainer,
+  scoutMsg,
-  },
+  nationID,
-  setup() {
+  year,
-    const toasts = unwrap(useToast());
+  month,
-    const self = reactive(staticValues);
+  nationsList,
+  gold,
+  rice,
+  income,
+  policy,
+  warSettingCnt,
+} = toRefs(self);
 
-    let oldNationMsg = staticValues.nationMsg;
+let oldNationMsg = staticValues.nationMsg;
-    const inEditNationMsg = ref(false);
+const inEditNationMsg = ref(false);
 
-    function enableEditNationMsg() {
+function enableEditNationMsg() {
   inEditNationMsg.value = true;
-    }
+}
 
-    function rollbackNationMsg() {
+function rollbackNationMsg() {
   inEditNationMsg.value = false;
   self.nationMsg = oldNationMsg;
-    }
+}
 
-    async function saveNationMsg() {
+async function saveNationMsg() {
   const msg = self.nationMsg;
   try {
     await SammoAPI.Nation.SetNotice({
@@ -337,19 +345,19 @@ export default defineComponent({
     }
     console.error(e);
   }
-    }
+}
 
-    let oldScoutMsg = staticValues.scoutMsg;
+let oldScoutMsg = staticValues.scoutMsg;
-    const inEditScoutMsg = ref(false);
+const inEditScoutMsg = ref(false);
 
-    function enableEditScoutMsg() {
+function enableEditScoutMsg() {
   inEditScoutMsg.value = true;
-    }
+}
-    function rollbackScoutMsg() {
+function rollbackScoutMsg() {
   inEditScoutMsg.value = false;
   self.scoutMsg = oldScoutMsg;
-    }
+}
-    async function saveScoutMsg() {
+async function saveScoutMsg() {
   const msg = self.scoutMsg;
   try {
     await SammoAPI.Nation.SetScoutMsg({
@@ -370,9 +378,9 @@ export default defineComponent({
     }
     console.error(e);
   }
-    }
+}
 
-    const trackTiptapFormHeight = (target: string) => {
+const trackTiptapFormHeight = (target: string) => {
   let form: HTMLElement | null = null;
   let outerForm: HTMLElement | null = null;
   function handler() {
@@ -396,34 +404,36 @@ export default defineComponent({
   window.addEventListener("orientationchange", handler, true);
 
   return handler;
-    };
+};
+const trackNationMsgHeight = trackTiptapFormHeight("#noticeForm");
+const trackScoutMsgHeight = trackTiptapFormHeight("#scoutMsgForm");
 
-    const incomeGoldCity = computed(() => {
+const incomeGoldCity = computed(() => {
   return (self.income.gold.city * self.policy.rate) / 100;
-    });
+});
 
-    const incomeGold = computed(() => {
+const incomeGold = computed(() => {
   return incomeGoldCity.value + self.income.gold.war;
-    });
+});
 
-    const incomeRiceCity = computed(() => {
+const incomeRiceCity = computed(() => {
   return (self.income.rice.city * self.policy.rate) / 100;
-    });
+});
 
-    const incomeRiceWall = computed(() => {
+const incomeRiceWall = computed(() => {
   return (self.income.rice.wall * self.policy.rate) / 100;
-    });
+});
 
-    const incomeRice = computed(() => {
+const incomeRice = computed(() => {
   return incomeRiceCity.value + incomeRiceWall.value;
-    });
+});
 
-    const outcomeByBill = computed(() => {
+const outcomeByBill = computed(() => {
   return (self.outcome * self.policy.bill) / 100;
-    });
+});
 
-    let oldRate = staticValues.policy.rate;
+let oldRate = staticValues.policy.rate;
-    async function setRate() {
+async function setRate() {
   const rate = self.policy.rate;
   try {
     await SammoAPI.Nation.SetRate({ amount: rate });
@@ -441,13 +451,13 @@ export default defineComponent({
     }
     console.error(e);
   }
-    }
+}
-    function rollbackRate() {
+function rollbackRate() {
   self.policy.rate = oldRate;
-    }
+}
 
-    let oldBill = staticValues.policy.bill;
+let oldBill = staticValues.policy.bill;
-    async function setBill() {
+async function setBill() {
   const bill = self.policy.bill;
   try {
     await SammoAPI.Nation.SetBill({ amount: bill });
@@ -465,13 +475,13 @@ export default defineComponent({
     }
     console.error(e);
   }
-    }
+}
-    function rollbackBill() {
+function rollbackBill() {
   self.policy.bill = oldBill;
-    }
+}
 
-    let oldSecretLimit = staticValues.policy.secretLimit;
+let oldSecretLimit = staticValues.policy.secretLimit;
-    async function setSecretLimit() {
+async function setSecretLimit() {
   const secretLimit = self.policy.secretLimit;
   try {
     await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
@@ -490,12 +500,12 @@ export default defineComponent({
     self.policy.secretLimit = oldSecretLimit;
     console.error(e);
   }
-    }
+}
-    function rollbackSecretLimit() {
+function rollbackSecretLimit() {
   self.policy.secretLimit = oldSecretLimit;
-    }
+}
 
-    async function setBlockWar() {
+async function setBlockWar() {
   try {
     const result = await SammoAPI.Nation.SetBlockWar({ value: self.policy.blockWar });
     self.warSettingCnt.remain = result.availableCnt;
@@ -513,9 +523,9 @@ export default defineComponent({
     self.policy.blockWar = !self.policy.blockWar;
     console.error(e);
   }
-    }
+}
 
-    async function setBlockScout() {
+async function setBlockScout() {
   try {
     await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
     toasts.info({
@@ -532,45 +542,6 @@ export default defineComponent({
     self.policy.blockScout = !self.policy.blockScout;
     console.error(e);
   }
-    }
+}
 
-    return {
-      toasts,
-
-      ...toRefs(self),
-      inEditNationMsg,
-      inEditScoutMsg,
-      enableEditNationMsg,
-      rollbackNationMsg,
-      saveNationMsg,
-      enableEditScoutMsg,
-      rollbackScoutMsg,
-      saveScoutMsg,
-      diplomacyStateInfo,
-      joinYearMonth,
-      parseYearMonth,
-
-      trackNationMsgHeight: trackTiptapFormHeight("#noticeForm"),
-      trackScoutMsgHeight: trackTiptapFormHeight("#scoutMsgForm"),
-
-      incomeGoldCity,
-      incomeGold,
-      incomeRiceCity,
-      incomeRiceWall,
-      incomeRice,
-      outcomeByBill,
-
-      setRate,
-      rollbackRate,
-      setBill,
-      rollbackBill,
-      setSecretLimit,
-      rollbackSecretLimit,
-
-      setBlockWar,
-      setBlockScout,
-    };
-  },
-  methods: {},
-});
 </script>

hwe/ts/components/DragSelect.vue

@@ -13,9 +13,9 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 /// https://github.com/andi23rosca/drag-select-vue/blob/master/src/DragSelect.vue
-import { defineComponent, ref, watch, onMounted, onBeforeUnmount, type PropType } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, type PropType } from "vue";
 import VueTypes from "vue-types";
 
 function getDimensions(p1: coord, p2: coord): rect {
@@ -36,8 +36,7 @@ function collisionCheck(node1: DOMRect, node2: DOMRect): boolean {
 type coord = { x: number; y: number };
 type rect = { width: number; height: number };
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   attribute: VueTypes.string.isRequired,
   color: VueTypes.string.def("#4299E1"),
   opacity: VueTypes.number.def(0.7),
@@ -51,23 +50,28 @@ export default defineComponent({
     required: false,
     default: false,
   },
-  },
+});
-  emits: ["update:modelValue", "dragDone", "dragStart"],
-  setup(props, { emit }) {
-    const intersected = ref<Set<string>>(props.modelValue);
-    const container = ref<HTMLElement>();
 
-    watch(intersected, (val) => {
+const emit = defineEmits<{
+  (event: "update:modelValue", value: Set<string>): void;
+  (event: "dragDone", value: Set<string>): void;
+  (event: "dragStart"): void;
+}>();
+
+const intersected = ref<Set<string>>(props.modelValue);
+const container = ref<HTMLElement>();
+
+watch(intersected, (val) => {
   emit("update:modelValue", val);
-    });
+});
-    watch(props.modelValue, (val) => {
+watch(props.modelValue, (val) => {
   if (intersected.value === val) {
     return;
   }
   intersected.value = val;
-    });
+});
 
-    onMounted(() => {
+onMounted(() => {
   if (!container.value) {
     console.error(`Container is not referenced.`);
     return;
@@ -210,12 +214,5 @@ export default defineComponent({
     document.removeEventListener("mouseup", endDrag);
     document.removeEventListener("touchend", endDrag);
   });
-    });
-
-    return {
-      intersected,
-      container,
-    };
-  },
 });
 </script>

hwe/ts/processing/CitiesBasedOnDistance.vue

@@ -5,17 +5,16 @@
       <template v-if="key !== 0"> , </template>
       <a
         :style="{ color: colorMap[distance as keyof typeof colorMap] ?? undefined, textDecoration:'underline' }"
-        @click="$emit('selected', cityID)"
+        @click="emit('selected', cityID)"
         >{{ citiesMap.get(cityID)?.name }}</a
       >
     </template>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, type PropType } from "vue";
+import type { PropType } from "vue";
 
-export default defineComponent({
+defineProps({
-  props: {
   distanceList: {
     type: Object as PropType<Record<number, number[]>>,
     required: true,
@@ -24,16 +23,15 @@ export default defineComponent({
     type: Object as PropType<Map<number, { name: string }>>,
     required: true,
   },
-  },
+});
-  emits: ["selected"],
+
-  data() {
+const emit = defineEmits<{
-    return {
+  (event: "selected", value: number): void;
-      colorMap: {
+}>();
+
+const colorMap = {
   1: "magenta",
   2: "orange",
   3: "yellow",
-      },
+};
-    };
-  },
-});
 </script>

hwe/ts/processing/CrewTypeItem.vue

@@ -56,57 +56,53 @@
     <div class="crewTypeInfo text-start" v-html="crewType.info.join('<br>')" />
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   crewType: VueTypes.object.isRequired,
   leadership: VueTypes.number.isRequired,
   commandName: VueTypes.string.isRequired,
   currentCrewType: VueTypes.number.def(-1),
   crew: VueTypes.number.def(0),
   goldCoeff: VueTypes.number.isRequired,
-  },
+});
-  emits: ["submitOutput", "update:amount"],
-  setup(props, { emit }) {
-    const amount = ref(0);
 
-    function beHalf() {
+const emit = defineEmits<{
+  (event: "submitOutput", e: Event, amount: number, crewtypeID: number): void;
+  (event: "update:amount", value: number): void;
+}>();
+
+const amount = ref(0);
+
+function beHalf() {
   amount.value = Math.ceil(props.leadership * 0.5);
-    }
+}
 
-    function beFilled() {
+function beFilled() {
   if (props.crewType.id == props.currentCrewType) {
     amount.value = Math.max(1, props.leadership - Math.floor(props.crew / 100));
   } else {
     amount.value = props.leadership;
   }
-    }
+}
 
-    function beFull() {
+function beFull() {
   amount.value = Math.floor(props.leadership * 1.2);
-    }
+}
 
-    function doSubmit(e: Event) {
+function doSubmit(e: Event) {
   emit("submitOutput", e, amount.value, props.crewType.id);
-    }
+}
 
+onMounted(() => {
   beFilled();
-
-    return {
-      amount,
-      beHalf,
-      beFilled,
-      beFull,
-      doSubmit,
-    };
-  },
-  watch: {
-    amount(val: number) {
-      this.$emit("update:amount", val);
-    },
-  },
 });
+
+
+watch(amount, (value) => {
+  emit("update:amount", value);
+});
+
 </script>

hwe/ts/processing/ProcessGeneralAmount.vue

@@ -1,20 +1,12 @@
 <template>
-  <TopBackBar
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
-    v-model:searchable="searchable"
-    :title="commandName"
-    :type="procEntryMode"
-  />
   <div class="bg0">
     <div v-if="commandName == '몰수'">
-      장수의 자금이나 군량을 몰수합니다.<br>
+      장수의 자금이나 군량을 몰수합니다.<br />
-      몰수한것은 국가재산으로 귀속됩니다.<br>
+      몰수한것은 국가재산으로 귀속됩니다.<br />
-    </div>
-    <div v-else-if="commandName == '포상'">
-      국고로 장수에게 자금이나 군량을 지급합니다.<br>
-    </div>
-    <div v-else-if="commandName == '증여'">
-      자신의 자금이나 군량을 다른 장수에게 증여합니다.<br>
     </div>
+    <div v-else-if="commandName == '포상'">국고로 장수에게 자금이나 군량을 지급합니다.<br /></div>
+    <div v-else-if="commandName == '증여'">자신의 자금이나 군량을 다른 장수에게 증여합니다.<br /></div>
     <div class="row">
       <div class="col-12 col-md-5">
         장수 :
@@ -29,49 +21,44 @@
       <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>
     </div>
   </div>
-  <BottomBar
+  <BottomBar :title="commandName" :type="procEntryMode" />
-    :title="commandName"
-    :type="procEntryMode"
-  />
 </template>
 
 <script lang="ts">
+declare const procRes: {
+  distanceList: Record<number, number[]>;
+  cities: [number, string][];
+  generals: procGeneralRawItemList;
+  generalsKey: procGeneralKey[];
+  minAmount: number;
+  maxAmount: number;
+  amountGuide: number[];
+};
+
+declare const staticValues: {
+  commandName: string;
+  entryInfo: ["General" | "Nation", unknown];
+};
+</script>
+<script setup lang="ts">
 import SelectGeneral from "@/processing/SelectGeneral.vue";
 import SelectAmount from "@/processing/SelectAmount.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";
@@ -84,58 +71,33 @@ import {
   type procGeneralRawItemList,
 } from "./processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
-declare const entryInfo: ['General'|'Nation', unknown];
 
-declare const procRes: {
+const citiesMap = ref(new Map<
-  distanceList: Record<number, number[]>;
-  cities: [number, string][];
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-  minAmount: number;
-  maxAmount: number;
-  amountGuide: number[];
-};
-
-export default defineComponent({
-  components: {
-    SelectGeneral,
-    SelectAmount,
-    TopBackBar,
-    BottomBar,
-  },
-  setup() {
-    const citiesMap = new Map<
   number,
   {
     name: string;
     info?: string;
   }
-    >();
+>());
-    for (const [id, name] of procRes.cities) {
+for (const [id, name] of procRes.cities) {
-      citiesMap.set(id, { name });
+  citiesMap.value.set(id, { name });
-    }
+}
 
-    const generalList = convertGeneralList(
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
-      procRes.generalsKey,
+const amount = ref(1000);
-      procRes.generals
+const isGold = ref(true);
-    );
-    const amount = ref(1000);
-    const isGold = ref(true);
 
-    const selectedGeneralID = ref(generalList[0].no);
+const selectedGeneralID = ref(generalList[0].no);
 
-    function textHelpGeneral(gen: procGeneralItem): string {
+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>`
+  return `${name} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${gen.leadership}/${
-        : gen.name;
+    gen.strength
-      return `${name} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${
+  }/${gen.intel})`;
-        gen.leadership
+}
-      }/${gen.strength}/${gen.intel})`;
-    }
 
-    async function submit(e: Event) {
+async function submit(e: Event) {
   const event = new CustomEvent<Args>("customSubmit", {
     detail: {
       amount: amount.value,
@@ -144,24 +106,17 @@ export default defineComponent({
     },
   });
   unwrap(e.target).dispatchEvent(event);
-    }
+}
+
+const { commandName,entryInfo } = staticValues;
+const searchable = getProcSearchable();
+
+const procEntryMode: "chief" | "normal" = entryInfo[0] == "Nation" ? "chief" : "normal";
+
+const {
+  minAmount,
+  maxAmount,
+  amountGuide
+} = procRes;
 
-    return {
-      procEntryMode: <'chief'|'normal'>(entryInfo[0] == 'Nation'?'chief':'normal'),
-      searchable: getProcSearchable(),
-      amount,
-      isGold,
-      selectedGeneralID,
-      citiesMap: ref(citiesMap),
-      distanceList: procRes.distanceList,
-      minAmount: ref(procRes.minAmount),
-      maxAmount: ref(procRes.maxAmount),
-      amountGuide: procRes.amountGuide,
-      generalList,
-      commandName,
-      textHelpGeneral,
-      submit,
-    };
-  },
-});
 </script>

hwe/ts/processing/SelectAmount.vue

@@ -32,29 +32,33 @@
     </b-button>
   </div>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "vue";
+import { ref, watch } from "vue";
 import VueTypes from "vue-types";
 
-export default defineComponent({
+const props = defineProps({
-  props: {
     modelValue: VueTypes.number.isRequired,
     minAmount: VueTypes.number.isRequired,
     maxAmount: VueTypes.number.isRequired,
     amountGuide: VueTypes.arrayOf(Number).def([1000, 2000, 5000, 10000]),
     step: VueTypes.number.def(1),
-  },
+  });
-  emits: ["update:modelValue"],
+
-  data() {
+const emit = defineEmits<{
-    return {
+  (event: "update:modelValue", value: number): void;
-      amount: this.modelValue,
+}>();
-    };
+
-  },
+const amount = ref(props.modelValue);
-  watch: {
+
-    amount(val: number) {
+watch(
-      this.$emit("update:modelValue", val);
+  () => props.modelValue,
-    },
+  (value) => {
-  },
+    amount.value = value;
+  }
+);
+
+watch(amount, (value) => {
+  emit("update:modelValue", value);
 });
 </script>