TALLUI Form Components W-I-P

TALLUI Form Components is a Laravel package that ships 23 Blade components for building forms. The package can be used solely with Laravel or as part of TALLUI.

Components

• Button
• ButtonSend
• Checkbox
• ColorPicker
• DatePicker
• DateRangePicker
• Fieldset
• FileUpload
• Form
• Input
• InputEmail
• InputPassword
• Label
• MarkdownEditor
• MultiSelect
• RadioGroup
• Range
• Repeater
• RichTextEditor
• Select
• Textarea
• Toggle
• Validation

Features

TALLUI Components offer

• Simple Blade syntax, modern templating
• Basic Tailwind CSS classes
• Individual styling with Tailwind CSS
• Reactivity made with Livewire and Alpine
• Accessibility through WAI Aria attributes
• A consistent API for integration

Usage

The components can be used as part of TALLUI or completely solely in any Laravel project. They are a short way to accomplish a consistent and reactive UI as well as a clear API to develop with these components.

This example is from Web Components, should be a Basic Form either

One of the simplest examples is the ToC Component, that renders a list of anchor-links based on your contents headings:

<x-tui-toc>{!! $html !!}</x-toc>

This will render to:

<ul>
    <li>
    	<a href="#first-heading">First Heading</a>
        <ul>
            <li>
	            <a href="#first-sublevel">First Sublevel</a>
            </li>
        </ul>
    </li>
</ul>

TALLUI Components offer variants, options and usage of Tailwind CSS Classes:

<x-tui-toc-md levels=3 class="list-disc list-inside">
# First Heading
I love **TALL**UI.

## First Sublevel
Because it makes fun.
</x-tui-toc-md>

Requirements

If you use the components as part of TALLUI, the only requirement is TALLUI Core. If you want to use it solely, you can use Laravel Jetstream or require the TALL-Stack, means

• PHP 8.1
• Laravel 9
• Laravel Livewire 2
• Alpine.js 3
• Tailwind CSS 3
• Coloris used by ColorPicker
• Flatpickr used by DatePicker
• Date Range Picker used by DateRangePicker
• Dropzone used by FileUpload
• Easy MarkDown Editor used by MarkdownEditor
• Quill used by RichTextEditor
• Select2 used by Multiselect

Installation

Clear your config cache before installing a new package:

php artisan config:clear

Then install the package by running:

composer require usetall/tallui-web-components

Including Scripts and Styles

Some of the TALLUI Components require additional CSS and JavaScript. If you are using TALLUI Core as dependency, it will automatically care for the inclusion and asset-pipelining. If you use it solely, you can use following directives:

• Use '@tuiStyles' Within your
• and '@tuiScripts' right before your closing

If you always want the directives to be executed, even when app.debug is disabled, you can force them to load the CDN links by passing a true boolean:

@tuiStyles(true)
@tuiScripts(true)

Libraries are only loaded for components that are enabled through the components config option.

Configuration

By default all available components are enabled. If you want to change this behavior, you can publish the config-file

php artisan vendor:publish --tag=tallui-form-components-config

and disable components, that you don't want to use in your project

return [
    'components' => [
        ...
        'tui-label' => Components\Forms\Label::class,
        ...
    ],
];

Customization

The best way to customize TALLUI Components is with the use of Tailwind Classes and available Options. But to extend or replace features, you are able to Overwrite Components Classes and Views by publishing them:

php artisan tui:publish label

Optionally use the --view or --class flag, to only publish one of both parts of the component.

Artisan will create app/View/Components/Forms/Label.php and resources/view/vendor/tallui-form-components/components/label.blade.php.