lloadout / components
With LLoadout Components you will pull in the best off class Laravel frontend components.
Requires
- php: ^7.4|^8.0|^8.1|^8.2
- blade-ui-kit/blade-ui-kit: ^0.4
- livewire/livewire: ^2.0|^3.0
Requires (Dev)
- phpunit/phpunit: ^9.5
README
Components
With LLoadout Components you will pull in the best off class Laravel frontend components. We don't re-invent the wheel but we bring the best components together.
Installation
composer require lloadout/components
Dependencies
Extra LLoadout components
Some of the components listed above are missing some features, features we provide. The components provide by LLoadout are prefixed with 'load'.
Load the assets
@lloadoutScripts
Select
@php($options = [1 => 'first', 2 => 'second'])
<x-load-select name="your-name" :options="$options" class="searchable"></x-load-select>
This markup will render as
<select name="your-name">
<option value="1">first</option>
<option value="2">second</option>
</select>
You can pass in any iterable keyed by a key value pair. If you add a class 'searchable' , the select field changes into a searchable select2 field.
Graphs
The charts components make use of apexcharts. Only three types of graphs are implemented in lloadout for now. I only created a basic implementation, if you want to add more power to the graphics I refer to Apex Charts itself.
All charts have three params
- title : the title for the graph
- data : an array of data
- labels : an array of labels
The bar chart has an extra param
- orientation : this can be 'horizontal' or 'vertical'
Barchart
<x-load-barchart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" orientation='horizontal' :data="[10,20,70]" :labels="['a']"></x-load-barchart>
Stacked barchart
For the stacked barchart you can use the same tag as for the simple barchart , it takes an array of arrays as data<x-load-barchart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" orientation='horizontal' :data="[[10,20,70],[10,20,70],[10,20,70]]" :labels="['a']"></x-load-barchart>
Piechart
<x-load-piechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-piechart>
Linechart
<x-load-linechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-linechart>
Signature
This signature component will create a textfield in your html , in that textfield a base64 encoded png stream will be stored.
<x-load-signature name="my-signature" width="400" height="400" background="white" color="black" />