danrocha · January 13, 2025 16:14 · Jan 13, 2025
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,117 @@
+Modal
+Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
+
+Edit profile
+<flux:modal.trigger name="edit-profile">
+    <flux:button>Edit profile</flux:button>
+</flux:modal.trigger>
+
+<flux:modal name="edit-profile" class="md:w-96 space-y-6">
+    <div>
+        <flux:heading size="lg">Update profile</flux:heading>
+        <flux:subheading>Make changes to your personal details.</flux:subheading>
+    </div>
+
+    <flux:input label="Name" placeholder="Your name" />
+
+    <flux:input label="Date of birth" type="date" />
+
+    <div class="flex">
+        <flux:spacer />
+
+        <flux:button type="submit" variant="primary">Save changes</flux:button>
+    </div>
+</flux:modal>
+Unique modal names
+If you are placing modals inside a loop, ensure that you are dynamically generating unique modal names. Otherwise, one modal trigger, will trigger all modals of that name on the page causing unexpected behavior.
+
+@foreach ($users as $user)
+    <flux:modal :name="'edit-profile-'.$user->id">
+        ...
+    </flux:modal>
+@enforeach
+Livewire methods
+In addition to triggering modals in your Blade templates, you can also control them directly from Livewire.
+
+Consider a "confirm" modal in your Blade template like so:
+
+<flux:modal name="confirm">
+    <!-- ... -->
+</flux:modal>
+You can now open and close this modal from your Livewire component using the following methods:
+
+<?php
+
+class ShowPost extends \Livewire\Component {
+    public function delete() {
+        // Control "confirm" modals anywhere on the page...
+        Flux::modal('confirm')->show();
+        Flux::modal('confirm')->close();
+
+        // Control "confirm" modals within this Livewire component...
+        $this->modal('confirm')->show();
+        $this->modal('confirm')->close();
+
+        // Closes all modals on the page...
+        Flux::modals()->close();
+    }
+}
+JavaScript methods
+You can also control modals from Alpine directly using Flux's magic methods:
+
+<button x-on:click="$flux.modal('confirm').show()">
+    Open modal
+</button>
+
+<button x-on:click="$flux.modal('confirm').close()">
+    Close modal
+</button>
+
+<button x-on:click="$flux.modals().close()">
+    Close all modals
+</button>
+Or you can use the window.Flux global object to control modals from any JavaScript in your application:
+
+// Control "confirm" modals anywhere on the page...
+Flux.modal('confirm').show()
+Flux.modal('confirm').close()
+
+// Closes all modals on the page...
+Flux.modals().close()
+Data binding
+If you prefer, you can bind a Livewire property directly to a modal to control its states from your Livewire component.
+
+Consider a confirmation modal in your Blade template like so:
+
+<flux:modal wire:model.self="showConfirmModal">
+    <!-- ... -->
+</flux:modal>
+It's important to add the .self modifier to the wire:model attribute to prevent nested elements from dispatching input events that would interfere with the state of the modal.
+You can now open and close this modal from your Livewire component by toggling the wire:model property.
+
+<?php
+
+class ShowPost extends \Livewire\Component {
+    public $showConfirmModal = false;
+
+    public function delete() {
+        $this->showConfirmModal = true;
+    }
+}
+One advantage of this approach is being able to control the state of the modal directly from the browser without making a server roundtrip:
+
+<flux:button x-on:click="$wire.showConfirmModal = true">Delete post</flux:button>
+Close events
+If you need to perform some logic after a modal closes, you can register a close listener like so:
+
+<flux:modal @close="someLivewireAction">
+    <!-- ... -->
+</flux:modal>
+You can also use wire:close or x-on:close if you prefer those syntaxes.
+Cancel events
+If you need to perform some logic after a modal is cancelled, you can register a cancel listener like so:
+
+<flux:modal @cancel="someLivewireAction">
+    <!-- ... -->
+</flux:modal>
+You can also use wire:cancel or x-on:cancel if you prefer those syntaxes.