Modal

<script setup lang="ts">
import { ref } from 'vue'

const modal = ref()
</script>

<template>
  <UiButton variant="filled" text="Open" @click="modal.showDialog()" />

  <UiModal ref="modal" title="Profile" size="md">
    <template #body>
      <p>Modal content…</p>
    </template>
  </UiModal>
</template>

<template>
  <UiModal ref="modal" title="Invite members" size="md">
    <template #body>
      <UiInputTags id="emails" v-model="emails" label="Email addresses" autofocus />
    </template>
  </UiModal>
</template>

<template>
  <UiModal ref="sheet" mode="side-sheet" size="lg" title="Filters" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const confirm = ref()

function remove() {
  // delete, then close
  confirm.value.closeDialog()
}
</script>

<template>
  <UiConfirmModal
    ref="confirm"
    variant="danger"
    title="Delete item?"
    message="This can't be undone."
    confirm-label="Delete"
    cancel-label="Cancel"
    @confirm="remove"
  />
</template>

:root {
  --cffy-dialog-radius: var(--cffy-radius-xl);
  --cffy-dialog-backdrop-color: color-mix(in oklab, black 60%, transparent);
  --cffy-dialog-duration: var(--cffy-duration-400);
}