Laravel Blade components

PHP ^8.0, Laravel ^9.0|^10.0

About

With Laravel Blade components, you can create forms for Blade templates using the components of the package.

Installation

composer require dw-apps/laravel-blade

Components

All components support Laravel session and standard HTML attributes. If the control id attribute is not set, its value will be equal to the name attribute.

All controls has attributes:

• uniq-id - bool = false (Generate uniq id with prefix: 'control-')
• valid-class - bool = 'is-valid'
• invalid-class - bool = 'is-invalid'

Form

<x-form method="put">

Automatically sets the method and csrf. Supports all methods.

Input

<x-input name="control" list="datalist" uniq-id/>

Datalist

<x-datalist id="datalist" :source="$datalist"/>

Attributes:

• source - array (plain / associative)

Error

<x-error name="control"/>

Attributes:

• name - string required
• dot-name - bool = false

Check

<x-check/>

Radio

<x-radio/>

Select controls has attributes placeholder / placeholder-disabled (empty option), which takes a string type argument.

<x-select placeholder="Select a value"/>
<x-select placeholder-disabled="Select a value"/>

Select

<x-select name="select" :source="$datalist"/>
<x-select name="select[]" :source="$datalist" multiple/>

Attributes:

• source - array (plain / associative)

Support groups:

$datalist = [
    'Group label' => [
        'value-1' => 'Label 1',
        ...
    ]
];

Select day

<x-select-day/>

Contains a list of localized names of days of the week with a range of values 0...6.

Select month

<x-select-month/>

Contains a list of localized month names with a range of values 1...12.

Select range

<x-select-range start="a" end="z"/>

Attributes:

• start - string | int | float = 0
• end - string | int | float = 0
• step - int | float = 1

See: https://www.php.net/manual/en/function.range.php

Select timezone

<x-select-timezone/>

Contains a list of timezones names.

Select UTC

<x-select-utc/>

Contains a list of UTC zones names, with key / value pairs: '-12:00' => 'UTC−12:00' etc.

Textarea

<x-textarea/>