Ranting field for the Filament forms

Installation

You can install the package via composer:

composer require yepsua/filament-rating-field

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-rating-field-views"

Usage

Form Field

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
            ...
        ];
    }
...

By default the range values goes from 1 to 5 and the icon displayed is heroicon-o-star

The rating fields provides several option to customize its behavior. Next some of the more used for:

Disabled

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->disabled()
            ...
        ];
    }
...

Min and max values

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->min(5)
                ->max(10)
            ...
        ];
    }
...

Custom icons and colors

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->icons('heroicon-o-moon', 'heroicon-s-sun')
                ->color('orange')
            ...
        ];
    }
...

Custom size

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->size(10)
            ...
        ];
    }
...

No mouse effects

Disable the mouseenter and mouseleave animation.

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->effects(false)
            ...
        ];
    }
...

Clearable

Allow the user to clear the rating selection.

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->clearable()
                ->clearIconColor('red')
                ->clearIconTooltip('Clear')
            ...
        ];
    }
...

Cursors

The value of the cursor is based on the Tailwind cursor. The prefix cursor- its not required in the value.

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->cursor('default')
                ->clearIconTooltip('none')
            ...
        ];
    }
...

Tooltips

use Yepsua\Filament\Forms\Components\Rating

...
    protected function getFormSchema(): array
    {
        return [
            ...
            Rating::make('rating')
                ->options([
                    'Acceptable',
                    'Good',
                    'Very Good',
                    'Excellent',
                ])
            ...
        ];
    }
...

Field options.

• ->color(): Set the icon colors for the rating field.
• ->disabledColor(): Set the icon color when the field is disabled.
• ->clearIconColor(): Set the color for the clear icon.
• ->icon(): Set the icon for the default items.
• ->selectedIcon(): Set the solid icon for the selected items.
• ->clearIcon(): Set the icon for the clear action.
• ->min(): Set the min value for the rating field. Default: 1
• ->max(): Set the max value for the rating field. Default: 5
• ->width(): Set the width value for each item in the field: Default: 6
• ->height(): Set the height value for each item in the field: Default: 6
• ->size(): Set the same value for the width and height properties.
• ->effects(): Enable\Disable the mouseenter and mouseleave effects. Default: true (enabled)
• ->clearable(): Add a extra icon at the end of the rating icons. Default: false
• ->cursor(): Set the default cursor
• ->disabledCursor(): Set the cursor to be displayed when the field is disabled
• ->clearIconTooltip(): Set the tooltip for the clear icon.

You can review the default value for the options above and others in the class App\Forms\Components\Rating

Table Column

use Yepsua\Filament\Tables\Components\RatingColumn;

// ...
protected function getTableColumns(): array 
{
    return [
        // ..
        RatingColumn::make('rating'),
        // ..
    ];
}
...

RatingColumn options.

• RatingColumn::make('rating')->color() Set the icon colors for the rating field.
• RatingColumn::make('rating')->icon() Set the icon for the default items.
• RatingColumn::make('rating')->selectedIcon() Set the solid icon for the selected items.
• RatingColumn::make('rating')->icons() Set the icons for the default items and for selected items.
• RatingColumn::make('rating')->minValue() Set the min value for the rating field. Default: 1
• RatingColumn::make('rating')->maxValue() Set the max value for the rating field. Default: 5
• RatingColumn::make('rating')->width() Set the width value for each item in the field: Default: 6
• RatingColumn::make('rating')->height() Set the height value for each item in the field: Default: 6
• RatingColumn::make('rating')->size() Set the same value for the width and height properties.
• RatingColumn::make('rating')->options() set tooltip

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Omar Yepez
• All Contributors

License

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