TallStackUI, Without Livewire

# Concept

TallStackUI is a component library designed for Livewire, but after many requests from the community, we have adapted TallStackUI to work perfectly well outside of Livewire components. Give a form component a name instead of a wire:model and it renders a hidden input carrying the value, so the server receives it like any other field. value seeds the initial state.

Components that CANNOT be used out of a Livewire component ❌

KeyValue
Loading
Reaction
Signature
Upload

Any other component not listed above can be used outside of Livewire components. Livewire's script still has to be on the page, since that is where AlpineJS comes from.

Starting from v4, the table component no longer requires the Livewire context.

# Example

<form action="{{ route('users.profile') }}" method="post">
    @csrf
 
    <x-input label="Name" name="input" :value="old('name')" />
 
    <x-password label="Password" name="pass" :value="old('pass')" />
 
    <x-textarea label="Description" name="textarea" :value="old('textarea')" />
 
    <x-number label="Quantity of Users" name="number" :value="old('number')" />
 
    <x-pin label="Security Code" length="4" name="pin" :value="old('pin')" />
 
    <x-color label="Favorite Color" name="color" :value="old('color')" />
 
    <x-range label="Minimum Quantity" name="range" :value="old('range')" />
 
    <x-checkbox label="Accept the Terms" name="checkbox" :value="old('checkbox')" />
 
    <x-radio label="Receive Notification" name="radio" :value="old('radio')" />
 
    <x-toggle label="Enable Notifications" name="toggle" :value="old('toggle')" />
 
    <x-select.styled :options="['TALL', 'LIVT']"
                     label="Select One Option"
                     name="select_options"
                     searchable
                     :value="old('select_options')" />
 
    <x-select.styled :request="route('api.users')"
                     select="label:name|value:id"
                     label="Search User Through API"
                     name="search_api"
                     :value="old('search_api')" />
 
    <x-tag label="Frameworks" name="frameworks" :value="['Laravel', 'Symfony', 'CodeIgniter']" />
 
    <x-date label="DoB" name="dob" value="2024-02-27" />
 
    <x-time label="Preferred Hour" name="hour" value="02:30 PM" />
 
    <x-button type="submit">
        Submit
    </x-button>
 
</form>

# Table

NEW

Pagination becomes anchors built from the URLs the paginator already exposes, sorting becomes an anchor carrying the inverted direction, and the filter rewrites location through AlpineJS. loading needs wire:loading and is not rendered.

<!-- The three features that needed a round trip now travel through the query string -->
 
<x-table :$headers
         :rows="$users"
         :sort="request('sort', ['column' => 'id', 'direction' => 'desc'])"
         filter
         paginate />

# Parse Request Value

Some components, such as: select.styled, date, tags and some others, send an array to the backend when the form is submitted. In these cases you must use the PHP json_decode function to access the items of the array.

1) Preparing the form:

<form action="{{ route('users.profile') }}" method="post">
    @csrf
 
    <x-tag label="Frameworks"
           name="frameworks"
           :value="['Laravel', 'Symfony', 'CodeIgniter']" />
 
    <x-select.styled :options="['TALL', 'LIVT']"
                     label="Select One Option"
                     name="select_options"
                     searchable
                     multiple
                     :value="old('select_options')" />
 
     <x-date label="Vacation Dates"
             name="vacation"
             range
             :value="['2024-02-26', '2024-02-27']" />
 
    <x-button type="submit">
        Submit
    </x-button>
 
</form>

2) Intercepting the request and parsing it using json_decode to access the array of items:

namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class RegisterController extends Controller
{
    // ...
 
    public function store(Request $request)
    {
        $tagFrameworks = json_decode($request->get('frameworks')); 
 
        $selectOptions = json_decode($request->get('select_options')); 
 
        $vacationDates = json_decode($request->get('vacation')); 
 
        dd($tagFrameworks, $selectOptions, $vacationDates);
 
        // ...
    }
}

# Table NEW

# Table

NEW