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

docs(ui-docs): document simplified popover v-model

This commit is contained in:
upsiflu 2025-02-24 15:51:11 +01:00
parent 8bb0adf700
commit 2cd00db402
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -143,13 +143,13 @@ Use [Vue event handling](https://vuejs.org/guide/essentials/event-handling.html)
</script>
<template>
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<OptionsButton @click="isOpen = !isOpen" />
</Popover>
</template>
```
<Popover v-model:open="emptyMenu">
<Popover v-model="emptyMenu">
<OptionsButton @click="emptyMenu = !emptyMenu" />
</Popover>
@ -163,7 +163,7 @@ const bcPrivacy = ref("pod");
</script>
<template>
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<template #default="{ toggleOpen }">
<Pill
@click="
@ -187,7 +187,7 @@ const bcPrivacy = ref("pod");
</template>
```
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<template #default="{ toggleOpen }">
<Pill
@click="(e) => {
@ -226,7 +226,7 @@ The popover item (`PopoverItem`) is a simple button that uses [Vue event handlin
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverItem @click="alert('Report this object?')">
@ -238,7 +238,7 @@ The popover item (`PopoverItem`) is a simple button that uses [Vue event handlin
</template>
```
<Popover v-model:open="singleItemMenu">
<Popover v-model="singleItemMenu">
<OptionsButton @click="singleItemMenu = !singleItemMenu" />
<template #items>
<PopoverItem @click="alert('Report this object?')">
@ -260,7 +260,7 @@ const open = ref(false)
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverCheckbox v-model="bc">
@ -274,7 +274,7 @@ const open = ref(false)
</template>
```
<Popover v-model:open="checkboxMenu">
<Popover v-model="checkboxMenu">
<OptionsButton @click="checkboxMenu = !checkboxMenu" />
<template #items>
<PopoverCheckbox v-model="bc">
@ -303,7 +303,7 @@ const privacy = ["public", "private", "pod"];
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverRadio v-model="currentChoice" :choices="choices" />
@ -312,7 +312,7 @@ const privacy = ["public", "private", "pod"];
</template>
```
<Popover v-model:open="radioMenu">
<Popover v-model="radioMenu">
<OptionsButton @click="radioMenu = !radioMenu" />
<template #items>
<PopoverRadio v-model="bcPrivacy" :choices="privacyChoices"/>
@ -331,7 +331,7 @@ const open = ref(false)
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverCheckbox v-model="bc">
@ -346,7 +346,7 @@ const open = ref(false)
</template>
```
<Popover v-model:open="seperatorMenu">
<Popover v-model="seperatorMenu">
<OptionsButton @click="seperatorMenu = !seperatorMenu" />
<template #items>
<PopoverCheckbox v-model="bc">
@ -377,7 +377,7 @@ PopoverItem supports an `icon` prop to easily add icons to menu items. The icon
</PopoverItem>
```
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<OptionsButton @click="isOpen = !isOpen" />
<template #items>
<PopoverItem icon="bi-music-note-list">
@ -401,7 +401,7 @@ const open = ref(false)
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverSubmenu>
@ -418,7 +418,7 @@ const open = ref(false)
</template>
```
<Popover v-model:open="subMenu">
<Popover v-model="subMenu">
<OptionsButton @click="subMenu = !subMenu" />
<template #items>
<PopoverSubmenu>
@ -446,7 +446,7 @@ const open = ref(false)
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverSubmenu>
@ -483,7 +483,7 @@ const open = ref(false)
</template>
```
<Popover v-model:open="extraItemsMenu">
<Popover v-model="extraItemsMenu">
<OptionsButton @click="extraItemsMenu = !extraItemsMenu" />
<template #items>
<PopoverSubmenu>
@ -522,7 +522,7 @@ const open = ref(false)
You can use `PopoverItem`s as Links by providing a `to` prop with the route object or and external Url (`http...`). Read more on the [Link component](./link) page.
<Popover v-model:open="linksMenu">
<Popover v-model="linksMenu">
<OptionsButton @click="linksMenu = !linksMenu" />
<template #items>
<PopoverItem to="a">
@ -562,7 +562,7 @@ const privacyChoices = ["private", "pod", "public"];
</script>
<template>
<Popover v-model:open="open">
<Popover v-model="open">
<OptionsButton @click="open = !open" />
<template #items>
<PopoverSubmenu>
@ -632,7 +632,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc">
Creative Commons
<template #after>
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<template #default="{ toggleOpen }">
<Pill
@click="toggleOpen"
@ -677,7 +677,7 @@ const privacyChoices = ["private", "pod", "public"];
</template>
```
<Popover v-model:open="fullMenu">
<Popover v-model="fullMenu">
<OptionsButton @click="fullMenu = !fullMenu" />
<template #items>
<PopoverItem>
@ -726,7 +726,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="bc">
Bandcamp
<template #after>
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
{{ bcPrivacy }}
@ -741,7 +741,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc">
Creative Commons
<template #after>
<Popover v-model:open="isOpen">
<Popover v-model="isOpen">
<template #default="{ toggleOpen }">
<Pill @click="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
{{ ccPrivacy }}