tanthammar / tall-forms

Laravel Livewire (TALL-stack) form generator with realtime validation, file uploads, array fields, blade form input components and more.

TALL-stack form generator

Laravel Livewire, Tailwind forms with auto-generated views.

• Support
• Contributions

Project Deprecation Notice

Important: This Package is No Longer Maintained

As of now, this package has been deprecated and is no longer being actively maintained. I've decided to shift my focus entirely to contributing to Filament, an alternative that offers all the functionalities of this package and much more.

Why This Change?

• Advancements in Technology: Livewire v3 and other technological advancements have made some of the features in this package obsolete.
• Better Alternatives: Filament provides a more comprehensive set of features that are better suited for current development needs.

What Does This Mean for Users?

• No New Updates: There will be no new features, bug fixes, or updates to this package.
• Not Recommended for New Projects: I strongly advise against using this package for new projects.
• Support and Documentation: Existing documentation will remain available, but with no updates or new additions.

Looking for a New Maintainer

If you find value in this project and are interested in taking over its maintenance, please feel free to PM me.

Thank You!

I want to extend my heartfelt thanks to everyone who has used, contributed to, and supported this package over the years. Your engagement and feedback have been invaluable.

---

---

Features

• This is not an admin panel generator, it is a package that auto-generates Laravel Livewire forms without you having to create any blade views.
• Laravel Nova like syntax to auto generate TALL-stack forms
• Auto generate forms, with fields for ALL Eloquent Models, in a project - using a single artisan command.
• Auto-generated views
• Laravel Shift Blueprint plugin

Sponsor Heroes

💗 Please Sponsor 🔗 It takes a lot of time to create and maintain this package. I am forever grateful to my sponsors.

Credits

Want to give tribute to those who made TALL-stack come true. (Alphabetically ordered ;)

• Taylor Otwell for creating Laravel
• Caleb Porzio for creating Livewire and AlpineJS
• Adam Wathan for TailwindCSS and TailwindUI

🙋 Help wanted

• Pull Requests I appreciate any input that improves the functionality and usability of this package. Please contribute!

💬 Let's connect

Discuss with other tall-form users on the official Livewire Discord channel. You'll find me in the "partners/tall-forms" channel.

• 🔗 Discord
• 🔗 Twitter
• 🔗 Youtube
• 🔗 Devdojo

Documentation

• v8.x
• v4->v7 Wiki

Testing

composer test

tall-forms's Issues

issue with saveFoo

I have a couple of forms which are using the saveFoo method, one being a file uploader, and one uses checkboxes.
Followed your examples (very handy i must add) and it all appeared to work fine, except it wouldnt save to the db table.

On the file upload, i tried with updatedFoo method, and the file would be uploaded and stored, but the value wouldnt be saved to the db table.

On the checkboxes, despite multiple boxes being checked, a dump of the $validated_value returns null.

I will freely admit, i've just started paying with this, and this could be a 'user error' and not necessarily a bug, but after seeing it on two separate things, i wondered if it may be related.

Environment:

• Tall-forms version: 4.1.2
• Livewire version: 1.2
• Laravel: 8.6
• Is it a Create or Update form?: Update
• Have you installed and configured the laravel-blade-icons package?: Yes

Fields Definition
Component example (checkboxes)

namespace App\Http\Livewire\Forms;

use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallForm;
use Tanthammar\TallForms\Checkboxes;

use App\Models\Source;
use App\Models\Gateway;
use App\Models\Channel;

class GatewayChannelsUpdateForm extends Component
{
use TallForm;

public $channels;

public function mount(Gateway $gateway)
{
    //Gate::authorize()
    $this->fill([

        'wrapWithView' => false, //see https://github.com/tanthammar/tall-forms/wiki/installation/Wrapper-Layout
        'showGoBack' => false,
        'showReset' => false,
        'showDelete' => false,
        'inline' => false,
        'showTitle' => false,
    ]);

    $this->mount_form($gateway); // $gateway from hereon, called $this->model
}

// Optional method, this already exists in the TallForm trait
public function onUpdateModel($validated_data)
{
    $this->model = $this->model->update($validated_data);
}

public function beforeFormProperties()
{
    // get existing relations, read the checkboxes docs about integer values
    $this->model->channel_ids = array_map('strval', optional($this->model->channels)->pluck('id')->all());

    // set the checkboxes options
    $this->channels = Channel::orderBy('name')->get()->pluck('id', 'name')->all();
}

public function fields()
{

    return [
        Checkboxes::make('Select gateway channels', 'channel_ids')
            ->options($this->channels)
            ->relation()
            ->rules('nullable|array|exists:channels,id')
            ->wire('wire:model.defer')
    ];

}

public function saveChannelIds($validated_value)
{
    //get the options that the user selected via the field name
    $selected_channels = $validated_value;

    //if the user unselected all available options it means we have to detach any existing relations
    dd($selected_channels);
    if (blank($selected_channels)) {
        $this->model->channels()->detach(); //detach all existing relations
    } else {
        //in this example we scoped the events to the users current team, so we check which events the user is allowed to attach
        //this is also a good example on how to validate the submitted data
        $allowed_to_sync = filled($selected_channels) ? array_intersect($selected_channels, array_values($this->channels)) : [];
        if (filled($allowed_to_sync)) $this->model->channels()->sync($selected_channels);
    }
}

}


Can you make example form readme animation form

Animation is feature add new owner... not found the example where that is allready do it.

Thx for that If you cab explain how that do it

Create form example in Wiki is incorrect

The example says you should include the component like so:

@livewire('user-create-form')

but should be (or at least that's what I needed to add):

@livewire('forms.user-create-form')

Multiselect TW1 styling

With Tailwind 1.x and Tailwind CSS Custom Forms, multiselect.blade.php select tag is incorrectly styled with form-select when it should be form-multiselect.

Styled with form-select

Styled with form-multiselect

Environment:

• Tall-forms version: 7.8.1

Support php8

PHP8 has been released and the community is upgrading.
I did not look into your test suite and source code, but at least we need composer updated.

composer.json

"require": {
   "php": "^8.0|^7.4",

select problem

Describe the bug
'Select' component not show the placeholder when form initiate. the select component show the 1st option not the placeholder, and whe i try to validate, the select shown error message, can you help me figure it out

Screenshots

Environment:

• Tall-forms version: latest
• Livewire version: latest
• Laravel version: latest
• AlpineJS version (only needed if problem is Alpine related):
• $wrapWithLayout true/false: false
  • if true, Are you using your own wrapper component or the default one?:
• Optional model binding? yes
• Have you published the view files?:
• Have you published, and edited the config file?:
• Is it a Create or Update form?: create

Fields Definition

public function fields()
    {
        $optStat = Statuspasien::pluck('id', 'status');
        return [
            Select::make('Status Pasien', 'statuspasien_id')->options($optStat)->placeholder('Please select a Status pasien.'),
            Select::make('Tindakan', 'tindakan_id')->options(Tindakan::pluck('id', 'jenis'))->placeholder('Please select a Tindakan.')->rules('required'),
            Input::make('Harga')->rules(['required','numeric'])->type('number'),
        ];
    }

What is the best way to add a component with "auto suggest"?

Thank you for your package.
I just want to know what's the best way to add a component with auto suggest, a drop down that return results as you type.

Do I have to follow this? https://github.com/tanthammar/tall-forms/wiki/Livewire-child-component

I need to use the array of inputs, but I need to type the item name and get a list of the items that match that name, and then select with a click.

Is there any component that offers that?

Delete button only & modal confirmation

Is it possible to hide the save button, and only display the delete button.

eg:

$this->fill([

            'wrapWithView' => false, //see https://github.com/tanthammar/tall-forms/wiki/installation/Wrapper-Layout
            'showGoBack' => false,
            'showReset' => false,
            'showDelete' => true,
            'showSave' => false,
            'inline' => false,
            'showTitle' => false,
        ]);

in the mount() method in the component.

also, is it possible to have the delete button bring up a modal to confirm a delete action?

File input styling missing

It seems like the file input field is not completely styled and some undefined variables are used. Isn't the field ready to use?

Array field not working

I've used the example in the wiki, but the arrays do not show up. You see only Owner, but other than that there are no other fields. Am I missing something? I believe I've done everything as described.

Field::make('Owners')->array([
        ArrayField::make('Full Name')->input()->placeholder('Full Name')->rules('required'),
        ArrayField::make('Phone Number')->input('tel')->placeholder('Phone Number'),
    ]),

Problem with "wire:model.lazy"

I've encountered some problem of the default wire:model.lazy of the HasAttributes trait in combination with 'onKeyDownEnter' => 'saveAndStay'.

It seems that when updating values in an input field and hitting enter key (without leaving the input field) the old value gets send. When I change the default to public $wire = 'wire:model'; everything works fine.

Any chance to make public $wire configurable without having to use the wire() method of every field?

Svenska

Snyggt!!! EXAKT vad vi har letat efter ju! Kikar närmare efter semestern 😋

Linking datatable to tall form

Tina,

Could you please provide an example of how to link a datatable to a tall form?
For example, how to connect the update and view actions to a form.

Thanks.

Can't extend/replace component class

I'd like to extend/replace the FieldRoot class which extends the package FieldRoot class so I've created a custom one under app/components.

In config/tall-form.php I've made the following change:

'field-root' => \App\View\Components\FieldRoot::class,

but this doesn't seem to be the right way. Can you please show how to get my own class working instead of the package one?

input type date not fill value

I think my edit form is something wrong input type date not fill value only show m.d.y.
i can pick date again but old values not show?

cssNesting is not a function

Describe the bug
After the automatic installation i do npm install & npm run dev

Screenshots

My Laravel Mix

Environment:

• Tall-forms version: 7.9.5
• Livewire version: 2.4.3
• Laravel version: 8.12
• AlpineJS version (only needed if problem is Alpine related):
• Optional model binding? No
• Have you published the view files?: No
• Have you published, and edited the config file?: No
• Is it a Create or Update form?: No

Does this support multi-step forms?

Is your feature request related to a problem? Please describe.
no

Describe the solution you'd like
a multi-step form where you can define the fields on each step, sync with a server-side model, and optional ability to traverse form steps as your progress. also would be cool to have support for conditional steps, and before step load or after step load functions (to show a processing/loading animation between steps, or perform some kind of function between steps, for example)

Describe alternatives you've considered
you can have a really long form instead

happy to help develop this, i will give this package a shot now

View not found for custom field

When trying to create a custom field I'm always getting an error that the view could not be found:

View [fields.checkbox-tree] not found.

but the view file exists under:

resources/views/fields/checkbox-tree.blade.php

The field is used like this:

App\View\CheckboxTree::make('Categories')->options($categories)

Problem with array field when using input fields

The following array field definition:

Field::make('Owners')->array([
    Field::make('First name')->input()->placeholder('First name')->rules('required'),
    Field::make('Last name')->input()->placeholder('Last name')->rules('required'),
]),

produces an exception when trying to add a new row

Undefined property: Tanthammar\TallForms\Field::$show_label 
(View: /vendor/tanthammar/tall-forms/resources/views/array-fields/input.blade.php)

Composer require installs package but returns an error

Hi @tanthammar,

Thanks for this package. I want to try it out but Composer is complaining. It installs though but there's something wrong with the namespace (should be 'Tanthammar\TallForms\FormServiceProvider'):

Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

In ProviderRepository.php line 208:
                                                                        
  Class 'Tanthammar\TallForms\Providers\FormServiceProvider' not found  
                                                                        

Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json to its original content.

lasted update

View [] not found. (View: ....resources/views/vendor/tall-forms/layout-picker.blade.php and that file is exists.

i'm not sure what happened after update only. The error message does not tell you more which form to use.

 public function formView()
    {
        return view('tall-forms::layout-picker', [
            'fields' => $this->fields(),
        ]);
    }

and that see my eys fine and that is not changed last update.. i cant understand where issue :)

Fix for laravel 8

Hello with laravel 8 it just uses a css and not sass so thought some others might find this handy.

here is my app.css after about 3 hours of playing between webpack and tailwind

@import "tailwindcss/base";

@import url('https://fonts.googleapis.com/css2?family=Hind:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800;900&display=swap');

@import "tomorrow-night.css";

@import "tailwindcss/components";
@import "@fortawesome/fontawesome-svg-core";
@import "animations.css";
@import "code.css";
@import "toc.css";

@import "tailwindcss/utilities";
pre code.hljs {
@apply p-5;
}
module.exports =
{
theme: {

extend: {

fontFamily: {
sans: [ 'Inter var', . . . defaultTheme . fontFamily . sans ],
}

colors: {

night: {
darkest: '#2E3440';
dark: '#3B4252';
light: '#434C5E';
lighter: '#4C566A';
}

,
snow: {
dark: '#D8DEE9';
medium: '#E5E9F0';
light: '#ECEFF4';
}

,
frost: {
green: '#8FBCBB';
mint: '#88C0D0';
dimmed: '#81A1C1';
blue: '#5E81AC';
}

,
aurora: {
red: '#BF616A';
orange: '#D08770';
yellow: '#EBCB8B';
green: '#A3BE8C';
pink: '#B48EAD'
}

}
}
}
}

Use translated labels for displaying form errors

Hi, and thanks for a fantastic package!

I'm translating all the labels in the form, so the fields are instantiated using both a label and a key.
The labels are displayed using the translation.

The problem is that the form validation messages uses the key, not the translation, to display form errors.

Is there a way to use the translated labels in the error messages without using the errorMsg() function?

min, max and step

Describe the bug
i think the min, max and step not working in input field. i already test it in my project.. could u help me to figure it out?

Screenshots

Environment:

• Tall-forms version:
• Livewire version:
• Laravel version:
• AlpineJS version (only needed if problem is Alpine related):
• $wrapWithLayout true/false:
  • if true, Are you using your own wrapper component or the default one?:
• Optional model binding?
• Have you published the view files?:
• Have you published, and edited the config file?:
• Is it a Create or Update form?:

Fields Definition
`
public function fields()
{

    return [
        $this->dateLocal(),
        Input::make('Number')
            ->type('number')
            ->prefix('#')
            ->step(2)
            ->min(5)
            ->max(10)
            ->rules('required|integer'),
    ];
}
public function dateLocal()
{
    $today = Carbon::today();
    return Input::make('Tanggal Periksa', 'tgl_periksa')
        ->type('date')
        ->step(7)
        ->min('2020-09-15')
        ->max('2020-11-21') //or now()->format('Y-m-d\TH:i')
        ->rules('required');
}

`

Undefined variable: temp_key

I'm always getting errror in v4:

Undefined variable: temp_key (View: vendor/tanthammar/tall-forms/resources/views/components/input.blade.php)

formView possible issue ?

Environment:

• Tall-forms lasted:

• Livewire lasted:

• AlpineJS version (only needed if problem is Alpine related): lasted

• SpaMode false:

• Have you published the view files? yes

• Have you published, and edited the config file?: yes and no

• Is it a Create or Update form?: update

edit form not fill fields if use formView, if use only fields and mount functions all works fine...

my code:

public function fields()
    {
        return [
            Field::make('first_name')->input()->rules('required')->groupClass('col-span-3'),
            Field::make('last_name')->input()->rules('required')->groupClass('col-span-6'),
            Field::make('calling_name')->input()->rules('required')->groupClass('col-span-6'),
        ];
    }

public function formView()
    {
        return view('tall-forms::editCustomer', [
            'fields' => $this->fields(),
        ]);
    }

fields render fine but no values.

if i remove formView input values works good

text field values goes null after set it.

hi i am using tallforms library for my project, in that i have to get address details from database using postcode..
so i am getting that values on postcode(textbox) change event via ajax post request and set those value to other textbox like address, city but after set it within second it becomes null...

can anyone let me know how can i set it? is their any another way in tallforms ?

'button doesn't show

Describe the bug
I can't get the button show in my form... any clue?

Screenshots

Environment:

• Tall-forms version: latest
• Livewire version:latest
• Laravel version:latest
• $wrapWithLayout true/false:false
• Optional model binding?
• Have you published the view files?: yes
• Have you published, and edited the config file?: no
• Is it a Create or Update form?: create

Fields Definition
Please paste the code for your fields that is related to this issue.

Sponsor access

Hi Tina,

Thank you for providing this package to the community.

Unfortunately, I Didn't get An invitation Yet since yesterday. Do you mind sending me the 🔗 - Thank you!

Input suffix

Is your feature request related to a problem? Please describe.
Nope

Describe the solution you'd like
Right now we have prefix to add things before the input field like $ etc, but it would be nice to have a suffix for things like .00.

Describe alternatives you've considered
There isn't any without extending the input class, creating a new view and livewire component.

Additional context
Nope

npm run prod fails

Describe the bug
I've created a fresh installation of Laravel with Sail, added Livewire, Breeze and this amazing package.

I've followed the Artisan Install guide and tried to compile static assets.

• npm run dev works as expected
• npm run prod fails with errors

➜ vendor/bin/sail npm run prod

> prod
> npm run production


> production
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js


 ERROR  Failed to compile with 2 errors  

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'filter' of undefined
    at n (/var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:509)
    at /var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:1513
    at LazyResult.run (/var/www/html/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/var/www/html/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/var/www/html/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:217:17
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /var/www/html/node_modules/postcss-loader/src/index.js:208:9

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'filter' of undefined
    at n (/var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:509)
    at /var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:1513
    at LazyResult.run (/var/www/html/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/var/www/html/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/var/www/html/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:217:17

 @ ./resources/css/app.css 2:14-142

 2 assets

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'filter' of undefined
    at n (/var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:509)
    at /var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:1513
    at LazyResult.run (/var/www/html/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/var/www/html/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/var/www/html/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:217:17
    at /var/www/html/node_modules/webpack/lib/NormalModule.js:316:20
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/var/www/html/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /var/www/html/node_modules/postcss-loader/src/index.js:208:9
  @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'filter' of undefined
    at n (/var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:509)
    at /var/www/html/node_modules/@fullhuman/postcss-purgecss/lib/postcss-purgecss.js:1:1513
    at LazyResult.run (/var/www/html/node_modules/postcss/lib/lazy-result.js:288:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:212:26)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:254:14
    at new Promise (<anonymous>)
    at LazyResult.async (/var/www/html/node_modules/postcss/lib/lazy-result.js:250:23)
    at LazyResult.then (/var/www/html/node_modules/postcss/lib/lazy-result.js:131:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:216:17)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at LazyResult.asyncTick (/var/www/html/node_modules/postcss/lib/lazy-result.js:225:14)
    at /var/www/html/node_modules/postcss/lib/lazy-result.js:217:17
 @ ./resources/css/app.css 2:14-142
npm ERR! code 2
npm ERR! path /var/www/html
npm ERR! command failed
npm ERR! command sh -c cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=node_modules/laravel-mix/setup/webpack.config.js

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sail/.npm/_logs/2020-12-27T10_14_06_322Z-debug.log
npm ERR! code 2
npm ERR! path /var/www/html
npm ERR! command failed
npm ERR! command sh -c npm run production

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/sail/.npm/_logs/2020-12-27T10_14_06_339Z-debug.log

Environment:

• Tall-forms version: 7.3.2
• Livewire version: 2.3.5
• Laravel version: 8.20.1
• $wrapWithLayout true/false: true
  • if true, Are you using your own wrapper component or the default one?: The default one
• Have you published the view files?: Yes
• Have you published, and edited the config file?: Yes and No
• Laravel Breeze: 1.0.1
• TailwindCSS: 2.0.2

The problem seems to be in the tailwind.config.js file from this package, in the purge step, becouse the file is missing the content field in the purge config object

$vertical_space how that can change?

component default is
$vertical_space = $this->inArray ? ' py-0 ' : ' py-6 sm:py-5 ';

i'm not found wiki parameters where or how that change... py-6 my project is too mutch ?

$this->model is NULL when you pass a model from Blade directive

Describe the bug
You can't reference the model within the component because it is null.

The reason I'm trying to pass in the model in the directive is that the model instance is also not being picked up from the route. Consider this url:

domain.test/admin/term/2569/edit

// Route is declared as
Route::get('/term/{id}/edit', 'TermEdit')
    ->name(term.edit');

I'm expecting the fields on the edit form to have data, but they don't. When I dump $term in the component it's empty. I then tried to pass in the model, but that also does not work (tried dumping $this->model).

Environment:

• Tall-forms version: latest
• Livewire version: latest
• AlpineJS version (only needed if problem is Alpine related): latest
• SpaMode true/false: false
  • if true, Are you using your own wrapper component or the default one?:
  • if true, Are you using a Route::livewire for model binding?
• Have you published the view files?: Yes
• Have you published, and edited the config file?: Yes
• Is it a Create or Update form?: Update
• Have you installed and configured the laravel-blade-icons package?: Yes

Fields Definition
Field::make('Title', 'title')->input()->rules('required'),

Notify trait custom message with alt message and color and icon

example here

so i mean you can select the event message example is "Successfully saved!"
and alt message in screenshot example "Anyone with a link can now view this file." this optional

and screenshot example icon, can change and use example blade-icons and change notify color

i hope you understand what i mean :)

wire:model.defer disables reset button

Select field with

->wire('wire:model.defer')

doesn't reset the field value when clicking the reset button.

somehow Livewire ignores that as a request...

Add alpine $watch?

Add save and new or Reset after save

Is your feature request related to a problem? Please describe.
When entering a lot of data, it can be useful to quickly add one content after another. Currently, you have to refresh the page or go back and click the create button again.

Describe the solution you'd like
We can have 2 solutions (both can work at the same time).

• A button like "Save and add another"
• A property: "ClearOnSave"

Describe alternatives you've considered

The following seems to do the trick in onCreateModel:

            $this->model = Guest::make();
            $this->resetFormData();
            $this->reset('model');

Additional context
I want to propose a pr, but I want to know if the above is a reasonable solution. Or maybe it already exists and I am missing something.

Thanks for your great package!

Customize form buttons

How can I customize the form buttons?
For instance, if I want action buttons on the bottom left side of the form.

Validation message are not user friendly.

Is your feature request related to a problem? Please describe.
I think it would be better to have validation error messages if it doesn't show the form data..

Describe the solution you'd like
It'd be friendlier if we show The name fields is required by stripping off the form data. part.

If you are Okay with this I can send a PR.

Undefined variable: beforeFormView when adding wrapper layout

Describe the bug
I was following your documentation wiki for installing tall-forms and on the wrapper-layout step, I came into a problem that I am unable to solve. I am farely new to laravel so if there is something I skipped please be kind enough to help.
Screenshots

Environment:

• Tall-forms version: ^5.0
• Livewire version: ^2.0
• Laravel version: ^8.0
• AlpineJS version (only needed if problem is Alpine related):
• $wrapWithLayout true/false: Not Sure where to set this.
  • if true, Are you using your own wrapper component or the default one?: the default one
• Optional model binding? no
• Have you published the view files?: no
• Have you published, and edited the config file?: yes published but not edited.
• Is it a Create or Update form?: not applicable

Fields Definition
Please paste the code for your fields that is related to this issue.

unable to resolve dependency tree

when i try to install this package with below command i get error:

php artisan make:tall-forms-installation

error:

 Are you on y=Tailwind 2.x or n=Tailwind 1.x (yes/no) [no]:
 > yes

Installing Tailwind CSS v2.x
Installing postcss-import
Installing autoprefixer
Installing alpinejs
Installing @tailwindcss/forms
Installing @tailwindcss/typography
Installing @tailwindcss/aspect-ratio
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/tailwindcss
npm ERR!   dev tailwindcss@"1.8" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer tailwindcss@">=2.0.0" from @tailwindcss/[email protected]
npm ERR! node_modules/@tailwindcss/forms
npm ERR!   dev @tailwindcss/forms@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /root/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-04-30T06_35_55_093Z-debug.log

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000"
    },
    "dependencies": {
        "@chenfengyuan/vue-countdown": "^1.1.5",
        "apollo-boost": "^0.4.9",
        "apollo-cache-inmemory": "^1.6.6",
        "apollo-client": "^2.6.10",
        "apollo-link-http": "^1.5.17",
        "bootstrap-vue": "^2.21.2",
        "commander": "^6.2.1",
        "filesize": "^6.3.0",
        "graphql": "^15.5.0",
        "graphql-tag": "^2.11.0",
        "gravatar": "^1.8.1",
        "portal-vue": "^2.1.7",
        "underscore": "^1.13.0",
        "vue": "^2.6.12",
        "vue-apollo": "^3.0.7",
        "vue-notification": "^1.3.20",
        "vue-router": "^3.5.1",
        "vue-snotify": "^3.2.1",
        "vuejs-countdown-timer": "^2.1.3",
        "vuelidate": "^0.7.6",
        "vuelidate-error-extractor": "^2.4.1",
        "vuex": "^3.6.2"
    },
    "devDependencies": {
        "@babel/polyfill": "^7.11.5",
        "@pnotify/bootstrap4": "^5.2.0",
        "@pnotify/core": "^5.2.0",
        "@tailwindcss/ui": "^0.7.2",
        "axios": "^0.21",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.6",
        "livewire-vue": "^0.3.1",
        "lodash": "^4.17.21",
        "mutationobserver-shim": "^0.3.7",
        "pnotify": "^5.2.0",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "postcss-import": "^14.0.1",
        "postcss-nesting": "^8.0.0",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "tailwindcss": "1.8",
        "vue-cli-plugin-apollo": "~0.22.2",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.10"
    }
}

how can i resolve this error?

Typo in documentation

Not so much a bug, but in the documentation under the tutorial, you have an optional remove the TALL stack presets section where you say composer remove livewire/livewire laravel-frontend-presets/tall. I'm thinking you don't want livewire/livewire in that command.

x-spinner.button and SVG icons not working

x-spinner.button and SVG icons not working

Repeater Field does not store values using wire:model.defer

Describe the bug
When using Repeater Form Field combined with wire:model.defer only the very last field in the repeater is stored. Please have a look at the screenshots attached.
I need to use "defer" due to a very large form.

Environment:

• Tall-forms version: 7.8.0
• Livewire version: latest
• Laravel version: latesst
• AlpineJS version (only needed if problem is Alpine related):
• $wrapWithLayout true/false: false
• Optional model binding?
• Have you published the view files?: no
• Have you published, and edited the config file?: no
• Is it a Create or Update form?: both

Fields Definition

Input::make('Name')
    ->rules('required')
    ->wire('wire:model.defer'),
          
Repeater::make('Ingredients *', 'ingredients')
    ->fields([
        Input::make('Quantity')->type('number')->rules('required')->colspan(3)->wire('wire:model.defer'),
        Select::make('Unit')->options($unitList)->rules('required|integer')->colspan(3)->wire('wire:model.defer'),
        Select::make('Ingredient')->options($ingredientList)->rules('required|integer')->colspan(6)->wire('wire:model.defer'),
    ])
    ->sortable()
    ->wire('wire:model.defer')
    ->help('Click to add an Ingredient'),

Input::make('Servings')
    ->type('number')
    ->rules('required|integer')
    ->wire('wire:model.defer'),

Screenshots

If I fill out all fields and hit "save" I get:

The below is posted to the backend via Livewire. All the fields and input data are present.

If I use Selects, Input, Trix etc. outside of a Repeater - then defer works.

Nested KeyVal fields

Do you see any chance to support nested KeyVal fields? I'd like to achieve the following:

KeyVal::make('Shops')->fields({
    KeyVal::make('Names')->fields([
        Input::make('German', 'de'),
        Input::make('English', 'en'),
    ])
})

Should become:

<input value="" wire:model.lazy="form_data.shops.2.names.de" name="form_data.shops.2.names.de" type="text">
<input value="" wire:model.lazy="form_data.shops.2.names.en" name="form_data.shops.2.names.en" type="text">

ErrorException Undefined variable:

Hello. I am new to laravel. I want to use your package for my project. But something does not work out, I have already read the entire wiki.
Created a form php artisan make:tall-form createOrder --model=Orders --path=Forms --action=create

/app/Http/Livewire/Forms/createOrder.php

namespace App\Http\Livewire\Forms;

use App\Models\Orders;
use Livewire\Component;
use Tanthammar\TallForms\Input;
use Tanthammar\TallForms\TallForm;

class createOrder extends Component {

	use TallForm;

	public function mount( ? Orders $orders) {
		//Gate::authorize()
		$this->fill([
			'formTitle' => trans('global.create') . ' ' . trans('crud.orders.title_singular'),
			'wrapWithView' => false, //see https://github.com/tanthammar/tall-forms/wiki/installation/Wrapper-Layout
			'showGoBack' => false,
		]);

		$this->mount_form($orders); // $orders from hereon, called $this->model
	}

	// Mandatory method
	public function onCreateModel($validated_data) {
		// Set the $model property in order to conditionally display fields when the model instance exists, on saveAndStayResponse()
		$this->model = Orders::create($validated_data);
	}

	// OPTIONAL method used for the "Save and stay" button, this method already exists in the TallForm trait
	public function onUpdateModel($validated_data) {
		$this->model->update($validated_data);
	}

	public function fields() {
		return [
			Input::make('Name')->rules('required'),
		];
	}
}

resources/views/livewire/orders.blade.php

<livewire:forms.create-order :orders="$orders" />

I get an error

ErrorException
Undefined variable: orders (View: /var/www/autokit/resources/views/livewire/orders.blade.php)

Laravel 8
Livewire 2.3.1

FatalError in IsArrayField.php

There's an wrong closing bracket in IsArrayField.php on line 19:

throw_if(!$field->allowed_in_array),

must be:

throw_if(!$field->allowed_in_array,

Problem with URL in mount_form method

There seems to be a problem with the mount_form method.

$this->previous = \URL::previous(); is causing an CorruptComponentPayloadException:

Livewire encountered corrupt data when trying to hydrate the [xyz] component. Ensure that the [name, id, data] of the Livewire component wasn't tampered with between requests.

If I comment out line 38 in FormComponent.php everything works fine. I use the latest versions of laravel, livewire and tall-forms.

Sponsors repo

Tina,

How do I access the sponsors repository? Your wiki states that info on Tabs is available in this repo.
I signed up as a sponsor yesterday.

Edit method

How i can create edit button, every documents only how create form..

yes i know @livewire('edit-form', ['model' => $model]) but if i same pages multiple entry how i can add edit button and click edit only specified entry

Sponsorship

Hi Tina,

How can I access the sponsors repository? I signed up as a sponsor a few days ago.