toast & dialog new features

tallstackui · Aug 14, 2024 · 4a9b089 · 4a9b089
1 parent b433ecb
commit 4a9b089
Show file tree

Hide file tree

Showing 7 changed files with 237 additions and 10 deletions.
diff --git a/app/Enums/Examples/Ui/Dialog.php b/app/Enums/Examples/Ui/Dialog.php
@@ -111,6 +111,53 @@ 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',
+                    '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 +236,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()

diff --git a/app/Enums/Examples/Ui/Tab.php b/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" -->
 

diff --git a/app/Enums/Examples/Ui/Toast.php b/app/Enums/Examples/Ui/Toast.php
@@ -148,6 +148,48 @@ 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',
+                    '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 +268,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()

diff --git a/contents/on-this-page.json b/contents/on-this-page.json
@@ -446,8 +446,9 @@
     "docs.ui.tab": {
         "0": "Basic Usage",
         "1": "Slots",
-        "2": "Wireable",
-        "3": "Live Wireable"
+        "2": "Events",
+        "3": "Wireable",
+        "4": "Live Wireable"
     },
     "docs.ui.table": {
         "0": "Concept",
@@ -484,10 +485,12 @@
         "1": "Basic Usage",
         "2": "Confirmations",
         "4": "Events",
-        "5": "JavaScript API",
-        "6": "Color Personalization",
-        "7": "Display After Redirects",
-        "8": "Configurations"
+        "5": "Hooks",
+        "6": "JavaScript API",
+        "7": "Color Personalization",
+        "8": "Display After Redirects",
+        "9": "Dispatching via Controllers",
+        "10": "Configurations"
     },
     "docs.interaction.toast": {
         "0": "Configuration",
@@ -496,10 +499,12 @@
         "3": "Time Control",
         "4": "Expandable",
         "5": "Events",
-        "6": "JavaScript API",
-        "7": "Color Personalization",
-        "8": "Display After Redirects",
-        "9": "Configurations"
+        "6": "Hooks",
+        "7": "JavaScript API",
+        "8": "Color Personalization",
+        "9": "Display After Redirects",
+        "10": "Dispatching via Controllers",
+        "11": "Configurations"
     },
     "docs.configuration": {
         "0": "Configuration File",

diff --git a/resources/views/documentation/interactions/dialog.blade.php b/resources/views/documentation/interactions/dialog.blade.php
@@ -45,8 +45,20 @@
             We recommend that you use listeners in one place, whether in the base layout or once per component.
         </x-warning>
     </x-section>
+    <x-section title="Hooks" new>
+        <p>
+            <u>Starting from version 1.35.0</u> you can now use hooks to perform actions:
+        </p>
+        <x-code :contents="$hooks" disable-copy />
+        <p>Optionally, you can also set <x-block>params</x-block> as closure:</p>
+        <x-code :contents="$hooksCallable" disable-copy />
+        <p><u>The closure will be resolved using Laravel container</u> and the result will be passed to the hook.</p>
+    </x-section>
     <x-section title="JavaScript API" description="JavaScript API to interact with Dialog.">
         <x-code language="blade" :contents="$javascript" disable-copy />
+        <x-warning>
+            The dialog hooks are unavailable in the JavaScript API.
+        </x-warning>
     </x-section>
     <x-section title="Color Personalization">
         <p>
@@ -70,5 +82,16 @@
             request, but yes stored temporarily in the session and displayed in the next request.
         </p>
     </x-section>
+    <x-section title="Dispatching via Controllers" new>
+        <p>
+            <u>Starting from version 1.35.0</u> you can trigger a dialog via controllers.
+        </p>
+        <x-code :contents="$controllers" disable-copy />
+        <p>
+            Because certain methods were created and designed to be used with Livewire components,
+            methods like <x-block>confirm</x-block>, <x-block>cancel</x-block> and <x-block>hooks</x-block>
+            will be unavailable and will throw exceptions when you try to use them in controllers.
+        </p>
+    </x-section>
     <x-available-configuration />
 </x-layout>
diff --git a/resources/views/documentation/interactions/toast.blade.php b/resources/views/documentation/interactions/toast.blade.php
@@ -64,8 +64,20 @@
             We recommend that you use listeners in one place, whether in the base layout or once per component.
         </x-warning>
     </x-section>
+    <x-section title="Hooks" new>
+        <p>
+            <u>Starting from version 1.35.0</u> you can now use hooks to perform actions:
+        </p>
+        <x-code :contents="$hooks" disable-copy />
+        <p>Optionally, you can also set <x-block>params</x-block> as closure:</p>
+        <x-code :contents="$hooksCallable" disable-copy />
+        <p><u>The closure will be resolved using Laravel container</u> and the result will be passed to the hook.</p>
+    </x-section>
     <x-section title="JavaScript API" description="JavaScript API to interact with Toast.">
         <x-code language="blade" :contents="$javascript" disable-copy />
+        <x-warning>
+            The toast hooks are unavailable in the JavaScript API.
+        </x-warning>
     </x-section>
     <x-section title="Color Personalization">
         <p>
@@ -89,5 +101,16 @@
             request, but yes stored temporarily in the session and displayed in the next request.
         </p>
     </x-section>
+    <x-section title="Dispatching via Controllers" new>
+        <p>
+            <u>Starting from version 1.35.0</u> you can trigger a toast via controllers.
+        </p>
+        <x-code :contents="$controllers" disable-copy />
+        <p>
+            Because certain methods were created and designed to be used with Livewire components,
+            methods like <x-block>confirm</x-block>, <x-block>cancel</x-block> and <x-block>hooks</x-block>
+            will be unavailable and will throw exceptions when you try to use them in controllers.
+        </p>
+    </x-section>
     <x-available-configuration />
 </x-layout>
diff --git a/resources/views/documentation/ui/tab.blade.php b/resources/views/documentation/ui/tab.blade.php
@@ -51,6 +51,24 @@
             </x-tab>
         </x-preview>
     </x-section>
+    <x-section title="Events">
+        <x-preview language="blade" :background="false" :contents="$events">
+            <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>
+        </x-preview>
+    </x-section>
     <x-section title="Wireable" description="An option to control the tab via Livewire.">
         <x-preview language="blade" :background="false" :contents="$wireable">
             <livewire:documentation.ui.tabs />