167 lines
3.5 KiB
Markdown
167 lines
3.5 KiB
Markdown
<script setup lang="ts">
|
|
import { ref, watchEffect } from 'vue'
|
|
|
|
import Alert from '~/components/ui/Alert.vue'
|
|
import Button from '~/components/ui/Button.vue'
|
|
import Modal from '~/components/ui/Modal.vue'
|
|
|
|
const isOpen = ref(false)
|
|
const isOpen2 = ref(false)
|
|
|
|
const isOpen3 = ref(false)
|
|
const alertOpen = ref(true)
|
|
watchEffect(() => {
|
|
if (isOpen3.value === false) {
|
|
alertOpen.value = true
|
|
}
|
|
})
|
|
|
|
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 isOpen or not |
|
|
|
|
## Modal isOpen
|
|
|
|
```vue-html
|
|
<Modal v-model="isOpen" title="My modal">
|
|
Modal content
|
|
</Modal>
|
|
|
|
<Button @click="isOpen = true">
|
|
Open modal
|
|
</Button>
|
|
```
|
|
|
|
<Modal v-model="isOpen" title="My modal">
|
|
Modal content
|
|
</Modal>
|
|
<Button @click="isOpen = true">
|
|
Open modal
|
|
</Button>
|
|
|
|
## Modal actions
|
|
|
|
Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](./button).
|
|
|
|
```vue-html
|
|
<Modal v-model="isOpen" title="My modal">
|
|
Modal content
|
|
|
|
<template #actions>
|
|
<Button @click="isOpen = false" color="secondary">
|
|
Cancel
|
|
</Button>
|
|
|
|
<Button @click="isOpen = false">
|
|
Ok
|
|
</Button>
|
|
</template>
|
|
</Modal>
|
|
|
|
<Button @click="isOpen = true">
|
|
Open modal
|
|
</Button>
|
|
```
|
|
|
|
<Modal v-model="isOpen2" title="My modal">
|
|
Modal content
|
|
<template #actions>
|
|
<Button @click="isOpen2 = false" color="secondary">
|
|
Cancel
|
|
</Button>
|
|
<Button @click="isOpen2 = false">
|
|
Ok
|
|
</Button>
|
|
</template>
|
|
</Modal>
|
|
<Button @click="isOpen2 = true">
|
|
Open modal
|
|
</Button>
|
|
|
|
## Nested modals
|
|
|
|
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="isOpen" title="My modal">
|
|
<Modal v-model="isOpenNested" title="My modal">
|
|
Nested modal content
|
|
</Modal>
|
|
|
|
<Button @click="isOpenNested = true">
|
|
Open nested modal
|
|
</Button>
|
|
</Modal>
|
|
|
|
<Button @click="isOpen = true">
|
|
Open modal
|
|
</Button>
|
|
```
|
|
|
|
<Modal v-model="isOpen4" title="My modal">
|
|
<Modal v-model="isOpen5" title="My modal">
|
|
Nested modal content
|
|
</Modal>
|
|
<Button @click="isOpen5 = true">
|
|
Open nested modal
|
|
</Button>
|
|
</Modal>
|
|
<Button @click="isOpen4 = true">
|
|
Open modal
|
|
</Button>
|
|
|
|
## Alert inside modal
|
|
|
|
You can nest [Funkwhale alerts](./alert) to visually highlight content within the modal.
|
|
|
|
```vue-html
|
|
<Modal v-model="isOpen" title="My modal">
|
|
Modal content
|
|
|
|
<template #alert v-if="alertOpen">
|
|
<fw-alert>
|
|
Alert content
|
|
|
|
<template #actions>
|
|
<Button @click="alertOpen = false">Close alert</Button>
|
|
</template>
|
|
</fw-alert>
|
|
</template>
|
|
</Modal>
|
|
|
|
<Button @click="isOpen = true">
|
|
Open modal
|
|
</Button>
|
|
```
|
|
|
|
<Modal v-model="isOpen3" title="My modal">
|
|
Modal content
|
|
<template #alert v-if="alertOpen">
|
|
<Alert>
|
|
Alert content
|
|
<template #actions>
|
|
<Button @click="alertOpen = false">Close alert</Button>
|
|
</template>
|
|
</Alert>
|
|
</template>
|
|
<template #actions>
|
|
<Button @click="isOpen3 = false" color="secondary">
|
|
Cancel
|
|
</Button>
|
|
<Button @click="isOpen3 = false">
|
|
Ok
|
|
</Button>
|
|
</template>
|
|
</Modal>
|
|
<Button @click="isOpen3 = true">
|
|
Open modal
|
|
</Button>
|