Skip to content

Commit d7c16f1

Browse files
committed
feat(app): add basic file explorer
1 parent 2e22ebc commit d7c16f1

File tree

4 files changed

+55
-11
lines changed

4 files changed

+55
-11
lines changed

packages/app/src/components/IsApp.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const theme = useTheme()
44
</script>
55
<template>
66
<div :class="[theme.dark ? 'dark' : '']">
7-
<div class="dark:bg-zinc-900 dark:text-zinc-100 font-roboto h-screen w-screen flex">
7+
<div class="dark:bg-zinc-800 dark:text-zinc-100 font-roboto h-screen w-screen flex">
88
<slot />
99

1010
</div>

packages/app/src/components/IsAppDrawerMini.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
const drawer = ref()
33
</script>
44
<template>
5-
<div class="w-14 h-full bg-zinc-800 border-r border-zinc-700 shadow">
5+
<div class="w-14 h-full bg-zinc-900 border-r border-zinc-700 shadow">
66
<div class="flex flex-col h-full">
77
<is-list-item justify="center" >
88
<is-logo class="w-5 h-5" />
Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
<script setup lang="ts">
2-
const theme = useTheme()
3-
4-
</script>
51
<template>
62
<div class="h-screen w-screen flex">
73
<is-app-drawer-mini />
84

5+
<div class="w-72 bg-zinc-900 border-r border-zinc-700" />
6+
97
<slot />
108
</div>
119
</template>
Lines changed: 51 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,69 @@
11
<script lang="ts" setup>
22
import type { DriveEntry } from '@/composables/useDrive';
33
4+
import orderBy from 'lodash/orderBy'
5+
46
const { drive } = useDrive()
57
8+
const search = ref('')
9+
const entries = ref<DriveEntry[]>([])
10+
const exclude = {
11+
folders: ['.is']
12+
}
13+
14+
const filteredEntries = computed(() => {
15+
return entries.value.filter(e => {
16+
if (e.type === 'directory' && exclude.folders.includes(e.path)) {
17+
return false
18+
}
619
7-
const entries = ref<DriveEntry[]>()
20+
if (search.value.length > 0 && !e.path.includes(search.value)) {
21+
return false
22+
}
823
24+
return true
25+
})
26+
})
927
1028
async function load(){
11-
console.log('load', drive.value)
29+
const result = await drive.value.list('/')
1230
13-
entries.value = await drive.value.list('/')
31+
entries.value = orderBy(result, ['type', 'path'], ['asc', 'asc'])
1432
}
1533
1634
onMounted(load)
1735
36+
function onEntryClick(entry: DriveEntry){
37+
console.log(entry)
38+
}
39+
40+
function findIcon(entry: DriveEntry){
41+
if (entry.type === 'directory') {
42+
return 'mdi:folder'
43+
}
44+
45+
if (entry.path.endsWith('.md')) {
46+
return 'mdi:markdown'
47+
}
48+
49+
return 'mdi:file'
50+
}
51+
1852
</script>
1953
<template>
20-
<div>
21-
{{ entries }}
54+
<div class="w-full">
55+
56+
<div class="w-full bg-zinc-700">
57+
<input v-model="search" class="bg-transparent w-full h-12 px-4 outline-none" placeholder="Search..." />
58+
</div>
59+
60+
<div class="flex flex-col">
61+
<is-list-item v-for="e in filteredEntries" :key="e.path" @click="onEntryClick(e)">
62+
<is-icon :name="findIcon(e)" size="xl" />
63+
<div class="ml-4">
64+
{{ e.path }}
65+
</div>
66+
</is-list-item>
67+
</div>
2268
</div>
2369
</template>

0 commit comments

Comments
 (0)