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

fix(ui-docs): Reveal hidden dropdown menu in popover component and fix it to be working

This commit is contained in:
ArneBo 2024-12-06 17:20:41 +01:00 committed by upsiflu
parent b726b27a7e
commit 481fee8f5f
2 changed files with 39 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/ui-docs/.vitepress/config.ts
View File

@ -50,7 +50,7 @@ export default defineConfig({
],
},
{ text: 'Input', link: '/components/ui/input' },
{ text: 'Popover', link: '/components/ui/popover' },
{ text: 'Popover (Dropdown Menu)', link: '/components/ui/popover' },
{ text: 'Textarea', link: '/components/ui/textarea' },
{ text: 'Toggle', link: '/components/ui/toggle' },
],

49
front/ui-docs/components/ui/popover.md
View File

@ -37,11 +37,19 @@ const seperatorMenu = ref(false)
const subMenu = ref(false)
const extraItemsMenu = ref(false)
const fullMenu= ref(false)
const open = ref(false)
</script>
# Popover
# Popover (Dropdown Menu)
Popovers (`Popover`) are visually hidden menus of items activated by a simple button. Use popovers to create complex menus in a visually appealing way.
Popovers (`Popover`) are dropdown menus activated by a button. Use popovers to create dropdown menus ranging from simple lists to complex nested menus.
Common uses:
- "More actions" dropdown menus
- Navigation menus
- Settings menus
- Context menus (right-click menus)
| Prop | Data type | Required? | Description |
| ------ | --------- | --------- | ---------------------------------------------------------- |
@ -71,14 +79,24 @@ You can also use the `toggleOpen` prop in the `<template #default`> tag if you p
```vue{8-12}
<script setup lang="ts">
const open = ref(false)
const privacyChoices = ['pod', 'public', 'private']
const bcPrivacy = ref('pod')
</script>
<template>
<Popover>
<Popover v-model:open="open">
<template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
<Pill
@click="(e) => {
console.log('Pill clicked');
console.log('Before toggleOpen:', open);
toggleOpen();
console.log('After toggleOpen:', open);
}"
:blue="bcPrivacy === 'pod'"
:red="bcPrivacy === 'public'"
>
{{ bcPrivacy }}
</Pill>
</template>
@ -89,9 +107,18 @@ const bcPrivacy = ref('pod')
</template>
```
<Popover>
<Popover v-model:open="open">
<template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
<Pill
@click="(e) => {
console.log('Pill clicked');
console.log('Before toggleOpen:', open);
toggleOpen();
console.log('After toggleOpen:', open);
}"
:blue="bcPrivacy === 'pod'"
:red="bcPrivacy === 'public'"
>
{{ bcPrivacy }}
</Pill>
</template>
@ -453,10 +480,10 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc">
Creative Commons
<template #after>
<Popover>
<Popover v-model:open="isOpen">
<template #default="{ toggleOpen }">
<Pill
@click.stop="toggleOpen"
@click="toggleOpen"
:blue="ccPrivacy === 'pod'"
:red="ccPrivacy === 'public'"
>
@ -536,7 +563,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="bc">
Bandcamp
<template #after>
<Popover>
<Popover v-model:open="isOpen">
<template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
{{ bcPrivacy }}
@ -551,9 +578,9 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc">
Creative Commons
<template #after>
<Popover>
<Popover v-model:open="isOpen">
<template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
<Pill @click="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
{{ ccPrivacy }}
</Pill>
</template>