fix, refac: bvn에 맞게 tooltip directive 변경

- installVue3Component로 통합
- boostrap-vue-next 0.7.3 directive 문제 우회

hwe/ts/components/AuctionUniqueItem.vue

@@ -7,7 +7,7 @@
       <div class="bg2">경매 {{ currentAuction.auction.id }}번 상세</div>
       <div class="row gx-0 text-center">
         <div class="col-2 col-md-1 bg1">경매명</div>
-        <div v-b-tooltip.hover class="col-4 col-md-2" :title="getItemTooltipText(currentAuction.auction.target)">
+        <div v-b-tooltip.hover="getItemTooltipText(currentAuction.auction.target)" class="col-4 col-md-2">
           {{ currentAuction.auction.title }}
         </div>
 
@@ -83,7 +83,7 @@
       @click="currentAuctionID = auctionID"
     >
       <div class="col-1">{{ auction.id }}</div>
-      <div v-b-tooltip.hover class="col-4" :title="getItemTooltipText(auction.target)">{{ auction.title }}</div>
+      <div v-b-tooltip.hover="getItemTooltipText(auction.target)" class="col-4">{{ auction.title }}</div>
       <div :class="['col-1', auction.isCallerHost ? 'isMe' : '']">{{ auction.hostName }}</div>
       <div class="col-2 f_tnum">{{ cutDateTime(auction.closeDate) }}</div>
       <div class="col-1">{{ auction.remainCloseDateExtensionCnt > 0 ? "남음" : "소진" }}</div>

hwe/ts/components/AutorunInfo.vue

@@ -1,5 +1,5 @@
 <template>
-  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover :title="tooltipText" style="text-decoration: underline;">자율행동</span>
+  <span v-if="autorunMode.limit_minutes > 0" v-b-tooltip.hover="tooltipText" style="text-decoration: underline;">자율행동</span>
 </template>
 <script setup lang="ts">
 import type { AutorunUserMode } from '@/defs/API/Global';

hwe/ts/components/ChiefReservedCommand.vue

@@ -188,7 +188,7 @@
             </DragSelect>
             <div :style="rowGridStyle">
               <div v-for="(turnObj, turnIdx) in reservedCommandList.map(postFilterTurnBrief)" :key="turnIdx" class="turn_pad center">
-                <span v-b-tooltip.hover class="turn_text" :style="turnObj.style" :title="turnObj.tooltip">
+                <span v-b-tooltip.hover="turnObj.tooltip" class="turn_text" :style="turnObj.style">
                   <!-- eslint-disable-next-line vue/no-v-html -->
                   <span v-html="turnObj.brief" />
                 </span>

hwe/ts/components/GeneralBasicCard.vue

@@ -61,15 +61,15 @@
 
     <div class="bg1">명마</div>
     <div v-if="!horse.info">{{ horse.name }}</div>
-    <div v-else v-b-tooltip.hover :title="horse.info">{{ horse.name }}</div>
+    <div v-else v-b-tooltip.hover="horse.info">{{ horse.name }}</div>
 
     <div class="bg1">무기</div>
     <div v-if="!weapon.info">{{ weapon.name }}</div>
-    <div v-else v-b-tooltip.hover :title="weapon.info">{{ weapon.name }}</div>
+    <div v-else v-b-tooltip.hover="weapon.info">{{ weapon.name }}</div>
 
     <div class="bg1">서적</div>
     <div v-if="!book.info">{{ book.name }}</div>
-    <div v-else v-b-tooltip.hover :title="book.info">{{ book.name }}</div>
+    <div v-else v-b-tooltip.hover="book.info">{{ book.name }}</div>
 
     <div class="bg1">자금</div>
     <div>{{ general.gold.toLocaleString() }}</div>
@@ -77,7 +77,7 @@
     <div>{{ general.rice.toLocaleString() }}</div>
     <div class="bg1">도구</div>
     <div v-if="!item.info">{{ item.name }}</div>
-    <div v-else v-b-tooltip.hover :title="item.info">{{ item.name }}</div>
+    <div v-else v-b-tooltip.hover="item.info">{{ item.name }}</div>
 
     <!-- TODO: show_img_level을 고려 -->
     <div
@@ -89,12 +89,12 @@
 
     <div class="bg1">병종</div>
     <div v-if="!crewtype.info">{{ crewtype.name }}</div>
-    <div v-else v-b-tooltip.hover :title="crewtype.info">{{ crewtype.name }}</div>
+    <div v-else v-b-tooltip.hover="crewtype.info">{{ crewtype.name }}</div>
     <div class="bg1">병사</div>
     <div>{{ general.crew.toLocaleString() }}</div>
     <div class="bg1">성격</div>
     <div v-if="!personal.info">{{ personal.name }}</div>
-    <div v-else v-b-tooltip.hover :title="personal.info">{{ personal.name }}</div>
+    <div v-else v-b-tooltip.hover="personal.info">{{ personal.name }}</div>
 
     <!-- TODO: bonusTrain 같은 개념이 필요 -->
     <div class="bg1">훈련</div>
@@ -104,10 +104,10 @@
     <div class="bg1">특기</div>
     <div>
       <span v-if="!specialDomestic.info"> {{ specialDomestic.name }}</span
-      ><span v-else v-b-tooltip.hover :title="specialDomestic.info"> {{ specialDomestic.name }}</span>
+      ><span v-else v-b-tooltip.hover="specialDomestic.info"> {{ specialDomestic.name }}</span>
       /
       <span v-if="!specialWar.info"> {{ specialWar.name }}</span
-      ><span v-else v-b-tooltip.hover :title="specialWar.info"> {{ specialWar.name }}</span>
+      ><span v-else v-b-tooltip.hover="specialWar.info"> {{ specialWar.name }}</span>
     </div>
 
     <div class="bg1">Lv</div>
@@ -177,7 +177,6 @@ import { isValidObjKey } from "@/utilGame/isValidObjKey";
 import { calcInjury } from "@/utilGame/calcInjury";
 import { addMinutes } from "date-fns/esm";
 import type { GameIActionInfo } from "@/defs/GameObj";
-
 const imagePath = window.pathConfig.gameImage;
 const gameConstStore = unwrap(inject<Ref<GameConstStore>>("gameConstStore"));
 const props = defineProps<{
@@ -185,7 +184,7 @@ const props = defineProps<{
   troopInfo?: {
     leader: {
       city: number;
-      reservedCommand?: GeneralListItemP1['reservedCommand'];
+      reservedCommand?: GeneralListItemP1["reservedCommand"];
     };
     name: string;
   };

hwe/ts/components/NationBasicCard.vue

@@ -67,9 +67,8 @@
     <div v-if="!nation.id" class="strategicCmd-body tb-body">해당 없음</div>
     <div
       v-else-if="impossibleStrategicCommandText"
-      v-b-tooltip.hover
+      v-b-tooltip.hover="impossibleStrategicCommandText"
       class="strategicCmd-body tb-body"
-      :title="impossibleStrategicCommandText"
       style="text-decoration: underline dashed red"
     >
       <span v-if="nation.strategicCmdLimit" style="color: red">{{ nation.strategicCmdLimit.toLocaleString() }}턴</span>

hwe/ts/components/SammoBar.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    v-b-tooltip.hover.top
-    :title="tooltipText"
+    v-b-tooltip.hover.top="tooltipText"
     class="sammo-bar"
     :style="{
       height: `${props.height + 2}px`,

hwe/ts/components/SimpleNationList.vue

@@ -21,7 +21,7 @@
         </td>
         <td style="text-align: right">{{ nation.power.toLocaleString() }}</td>
         <td style="text-align: right">{{ nation.gennum.toLocaleString() }}</td>
-        <td v-b-tooltip.hover style="text-align: right" :title="(nation.cities ?? []).join(', ')">
+        <td v-b-tooltip.hover="(nation.cities ?? []).join(', ')" style="text-align: right">
           {{ (nation.cities ?? []).length }}
         </td>
       </tr>

hwe/ts/components/TipTap.vue

@@ -1,34 +1,31 @@
 <template>
   <BButtonToolbar v-if="editable && editor" key-nav class="bg-dark">
     <BButtonGroup class="mx-1">
-      <BButton v-b-tooltip.hover title="되돌리기" @click="editor?.commands.undo()">
+      <BButton v-b-tooltip.hover="'되돌리기'" @click="editor?.commands.undo()">
         <i class="bi bi-arrow-90deg-left" />
       </BButton>
-      <BButton v-b-tooltip.hover title="재실행" @click="editor?.commands.redo()">
+      <BButton v-b-tooltip.hover="'재실행'" @click="editor?.commands.redo()">
         <i class="bi bi-arrow-90deg-right" />
       </BButton>
     </BButtonGroup>
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'진하게'"
         :class="{ 'is-active': editor.isActive('bold') }"
-        title="진하게"
         @click="editor?.chain().focus().toggleBold().run()"
       >
         <i class="bi bi-type-bold" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'기울이기'"
         :class="{ 'is-active': editor.isActive('italic') }"
-        title="기울이기"
         @click="editor?.chain().focus().toggleItalic().run()"
       >
         <i class="bi bi-type-italic" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'밑줄'"
         :class="{ 'is-active': editor.isActive('underline') }"
-        title="밑줄"
         @click="editor?.chain().focus().toggleUnderline().run()"
       >
         <i class="bi bi-type-underline" />
@@ -66,9 +63,8 @@
 
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'가로선'"
         :class="{ 'is-active': editor.isActive('strike') }"
-        title="가로선"
         @click="editor?.chain().focus().toggleStrike().run()"
       >
         <i class="bi bi-type-strikethrough" />
@@ -78,26 +74,24 @@
 
     <BButtonGroup class="mx-1">
       <BButton
-        v-b-tooltip.hover
-        title="색상 취소"
+        v-b-tooltip.hover="'색상 취소'"
+
         @click="editor?.chain().focus().unsetColor().unsetBackgroundColor().run()"
       >
         <i class="bi bi-droplet" />
       </BButton>
       <input
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'글자색'"
         type="color"
         class="form-control form-control-color"
         :value="colorConvert(editor.getAttributes('textStyle').color, '#ffffff')"
-        title="글자색"
         @input="editor?.chain().focus().setColor(($event.target as HTMLInputElement).value).run()"
       />
       <input
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'배경색'"
         type="color"
         class="form-control form-control-color"
         :value="colorConvert(editor.getAttributes('textStyle').backgroundColor, '#000000')"
-        title="배경색"
         @input="
           editor?.chain().focus().setBackgroundColor(($event.target as HTMLInputElement).value).run()
         "
@@ -105,7 +99,7 @@
     </BButtonGroup>
 
     <BButtonGroup class="mx-1">
-      <BButton v-b-tooltip.hover title="이미지 추가" @click="showImageModal = true">
+      <BButton v-b-tooltip.hover="'이미지 추가'" @click="showImageModal = true">
         <i class="bi bi-image" />
       </BButton>
       <!-- 이미지추가 -->
@@ -113,7 +107,7 @@
       <!-- 영상링크 -->
       <!-- 표 -->
       <!-- 구분선 삽입 -->
-      <BButton v-b-tooltip.hover title="구분선" @click="editor?.chain().focus().setHorizontalRule().run()">
+      <BButton v-b-tooltip.hover="'구분선'" @click="editor?.chain().focus().setHorizontalRule().run()">
         <i class="bi bi-hr" />
       </BButton>
     </BButtonGroup>
@@ -122,25 +116,22 @@
       <!-- 글머리 기호 -->
       <!-- 번호 매기기 -->
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'왼쪽 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'left' }) }"
-        title="왼쪽 정렬"
         @click="editor?.chain().focus().setTextAlign('left').run()"
       >
         <i class="bi bi-text-left" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'가운데 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'center' }) }"
-        title="가운데 정렬"
         @click="editor?.chain().focus().setTextAlign('center').run()"
       >
         <i class="bi bi-text-center" />
       </BButton>
       <BButton
-        v-b-tooltip.hover
+        v-b-tooltip.hover="'오른쪽 정렬'"
         :class="{ 'is-active': editor.isActive({ textAlign: 'right' }) }"
-        title="오른쪽 정렬"
         @click="editor?.chain().focus().setTextAlign('right').run()"
       >
         <i class="bi bi-text-right" />
@@ -167,40 +158,37 @@
     <BButtonToolbar>
       <BButtonGroup class="mx-1">
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'1/4 너비로 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'small',
             }),
             f_frac: true,
           }"
-          title="1/4 너비로 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'small' }).run()"
         >
           1/4
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'1/2 너비로 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'medium',
             }),
             f_frac: true,
           }"
-          title="1/2 너비로 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'medium' }).run()"
         >
           1/2
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'가득 채우기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               size: 'large',
             }),
             f_frac: true,
           }"
-          title="가득 채우기"
           @click="editor?.chain().focus().setImageEx({ size: 'large' }).run()"
         >
           1
@@ -218,61 +206,56 @@
       </BButtonGroup>
       <BButtonGroup class="mx-1">
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'왼쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-left',
             }),
           }"
-          title="왼쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'float-left' }).run()"
         >
           <i class="bi bi-chevron-bar-left" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'왼쪽으로'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'left',
             }),
           }"
-          title="왼쪽으로"
           @click="editor?.chain().focus().setImageEx({ align: 'left' }).run()"
         >
           <i class="bi bi-align-start" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'가운데로'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'center',
             }),
           }"
-          title="가운데로"
           @click="editor?.chain().focus().setImageEx({ align: 'center' }).run()"
         >
           <i class="bi bi-align-center" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'오른쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'right',
             }),
           }"
-          title="오른쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'right' }).run()"
         >
           <i class="bi bi-align-end" />
         </BButton>
         <BButton
-          v-b-tooltip.hover
+          v-b-tooltip.hover="'오른쪽으로 붙이기'"
           :class="{
             'is-active': editor.isActive('custom-image', {
               float: 'float-right',
             }),
           }"
-          title="오른쪽으로 붙이기"
           @click="editor?.chain().focus().setImageEx({ align: 'float-right' }).run()"
         >
           <i class="bi bi-chevron-bar-right" />