Skip to content
This repository was archived by the owner on Mar 13, 2024. It is now read-only.

Commit d234bba

Browse files
BarbapapazesBarbapapazes
authored
feat: update layout (#8)
1 parent 2e169a8 commit d234bba

File tree

14 files changed

+464
-1043
lines changed

14 files changed

+464
-1043
lines changed

‎app.config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
export default defineAppConfig({
22
ui: {
33
primary: 'yellow',
4-
gray: 'zinc',
4+
gray: 'cool',
5+
button: {
6+
base: 'transition ease-in',
7+
},
8+
select: {
9+
color: {
10+
white: {
11+
outline: 'shadow-none',
12+
},
13+
},
14+
},
515
},
616
})

‎app.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22
<Head>
33
<Link rel="icon" href="/favicon.svg" />
44
</Head>
5-
<UMain>
6-
<NuxtLayout>
7-
<NuxtPage />
8-
</NuxtLayout>
9-
</UMain>
5+
<main>
6+
<NuxtPage />
7+
</main>
108
</template>

‎components/Card.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="p-2 bg-white/40 backdrop-blur-sm ring-1 ring-gray-300 rounded-md text-sm shadow">
3+
<slot />
4+
</div>
5+
</template>

‎components/CardSlideover.vue‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<script lang="ts" setup>
2+
defineOptions({
3+
inheritAttrs: false,
4+
})
5+
6+
const props = defineProps<{
7+
right?: boolean
8+
title?: string
9+
openClass?: string
10+
closeClass?: string
11+
}>()
12+
13+
provide('right', props.right)
14+
15+
const isOpen = ref<boolean>(true)
16+
17+
function open() {
18+
isOpen.value = true
19+
}
20+
21+
function close() {
22+
isOpen.value = false
23+
}
24+
</script>
25+
26+
<template>
27+
<Transition mode="out-in" :name="right ? 'slide-right' : 'slide-left'">
28+
<Card v-if="isOpen" v-bind="$attrs" :class="openClass">
29+
<slot :close="close" />
30+
</Card>
31+
32+
<Card v-else v-bind="$attrs" :class="closeClass">
33+
<UButton square size="xs" color="gray" variant="ghost" type="button" :icon="right ? 'i-ph-arrow-line-left' : 'i-ph-arrow-line-right'" aria-label="open card" @click="open" />
34+
</Card>
35+
</Transition>
36+
</template>

‎components/CardSlideoverClose.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<script lang="ts" setup>
2+
const right = inject('right', false)
3+
</script>
4+
5+
<template>
6+
<UButton square size="xs" color="gray" variant="ghost" type="button" :icon="right ? 'i-ph-arrow-line-right' : 'i-ph-arrow-line-left'" aria-label="close card" />
7+
</template>

components/Relations.vue renamed to components/Graph.vue

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
import type { Data, Edge, Options } from 'vis-network'
33
import { Network } from 'vis-network'
44
import type { Package } from '~/types/packages'
5+
import { _cyan, _pink, _violet, _yellow } from '#tailwind-config/theme/colors'
6+
import type { Settings } from '~/types/settings'
57
68
const props = defineProps<{
79
packages: Package[]
810
selection: string[]
9-
showDependencies: boolean
10-
showDevDependencies: boolean
11-
showChildren: boolean
11+
settings: Settings
1212
}>()
1313
1414
const emits = defineEmits<{
@@ -35,12 +35,12 @@ const data = computed<Data>(() => {
3535
// Use a condition to avoid unnecessary computation
3636
const selectionChildrenPackages: Package[] = []
3737
const selectionChildrenPackagesName: string[] = []
38-
if (props.showChildren) {
38+
if (props.settings.children) {
3939
/** Children */
4040
selectionChildrenPackages.push(...props.packages
4141
// Filter out packages that have not selected packages as dependencies or devDependencies
4242
.filter((pkg) => {
43-
if (props.showDependencies) {
43+
if (props.settings.dependencies) {
4444
// Check if current package use any of the selected packages
4545
const hasUsedBy = pkg.dependencies.some((dep) => {
4646
return props.selection.includes(dep)
@@ -50,7 +50,7 @@ const data = computed<Data>(() => {
5050
return true
5151
}
5252
53-
if (props.showDevDependencies) {
53+
if (props.settings.devDependencies) {
5454
// Check if current package use any of the selected packages
5555
const hasUsedBy = pkg.devDependencies.some((dep) => {
5656
return props.selection.includes(dep)
@@ -87,10 +87,10 @@ const data = computed<Data>(() => {
8787
// Add current package for selection children packages
8888
deps.push(pkg.name)
8989
90-
if (props.showDependencies)
90+
if (props.settings.dependencies)
9191
deps.push(...pkg.dependencies)
9292
93-
if (props.showDevDependencies)
93+
if (props.settings.devDependencies)
9494
deps.push(...pkg.devDependencies)
9595
9696
return deps
@@ -134,29 +134,29 @@ const data = computed<Data>(() => {
134134
...dedupePackages.flatMap((pkg) => {
135135
const data: Edge[] = []
136136
137-
if (props.showDependencies) {
137+
if (props.settings.dependencies) {
138138
data.push(...pkg.dependencies.map((dep) => {
139139
return {
140140
from: pkg.name,
141141
to: dep,
142142
color: {
143-
color: '#f9a8d4', // pink-300
144-
highlight: '#ec4899', // pink-500
143+
color: _pink[300],
144+
highlight: _pink[500],
145145
},
146146
relation: 'dependencies',
147147
arrows: 'to',
148148
}
149149
}))
150150
}
151151
152-
if (props.showDevDependencies) {
152+
if (props.settings.devDependencies) {
153153
data.push(...pkg.devDependencies.map((dep) => {
154154
return {
155155
from: pkg.name,
156156
to: dep,
157157
color: {
158-
color: '#d8b4fe', // pink-300
159-
highlight: '#a855f7', // pink-500
158+
color: _violet[300],
159+
highlight: _violet[500],
160160
},
161161
relation: 'devDependencies',
162162
arrows: 'to',
@@ -205,21 +205,21 @@ onMounted(() => {
205205
groups: {
206206
selection: {
207207
color: {
208-
background: '#F7F1BD', // yellow-300
209-
border: '#ECDC5A', // yellow-500
208+
background: _yellow[300],
209+
border: _yellow[500],
210210
highlight: {
211-
background: '#F2E78C', // yellow-400
212-
border: '#D4C651', // yellow-600
211+
background: _yellow[400],
212+
border: _yellow[600],
213213
},
214214
},
215215
},
216216
dependencies: {
217217
color: {
218-
background: '#ecfeff', // cyan-50
219-
border: '#67e8f9', // cyan-300
218+
background: _cyan[50],
219+
border: _cyan[300],
220220
highlight: {
221-
background: '#cffafe', // cyan-100
222-
border: '#06b6d4', // cyan-500
221+
background: _cyan[100],
222+
border: _cyan[500],
223223
},
224224
},
225225
},
@@ -239,12 +239,5 @@ onMounted(() => {
239239
</script>
240240

241241
<template>
242-
<div id="container" ref="container" />
242+
<div ref="container" />
243243
</template>
244-
245-
<style scoped>
246-
#container {
247-
width: 100%;
248-
height: 100vh;
249-
}
250-
</style>

‎components/GraphLegend.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="flex items-center gap-1">
3+
<span class="block rounded-full bg-yellow-500 w-2 h-2" />
4+
<span> Selected packages</span>
5+
</div>
6+
<div class="flex items-center gap-1">
7+
<span class="block rounded-full bg-cyan-300 w-2 h-2" />
8+
<span> UnJS Packages </span>
9+
</div>
10+
<div class="flex items-center gap-1">
11+
<span class="block rounded-full bg-pink-300 w-2 h-2" />
12+
<span> Used as dependencies </span>
13+
</div>
14+
<div class="flex items-center gap-1">
15+
<span class="block rounded-full bg-purple-300 w-2 h-2" />
16+
<span> Used as devDependencies </span>
17+
</div>
18+
</template>

‎components/GraphSettings.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script lang="ts" setup>
2+
import type { Settings } from '~/types/settings'
3+
4+
const props = defineProps<{ settings: Settings }>()
5+
6+
const emits = defineEmits<{
7+
'change': [Settings]
8+
}>()
9+
10+
const emit = function (field: keyof Settings, data: boolean) {
11+
emits('change', {
12+
...props.settings,
13+
[field]: data,
14+
})
15+
}
16+
</script>
17+
18+
<template>
19+
<UCheckbox :model-value="settings.dependencies" label="Show dependencies" name="dependencies" @update:model-value="emit('dependencies', $event)" />
20+
<UCheckbox :model-value="settings.devDependencies" label="Show devDependencies" name="devDependencies" @update:model-value="emit('devDependencies', $event)" />
21+
<UCheckbox :model-value="settings.children" label="Show children" name="children" @update:model-value="emit('children', $event)" />
22+
</template>

‎nuxt.config.ts‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
// https://nuxt.com/docs/api/configuration/nuxt-config
22
export default defineNuxtConfig({
33
extends: ['@nuxt/ui-pro'],
4-
modules: ['@nuxt/ui'],
4+
modules: ['@nuxt/ui', '@vueuse/nuxt'],
55
ui: {
66
icons: ['simple-icons', 'ph'],
77
},
8+
routeRules: {
9+
'/': {
10+
ssr: false,
11+
},
12+
},
813
nitro: {
9-
static: true,
1014
prerender: {
11-
crawlLinks: true,
12-
routes: ['/', '/api/packages'],
15+
routes: ['/api/packages.json'],
1316
},
1417
routeRules: {
15-
'/api/packages': {
18+
'/api/packages.json': {
1619
cache: {
1720
maxAge: 60 * 60 * 24 * 7, // 1 week
1821
},
@@ -27,6 +30,9 @@ export default defineNuxtConfig({
2730
],
2831
},
2932
},
33+
tailwindcss: {
34+
exposeConfig: true,
35+
},
3036
colorMode: {
3137
preference: 'light',
3238
},

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
"@antfu/eslint-config": "^2.1.0",
2020
"@iconify-json/ph": "^1.1.6",
2121
"@iconify-json/simple-icons": "^1.1.79",
22-
"@nuxt/devtools": "latest",
22+
"@vueuse/core": "^10.6.1",
23+
"@vueuse/nuxt": "^10.6.1",
2324
"eslint": "^8.54.0",
2425
"nuxt": "^3.8.2",
2526
"vis-data": "^7.1.8",

0 commit comments

Comments
 (0)