MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): allow Layout component to embody Html tags (nav, header, ...)

This commit is contained in:
upsiflu 2024-12-17 15:11:05 +01:00
parent b5475a1cba
commit b31a8caf86
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/components/ui/Layout.vue
View File

@ -1,13 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import { useCssModule } from 'vue' import { useCssModule } from 'vue'
const props = defineProps<{ [P in "stack" | "grid" | "flex"]?: true } & { columnWidth?: number, noGap?:true }>() const props = defineProps<
{ columnWidth?: number, noGap?:true }
& { [P in "stack" | "grid" | "flex"]?: true }
& { [C in "nav" | "aside" | "header" | "footer" | "main"]?:true }>()
const classes = useCssModule() const classes = useCssModule()
const columnWidth = props.columnWidth ?? 320 const columnWidth = props.columnWidth ?? 320
</script> </script>
<template> <template>
<div :class="[ <component
:is="props.nav ? 'nav' : props.aside ? 'aside' : props.header ? 'header' : props.footer ? 'footer' : props.main ? 'main' : 'div'"
:class="[
classes.layout, classes.layout,
noGap || classes.gap, noGap || classes.gap,
props.grid ? classes.grid props.grid ? classes.grid
@ -15,7 +20,7 @@ const columnWidth = props.columnWidth ?? 320
: classes.stack : classes.stack
]"> ]">
<slot /> <slot />
</div> </component>
</template> </template>
<style module> <style module>