nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated HeaderBar.vue to composition api & typescript.

Browse Source
This commit is contained in:
Joep 2023-10-07 13:56:51 +02:00
parent bb8c67fa8c
commit baf204259b
No known key found for this signature in database
GPG Key ID: 6F5588F1DC2A8209
2 changed files with 32 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/header/Action.vue
View File

@ -10,14 +10,14 @@
import { useLayoutStore } from "@/stores/layout"; import { useLayoutStore } from "@/stores/layout";
defineProps<{ defineProps<{
icon: any; icon?: string;
label: any; label?: any;
counter: any; counter?: any;
show: any; show?: any;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
(e: "action"): void; (e: "action"): any;
}>(); }>();
const layoutStore = useLayoutStore(); const layoutStore = useLayoutStore();

56
frontend/src/components/header/HeaderBar.vue
View File

@ -1,58 +1,56 @@
<template> <template>
<header> <header>
<img v-if="showLogo !== undefined" :src="logoURL" /> <img v-if="showLogo !== undefined" :src="logoURL" />
<action <Action
v-if="showMenu !== undefined" v-if="showMenu !== undefined"
class="menu-button" class="menu-button"
icon="menu" icon="menu"
:label="$t('buttons.toggleSidebar')" :label="t('buttons.toggleSidebar')"
@action="showHover('sidebar')" @action="layoutStore.showHover('sidebar')"
/> />
<slot /> <slot />
<div id="dropdown" :class="{ active: this.show === 'more' }"> <div id="dropdown" :class="{ active: layoutStore.show === 'more' }">
<slot name="actions" /> <slot name="actions" />
</div> </div>
<action <Action
v-if="this.$slots.actions" v-if="ifActionsSlot"
id="more" id="more"
icon="more_vert" icon="more_vert"
:label="$t('buttons.more')" :label="t('buttons.more')"
@action="showHover('more')" @action="layoutStore.showHover('more')"
/> />
<div class="overlay" v-show="this.show == 'more'" @click="closeHovers" /> <div
class="overlay"
v-show="layoutStore.show == 'more'"
@click="layoutStore.closeHovers"
/>
</header> </header>
</template> </template>
<script> <script setup lang="ts">
import { mapActions, mapState } from "pinia";
import { useLayoutStore } from "@/stores/layout"; import { useLayoutStore } from "@/stores/layout";
import { logoURL } from "@/utils/constants"; import { logoURL } from "@/utils/constants";
import Action from "@/components/header/Action.vue"; import Action from "@/components/header/Action.vue";
import { computed, useSlots } from "vue";
import { useI18n } from "vue-i18n";
export default { defineProps<{
name: "header-bar", showLogo: boolean;
props: ["showLogo", "showMenu"], showMenu: boolean;
components: { }>();
Action,
}, const layoutStore = useLayoutStore();
data: function () { const slots = useSlots();
return {
logoURL, const { t } = useI18n();
};
}, const ifActionsSlot = computed(() => (slots.actions ? true : false));
computed: {
...mapState(useLayoutStore, ["show"]),
},
methods: {
...mapActions(useLayoutStore, ["showHover", "closeHovers"]),
},
};
</script> </script>
<style></style> <style></style>