/
RoutesTable.vue
115 lines (108 loc) · 3.41 KB
/
RoutesTable.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<script setup lang="ts">
import type { NuxtLayout } from 'nuxt/schema'
import type { RouteInfo } from '~/../src/types'
const props = defineProps<{
pages: RouteInfo[]
layouts: NuxtLayout[]
matched: RouteInfo[]
matchedPending: RouteInfo[]
}>()
defineEmits<{
(e: 'navigate', path: string): void
}>()
const openInEditor = useOpenInEditor()
const serverApp = useServerApp()
const sorted = computed(() => {
return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
})
function openLayout(name: string) {
const layout = props.layouts.find(i => i.name === name)
if (layout)
openInEditor(layout.file)
}
function getMiddlewarePath(name: any) {
if (typeof name !== 'string')
return
return serverApp.value?.middleware.find(i => i.name === name)?.path
}
</script>
<template>
<div>
<table w-full>
<thead border="b base">
<tr>
<th text-left />
<th text-left>
Route Path
</th>
<th text-left>
Name
</th>
<th text-left>
Middleware
</th>
<th>
Layout
</th>
</tr>
</thead>
<tbody>
<tr v-for="item of sorted" :key="item.name" class="group" h-7 border="b dashed transparent hover:base">
<td w-20 pr-1>
<div flex items-center justify-end>
<Badge
v-if="matched.find(m => m.name === item.name)"
bg-green-400:10 text-green-400
title="active"
v-text="'active'"
/>
<Badge
v-if="matchedPending.find(m => m.name === item.name)"
bg-teal-400:10 text-teal-400
title="next"
v-text="'next'"
/>
</div>
</td>
<td text-sm>
<div flex="inline gap3" items-center>
<RoutePathItem
:route="item"
:class="matched.find(m => m.name === item.name) ? 'text-primary' : matchedPending.find(m => m.name === item.name) ? 'text-teal' : ''"
@navigate="path => $emit('navigate', path)"
/>
<div op0 group-hover:op100 flex="~ gap1">
<button
v-if="item.file || item.meta?.file"
text-sm op40 hover="op100 text-primary"
title="Open in editor"
@click="openInEditor((item.file || item.meta?.file) as string)"
>
<div i-carbon-script-reference />
</button>
</div>
</div>
</td>
<td w-0 ws-nowrap pr-1 text-left font-mono text-sm op50>
{{ item.name }}
</td>
<td w-0 ws-nowrap pr-1 text-center font-mono text-sm op50>
<FilepathItem
:filepath="getMiddlewarePath(item.meta.middleware)"
:override="`${item.meta.middleware || '-'}`"
/>
</td>
<td w-0 ws-nowrap text-center font-mono text-sm>
<span v-if="item.meta.layout === false">-</span>
<button v-else-if="item.meta.layout" @click="openLayout(item.meta.layout as string)">
{{ item.meta.layout }}
</button>
<button v-else text-sm op15 @click="openLayout('default')">
(default)
</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>