Modal

Description

Modal provides lightweight modal wrappers together with a renderless close controller for Bulma-based overlays.

Installation

Install the package:

yarn add @enso-ui/modal

The components can be used inside or outside the Enso ecosystem.

Features

• exports Modal and ModalCard from the Bulma entrypoint
• uses CoreModal internally to centralize close handling and Escape support
• renders through teleport and transition wrappers
• passes a close() slot helper to modal content

Usage

<script setup>
import { ModalCard } from '@enso-ui/modal/bulma';
</script>

<ModalCard @close="closed = true">
    <template #header="{ close }">...</template>
    <template #body="{ close }">...</template>
    <template #footer="{ close }">...</template>
</ModalCard>

API

Bulma exports

Import: @enso-ui/modal/bulma

Modal

• emits: show, close
• default slot receives { close }
• renders a standard Bulma modal content container

ModalCard

• emits: show, close
• named slots: header, body, footer
• every slot receives { close }
• renders a Bulma modal-card layout

Renderless core

CoreModal

• prop: visible: boolean
• emits: update:visible
• slot props: { close }
• closes on Escape and centralizes the visible-state contract for the Bulma wrappers

Depends On

• @enso-ui/transitions ↗

Contributions

are welcome. Pull requests are great, but issues are good too.

Thank you to all the people who already contributed to Enso!

License

MIT