feat: use more v-tooltip

Author: antfu

node-modules-inspector.config.ts

@@ -6,7 +6,8 @@ export default defineConfig({
     'eslint',
   ],
   excludePackages: [
-    '@antfu/eslint-config',
+    '@pnpm/list',
+    '@pnpm/types',
   ],
   defaultFilters: {
     excludes: [

packages/node-modules-inspector/src/app/components/display/DateBadge.vue

@@ -20,11 +20,20 @@ const date = computed(() => props.time
     ? getPublishTime(props.pkg)
     : undefined,
 )
+
+const formatter = Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+})
+const dateTitle = computed(() => date.value ? formatter.format(date.value) : null)
 </script>
 
 <template>
   <DisplayDurationBadge
     v-if="date"
+    v-tooltip="dateTitle"
+    :title="dateTitle"
     :ms="Date.now() - +date"
     :colorize="props.colorize"
     mode="day"

packages/node-modules-inspector/src/app/components/display/FundingEntry.vue

@@ -8,7 +8,14 @@ defineProps<{
 </script>
 
 <template>
-  <a v-if="funding" :href="funding.url" target="_blank" flex="~ gap-2" of-hidden text-ellipsis>
+  <a
+    v-if="funding"
+    v-tooltip="'Open Funding Page'"
+    :href="funding.url"
+    title="Open Funding Page"
+    target="_blank"
+    flex="~ gap-2" of-hidden text-ellipsis
+  >
     <SafeImage
       v-if="funding.avatar" :src="funding.avatar"
       bg-active border="~ base rounded-full"

packages/node-modules-inspector/src/app/components/graph/Canvas.vue

@@ -378,16 +378,19 @@ onMounted(() => {
 
       <div bg-glass rounded-full border border-base shadow>
         <button
+          v-tooltip="'Zoom In (Ctrl + =)'"
           :disabled="scale >= ZOOM_MAX"
-          w-10 h-10 rounded-full hover:bg-active op50 hover:op100
-          disabled:op20 disabled:bg-none disabled:cursor-not-allowed
+          w-10 h-10 rounded-full hover:bg-active op50
+          hover:op100 disabled:op20 disabled:bg-none
+          disabled:cursor-not-allowed
           flex="~ items-center justify-center"
           title="Zoom In (Ctrl + =)"
           @click="zoomIn()"
         >
           <div i-ph-magnifying-glass-plus-duotone />
         </button>
         <button
+          v-tooltip="'Zoom Out (Ctrl + -)'"
           :disabled="scale <= ZOOM_MIN"
           w-10 h-10 rounded-full hover:bg-active op50 hover:op100
           disabled:op20 disabled:bg-none disabled:cursor-not-allowed
@@ -401,6 +404,7 @@ onMounted(() => {
 
       <div bg-glass rounded-full border border-base shadow>
         <button
+          v-tooltip="'Toggle Graph Render Mode'"
           w-10 h-10 rounded-full hover:bg-active op50 hover:op100
           flex="~ items-center justify-center"
           title="Toggle Graph Render Mode"
@@ -413,6 +417,7 @@ onMounted(() => {
 
       <div bg-glass rounded-full border border-base shadow>
         <button
+          v-tooltip="'Download Screenshot as PNG'"
           w-10 h-10 rounded-full hover:bg-active op50 hover:op100
           flex="~ items-center justify-center"
           title="Download Screenshot as PNG"

packages/node-modules-inspector/src/app/components/integrations/PublintPanel.vue

@@ -68,6 +68,7 @@ const messageColors = {
       <div flex-auto />
       <button
         v-if="messages.length"
+        v-tooltip="'Toggle file composition'"
         p1 rounded-full hover:bg-active mr--2
         title="Toggle file composition"
       >

packages/node-modules-inspector/src/app/components/panel/Dark.vue

@@ -8,13 +8,16 @@ import { toggleDark } from '../../composables/dark'
     bg-glass rounded-full border border-base shadow
   >
     <a
+      v-tooltip="'Check source code on GitHub'"
+      title="Check source code on GitHub"
       w-10 h-10 rounded-full hover:bg-active op50 hover:op100
       flex="~ items-center justify-center"
       href="https://github.com/antfu/node-modules-inspector" target="_blank"
     >
       <div i-ri-github-fill text-xl />
     </a>
     <button
+      v-tooltip="'Toggle Dark Mode'"
       w-10 h-10 rounded-full hover:bg-active op50 hover:op100
       flex="~ items-center justify-center"
       title="Toggle Dark Mode"

packages/node-modules-inspector/src/app/components/panel/FiltersMini.vue

@@ -103,6 +103,7 @@ const moduleTypes = Object.fromEntries(
     </div>
 
     <button
+      v-tooltip="'Clear Filters'"
       w8 h8 rounded-full hover:bg-active op50 hover:op100 flex="~ items-center justify-center"
       title="Clear Filters"
       @click="filters.select.reset()"

packages/node-modules-inspector/src/app/components/panel/Nav.vue

@@ -92,6 +92,7 @@ function resetPanelState() {
     >
       <template v-for="tab of tabsMeta" :key="tab.value">
         <RouterLink
+          v-tooltip="tab.name"
           w-10 h-10 rounded-full hover:bg-active
           flex="~ items-center justify-center"
           :title="tab.name"

packages/node-modules-inspector/src/app/components/panel/PackageDetails.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { PackageNode } from 'node-modules-tools'
+import { useRouter } from '#app/composables/router'
 import { Menu as VMenu } from 'floating-vue'
-import { computed, watch } from 'vue'
+import { computed, nextTick, watch } from 'vue'
 import { getBackend } from '../../backends'
 import { selectedNode } from '../../state/current'
 import { fetchPublintMessages, rawPublintMessages } from '../../state/data'
@@ -102,6 +103,16 @@ function getShallowestDependents(pkg: PackageNode) {
 
 const latestMeta = computed(() => getNpmMetaLatest(props.pkg))
 const deprecation = computed(() => getDeprecatedInfo(props.pkg))
+
+const router = useRouter()
+function showDuplicatedGraph(pkgs: PackageNode[]) {
+  filters.state.focus = null
+  filters.state.why = pkgs.map(pkg => pkg.spec)
+  selectedNode.value = pkgs[0]
+  nextTick(() => {
+    router.push({ path: '/graph', hash: location.hash })
+  })
+}
 </script>
 
 <template>
@@ -154,12 +165,22 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
                 <DisplayVersion op75 flex-auto text-left :version="versionNode.version" />
                 <DisplayModuleType :force="true" :pkg="versionNode" :badge="false" text-xs />
               </button>
+              <div border="t base" my1 />
+              <button
+                py1 px2 rounded flex="~ items-center gap-1" min-w-40
+                hover="bg-active"
+                @click="showDuplicatedGraph(duplicated)"
+              >
+                <div i-ph-graph-duotone />
+                <span text-sm> Compare in Graph</span>
+              </button>
             </div>
           </template>
         </VMenu>
         <div flex="~ gap--1 items-center">
           <NuxtLink
             v-if="!pkg.private"
+            v-tooltip="'Open on NPM'"
             :to="`https://www.npmjs.com/package/${pkg.name}/v/${pkg.version}`"
             title="Open on NPM"
             target="_blank"
@@ -169,6 +190,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
           </NuxtLink>
           <NuxtLink
             v-if="resolved.repository"
+            v-tooltip="'Open Repository'"
             :to="resolved.repository"
             title="Open Repository"
             target="_blank"
@@ -178,6 +200,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
           </NuxtLink>
           <NuxtLink
             v-if="resolved.homepage"
+            v-tooltip="'Open Homepage'"
             :to="resolved.homepage"
             title="Open Homepage"
             target="_blank"
@@ -190,6 +213,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
             :fundings="resolved.fundings"
           />
           <NuxtLink
+            v-tooltip="'Open in Publint'"
             :to="`https://publint.dev/${pkg.spec}`"
             title="Open in Publint"
             target="_blank"
@@ -199,6 +223,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
           </NuxtLink>
           <button
             v-if="backend?.functions.openInEditor"
+            v-tooltip="'Open Package Folder in Editor'"
             title="Open Package Folder in Editor"
             ml--1 w-8 h-8 rounded-full hover:bg-active flex
             @click="backend.functions.openInEditor(pkg.filepath)"
@@ -207,7 +232,8 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
           </button>
           <button
             v-if="backend?.functions.openInFinder"
-            title="Open Package Folder in Finder"
+            v-tooltip="'Open Package Folder in File Explorer'"
+            title="Open Package Folder in File Explorer"
             ml--1 w-8 h-8 rounded-full hover:bg-active flex
             @click="backend.functions.openInFinder(pkg.filepath)"
           >
@@ -296,6 +322,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
         </div>
         <div flex-auto />
         <button
+          v-tooltip="'Toggle file composition'"
           p1 rounded-full hover:bg-active mr--2
           title="Toggle file composition"
           @click="settings.showFileComposition = !settings.showFileComposition"
@@ -338,6 +365,7 @@ const deprecation = computed(() => getDeprecatedInfo(props.pkg))
       </button>
       <div border="b base" pt2 px2>
         <button
+          v-tooltip="'Toggle deep dependencies tree'"
           p1 rounded-full hover:bg-active
           title="Toggle deep dependencies tree"
           @click="settings.deepDependenciesTree = !settings.deepDependenciesTree"

packages/node-modules-inspector/src/app/components/panel/PackageFunding.vue

@@ -10,16 +10,21 @@ defineProps<{
 <template>
   <NuxtLink
     v-if="fundings?.length === 1"
+    v-tooltip="'Open Funding Page'"
     :to="fundings[0].url"
-    title="Open Funding"
+    title="Open Funding Page"
     target="_blank"
     ml--1 w-8 h-8 rounded-full hover:bg-active flex
   >
     <div i-catppuccin-code-of-conduct icon-catppuccin ma />
   </NuxtLink>
 
   <VMenu v-else-if="fundings?.length" ml--1 w-8 h-8 rounded-full hover:bg-active flex>
-    <div i-catppuccin-code-of-conduct icon-catppuccin ma title="Show Fundings" />
+    <div
+      v-tooltip="'Show Fundings'"
+      i-catppuccin-code-of-conduct icon-catppuccin ma
+      title="Show Fundings"
+    />
     <template #popper>
       <div flex="~ col" p1>
         <DisplayFundingEntry

packages/node-modules-inspector/src/app/components/panel/Terminal.vue

@@ -57,6 +57,7 @@ onBeforeUnmount(() => {
     bg-glass rounded-full border border-base shadow
   >
     <button
+      v-tooltip="'Toggle Terminal'"
       w-10 h-10 rounded-full hover:bg-active op50 hover:op100
       flex="~ items-center justify-center"
       title="Toggle Terminal"

packages/node-modules-inspector/src/app/components/report/MultipleVersions.vue

@@ -52,8 +52,9 @@ function showGraph(pkgs: PackageNode[]) {
             {{ pkgs[0].name }}
           </h2>
           <button
-            p1 rounded-full op50 hover:bg-active hover:text-primary hover:op100 flex="~ items-center"
-            title="Show Graph"
+            v-tooltip="'Compare in Graph'" p1 rounded-full op50 hover:bg-active hover:text-primary hover:op100
+            flex="~ items-center"
+            title="Compare in Graph"
             @click="showGraph(pkgs)"
           >
             <div i-ph-graph-duotone text-lg />

packages/node-modules-inspector/src/app/pages/report/[...report].vue

@@ -48,9 +48,9 @@ const selected = computed(() => params.report[0] || 'all')
 
   <ReportTransitiveDeps v-if="selected === 'dependencies' || selected === 'all'" />
   <ReportUsedBy v-if="selected === 'dependencies' || selected === 'all'" />
-  <ReportDeprecated v-if="selected === 'deprecated' || selected === 'all'" />
   <ReportInstallSize v-if="selected === 'install-size' || selected === 'all'" />
   <ReportPublishTime v-if="selected === 'time' || selected === 'all'" />
+  <ReportDeprecated v-if="selected === 'deprecated' || selected === 'all'" />
   <ReportEngines v-if="selected === 'node-engines' || selected === 'all'" />
   <ReportLicenses v-if="selected === 'licenses' || selected === 'all'" />
   <ReportFunding v-if="selected === 'funding' || selected === 'all'" />