build: bootstrap-vue-3

- tiptap/CustomImage 정의 문제 수정
- useToast() 관련 문제 수정

hwe/ts/PageBoard.vue

@@ -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 = {

hwe/ts/PageChiefCenter.vue

@@ -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,

hwe/ts/PageNPCControl.vue

@@ -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 { useToast, BContainer } from 'bootstrap-vue-3';
-import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
 
 const chiefActionPriority = ref<IDItem<NPCChiefActions>[]>([]);
 const chiefActionKeys = ref(new Set(staticValues.availableNationPriorityItems));

hwe/ts/PageNationBetting.vue

@@ -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'>>,

hwe/ts/PageNationStratFinan.vue

@@ -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 type { ValidResponse } from "./util/callSammoAPI";
-import BContainer from "bootstrap-vue-3/src/components/BContainer.vue";
+import { useToast, BContainer } from "bootstrap-vue-3";
-import { useToast } from "bootstrap-vue-3/src/components/BToast/plugin";
 import { unwrap } from "./util/unwrap";
 
 type NationItem = NationStaticItem & {

hwe/ts/components/BettingDetail.vue

@@ -118,12 +118,13 @@
     </div>
 </template>
 
-<script setup lang="ts">import { BettingInfo, ToastType } from '@/defs';
+<script setup lang="ts">
-import { SammoAPI, ValidResponse } from "@/SammoAPI";
+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;

hwe/ts/components/BoardArticle.vue

@@ -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: {

hwe/ts/components/BoardComment.vue

@@ -6,8 +6,8 @@
   </div>
 </template>
 <script lang="ts">
-import { BoardCommentItem } from "@/PageBoard.vue";
+import type { BoardCommentItem } from "@/PageBoard.vue";
-import { defineComponent, PropType } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
   name: "BoardComment",

hwe/ts/components/BottomBar.vue

@@ -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({

hwe/ts/components/ChiefReservedCommand.vue

@@ -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<
+      type: Object as PropType<ChiefResponse['commandList']>,
-        {
-          category: string;
-          values: commandItem[];
-        }[]
-      >,
       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;

hwe/ts/components/DragSelect.vue

@@ -20,7 +20,7 @@ import {
   watch,
   onMounted,
   onBeforeUnmount,
-  PropType,
+  type PropType,
 } from "vue";
 import VueTypes from "vue-types";
 

hwe/ts/components/MapLegacyTemplate.vue

@@ -45,8 +45,8 @@
 </template>
 <script lang="ts">
 import "@/../css/map.css";
-import { reloadWorldMap, loadMapOption, MapCityParsed } from "@/map";
+import { reloadWorldMap, type loadMapOption, type MapCityParsed } from "@/map";
-import { defineComponent, onMounted, PropType, ref } from "vue";
+import { defineComponent, onMounted, type PropType, ref } from "vue";
 import { v4 as uuidv4 } from "uuid";
 export type { MapCityParsed };
 export default defineComponent({

hwe/ts/components/TipTap.vue

@@ -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;

hwe/ts/components/TopBackBar.vue

@@ -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",

hwe/ts/defs.ts

@@ -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: {
+            turn: TurnObj[];
-                action: string;
-                brief: string;
-                arg: Record<string, unknown>;
-            }[];
         }
     >;
     isChief: boolean;
@@ -211,7 +213,7 @@ export type ChiefResponse = {
     officerLevel: number;
     commandList: {
         category: string;
-        values: commandItem[];
+        values: CommandItem[];
     }[];
 };
 

hwe/ts/tiptap-ext/CustomImage.ts

@@ -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') {

hwe/ts/util/autoResizeTextarea.ts

@@ -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`;

hwe/ts/v_NPCControl.ts

@@ -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')

hwe/ts/v_nationBetting.ts

@@ -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');

hwe/ts/v_nationStratFinan.ts

@@ -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');

package-lock.json

@@ -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",
+      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.8.tgz",
-      "integrity": "sha512-OzVXZ1/HbNiszO/AO7kJcxicYCVRcyyYK1niijskeEHO/6GNnD5MySGSG8nKoq8sthCGeTdCFS53p0O+c1+43g==",
+      "integrity": "sha512-MIsWALS6YPiH7hVa6QFN1CrOircCX18UklhD9efnxaN93vUtA759kdgFb9+m2m2NDPSjTXTxGkhOWIpCpIhPKQ==",
       "dependencies": {
         "core-js": "3.x.x"
       },
@@ -11896,9 +11896,9 @@
       "requires": {}
     },
     "bootstrap-vue-3": {
-      "version": "0.1.6",
+      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.6.tgz",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue-3/-/bootstrap-vue-3-0.1.8.tgz",
-      "integrity": "sha512-OzVXZ1/HbNiszO/AO7kJcxicYCVRcyyYK1niijskeEHO/6GNnD5MySGSG8nKoq8sthCGeTdCFS53p0O+c1+43g==",
+      "integrity": "sha512-MIsWALS6YPiH7hVa6QFN1CrOircCX18UklhD9efnxaN93vUtA759kdgFb9+m2m2NDPSjTXTxGkhOWIpCpIhPKQ==",
       "requires": {
         "core-js": "3.x.x"
       }

package.json

@@ -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",