Last active
June 20, 2022 23:37
-
-
Save Parables/549a51f6f579cd2ee1957b984a20c297 to your computer and use it in GitHub Desktop.
Alpine Components for Laravel
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
}, | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{-- 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 }}" /> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment