Alpine Components for Laravel

alert.blade.php

@props(['message' => 'THis is a demo msg', 'type' => 'danger', 'duration' => 5000, 'position' => 'bottom-center', 'autoDismiss' => true])

<div x-data="alert('{{ $message }}', '{{ $type }}', '{{ $duration }}', '{{ $position }}', '{{ $autoDismiss }}')" x-on:click="dismissAlert" x-id="['alert']"
    :class="{
        'text-light-area-color dark:text-light-area-color-dark bg-dark-area-color dark:bg-dark-area-color-dark': type ===
            'basic',
        'text-white bg-red-500': type ===
            'danger',
        'text-white bg-green-500': type ===
            'success',
        'text-white bg-blue-500': type ===
            'info',
        'text-white bg-yellow-500': type ===
            'warning',
        'top-5 md:top-10 mx-auto left-5 md:left-10': position ===
            'top-left',
        'top-5 md:top-10 mx-auto left-[50%] translate-x-[-50%]': position ===
            'top-center',
        'top-5 md:top-10 mx-auto right-5 md:right-10': position ===
            'top-right',
        'bottom-5 md:bottom-10 mx-auto left-[50%] translate-x-[-50%]': position ===
            'center',
        'bottom-5 md:bottom-10 mx-auto left-5 md:left-10': position ===
            'bottom-left',
        'bottom-5 md:bottom-10 mx-auto left-[50%] translate-x-[-50%]': position ===
            'bottom-center',
        'bottom-5 md:bottom-10 mx-auto right-5 md:right-10': position ===
            'bottom-right',
        'mt-5 px-5 py-3 max-w-[80%] cursor-pointer flex justify-between items-center leading-normal fixed rounded-lg': true,
    }"
    role="alert">
    <p x-text="message"></p>
    @svg('heroicon-s-x', 'ml-10')
</div>

app.js

/**
 * Alpine is a lightweight JS framework that will handle all element states
 */
import Alpine from "alpinejs";

// import the Alpine data for the alert component
import { alert } from './components'

// optional but useful
window.Alpine = Alpine;

//register any plugins here

// add all global Alpine.data methods here
Alpine.data('alert', alert);

Alpine.start();

components.js

export let alert = (message = 'Success', type = 'default', duration = 5000, position = 'bottom-center', autoDismiss = true) => ({
    init() {
        this.message = message;
        this.type = type;
        this.duration = duration;
        this.position = position;
        autoDismiss && this.autoDismissAlert();
    },
    message: 'Success',
    type: 'default',
    duration: 5000,
    position: 'bottom-center',
    dismissAlert() {
        this.$root.remove();
    },
    autoDismissAlert() {
        setTimeout(function (el) {
            console.log('auto dismiss me please', el);
            el && el.remove();
        }, this.duration, this.$root);
    },

})

usage.alert.blade.php

{{-- default alert. message: string(default: 'Success') --}}
<x-alert :message="{{ 'Successful' }}" />

{{-- type: string(default: 'basic') = 'basic' | 'danger' | 'success' | 'info' | 'warning' --}}
<x-alert :message="{{ 'Error' }}" :type="{{ 'danger' }}" />

{{-- duration: number(default: 5000) in milliseconds --}}
<x-alert :message="{{ 'Successful' }}" :duration="{{ 5000 }}" />

{{-- position: string(default: 'bottom-center') = 'top-left' | 'top-center' | 'top-right' | 'center' | 'bottom-left' | 'bottom-center' | 'bottom-right'
 --}}
<x-alert :message="{{ 'Successful' }}" :position="{{ 'bottom-center' }}" />

{{-- auto-dismiss: boolean(default:true) --}}
<x-alert :message="{{ 'Successful' }}" :auto-dismiss="{{ true }}" />

{{-- all props --}}
<x-alert :message="{{ 'Successful' }}" :type="{{ 'warning' }}" :duration="{{ 5000 }}" :position="{{ 'bottom-center' }}" :auto-dismiss="{{ true }}" />