Download the PHP package vojislavd/tall-components without Composer

TALL components

Library of useful UI components created for TALL (Tailwind CSS, Alpine.js, Laravel, Livewire) stack.

Include:

• [x] Modal
• [x] Confirmation modal
• [x] Notification
• [x] Table (search, filters, sort columns)
• [x] Loading spinner
• [x] Drag & drop file upload (Filepond)
• [x] Markdown editor (Quill)
• [x] Datetime picker (Flatpickr)

Requirements

This package requires having installed and working Laravel, Tailwind CSS, Alpine.js and Livewire.

The package is created and tested for these frameworks:

• Laravel v10
• Tailwind CSS v3
• Alpine.js v3
• Livewire v3

There can be some differences for other versions.

Installation

You can install the package via composer:

You need to include tc.js in your resources/js/app.js file:

Next, you should compile assets:

Components will use primary, primary-dark, secondary and secondary-dark colors. You should configure these colors in your tailwind.config.js file.

If you want to change colors or customize anything else, you can publish all components views with:

To change colors, just find primary, primary-dark, secondary or secondary-dark in the component and replace them with color you want to use.

Usage

Modal

To use modal, you need have boolean variable inside your Livewire component. Modal will be opened or closed based on the value of that variable.

In blade file of the same Livewire component, you should add <x-tc::modal> and set model property to match boolean variable you added in the PHP file of your Livewire component.

Inside <x-tc::modal> tags, you can add any content you want to be present in modal.

The modal can be opened from the blade file, like this:

Or it can be opened from a PHP file, like this:

The same goes for closing the modal, only the value of openModal will be set to false.

For example, if you want to have a button to close the modal inside the modal itself, you can do it like this:

It's possible to configure the width of the modal by passing a Tailwind CSS class to width property of the component. For example:

You can add action buttons to the bottom of the modal like this:

Confirmation modal

To use the confirmation modal, you need to add the x-tc-confirmation-modal component and the WithTcConfirmation trait to the Livewire component where you want to use it.

Then, to require confirmation for some action, you should add x-tc-confirm to the button from which you want to trigger the confirmation modal and pass title, message, and action.

action should be a Livewire method you want to call after the user clicks the "Confirm" button in the modal.

While the title parameter is optional, message and action are required, and the component will not work without them.

If you want to use the confirmation modal with multiple actions on the same Livewire component, it's enough to add it only once. Alternatively, if you want to have it on all pages, you can include it in your layout file. Just make sure you have the WithTcConfirmation trait in your Livewire component.

Notification

You can display notifications on the same page without reloading, or you can redirect to some other page and display notifications on that page.

To use notifications, the recommended way is to add them to your layout file, so notifications will be available on all pages.

You should add this Livewire component at the end of the file, before @livewireScripts.

If you want to display notifications from a Livewire component without reloading the page, all you need to do is dispatch notification event with the message you want to display, like this:

If you want to redirect to some other page and display a notification there, you can do it like this:

Notification will disappear by default after 5 seconds (5000 ms). To change that, you need to pass the duration parameter to the component. Duration is represented in milliseconds.

For example, to change the notification to disappear after 3 seconds, you can do it like this:

Table

You can use a table in the blade file of your Livewire component like this:

And in Livewire component, you need to add the WithTcTable trait. When you are getting rows for the table (such as $this->users in this example), you can use filters like this:

Clickable rows

It is possible to allow rows to be clickable by adding the href attribute to the x-tc-tr component and passing the value where you want to be redirected.

For example, to redirect to the user profile page with the route name users.show, you can do it like this:

Search filter

Search filter is optional; if you don't need it, you can leave out <x-slot:search></x-slot:search>. In that case, there will be no input for searching the table.

The value of the search input is stored in the tcSearch variable. So, to filter the table based on the value from that field, you need to use $this->tcSearch.

Custom filters

You can add any custom filter you want (In the case above, it's the Only active filter). You can pass any toggle, checkbox, or select input inside the <x-slot:filters> slot.

Per page filter

Per page filter is optional; if you don't need it, you can leave out <x-slot:per-page>.

The value of per page is stored in the tcPerPage variable, and it is 15 by default. To use it, you need to pass $this->tcPerPage to your paginate method, like this:

You can customize the number of rows users can choose by passing values as the options attribute to the x-tc-per-page component. For example, if you want to allow users to choose between 15, 30, and 50, you can do it like this:

Sort by columns

You can allow sorting by any column in the table by adding sortable to the <x-tc-th> component and by passing the key for sorting, which you will use in Livewire components.

For example, if you want to allow sorting by user name, you can do it like this:

And then you can sort results based on name like this:

Name of the sortable column is stored in tcSortable, and direction is stored in the tcSortDirection variable. Direction will be asc by default and will switch between asc and desc on every click.

Pagination

Pagination is optional; if you don't need it, you can leave out <x-slot:pagination></x-slot:pagination>.

Loading spinner

Add <x-tc-loading-spinner /> to your blade and add a target attribute that should match the Livewire action you want to use the spinner for.

If you want to change the style of the spinner, you can add a class with the changes you want to implement.

For example, you can change the size of the spinner like this:

Or if you want to make some other changes, you can publish the view file and do it there.

Drag & drop file upload (Filepond)

To use a field for file uploading, you need to add <x-tc-filepond> to your blade and set wire:model.

When file is uploaded it will be standard Livewire temporary uploaded file (Livewire\Features\SupportFileUploads\TemporaryUploadedFile) and you can save it as any other file upload.

If you want to call a Livewire action immediately after a file is uploaded, you can add callOnUpload to the component and pass the name of the Livewire method you want to be called. For example, to call the saveFile method after a file is uploaded:

You can reset Filepond field from Livewire by dispatching event that will match resetKey of component. For example:

If you want to make other changes, you can publish views and edit the filepond.blade.php file.

Markdown editor (Quill)

To use a Quill text editor, you need to add <x-tc-quill-editor> to your blade and set wire:model (it's not possible to use live or blur).

You can add placeholder text by passing the placeholder attribute to the component.

It's possible to make the editor read-only; just pass the readOnly attribute and set it to be true.

Editor will include all editing options in the toolbar by default. You can configure it by passing the toolbar attribute to the component with the editing options you want to use. For example, if you want to have only the bold, italic, and underline options:

Editor's default toolbar:

If you want to change the theme of the editor or make any other modifications, you can publish views and edit the quill-editor.blade.php file.

Datetime picker (Flatpickr)

To use the datetime picker, you need to add <x-tc-datetime-picker> to your blade and set wire:model.

To add a placeholder, just pass the placeholder attribute to components:

The component allows for different configurations; you can pass attributes to the component to change its configuration.

If you want to make additional changes, you can publish views and edit the datetime-picker.blade.php file.

Testing

Run tests with:

Credits

• Vojislav Dragicevic

License

The MIT License (MIT). Please see License File for more information.