funkwhale/front/ui-docs/components/ui/modal.md

<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 open = ref(false)
const open2 = ref(false)

const open3 = ref(false)
const alertOpen = ref(true)
watchEffect(() => {
  if (open3.value === false) {
    alertOpen.value = true
    }
})

const open4 = ref(false)
const open5 = 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 |

## Modal open

```vue-html
<Modal v-model="open" title="My modal">
  Modal content
</Modal>

<Button @click="open = true">
  Open modal
</Button>
```

<Modal v-model="open" title="My modal">
  Modal content
</Modal>
<Button @click="open = 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="open" title="My modal">
  Modal content

  <template #actions>
    <Button @click="open = false" color="secondary">
      Cancel
    </Button>

    <Button @click="open = false">
      Ok
    </Button>
  </template>
</Modal>

<Button @click="open = true">
  Open modal
</Button>
```

<Modal v-model="open2" title="My modal">
  Modal content
  <template #actions>
    <Button @click="open2 = false" color="secondary">
      Cancel
    </Button>
    <Button @click="open2 = false">
      Ok
    </Button>
  </template>
</Modal>
<Button @click="open2 = 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.

```vue-html
<Modal v-model="open" title="My modal">
  <Modal v-model="openNested" title="My modal">
    Nested modal content
  </Modal>

  <Button @click="openNested = true">
    Open nested modal
  </Button>
</Modal>

<Button @click="open = true">
  Open modal
</Button>
```

<Modal v-model="open4" title="My modal">
  <Modal v-model="open5" title="My modal">
    Nested modal content
  </Modal>
  <Button @click="open5 = true">
    Open nested modal
  </Button>
</Modal>
<Button @click="open4 = 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="open" 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="open = true">
  Open modal
</Button>
```

<Modal v-model="open3" 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="open3 = false" color="secondary">
      Cancel
    </Button>
    <Button @click="open3 = false">
      Ok
    </Button>
  </template>
</Modal>
<Button @click="open3 = true">
  Open modal
</Button>