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> </script>
<template> <template>
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<OptionsButton @click="isOpen = !isOpen" /> <OptionsButton @click="isOpen = !isOpen" />
</Popover> </Popover>
</template> </template>
``` ```
<Popover v-model:open="emptyMenu"> <Popover v-model="emptyMenu">
<OptionsButton @click="emptyMenu = !emptyMenu" /> <OptionsButton @click="emptyMenu = !emptyMenu" />
</Popover> </Popover>
@ -163,7 +163,7 @@ const bcPrivacy = ref("pod");
</script> </script>
<template> <template>
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill <Pill
@click=" @click="
@ -187,7 +187,7 @@ const bcPrivacy = ref("pod");
</template> </template>
``` ```
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill <Pill
@click="(e) => { @click="(e) => {
@ -226,7 +226,7 @@ The popover item (`PopoverItem`) is a simple button that uses [Vue event handlin
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverItem @click="alert('Report this object?')"> <PopoverItem @click="alert('Report this object?')">
@ -238,7 +238,7 @@ The popover item (`PopoverItem`) is a simple button that uses [Vue event handlin
</template> </template>
``` ```
<Popover v-model:open="singleItemMenu"> <Popover v-model="singleItemMenu">
<OptionsButton @click="singleItemMenu = !singleItemMenu" /> <OptionsButton @click="singleItemMenu = !singleItemMenu" />
<template #items> <template #items>
<PopoverItem @click="alert('Report this object?')"> <PopoverItem @click="alert('Report this object?')">
@ -260,7 +260,7 @@ const open = ref(false)
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverCheckbox v-model="bc"> <PopoverCheckbox v-model="bc">
@ -274,7 +274,7 @@ const open = ref(false)
</template> </template>
``` ```
<Popover v-model:open="checkboxMenu"> <Popover v-model="checkboxMenu">
<OptionsButton @click="checkboxMenu = !checkboxMenu" /> <OptionsButton @click="checkboxMenu = !checkboxMenu" />
<template #items> <template #items>
<PopoverCheckbox v-model="bc"> <PopoverCheckbox v-model="bc">
@ -303,7 +303,7 @@ const privacy = ["public", "private", "pod"];
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverRadio v-model="currentChoice" :choices="choices" /> <PopoverRadio v-model="currentChoice" :choices="choices" />
@ -312,7 +312,7 @@ const privacy = ["public", "private", "pod"];
</template> </template>
``` ```
<Popover v-model:open="radioMenu"> <Popover v-model="radioMenu">
<OptionsButton @click="radioMenu = !radioMenu" /> <OptionsButton @click="radioMenu = !radioMenu" />
<template #items> <template #items>
<PopoverRadio v-model="bcPrivacy" :choices="privacyChoices"/> <PopoverRadio v-model="bcPrivacy" :choices="privacyChoices"/>
@ -331,7 +331,7 @@ const open = ref(false)
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverCheckbox v-model="bc"> <PopoverCheckbox v-model="bc">
@ -346,7 +346,7 @@ const open = ref(false)
</template> </template>
``` ```
<Popover v-model:open="seperatorMenu"> <Popover v-model="seperatorMenu">
<OptionsButton @click="seperatorMenu = !seperatorMenu" /> <OptionsButton @click="seperatorMenu = !seperatorMenu" />
<template #items> <template #items>
<PopoverCheckbox v-model="bc"> <PopoverCheckbox v-model="bc">
@ -377,7 +377,7 @@ PopoverItem supports an `icon` prop to easily add icons to menu items. The icon
</PopoverItem> </PopoverItem>
``` ```
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<OptionsButton @click="isOpen = !isOpen" /> <OptionsButton @click="isOpen = !isOpen" />
<template #items> <template #items>
<PopoverItem icon="bi-music-note-list"> <PopoverItem icon="bi-music-note-list">
@ -401,7 +401,7 @@ const open = ref(false)
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverSubmenu> <PopoverSubmenu>
@ -418,7 +418,7 @@ const open = ref(false)
</template> </template>
``` ```
<Popover v-model:open="subMenu"> <Popover v-model="subMenu">
<OptionsButton @click="subMenu = !subMenu" /> <OptionsButton @click="subMenu = !subMenu" />
<template #items> <template #items>
<PopoverSubmenu> <PopoverSubmenu>
@ -446,7 +446,7 @@ const open = ref(false)
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverSubmenu> <PopoverSubmenu>
@ -483,7 +483,7 @@ const open = ref(false)
</template> </template>
``` ```
<Popover v-model:open="extraItemsMenu"> <Popover v-model="extraItemsMenu">
<OptionsButton @click="extraItemsMenu = !extraItemsMenu" /> <OptionsButton @click="extraItemsMenu = !extraItemsMenu" />
<template #items> <template #items>
<PopoverSubmenu> <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. 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" /> <OptionsButton @click="linksMenu = !linksMenu" />
<template #items> <template #items>
<PopoverItem to="a"> <PopoverItem to="a">
@ -562,7 +562,7 @@ const privacyChoices = ["private", "pod", "public"];
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model="open">
<OptionsButton @click="open = !open" /> <OptionsButton @click="open = !open" />
<template #items> <template #items>
<PopoverSubmenu> <PopoverSubmenu>
@ -632,7 +632,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc"> <PopoverCheckbox v-model="cc">
Creative Commons Creative Commons
<template #after> <template #after>
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill <Pill
@click="toggleOpen" @click="toggleOpen"
@ -677,7 +677,7 @@ const privacyChoices = ["private", "pod", "public"];
</template> </template>
``` ```
<Popover v-model:open="fullMenu"> <Popover v-model="fullMenu">
<OptionsButton @click="fullMenu = !fullMenu" /> <OptionsButton @click="fullMenu = !fullMenu" />
<template #items> <template #items>
<PopoverItem> <PopoverItem>
@ -726,7 +726,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="bc"> <PopoverCheckbox v-model="bc">
Bandcamp Bandcamp
<template #after> <template #after>
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'"> <Pill @click.stop="toggleOpen" :blue="bcPrivacy === 'pod'" :red="bcPrivacy === 'public'">
{{ bcPrivacy }} {{ bcPrivacy }}
@ -741,7 +741,7 @@ const privacyChoices = ["private", "pod", "public"];
<PopoverCheckbox v-model="cc"> <PopoverCheckbox v-model="cc">
Creative Commons Creative Commons
<template #after> <template #after>
<Popover v-model:open="isOpen"> <Popover v-model="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill @click="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'"> <Pill @click="toggleOpen" :blue="ccPrivacy === 'pod'" :red="ccPrivacy === 'public'">
{{ ccPrivacy }} {{ ccPrivacy }}