├── CHANGELOG.md ├── Installation-testing.md ├── LICENSE.md ├── README.md ├── composer.json ├── config └── tall-interactive.php ├── resources └── views │ ├── .gitkeep │ ├── components │ ├── actionables-manager.blade.php │ ├── forms │ │ ├── button-actions.blade.php │ │ ├── controls │ │ │ ├── base.blade.php │ │ │ ├── classic.blade.php │ │ │ └── minimal.blade.php │ │ └── form-container.blade.php │ ├── inline-form.blade.php │ ├── modal.blade.php │ └── slide-over.blade.php │ └── livewire │ ├── actionables-manager.blade.php │ ├── inline-form.blade.php │ ├── modal.blade.php │ └── slide-over.blade.php ├── src ├── ActionablesServiceProvider.php ├── Actions │ └── ButtonAction.php ├── Forms │ └── Form.php ├── Livewire │ ├── Actionable.php │ ├── ActionablesManager.php │ ├── Concerns │ │ ├── CanBeDismissed.php │ │ ├── CanCallForm.php │ │ ├── Closeable.php │ │ ├── HasControls.php │ │ ├── HasDescription.php │ │ ├── HasDesign.php │ │ ├── HasEvents.php │ │ ├── HasForm.php │ │ ├── HasLivewire.php │ │ ├── HasMaxWidth.php │ │ ├── HasModel.php │ │ ├── HasSlot.php │ │ ├── HasState.php │ │ ├── HasTitle.php │ │ ├── HasValidation.php │ │ ├── ReceivesForm.php │ │ ├── RegisterListeners.php │ │ └── RegisterMessages.php │ ├── InlineForm.php │ ├── Modal.php │ └── SlideOver.php └── View │ └── Components │ ├── ActionablesManager.php │ ├── Forms │ ├── Controls │ │ ├── Base.php │ │ ├── Classic.php │ │ └── Minimal.php │ └── FormContainer.php │ ├── InlineForm.php │ ├── Modal.php │ └── SlideOver.php └── todo /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to `tall-interactive` will be documented in this file. 4 | 5 | ## 0.10.0 - 2024-03-14 6 | 7 | - Add Laravel 11 Compatibility. 8 | 9 | ## 0.9.0 - 2023-02-17 10 | 11 | - Laravel 10 support in #19 12 | 13 | ## 0.8.15 - 2023-01-18 14 | 15 | - Add CSS classes to modal, slide-over & inline form (#17) 16 | 17 | ## 0.8.14 - 2022-12-16 18 | 19 | - Fix for server error when clicking multiple times on close buttons. 20 | 21 | ## 0.8.13 - 2022-11-28 22 | 23 | - Prevent escaping button labels. 24 | 25 | ## 0.8.12 - 2022-09-09 26 | 27 | – Fix remove unused trait 28 | 29 | ## 0.8.11 - 2022-09-09 30 | 31 | – Remove unnecessary dependency. 32 | 33 | ## 0.8.10 - 2022-08-19 34 | 35 | – Fix type-error bug after Filament refactored internal implementation. 36 | 37 | ## 0.8.9 - 2022-08-15 38 | 39 | – Add ButtonAction color support. 40 | – Add CSS button classes. 41 | 42 | ## 0.8.8 - 2022-06-24 43 | 44 | – Add support for hiding ButtonActions. 45 | 46 | ## 0.8.7 - 2022-06-03 47 | 48 | – Fix: trying to close Inline Form on submit. 49 | 50 | ## 0.8.6 - 2022-03-17 51 | 52 | - Fix submitting slots with Livewire component. 53 | 54 | ## 0.8.5 - 2022-03-17 55 | 56 | - Feature: Add $params to included Livewire components 57 | 58 | ## 0.8.4 - 2022-03-17 59 | 60 | - Fix: receive Livewire parameter in components. 61 | 62 | ## 0.8.3 - 2022-03-10 63 | 64 | - Update modal fix on mobile 65 | 66 | ## 0.8.2 - 2022-03-03 67 | 68 | - Remove unused files 69 | 70 | ## 0.8.1 - 2022-02-25 71 | 72 | - Fixes for mobile design with multiple / longer buttons in the modal and slideover 73 | 74 | ## 0.8.0 - 2022-02-24 75 | 76 | - Add support for adding a `fill()` method on the form class, which will be passed to `$this->form->fill()` 77 | - Rename parameter `$formData` to `$state` 78 | - Rename method `submitForm()` to `submit()` 79 | 80 | ## 0.7.0 - 2022-02-24 81 | 82 | - Add dark mode support to the modal component 83 | 84 | ## 0.6.3 - 2022-02-23 85 | 86 | - DOM diffing issues 87 | 88 | ## 0.6.2 - 2022-02-23 89 | 90 | - Update wire:key implementation 91 | 92 | ## 0.6.1 - 2022-02-23 93 | 94 | - Fixes 95 | 96 | ## 0.6.0 - 2022-02-23 97 | 98 | - Refactoring, move everything to `$data` property 99 | 100 | ## 0.5.0 - 2022-02-22 101 | 102 | - Add support for additional button actions 103 | 104 | ## 0.4.3 - 2022-02-21 105 | 106 | - Fix overflow/border-radius on small modals 107 | 108 | ## 0.4.2 - 2022-02-16 109 | 110 | - Add `key()` directives to modal/slide-over to fix DOM diffing issues 111 | 112 | ## 0.4.1 - 2022-02-16 113 | 114 | - Update the order of the `mount()` call 115 | 116 | ## 0.4.0 - 2022-02-16 117 | 118 | - All methods on the form class are not static anymore. 119 | - Allow storing data on the form class. 120 | - Add new parameters to dependency injection functionality. 121 | - Update readme with better examples. 122 | - Add support for `mount()` method on the form class, which is only called once. 123 | - Method `initialize()` dropped in favour of `mount()`. 124 | - Method `onOpen()` added to receive event parameters. 125 | 126 | ## 0.3.0 - 2022-02-10 127 | 128 | - Fix: let `:close` event also open the last actionable again 129 | - Feat: increased return type support 130 | - Feat: allow child modals to force close all the other modals 131 | 132 | ## 0.2.2 - 2022-01-28 133 | 134 | - Fix: allow receiving the `$formVersion` parameter 135 | 136 | ## 0.2.1 - 2022-01-27 137 | 138 | - Fix z-index overlay problems 139 | 140 | ## 0.2.0 - 2022-01-27 141 | 142 | - The `$formData` parameter in the `submitForm()` method is now a `Illuminate\Support\Collection` 143 | 144 | ## 0.1.0 - 2022-01-26 145 | 146 | - Pre-release 147 | -------------------------------------------------------------------------------- /Installation-testing.md: -------------------------------------------------------------------------------- 1 | 2 | ## Installation for local testing 3 | 4 | The fastest way to get this up-and-running-locally is to create a new plain Laravel installation, for example: 5 | 6 | ```bash 7 | laravel new ... 8 | ``` 9 | 10 | For the package to work, you should have Livewire, Tailwind, AlpineJS and Filament Forms installed. I also created a package with an artisan command to install all that for your: 11 | 12 | ```bash 13 | composer require ralphjsmit/tall-install 14 | composer dump-autoload 15 | php artisan tall-install 16 | ``` 17 | 18 | If you're testing it on an existing project, you should install the dependencies manually. 19 | 20 | Next, you need to install the package. Add this to your `composer.json` file to test it locally: 21 | ```json 22 | "repositories": [ 23 | { 24 | "type": "path", 25 | "url": "ADD PATH HERE" 26 | } 27 | ] 28 | ``` 29 | 30 | And require it like this: 31 | ```json 32 | "ralphjsmit/tall-interactive": "@dev", 33 | ``` 34 | 35 | Next, run `composer install` to pull in the package. 36 | 37 | Now, add the following code in a Blade file that is loaded on every page, e.g. in your `layouts/app.blade.php`: 38 | ``` 39 | 40 | ``` 41 | 42 | Finally, add the following to the `content` key of your `tailwind.config.js` file: 43 | 44 | ```js 45 | module.exports = { 46 | content: [ 47 | './vendor/ralphjsmit/tall-interactive/resources/views/**/*.blade.php', 48 | // All other locations 49 | ], 50 | /// 51 | ``` 52 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) ralphjsmit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![tall-interactive](https://github.com/ralphjsmit/tall-interactive/blob/main/docs/images/tall-interactive.jpg) 2 | 3 | # Create forms, modals and slide-overs with ease. 4 | 5 | This package allows you to create beautiful forms, modals and slide-overs with ease. It utillises the great Filament Forms package for creating the forms and the awesome TALL-stack for the design. 6 | 7 | > [!IMPORTANT] 8 | > This package will only work for Filament V2 and Livewire V2. Since Filament V3, the better way to implement modals and slide-overs is by utilising the new [Filament Actions](https://filamentphp.com/docs/3.x/actions/installation). 9 | 10 | 11 | [![Run tests](https://github.com/ralphjsmit/tall-interactive/actions/workflows/run-tests.yml/badge.svg?branch=main)](https://github.com/ralphjsmit/tall-interactive/actions/workflows/run-tests.yml) 12 | 13 | ## Installation 14 | 15 | You can install the package via composer: 16 | 17 | ```bash 18 | composer require ralphjsmit/tall-interactive 19 | ``` 20 | 21 | ### Setup 22 | 23 | The package requires the **following dependencies**: 24 | 25 | - Laravel Livewire 26 | - Alpine.js 27 | - Tailwind CSS 28 | - Filament Forms 29 | - Toast notification (not required, but very handy) 30 | 31 | You can install them **manually** or skip to the [**Faster installation section**](#faster-installation) for new projects. 32 | 33 | #### Laravel Livewire 34 | 35 | Please follow the [**Laravel Livewire installation instructions**](https://laravel-livewire.com/docs/2.x/alpine-js#installation) if you haven't done so yet. 36 | 37 | #### Alpine.js, Tailwind, Filament Forms 38 | 39 | Please follow the [**Filament Forms installation instructions**](https://filamentadmin.com/docs/2.x/forms/installation) to install Alpine.js, Tailwind CSS and Filament Forms. 40 | 41 | Add the following to the `content` key of your `tailwind.config.js` file: 42 | 43 | ```js 44 | module.exports = { 45 | content: [ 46 | './vendor/ralphjsmit/tall-interactive/resources/views/**/*.blade.php', 47 | // All other locations 48 | ], 49 | /// 50 | ``` 51 | 52 | #### Toast notifications 53 | 54 | Using the [Toast TALL notifications package](http://github.com/usernotnull/tall-toasts) is not required, but it is recommended if you need to send notifications to your users, for example on submitting a form. 55 | 56 | If you decide to use Toast, please follow their [**setup instructions**](https://github.com/usernotnull/tall-toasts#setup). 57 | 58 | #### Tall Interactive 59 | 60 | After installing the package and setting up the dependencies, **add the following code to your Blade** files so that it's **loaded on every page**. For example in your `layouts/app.blade.php` view: 61 | 62 | ```blade 63 | 64 | ``` 65 | 66 | **Now you're ready to go and build your first actionables!** 67 | 68 | > #### Faster installation 69 | > 70 | > If you want a faster installation process, you could check out my [ralphjsmit/tall-install](https://github.com/ralphjsmit/tall-install) package. This package provides you with a simple command that runs the installation process for all the above dependencies in a plain Laravel installation. 71 | > 72 | > It works like this: 73 | > 74 | > ```bash 75 | > # First, create a new plain Laravel installation, for example with: 76 | > 77 | > laravel new name 78 | > # OR: composer create-project laravel/laravel name 79 | > 80 | > # Next, require the `tall-install` package and run the `php artisan tall-install` command: 81 | > composer require ralphjsmit/tall-install 82 | > composer dump-autoload 83 | > php artisan tall-install 84 | > ``` 85 | > 86 | > The `tall-install` command also has a few additional options you can use, like installing Pest, Browsersync and DDD. Please [check out the documentation](https://github.com/ralphjsmit/tall-install#installation--usage) for that. 87 | 88 | ## Usage 89 | 90 | You can build a **modal**, a **slide-over** or an **inline form** (together I call them 'actionables') with three things: 91 | 92 | - With a **Filament Form** 93 | - With a **Livewire component** 94 | - With **custom Blade contents** 95 | 96 | ### Creating a Filament Form 97 | 98 | To start **building our first actionable**, let's do some preparation first. Create a new file in your `app/Forms` directory (custom namespaces are also fine). You could call it `UserForm` or however you like. 99 | 100 | Add the following contents to the file: 101 | 102 | ```php 103 | For all the available fields, [check out the Filament documentation](https://filamentadmin.com/docs/2.x/forms/fields). 139 | 140 | ```php 141 | public function getFormSchema(Component $livewire): array 142 | { 143 | return [ 144 | TextInput::make('email') 145 | ->label('Enter your email') 146 | ->placeholder('john@example.com') 147 | ->required(), 148 | Grid::make()->schema([ 149 | TextInput::make('firstname') 150 | ->label('Enter your first name') 151 | ->placeholder('John'), 152 | TextInput::make('lastname') 153 | ->label('Enter your last name') 154 | ->placeholder('Doe'), 155 | ]), 156 | TextInput::make('password') 157 | ->label('Choose a password') 158 | ->password(), 159 | MarkdownEditor::make('why') 160 | ->label('Why do you want an account?'), 161 | Placeholder::make('open_child_modal') 162 | ->disableLabel() 163 | ->content( 164 | new HtmlString('Click to open a child modal🤩') 165 | ), 166 | ]; 167 | } 168 | ``` 169 | 170 | #### Default values & models 171 | 172 | The field values are stored on the `$data` array property on the `$livewire` component. You can set default values by using the Filament `->default()` method: 173 | 174 | ```php 175 | public function getFormSchema(Component $livewire): array 176 | { 177 | return [ 178 | TextInput::make('year') 179 | ->label('Pick your year of birth') 180 | ->default(now()->subYears(18)->format('Y')) 181 | ->required(), 182 | ]; 183 | } 184 | ``` 185 | 186 | You can also add a `fill()` method on your form class. This will be passed to the `$this->form->fill()` method and can be used for pre-filling values: 187 | 188 | Here is an example of pre-filling a form based on a Blade component parameter: 189 | 190 | ```php 191 | public int $personId; 192 | 193 | public function mount(array $params): void 194 | { 195 | $this->personId = $params['personId']; 196 | } 197 | 198 | public function fill(): array 199 | { 200 | $person = Person::find($this->personId); 201 | 202 | return [ 203 | 'year' => $person->birthdate->format('Y'), 204 | ]; 205 | } 206 | ``` 207 | 208 | #### Submitting a form 209 | 210 | You can use the **`submit()` method** to provide the logic for submitting the form. 211 | 212 | ```php 213 | use Illuminate\Support\Collection; 214 | 215 | public function submit(Collection $state): void 216 | { 217 | User::create($state->all()); 218 | 219 | toast() 220 | ->success('Thanks for submitting the form! (Your data isn\'t stored anywhere.') 221 | ->push(); 222 | } 223 | ``` 224 | 225 | #### Adding custom validation messages 226 | 227 | You may register custom validation messages by implementing the `getErrorMessages()` function: 228 | 229 | ```php 230 | public function getErrorMessages(): array 231 | { 232 | return [ 233 | 'email.required' => 'Please fill in your e-email', 234 | 'age.required' => 'Please enter your age', 235 | 'age.numeric' => 'Your age must be a number', 236 | ]; 237 | } 238 | 239 | ``` 240 | 241 | #### Dependency injection in form classes 242 | 243 | The `tall-interactive` package also provides **dependency injection** for **all the methods in a form class**, similar to Filament Forms. 244 | 245 | You can specify the following variables in each of the above methods: 246 | 247 | 1. `$livewire` to get the **current Livewire instance** 248 | 2. `$model` to get the **current model** (if any) 249 | 3. `$formClass` to access the **current instance of the form class**. You could use this to set and get parameters (see [Storing data](#storing-data)). 250 | 4. `$formVersion` to access the **current form version**. You could use this to dinstinguish between different versions of your form (like a 'create' and 'edit' version of the same form). 251 | 5. `$state` to access the **currently submitted form data**. This is a collection. Only available in the `submit` method. 252 | 6. `$close` to get a closure that allows you to **close an actionable**. You may pass the closure a string with the `id` of an actionable in order to close that actionable. It defaults to the current actionable. If you pass an `id` that doesn't exist nothing will happen. 253 | 7. `$forceClose` to get a closure that allows you to **close all actionables**. 254 | 8. `$params` to get an array with all additional parameters passed to the actionable Blade component. 255 | 256 | Using the `$close()` and `$forceClose()` closures are a very **advanced way of customization** which actionables should be open and which actionables not. 257 | 258 | You may **mix-and-match** those dependencies however you like and only include those that you need. Similar to [Filament's closure customization](https://filamentadmin.com/docs/2.x/forms/advanced#using-closure-customisation). 259 | 260 | For example: 261 | 262 | ```php 263 | use Closure; 264 | use Livewire\Component; 265 | use App\Models\User; 266 | 267 | public function submit(Component $livewire, User $model, Collection $state, Closure $close, Closure $forceClose): void 268 | { 269 | $model 270 | ->fill($state->except('password')) 271 | ->save(); 272 | 273 | if ($state->has('password')) { 274 | $model->update( 275 | $state->only('password')->all() 276 | ); 277 | } 278 | 279 | /* Close current actionable */ 280 | $close(); 281 | 282 | /* Close another actionable */ 283 | $close('another-peer-actionable'); 284 | 285 | /* Close all open actionables */ 286 | $forceClose(); 287 | } 288 | ``` 289 | 290 | ### Using Modals and Slide-Overs 291 | 292 | In order to **open a modal on a page**, include the following somewhere on the page: 293 | 294 | ```blade 295 | 296 | ``` 297 | 298 | If you want to **open a slide-over** instead of a modal, use the following tag: 299 | 300 | ```blade 301 | 302 | ``` 303 | 304 | Both the `modal` component and the `slide-over` component work exactly the same. 305 | 306 | The only **required parameter** here is the `id` of an actionable. This `id` is required, because you need it when emitting a Livewire event to open the actionable. The `id` for an actionable should be different for each actionable on a page, otherwise multiple actionables would open at the same time. 307 | 308 | You can **open an actionable** by dispatching a `modal:open` or `slideOver:open` event with the `id` as it's first parameter: 309 | 310 | ```blade 311 | 314 | ``` 315 | 316 | You can **close an actionable** by dispatching a `modal:close` or `slideOver:close` event with the `id` as it's first parameter: 317 | 318 | ```blade 319 | 322 | ``` 323 | 324 | You can **close an actionable** without knowing its type by dispatching a `:close` event with the `id` as it's first parameter: 325 | 326 | ```blade 327 | 330 | ``` 331 | 332 | For all the below examples you can always change `modal` for `slide-over` to use a slide-over instead. 333 | 334 | #### Filament Forms 335 | 336 | Currently the actionable is empty. Let's fix that by **displaying our form**. In order to display a form, add the `form` property: 337 | 338 | ```blade 339 | 343 | ``` 344 | 345 | Now, when you **emit the `modal:open` event**, the modal will **contain a nice form**. 346 | 347 | #### Livewire 348 | 349 | You may **specify the name of a Livewire component** to be used instead of a form, by using the `livewire` attribute: 350 | 351 | ```blade 352 | 356 | ``` 357 | 358 | If you specify both the `form` and the `livewire` attribute, only the `form` will be displayed. 359 | 360 | #### Blade 361 | 362 | You can also give custom Blade content to an actionable by putting in the slot of component: 363 | 364 | ```blade 365 | 366 | 367 |

My custom Blade content in this actionable!

368 | 369 | 370 | ``` 371 | 372 | It is recommended not to make the Blade content too big. A few paragraphs is fine, but displaying a 10,000-word article will probably cause significant lag. 373 | 374 | #### Configuration attributes 375 | 376 | The following **attributes** are available for **configuring your actionable**. 377 | 378 | **Closing a modal on successfully submitting the form** 379 | 380 | If you specify the `closeOnSubmit` attribute, the actionable will **automatically close on submit**. This attribute is `true` by default, meaning that the actionable will close after successfully submitting the form. 381 | 382 | If you specify the `forceCloseOnSubmit` attribute, **all actionables will be closed** upon successfully submitting this form. This could be handy for situations like this: Edit User > Delete User > Submit. This attribute is `false` by default. 383 | 384 | ```blade 385 | 390 | ``` 391 | 392 | If you need more advanced customization of which actionables to close and which to keep open, you should innject and use the `$close()` and `$forceClose()` in the `submit()` method in the formclass. 393 | 394 | **Adding a title** 395 | 396 | You may specify the **title of a form** with the `title` attribute. If you omit the `title` attribute, the title will not be visible. 397 | 398 | ```blade 399 | 404 | ``` 405 | 406 | **Adding a description** 407 | 408 | You may specify the **description of a form** with the `description` attribute. If you omit the `description` attribute, the description will not be visible. 409 | 410 | ```blade 411 | 417 | ``` 418 | 419 | **Text on submit button** 420 | 421 | You may set the **text on the submit-button** by specifiying the `submitWith` attribute: 422 | 423 | ```blade 424 | 429 | ``` 430 | 431 | **Closing a form before submitting** 432 | 433 | You may **allow an actionable to be dismissed (closed)** before it is submitted by specifiying the `dismissable` attribute. By default this is disabled. 434 | 435 | ```blade 436 | 441 | ``` 442 | 443 | You may **specify the text on the close-button** of an actionable with the `dismissableWith` attribute. By default the text will be 'Close'. 444 | 445 | If you specify the `dismissableWith` attribute, you are allowed to omit the `dismissable` attribute: 446 | 447 | ```blade 448 | 453 | ``` 454 | 455 | **Hiding the buttons** 456 | 457 | You may **hide the buttons at the bottom** of an actionable by specifiying the `hideControls` attribute: 458 | 459 | ```blade 460 | 465 | ``` 466 | 467 | **Setting a maximum width** 468 | 469 | You may **set the maximum width of an actionable** by specify the `maxWidth` attribute. Allowed values are: `sm`,`md`,`lg`,`xl`,`2xl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`. 470 | 471 | ```blade 472 | 477 | ``` 478 | 479 | **Model binding** 480 | 481 | You may **give the form an (Eloquent) model**, which can be used for things like edit forms: 482 | 483 | ```blade 484 | @foreach (\App\Models\User::get() as $user) 485 | 490 | @endforeach 491 | ``` 492 | 493 | Check out the [section about binding to model properties for this](#binding-to-model-properties). 494 | 495 | ### Custom parameters 496 | 497 | You may pass any custom parameters to the Blade component, however you like. Those are collected in an array and can be used in your form: 498 | 499 | ```blade 500 | 508 | ``` 509 | 510 | ```php 511 | public function getFormSchema(array $params): array 512 | { 513 | // $params 514 | // [ 'x' => 'test', 'y' => 64, 'z' => true ] 515 | 516 | return [ 517 | // .. 518 | ]; 519 | } 520 | ``` 521 | 522 | ## Inline forms 523 | 524 | You may also **display inline forms** on a page like this: 525 | 526 | ```blade 527 | 528 | ``` 529 | 530 | For an inline form, you **don't need to specify an `id`**. 531 | 532 | An inline form takes the following parameters: 533 | 534 | 1. `container` 535 | 2. `controlsDesign` 536 | 3. `form` 537 | 4. `title` 538 | 5. `description` 539 | 6. `submitWith` 540 | 7. `hideControls` 541 | 8. `maxWidth` 542 | 9. `model` 543 | 544 | Parameters 3-9 work the same as explained above, so I'm not going to repeat them here. 545 | 546 | **Putting an inline form in a container** 547 | 548 | You may specify the `container` attribute to **put an inline form in a nice container**. A container is a simple wrapper that places the form in a white box with a nice shadow. 549 | 550 | **Changing the controls design** 551 | 552 | You may specify the `controlsDesign` to **change the design of the buttons** at the bottom of the form. It takes on of two values: `minimal` and `classic`. By default it is `minimal`. 553 | 554 | ## Advanced usage 555 | 556 | ### Storing data 557 | 558 | In some cases it can be handy to store data in the instance of your form class. You can use that data later in the process, for example when submitting the form. 559 | 560 | You may add `public` properties on your form class to store data in. A good place to do so could be the `mount()` method, as shown below. 561 | 562 | ### Mounting the form 563 | 564 | You can use the `mount()` method on the form class to mount your form. This can be useful for storing / setting data in the form class when it is invoked for the first time. 565 | 566 | You may use all the dependency injection functionality that's available as well (for a list of all the possible parameters, see above): 567 | 568 | ```php 569 | public User $user; 570 | public string $x = ''; 571 | 572 | public function mount(array $params, User $model): void 573 | { 574 | $this->user = $model; 575 | $this->x = $params['x']; 576 | } 577 | 578 | public function getFormSchema(): array 579 | { 580 | return [ 581 | Hidden::make('user_id')->default($this->user->id) 582 | ]; 583 | } 584 | ``` 585 | 586 | ### Reacting to events 587 | 588 | You may add an `onOpen()` method to your form class to react to the event of opening of the actionable. As you might expect, this method is only available for modals and slide-overs. 589 | 590 | ```php 591 | public function onOpen(): void 592 | { 593 | // ... 594 | } 595 | ``` 596 | 597 | You may also pass parameters to the events when opening a form: 598 | 599 | ```blade 600 | 603 | ``` 604 | 605 | Use the `$eventParams` variable to access the parameters passed to the event. 606 | 607 | ```php 608 | public User $user; 609 | public array $prefilledValues = []; 610 | 611 | public function onOpen(array $eventParams, self $formClass): void 612 | { 613 | $formClass->user = User::find($eventParams[0]); 614 | $formClass->prefilledValues['type'] = $eventParams[1]; 615 | } 616 | ``` 617 | 618 | ## Customizing the views 619 | 620 | Optionally, you can publish the views using (not recommended, they can get outdated): 621 | 622 | ```bash 623 | php artisan vendor:publish --tag="tall-interactive-views" 624 | ``` 625 | 626 | ## General 627 | 628 | 🐞 If you spot a bug, please submit a detailed issue and I'll try to fix it as soon as possible. 629 | 630 | 🔐 If you discover a vulnerability, please review [our security policy](../../security/policy). 631 | 632 | 🙌 If you want to contribute, please submit a pull request. All PRs will be fully credited. If you're unsure whether I'd accept your idea, feel free to contact me! 633 | 634 | 🙋‍♂️ [Ralph J. Smit](https://ralphjsmit.com) 635 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ralphjsmit/tall-interactive", 3 | "description": "Create forms, modals and slide-overs with ease.", 4 | "keywords": [ 5 | "ralphjsmit", 6 | "laravel", 7 | "tall-interactive" 8 | ], 9 | "homepage": "https://github.com/ralphjsmit/tall-interactive", 10 | "license": "MIT", 11 | "authors": [ 12 | { 13 | "name": "Ralph J. Smit", 14 | "email": "rjs@ralphjsmit.com", 15 | "role": "Developer" 16 | } 17 | ], 18 | "require": { 19 | "php": "^8.0", 20 | "filament/forms": "^2.17", 21 | "illuminate/contracts": "^8.73|^9.0|^10.0", 22 | "livewire/livewire": "^2.11", 23 | "orchestra/testbench": "^6.23|^7.0|^8.0", 24 | "ryangjchandler/blade-tabler-icons": "^1.1|^2.0", 25 | "spatie/laravel-package-tools": "^1.9.2", 26 | "usernotnull/tall-toasts": "^1.5", 27 | "nesbot/carbon": "^2.66|^3.0" 28 | }, 29 | "require-dev": { 30 | "nunomaduro/collision": "^5.10|^6.0", 31 | "nunomaduro/larastan": "^1.0|^2.0|^3.0", 32 | "pestphp/pest": "^1.22|^2.34", 33 | "pestphp/pest-plugin-laravel": "^1.4.0|^2.3", 34 | "phpstan/extension-installer": "^1.1", 35 | "phpunit/phpunit": "^9.5|^10.5", 36 | "spatie/invade": "^1.0|^2.0", 37 | "spatie/laravel-ray": "^1.39" 38 | }, 39 | "autoload": { 40 | "psr-4": { 41 | "RalphJSmit\\Tall\\Interactive\\": "src" 42 | } 43 | }, 44 | "autoload-dev": { 45 | "psr-4": { 46 | "RalphJSmit\\Tall\\Interactive\\Tests\\": "tests" 47 | } 48 | }, 49 | "scripts": {}, 50 | "config": { 51 | "sort-packages": true, 52 | "allow-plugins": { 53 | "phpstan/extension-installer": true, 54 | "pestphp/pest-plugin": true 55 | } 56 | }, 57 | "extra": { 58 | "laravel": { 59 | "providers": [ 60 | "RalphJSmit\\Tall\\Interactive\\ActionablesServiceProvider" 61 | ] 62 | } 63 | }, 64 | "minimum-stability": "dev", 65 | "prefer-stable": true, 66 | "repositories": [] 67 | } 68 | -------------------------------------------------------------------------------- /config/tall-interactive.php: -------------------------------------------------------------------------------- 1 | getName() }}')" 4 | @class([ 5 | 'w-full md:w-auto py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2', 6 | 'bg-white text-gray-700 focus:ring-primary-500' => $buttonAction->getColor() === 'secondary', 7 | 'bg-red-600 hover:bg-red-700 text-white focus:ring-red-500' => $buttonAction->getColor() === 'danger', 8 | ]) 9 | class="w-full md:w-auto py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> 10 | {{ $buttonAction->getLabel() }} 11 | 12 | @endforeach 13 | -------------------------------------------------------------------------------- /resources/views/components/forms/controls/base.blade.php: -------------------------------------------------------------------------------- 1 |

2 |
3 | {{ $slot }} 4 |
5 |
6 | -------------------------------------------------------------------------------- /resources/views/components/forms/controls/classic.blade.php: -------------------------------------------------------------------------------- 1 |
2 | {{ $slot }} 3 |
4 | -------------------------------------------------------------------------------- /resources/views/components/forms/controls/minimal.blade.php: -------------------------------------------------------------------------------- 1 |
2 | {{ $slot }} 3 |
4 | -------------------------------------------------------------------------------- /resources/views/components/forms/form-container.blade.php: -------------------------------------------------------------------------------- 1 |
get('maxWidth')} bg-white rounded-2xl overflow-hidden shadow-md" : '' }}"> 2 | 3 |
$applyContainer, 'py-4'])> 4 | {{ $slot }} 5 |
6 | 7 | {{ $controls }} 8 |
9 | -------------------------------------------------------------------------------- /resources/views/components/inline-form.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $parameters = [ 3 | 'slot' => $slot, 4 | ]; 5 | 6 | $optionalParameters = [ 7 | 'container', 8 | 'controlsDesign', 9 | 'description', 10 | 'form', 11 | 'hideControls', 12 | 'livewire', 13 | 'maxWidth', 14 | 'model', 15 | 'submitWith', 16 | 'title', 17 | ]; 18 | 19 | foreach ($optionalParameters as $optionalParameter) { 20 | if ( $attributes->has($optionalParameter) ) { 21 | $parameters[$optionalParameter] = $attributes->get($optionalParameter); 22 | } 23 | } 24 | 25 | $parameters['params'] = $attributes->except(array_keys($parameters))->getAttributes(); 26 | @endphp 27 | 28 | @livewire('tall-interactive::inline-form', $parameters) 29 | 30 | 31 | -------------------------------------------------------------------------------- /resources/views/components/modal.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $parameters = [ 3 | 'id' => $attributes->get('id'), 4 | 'slot' => $slot, 5 | ]; 6 | 7 | $optionalParameters = [ 8 | 'closeOnSubmit', 9 | 'description', 10 | 'dismissable', 11 | 'dismissableWith', 12 | 'form', 13 | 'forceCloseOnSubmit', 14 | 'hideControls', 15 | 'livewire', 16 | 'maxWidth', 17 | 'model', 18 | 'submitWith', 19 | 'title', 20 | ]; 21 | 22 | foreach ($optionalParameters as $optionalParameter) { 23 | if ( $attributes->has($optionalParameter) ) { 24 | $parameters[$optionalParameter] = $attributes->get($optionalParameter); 25 | } 26 | } 27 | 28 | $parameters['params'] = $attributes->except(array_keys($parameters))->getAttributes(); 29 | @endphp 30 | 31 |
32 | @livewire('tall-interactive::modal', $parameters, key($parameters['id'])) 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /resources/views/components/slide-over.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $parameters = [ 3 | 'id' => $attributes->get('id'), 4 | 'slot' => $slot, 5 | ]; 6 | 7 | $optionalParameters = [ 8 | 'closeOnSubmit', 9 | 'description', 10 | 'dismissable', 11 | 'dismissableWith', 12 | 'forceCloseOnSubmit', 13 | 'form', 14 | 'hideControls', 15 | 'livewire', 16 | 'maxWidth', 17 | 'model', 18 | 'submitWith', 19 | 'title', 20 | ]; 21 | 22 | foreach ($optionalParameters as $optionalParameter) { 23 | if ( $attributes->has($optionalParameter) ) { 24 | $parameters[$optionalParameter] = $attributes->get($optionalParameter); 25 | } 26 | } 27 | 28 | $parameters['params'] = $attributes->except(array_keys($parameters))->getAttributes(); 29 | @endphp 30 | 31 |
32 | @livewire('tall-interactive::slide-over', $parameters, key($parameters['id'])) 33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /resources/views/livewire/actionables-manager.blade.php: -------------------------------------------------------------------------------- 1 |
2 | {{-- View for the ActionablesManager --}} 3 |
4 | -------------------------------------------------------------------------------- /resources/views/livewire/inline-form.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $maxWidth = [ 3 | 'sm' => 'sm:max-w-sm', 4 | 'md' => 'sm:max-w-md', 5 | 'lg' => 'sm:max-w-lg', 6 | 'xl' => 'sm:max-w-xl', 7 | '2xl' => 'sm:max-w-2xl', 8 | '3xl' => 'sm:max-w-3xl', 9 | '4xl' => 'sm:max-w-4xl', 10 | '5xl' => 'sm:max-w-5xl', 11 | '6xl' => 'sm:max-w-6xl', 12 | '7xl' => 'sm:max-w-7xl', 13 | ][$maxWidth]; 14 | @endphp 15 | 16 | {{-- Inline form --}} 17 | 18 | 19 |
20 | @if($title || $description) 21 |
22 | @if($title) 23 |

24 | {{ $title }} 25 |

26 | @endif 27 | @if($description) 28 |

29 | {{ $description }} 30 |

31 | @endif 32 |
33 | @endif 34 | 35 |
36 | 37 | @if($formClass) 38 |
39 | 40 | {{ $this->form }} 41 | 42 | 43 |
44 | @elseif($livewire) 45 | @livewire($livewire, $params) 46 | @elseif($slot) 47 | {!! $slot !!} 48 | @endif 49 |
50 |
51 | 52 | 53 | @if($showControls) 54 | 55 | 56 | @include('tall-interactive::components.forms.button-actions', ['buttonActions' => $this->getButtonActions()]) 57 | 58 | 62 | 63 | 64 | 65 | @endif 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /resources/views/livewire/modal.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $maxWidth = [ 3 | 'sm' => 'sm:max-w-sm', 4 | 'md' => 'sm:max-w-md', 5 | 'lg' => 'sm:max-w-lg', 6 | 'xl' => 'sm:max-w-xl', 7 | '2xl' => 'sm:max-w-2xl', 8 | '3xl' => 'sm:max-w-3xl', 9 | '4xl' => 'sm:max-w-4xl', 10 | '5xl' => 'sm:max-w-5xl', 11 | '6xl' => 'sm:max-w-6xl', 12 | '7xl' => 'sm:max-w-7xl', 13 | ][$maxWidth]; 14 | @endphp 15 | 16 |
17 | {{-- Modal --}} 18 | 103 |
104 | -------------------------------------------------------------------------------- /resources/views/livewire/slide-over.blade.php: -------------------------------------------------------------------------------- 1 | @php 2 | $maxWidth = [ 3 | 'sm' => 'sm:max-w-sm', 4 | 'md' => 'sm:max-w-md', 5 | 'lg' => 'sm:max-w-lg', 6 | 'xl' => 'sm:max-w-xl', 7 | '2xl' => 'sm:max-w-2xl', 8 | '3xl' => 'sm:max-w-3xl', 9 | '4xl' => 'sm:max-w-4xl', 10 | '5xl' => 'sm:max-w-5xl', 11 | '6xl' => 'sm:max-w-6xl', 12 | '7xl' => 'sm:max-w-7xl', 13 | ][$maxWidth]; 14 | @endphp 15 | 16 |
17 | {{-- Slide-over --}} 18 | 119 |
120 | -------------------------------------------------------------------------------- /src/ActionablesServiceProvider.php: -------------------------------------------------------------------------------- 1 | name('tall-interactive') 30 | ->hasConfigFile() 31 | ->hasViews() 32 | ->hasViewComponents('tall-interactive::', Modal::class, SlideOver::class, ActionablesManager::class, InlineForm::class, FormContainer::class, Minimal::class, Classic::class); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/Actions/ButtonAction.php: -------------------------------------------------------------------------------- 1 | name($name); 24 | } 25 | 26 | public function action(Closure $action): static 27 | { 28 | $this->action = $action; 29 | 30 | return $this; 31 | } 32 | 33 | public function getAction(): Closure 34 | { 35 | return $this->action; 36 | } 37 | 38 | public function getLabel(): string 39 | { 40 | return $this->label; 41 | } 42 | 43 | public function getName(): string 44 | { 45 | return $this->name; 46 | } 47 | 48 | public function isHidden(): bool 49 | { 50 | if ($this->evaluate($this->isHidden)) { 51 | return true; 52 | } 53 | 54 | return ! $this->evaluate($this->isVisible); 55 | } 56 | 57 | public function label(string $label): static 58 | { 59 | $this->label = $label; 60 | 61 | return $this; 62 | } 63 | 64 | public function name(string $name): static 65 | { 66 | $this->name = $name; 67 | 68 | return $this; 69 | } 70 | 71 | public function visible(bool|Closure $condition): static 72 | { 73 | $this->isVisible = $condition; 74 | 75 | return $this; 76 | } 77 | 78 | public function hidden(bool|Closure $condition): static 79 | { 80 | $this->isHidden = $condition; 81 | 82 | return $this; 83 | } 84 | 85 | protected function evaluate(mixed $value): mixed 86 | { 87 | if ($value instanceof Closure) { 88 | return app()->call($value); 89 | } 90 | 91 | return $value; 92 | } 93 | 94 | public function color(string $color): static 95 | { 96 | if (in_array($color, ['secondary', 'danger'])) { 97 | $this->color = $color; 98 | } 99 | 100 | return $this; 101 | } 102 | 103 | public function getColor(): string 104 | { 105 | return $this->color; 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /src/Forms/Form.php: -------------------------------------------------------------------------------- 1 | $value) { 13 | $this->{$property} = $value; 14 | } 15 | } 16 | 17 | public static function fromLivewire($value): self 18 | { 19 | $formClass = Arr::pull($value, '_formClass'); 20 | 21 | return app($formClass, ['properties' => $value]); 22 | } 23 | 24 | public function toLivewire(): array 25 | { 26 | return array_merge(get_object_vars($this), [ 27 | '_formClass' => static::class, 28 | ]); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/Livewire/Actionable.php: -------------------------------------------------------------------------------- 1 | 'openActionable', 14 | 'modal:close' => 'closeActionable', 15 | 'slideOver:open' => 'openActionable', 16 | 'slideOver:close' => 'closeActionable', 17 | ':close' => 'closeSingleActionable', 18 | 'actionables:forceClose' => 'forceCloseActionables', 19 | ]; 20 | 21 | public function render(): View 22 | { 23 | return view('tall-interactive::livewire.actionables-manager'); 24 | } 25 | 26 | public function closeActionable(): void 27 | { 28 | $actionable = array_pop($this->openedActionables); 29 | 30 | $this->emit('actionable:close', $actionable); 31 | 32 | if ($this->openedActionables) { 33 | $this->emit('actionable:open', $this->openedActionables[array_key_last($this->openedActionables)]); 34 | } 35 | } 36 | 37 | public function closeSingleActionable(string $actionable): void 38 | { 39 | if (($key = array_search($actionable, $this->openedActionables)) !== false) { 40 | $this->emit('actionable:close', $actionable); 41 | 42 | unset($this->openedActionables[$key]); 43 | 44 | $this->openedActionables = array_values($this->openedActionables); 45 | 46 | if ($this->openedActionables) { 47 | $this->emit('actionable:open', $this->openedActionables[array_key_last($this->openedActionables)]); 48 | } 49 | } 50 | } 51 | 52 | public function forceCloseActionables(): void 53 | { 54 | foreach ($this->openedActionables as $key => $actionable) { 55 | $this->emit('actionable:close', $actionable); 56 | unset($this->openedActionables[$key]); 57 | } 58 | } 59 | 60 | public function openActionable(string $actionable, ...$params): void 61 | { 62 | if ($this->openedActionables) { 63 | $this->emit('actionable:close', $this->openedActionables[array_key_last($this->openedActionables)]); 64 | } 65 | 66 | $this->openedActionables[] = $actionable; 67 | 68 | $this->emit('actionable:open', $actionable, ...$params); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/CanBeDismissed.php: -------------------------------------------------------------------------------- 1 | dismissable = true; 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/CanCallForm.php: -------------------------------------------------------------------------------- 1 | fn (string $actionable = null) => $this->close($actionable), 13 | 'forceClose' => fn () => $this->forceClose(), 14 | 'formClass' => $this->formClass, 15 | 'formVersion' => $this->formVersion, 16 | 'livewire' => $this, 17 | 'model' => $this->model, 18 | 'modelPathIfGiven' => $this->model ? 'model.' : '', 19 | 'params' => $this->params, 20 | ]); 21 | 22 | return $parameters->all(); 23 | } 24 | 25 | protected function call(string|Closure $method, array $parameters = []): mixed 26 | { 27 | if (is_string($method)) { 28 | if (! $this->formClass || ! method_exists($this->formClass, $method)) { 29 | return null; 30 | } 31 | } 32 | 33 | return app()->call( 34 | callback: is_string($method) ? [$this->formClass, $method] : $method, 35 | parameters: array_merge($this->getDefaultCallableParameters(), $parameters) 36 | ); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/Closeable.php: -------------------------------------------------------------------------------- 1 | forceCloseOnSubmit) { 20 | $this->forceClose(); 21 | 22 | return; 23 | } 24 | 25 | if ($this->closeOnSubmit && ! $this instanceof InlineForm) { 26 | $this->close(); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasControls.php: -------------------------------------------------------------------------------- 1 | showControls = ! $hideControls; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasDescription.php: -------------------------------------------------------------------------------- 1 | emit(':close', $actionable ?? $this->actionableId); 10 | } 11 | 12 | public function forceClose(): void 13 | { 14 | $this->emit('actionables:forceClose'); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasForm.php: -------------------------------------------------------------------------------- 1 | shouldFillForm && $this->formClass) { 30 | $this->mountForm(); 31 | } 32 | 33 | if ($this->formClass) { 34 | $this->registerFormMessages(); 35 | } 36 | } 37 | 38 | public function executeButtonAction(string $buttonActionName): void 39 | { 40 | collect($this->call('getButtonActions')) 41 | ->reject(fn (ButtonAction $buttonAction) => $buttonAction->isHidden()) 42 | ->each(function (ButtonAction $buttonAction) use ($buttonActionName): void { 43 | if ($buttonAction->getName() !== $buttonActionName) { 44 | return; 45 | } 46 | 47 | $this->call($buttonAction->getAction()); 48 | }); 49 | } 50 | 51 | public function getButtonActions(): array 52 | { 53 | return array_filter($this->call('getButtonActions') ?: [], fn (ButtonAction $buttonAction) => ! $buttonAction->isHidden()); 54 | } 55 | 56 | public function mountHasForm(string $maxWidth = null): void 57 | { 58 | $this->maxWidth = $maxWidth ?? '2xl'; 59 | } 60 | 61 | public function submit(): void 62 | { 63 | $this->call('submit', [ 64 | 'state' => collect($this->form->getState()), 65 | ]); 66 | 67 | $this->handleFormSubmitted(); 68 | } 69 | 70 | protected function getForms(): array 71 | { 72 | return collect() 73 | ->when($this->formClass, function (Collection $forms): Collection { 74 | return $forms->put( 75 | 'form', 76 | $this->makeForm() 77 | ->schema($this->call('getFormSchema') ?: []) 78 | ->tap(function (ComponentContainer $componentContainer): ComponentContainer { 79 | if ($this->model) { 80 | $componentContainer->model($this->model); 81 | } 82 | 83 | return $componentContainer; 84 | }) 85 | ->statePath('data') 86 | ); 87 | }) 88 | ->all(); 89 | } 90 | 91 | protected function handleFormSubmitted(): void 92 | { 93 | $this->handleCloseOnSubmit(); 94 | 95 | if (! $this->model) { 96 | $this->reset('data', 'shouldFillForm'); 97 | 98 | $this->mountForm(); 99 | } 100 | } 101 | 102 | protected function mountForm(): void 103 | { 104 | $this->call('mount'); 105 | 106 | $this->form->fill( 107 | $this->call('fill') 108 | ); 109 | 110 | $this->shouldFillForm = false; 111 | } 112 | } 113 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasLivewire.php: -------------------------------------------------------------------------------- 1 | slot = $slot->toHtml(); 14 | } 15 | 16 | public function submitSlot(): void 17 | { 18 | $this->handleCloseOnSubmit(); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasState.php: -------------------------------------------------------------------------------- 1 | actionableId !== $actionable) { 18 | return; 19 | } 20 | 21 | $this->resetValidation(); 22 | 23 | $this->actionableOpen = false; 24 | } 25 | 26 | public function initializeHasState(): void 27 | { 28 | $this->registerListeners([ 29 | 'actionable:open' => 'openActionable', 30 | 'actionable:close' => 'closeActionable', 31 | ]); 32 | } 33 | 34 | public function openActionable(string $actionable, ...$params): void 35 | { 36 | if ($this->actionableId !== $actionable) { 37 | return; 38 | } 39 | 40 | $this->actionableOpen = true; 41 | 42 | $this->call('onOpen', [ 43 | 'eventParams' => $params ?? [], 44 | ]); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/HasTitle.php: -------------------------------------------------------------------------------- 1 | registerMessages( 12 | method_exists($this->formClass, 'getErrorMessages') 13 | ? collect($this->call('getErrorMessages')) 14 | ->mapWithKeys(function (string $message, string $key): array { 15 | return [$this->form->getStatePath() . '.' . $key => $message]; 16 | }) 17 | ->all() 18 | : [] 19 | ); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/ReceivesForm.php: -------------------------------------------------------------------------------- 1 | formClass = app($form); 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/RegisterListeners.php: -------------------------------------------------------------------------------- 1 | listeners = array_merge($this->listeners, $listeners); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/Livewire/Concerns/RegisterMessages.php: -------------------------------------------------------------------------------- 1 | messages = array_merge($this->messages, $messages); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/Livewire/InlineForm.php: -------------------------------------------------------------------------------- 1 | actionableId = $id; 40 | } 41 | 42 | public function render(): View 43 | { 44 | return view('tall-interactive::livewire.inline-form'); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/Livewire/Modal.php: -------------------------------------------------------------------------------- 1 | actionableId = $id; 44 | } 45 | 46 | public function render(): View 47 | { 48 | return view('tall-interactive::livewire.modal'); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/Livewire/SlideOver.php: -------------------------------------------------------------------------------- 1 | actionableId = $id; 44 | } 45 | 46 | public function render(): View 47 | { 48 | return view('tall-interactive::livewire.slide-over'); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/View/Components/ActionablesManager.php: -------------------------------------------------------------------------------- 1 |