genealabs / laravel-casts
Useful form macros for Laravel's Blade template engine.
Fund package maintenance!
mikebronner
Installs: 108 256
Dependents: 1
Suggesters: 0
Security: 0
Stars: 95
Watchers: 10
Forks: 11
Open Issues: 23
Requires
- fico7489/laravel-eloquent-join: ^4.1
- illuminate/config: ^8.0
- illuminate/support: ^8.0
- jenssegers/model: ^1.4
- laravelcollective/html: ^6.1
- livewire/livewire: ^2.0
- wa72/htmlpagedom: ^2.0
Requires (Dev)
- fzaninotto/faker: ^1.9
- orchestra/testbench: ^6.0
- orchestra/testbench-browser-kit: ^6.0
- php-coveralls/php-coveralls: ^2.2
- phpunit/phpunit: ^9.0
- symfony/thanks: ^1.2
- dev-master
- 0.13.3
- 0.13.2
- 0.13.1
- 0.13.0
- 0.12.7
- 0.12.6
- 0.12.5
- 0.12.4
- 0.12.3
- 0.12.2
- 0.12.1
- 0.12.0
- 0.11.14
- 0.11.13
- 0.11.12
- 0.11.11
- 0.11.10
- 0.11.9
- 0.11.8
- 0.11.7
- 0.11.6
- 0.11.5
- 0.11.4
- 0.11.3
- 0.11.2
- 0.11.1
- 0.11.0
- 0.10.10
- 0.10.9
- 0.10.8
- 0.10.7
- 0.10.6
- 0.10.5
- 0.10.4
- 0.10.3
- 0.10.2
- 0.10.1
- 0.10.0
- 0.9.0
- 0.8.2
- 0.8.1
- 0.8.0
- 0.7.21
- 0.7.20
- 0.7.19
- 0.7.18
- 0.7.17
- 0.7.16
- 0.7.15
- 0.7.14
- 0.7.13
- 0.7.12
- 0.7.11
- 0.7.10
- 0.7.9
- 0.7.8
- 0.7.7
- 0.7.6
- 0.7.5
- 0.7.4
- 0.7.3
- 0.7.2
- 0.7.1
- 0.7.0
- 0.6.15
- 0.6.14
- 0.6.13
- 0.6.12
- 0.6.11
- 0.6.10
- 0.6.9
- 0.6.8
- 0.6.7
- 0.6.6
- 0.6.5
- 0.6.4
- 0.6.3
- 0.6.1
- 0.6.0
- 0.5.19
- 0.5.18
- 0.5.17
- 0.5.16
- 0.5.15
- 0.5.14
- 0.5.13
- 0.5.12
- 0.5.11
- 0.5.10
- 0.5.9
- 0.5.8
- 0.5.7
- 0.5.6
- 0.5.5
- 0.5.4
- 0.5.3
- 0.5.2
- 0.5.1
- 0.5.0
- 0.4.13
- 0.4.12
- 0.4.11
- 0.4.10
- 0.4.9
- 0.4.8
- 0.4.7
- 0.4.6
- 0.4.5
- 0.4.4
- 0.4.3
- 0.4.2
- 0.4.1
- 0.4.0
- 0.3.15
- 0.3.14
- 0.3.13
- 0.3.12
- 0.3.11
- 0.3.10
- 0.3.9
- 0.3.8
- 0.3.7
- 0.3.6
- 0.3.5
- 0.3.4
- 0.3.3
- 0.3.2
- 0.3.1
- 0.3.0
- 0.2.4
- 0.2.3
- 0.2.2
- 0.2.1
- 0.2.0
- 0.1.4
- 0.1.3
- 0.1.2
- 0.1.1
- 0.1.0
- dev-feature/upgrade-to-blade-components
- dev-fix-trix-2.0
- dev-make-phone-number-international
- dev-fix-amount-field
- dev-dependabot/add-v2-config-file
- dev-laravel-5.6
- dev-laravel-5.5
- dev-laravel-5.4
This package is auto-updated.
Last update: 2024-09-23 14:47:19 UTC
README
Casts for Laravel
Requirements
- PHP >= 7.1.3
- Laravel >= 5.5
jQuery
needs to be already loaded in your projectBootstrap JS
(3 or 4) needs to be already loaded, if being used
Rationale
This package is an effort to streamline and make form development more efficient in Laravel Blade views.
Features
- Support for common CSS frameworks. (At this time only Bootstrap 3 and Bootstrap 4.beta, more coming soon.)
- Blade directives for elegant Blade view integration, providing concise syntax, reducing form boilerplate 10-fold.
- DateTime Picker for Bootstrap 3.
Installation
- Install the package:
composer require genealabs/laravel-casts
- Publish the required assets:
php artisan casts:publish --assets
Usage
The following shows all elements using Bootstrap 3:
Blade Directives
The following Blade directives developing forms a snap:
@form(['url' => '']) @errors("intro text", ["html" => "attributes"]) @text('text', '', ['placeholder' => 'Placeholder Text', 'label' => 'Text Input']) @number('number', '', ['placeholder' => 'Placeholder Text', 'label' => 'Number Input']) @password('password', ['placeholder' => 'Placeholder Text', 'label' => 'Password Input']) @date('date', '', ['placeholder' => 'Placeholder Text', 'label' => 'Date']) @datetime('datetime', '', ['placeholder' => 'Placeholder Text', 'label' => 'DateTime']) @email('email', '', ['placeholder' => 'Placeholder Text', 'label' => 'Email Input']) @url('url', '', ['placeholder' => 'Placeholder Text', 'label' => 'Url Input']) @search ('search', 'search term', ['placeholder' => 'Placeholder Text', 'label' => 'Search Input']) @color ('color', '#ff0000', ['placeholder' => 'Placeholder Text', 'label' => 'Color Input']) @range ('range', 5, ['placeholder' => 'Placeholder Text', 'label' => 'Range Input']) @tel ('tel', '1234567890', ['placeholder' => 'Placeholder Text', 'label' => 'Tel Input']) @week ('week', 3, ['placeholder' => 'Placeholder Text', 'label' => 'Week Input']) @month ('month', 'January', ['placeholder' => 'Placeholder Text', 'label' => 'Month Input']) @file('file', ['placeholder' => 'Placeholder Text', 'label' => 'File Input']) @textarea('textarea', '', ['placeholder' => 'Placeholder Text', 'label' => 'Textarea', 'rows' => 7]) @checkbox('checkbox', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Checkbox']) @radio('radio', 'test', true, ['placeholder' => 'Placeholder Text', 'label' => 'Radio']) @switch('fieldname', 'true value', $isChecked, ['label' => 'Switch', 'label' => 'Switch', 'onText' => 'Available', 'onColor' => 'success', 'offText' => 'Unavailable', 'offColor' => 'danger']) @select('select', [1, 2, 3, 4], null, ['placeholder' => 'Placeholder Text', 'label' => 'Select']) @selectMonths('select_months', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select']) @selectWeekdays('select_weekdays', null, ['placeholder' => 'Placeholder Text', 'label' => 'Select Weekdays']) @selectRange('selectRange', 1, 21, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range']) @selectRangeWithInterval('selectRangeWithInterval', 1, 21, 3, null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Select Range With Interval']) @combobox('combobox', [1, 2, 3, 4], null, ['class' => 'form-control', 'placeholder' => 'Placeholder Text', 'label' => 'Combobox']) @submit('submit', ['class' => 'btn btn-success', 'label' => 'Submit Button']) @endform
@form
/ {!! Form::open() !!}
@form ($model, ['class' => '', 'labelWidth' => '', 'fieldWidth' => '', 'framework' => ''])
$model
: (optional) used to pre-populate a model-based form.class
: (optional)offset
: (optional, default: 3)labelWidth
: (optional, default: 3)fieldWidth
: (optional, default: 9)framework
: (optional)
@errors
/ {!! Form::errors() !!}
@errors (string $intro = "", array $options = [])
$intro
: an optional brief pre-text to the errors list.$options
: (default: []) will be rendered as html tag attributes.
@label
/ {!! Form::label() !!}
@label ($name, $label = null, array $options = [], $escapeHtml = true)
$name
: used for thefor=
attribute on the label.$label
: (default: null) the label text.$options
: (default: []) array of options, includingclass
.$escapeHtml
: (default: true) set this to false if your label should render HTML.
Note: labels are rendered automatically when using frameworks.
Input controls
The following controls use the same syntax:
@text
/{!! Form::text() !!}
@date
/{!! Form::date() !!}
@datetime
/{!! Form::datetime() !!}
@email
/{!! Form::email() !!}
@url
/{!! Form::url() !!}
@textarea
/{!! Form::textarea() !!}
@text ($name, $value = null, $options = [])
$name
: name of the control, used to submit form values.$value
: (default: null) value of the control, if you need to prepopulate it. It will automatically populate old form values if validation fails.$options
: (default: []) array of options, includingclass
.
@switch
/ {!! Form::switch() !!}
@switch ('fieldname', 'active value', $isActivated, [label' => 'Switch', 'onText' => 'Available', 'offText' => 'Unavailable', 'onColor' => 'success', 'offColor' => 'danger'])
@select
/ {!! Form::select() !!}
@select ($name, $list = [], $selected = null, $options = [])
$name
: name of the control, used to submit form values.$list
: (default: []) array of key-value pairs used to create the select list options.$selected
: (default: null) the value of the selected options.$options
: (default: []) array of options, includingclass
.
@selectMonths
/ {!! Form::selectMonths() !!}
@selectMonths ($name, $selected = null, $options = [])
$name
: name of the control, used to submit form values.$selected
: (default: null) the value of the selected options.$options
: (default: []) array of options, includingclass
.
@selectWeekdays
/ {!! Form::selectWeekdays() !!}
@selectWeekdays ($name, $selected = null, $options = [])
$name
: name of the control, used to submit form values.$selected
: (default: null) the value of the selected options.$options
: (default: []) array of options, includingclass
.
@selectRangeWithInterval
/ {!! Form::selectRangeWithInterval() !!}
@selectRangeWithInterval(string $name, int $start, int $end, int $interval, int $value = null, array $options = [])
$name
: name of the control, used to submit form values.$start
: starting value of the list.$end
: ending value of the list.$interval
: interval value.$value
: selected value.$options
: (default: []) array of options, includingclass
.
CSS Framework Support
Taking advantage of framework support will handle all error validation presentation, as well as generation of labels and all the necessary form control boilerplate.
Additional framework support is planned, possibly including:
- Foundation
- Skeleton
- Semantic UI
If there's a framework you would like included, feel free to reach out by opening an issue with the pertinent details.
Bootstrap 3
To have a form render for Bootstrap 3, specify the framework and form
orientation in the @form
directive:
@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap3'])
Additionally, to enable the date/time picker, add the following to your JavaScript file for the page rendering the date fields:
if (window.$) { $(function () { if ( $.isFunction($.fn.datetimepicker) ) { $('input[type=date]').datetimepicker({ format: 'LL' }); $('input[type=datetime]').datetimepicker({ format: 'LLL', sideBySide: true }); } }); }
You can include the library using Gulp and NPM (preferred), or use a CDN.
Gulp / NPM
npm install save-dev bootstrap-datetimepicker-npm
- Then require the library in your
/resources/assets/js/app.js
file (after jQuery and Bootstrap have been required):
require('bootstrap-datetimepicker-npm');
- Don't forget to include the CSS as well in
/resources/assets/sass/app.sass
:
// DateTimePicker
@import "./node_modules/bootstrap-datetimepicker-npm/src/sass/bootstrap-datetimepicker-build";
- Finally, edit your
/gulpfile.js
as needed, and rungulp
.
CDNs
Add the following references to the page(s) or your main layout file. You will need to have jQuery and Bootstrap libraries included as well.
<html> <head> <!-- ... --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css"> <!-- ... --> </head> <body> <!-- ... --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"></script> <script src="https://cdn.jsdelivr.net/bootstrap.datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script> </body> </html>
Bootstrap 4 (alpha 3)
Nearly the same as above:
@form(['url' => '', 'class' => 'form-horizontal', 'framework' => 'bootstrap4'])
Testing
- Add the following entry to your
phpunit.xml
config file:
<directory suffix="Test.php">./vendor/genealabs/laravel-casts/tests</directory>
- Run `vendor/bin/phpunit` from the base directory of your project.