Global Helpers

Plume UI provides several custom AlpineJS magic helpers (prefixed with $) to simplify common UI interactions without needing to dispatch events manually.

Modals & Drawers

Control overlays from any Alpine context.

Helper Description
$openModal(name) Opens the modal with the given name.
$closeModal(name?) Closes specific modal, or ALL modals if no name is provided.
$openDrawer(name) Opens the drawer with the given name.
$closeDrawer(name?) Closes specific drawer, or ALL drawers if no name is provided.

Modal Control Example

blade 
<div class="flex flex-wrap gap-4">
    <x-plume::button style="outline" x-on:click="$openModal('helper-modal')">
        Open Modal
    </x-plume::button>
    <x-plume::modal name="helper-modal" title="Hello from Helper">
        <p>This modal was opened using the $openModal helper.</p>
        <x-slot:footer>
            <x-plume::button x-on:click="$closeModal()">Close</x-plume::button>
        </x-slot:footer>
    </x-plume::modal>
</div>

Toasts

Quickly trigger notifications without accessing the store directly.

Helper Description
$toast(msg, options?) Add a new toast. Options match the store add() method.
$success(msg) Shorthand for a success-styled toast.
$error(msg) Shorthand for a error-styled toast.

Toast Helper Examples

blade 
<div class="flex flex-wrap gap-4">
    <x-plume::button x-on:click="$toast('Basic message')">Toast</x-plume::button>
    <x-plume::button style="secondary" x-on:click="$success('Saved!')">Success</x-plume::button>
    <x-plume::button style="error" x-on:click="$error('Failed!')">Error</x-plume::button>
</div>

Clipboard

Programmatic access to the system clipboard.

Helper Description
$copy(text) Copies the provided string to the clipboard.

Clipboard Example

blade 
<div class="flex items-center gap-4">
    <x-plume::button style="outline"
        x-on:click="$copy('Hello Plume!'); $success('Copied to clipboard!')">
        Copy "Hello Plume!"
    </x-plume::button>
</div>