refac: defineComponent => vue3 setup

2022-07-12 00:28:08 +09:00
parent 87e063e03e
commit b31ee022af
7 changed files with 565 additions and 643 deletions
@@ -5,35 +5,33 @@
      <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">
-import { defineComponent, type PropType } from "vue";
+<script setup lang="ts">
+import type { PropType } from "vue";

-export default defineComponent({
-  props: {
-    distanceList: {
-      type: Object as PropType<Record<number, number[]>>,
-      required: true,
-    },
-    citiesMap: {
-      type: Object as PropType<Map<number, { name: string }>>,
-      required: true,
-    },
+defineProps({
+  distanceList: {
+    type: Object as PropType<Record<number, number[]>>,
+    required: true,
  },
-  emits: ["selected"],
-  data() {
-    return {
-      colorMap: {
-        1: "magenta",
-        2: "orange",
-        3: "yellow",
-      },
-    };
+  citiesMap: {
+    type: Object as PropType<Map<number, { name: string }>>,
+    required: true,
  },
 });
+
+const emit = defineEmits<{
+  (event: "selected", value: number): void;
+}>();
+
+const colorMap = {
+  1: "magenta",
+  2: "orange",
+  3: "yellow",
+};
 </script>
@@ -56,57 +56,53 @@
    <div class="crewTypeInfo text-start" v-html="crewType.info.join('<br>')" />
  </div>
 </template>
-<script lang="ts">
-import { defineComponent, ref } from "vue";
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
 import VueTypes from "vue-types";

-export default defineComponent({
-  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() {
-      amount.value = Math.ceil(props.leadership * 0.5);
-    }
-
-    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() {
-      amount.value = Math.floor(props.leadership * 1.2);
-    }
-
-    function doSubmit(e: Event) {
-      emit("submitOutput", e, amount.value, props.crewType.id);
-    }
-
-    beFilled();
-
-    return {
-      amount,
-      beHalf,
-      beFilled,
-      beFull,
-      doSubmit,
-    };
-  },
-  watch: {
-    amount(val: number) {
-      this.$emit("update:amount", val);
-    },
-  },
+const props = defineProps({
+  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,
 });
+
+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() {
+  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() {
+  amount.value = Math.floor(props.leadership * 1.2);
+}
+
+function doSubmit(e: Event) {
+  emit("submitOutput", e, amount.value, props.crewType.id);
+}
+
+onMounted(() => {
+  beFilled();
+});
+
+
+watch(amount, (value) => {
+  emit("update:amount", value);
+});
+
 </script>
@@ -1,20 +1,12 @@
 <template>
-  <TopBackBar
-    v-model:searchable="searchable"
-    :title="commandName"
-    :type="procEntryMode"
-  />
+  <TopBackBar v-model:searchable="searchable" :title="commandName" :type="procEntryMode" />
  <div class="bg0">
    <div v-if="commandName == '몰수'">
-      장수의 자금이나 군량을 몰수합니다.<br>
-      몰수한것은 국가재산으로 귀속됩니다.<br>
-    </div>
-    <div v-else-if="commandName == '포상'">
-      국고로 장수에게 자금이나 군량을 지급합니다.<br>
-    </div>
-    <div v-else-if="commandName == '증여'">
-      자신의 자금이나 군량을 다른 장수에게 증여합니다.<br>
+      장수의 자금이나 군량을 몰수합니다.<br />
+      몰수한것은 국가재산으로 귀속됩니다.<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
-            :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>
    </div>
  </div>
-  <BottomBar
-    :title="commandName"
-    :type="procEntryMode"
-  />
+  <BottomBar :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,84 +71,52 @@ import {
  type procGeneralRawItemList,
 } from "./processingRes";
 import { getNpcColor } from "@/common_legacy";
-declare const commandName: string;
-declare const entryInfo: ['General'|'Nation', unknown];

-declare const procRes: {
-  distanceList: Record<number, number[]>;
-  cities: [number, string][];
-  generals: procGeneralRawItemList;
-  generalsKey: procGeneralKey[];
-  minAmount: number;
-  maxAmount: number;
-  amountGuide: number[];
-};
+const citiesMap = ref(new Map<
+  number,
+  {
+    name: string;
+    info?: string;
+  }
+>());
+for (const [id, name] of procRes.cities) {
+  citiesMap.value.set(id, { name });
+}

-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) {
-      citiesMap.set(id, { name });
-    }
+const generalList = convertGeneralList(procRes.generalsKey, procRes.generals);
+const amount = ref(1000);
+const isGold = ref(true);

-    const generalList = convertGeneralList(
-      procRes.generalsKey,
-      procRes.generals
-    );
-    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 {
+  const nameColor = getNpcColor(gen.npc);
+  const name = nameColor ? `<span style="color:${nameColor}">${gen.name}</span>` : gen.name;
+  return `${name} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${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} (금${unwrap(gen.gold).toLocaleString()}/쌀${unwrap(gen.rice).toLocaleString()}) (${
-        gen.leadership
-      }/${gen.strength}/${gen.intel})`;
-    }
+async function submit(e: Event) {
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      amount: amount.value,
+      isGold: isGold.value,
+      destGeneralID: selectedGeneralID.value,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}

-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          amount: amount.value,
-          isGold: isGold.value,
-          destGeneralID: selectedGeneralID.value,
-        },
-      });
-      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>
@@ -32,29 +32,33 @@
    </b-button>
  </div>
 </template>
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { ref, watch } from "vue";
 import VueTypes from "vue-types";

-export default defineComponent({
-  props: {
+const props = defineProps({
    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() {
-    return {
-      amount: this.modelValue,
-    };
-  },
-  watch: {
-    amount(val: number) {
-      this.$emit("update:modelValue", val);
-    },
-  },
+  });
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+const amount = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    amount.value = value;
+  }
+);
+
+watch(amount, (value) => {
+  emit("update:modelValue", value);
 });
 </script>