Download the PHP package ralphjsmit/tall-interactive without Composer
On this page you can find all versions of the php package ralphjsmit/tall-interactive. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download ralphjsmit/tall-interactive
More information about ralphjsmit/tall-interactive
Files in ralphjsmit/tall-interactive
Package tall-interactive
Short Description Create forms, modals and slide-overs with ease.
License MIT
Homepage https://github.com/ralphjsmit/tall-interactive
Informations about the package tall-interactive
Create forms, modals and slide-overs with ease.
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.
[!IMPORTANT]
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.
Installation
You can install the package via composer:
Setup
The package requires the following dependencies:
- Laravel Livewire
- Alpine.js
- Tailwind CSS
- Filament Forms
- Toast notification (not required, but very handy)
You can install them manually or skip to the Faster installation section for new projects.
Laravel Livewire
Please follow the Laravel Livewire installation instructions if you haven't done so yet.
Alpine.js, Tailwind, Filament Forms
Please follow the Filament Forms installation instructions to install Alpine.js, Tailwind CSS and Filament Forms.
Add the following to the content
key of your tailwind.config.js
file:
Toast notifications
Using the Toast TALL notifications package is not required, but it is recommended if you need to send notifications to your users, for example on submitting a form.
If you decide to use Toast, please follow their setup instructions.
Tall Interactive
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:
Now you're ready to go and build your first actionables!
Faster installation
If you want a faster installation process, you could check out my 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.
It works like this:
The
tall-install
command also has a few additional options you can use, like installing Pest, Browsersync and DDD. Please check out the documentation for that.
Usage
You can build a modal, a slide-over or an inline form (together I call them 'actionables') with three things:
- With a Filament Form
- With a Livewire component
- With custom Blade contents
Creating a Filament Form
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.
Add the following contents to the file:
Building your form
Creating a form with Filament is very easy. The field classes of your form reside in the getFormSchema()
method of the Form class.
For all the available fields, check out the Filament documentation.
Default values & models
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:
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:
Here is an example of pre-filling a form based on a Blade component parameter:
Submitting a form
You can use the submit()
method to provide the logic for submitting the form.
Adding custom validation messages
You may register custom validation messages by implementing the getErrorMessages()
function:
Dependency injection in form classes
The tall-interactive
package also provides dependency injection for all the methods in a form class, similar to Filament Forms.
You can specify the following variables in each of the above methods:
$livewire
to get the current Livewire instance$model
to get the current model (if any)$formClass
to access the current instance of the form class. You could use this to set and get parameters (see Storing data).$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).$state
to access the currently submitted form data. This is a collection. Only available in thesubmit
method.$close
to get a closure that allows you to close an actionable. You may pass the closure a string with theid
of an actionable in order to close that actionable. It defaults to the current actionable. If you pass anid
that doesn't exist nothing will happen.$forceClose
to get a closure that allows you to close all actionables.$params
to get an array with all additional parameters passed to the actionable Blade component.
Using the $close()
and $forceClose()
closures are a very advanced way of customization which actionables should be open and which actionables not.
You may mix-and-match those dependencies however you like and only include those that you need. Similar to Filament's closure customization.
For example:
Using Modals and Slide-Overs
In order to open a modal on a page, include the following somewhere on the page:
If you want to open a slide-over instead of a modal, use the following tag:
Both the modal
component and the slide-over
component work exactly the same.
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.
You can open an actionable by dispatching a modal:open
or slideOver:open
event with the id
as it's first parameter:
You can close an actionable by dispatching a modal:close
or slideOver:close
event with the id
as it's first parameter:
You can close an actionable without knowing its type by dispatching a :close
event with the id
as it's first parameter:
For all the below examples you can always change modal
for slide-over
to use a slide-over instead.
Filament Forms
Currently the actionable is empty. Let's fix that by displaying our form. In order to display a form, add the form
property:
Now, when you emit the modal:open
event, the modal will contain a nice form.
Livewire
You may specify the name of a Livewire component to be used instead of a form, by using the livewire
attribute:
If you specify both the form
and the livewire
attribute, only the form
will be displayed.
Blade
You can also give custom Blade content to an actionable by putting in the slot of component:
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.
Configuration attributes
The following attributes are available for configuring your actionable.
Closing a modal on successfully submitting the form
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.
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.
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.
Adding a title
You may specify the title of a form with the title
attribute. If you omit the title
attribute, the title will not be visible.
Adding a description
You may specify the description of a form with the description
attribute. If you omit the description
attribute, the description will not be visible.
Text on submit button
You may set the text on the submit-button by specifiying the submitWith
attribute:
Closing a form before submitting
You may allow an actionable to be dismissed (closed) before it is submitted by specifiying the dismissable
attribute. By default this is disabled.
You may specify the text on the close-button of an actionable with the dismissableWith
attribute. By default the text will be 'Close'.
If you specify the dismissableWith
attribute, you are allowed to omit the dismissable
attribute:
Hiding the buttons
You may hide the buttons at the bottom of an actionable by specifiying the hideControls
attribute:
Setting a maximum width
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
.
Model binding
You may give the form an (Eloquent) model, which can be used for things like edit forms:
Check out the section about binding to model properties for this.
Custom parameters
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:
Inline forms
You may also display inline forms on a page like this:
For an inline form, you don't need to specify an id
.
An inline form takes the following parameters:
container
controlsDesign
form
title
description
submitWith
hideControls
maxWidth
model
Parameters 3-9 work the same as explained above, so I'm not going to repeat them here.
Putting an inline form in a container
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.
Changing the controls design
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
.
Advanced usage
Storing data
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.
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.
Mounting the form
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.
You may use all the dependency injection functionality that's available as well (for a list of all the possible parameters, see above):
Reacting to events
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.
You may also pass parameters to the events when opening a form:
Use the $eventParams
variable to access the parameters passed to the event.
Customizing the views
Optionally, you can publish the views using (not recommended, they can get outdated):
General
🐞 If you spot a bug, please submit a detailed issue and I'll try to fix it as soon as possible.
🔐 If you discover a vulnerability, please review our security policy.
🙌 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!
🙋♂️ Ralph J. Smit
All versions of tall-interactive with dependencies
filament/forms Version ^2.17
illuminate/contracts Version ^8.73|^9.0|^10.0|^11.0
livewire/livewire Version ^2.11|^3.4
orchestra/testbench Version ^6.23|^7.0|^8.0|^9.0
ryangjchandler/blade-tabler-icons Version ^1.1|^2.0
spatie/laravel-package-tools Version ^1.9.2
usernotnull/tall-toasts Version ^1.5
nesbot/carbon Version ^2.66|^3.0