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'
const { title } = defineProps<{ title:string }>()
const open = defineModel<boolean>({ required: true })
const isOpen = defineModel<boolean>({ required: true })
</script>
<template>
<Teleport to="body">
<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'" >
<h2>
{{ 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>
<div class="modal-content">

76
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 Modal from '~/components/ui/Modal.vue'
const open = ref(false)
const open2 = ref(false)
const isOpen = ref(false)
const isOpen2 = ref(false)
const open3 = ref(false)
const isOpen3 = ref(false)
const alertOpen = ref(true)
watchEffect(() => {
if (open3.value === false) {
if (isOpen3.value === false) {
alertOpen.value = true
}
})
const open4 = ref(false)
const open5 = ref(false)
const isOpen4 = ref(false)
const isOpen5 = ref(false)
</script>
# Modal
| Prop | Data type | Required? | Default | Description |
| --------- | ----------------- | --------- | ------- | -------------------------------- |
| `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | Yes | | Whether the modal is open or not |
| Prop | Data type | Required? | Default | Description |
| --------- | ----------------- | --------- | ------- | ---------------------------------- |
| `title` | `string` | Yes | | The modal title |
| `v-model` | `true` \| `false` | Yes | | Whether the modal is isOpen or not |
## Modal open
## Modal isOpen
```vue-html
<Modal v-model="open" title="My modal">
<Modal v-model="isOpen" title="My modal">
Modal content
</Modal>
<Button @click="open = true">
<Button @click="isOpen = true">
Open modal
</Button>
```
<Modal v-model="open" title="My modal">
<Modal v-model="isOpen" title="My modal">
Modal content
</Modal>
<Button @click="open = true">
<Button @click="isOpen = true">
Open modal
</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).
```vue-html
<Modal v-model="open" title="My modal">
<Modal v-model="isOpen" title="My modal">
Modal content
<template #actions>
<Button @click="open = false" color="secondary">
<Button @click="isOpen = false" color="secondary">
Cancel
</Button>
<Button @click="open = false">
<Button @click="isOpen = false">
Ok
</Button>
</template>
</Modal>
<Button @click="open = true">
<Button @click="isOpen = true">
Open modal
</Button>
```
<Modal v-model="open2" title="My modal">
<Modal v-model="isOpen2" title="My modal">
Modal content
<template #actions>
<Button @click="open2 = false" color="secondary">
<Button @click="isOpen2 = false" color="secondary">
Cancel
</Button>
<Button @click="open2 = false">
<Button @click="isOpen2 = false">
Ok
</Button>
</template>
</Modal>
<Button @click="open2 = true">
<Button @click="isOpen2 = true">
Open modal
</Button>
## 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
<Modal v-model="open" title="My modal">
<Modal v-model="openNested" title="My modal">
<Modal v-model="isOpen" title="My modal">
<Modal v-model="isOpenNested" title="My modal">
Nested modal content
</Modal>
<Button @click="openNested = true">
<Button @click="isOpenNested = true">
Open nested modal
</Button>
</Modal>
<Button @click="open = true">
<Button @click="isOpen = true">
Open modal
</Button>
```
<Modal v-model="open4" title="My modal">
<Modal v-model="open5" title="My modal">
<Modal v-model="isOpen4" title="My modal">
<Modal v-model="isOpen5" title="My modal">
Nested modal content
</Modal>
<Button @click="open5 = true">
<Button @click="isOpen5 = true">
Open nested modal
</Button>
</Modal>
<Button @click="open4 = true">
<Button @click="isOpen4 = true">
Open modal
</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.
```vue-html
<Modal v-model="open" title="My modal">
<Modal v-model="isOpen" title="My modal">
Modal content
<template #alert v-if="alertOpen">
@ -137,12 +137,12 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
</template>
</Modal>
<Button @click="open = true">
<Button @click="isOpen = true">
Open modal
</Button>
```
<Modal v-model="open3" title="My modal">
<Modal v-model="isOpen3" title="My modal">
Modal content
<template #alert v-if="alertOpen">
<Alert>
@ -153,14 +153,14 @@ You can nest [Funkwhale alerts](./alert) to visually highlight content within th
</Alert>
</template>
<template #actions>
<Button @click="open3 = false" color="secondary">
<Button @click="isOpen3 = false" color="secondary">
Cancel
</Button>
<Button @click="open3 = false">
<Button @click="isOpen3 = false">
Ok
</Button>
</template>
</Modal>
<Button @click="open3 = true">
<Button @click="isOpen3 = true">
Open modal
</Button>

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

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