lloadout/components

This package is abandoned and no longer maintained. No replacement package was suggested.

With LLoadout Components you will pull in the best off class Laravel frontend components.

0.9.4 2024-03-12 20:40 UTC

This package is auto-updated.

Last update: 2024-03-13 13:37:09 UTC


README

LLoadout_components.png

Downloads

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

select.png

@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

barchart-horizontal.png

<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

barchart-stacked.png

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

piechart.png

<x-load-piechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-piechart>

Linechart

linechart.png

<x-load-linechart title="Provide a title" chartkey="your-name" key="delayed-{{ now() }}" :data="[10,20,70]" :labels="['a']"></x-load-linechart>

Signature

signature.gif

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" />