File Explorer

<script setup lang="ts">
import { FileExplorer, type FileExplorerItem } from '@/components/ui/file-explorer'

const files: FileExplorerItem[] = [
  {
    id: 'src',
    name: 'src',
    type: 'folder',
    children: [
      { id: 'src/App.vue', name: 'App.vue', type: 'file', size: 734 },
      { id: 'src/main.ts', name: 'main.ts', type: 'file', size: 298 },
    ],
  },
  { id: 'package.json', name: 'package.json', type: 'file', size: 1087 },
]
</script>

<template>
  <FileExplorer :items="files" class="h-[480px]" />
</template>

<script setup lang="ts">
const route = useRoute()
const router = useRouter()

const folder = computed({
  get: () => (route.query.folder as string) ?? null,
  set: id => router.push({ query: id ? { folder: id } : {} }),
})
</script>

<template>
  <FileExplorer v-model:folder="folder" :items="files" root-label="My Drive" />
</template>

<script setup lang="ts">
const selected = ref<string[]>([])

function openFile(item: FileExplorerItem) {
  router.push(`/editor/${encodeURIComponent(item.id)}`)
}
</script>

<template>
  <FileExplorer v-model:selected="selected" :items="files" @open="openFile" />
</template>

<script setup lang="ts">
import { useStorage } from '@vueuse/core'
import type { FileExplorerSort, FileExplorerView } from '@/components/ui/file-explorer'

const view = useStorage<FileExplorerView>('explorer-view', 'grid')
const sort = ref<FileExplorerSort>({ key: 'modified', direction: 'desc' })
</script>

<template>
  <FileExplorer v-model:view="view" v-model:sort="sort" :items="files" />
</template>

<script setup lang="ts">
const files: FileExplorerItem<{ url: string }>[] = [
  {
    id: 'useFileSystem.ts',
    name: 'useFileSystem.ts',
    type: 'file',
    size: 2867,
    modifiedAt: new Date(),
    description: 'Composable hook',
    preview: 'export const useFS = () =>\n  return { readTree }',
  },
  {
    id: 'hero.png',
    name: 'hero.png',
    type: 'file',
    size: 1468006,
    thumbnail: 'https://cdn.example.com/thumbs/hero.png',
  },
]
</script>

<template>
  <FileExplorer :items="files">
    <template #preview="{ item }">
      <AudioWaveform v-if="item.mimeType?.startsWith('audio/')" :src="item.data?.url" />
    </template>
  </FileExplorer>
</template>

<script setup lang="ts">
async function onUpload(uploaded: File[], folder: FileExplorerItem | null) {
  await Promise.all(uploaded.map(file => storage.put(folder?.id ?? '', file)))
  files.value = await storage.list()
}

async function onCreateFolder(parent: FileExplorerItem | null) {
  await storage.mkdir(parent?.id ?? '', 'New folder')
  files.value = await storage.list()
}

async function onDelete(items: FileExplorerItem[]) {
  if (!confirm(`Delete ${items.length} item(s)?`)) return
  await storage.remove(items.map(item => item.id))
  files.value = await storage.list()
}
</script>

<template>
  <FileExplorer
    :items="files"
    accept="image/*,.pdf"
    @upload="onUpload"
    @create-folder="onCreateFolder"
    @delete="onDelete"
  />
</template>

<script setup lang="ts">
async function onRename(item: FileExplorerItem, name: string) {
  await storage.rename(item.id, name)
  files.value = await storage.list()
}

const validateName = (name: string) =>
  /[<>:"|?*]/.test(name) ? 'Names cannot contain < > : " | ? *' : undefined
</script>

<template>
  <FileExplorer :items="files" :validate-name="validateName" @rename="onRename" />
</template>

<script setup lang="ts">
async function onDelete(items: FileExplorerItem[]) {
  await storage.moveToTrash(items.map(item => item.id))
  files.value = await storage.list()
}
</script>

<template>
  <FileExplorer :items="files" @delete="onDelete">
    <template #delete-description="{ items }">
      {{ items.length === 1 ? 'It' : 'They' }} will be moved to the trash for 30 days.
    </template>
  </FileExplorer>
</template>

<script setup lang="ts">
import { ContextMenuItem, ContextMenuSeparator } from '@/components/ui/context-menu'
</script>

<template>
  <FileExplorer :items="files">
    <template #context-menu="{ item, rename, remove }">
      <template v-if="item">
        <ContextMenuItem @select="rename">Rename</ContextMenuItem>
        <ContextMenuItem @select="copyLink(item)">Copy link</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive" @select="remove">Delete</ContextMenuItem>
      </template>
      <ContextMenuItem v-else @select="createFolder">New folder</ContextMenuItem>
    </template>
  </FileExplorer>
</template>

<script setup lang="ts">
async function onMove({ items, target }: FileExplorerMoveEvent) {
  await storage.move(items.map(item => item.id), target?.id ?? '')
  files.value = await storage.list()
}
</script>

<template>
  <FileExplorer :items="files" draggable @move="onMove" />
</template>

<template>
  <FileExplorer :items="files">
    <template #toolbar-actions>
      <Button size="sm" variant="ghost" @click="refresh">Refresh</Button>
    </template>

    <template #status-actions="{ items }">
      <button v-if="items.length === 1" @click="download(items[0])">Download</button>
    </template>
  </FileExplorer>
</template>

<script setup lang="ts">
const { data: files, pending } = await useFetch<FileExplorerItem[]>('/api/files', { default: () => [] })
</script>

<template>
  <FileExplorer :items="files" :loading="pending">
    <template #empty="{ query }">
      <p v-if="query">Nothing called “{{ query }}” here.</p>
      <p v-else>Nothing here yet — drop files to get started.</p>
    </template>
  </FileExplorer>
</template>

<script setup lang="ts">
import { FileTree, formatBytes } from '@/components/ui/file-explorer'

const selected = ref<string[]>([])
const expanded = ref<string[]>(['src'])
</script>

<template>
  <FileTree
    v-model:selected="selected"
    v-model:expanded="expanded"
    :items="files"
    searchable
    class="h-80"
  >
    <template #actions="{ item }">
      <span class="opacity-0 group-hover/row:opacity-100">{{ formatBytes(item.size) }}</span>
    </template>
  </FileTree>
</template>