144 lines
3.5 KiB
Vue
144 lines
3.5 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { useDisplay } from 'vuetify'
|
|
import type { ViewMode } from '@/types'
|
|
|
|
const props = defineProps<{
|
|
searchQuery: string
|
|
viewMode: ViewMode
|
|
isLoading: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'update:searchQuery': [value: string]
|
|
'update:viewMode': [value: ViewMode]
|
|
'toggle-sidebar': []
|
|
'refresh': []
|
|
'open-file-picker': []
|
|
'open-folder-picker': []
|
|
'new-folder': []
|
|
}>()
|
|
|
|
const display = useDisplay()
|
|
const isMobile = computed(() => display.mdAndDown.value)
|
|
|
|
const searchModel = computed({
|
|
get: () => props.searchQuery,
|
|
set: (value: string) => emit('update:searchQuery', value)
|
|
})
|
|
|
|
const viewModeModel = computed({
|
|
get: () => props.viewMode,
|
|
set: (value: ViewMode) => emit('update:viewMode', value)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-app-bar elevation="0" density="compact" class="files-toolbar">
|
|
<template #prepend>
|
|
<v-app-bar-nav-icon
|
|
v-if="isMobile"
|
|
@click="emit('toggle-sidebar')"
|
|
/>
|
|
</template>
|
|
|
|
<v-app-bar-title>Files</v-app-bar-title>
|
|
|
|
<v-spacer />
|
|
|
|
<!-- Search -->
|
|
<v-text-field
|
|
v-model="searchModel"
|
|
density="compact"
|
|
variant="outlined"
|
|
placeholder="Search files..."
|
|
prepend-inner-icon="mdi-magnify"
|
|
hide-details
|
|
single-line
|
|
class="files-toolbar-search mx-4"
|
|
/>
|
|
|
|
<!-- View toggle -->
|
|
<v-btn-toggle
|
|
v-model="viewModeModel"
|
|
color="primary"
|
|
variant="outlined"
|
|
density="compact"
|
|
mandatory
|
|
class="mr-2"
|
|
>
|
|
<v-btn value="grid" size="small">
|
|
<v-icon>mdi-view-grid</v-icon>
|
|
</v-btn>
|
|
<v-btn value="list" size="small">
|
|
<v-icon>mdi-view-list</v-icon>
|
|
</v-btn>
|
|
<v-btn value="details" size="small">
|
|
<v-icon>mdi-view-headline</v-icon>
|
|
</v-btn>
|
|
</v-btn-toggle>
|
|
|
|
<template #append>
|
|
<v-btn
|
|
icon="mdi-refresh"
|
|
variant="text"
|
|
@click="emit('refresh')"
|
|
:loading="isLoading"
|
|
/>
|
|
<v-menu>
|
|
<template #activator="{ props: menuProps }">
|
|
<v-btn
|
|
color="secondary"
|
|
variant="tonal"
|
|
class="mr-2"
|
|
v-bind="menuProps"
|
|
>
|
|
<v-icon start>mdi-upload</v-icon>
|
|
<span class="d-none d-sm-inline">Upload</span>
|
|
<v-icon end size="small">mdi-chevron-down</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list density="compact">
|
|
<v-list-item @click="emit('open-file-picker')">
|
|
<template #prepend>
|
|
<v-icon>mdi-file-upload</v-icon>
|
|
</template>
|
|
<v-list-item-title>Upload Files</v-list-item-title>
|
|
</v-list-item>
|
|
<v-list-item @click="emit('open-folder-picker')">
|
|
<template #prepend>
|
|
<v-icon>mdi-folder-upload</v-icon>
|
|
</template>
|
|
<v-list-item-title>Upload Folder</v-list-item-title>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
<v-btn
|
|
color="primary"
|
|
variant="elevated"
|
|
@click="emit('new-folder')"
|
|
>
|
|
<v-icon start>mdi-folder-plus</v-icon>
|
|
<span class="d-none d-sm-inline">New Folder</span>
|
|
</v-btn>
|
|
</template>
|
|
</v-app-bar>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.files-toolbar {
|
|
border-bottom: 1px solid rgb(var(--v-border-color)) !important;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.files-toolbar-search {
|
|
max-width: 180px;
|
|
margin-inline: 8px !important;
|
|
}
|
|
}
|
|
|
|
.files-toolbar-search {
|
|
max-width: 300px;
|
|
}
|
|
</style>
|