@vuecs/overlays

@vuecs/overlays

Eight overlay families for vuecs — Modal, AlertDialog, Popover, HoverCard, Tooltip, DropdownMenu, ContextMenu, Toast — as thin themed wrappers over Reka UI primitives. Reka handles focus traps, dismiss layers, and positioning; vuecs handles the look, through whichever theme you install.

✨ What's inside

• 🪟 Modal — with useModal(), a view-stack composable (pushView / popView / replaceView) for "list → detail → back" flows inside one modal instance. No stacked dialogs, no z-index fights.
• ⚠️ AlertDialog — the role="alertdialog" confirmation primitive (outside-click off, distinct Cancel/Action buttons) plus useAlertDialog() — const ok = await confirm({ title, description, tone: 'error' }). A single <VCAlertDialogProvider> host drains a shared FIFO queue, the same way <VCToaster> drains useToast().
• 🔔 Toast — with useToast(), an app-scoped queue (add / dismiss / update / clear), provided per-app so SSR requests stay isolated. Capture it from a component setup() and reuse the returned API anywhere (store, interceptor); every entry lands in the same <VCToaster> viewport.
• 💬 Popover · HoverCard · Tooltip — positioned floating panels with arrows, grace-area hover (HoverCard), and provider-level config (Tooltip).
• 📋 DropdownMenu · ContextMenu — the full menu surface: items, labels, separators, groups, checkbox items, radio groups, submenus.
• 🎞️ Enter and exit animations — data-state-driven, with Reka's internal Presence delaying unmount until the exit animation completes. Works in every shipping theme.
• 📦 Portals included — every *Content part bundles its portal; an inline prop bypasses it for tests or custom mounting.

📦 Installation

npm install @vuecs/overlays

⚡ Usage

<VCModal v-model:open="open">
    <VCModalTrigger as-child><VCButton>Open</VCButton></VCModalTrigger>
    <VCModalContent>
        <VCModalTitle>Confirm action</VCModalTitle>
        <VCModalDescription>This cannot be undone.</VCModalDescription>
        <VCModalClose>Cancel</VCModalClose>
    </VCModalContent>
</VCModal>

import { useToast } from '@vuecs/overlays';

const toast = useToast();
toast.add({ title: 'Saved', description: 'Your changes are live.', color: 'success' });

import { useAlertDialog } from '@vuecs/overlays';

const confirm = useAlertDialog();
// Place a single <VCAlertDialogProvider /> near your app root, then:
if (await confirm({ title: 'Delete project?', description: 'This cannot be undone.', tone: 'error' })) {
    await api.deleteProject(id);
}

⚖️ Bundle size

Wrapper-only deltas, measured from tree-shaken single-family builds:

The shared Reka + @vuecs/core infrastructure is a one-time cost amortised across every family you use; the full package (all 8 families + composables) is ~46 kB raw / ~5 kB gzipped before tree-shaking.

📚 Documentation

One page per family on vuecs.dev:

Modal · AlertDialog · Popover · HoverCard · Tooltip · DropdownMenu · ContextMenu · Toast

License

Made with 💚

Published under Apache 2.0 License.