Download the PHP package wire-elements/modal without Composer

On this page you can find all versions of the php package wire-elements/modal. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package modal

Build Status Total Downloads Total Downloads Latest Stable Version License

Livewire v3

This is the readme for Livewire v3. If you are looking for the readme for Livewire v2 click here.

Upgrading from v2

You can use the following command to automate the upgrade process:

Please review the changes and ensure they follow the new convention set by Livewire v3:

The old component name is being deprecated. Replace @livewire('livewire-ui-modal') with @livewire('wire-elements-modal').

The config file has been renamed as well. If you've published the config in the past, you will have to do so again and make the necessary changes:

After upgrading, make sure to clear your view cache:

About Wire Elements Modal

Wire Elements Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

Installation

Click the image above to read a full article on using the Wire Elements modal package or follow the instructions below.

To get started, require the package via Composer:

Livewire directive

Add the Livewire directive @livewire('wire-elements-modal') directive to your template.

TailwindCSS

The base modal is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the modal template and change the markup to include the required classes for your CSS framework.

Creating a modal

You can run php artisan make:livewire EditUser to make the initial Livewire component. Open your component class and make sure it extends the ModalComponent class:

Opening a modal

To open a modal you will need to dispatch an event. To open the EditUser modal for example:

Passing parameters

To open the EditUser modal for a specific user we can pass the user id:

The parameters are injected into the modal component and the model will be automatically fetched from the database if the type is defined:

The parameters are also passed to the mount method on the modal component.

Opening a child modal

From an existing modal you can use the exact same event and a child modal will be created:

Closing a (child) modal

If for example a user clicks the 'Delete' button which will open a confirm dialog, you can cancel the deletion and return to the edit user modal by dispatching the closeModal event. This will open the previous modal. If there is no previous modal the entire modal component is closed and the state will be reset.

You can also close a modal from within your modal component class:

If you don't want to go to the previous modal but close the entire modal component you can use the forceClose method:

Often you will want to update other Livewire components when changes have been made. For example, the user overview when a user is updated. You can use the closeModalWithEvents method to achieve this.

It's also possible to add parameters to your events:

Changing modal properties

You can change the width (default value '2xl') of the modal by overriding the static modalMaxWidth method in your modal component class:

By default, the modal will close when you hit the escape key. If you want to disable this behavior to, for example, prevent accidentally closing the modal you can overwrite the static closeModalOnEscape method and have it return false.

By default, the modal will close when you click outside the modal. If you want to disable this behavior to, for example, prevent accidentally closing the modal you can overwrite the static closeModalOnClickAway method and have it return false.

By default, closing a modal by pressing the escape key will force close all modals. If you want to disable this behavior to, for example, allow pressing escape to show a previous modal, you can overwrite the static closeModalOnEscapeIsForceful method and have it return false.

When a modal is closed, you can optionally enable a modalClosed event to be fired. This event will be fired on a call to closeModal, when the escape button is pressed, or when you click outside the modal. The name of the closed component will be provided as a parameter;

By default, when a child modal is closed, the closed components state is still available if the same modal component is opened again. If you would like to destroy the component when its closed you can override the static destroyOnClose method and have it return true. When a destroyed modal is opened again its state will be reset.

Preventing closing the modal on Escape or on click away based on the modal state

When a modal is closed on Escape or click away, closingModalOnEscape and closingModalOnClickAway are issued. Handle these events to prevent closing a modal based on its state, for example, if there are uncommitted changes.

For example, if a modal has a isDirty property, it could have the following handler:

Skipping previous modals

In some cases you might want to skip previous modals. For example:

  1. Team overview modal
  2. -> Edit Team
  3. -> Delete Team

In this case, when a team is deleted, you don't want to go back to step 2 but go back to the overview. You can use the skipPreviousModal method to achieve this. By default it will skip the previous modal. If you want to skip more you can pass the number of modals to skip skipPreviousModals(2).

You can also optionally call the destroySkippedModals() method to destroy the skipped modals so if any are opened again their state will be reset

Building Tailwind CSS for production

To purge the classes used by the package, add the following lines to your purge array in tailwind.config.js:

Because some classes are dynamically build you should add some classes to the purge safelist so your tailwind.config.js should look something like this:

For TailwindCSS 3x

Configuration

You can customize the Modal via the wire-elements-modal.php config file. This includes some additional options like including CSS if you don't use TailwindCSS for your application, as well as the default modal properties.

To publish the config run the vendor:publish command:

Security

If you are new to Livewire I recommend to take a look at the security details. In short, it's very important to validate all information given Livewire stores this information on the client-side, or in other words, this data can be manipulated. Like shown in the examples above, use the Gate facade to authorize actions.

Credits

License

WireElements is open-sourced software licensed under the MIT license.

Beautiful components crafted with Livewire


All versions of modal with dependencies

PHP Build Version
Package Version
Requires php Version ^8.1
livewire/livewire Version ^3.2.3
spatie/laravel-package-tools Version ^1.9
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package wire-elements/modal contains the following files

Loading the files please wait ....