feat: add copy button for filepath item

nuxt · Jan 9, 2025 · 94b3822 · 94b3822
1 parent 1bae95a
commit 94b3822
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 26 deletions.
diff --git a/packages/devtools/client/components/FilepathItem.vue b/packages/devtools/client/components/FilepathItem.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import { useOpenInEditor } from '~/composables/editor'
+import { useCopy, useOpenInEditor } from '~/composables/editor'
 import { useServerConfig } from '~/composables/state'
 import { parseReadablePath } from '~/composables/utils'
 
@@ -12,34 +12,50 @@ const props = defineProps<{
 }>()
 
 const openInEditor = useOpenInEditor()
+const copy = useCopy()
 const config = useServerConfig()
 const parsed = computed(() => (props.filepath && config.value)
   ? parseReadablePath(props.filepath, config.value.rootDir)
   : { path: props.filepath || '' })
 </script>
 
 <template>
-  <component
-    :is="filepath ? 'button' : 'span'"
-    :class="[
-      filepath ? 'hover:underline' : '',
-      lineBreak ? '' : 'ws-nowrap of-hidden truncate',
-    ]"
-    font-mono
-    :title="override || filepath"
-    @click="filepath && openInEditor(filepath)"
-  >
-    <template v-if="override">
-      {{ override }}
-    </template>
-    <template v-else-if="parsed.moduleName">
-      <span>{{ parsed.moduleName }}</span>
-      <span v-if="subpath" op50>
-        {{ parsed.path.slice(parsed.moduleName.length) }}
-      </span>
-    </template>
-    <template v-else>
-      {{ parsed.path }}
-    </template>
-  </component>
+  <span flex="~ gap-2 items-center" class="group">
+    <span
+      :class="[
+        lineBreak ? '' : 'ws-nowrap of-hidden truncate',
+      ]"
+      font-mono
+      :title="override || filepath"
+    >
+      <template v-if="override">
+        {{ override }}
+      </template>
+      <template v-else-if="parsed.moduleName">
+        <span>{{ parsed.moduleName }}</span>
+        <span v-if="subpath" op50>
+          {{ parsed.path.slice(parsed.moduleName.length) }}
+        </span>
+      </template>
+      <template v-else>
+        {{ parsed.path }}
+      </template>
+    </span>
+    <div v-if="filepath" flex="~ gap1" pr2 op0 group-hover:op100>
+      <button
+        text-sm op40 hover="op100 text-primary"
+        title="Open in editor"
+        @click="openInEditor(filepath)"
+      >
+        <div i-carbon-script-reference />
+      </button>
+      <button
+        text-sm op40 hover="op100 text-primary"
+        title="Copy path"
+        @click="copy(filepath)"
+      >
+        <div i-carbon-copy />
+      </button>
+    </div>
+  </span>
 </template>
diff --git a/packages/devtools/client/components/RoutesTable.vue b/packages/devtools/client/components/RoutesTable.vue
@@ -4,6 +4,7 @@ import type { RouteInfo } from '~/../src/types'
 import { computed } from 'vue'
 import { useOpenInEditor } from '~/composables/editor'
 import { useServerApp } from '~/composables/state'
+import { useCopy } from '../composables/editor'
 
 const props = defineProps<{
   pages: RouteInfo[]
@@ -18,6 +19,7 @@ defineEmits<{
 
 const openInEditor = useOpenInEditor()
 const serverApp = useServerApp()
+const copy = useCopy()
 
 const sorted = computed(() => {
   return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
@@ -37,7 +39,7 @@ function getMiddlewarePath(name: any) {
 </script>
 
 <template>
-  <div>
+  <div max-w-full of-auto>
     <table w-full>
       <thead border="b base">
         <tr>
@@ -79,9 +81,10 @@ function getMiddlewarePath(name: any) {
               <RoutePathItem
                 :route="item"
                 :class="matched.find(m => m.name === item.name) ? 'text-primary' : matchedPending.find(m => m.name === item.name) ? 'text-teal' : ''"
+                ws-nowrap
                 @navigate="path => $emit('navigate', path)"
               />
-              <div op0 group-hover:op100 flex="~ gap1">
+              <div flex="~ gap1" pr2 op0 group-hover:op100>
                 <button
                   v-if="item.file || item.meta?.file"
                   text-sm op40 hover="op100 text-primary"
@@ -90,6 +93,14 @@ function getMiddlewarePath(name: any) {
                 >
                   <div i-carbon-script-reference />
                 </button>
+                <button
+                  v-if="item.file || item.meta?.file"
+                  text-sm op40 hover="op100 text-primary"
+                  title="Copy path"
+                  @click="copy((item.file || item.meta?.file) as string)"
+                >
+                  <div i-carbon-copy />
+                </button>
               </div>
             </div>
           </td>