fix: Fix some tooltip and context menu behavior

xmcl-keystone-ui/src/composables/instanceCreation.ts

@@ -1,5 +1,5 @@
 import { useService } from '@/composables'
-import { generateDistinctName } from '@/util/instanceName'
+import { generateBaseName, generateDistinctName } from '@/util/instanceName'
 import { Instance, InstanceData, InstanceFile, InstanceInstallServiceKey, InstanceServiceKey, LocalVersionHeader, RuntimeVersions, VersionMetadataServiceKey } from '@xmcl/runtime-api'
 import type { GameProfile } from '@xmcl/user'
 import { InjectionKey, Ref, reactive } from 'vue'
@@ -53,7 +53,7 @@ export function useInstanceCreation(gameProfile: Ref<GameProfile>, versions: Ref
      */
     async create() {
       if (!data.name) {
-        data.name = generateDistinctName(instances.value.map(i => i.name), data.runtime)
+        data.name = generateDistinctName(generateBaseName(data.runtime), instances.value.map(i => i.name))
       }
       const newPath = await create(data)
       if (files.value.length > 0) {

xmcl-keystone-ui/src/directives/contextMenu.ts

@@ -2,7 +2,7 @@ import { FunctionDirective, Ref } from 'vue'
 import { ContextMenuItem, useContextMenu } from '../composables/contextMenu'
 
 export const vContextMenu: FunctionDirective<HTMLElement, undefined | (ContextMenuItem[]) | (() => ContextMenuItem[])> = (el, bindings, node, prevNode) => {
-  if (!prevNode.tag) return
+  if (!prevNode.tag && !bindings.modifiers.force) return
   const { open } = useContextMenu()
   el.addEventListener('contextmenu', (e) => {
     if (bindings.value instanceof Array && bindings.value.length > 0) {

xmcl-keystone-ui/src/directives/sharedTooltip.ts

@@ -1,7 +1,7 @@
 import { SharedTooltipData, useSharedTooltipData } from '@/composables/sharedTooltip'
 import { FunctionDirective } from 'vue'
 
-export const vSharedTooltip: FunctionDirective<HTMLElement, string | [string, string]> = (el, bindings, node, prevNode) => {
+export const vSharedTooltip: FunctionDirective<HTMLElement, ((v?: any) => string) | string | [string, string]> = (el, bindings, node, prevNode) => {
   if (prevNode.tag) return
   const { blocked, data, isShown, stack, shouldPushStack, setValue } = useSharedTooltipData()
   el.addEventListener('mouseenter', (e) => {
@@ -49,6 +49,8 @@ export const vSharedTooltip: FunctionDirective<HTMLElement, string | [string, st
     } else if (val instanceof Array) {
       newData.text = val[0]
       newData.color = val[1]
+    } else if (typeof val === 'function') {
+      newData.text = val()
     }
 
     data.value = newData

xmcl-keystone-ui/src/util/instanceName.ts

@@ -1,6 +1,6 @@
 import { RuntimeVersions } from '@xmcl/runtime-api'
 
-export function generateDistinctName(names: string[], runtime: RuntimeVersions) {
+export function generateBaseName(runtime: RuntimeVersions) {
     let name = runtime.minecraft
     if (runtime.forge) {
         name += `-forge${runtime.forge}`
@@ -11,6 +11,11 @@ export function generateDistinctName(names: string[], runtime: RuntimeVersions)
     } else if (runtime.quiltLoader) {
         name += `-quiltLoader${runtime.quiltLoader}`
     }
+    return name
+}
+
+export function generateDistinctName(baseName: string, names: string[]) {
+    let name = baseName
     let idx = 1
     while (names.includes(name)) {
         name = `${name}-${idx++}`

xmcl-keystone-ui/src/views/ModActions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-end gap-3">
     <v-btn
-      v-shared-tooltip="t('mod.showDirectory')"
+      v-shared-tooltip="_ => t('mod.showDirectory')"
       icon
       large
       @click="showDirectory(path)"

xmcl-keystone-ui/src/views/ModpackCard.vue

@@ -1,7 +1,7 @@
 <template>
   <v-card
     v-draggable-card
-    v-context-menu="contextMenuItems"
+    v-context-menu.force="contextMenuItems"
     outlined
     draggable
     hover

xmcl-keystone-ui/src/views/ResourcePackActions.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-end gap-3">
     <v-btn
-      v-shared-tooltip="t('resourcepack.name', 2)"
+      v-shared-tooltip="_ => t('resourcepack.name', 2)"
       icon
       large
       @click="showDirectory(path)"

xmcl-keystone-ui/src/views/ShaderPackActions.vue

@@ -1,23 +1,13 @@
 <template>
   <div class="flex items-center justify-end gap-3">
     <v-btn
-      v-shared-tooltip="t('shaderPack.showDirectory')"
+      v-shared-tooltip="_ => t('shaderPack.showDirectory')"
       icon
       large
       @click="showDirectory(path)"
     >
       <v-icon>folder</v-icon>
     </v-btn>
-    <!-- <v-btn
-      v-shared-tooltip="t('instance.addMod')"
-      icon
-      large
-      @click="onInstall"
-    >
-      <v-icon>
-        playlist_add
-      </v-icon>
-    </v-btn> -->
   </div>
 </template>
 <script lang="ts" setup>

xmcl-keystone-ui/src/views/UserSkinSpeedDial.vue

@@ -10,7 +10,7 @@
         <v-btn
           v-if="value"
           v-model="fab"
-          v-shared-tooltip.left="t('userSkin.importFile')"
+          v-shared-tooltip.left="() => t('userSkin.importFile')"
           :disabled="disabled || !hasSkin"
           fab
           color="primary"
@@ -21,7 +21,7 @@
       </v-fab-transition>
     </template>
     <v-btn
-      v-shared-tooltip.left="t('userSkin.importLink')"
+      v-shared-tooltip.left="() => t('userSkin.importLink')"
       :disabled="disabled || !hasSkin"
       fab
       light
@@ -32,7 +32,7 @@
       <v-icon>link</v-icon>
     </v-btn>
     <v-btn
-      v-shared-tooltip.left="t('userSkin.saveTitle')"
+      v-shared-tooltip.left="() => t('userSkin.saveTitle')"
       :disabled="disabled"
       fab
       small