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

<script setup lang="ts">
import { ref, watchEffect } from '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
<fw-modal v-model="open" title="My modal">
  Modal content
</fw-modal>

<fw-button @click="open = true">
  Open modal
</fw-button>
```

<fw-modal v-model="open" title="My modal">
  Modal content
</fw-modal>
<fw-button @click="open = true">
  Open modal
</fw-button>

## Modal actions

Use the `#actions` slot to add actions to a modal. Actions typically take the form of [buttons](/components/button).

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

  <template #actions>
    <fw-button @click="open = false" color="secondary">
      Cancel
    </fw-button>

    <fw-button @click="open = false">
      Ok
    </fw-button>
  </template>
</fw-modal>

<fw-button @click="open = true">
  Open modal
</fw-button>
```

<fw-modal v-model="open2" title="My modal">
  Modal content
  <template #actions>
    <fw-button @click="open2 = false" color="secondary">
      Cancel
    </fw-button>
    <fw-button @click="open2 = false">
      Ok
    </fw-button>
  </template>
</fw-modal>
<fw-button @click="open2 = true">
  Open modal
</fw-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
<fw-modal v-model="open" title="My modal">
  <fw-modal v-model="openNested" title="My modal">
    Nested modal content
  </fw-modal>

  <fw-button @click="openNested = true">
    Open nested modal
  </fw-button>
</fw-modal>

<fw-button @click="open = true">
  Open modal
</fw-button>
```

<fw-modal v-model="open4" title="My modal">
  <fw-modal v-model="open5" title="My modal">
    Nested modal content
  </fw-modal>
  <fw-button @click="open5 = true">
    Open nested modal
  </fw-button>
</fw-modal>
<fw-button @click="open4 = true">
  Open modal
</fw-button>

## Alert inside modal

You can nest [Funkwhale alerts](/components/alert) to visually highlight content within the modal.

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

  <template #alert v-if="alertOpen">
    <fw-alert>
      Alert content

      <template #actions>
        <fw-button @click="alertOpen = false">Close alert</fw-button>
      </template>
    </fw-alert>
  </template>
</fw-modal>

<fw-button @click="open = true">
  Open modal
</fw-button>
```

<fw-modal v-model="open3" title="My modal">
  Modal content
  <template #alert v-if="alertOpen">
    <fw-alert>
      Alert content
      <template #actions>
        <fw-button @click="alertOpen = false">Close alert</fw-button>
      </template>
    </fw-alert>
  </template>
  <template #actions>
    <fw-button @click="open3 = false" color="secondary">
      Cancel
    </fw-button>
    <fw-button @click="open3 = false">
      Ok
    </fw-button>
  </template>
</fw-modal>
<fw-button @click="open3 = true">
  Open modal
</fw-button>