limatheus/livewire-notifier-ext

无任何依赖（除了 TALL-stack）的简单 Livewire 通知系统。

维护者

详细信息

github.com/limatheus/livewire-notifier-ext

主页

源代码

安装: 61

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 4

1.0.8 2021-08-18 20:10 UTC

Requires

Requires (Dev)

MIT 91ef8efe2a876ca046587fdd6b9673cac71dd3cc

growllaraveltoastlivewireLivewireNotifier

This package is auto-updated.

Last update: 2024-09-19 02:39:05 UTC

README

Latest Stable Version run-tests Total Downloads License

Livewire Notifier 是一个简单的通知系统，除了 TALL-stack（Tailwind CSS、Alpine.JS、Laravel 和 Livewire）外没有其他依赖。

Livewire Notifier

要求

确保已正确安装 Livewire 和 Alpine.JS。最简单的方法是安装带有 Livewire stack 的 Laravel Jetstream（安装命令 php artisan jetstream:install livewire）。

Alpine.JS 必须导入到 resources/js/app.js 包中

import 'alpinejs'

Livewire 脚本和样式标签必须存在于布局文件中

…
<head>
…
    <livewire:styles/>
…
</head>
<body>
…
    <livewire:scripts/>
</body>
</html>

安装

通过 Composer

$ composer require codespb/livewire-notifier

进行安装过程

$ php artisan livewire-notifier:install

之后，包配置可以在 config/livewire-notifier.php 中找到，视图在 resources/views/vendor/livewire-notifier/。

这是必需的，因为需要将 Tailwind 配置扩展到新的 purging 路径。

否则您将看不到正确样式的消息。

Livewire Notifier

用法

将 Livewire 组件 <livewire:notifier/> 放入应用程序布局中。确保将其插入到正确上下文中，因为它可能会被绝对定位。

现在您可以从前端和后端使用它。

消息选项

在后台（来自任何 Livewire 组件）添加的消息必须具有 array 类型。在前端（来自 JavaScript）添加的消息必须具有 object 类型。

$message = [
        'text' => __('Post is saved!'),
        'title' => '', // Optional
        'type' => 'success', // Optional. By default: success | optional: error (or fail), warning (or warn), info
        // you can find all types options in the config file
        'icon' => '', // Optional. It replaces the default type icon. Can be pure html or svg code

        // Attention! The following options override ones from the config file

        'duration' => 5000, // Optional. The time of message to be shown. To show infinitely set to 0
        'msgClass' =>  'bg-gradient-to-r from-green-200 to-green-300', // Optional. Tailwind class for message container
        'progressClass' =>  'bg-green-500', // Optional. Tailwind class for progress bar. If null progress bar won't be shown
        'closable' => false, // Optional. True by default. Whether message is closable by click on message or Esc key press on window
    ]
let message = {
    text: 'Post is saved!'
}

后台

Livewire 事件

从任何 Livewire 组件推送 emit 触发器以渲染新消息。

public function save(){
    ...
    $this->emitTo('notifier','message',['text'=>__('The post is saved!')]);
}

会话闪存变量

public function save(){
    ...
    session()->flash('notifier',['text'=>__('The post is saved!')]);
    return $this->redirect(route('posts'));
}

前端

从 JavaScript 添加新消息

Livewire.emitTo('notifier','message',{text:'The post is saved!'})

示例

尝试将以下代码（在安装了 Laravel Jetstream w/Livewire stack 的环境中）放入其中

<div class="flex flex-row space-x-4">
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Success',type:'success'})">Success</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Error',type:'error'})">Error</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Warning',type:'warning'})">Warning</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Info',type:'info'})">Info</x-jet-button>
    <x-jet-button x-data="{}" @click="Livewire.emitTo('notifier','message',{text:'Default',type:'default'})">Default</x-jet-button>
</div>

配置文件

在执行 php artisan livewire-notifier:install 命令后，配置文件将被发布到 config/livewire-notifier.php。在那里，您可以更改一些值以进行自定义。

<?php
return [
    // Messages container positioning
    'positionClass' => 'absolute top-0 right-0',
    // Default message Tailwind stylinh
    'defaultMsgClass' => 'w-80 rounded-xl shadow-xl',
    // Time of each message to be shown by default
    'duration' => 2200,
    // Messages types
    'types' => [
        'success' => [
            // 'msgClass'=>'bg-green-200',
            'msgClass'=>'bg-gradient-to-r from-green-200 to-green-300',
            'progressClass' => 'bg-green-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.success',
        ],
        'error' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'fail' => [
            // 'msgClass'=>'bg-red-200',
            'msgClass'=>'bg-gradient-to-r from-red-200 to-red-300',
            'progressClass' => 'bg-red-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warning' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'warn' => [
            // 'msgClass'=>'bg-yellow-200',
            'msgClass'=>'bg-gradient-to-r from-yellow-200 to-yellow-300',
            'progressClass' => 'bg-yellow-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.error',
        ],
        'info' => [
            // 'msgClass'=>'bg-blue-200',
            'msgClass'=>'bg-gradient-to-r from-blue-200 to-blue-300',
            'progressClass' => 'bg-blue-500',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ],
        'default' => [
            // 'msgClass'=>'bg-gray-200',
            'msgClass'=>'bg-gradient-to-r from-gray-200 to-gray-300',
            'progressClass' => 'bg-gray-700',
            // View for icon
            'icon' => 'livewire-notifier::icons.info',
        ]
    ]
];

故障排除

您的消息没有任何样式？请运行 livewire-notifier:install 命令以发布视图。因此 Laravel Mix 编译器将找到包 Blade-views 并正确地清除 CSS。

更新

像所有其他包一样使用 composer update 进行更新。务必运行 livewire-notifier:install 以更新已发布的视图。

变更日志

有关最近更改的更多信息，请参阅 changelog。

测试

$ composer test

贡献

有关详细信息和工作列表，请参阅 contributing.md。

安全性

如果您发现任何与安全性相关的问题，请通过作者电子邮件而不是使用问题跟踪器来报告。

鸣谢

许可

有关更多信息，请参阅 许可文件。