63 support livewire alpine and tailwind as the default theme

.github/workflows/alert.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        php-version: ['8.1', '8.2']
+        php-version: ['8.2']
 
     steps:
     - uses: actions/checkout@v3

config/alert.php

@@ -30,9 +30,9 @@
 
     'icons' => [
         'success' => \Digitlimit\Alert\Icons\Success::class,
-        'error' => \Digitlimit\Alert\Icons\Error::class,
+        'error'   => \Digitlimit\Alert\Icons\Error::class,
         'warning' => \Digitlimit\Alert\Icons\Warning::class,
-        'info' => \Digitlimit\Alert\Icons\Info::class,
+        'info'    => \Digitlimit\Alert\Icons\Info::class,
     ],
 
     /*
@@ -46,54 +46,54 @@
     'tailwind' => [
         'types' => [
             'message' => [
-                'view' => 'alert-message',
-                'alert' => Types\Message::class,
+                'view'      => 'alert-message',
+                'alert'     => Types\Message::class,
                 'component' => Themes\Tailwind\Components\Message::class,
             ],
 
             'field' => [
-                'view' => 'alert-field',
-                'alert' => Types\Field::class,
+                'view'      => 'alert-field',
+                'alert'     => Types\Field::class,
                 'component' => Themes\Tailwind\Components\Field::class,
             ],
 
             'modal' => [
-                'view' => 'alert-modal',
-                'alert' => Types\Modal::class,
+                'view'      => 'alert-modal',
+                'alert'     => Types\Modal::class,
                 'component' => Themes\Tailwind\Components\Modal::class,
             ],
 
             'toastr' => [
-                'view' => 'alert-toastr',
-                'alert' => Types\Toastr::class,
+                'view'      => 'alert-toastr',
+                'alert'     => Types\Toastr::class,
                 'component' => Themes\Tailwind\Components\Toastr::class,
             ],
 
             'notify' => [
-                'view' => 'alert-notify',
-                'alert' => Types\Notify::class,
+                'view'      => 'alert-notify',
+                'alert'     => Types\Notify::class,
                 'component' => Themes\Tailwind\Components\Notify::class,
             ],
         ],
 
         'attributes' => [
             'buttons' => [
                 'action' => [
-                    'type' => 'button',
+                    'type'   => 'button',
                     '@click' => 'show = false;',
                 ],
                 'cancel' => [
-                    'type' => 'button',
+                    'type'   => 'button',
                     '@click' => 'show = false;',
                 ],
             ],
             'links' => [
                 'action' => [
-                    'type' => 'button',
+                    'type'   => 'button',
                     '@click' => 'show = false;',
                 ],
                 'cancel' => [
-                    'type' => 'button',
+                    'type'   => 'button',
                     '@click' => 'show = false;',
                 ],
             ],

resources/css/themes/tailwind/alert.css

@@ -34,34 +34,42 @@
   @apply inline-flex items-center justify-center h-10 px-4 py-2 text-sm font-medium text-blue-600 transition-colors rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 hover:underline;
 }
 
+.alert-position,
 .alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 }
 
+.alert-position.top-right,
 .alert-toastr-position.top-right {
   @apply top-0 right-0;
 }
 
+.alert-position.top-left,
 .alert-toastr-position.top-left {
   @apply top-0 left-0;
 }
 
+.alert-position.bottom-right,
 .alert-toastr-position.bottom-right {
   @apply bottom-0 right-0;
 }
 
+.alert-position.bottom-left,
 .alert-toastr-position.bottom-left {
   @apply bottom-0 left-0;
 }
 
+.alert-position.top-center,
 .alert-toastr-position.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
 
+.alert-position.bottom-center,
 .alert-toastr-position.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
 
+.alert-position.center,
 .alert-toastr-position.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }

resources/css/themes/tailwind/components/position.css

@@ -1,24 +1,32 @@
+.alert-position,
 .alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 }
+.alert-position.top-right,
 .alert-toastr-position.top-right {
   @apply top-0 right-0;
 }
+.alert-position.top-left,
 .alert-toastr-position.top-left {
   @apply top-0 left-0;
 }
+.alert-position.bottom-right,
 .alert-toastr-position.bottom-right {
   @apply bottom-0 right-0;
 }
+.alert-position.bottom-left,
 .alert-toastr-position.bottom-left {
   @apply bottom-0 left-0;
 }
+.alert-position.top-center,
 .alert-toastr-position.top-center {
   @apply top-0 left-1/2 transform -translate-x-1/2;
 }
+.alert-position.bottom-center,
 .alert-toastr-position.bottom-center {
   @apply bottom-0 left-1/2 transform -translate-x-1/2;
 }
+.alert-position.center,
 .alert-toastr-position.center {
   @apply top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
 }

resources/scss/themes/tailwind/components/position.scss

@@ -1,3 +1,4 @@
+.alert-position,
 .alert-toastr-position {
   @apply fixed px-2 mt-3 overflow-x-hidden z-50;
 

resources/views/themes/tailwind/components/toastr-classic.blade.php

@@ -0,0 +1,73 @@
+<div wire:ignore class="digitlimit-alert-toastr">
+    <div
+        class="alert-toastr-position"
+        :class="position"
+        x-data="{
+            position: 'top-right',
+            toasts: @entangle('alerts'),
+            dismiss(id) {
+                this.toasts = this.toasts.filter(n => n.id !== id);
+            }
+        }"
+    >
+        <template x-for="toast in toasts" :key="toast.id">
+            <div
+                    x-transition:enter="transition ease-in duration-200"
+                    x-transition:enter-start="transform opacity-0 translate-y-2"
+                    x-transition:enter-end="transform opacity-100"
+                    x-transition:leave="transition ease-out duration-500"
+                    x-transition:leave-start="transform translate-x-0 opacity-100"
+                    x-transition:leave-end="transform -translate-y-2 opacity-0"
+                    class="alert-toastr"
+                    :class="toast.level"
+                    x-init="
+                        position = toast.position
+
+                        if (toast.timeout) {
+                            setTimeout(() => dismiss(toast.id), toast.timeout);
+                        }
+                    "
+            >
+                <div class="flex flex-col w-full">
+                    <div class="flex items-center w-full px-1 my-2">
+                        <div class="self-start px-1">
+                            <svg x-show="toast.type == 'info'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+                            </svg>
+                            <svg x-show="toast.type == 'success'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+                            </svg>
+                            <svg x-show="toast.type == 'warning'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                            </svg>
+                            <svg x-show="toast.type == 'error'" class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+                            </svg>
+                        </div>
+
+                        <div class="py-3" x-text="toast.message"></div>
+
+                        <div class="self-start px-1">
+                            <button type="button" class="pt-0 px-1" @click="dismiss(toast.id)">
+                                <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                    <progress
+                            x-data="{ value : 0 }"
+                            x-init="
+                            setInterval(() => {
+                                if(value == 100) clearInterval(); else value+=1
+                            }, toast.timeout / 100)
+                        "
+                            max="100"
+                            :value="value"
+                            class="w-full h-1 p-0">
+                    </progress>
+                </div>
+            </div>
+        </template>
+    </div>
+</div>

src/Alert.php

@@ -43,11 +43,11 @@ public static function typeKey(string $type): string
      */
     public static function named(string $type, string $name, string $tag): ?HasName
     {
-        if (! Type::exists($type)) {
+        if (!Type::exists($type)) {
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
-        $tag = $tag . '.' . $name;
+        $tag = $tag.'.'.$name;
 
         return Session::get(
             SessionKey::key($type, $tag)
@@ -61,7 +61,7 @@ public static function named(string $type, string $name, string $tag): ?HasName
      */
     public static function tagged(string $type, string $tag): Collection
     {
-        if (! Type::exists($type)) {
+        if (!Type::exists($type)) {
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
@@ -79,7 +79,7 @@ public static function tagged(string $type, string $tag): Collection
      */
     public static function from(string $type, ...$args): AlertInterface
     {
-        if (! Type::exists($type)) {
+        if (!Type::exists($type)) {
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
@@ -152,7 +152,7 @@ public static function fromArray(array $alert): ?AlertInterface
 
         $type = $alert['type'] ?? null;
 
-        if (! $type || ! Type::exists($type)) {
+        if (!$type || !Type::exists($type)) {
             throw new Exception("Invalid alert type '$type'. Check the alert config");
         }
 
@@ -176,7 +176,7 @@ public static function has(string $type): bool
     {
         $types = Session::get(SessionKey::typeKey($type)) ?? [];
 
-        return ! empty($types);
+        return !empty($types);
     }
 
     /**

src/AlertServiceProvider.php

@@ -74,4 +74,4 @@ protected function registerMacros(): void
                 ->forget($tag);
         });
     }
-}
+}

src/Component/Button.php

@@ -116,7 +116,7 @@ public function getLabel(): ?string
      */
     public function isLink(): bool
     {
-        return ! empty($this->link);
+        return !empty($this->link);
     }
 
     /**
@@ -141,10 +141,10 @@ public function isCancel(): bool
     public function toArray(): array
     {
         return [
-            'id' => $this->getId(),
-            'name' => $this->getName(),
-            'label' => $this->getLabel(),
-            'link' => $this->getLink(),
+            'id'         => $this->getId(),
+            'name'       => $this->getName(),
+            'label'      => $this->getLabel(),
+            'link'       => $this->getLink(),
             'attributes' => $this->getAttributes(),
         ];
     }

src/Contracts/Closable.php

@@ -3,26 +3,26 @@
 namespace Digitlimit\Alert\Contracts;
 
 /**
- * Alert closable contract
+ * Alert closable contract.
  */
 interface Closable
 {
     /**
-     * Set the alert to be closable
+     * Set the alert to be closable.
      *
      * @return $this
      */
     public function closable(bool $closable): self;
 
     /**
-     * Set the alert to be not closable
+     * Set the alert to be not closable.
      *
      * @return $this
      */
     public function notClosable(): self;
 
     /**
-     * Check if the alert is closable
+     * Check if the alert is closable.
      */
     public function isClosable(): bool;
 }