README

Livewire compatible form elements. Styled with Bootstrap 5.

Currently WIP

Created by: SteelAnts s.r.o.

Installation

npm|pnpm|bun i quill quill-table-ui quill-mention

Include scripts

app.js

import './quill';

app.scss

import "./quill";

Examples

Form

Attributes:

• action
• method

<x-form::form method="DELETE" action="action-url">
    ...
</x-form::form>    

<x-form::form wire:submit="save">
    ...
</x-form::form>   

Automatically inserts _method and _token base on method attribute

<form enctype="multipart/form-data" action="action-url" method="POST">
    <input type="hidden" name="_token" value="xxxxxxxx" autocomplete="off">    
    <input type="hidden" name="_method" value="DELETE">
    ...
</form>

<form wire:submit="save" enctype="multipart/form-data">
    ...
</form>

Input

Attributes:

• name - Input name (required for non-livewire use)
• label - Input label (optional)
• help - Help text
• group-class - Class of wrapping element
• value - value

<x-form::input group-class="mb-3" type="text" name="test" id="xxxx" label="Basic input" placeholder="This is placeholder" help="Help text is here"/>

<x-form::input type="text" wire:model="test" label="Livewire input"/>

Select

Attributes:

• name - Input name (required for non-livewire use)
• label - Input label (optional)
• help - Help text
• group-class - Class of wrapping element
• options - Array of values
• value - Selected value (for non-livewire use)
• placeholder - Placeholder (hidden option withou value)
• value - value

@php
    $options = [
        1 => 'one',
        2 => 'two',
        3 => 'three',
    ];
@endphp

<x-form::select wire:model="select" group-class="mb-3" label="Livewire Select" :options="$options" placeholder="Select value..."/>

<x-form::select name="select" group-class="mb-3" label="Basic Select" value="2" :options="$options" placeholder="Select value..."/>

Textarea

Attributes:

• name - Input name (required for non-livewire use)
• label - Input label (optional)
• help - Help text
• group-class - Class of wrapping element
• value - value

<x-form::textarea wire:model="textarea"/>

Quill

• name - Input name (required for non-livewire use)
• label - Input label (optional)
• help - Help text
• group-class - Class of wrapping element
• mentions - Users for @ mentions. (see quill-mention package for more info)
• tags - Hashtags (see quill-mention package for more info)

<x-form::quill
    group-class="mb-3"
    label="Quill"
    name="quill"
    value="This is init value from html"
    :mentions="[{id: 1, value: 'SteelAnts'}]"
    :tags="[{id: 1, value: 'Laravel'}]"
/>
<x-form::quill 
    group-class="mb-3"
    label="Quill" 
    wire:model="quill" 
/>

Button

<x-form::button class="btn-primary" type="submit">submit</x-form::button>

Notes

• Non-livewire elment require name attribute
• Livewire element require wire:model* attribute.
• Values are inserted with old()
• All attributes are passed down to input/select/texarea element.

Development

1. Create subfolder /packages at root of your laravel project

2. clone repository to sub folder /packages (you need to be positioned at root of your laravel project in your terminal)

git clone https://github.com/steelants/Laravel-Form.git ./packages/Laravel-Form

1. edit composer.json file

"autoload": {
	"psr-4": {
		"SteelAnts\\Form\\": "packages/Laravel-Form/src/",
	}
}

1. Add provider to bootstrap/providers.php

return [
	...
    SteelAnts\Form\FormServiceProvider ::class,
	...
];

Contributors

Other Packages

steelants/laravel-auth

steelants/laravel-boilerplate

steelants/datatable

steelants/form

steelants/modal

steelants/laravel-tenant