79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useDocumentStore } from '@/stores/documents'
|
|
import { ref, nextTick } from 'vue'
|
|
|
|
const documentStore = useDocumentStore()
|
|
const showSearchInput = ref<boolean>(false)
|
|
const search = ref<HTMLInputElement | null>()
|
|
const searchButton = ref<HTMLButtonElement | null>()
|
|
|
|
const toggleSearchInput = () => {
|
|
showSearchInput.value = !showSearchInput.value
|
|
nextTick(() => {
|
|
const input = search.value
|
|
if (input) input.focus()
|
|
//else if (searchButton.value) document.querySelector('.breadcrumb')!.focus()
|
|
})
|
|
}
|
|
|
|
defineExpose({
|
|
toggleSearchInput
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="headermain">
|
|
<div class="buttons">
|
|
<UploadButton />
|
|
<SvgButton
|
|
name="create-folder"
|
|
data-tooltip="New folder"
|
|
@click="() => documentStore.fileExplorer.newFolder()"
|
|
/>
|
|
<slot></slot>
|
|
<div class="spacer smallgap"></div>
|
|
<template v-if="showSearchInput">
|
|
<input
|
|
ref="search"
|
|
type="search"
|
|
v-model="documentStore.search"
|
|
class="margin-input"
|
|
@blur="() => { if (documentStore.search === '') toggleSearchInput() }"
|
|
@keyup.esc="toggleSearchInput"
|
|
/>
|
|
</template>
|
|
<SvgButton ref="searchButton" name="find" @click="toggleSearchInput" />
|
|
<SvgButton name="cog" @click="console.log('settings menu')" />
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.buttons {
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 3.5em;
|
|
z-index: 10;
|
|
}
|
|
.buttons > * {
|
|
flex-shrink: 1;
|
|
}
|
|
.spacer {
|
|
flex-grow: 1;
|
|
}
|
|
.smallgap {
|
|
margin-left: 2em;
|
|
}
|
|
input[type='search'] {
|
|
background: var(--primary-background);
|
|
color: var(--primary-color);
|
|
border: 0;
|
|
border-radius: 0.1em;
|
|
padding: 0.5em;
|
|
outline: none;
|
|
font-size: 1.5em;
|
|
max-width: 30vw;
|
|
}
|
|
</style>
|