Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yepsua/filament-rating-field
Rating field for the Filament forms.
https://github.com/yepsua/filament-rating-field
Last synced: about 1 month ago
JSON representation
Rating field for the Filament forms.
- Host: GitHub
- URL: https://github.com/yepsua/filament-rating-field
- Owner: yepsua
- License: mit
- Created: 2022-05-26T21:09:24.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-10-19T17:09:50.000Z (2 months ago)
- Last Synced: 2024-10-19T22:25:58.972Z (2 months ago)
- Language: PHP
- Size: 73.2 KB
- Stars: 49
- Watchers: 1
- Forks: 16
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-filament - yepsua/filament-rating-field - Rating field for the Filament forms. (Fields)
README
# Ranting field for the Filament forms
[](https://packagist.org/packages/yepsua/filament-rating-field)
[](https://github.com/yepsua/filament-rating-field/actions?query=workflow%3Arun-tests+branch%3Amaster)
[](https://github.com/yepsua/filament-rating-field/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amaster)
[](https://packagist.org/packages/yepsua/filament-rating-field)
## Installation
You can install the package via composer:
```bash
composer require yepsua/filament-rating-field
```
Optionally, you can publish the views using
```bash
php artisan vendor:publish --tag="filament-rating-field-views"
```
## Usage
### Form Field
```php
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*
```php
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->disabled()
...
];
}
...
```
#### *Min and max values*
```php
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->min(5)
->max(10)
...
];
}
...
```
#### *Custom icons and colors*
```php
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*
```php
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.
```php
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.
```php
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](https://tailwindcss.com/docs/cursor). The prefix `cursor-` its not required in the value.
```php
use Yepsua\Filament\Forms\Components\Rating
...
protected function getFormSchema(): array
{
return [
...
Rating::make('rating')
->cursor('default')
->clearIconTooltip('none')
...
];
}
...
```
#### *Tooltips*
```php
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
```php
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
```bash
composer test
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.
## Contributing
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/master/CONTRIBUTING.md) for details.
## Security Vulnerabilities
Please review [our security policy](../../security/policy) on how to report security vulnerabilities.
## Credits
- [Omar Yepez](https://github.com/oyepez003)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.