1.35.0

app/Enums/Examples/Ui/Banner.php

@@ -198,6 +198,35 @@ public function save()
     }
     HTML;
 
+    public const CONTROLLERS = <<<'HTML'
+    use Illuminate\Http\Request;
+    use TallStackUi\Traits\Interactions;
+
+    class PaymentController extends Controller
+    {
+        use Interactions; // [tl! highlight]
+
+        public function index()
+        {
+            return view('payment.index', [
+                //
+            ]);
+        }
+
+        public function update(Request $request)
+        {
+            // ...
+
+            $this->banner() // [tl! highlight:5]
+                ->success('...')
+                ->close()
+                ->enter(seconds: 3)
+                ->leave(seconds: 10)
+                ->send();
+        }
+    }
+    HTML;
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->banner()

app/Enums/Examples/Ui/Dialog.php

@@ -111,6 +111,54 @@ public function save(): void
     </div>
     HTML;
 
+    public const HOOKS = <<<'HTML'
+    public function save(): void
+    {
+        $this->dialog()
+            ->success('...')
+            ->hooks([
+                // When using `success()`, `error()`, `warning()`, `info()` and pressing the OK button.
+                'ok' => [
+                    'method' => 'method',
+                    // The parameters can be anything you want: arrays, strings, int.
+                    'params' => ['param1', 'param2']
+                ],
+                // When close the dialog by clicking on the "x" button.
+                'close' => [
+                    'method' => 'method',
+                    'params' => ['param1', 'param2']
+                ],
+                // When close the dialog by dismiss (clicking out of the dialog).
+                'dismiss' => [
+                    'method' => 'method',
+                    'params' => ['param1', 'param2']
+                ],
+            ])
+            ->send();
+    }
+    HTML;
+
+    public const HOOKS_CALLABLE = <<<'HTML'
+    public function save(): void
+    {
+        $this->dialog()
+            ->success('...')
+            ->hooks([
+                'ok' => [
+                    'method' => 'method',
+                    'params' => fn () => ['param1', 'param2'] // [tl! highlight]
+                ],
+                'dismiss' => [
+                    'method' => 'method',
+                    'params' => function () { // [tl! highlight:2]
+                        return ['param1', 'param2'];
+                    }
+                ],
+            ])
+            ->send();
+    }
+    HTML;
+
     public const JAVASCRIPT = <<<'HTML'
     <div>
         <x-button color="green" onclick="show()">Success</x-button>
@@ -189,6 +237,32 @@ public function save()
     }
     HTML;
 
+    public const CONTROLLERS = <<<'HTML'
+    use Illuminate\Http\Request;
+    use TallStackUi\Traits\Interactions;
+
+    class PaymentController extends Controller
+    {
+        use Interactions; // [tl! highlight]
+
+        public function index()
+        {
+            return view('payment.index', [
+                //
+            ]);
+        }
+
+        public function update(Request $request)
+        {
+            // ...
+
+            $this->dialog() // [tl! highlight:2]
+                ->success('...')
+                ->send();
+        }
+    }
+    HTML;
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->dialog()

app/Enums/Examples/Ui/Stats.php

@@ -24,6 +24,14 @@ class Stats
     <x-stats href="https://tallstackui.com" target="_blank" :number="100" />
     HTML;
 
+    public const NAVIGATE = <<<'HTML'
+    <!-- <a href="https://tallstackui.com" wire:navigate ...> -->
+    <x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate />
+
+    <!-- <a href="https://tallstackui.com" wire:navigate.hover ...> -->
+    <x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate-nover />
+    HTML;
+
     public const ICONS = <<<'HTML'
     <x-stats icon="swatch" :number="100" />
     <x-stats icon="swatch" :number="100" light />

app/Enums/Examples/Ui/Tab.php

@@ -41,6 +41,23 @@ class Tab
     </x-tab>
     HTML;
 
+    public const EVENTS = <<<'HTML'
+    <x-tab selected="Invoices" x-on:navigate="alert($event.detail.select)">
+        <x-tab.items tab="Invoices">
+            <x-slot:right>
+                <x-icon name="document-text" class="w-5 h-5" />
+            </x-slot:right>
+            Invoices
+        </x-tab.items>
+        <x-tab.items tab="Transactions">
+            <x-slot:left>
+                <x-icon name="currency-dollar" class="w-5 h-5" />
+            </x-slot:left>
+            Transactions
+        </x-tab.items>
+    </x-tab>
+    HTML;
+
     public const WIREABLE = <<<'HTML'
     <!--  Livewire string property: $tab - initial value: "Tab 1" -->
 

app/Enums/Examples/Ui/Toast.php

@@ -148,6 +148,49 @@ public function save(): void
     </div>
     HTML;
 
+    public const HOOKS = <<<'HTML'
+    public function save(): void
+    {
+        $this->toast()
+            ->success('...')
+            ->hooks([
+                // When close the toast by clicking on the "x" button.
+                'close' => [
+                    'method' => 'method',
+                    // The parameters can be anything you want: arrays, strings, int.
+                    'params' => ['param1', 'param2']
+                ],
+                // When the toast is automatically closed by the timeout.
+                'timeout' => [
+                    'method' => 'method',
+                    'params' => ['param1', 'param2']
+                ],
+            ])
+            ->send();
+    }
+    HTML;
+
+    public const HOOKS_CALLABLE = <<<'HTML'
+    public function save(): void
+    {
+        $this->toast()
+            ->success('...')
+            ->hooks([
+                'close' => [
+                    'method' => 'method',
+                    'params' => fn () => ['param1', 'param2'] // [tl! highlight]
+                ],
+                'timeout' => [
+                    'method' => 'method',
+                    'params' => function () { // [tl! highlight:2]
+                        return ['param1', 'param2'];
+                    }
+                ],
+            ])
+            ->send();
+    }
+    HTML;
+
     public const JAVASCRIPT = <<<'HTML'
     <div>
         <x-button color="green" onclick="show()">Success</x-button>
@@ -226,6 +269,32 @@ public function save()
     }
     HTML;
 
+    public const CONTROLLERS = <<<'HTML'
+    use Illuminate\Http\Request;
+    use TallStackUi\Traits\Interactions;
+
+    class PaymentController extends Controller
+    {
+        use Interactions; // [tl! highlight]
+
+        public function index()
+        {
+            return view('payment.index', [
+                //
+            ]);
+        }
+
+        public function update(Request $request)
+        {
+            // ...
+
+            $this->toast() // [tl! highlight:2]
+                ->success('...')
+                ->send();
+        }
+    }
+    HTML;
+
     public const PERSONALIZATION = <<<'HTML'
     TallStackUi::personalize()
         ->toast()