包简介

A powerful Livewire dialog system with stack management, multiple dialog types, and rich customization

README 文档

README

A powerful dialog system for Laravel Livewire with stack management, multiple dialog types (Modal, Sheet, Drawer), and rich customization options.

Features

Stack-Based Management - Open multiple dialogs with automatic history management
Multiple Dialog Types - Modal, Sheet (bottom slide), Drawer (side slide), Alert, Confirm
Configurable Animations - Fade, Scale, Slide-up, Slide-down, Slide-left, Slide-right
Position Options - Center, Top, Bottom, Left, Right
Preset System - Reusable configuration presets
Lifecycle Hooks - onOpening(), onClosing(), onClosed()
Fluent Configuration - DialogOptions::make()->size('lg')->dismissible()
Full Livewire 4 Support

Installation

composer require andisiahaan/livewire-dialog

Quick Start

1. Add Dialog Container

Add the Livewire directive to your layout (before </body>):

<html>
<body>
    <!-- Your content -->
    
    @livewire('dialog-container')
</body>
</html>

2. Create a Dialog Component

<?php

namespace App\Livewire;

use AndiSiahaan\Dialog\Components\BaseDialog;
use AndiSiahaan\Dialog\Support\DialogOptions;

class EditUser extends BaseDialog
{
    public $user;

    public function mount($userId)
    {
        $this->user = User::findOrFail($userId);
    }

    public function dialogOptions(): DialogOptions
    {
        return DialogOptions::make()
            ->size('lg')
            ->dismissOnClickOutside(false);
    }

    public function save()
    {
        $this->user->save();
        $this->dismiss();
    }

    public function render()
    {
        return view('livewire.edit-user');
    }
}

3. Open the Dialog

<!-- From HTML/JavaScript -->
<button onclick="DialogSystem.open('edit-user', { userId: 1 })">Edit User</button>

<!-- From Livewire component -->
<button wire:click="$dispatch('dialog:open', { component: 'edit-user', arguments: { userId: {{ $user->id }} }})">
    Edit User
</button>

Opening Dialogs

Via JavaScript

// Basic modal
DialogSystem.open('edit-user', { userId: 1 });

// With options
DialogSystem.open('edit-user', { userId: 1 }, { size: 'lg', animation: 'fade' });

Via Dialog Facade (PHP)

use AndiSiahaan\Dialog\Dialog;

// Modal
Dialog::modal('edit-user', ['userId' => $id]);

// Sheet (slides from bottom)
Dialog::sheet('select-option');

// Drawer (slides from side)
Dialog::drawer('navigation-menu', [], 'left');

// Alert
Dialog::alert('Success!', 'User has been saved.');

// Confirm
Dialog::confirm('Delete?', 'Are you sure you want to delete this user?');

Via Trait

use AndiSiahaan\Dialog\Concerns\InteractsWithDialog;

class UserList extends Component
{
    use InteractsWithDialog;

    public function editUser($id)
    {
        $this->openDialog('edit-user', ['userId' => $id]);
    }

    public function showSheet()
    {
        $this->openSheet('select-option');
    }

    public function deleteUser($id)
    {
        $this->confirmAction('Delete this user?', 'confirmDelete', ['userId' => $id]);
    }
}

Via Helper Functions

dialog('edit-user', ['userId' => $id]);
dialog_modal('edit-user', ['userId' => $id]);
dialog_sheet('select-option');
dialog_drawer('sidebar', [], 'left');
dialog_alert('Success!', 'Data saved.');
dialog_confirm('Delete?', 'Are you sure?');

Dismissing Dialogs

From View

<button wire:click="dismiss">Close</button>

From Component

public function save()
{
    $this->user->save();
    $this->dismiss();
}

// Force close all dialogs
public function cancel()
{
    $this->forceAll()->dismiss();
}

// Skip previous dialog
public function deleteAndGoBack()
{
    $this->skipPrevious()->dismiss();
}

// Dismiss with events
public function save()
{
    $this->dismissWithEvents([
        UserList::class => 'refreshList',
    ]);
}

Dialog Options

Override dialogOptions() in your dialog:

public function dialogOptions(): DialogOptions
{
    return DialogOptions::make()
        ->size('lg')                      // sm, md, lg, xl, 2xl-7xl, full
        ->position('center')              // center, top, bottom, left, right
        ->animation('scale')              // none, fade, scale, slide-up/down/left/right
        ->dismissible()                   // Enable dismiss
        ->dismissOnEscape(true)           // Close on Escape key
        ->dismissOnClickOutside(false)    // Close on backdrop click
        ->escapeClosesAll(true)           // Escape closes all dialogs
        ->destroyOnDismiss(true)          // Destroy component on close
        ->persistent();                   // Cannot be dismissed at all
}

Using Presets

Define presets in config/dialog.php:

'presets' => [
    'confirmation' => [
        'size' => 'sm',
        'animation' => 'scale',
        'dismiss_on_click_outside' => false,
    ],
    'fullscreen' => [
        'size' => 'full',
        'animation' => 'fade',
    ],
],

Use them in your dialog:

public function dialogOptions(): DialogOptions
{
    return DialogOptions::make()->preset('confirmation');
}

Lifecycle Hooks

Override these methods in your dialog component:

// Called when dialog is opening (return false to prevent)
protected function onOpening(): bool
{
    return true;
}

// Called when dialog is closing (return false to prevent)
protected function onClosing(): bool
{
    if ($this->formIsDirty) {
        return false; // Prevent closing
    }
    return true;
}

// Called after dialog has closed
protected function onClosed(): void
{
    // Cleanup logic
}

TailwindCSS Setup

Add the package views to your tailwind.config.js:

export default {
    content: [
        './vendor/andisiahaan/livewire-dialog/resources/views/**/*.blade.php',
        // ... your other paths
    ],
    safelist: [
        {
            pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
            variants: ['sm', 'md', 'lg', 'xl', '2xl']
        }
    ],
}

Configuration

Publish the config file:

php artisan vendor:publish --tag=dialog-config

Publish the views:

php artisan vendor:publish --tag=dialog-views

API Reference

Dialog Facade Methods

Method	Description
`Dialog::open($component, $args, $options)`	Open a dialog
`Dialog::modal($component, $args)`	Open a modal dialog
`Dialog::sheet($component, $args)`	Open a sheet (bottom slide)
`Dialog::drawer($component, $args, $position)`	Open a drawer (side slide)
`Dialog::alert($title, $message)`	Show an alert dialog
`Dialog::confirm($title, $message, $confirmText, $cancelText)`	Show a confirm dialog
`Dialog::dismiss()`	Dismiss current dialog
`Dialog::dismissAll()`	Dismiss all dialogs

JavaScript API

Method	Description
`DialogSystem.open(component, args, options)`	Open a dialog
`DialogSystem.dismiss(force)`	Dismiss current dialog
`DialogSystem.dismissAll()`	Dismiss all dialogs

Dialog Component Methods

Method	Description
`dismiss()`	Dismiss the dialog
`dismissWith($data)`	Dismiss with data
`dismissWithEvents($events)`	Dismiss and dispatch events
`replace($component, $args)`	Replace with another dialog
`forceAll()`	Chain: force close all
`skipPrevious($count)`	Chain: skip previous dialogs

License

MIT License. See LICENSE for more information.

andisiahaan/livewire-dialog 适用场景与选型建议

andisiahaan/livewire-dialog 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 0 次下载、GitHub Stars 达 0，最近一次更新时间为 2026 年 04 月 24 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「dialog」「modal」「sheet」「alpine」「drawer」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 andisiahaan/livewire-dialog 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 andisiahaan/livewire-dialog 我们能提供哪些服务？

定制开发 / 二次开发

基于 andisiahaan/livewire-dialog 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 andisiahaan/livewire-dialog 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

levmyshkin/micromodal 0

Fork from ghosh/Micromodal. Tiny, dependency-free javascript library for creating accessible modal dialogs.

sanzgrapher/filament-draggable-modal 18

Make Filament modals draggable.

yousefaman/filament-modal-repeater 17

A Filament form component that displays repeater items in a table with modal-based editing.

attila-erdos/elephant.io 0

Send events to a websocket real time engine though PHP

ahmed-hussain/hasmany-to-modal 1

A Laravel Nova field. To create a modal for creating or viewing related HasMany records without leaving the index page

steirico/kirby-plugin-custom-add-fields 36

Custom fields for Kirby's add dialog. This plugin allows to define the fields shown on the page add dialog in a page's blueprint.

andisiahaan/livewire-dialog

包简介

关键字：