A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards.

Overview

TALL multiselect cards

tall-multiselect-cards-preview

A TALL-based Laravel Livewire component to replace the (multiple) select HTML input form with beautiful cards.

Table of contents

1. Features

  • Easy to use replacement for select multiple HTML input elements.
  • Cards which show up to 3 model attributes
  • Optional: Search
  • Optional: "Load more ..." (Eloquent pagination)

2. Usage

2.1 Livewire component

The package provides a Livewire component that you can use everywhere in your Laravel project - e.g. within modals, forms or landing pages.

2.1.1 Sample

Add the component into your blade views like usual.

<div class="bg-gray-100">
  @livewire('tall-multiselect-cards', ['identifier' => 'User'])
</div>

Please take note that you'll need to determine which configuration the component should use by adding the necessary identifier parameter.

2.2 Emitted event

The component emits an event when a user clicks the Save button which allows you to interact with the component.

The emitted event name will be suffixed by the chosen identifier (see Configuration values - [1]) to use the component multiple times (and perhaps at the same page). It contains an array of the model IDs (value of the model attribute that you've configured to use as uniqueId attribute) that were selected by checking the cards.

2.2.1 Sample event / implementation

  • Event name: tall-multiselect-cards-User
  • Event data: [2, 4, 42]

Note: When no cards are selected, the event will be emitted and contains an empty array.

Other components need to listen to the event and call a method to process it further. When you're not familiar with event listening in Livewire, please take a look at the offical Livewire documentation.

Sample: Refactoring a Livewire component that accepted and processed form input using wire:model="state.users" before.

class AwesomeForm extends Component
{
    public $state = [];
 
    protected $listeners = ['tall-multiselect-cards-User' => 'addSelectedUsers'];
 
    public function addSelectedUsers($value)
    {
        // Do whatever you want... validation, processing, etc...
        $this->state['users'] = $value;
    }
}

3. Installation

This package requires PHP 8.0, Laravel 8.0 and Livewire 2.5 or higher.

Installation via composer:

composer require codeadminde/tall-multiselect-cards

3.1 Views

The package provides pre-designed views that are prepared to use TailwindCSS (v2). To use these, please make sure you've already installed Tailwind CSS. You'll find the official installation guide at https://tailwindcss.com/docs/guides/laravel

If you want to change/override the provided views, feel free to publish them via:

php artisan vendor:publish --tag=tall-multiselect-cards-views

You'll find the views in resources/views/vendor/tall-multiselect-cards/ after publishing.

3.2 Language

The translation is provided via languages files for the following languages:

  • English (en)
  • German (de)

If you want to change/override the provided language files, feel free to publish them via:

php artisan vendor:publish --tag=tall-multiselect-cards-lang

You'll find the language files in resources/lang/vendor/tall-multiselect-cards/ after publishing.

4. Configuration

The default configuration is prepared to use the package with Laravel's default User model. If you want to change the default configuration, feel free to publish the configuration file via:

php artisan vendor:publish --tag=tall-multiselect-cards-config

You'll find the config file at config/tall-multiselect-cards.php after publishing.

4.1 Configuration values

The following default configuration will be shipped with the package. You can use it directly with the Laravel default User model:

    'User' => [ // [1]
        'model' => 'App\Models\User', // [2]
        'attributes' => [  // [3]
            'uniqueId' => 'id', // unique model id (string)
            'primary' => 'name', // string OR NULL
            'secondary' => 'email',  // string OR NULL
            'optional' => NULL,  // string OR NULL
        ],
        'settings' => [ // [4]
            'paginate_data' => true, // [4.1] (boolean)
            'paginate_data_per_page' => 15, // [4.2] (integer)
            'enable_optional_brackets' => false, // [4.3] (boolean)
            'hide_search' => false, // [4.4] (boolean)
            'search_color_focus' => 'blue-400', // [4.5]
            'search_color_bg_focus' => 'blue-100', // [4.5]
            'card_color_bg' => 'white', // [4.5]
            'card_color_bg_hover' => 'blue-100', // [4.5]
            'card_color_bg_focus' => 'blue-100', // [4.5]
            'card_color' => 'gray-500', // [4.5]
            'card_color_selected' => 'blue-600', // [4.5]
            'card_color_hover' => 'blue-400', // [4.5]
            'card_color_focus' => 'blue-400', // [4.5]
            'primary_button_color_bg' => 'gray-800', // [4.5]
            'primary_button_color_bg_hover' => 'gray-700', // [4.5]
            'primary_button_color_bg_focus' => 'gray-700', // [4.5]
            'primary_button_color_text' => 'white', // [4.5]
            'primary_button_color_text_hover' => 'white', // [4.5]
            'primary_button_color_text_focus' => 'white', // [4.5]
            'secondary_button_color_border' => 'gray-600', // [4.5]
            'secondary_button_color_border_hover' => 'gray-400', // [4.5]
            'secondary_button_color_border_focus' => 'gray-400', // [4.5]
            'secondary_button_color_text' => 'gray-900', // [4.5]
            'secondary_button_color_text_hover' => 'gray-400', // [4.5]
            'secondary_button_color_text_focus' => 'gray-400', // [4.5]
        ]
    ],
  • [1] Identifier: Provide a string that identifies the specific configuration / component. Note that this value should only contain alpha_dash chars.
  • [2] model: FQCN of the model class that you want to use with the component.
  • [3] attributes: Model attributes that you want to display as card content.
    • Important: uniqueId won't be shown as card content and need to be set to the attribute that contains the model ID (or UUID). That's usually the id column in your database.
  • [4] settings: Array of settings for the component.
    • [4.1] paginate_data: Enable or disable pagintion.
      • Enabled: The component loads only the configured number ([4.2]) of models from the database. A "Load more ..." link will be shown to add the configured number ([4.2]) of models until all models are loaded.
      • Disabled: The component loads all models from the database at once.
    • [4.2] paginate_data_per_page: The amount of cards
      • that will be loaded initially and
      • that will be added when loading more models.
    • [4.3] enable_optional_brackets: Enable or disable brackets for the optional card position. You should disable this option when you set attributes.optional to NULL.
      • Enabled: The optional attribute value will be displayed within brackets.
      • Disabled: The optional attribute value will be displayed without brackets.
    • [4.4] hide_search: Enable or disable search input.
    • [4.5] *_color_*: Feel free to edit the color schema of the component. The configuration items were chosen self-explanatory to ensure easy styling. You can use every color that's provided by TailwindCSS color palette.

All config values are required and need to return a string unless otherwise stated.

5. Macros

The available macros allow you to manipulate the retrieved data. Just add them to the boot method of your applications ServiceProvider. (e.g. 'AppServiceProvider').

5.1 query

To extend / override the database query that loads the initial data, implement the query macro.

Sample:

TallMultiselectCards::macro('query', function ($model, $selectedAttributes)
{
    return $model::select($selectedAttributes)->where('is_suspended', false);
});

5.2 filter

Implement the filter macro if you want to manipulate the collection returned by the database query.

TallMultiselectCards::macro('filter', function ($collection)
{
    $filtered = $collection->filter(function ($item) {
        if (!$item->is_expired) {
            return $item;
        }
    });

    return $filtered;
});

Note: You should only filter and not manipulate the items themselves, as the collection will be processed further.

6. Tests

Please install the dev-dependencies first. Then you'll be able to run the tests via composer:

  • Testing with testbench binary: composer test
  • Testing with PHPUnit binary: composer test-p

7. Feedback / Support / Security

Please reach out to me at [email protected] for feedback or if you'll need support.

If you find security-related issues, please do not use the issue tracker instead, contact me via email.

8. License

The content of this repository is released under the MIT license.

The check-circle SVG is licensed under the MIT license and provided by tailwindlabs/heroicons.

You might also like...
Livewire component that provides you with a modal that supports multiple child modals while maintaining state.
Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

About Wire Elements Modal Wire Elements Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintai

Composer package which adds support for HTML5 elements using Laravels Form interface (e.g. Form::date())

Laravel HTML 5 Inputs Composer package which adds support for HTML5 elements by extending Laravel's Form interface (e.g. Form::date()) Adds support fo

A sample application with a multistep form built with Livewire.

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Laravel-comments-livewire - Livewire components for the laravel-comments package
Laravel-comments-livewire - Livewire components for the laravel-comments package

Associate comments and reactions with Eloquent models This package contains Livewire components to be used with the spatie/laravel-comments package. S

Register for multiple Livestorm sessions from an external form. Practical use of Livestorm API with PHP/Javascript.

Livestorm Multi Session Registration Register for multiple Livestorm sessions from an external form. Practical use of Livestorm API with PHP/Javascrip

Library that offers Input Filtering based on Annotations for use with Objects. Check out 2.dev for 2.0 pre-release.

DMS Filter Component This library provides a service that can be used to filter object values based on annotations Install Use composer to add DMS\Fil

A laravel Livewire Dynamic Selects with multiple selects depending on each other values, with infinite levels and totally configurable.
A laravel Livewire Dynamic Selects with multiple selects depending on each other values, with infinite levels and totally configurable.

Livewire Combobox: A dynamic selects for Laravel Livewire A Laravel Livewire multiple selects depending on each other values, with infinite levels of

Laravel 9 Livewire Multiple Image Upload Example
Laravel 9 Livewire Multiple Image Upload Example

Laravel livewire multiple image upload; Through this tutorial, i am going to show you how to upload multiple image using livewire in laravel apps.

Laravel Package to generate CRUD Files using TALL Stack
Laravel Package to generate CRUD Files using TALL Stack

tall-crud-generator Laravel Package to generate CRUD Files using TALL Stack Requirements Make sure that Livewire is installed properly on your project

Comments
  • Laravel 9 support

    Laravel 9 support

    Hi could you update it to support Laravel v9?

    - codeadminde/tall-multiselect-cards[v1.1.0, ..., v1.1.2] require laravel/framework ^8.0 -> found laravel/framework[v8.0.0, ..., 8.x-dev] but it conflicts with your root composer.json require (^9.0).

    opened by mraf 2
  • php requirement

    php requirement

    Please, relax php requirement to 7.4. From what i can see woks perfectly and the component will have a much wider audience.

    If you want, take a look to my fork, my usecase is insert the component in a form with other fields and I would like to use the form submit button instead of the internal component one. Surely there is a better way to do it than i did :), but i think could be useful to others also.

    Thank you!

    opened by zetanext 1
Releases(v2.0.0)
  • v2.0.0(Oct 20, 2022)

    This version brings compatibility with Laravel 9.

    • To make compatibility with Laravel 9, it was necessary to rename the variable attributes within this package. The variable name is now modelAttributes. Furthermore the dependencies were updated to match for Laravel 9.

    Breaking change

    Since this means a breaking change, today's release marks the beginning of version 2.0.0. :-)

    Attention: To upgrade from version 1.x.x to version 2.0.0 you have to rename the variable attributes to modelAttributes within the config file for this package (config/tall-multiselect-cards.php). This is only necessary if you've published the config file within your app. Otherwise the supplied configuration file will be loaded.

    You'll find a sample of the change within this commit: https://github.com/CodeAdminDe/tall-multiselect-cards/commit/670b7bca7a53a96eb795832c8179b4e0985c4a85#diff-83c900b361c73997e4f8f453ed6ff1345564690d2ac140dede07003e93b12797

    Source code(tar.gz)
    Source code(zip)
Owner
Frederic Habich
Open to new challenges #pride #admin #dev #linux #docker #php
Frederic Habich
Example of using TALL stack to select country phone code.

Select country phone code using TALL stack About Example of using TALL stack to select country phone code. Each item represents a country. Each item h

Fernando Chagas 3 Jul 27, 2022
Livewire component for dependant and/or searchable select inputs

Livewire Select Livewire component for dependant and/or searchable select inputs Preview Installation You can install the package via composer: compos

Andrés Santibáñez 441 Dec 19, 2022
Html-sanitizer - The HtmlSanitizer component provides an object-oriented API to sanitize untrusted HTML input for safe insertion into a document's DOM.

HtmlSanitizer Component The HtmlSanitizer component provides an object-oriented API to sanitize untrusted HTML input for safe insertion into a documen

Symfony 201 Dec 23, 2022
Enjoy realtime input validation by passing your rules in your input itself.

Laravel Realtime input Enjoy realtime input validation by passing your rules in your input itself. Requirments This package is tested with Laravel v8

Yemeni Open Source 50 Nov 20, 2022
A collection of tools for rapidly building beautiful TALL stack interfaces, designed for humans.

Filament is a collection of tools for rapidly building beautiful TALL stack interfaces, designed for humans. Packages Admin Panel • Documentation • De

Filament 5.4k Jan 4, 2023
A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel

Laravel TALL Preset A front-end preset for Laravel to scaffold an application using the TALL stack, jumpstarting your application's development. If yo

Laravel Frontend Presets 1.8k Jan 7, 2023
Laravel Livewire form component with declarative Bootstrap 5 fields and buttons.

Laravel Livewire Forms Laravel Livewire form component with declarative Bootstrap 5 fields and buttons. Requirements Bootstrap 5 Installation composer

null 49 Oct 29, 2022
A dynamic Laravel Livewire component for multi steps form

Livewire component that provides you with a wizard that supports multiple steps form while maintaining state.

Vildan Bina 233 Jan 4, 2023
Livewire Notifier is a simple notifications system with zero dependencies above TALL-stack

Livewire Notifier is a simple notifications system with zero dependencies above TALL-stack (Tailwind CSS, Alpine.JS, Laravel and Livewire).

CodeSPB 18 Jul 27, 2022
Livewire component that provides you with a modal that supports multiple child modals while maintaining state.

About LivewireUI Modal LivewireUI Modal is a Livewire component that provides you with a modal that supports multiple child modals while maintaining s

Livewire UI 806 Jan 6, 2023