refac: defineComponent => vue3 setup
This commit is contained in:
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<div
|
||||
:class="[`chiefBox${chiefLevel}`, 'subRows']"
|
||||
:style="style"
|
||||
@click="$emit('click', this)"
|
||||
>
|
||||
<div :class="[`chiefBox${chiefLevel}`, 'subRows']" :style="style" @click="onClick">
|
||||
<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({
|
||||
props: {
|
||||
defineProps({
|
||||
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: {
|
||||
mb_strwidth,
|
||||
getNpcColor,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
const emit = defineEmits<{
|
||||
(event: "click", value: HTMLElement): void,
|
||||
}>();
|
||||
|
||||
function onClick(event: MouseEvent){
|
||||
if(!event.target){
|
||||
return;
|
||||
}
|
||||
const elem = event.target as HTMLElement;
|
||||
emit("click", elem);
|
||||
}
|
||||
</script>
|
||||
|
||||
+232
-261
@@ -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,285 +281,267 @@ 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({
|
||||
components: {
|
||||
TopBackBar,
|
||||
BottomBar,
|
||||
TipTap,
|
||||
BContainer,
|
||||
},
|
||||
setup() {
|
||||
const toasts = unwrap(useToast());
|
||||
const self = reactive(staticValues);
|
||||
const toasts = unwrap(useToast());
|
||||
const self = reactive(staticValues);
|
||||
const {
|
||||
editable,
|
||||
nationMsg,
|
||||
scoutMsg,
|
||||
nationID,
|
||||
year,
|
||||
month,
|
||||
nationsList,
|
||||
gold,
|
||||
rice,
|
||||
income,
|
||||
policy,
|
||||
warSettingCnt,
|
||||
} = toRefs(self);
|
||||
|
||||
let oldNationMsg = staticValues.nationMsg;
|
||||
const inEditNationMsg = ref(false);
|
||||
let oldNationMsg = staticValues.nationMsg;
|
||||
const inEditNationMsg = ref(false);
|
||||
|
||||
function enableEditNationMsg() {
|
||||
inEditNationMsg.value = true;
|
||||
function enableEditNationMsg() {
|
||||
inEditNationMsg.value = true;
|
||||
}
|
||||
|
||||
function rollbackNationMsg() {
|
||||
inEditNationMsg.value = false;
|
||||
self.nationMsg = oldNationMsg;
|
||||
}
|
||||
|
||||
async function saveNationMsg() {
|
||||
const msg = self.nationMsg;
|
||||
try {
|
||||
await SammoAPI.Nation.SetNotice({
|
||||
msg,
|
||||
});
|
||||
oldNationMsg = msg;
|
||||
inEditNationMsg.value = false;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "국가 방침을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
function rollbackNationMsg() {
|
||||
inEditNationMsg.value = false;
|
||||
self.nationMsg = oldNationMsg;
|
||||
}
|
||||
let oldScoutMsg = staticValues.scoutMsg;
|
||||
const inEditScoutMsg = ref(false);
|
||||
|
||||
async function saveNationMsg() {
|
||||
const msg = self.nationMsg;
|
||||
try {
|
||||
await SammoAPI.Nation.SetNotice({
|
||||
msg,
|
||||
});
|
||||
oldNationMsg = msg;
|
||||
inEditNationMsg.value = false;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "국가 방침을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
function enableEditScoutMsg() {
|
||||
inEditScoutMsg.value = true;
|
||||
}
|
||||
function rollbackScoutMsg() {
|
||||
inEditScoutMsg.value = false;
|
||||
self.scoutMsg = oldScoutMsg;
|
||||
}
|
||||
async function saveScoutMsg() {
|
||||
const msg = self.scoutMsg;
|
||||
try {
|
||||
await SammoAPI.Nation.SetScoutMsg({
|
||||
msg,
|
||||
});
|
||||
oldScoutMsg = msg;
|
||||
inEditScoutMsg.value = false;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "임관 권유문을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
let oldScoutMsg = staticValues.scoutMsg;
|
||||
const inEditScoutMsg = ref(false);
|
||||
|
||||
function enableEditScoutMsg() {
|
||||
inEditScoutMsg.value = true;
|
||||
const trackTiptapFormHeight = (target: string) => {
|
||||
let form: HTMLElement | null = null;
|
||||
let outerForm: HTMLElement | null = null;
|
||||
function handler() {
|
||||
if (!form) {
|
||||
form = document.querySelector(`${target} .ProseMirror`);
|
||||
}
|
||||
function rollbackScoutMsg() {
|
||||
inEditScoutMsg.value = false;
|
||||
self.scoutMsg = oldScoutMsg;
|
||||
if (!outerForm) {
|
||||
outerForm = document.querySelector(`${target} .tiptap-editor`);
|
||||
}
|
||||
async function saveScoutMsg() {
|
||||
const msg = self.scoutMsg;
|
||||
try {
|
||||
await SammoAPI.Nation.SetScoutMsg({
|
||||
msg,
|
||||
});
|
||||
oldScoutMsg = msg;
|
||||
inEditScoutMsg.value = false;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "임관 권유문을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
if (!form || !outerForm) {
|
||||
return;
|
||||
}
|
||||
|
||||
const trackTiptapFormHeight = (target: string) => {
|
||||
let form: HTMLElement | null = null;
|
||||
let outerForm: HTMLElement | null = null;
|
||||
function handler() {
|
||||
if (!form) {
|
||||
form = document.querySelector(`${target} .ProseMirror`);
|
||||
}
|
||||
if (!outerForm) {
|
||||
outerForm = document.querySelector(`${target} .tiptap-editor`);
|
||||
}
|
||||
if (!form || !outerForm) {
|
||||
return;
|
||||
}
|
||||
const { height: clientHeight } = form.getBoundingClientRect();
|
||||
const { height: parentHeight } = outerForm.getBoundingClientRect();
|
||||
|
||||
const { height: clientHeight } = form.getBoundingClientRect();
|
||||
const { height: parentHeight } = outerForm.getBoundingClientRect();
|
||||
if (parentHeight != clientHeight) {
|
||||
outerForm.style.height = `${clientHeight}px`;
|
||||
}
|
||||
}
|
||||
window.addEventListener("orientationchange", handler, true);
|
||||
|
||||
if (parentHeight != clientHeight) {
|
||||
outerForm.style.height = `${clientHeight}px`;
|
||||
}
|
||||
}
|
||||
window.addEventListener("orientationchange", handler, true);
|
||||
return handler;
|
||||
};
|
||||
const trackNationMsgHeight = trackTiptapFormHeight("#noticeForm");
|
||||
const trackScoutMsgHeight = trackTiptapFormHeight("#scoutMsgForm");
|
||||
|
||||
return handler;
|
||||
};
|
||||
const incomeGoldCity = computed(() => {
|
||||
return (self.income.gold.city * self.policy.rate) / 100;
|
||||
});
|
||||
|
||||
const incomeGoldCity = computed(() => {
|
||||
return (self.income.gold.city * self.policy.rate) / 100;
|
||||
});
|
||||
const incomeGold = computed(() => {
|
||||
return incomeGoldCity.value + self.income.gold.war;
|
||||
});
|
||||
|
||||
const incomeGold = computed(() => {
|
||||
return incomeGoldCity.value + self.income.gold.war;
|
||||
});
|
||||
const incomeRiceCity = computed(() => {
|
||||
return (self.income.rice.city * self.policy.rate) / 100;
|
||||
});
|
||||
|
||||
const incomeRiceCity = computed(() => {
|
||||
return (self.income.rice.city * self.policy.rate) / 100;
|
||||
});
|
||||
const incomeRiceWall = computed(() => {
|
||||
return (self.income.rice.wall * self.policy.rate) / 100;
|
||||
});
|
||||
|
||||
const incomeRiceWall = computed(() => {
|
||||
return (self.income.rice.wall * self.policy.rate) / 100;
|
||||
});
|
||||
const incomeRice = computed(() => {
|
||||
return incomeRiceCity.value + incomeRiceWall.value;
|
||||
});
|
||||
|
||||
const incomeRice = computed(() => {
|
||||
return incomeRiceCity.value + incomeRiceWall.value;
|
||||
});
|
||||
const outcomeByBill = computed(() => {
|
||||
return (self.outcome * self.policy.bill) / 100;
|
||||
});
|
||||
|
||||
const outcomeByBill = computed(() => {
|
||||
return (self.outcome * self.policy.bill) / 100;
|
||||
let oldRate = staticValues.policy.rate;
|
||||
async function setRate() {
|
||||
const rate = self.policy.rate;
|
||||
try {
|
||||
await SammoAPI.Nation.SetRate({ amount: rate });
|
||||
oldRate = rate;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "세율을 변경했습니다.",
|
||||
});
|
||||
|
||||
let oldRate = staticValues.policy.rate;
|
||||
async function setRate() {
|
||||
const rate = self.policy.rate;
|
||||
try {
|
||||
await SammoAPI.Nation.SetRate({ amount: rate });
|
||||
oldRate = rate;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "세율을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackRate() {
|
||||
self.policy.rate = oldRate;
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackRate() {
|
||||
self.policy.rate = oldRate;
|
||||
}
|
||||
|
||||
let oldBill = staticValues.policy.bill;
|
||||
async function setBill() {
|
||||
const bill = self.policy.bill;
|
||||
try {
|
||||
await SammoAPI.Nation.SetBill({ amount: bill });
|
||||
oldBill = bill;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "지급률을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackBill() {
|
||||
self.policy.bill = oldBill;
|
||||
let oldBill = staticValues.policy.bill;
|
||||
async function setBill() {
|
||||
const bill = self.policy.bill;
|
||||
try {
|
||||
await SammoAPI.Nation.SetBill({ amount: bill });
|
||||
oldBill = bill;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "지급률을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackBill() {
|
||||
self.policy.bill = oldBill;
|
||||
}
|
||||
|
||||
let oldSecretLimit = staticValues.policy.secretLimit;
|
||||
async function setSecretLimit() {
|
||||
const secretLimit = self.policy.secretLimit;
|
||||
try {
|
||||
await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
|
||||
oldSecretLimit = secretLimit;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "기밀 권한을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
self.policy.secretLimit = oldSecretLimit;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackSecretLimit() {
|
||||
self.policy.secretLimit = oldSecretLimit;
|
||||
let oldSecretLimit = staticValues.policy.secretLimit;
|
||||
async function setSecretLimit() {
|
||||
const secretLimit = self.policy.secretLimit;
|
||||
try {
|
||||
await SammoAPI.Nation.SetSecretLimit({ amount: secretLimit });
|
||||
oldSecretLimit = secretLimit;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "기밀 권한을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
self.policy.secretLimit = oldSecretLimit;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
function rollbackSecretLimit() {
|
||||
self.policy.secretLimit = oldSecretLimit;
|
||||
}
|
||||
|
||||
async function setBlockWar() {
|
||||
try {
|
||||
const result = await SammoAPI.Nation.SetBlockWar({ value: self.policy.blockWar });
|
||||
self.warSettingCnt.remain = result.availableCnt;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "전쟁 금지 설정을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
self.policy.blockWar = !self.policy.blockWar;
|
||||
console.error(e);
|
||||
}
|
||||
async function setBlockWar() {
|
||||
try {
|
||||
const result = await SammoAPI.Nation.SetBlockWar({ value: self.policy.blockWar });
|
||||
self.warSettingCnt.remain = result.availableCnt;
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "전쟁 금지 설정을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
self.policy.blockWar = !self.policy.blockWar;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function setBlockScout() {
|
||||
try {
|
||||
await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "임관 설정을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
self.policy.blockScout = !self.policy.blockScout;
|
||||
console.error(e);
|
||||
}
|
||||
async function setBlockScout() {
|
||||
try {
|
||||
await SammoAPI.Nation.SetBlockScout({ value: self.policy.blockScout });
|
||||
toasts.info({
|
||||
title: "변경",
|
||||
body: "임관 설정을 변경했습니다.",
|
||||
});
|
||||
} catch (e) {
|
||||
if (isString(e)) {
|
||||
toasts.danger({
|
||||
title: "에러",
|
||||
body: e,
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
toasts,
|
||||
|
||||
...toRefs(self),
|
||||
inEditNationMsg,
|
||||
inEditScoutMsg,
|
||||
enableEditNationMsg,
|
||||
rollbackNationMsg,
|
||||
saveNationMsg,
|
||||
enableEditScoutMsg,
|
||||
rollbackScoutMsg,
|
||||
saveScoutMsg,
|
||||
diplomacyStateInfo,
|
||||
joinYearMonth,
|
||||
parseYearMonth,
|
||||
self.policy.blockScout = !self.policy.blockScout;
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
|
||||
trackNationMsgHeight: trackTiptapFormHeight("#noticeForm"),
|
||||
trackScoutMsgHeight: trackTiptapFormHeight("#scoutMsgForm"),
|
||||
|
||||
incomeGoldCity,
|
||||
incomeGold,
|
||||
incomeRiceCity,
|
||||
incomeRiceWall,
|
||||
incomeRice,
|
||||
outcomeByBill,
|
||||
|
||||
setRate,
|
||||
rollbackRate,
|
||||
setBill,
|
||||
rollbackBill,
|
||||
setSecretLimit,
|
||||
rollbackSecretLimit,
|
||||
|
||||
setBlockWar,
|
||||
setBlockScout,
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
});
|
||||
</script>
|
||||
|
||||
+162
-165
@@ -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,186 +36,183 @@ function collisionCheck(node1: DOMRect, node2: DOMRect): boolean {
|
||||
type coord = { x: number; y: number };
|
||||
type rect = { width: number; height: number };
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
attribute: VueTypes.string.isRequired,
|
||||
color: VueTypes.string.def("#4299E1"),
|
||||
opacity: VueTypes.number.def(0.7),
|
||||
modelValue: {
|
||||
type: Object as PropType<Set<string>>,
|
||||
required: false,
|
||||
default: () => ref(new Set()),
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
const props = defineProps({
|
||||
attribute: VueTypes.string.isRequired,
|
||||
color: VueTypes.string.def("#4299E1"),
|
||||
opacity: VueTypes.number.def(0.7),
|
||||
modelValue: {
|
||||
type: Object as PropType<Set<string>>,
|
||||
required: false,
|
||||
default: () => ref(new Set()),
|
||||
},
|
||||
emits: ["update:modelValue", "dragDone", "dragStart"],
|
||||
setup(props, { emit }) {
|
||||
const intersected = ref<Set<string>>(props.modelValue);
|
||||
const container = ref<HTMLElement>();
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
watch(intersected, (val) => {
|
||||
emit("update:modelValue", val);
|
||||
});
|
||||
watch(props.modelValue, (val) => {
|
||||
if (intersected.value === val) {
|
||||
return;
|
||||
}
|
||||
intersected.value = val;
|
||||
});
|
||||
const emit = defineEmits<{
|
||||
(event: "update:modelValue", value: Set<string>): void;
|
||||
(event: "dragDone", value: Set<string>): void;
|
||||
(event: "dragStart"): void;
|
||||
}>();
|
||||
|
||||
onMounted(() => {
|
||||
if (!container.value) {
|
||||
console.error(`Container is not referenced.`);
|
||||
return;
|
||||
}
|
||||
const uContainer = container.value;
|
||||
let containerRect = uContainer.getBoundingClientRect();
|
||||
const intersected = ref<Set<string>>(props.modelValue);
|
||||
const container = ref<HTMLElement>();
|
||||
|
||||
function getCoords(e: MouseEvent | Touch): coord {
|
||||
return {
|
||||
x: e.clientX - containerRect.left,
|
||||
y: e.clientY - containerRect.top,
|
||||
};
|
||||
}
|
||||
let children: HTMLCollection;
|
||||
let box = document.createElement("div");
|
||||
box.setAttribute("data-drag-box-component", "");
|
||||
box.style.position = "absolute";
|
||||
box.style.backgroundColor = props.color;
|
||||
box.style.opacity = `${props.opacity}`;
|
||||
let start = { x: 0, y: 0 };
|
||||
let end = { x: 0, y: 0 };
|
||||
function intersection() {
|
||||
const rect = box.getBoundingClientRect();
|
||||
const localIntersected = new Set<string>();
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (collisionCheck(rect, children[i].getBoundingClientRect())) {
|
||||
const attr = children[i].getAttribute(props.attribute);
|
||||
if (children[i].hasAttribute(props.attribute)) {
|
||||
localIntersected.add(attr as string);
|
||||
}
|
||||
}
|
||||
}
|
||||
watch(intersected, (val) => {
|
||||
emit("update:modelValue", val);
|
||||
});
|
||||
watch(props.modelValue, (val) => {
|
||||
if (intersected.value === val) {
|
||||
return;
|
||||
}
|
||||
intersected.value = val;
|
||||
});
|
||||
|
||||
let dismatch = false;
|
||||
for (const oldVal of intersected.value) {
|
||||
if (!localIntersected.has(oldVal)) {
|
||||
dismatch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!dismatch) {
|
||||
for (const newVal of localIntersected) {
|
||||
if (!intersected.value.has(newVal)) {
|
||||
dismatch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (dismatch) {
|
||||
intersected.value = localIntersected;
|
||||
}
|
||||
}
|
||||
function touchStart(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
startDrag(e.touches[0]);
|
||||
}
|
||||
function touchMove(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
drag(e.touches[0]);
|
||||
}
|
||||
onMounted(() => {
|
||||
if (!container.value) {
|
||||
console.error(`Container is not referenced.`);
|
||||
return;
|
||||
}
|
||||
const uContainer = container.value;
|
||||
let containerRect = uContainer.getBoundingClientRect();
|
||||
|
||||
let isMine = false;
|
||||
function startDrag(e: MouseEvent | Touch) {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
function getCoords(e: MouseEvent | Touch): coord {
|
||||
return {
|
||||
x: e.clientX - containerRect.left,
|
||||
y: e.clientY - containerRect.top,
|
||||
};
|
||||
}
|
||||
let children: HTMLCollection;
|
||||
let box = document.createElement("div");
|
||||
box.setAttribute("data-drag-box-component", "");
|
||||
box.style.position = "absolute";
|
||||
box.style.backgroundColor = props.color;
|
||||
box.style.opacity = `${props.opacity}`;
|
||||
let start = { x: 0, y: 0 };
|
||||
let end = { x: 0, y: 0 };
|
||||
function intersection() {
|
||||
const rect = box.getBoundingClientRect();
|
||||
const localIntersected = new Set<string>();
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (collisionCheck(rect, children[i].getBoundingClientRect())) {
|
||||
const attr = children[i].getAttribute(props.attribute);
|
||||
if (children[i].hasAttribute(props.attribute)) {
|
||||
localIntersected.add(attr as string);
|
||||
}
|
||||
containerRect = uContainer.getBoundingClientRect();
|
||||
children = uContainer.children;
|
||||
start = getCoords(e);
|
||||
end = start;
|
||||
document.addEventListener("mousemove", drag);
|
||||
document.addEventListener("touchmove", touchMove);
|
||||
box.style.top = start.y + "px";
|
||||
box.style.left = start.x + "px";
|
||||
uContainer.append(box);
|
||||
intersection();
|
||||
isMine = true;
|
||||
emit("dragStart");
|
||||
}
|
||||
function drag(e: MouseEvent | Touch) {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
end = getCoords(e);
|
||||
const dimensions = getDimensions(start, end);
|
||||
if (end.x < start.x) {
|
||||
box.style.left = end.x + "px";
|
||||
}
|
||||
if (end.y < start.y) {
|
||||
box.style.top = end.y + "px";
|
||||
}
|
||||
box.style.width = dimensions.width + "px";
|
||||
box.style.height = dimensions.height + "px";
|
||||
intersection();
|
||||
}
|
||||
function endDrag() {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
start = { x: 0, y: 0 };
|
||||
end = { x: 0, y: 0 };
|
||||
box.style.width = "0";
|
||||
box.style.height = "0";
|
||||
document.removeEventListener("mousemove", drag);
|
||||
document.removeEventListener("touchmove", touchMove);
|
||||
box.remove();
|
||||
if (isMine) {
|
||||
emit("dragDone", intersected.value);
|
||||
}
|
||||
isMine = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(disabledNext) => {
|
||||
if (disabledNext) {
|
||||
uContainer.removeEventListener("mousedown", startDrag);
|
||||
uContainer.removeEventListener("touchstart", touchStart);
|
||||
document.removeEventListener("mouseup", endDrag);
|
||||
document.removeEventListener("touchend", endDrag);
|
||||
} else {
|
||||
uContainer.addEventListener("mousedown", startDrag);
|
||||
uContainer.addEventListener("touchstart", touchStart);
|
||||
document.addEventListener("mouseup", endDrag);
|
||||
document.addEventListener("touchend", endDrag);
|
||||
}
|
||||
let dismatch = false;
|
||||
for (const oldVal of intersected.value) {
|
||||
if (!localIntersected.has(oldVal)) {
|
||||
dismatch = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!dismatch) {
|
||||
for (const newVal of localIntersected) {
|
||||
if (!intersected.value.has(newVal)) {
|
||||
dismatch = true;
|
||||
break;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
if (dismatch) {
|
||||
intersected.value = localIntersected;
|
||||
}
|
||||
}
|
||||
function touchStart(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
startDrag(e.touches[0]);
|
||||
}
|
||||
function touchMove(e: TouchEvent) {
|
||||
e.preventDefault();
|
||||
drag(e.touches[0]);
|
||||
}
|
||||
|
||||
if (!props.disabled) {
|
||||
let isMine = false;
|
||||
function startDrag(e: MouseEvent | Touch) {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
containerRect = uContainer.getBoundingClientRect();
|
||||
children = uContainer.children;
|
||||
start = getCoords(e);
|
||||
end = start;
|
||||
document.addEventListener("mousemove", drag);
|
||||
document.addEventListener("touchmove", touchMove);
|
||||
box.style.top = start.y + "px";
|
||||
box.style.left = start.x + "px";
|
||||
uContainer.append(box);
|
||||
intersection();
|
||||
isMine = true;
|
||||
emit("dragStart");
|
||||
}
|
||||
function drag(e: MouseEvent | Touch) {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
end = getCoords(e);
|
||||
const dimensions = getDimensions(start, end);
|
||||
if (end.x < start.x) {
|
||||
box.style.left = end.x + "px";
|
||||
}
|
||||
if (end.y < start.y) {
|
||||
box.style.top = end.y + "px";
|
||||
}
|
||||
box.style.width = dimensions.width + "px";
|
||||
box.style.height = dimensions.height + "px";
|
||||
intersection();
|
||||
}
|
||||
function endDrag() {
|
||||
if (props.disabled) {
|
||||
return;
|
||||
}
|
||||
start = { x: 0, y: 0 };
|
||||
end = { x: 0, y: 0 };
|
||||
box.style.width = "0";
|
||||
box.style.height = "0";
|
||||
document.removeEventListener("mousemove", drag);
|
||||
document.removeEventListener("touchmove", touchMove);
|
||||
box.remove();
|
||||
if (isMine) {
|
||||
emit("dragDone", intersected.value);
|
||||
}
|
||||
isMine = false;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.disabled,
|
||||
(disabledNext) => {
|
||||
if (disabledNext) {
|
||||
uContainer.removeEventListener("mousedown", startDrag);
|
||||
uContainer.removeEventListener("touchstart", touchStart);
|
||||
document.removeEventListener("mouseup", endDrag);
|
||||
document.removeEventListener("touchend", endDrag);
|
||||
} else {
|
||||
uContainer.addEventListener("mousedown", startDrag);
|
||||
uContainer.addEventListener("touchstart", touchStart);
|
||||
document.addEventListener("mouseup", endDrag);
|
||||
document.addEventListener("touchend", endDrag);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
uContainer.removeEventListener("mousedown", startDrag);
|
||||
uContainer.removeEventListener("touchstart", touchStart);
|
||||
document.removeEventListener("mouseup", endDrag);
|
||||
document.removeEventListener("touchend", endDrag);
|
||||
});
|
||||
});
|
||||
if (!props.disabled) {
|
||||
uContainer.addEventListener("mousedown", startDrag);
|
||||
uContainer.addEventListener("touchstart", touchStart);
|
||||
document.addEventListener("mouseup", endDrag);
|
||||
document.addEventListener("touchend", endDrag);
|
||||
}
|
||||
|
||||
return {
|
||||
intersected,
|
||||
container,
|
||||
};
|
||||
},
|
||||
onBeforeUnmount(() => {
|
||||
uContainer.removeEventListener("mousedown", startDrag);
|
||||
uContainer.removeEventListener("touchstart", touchStart);
|
||||
document.removeEventListener("mouseup", endDrag);
|
||||
document.removeEventListener("touchend", endDrag);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user