build: bootstrap-vue-3

- tiptap/CustomImage 정의 문제 수정
- useToast() 관련 문제 수정
This commit is contained in:
2022-03-20 18:37:38 +09:00
parent 76a31acadc
commit 40b1a9fbdf
22 changed files with 82 additions and 89 deletions
+1 -1
View File
@@ -58,7 +58,7 @@ import BottomBar from "@/components/BottomBar.vue";
import BoardArticle from "@/components/BoardArticle.vue";
import { convertFormData } from "@util/convertFormData";
import axios from "axios";
import { InvalidResponse } from "@/defs";
import type { InvalidResponse } from "@/defs";
import { autoResizeTextarea } from "@util/autoResizeTextarea";
import { unwrap } from "@util/unwrap";
export type BoardResponse = {
+4 -2
View File
@@ -161,7 +161,7 @@
:month="month"
:turn="officer.turn"
:turnTerm="turnTerm"
:commandList="commandList"
:commandList="unwrap(commandList)"
:turnTime="officer.turnTime"
:maxTurn="maxChiefTurn"
:maxPushTurn="Math.floor(maxChiefTurn / 2)"
@@ -253,8 +253,9 @@ import { parseTime } from "./util/parseTime";
import { getNpcColor } from "./common_legacy";
import TopItem from "@/ChiefCenter/TopItem.vue";
import BottomItem from "@/ChiefCenter/BottomItem.vue";
import { ChiefResponse, OptionalFull } from "./defs";
import type { ChiefResponse, OptionalFull } from "./defs";
import { SammoAPI } from "./SammoAPI";
import { unwrap } from "@/util/unwrap";
function isDropdownChildren(e?: Event): boolean {
if (!e) {
@@ -477,6 +478,7 @@ export default defineComponent({
subTableGridRows,
reloadTable,
getNpcColor,
unwrap,
viewTarget,
targetIsMe,
maxPushTurn: props.maxChiefTurn / 2,
+2 -3
View File
@@ -480,7 +480,7 @@ import "@scss/common/bootstrap5.scss";
import "@scss/game_bg.scss";
import { ref } from "vue";
import {
import type {
IDItem,
InvalidResponse,
NationPolicy,
@@ -496,8 +496,7 @@ import { NPCPriorityBtnHelpMessage } from "@/helpTexts";
import draggable from "vuedraggable";
import TopBackBar from "@/components/TopBackBar.vue";
import { convertIDArray } from "@util/convertIDArray";
import { useToast } from 'bootstrap-vue-3/src/components/BToast/plugin';
import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
import { useToast, BContainer } from 'bootstrap-vue-3';
const chiefActionPriority = ref<IDItem<NPCChiefActions>[]>([]);
const chiefActionKeys = ref(new Set(staticValues.availableNationPriorityItems));
+3 -4
View File
@@ -33,16 +33,15 @@
<script lang="ts" setup>
import TopBackBar from "@/components/TopBackBar.vue";
import BottomBar from "@/components/BottomBar.vue";
import { BettingInfo, ToastType } from "@/defs";
import type { BettingInfo, ToastType } from "@/defs";
import { onMounted, ref } from "vue";
import { SammoAPI, ValidResponse } from "./SammoAPI";
import { SammoAPI, type ValidResponse } from "./SammoAPI";
import { isString } from "lodash";
import { parseYearMonth } from "@/util/parseYearMonth";
import { joinYearMonth } from "./util/joinYearMonth";
import BettingDetail from "@/components/BettingDetail.vue";
import { useToast } from "bootstrap-vue-3/src/components/BToast/plugin";
import { BContainer, useToast } from "bootstrap-vue-3";
import { unwrap } from "./util/unwrap";
import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
type BettingListResponse = ValidResponse & {
bettingList: Record<number, Omit<BettingInfo & { totalAmount: number }, 'candidates'>>,
+4 -5
View File
@@ -304,16 +304,15 @@ import BottomBar from "@/components/BottomBar.vue";
import { computed, defineComponent, reactive, ref, toRefs } from "vue";
import { isString } from "lodash";
import {
diplomacyState,
type diplomacyState,
diplomacyStateInfo,
NationStaticItem,
type NationStaticItem,
} from "./defs";
import { SammoAPI } from "./SammoAPI";
import { joinYearMonth } from "@/util/joinYearMonth";
import { parseYearMonth } from "@/util/parseYearMonth";
import { ValidResponse } from "./util/callSammoAPI";
import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
import { useToast } from "bootstrap-vue-3/src/components/BToast/plugin";
import type { ValidResponse } from "./util/callSammoAPI";
import { useToast, BContainer } from "bootstrap-vue-3";
import { unwrap } from "./util/unwrap";
type NationItem = NationStaticItem & {
+4 -3
View File
@@ -118,12 +118,13 @@
</div>
</template>
<script setup lang="ts">import { BettingInfo, ToastType } from '@/defs';
import { SammoAPI, ValidResponse } from "@/SammoAPI";
<script setup lang="ts">
import type { BettingInfo, ToastType } from '@/defs';
import { SammoAPI, type ValidResponse } from "@/SammoAPI";
import { joinYearMonth } from '@/util/joinYearMonth';
import { parseYearMonth } from '@/util/parseYearMonth';
import { isString, range, sum } from 'lodash';
import { ref, defineProps, defineEmits, PropType, watch } from "vue";
import { ref, defineProps, defineEmits, type PropType, watch } from "vue";
type BettingDetailResponse = ValidResponse & {
bettingInfo: BettingInfo;
+3 -3
View File
@@ -46,12 +46,12 @@
</div>
</template>
<script lang="ts">
import { BoardArticleItem } from "@/PageBoard.vue";
import type { BoardArticleItem } from "@/PageBoard.vue";
import BoardComment from "@/components/BoardComment.vue";
import { defineComponent, PropType } from "vue";
import { defineComponent, type PropType } from "vue";
import axios from "axios";
import { convertFormData } from "@util/convertFormData";
import { InvalidResponse } from "@/defs";
import type { InvalidResponse } from "@/defs";
export default defineComponent({
name: "BoardArticle",
components: {
+2 -2
View File
@@ -6,8 +6,8 @@
</div>
</template>
<script lang="ts">
import { BoardCommentItem } from "@/PageBoard.vue";
import { defineComponent, PropType } from "vue";
import type { BoardCommentItem } from "@/PageBoard.vue";
import { defineComponent, type PropType } from "vue";
export default defineComponent({
name: "BoardComment",
+1 -1
View File
@@ -8,7 +8,7 @@
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { defineComponent, type PropType } from "vue";
import "@scss/game_bg.scss";
export default defineComponent({
+4 -22
View File
@@ -145,7 +145,7 @@
<script lang="ts">
import addMinutes from "date-fns/esm/addMinutes";
import { stringifyUrl } from "query-string";
import { defineComponent, PropType } from "vue";
import { defineComponent, type PropType } from "vue";
import { formatTime } from "@util/formatTime";
import { joinYearMonth } from "@util/joinYearMonth";
import { mb_strwidth } from "@util/mb_strwidth";
@@ -156,26 +156,13 @@ import VueTypes from "vue-types";
import DragSelect from "@/components/DragSelect.vue";
import { isString } from "lodash";
import { SammoAPI } from "@/SammoAPI";
import type { ChiefResponse, CommandItem, TurnObj } from "@/defs";
type commandItem = {
value: string;
title: string;
compensation: number;
simpleName: string;
possible: boolean;
reqArg: boolean;
searchText?: string;
};
/*declare const commandList: {
category: string;
values: commandItem[];
}[];*/
type TurnObj = {
action: string;
brief: string;
arg: null | [] | Record<string, number | string | number[] | string[]>;
};
type TurnObjWithTime = TurnObj & {
time: string;
@@ -210,12 +197,7 @@ export default defineComponent({
required: true,
},
commandList: {
type: Object as PropType<
{
category: string;
values: commandItem[];
}[]
>,
type: Object as PropType<ChiefResponse['commandList']>,
required: true,
},
},
@@ -431,7 +413,7 @@ export default defineComponent({
}
}
const invCommandMap: Record<string, commandItem> = {};
const invCommandMap: Record<string, CommandItem> = {};
for(const category of this.commandList){
for(const command of category.values){
invCommandMap[command.value] = command;
+1 -1
View File
@@ -20,7 +20,7 @@ import {
watch,
onMounted,
onBeforeUnmount,
PropType,
type PropType,
} from "vue";
import VueTypes from "vue-types";
+2 -2
View File
@@ -45,8 +45,8 @@
</template>
<script lang="ts">
import "@/../css/map.css";
import { reloadWorldMap, loadMapOption, MapCityParsed } from "@/map";
import { defineComponent, onMounted, PropType, ref } from "vue";
import { reloadWorldMap, type loadMapOption, type MapCityParsed } from "@/map";
import { defineComponent, onMounted, type PropType, ref } from "vue";
import { v4 as uuidv4 } from "uuid";
export type { MapCityParsed };
export default defineComponent({
+13 -12
View File
@@ -89,7 +89,7 @@
:value="
colorConvert(editor.getAttributes('textStyle').color, '#ffffff')
"
@input="editor.chain().focus().setColor($event.target.value).run()"
@input="editor.chain().focus().setColor(($event.target as HTMLInputElement).value).run()"
v-b-tooltip.hover
title="글자색"
/>
@@ -103,7 +103,7 @@
)
"
@input="
editor.chain().focus().setBackgroundColor($event.target.value).run()
editor.chain().focus().setBackgroundColor(($event.target as HTMLInputElement).value).run()
"
v-b-tooltip.hover
title="배경색"
@@ -176,7 +176,7 @@
<b-button-toolbar>
<b-button-group class="mx-1">
<b-button
@click="editor.chain().focus().setImage({ size: 'small' }).run()"
@click="editor.chain().focus().setImageEx({ size: 'small' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'small',
@@ -188,7 +188,7 @@
>1/4</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'medium' }).run()"
@click="editor.chain().focus().setImageEx({ size: 'medium' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'medium',
@@ -200,7 +200,7 @@
>1/2</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'large' }).run()"
@click="editor.chain().focus().setImageEx({ size: 'large' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'large',
@@ -212,7 +212,7 @@
>1</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'original' }).run()"
@click="editor.chain().focus().setImageEx({ size: 'original' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'original',
@@ -224,7 +224,7 @@
<b-button-group class="mx-1">
<b-button
@click="
editor.chain().focus().setImage({ align: 'float-left' }).run()
editor.chain().focus().setImageEx({ align: 'float-left' }).run()
"
:class="{
'is-active': editor.isActive('custom-image', {
@@ -236,7 +236,7 @@
><i class="bi bi-chevron-bar-left"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'left' }).run()"
@click="editor.chain().focus().setImageEx({ align: 'left' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'left',
@@ -247,7 +247,7 @@
><i class="bi bi-align-start"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'center' }).run()"
@click="editor.chain().focus().setImageEx({ align: 'center' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'center',
@@ -258,7 +258,7 @@
><i class="bi bi-align-center"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'right' }).run()"
@click="editor.chain().focus().setImageEx({ align: 'right' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'right',
@@ -270,7 +270,7 @@
></b-button>
<b-button
@click="
editor.chain().focus().setImage({ align: 'float-right' }).run()
editor.chain().focus().setImageEx({ align: 'float-right' }).run()
"
:class="{
'is-active': editor.isActive('custom-image', {
@@ -356,7 +356,7 @@ import { v4 as uuidv4 } from "uuid";
import { unwrap } from "@/util/unwrap";
import { getBase64FromFileObject } from "@/util/getBase64FromFileObject";
import { isObject, isString } from "lodash";
import { AxiosError } from "axios";
import type { AxiosError } from "axios";
import { SammoAPI } from "@/SammoAPI";
const compoment = defineComponent({
@@ -373,6 +373,7 @@ const compoment = defineComponent({
},
emits: ["ready", "update:modelValue"],
methods: {
unwrap,
chooseImage(e: Event) {
const target = unwrap(e.target) as HTMLInputElement;
this.imageUploadFiles = target.files;
+1 -1
View File
@@ -26,7 +26,7 @@
<script lang="ts">
import "@scss/game_bg.scss";
import { defineComponent, PropType } from "vue";
import { defineComponent, type PropType } from "vue";
export default defineComponent({
name: "TopBackBar",
+11 -9
View File
@@ -173,7 +173,14 @@ export type OptionalFull<Type> = {
[Property in keyof Type]: Type[Property] | undefined;
};
export type commandItem = {
export type TurnObj = {
action: string;
brief: string;
arg: null | [] | Record<string, number | string | number[] | string[]>;
};
export type CommandItem = {
value: string;
title: string;
compensation: number;
@@ -181,8 +188,7 @@ export type commandItem = {
possible: boolean;
reqArg: boolean;
searchText?: string;
};
};
export type ChiefResponse = {
result: true;
@@ -199,11 +205,7 @@ export type ChiefResponse = {
officerLevelText: string;
officerLevel: number;
npcType: number;
turn: {
action: string;
brief: string;
arg: Record<string, unknown>;
}[];
turn: TurnObj[];
}
>;
isChief: boolean;
@@ -211,7 +213,7 @@ export type ChiefResponse = {
officerLevel: number;
commandList: {
category: string;
values: commandItem[];
values: CommandItem[];
}[];
};
+11 -3
View File
@@ -1,6 +1,6 @@
import { mergeAttributes } from '@tiptap/core'
//https://github.com/joevallender/tiptap2-image-example/blob/main/src/extensions/custom-image-3.js
import Image, { type ImageOptions } from '@tiptap/extension-image'
import { mergeAttributes } from '@tiptap/core'
export interface CustomImageOptions extends ImageOptions {
sizes: string[],
@@ -8,7 +8,15 @@ export interface CustomImageOptions extends ImageOptions {
declare module '@tiptap/core' {
interface Commands<ReturnType> {
setImage: (options: { src: string, alt?: string, title?: string, size: string }) => ReturnType,
imageEx: {
setImageEx: (options: {
src?: string,
alt?: string,
title?: string,
size?: string,
align?: string,
}) => ReturnType,
}
}
}
@@ -51,7 +59,7 @@ export default Image.extend<CustomImageOptions>({
// the same way as addAttributes `this`
// seemed to lose context, so I've just
// copied it in here directly
setImage: (options) => ({ tr, commands }) => {
setImageEx: (options) => ({ tr, commands }) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (tr.selection?.node?.type?.name == 'custom-image') {
+1 -1
View File
@@ -1,6 +1,6 @@
import { unwrap } from "@util/unwrap";
export function autoResizeTextarea(e: InputEvent): void {
export function autoResizeTextarea(e: Event): void {
const el = unwrap(e.target) as HTMLInputElement;
el.style.height = 'auto';
el.style.height = `${el.scrollHeight + 1}px`;
+2 -2
View File
@@ -2,8 +2,8 @@ import "@scss/common/bootstrap5.scss";
import { createApp } from 'vue'
import NPCControl from '@/PageNPCControl.vue';
import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3'
import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3'
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
setAxiosXMLHttpRequest();
createApp(NPCControl).use(BootstrapVue3).use(ToastPlugin).mount('#app')
createApp(NPCControl).use(BootstrapVue3).use(BToastPlugin).mount('#app')
+2 -2
View File
@@ -2,11 +2,11 @@ import "@scss/nationBetting.scss";
import { createApp } from 'vue'
import PageNationBetting from '@/PageNationBetting.vue';
import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3';
import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3';
import { auto500px } from './util/auto500px';
auto500px();
createApp(PageNationBetting).use(BootstrapVue3).use(ToastPlugin).mount('#app');
createApp(PageNationBetting).use(BootstrapVue3).use(BToastPlugin).mount('#app');
+2 -2
View File
@@ -2,11 +2,11 @@ import "@scss/nationStratFinan.scss";
import { createApp } from 'vue'
import PageNationStratFinan from '@/PageNationStratFinan.vue';
import {BootstrapVue3, ToastPlugin} from 'bootstrap-vue-3';
import { BootstrapVue3, BToastPlugin } from 'bootstrap-vue-3';
import { auto500px } from './util/auto500px';
auto500px();
createApp(PageNationStratFinan).use(BootstrapVue3).use(ToastPlugin).mount('#app');
createApp(PageNationStratFinan).use(BootstrapVue3).use(BToastPlugin).mount('#app');
+7 -7
View File
@@ -43,7 +43,7 @@
"babel-plugin-lodash": "^3.3.4",
"babel-preset-modern-browsers": "^15.0.2",
"bootstrap": "^5.1.3",
"bootstrap-vue-3": "=0.1.6",
"bootstrap-vue-3": "=0.1.8",
"bootswatch": "^5.1.3",
"buffer": "^6.0.3",
"chai": "^4.3.6",
@@ -3377,9 +3377,9 @@
}
},
"node_modules/bootstrap-vue-3": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.6.tgz",
"integrity": "sha512-OzVXZ1/HbNiszO/AO7kJcxicYCVRcyyYK1niijskeEHO/6GNnD5MySGSG8nKoq8sthCGeTdCFS53p0O+c1+43g==",
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.8.tgz",
"integrity": "sha512-MIsWALS6YPiH7hVa6QFN1CrOircCX18UklhD9efnxaN93vUtA759kdgFb9+m2m2NDPSjTXTxGkhOWIpCpIhPKQ==",
"dependencies": {
"core-js": "3.x.x"
},
@@ -11896,9 +11896,9 @@
"requires": {}
},
"bootstrap-vue-3": {
"version": "0.1.6",
"resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.6.tgz",
"integrity": "sha512-OzVXZ1/HbNiszO/AO7kJcxicYCVRcyyYK1niijskeEHO/6GNnD5MySGSG8nKoq8sthCGeTdCFS53p0O+c1+43g==",
"version": "0.1.8",
"resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.8.tgz",
"integrity": "sha512-MIsWALS6YPiH7hVa6QFN1CrOircCX18UklhD9efnxaN93vUtA759kdgFb9+m2m2NDPSjTXTxGkhOWIpCpIhPKQ==",
"requires": {
"core-js": "3.x.x"
}
+1 -1
View File
@@ -56,7 +56,7 @@
"babel-plugin-lodash": "^3.3.4",
"babel-preset-modern-browsers": "^15.0.2",
"bootstrap": "^5.1.3",
"bootstrap-vue-3": "=0.1.6",
"bootstrap-vue-3": "=0.1.8",
"bootswatch": "^5.1.3",
"buffer": "^6.0.3",
"chai": "^4.3.6",