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

chore(ui-docs): boolean variables start with 'is'

This commit is contained in:
upsiflu 2024-12-08 20:34:52 +01:00
parent 09077156ad
commit 415661e0a5
3 changed files with 48 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/components/ui/Modal.vue
View File

@ -2,17 +2,17 @@
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
const { title } = defineProps<{ title:string }>() const { title } = defineProps<{ title:string }>()
const open = defineModel<boolean>({ required: true }) const isOpen = defineModel<boolean>({ required: true })
</script> </script>
<template> <template>
<Teleport to="body"> <Teleport to="body">
<Transition mode="out-in"> <Transition mode="out-in">
<div v-if="open" @click.exact.stop="open = false" class="funkwhale overlay"> <div v-if="isOpen" @click.exact.stop="isOpen = false" class="funkwhale overlay">
<div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" > <div @click.stop class="funkwhale modal" :class="$slots.alert && 'has-alert'" >
<h2> <h2>
{{ title }} {{ title }}
<Button icon="bi-x-lg" color="secondary" variant="ghost" @click="open = false" /> <Button icon="bi-x-lg" color="secondary" variant="ghost" @click="isOpen = false" />
</h2> </h2>
<div class="modal-content"> <div class="modal-content">

72
front/ui-docs/components/ui/modal.md
View File

@ -5,45 +5,45 @@ import Alert from '~/components/ui/Alert.vue'
import Button from '~/components/ui/Button.vue' import Button from '~/components/ui/Button.vue'
import Modal from '~/components/ui/Modal.vue' import Modal from '~/components/ui/Modal.vue'
const open = ref(false) const isOpen = ref(false)
const open2 = ref(false) const isOpen2 = ref(false)
const open3 = ref(false) const isOpen3 = ref(false)
const alertOpen = ref(true) const alertOpen = ref(true)
watchEffect(() => { watchEffect(() => {
if (open3.value === false) { if (isOpen3.value === false) {
alertOpen.value = true alertOpen.value = true
} }
}) })
const open4 = ref(false) const isOpen4 = ref(false)
const open5 = ref(false) const isOpen5 = ref(false)
</script> </script>
# Modal # Modal
| Prop | Data type | Required? | Default | Description | | Prop | Data type | Required? | Default | Description |
| --------- | ----------------- | --------- | ------- | -------------------------------- | | --------- | ----------------- | --------- | ------- | ---------------------------------- |
| `title` | `string` | Yes | | The modal title | | `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | Yes | | Whether the modal is open or not | | `v-model` | `true` \| `false` | Yes | | Whether the modal is isOpen or not |
## Modal open ## Modal isOpen
```vue-html ```vue-html
<Modal v-model="open" title="My modal"> <Modal v-model="isOpen" title="My modal">
Modal content Modal content
</Modal> </Modal>
<Button @click="open = true"> <Button @click="isOpen = true">
Open modal Open modal
</Button> </Button>
``` ```
<Modal v-model="open" title="My modal"> <Modal v-model="isOpen" title="My modal">
Modal content Modal content
</Modal> </Modal>
<Button @click="open = true"> <Button @click="isOpen = true">
Open modal Open modal
</Button> </Button>
@ -52,69 +52,69 @@ const open5 = ref(false)
Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](./button). Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](./button).
```vue-html ```vue-html
<Modal v-model="open" title="My modal"> <Modal v-model="isOpen" title="My modal">
Modal content Modal content
<template #actions> <template #actions>
<Button @click="open = false" color="secondary"> <Button @click="isOpen = false" color="secondary">
Cancel Cancel
</Button> </Button>
<Button @click="open = false"> <Button @click="isOpen = false">
Ok Ok
</Button> </Button>
</template> </template>
</Modal> </Modal>
<Button @click="open = true"> <Button @click="isOpen = true">
Open modal Open modal
</Button> </Button>
``` ```
<Modal v-model="open2" title="My modal"> <Modal v-model="isOpen2" title="My modal">
Modal content Modal content
<template #actions> <template #actions>
<Button @click="open2 = false" color="secondary"> <Button @click="isOpen2 = false" color="secondary">
Cancel Cancel
</Button> </Button>
<Button @click="open2 = false"> <Button @click="isOpen2 = false">
Ok Ok
</Button> </Button>
</template> </template>
</Modal> </Modal>
<Button @click="open2 = true"> <Button @click="isOpen2 = true">
Open modal Open modal
</Button> </Button>
## Nested modals ## Nested modals
You can nest modals to allow users to open a modal from inside another modal. This can be useful when creating a multi-step workflow. You can nest modals to allow users to isOpen a modal from inside another modal. This can be useful when creating a multi-step workflow.
```vue-html ```vue-html
<Modal v-model="open" title="My modal"> <Modal v-model="isOpen" title="My modal">
<Modal v-model="openNested" title="My modal"> <Modal v-model="isOpenNested" title="My modal">
Nested modal content Nested modal content
</Modal> </Modal>
<Button @click="openNested = true"> <Button @click="isOpenNested = true">
Open nested modal Open nested modal
</Button> </Button>
</Modal> </Modal>
<Button @click="open = true"> <Button @click="isOpen = true">
Open modal Open modal
</Button> </Button>
``` ```
<Modal v-model="open4" title="My modal"> <Modal v-model="isOpen4" title="My modal">
<Modal v-model="open5" title="My modal"> <Modal v-model="isOpen5" title="My modal">
Nested modal content Nested modal content
</Modal> </Modal>
<Button @click="open5 = true"> <Button @click="isOpen5 = true">
Open nested modal Open nested modal
</Button> </Button>
</Modal> </Modal>
<Button @click="open4 = true"> <Button @click="isOpen4 = true">
Open modal Open modal
</Button> </Button>
@ -123,7 +123,7 @@ You can nest modals to allow users to open a modal from inside another modal. Th
You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal. You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal.
```vue-html ```vue-html
<Modal v-model="open" title="My modal"> <Modal v-model="isOpen" title="My modal">
Modal content Modal content
<template #alert v-if="alertOpen"> <template #alert v-if="alertOpen">
@ -137,12 +137,12 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
</template> </template>
</Modal> </Modal>
<Button @click="open = true"> <Button @click="isOpen = true">
Open modal Open modal
</Button> </Button>
``` ```
<Modal v-model="open3" title="My modal"> <Modal v-model="isOpen3" title="My modal">
Modal content Modal content
<template #alert v-if="alertOpen"> <template #alert v-if="alertOpen">
<Alert> <Alert>
@ -153,14 +153,14 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
</Alert> </Alert>
</template> </template>
<template #actions> <template #actions>
<Button @click="open3 = false" color="secondary"> <Button @click="isOpen3 = false" color="secondary">
Cancel Cancel
</Button> </Button>
<Button @click="open3 = false"> <Button @click="isOpen3 = false">
Ok Ok
</Button> </Button>
</template> </template>
</Modal> </Modal>
<Button @click="open3 = true"> <Button @click="isOpen3 = true">
Open modal Open modal
</Button> </Button>

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

@ -37,7 +37,7 @@ const seperatorMenu = ref(false)
const subMenu = ref(false) const subMenu = ref(false)
const extraItemsMenu = ref(false) const extraItemsMenu = ref(false)
const fullMenu= ref(false) const fullMenu= ref(false)
const open = ref(false) const isOpen = ref(false)
</script> </script>
# Popover (Dropdown Menu) # Popover (Dropdown Menu)
@ -85,14 +85,14 @@ const bcPrivacy = ref('pod')
</script> </script>
<template> <template>
<Popover v-model:open="open"> <Popover v-model:open="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill <Pill
@click="(e) => { @click="(e) => {
console.log('Pill clicked'); console.log('Pill clicked');
console.log('Before toggleOpen:', open); console.log('Before toggleOpen:', isOpen);
toggleOpen(); toggleOpen();
console.log('After toggleOpen:', open); console.log('After toggleOpen:', isOpen);
}" }"
:blue="bcPrivacy === 'pod'" :blue="bcPrivacy === 'pod'"
:red="bcPrivacy === 'public'" :red="bcPrivacy === 'public'"
@ -107,14 +107,14 @@ const bcPrivacy = ref('pod')
</template> </template>
``` ```
<Popover v-model:open="open"> <Popover v-model:open="isOpen">
<template #default="{ toggleOpen }"> <template #default="{ toggleOpen }">
<Pill <Pill
@click="(e) => { @click="(e) => {
console.log('Pill clicked'); console.log('Pill clicked');
console.log('Before toggleOpen:', open); console.log('Before toggleOpen:', isOpen);
toggleOpen(); toggleOpen();
console.log('After toggleOpen:', open); console.log('After toggleOpen:', isOpen);
}" }"
:blue="bcPrivacy === 'pod'" :blue="bcPrivacy === 'pod'"
:red="bcPrivacy === 'public'" :red="bcPrivacy === 'public'"