rawilk/laravel-form-components

Form components built for Tailwind & Livewire.

Form Components for Laravel

Form Components for Laravel provides common form components to help build forms faster using Tailwind CSS. Supports validation, old form values, and wire:model.

Installation

You can install the package via composer:

composer require rawilk/laravel-form-components

You can publish the config file with:

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

You can view the default configuration here: https://github.com/rawilk/laravel-form-components/blob/main/config/form-components.php

You can publish the package's views with this command:

php artisan vendor:publish --tag="form-components-views"

If you want to override the package's language lines, you can publish them with this command:

php artisan vendor:publish --tag="form-components-translations"

Documentation

For more documentation, please visit: https://randallwilk.dev/docs/laravel-form-components

Demo

For a demo of some of the components, please visit: https://laravel-form-components.randallwilk.dev

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

Please review my security policy on how to report security vulnerabilities.

Credits

• Randall Wilk
• All Contributors

This package is also heavily inspired by Laravel Form Components and Blade UI Kit. A lot of inspiration for some JS components is taken from Alpine Headless Components.

Alternatives

This package was created to satisfy my own needs and preferences, and relies on TailwindCSS, TailwindUI, and AlpineJS for styling and functionality. You can always try one of these alternatives if your needs differ:

• Blade UI Kit
• Laravel Form Components

Disclaimer

This package is not affiliated with, maintained, authorized, endorsed or sponsored by Laravel, TailwindCSS, Laravel Livewire, Alpine.js, or any of its affiliates.

License

The MIT License (MIT). Please see License File for more information.

laravel-form-components's Issues

How to change the tailwind classes of the components?

I've been trying to inherit from the php class and override its "inputClass" method with no success. I would appreciate some help.

[Component Idea] Custom Select

Could be useful to include a custom select dropdown like found in Tailwind UI.

https://tailwindui.com/components/application-ui/forms/select-menus

Can't install in Laravel 10

Laravel Form Components Version

lastest

Laravel Version

10

Alpine Version

3

Bug description

Error after trying to install from composer.

Steps to reproduce

Run

composer require rawilk/laravel-form-components

Relevant log output

Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - Root composer.json requires rawilk/laravel-form-components ^7.1 -> satisfiable by rawilk/laravel-form-components[v7.1.0, ..., v7.1.6].
    - rawilk/laravel-form-components[v7.1.0, ..., v7.1.6] require illuminate/filesystem ^8.70|^9.0 -> found illuminate/filesystem[v8.70.0, ..., v8.83.27, v9.0.0, ..., v9.52.0] but these were not loaded, likely because it conflicts with another require.

You can also try re-running composer require with an explicit version constraint, e.g. "composer require rawilk/laravel-form-components:*" to figure out if any version is installable, or "composer require rawilk/laravel-form-components:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Quill Not Defined

Laravel Form Components Version

7.1

Laravel Version

9.19

Alpine Version

3.4.2

Bug description

Errors:
Uncaught ReferenceError: quill is not defined

Uncaught ReferenceError: value is not defined

Warning:
Alpine Expression Error: quill is not defined

Alpine Expression Error: value is not defined

Steps to reproduce

Installed Latest Laravel Project using with vite

Followed the instruction given in Docs.

Tried 2 Methods of import of quill, but none works, same issue returns

Please Check for logs Below
Please Not I am not using the Vue it is just the extension from Chrome.

npc.test-1669704065994.log

Relevant log output

The Log Output File has been Provided Above.

Custom select breaks when value is get from old and is an integer

Laravel Form Components Version

v6.0.0

Laravel Version

v8.63.0

Alpine Version

v3.4.2

Bug description

When using the component outside of Livewire, the component breaks if the selected value is an integer but only when it is obtained from old, this happens because the value returned by old is transformed to a string. For example select Apple with key 1 when old returns it to me is "1".

As I mention. this happens after submitting and receiving the value of old.

I investigated the source code and the selectedKey property returns the correct array, however, this seems to be one more JS error due to the triple comparison that exists in the following lines of code.

custom-select.js#L185

custom-select.js#L187

However, it is a somewhat vague assessment, I have not tested it to be true, if changing said comparison solves the problem.

Steps to reproduce

Model::create([
  'id' => 1,
  'name' => 'Laravel'
]);

$data = Model::get(['id', 'name']);

<x-custom-select
    :options="$data"
    value-field="id"
    text-field="name"
    name="model_name_input"
    filterable
    multiple
    optional
/>

Relevant log output

No response

switch toggle issue with livewire

Laravel Form Components Version

v8.1

Laravel Version

v9

Alpine Version

No response

Bug description

In blade, when clicking the switch toggle, the value is updated, but not the component, it stills mark as false (although the value is true=). When clicking again, the component blade is updated, but now the value its opposite as marked!
I think the issue is this attribute... if removing it, the component works fine.

Steps to reproduce

No response

Relevant log output

No response

DatePicker error and rendering issues

Laravel Form Components Version

v8.1

Laravel Version

9.52.12

Alpine Version

3.12.3

Bug description

datePicker component loses reference to the input after initialisation.

Uncaught TypeError: Cannot convert undefined or null to object
    at slice (<anonymous>)
    at _flatpickr (index.js:1979:10)
    at flatpickr (index.js:2018:16)
    at date-picker.js:28:43
_flatpickr @ index.js:1979
flatpickr @ index.js:2018
(anonymous) @ date-picker.js:28

this.$refs.__input is populated when first rendering the page but when changing anything else on the page that causes a render, it becomes undefined and throws an error.

queueMicrotask(() => {
    this.__ready = true;

    this.__flatpickr = window.flatpickr(this.$refs.__input, this.__config());
});

It is also randomly showing the clear button when not active?

Steps to reproduce

Using the following:

<x-date-picker name="date" wire:model="date" :allow-input="false" format="d/m/Y" placeholder="dd/mm/yyyy" />

Relevant log output

No response

V8 Livewire 3 Compatibility?

Laravel Form Components Version

v8.1

Laravel Version

v10.22.0

Alpine Version

3.13

Bug description

When setting up on a fresh project, it appears the Morph Markers are not working for the form components, where as they did fine with Livewire 2.

<div class="mb-2">
    <x-label>First Name</x-label>
    <x-input name="forename" />
</div>

<div class="mb-2">
        <!-- __BLOCK__ --><label class="form-label" :id="$id('fc-label')" id="fc-label-1">
    <!-- __BLOCK__ -->        First Name
     <!-- __ENDBLOCK__ -->
</label>
 <!-- __ENDBLOCK__ -->
        <div class="form-text-container  form-input--md   ">
    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->

    <input class="form-text" <!--="" __block__="" --=""> name="forename"  <!-- __ENDBLOCK__ -->
<!-- __BLOCK__ --> id="forename"  <!-- __ENDBLOCK__ -->
<!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->


        type="text"

            /&gt;

    <!-- __BLOCK__ --> <!-- __ENDBLOCK__ -->

</div>
    </div>

When downgrading to V7, it renders but still displays the Morph Markers.

Steps to reproduce

• Install Laravel
• Install Livewire 3
• Install Laravel Form Components
• Create component and add form component.
• Build
• View

Relevant log output

No response

How to conditionally set readonly or disabled attributes?

Hello Randall,

How would you set conditional attributes like readonlyor disabled on the input component for example?

<x-input name="order_id"
    @if ($order->order_id > 10000) ?? readonly @endif
    {{ ($order->order_id > 10000) ?? 'disabled' }}
    :value="old('order_id', $order->order_id ?? '')"/>

Either way does not work and results in the disappearing of the input. Do I need to extend the class for both of the attributes or how would I do this? 🤔

Best regards

Mike

Filepond doesn't work with AlpineJS 3

I don't format the error because the Chrome tab hangs.

Uncaught SyntaxError: Unexpected token 'const'
at new AsyncFunction ()
at Fr (cdn.min.js:1)
at Ir (cdn.min.js:1)
at Be (cdn.min.js:1)
at h (cdn.min.js:1)
at cdn.min.js:5
at Function. (cdn.min.js:5)
at t (cdn.min.js:5)
at r (cdn.min.js:5)
at Dt (cdn.min.js:5)

blade-ui-kit/blade-heroicons should be moved to require instead of require dev

Description

Not a composer expert, but I think blade-ui-kit/blade-heroicons should be moved to require instead of require dev. This is because someone who has installed your package may use the x-custom-select component which then requires icons from this package.

Steps to reproduce

Setup a new project, set up a custom select

<x-custom-select wire:model="account"
                                     :options="$accounts"
                                     value-field="id"
                                     text-field="account"
                    />

Watch the error appear:

Unable to locate a class or view for component [heroicon-s-check]. (View: .../vendor/rawilk/laravel-form-components/resources/views/partials/custom-select-option.blade.php)


**Context**
- Package version: [e.g. 1.0.0]
4.0.8
- Laravel version: [e.g. 7.0.0]
8

It's not a bug report. Is there any demo?

Is there any demo? I can not use the package without seeing it.

FilePond field does not seem to be removing the files on error

Laravel Form Components Version

v6.0.0

Laravel Version

v8.62.0

Alpine Version

v3.3.5

Bug description

First of all, thank you so much for this amazing package! 👌🏻💯

I'm using the FilePond field with Livewire with pretty much the same code from the demo which fires the browser event file-pond-clear if there was a validation error. However, the file is still there and I have to manually remove it before trying another file.

How can I get it removed if there is an error?

Steps to reproduce

No response

Relevant log output

No response

FilePond uploaded file preview and validation issue

Hello!
Congratulations for create this wonderful package.

We are using FilePond component with ImagePreview plugin but I have a few questions.

<x-tw-form-group label="Image" name="user.avatar">
    <x-tw-file-pond name="user.avatar" class="mt-1" wire:model="user.avatar" />
</x-tw-form-group>

Everything works fine, image preview (registered in app.js), etc. but the validation does not seem to work with an object model like the example above.

Another question is how to show a preview of an uploaded file when you are editing an entity. For example, when you are editing an User I want to show his current avatar in database. Ex: /images/avatars/10.jpg

I look forward to your help as it is very important for us to be able to use this component.
If you need more information, please do not hesitate to ask.

Thank you!

Custom Select component is causing problems in numeric array.

<x-custom-select wire:model="product.category_id" :options="$categoryList"/>

This is how I get the category list:

$categoryList = $category->getCategoryTree()->pluck('name', 'id')->all();
dd($categoryList);

Output:

array:5 [▼
  1 => "Test Category"
  2 => "Test Category 2"
  3 => "Test Category 3"
  4 => "Test Category 4"
  5 => "Test Category 5"
]

This is the result:

The reason is that array index numbers do not start from 0.

It seems to work fine if I use it like this:

$categoryList = $category->getCategoryTree()->pluck('name', 'id')
                                           ->values() // <<< reset the indexes
                                           ->all();
dd($categoryList);

Output:

array:5 [▼
  0 => "Test Category"
  1 => "Test Category 2"
  2 => "Test Category 3"
  3 => "Test Category 4"
  4 => "Test Category 5"
]

Result:

Context

• Package version: 3.1.1
• Laravel version: 8.x

Simple array treated as opt group

Laravel Form Components Version

v8.0

Laravel Version

v10.3

Alpine Version

No response

Bug description

Hi, I am trying to use a simple numeric array in a select field.
<x-tw-select name="filter[active]" :options="[0 => 'aa', 1 => 'bb']"> but I'm getting error "foreach() argument must be of type array|object, string given". This is because first element 'aa' is threated as optgroup in https://github.com/rawilk/laravel-form-components/blob/main/resources/views/components/inputs/partials/select-option.blade.php#L1
$children here https://github.com/rawilk/laravel-form-components/blob/main/src/Concerns/GetsSelectOptionProperties.php#L55 is not empty (aa) and thus method returns true. Component then tries to iterate over string value and error is thrown.

Steps to reproduce

No response

Relevant log output

No response

[Feature Request]: Retrieve current files (FilePond)

Feature Description

Hello!

First of all, thanks for this package, great job!

Something I missed while trying the package is providing an easy way to load current saved files into FilePond field.

For example, imagine a model which has some fields and also a field for uploading some files in a Livewire form. It works perfectly when creating, but when editing, I don't see an easy way of loading the model's current files into the FilePond field.

Is this feature valuable for other users as well and why?

I think this is a very common use case and most users might need it.

Quill with dynamic content

I have a Quill field which I want to update the content depends on the language.
How to achieve this?

Error to added form-components scss

Description

Hello,

Could you give some suggestion as to why the following error happens?:

Steps to reproduce

app.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "../../vendor/rawilk/laravel-form-components/resources/sass/form-components";

tailwind.config.js
https://randallwilk.dev/docs/laravel-form-components/v2/upgrade#upgrading-from-v1-to-v2

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css/', {}, [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ]);

Context

• Package version: [e.g. 2.0.2]
• Laravel version: [e.g. 8.27.0]

Flatpickr DOM Diffing Issue with Livewire

Description

Using Flatpickr in Livewire Model with validation causes the DOM to change and break. Adding wire:ignore to the wrapping form-group provides a temporary fix, but then the field cannot show validation errors on-the-fly.

<x-form-group label="End Date" name="model.expired_at">
    <x-date-picker
        clearable
        click-opens
        :options="[
            'altInput' => 'true',
            'altFormat' => 'F j, Y',
            'dateFormat' => 'Y-m-d 23:59:59']"
        id="model.expired_at"
        wire:model.defer="model.expired_at" />
</x-form-group>

Context

• Package version: 5.0.0
• Laravel version: 8.49
• Livewire: 2.4

Use key => value syntax for select components?

You could use this syntax for the options of the select components. It works a bit cleaner even when doing pluck()->toArray on some collection.

Documentation search broken

Laravel Form Components Version

7.1.3

Laravel Version

7

Alpine Version

n/a

Bug description

I was looking for a way to control the size of a input but unable to find it via searching.

Error:
Index randallwilk does not exist

Steps to reproduce

No response

Relevant log output

Uncaught (in promise) 
Object { stack: "AlgoliaSearchError@https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js:2:4901\nsuccess@https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js:2:81909\n", name: "AlgoliaSearchError", message: "Index randallwilk does not exist", debugData: (1) […], statusCode: 404 }
​
debugData: Array [ {…} ]
​​
0: Object { currentHost: "https://bh4d9od16a-dsn.algolia.net", content: "{\"requests\":[{\"indexName\":\"randallwilk\",\"params\":\"query=s&hitsPerPage=5&facetFilters=%5B%22project%3Alaravel-form-components%22%2C%22version%3Av7%22%5D\"}]}", contentLength: 155, … }
​​
length: 1
​​
<prototype>: Array []
​
message: "Index randallwilk does not exist"
​
name: "AlgoliaSearchError"
​
stack: "AlgoliaSearchError@https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js:2:4901\nsuccess@https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js:2:81909\n"
​
statusCode: 404
​
<prototype>: Object { stack: "", … }
​​
constructor: function AlgoliaSearchError(message, extraProperties)
​​
stack: ""
​​
<prototype>: Error.prototype { stack: "", … }
4

Can Custom Select component be used without livewire?

Reviewing the code a little, I found a fragment that would imply that it is.

{{-- custom-select.blade.php --}}

@unless ($attributes->hasStartsWith('wire:model'))
    <input type="hidden" x-bind:value="JSON.stringify(value)" name="{{ $name }}">
@endif

However, when testing it in the traditional way, leaving Livewire aside, I noticed that both for the single and multiple select the component was broken and it did not recover the values ​​of the old request either.

I managed to fix this by replacing the above code with the following.

@unless ($attributes->hasStartsWith('wire:model'))
    @if ($multiple)
        <template x-for="item in value">
            <input type="hidden" x-bind:value="item" name="{{ $name }}[]">
        </template>
    @else
        <input type="hidden" x-bind:value="value" name="{{ $name }}">
    @endif
@endunless

However when making that change, it was normal for something to break so I received the following error when working with multiselect. It should be noted that the single select works wonderfully with this change.

TypeError
htmlspecialchars(): Argument #1 ($string) must be of type string, array given (View: ..\laravel-form-components\resources\views\components\inputs\custom-select.blade.php)

But hey, I already knew where the thing was going, so I investigated some more code and in the php class of the custom select modify the following function.

// CustomSelect.php

public function selectedKeyToJS(): mixed
{
    if (is_null($this->selectedKey)) {
        return "''";
    }

    return is_string($this->selectedKey)
        ? "'{$this->selectedKey}'"
        : json_encode($this->selectedKey);
}

That corrected the error. But a new bug came up now in JS.

I would appreciate any help, or if you have tried to do it before without success, I would appreciate knowing it to desist from continuing.

Undefined variable $hasWireModel

Laravel Form Components Version

7.1.7

Laravel Version

10

Alpine Version

3.12

Bug description

I'm getting this error with the new version. It worked since now

Undefined variable $hasWireModel

Any clue?

<x-file-pond class="h-full" wire:model="uploadedFile">
                    <x-slot name="optionsSlot">
                        maxFileSize: '10KB',
                        allowFileSizeValidation: true,
                        maxFiles: 1,
                    </x-slot>
                </x-file-pond>

Steps to reproduce

Relevant log output

-

Cannot install, possibly due to name conflict

Laravel Form Components Version

v7.1.3

Laravel Version

v9.2

Alpine Version

v3.0.6

Bug description

Currently, I have the "protonemedia/laravel-form-components" library installed: "^3.6" in my componser.json.

I have tried to install also the "rawilk/laravel-form-components" library: "^7.1.3" without success, I get an error in the console and I suspect it might be due to the same name of both libraries

the error while autoloading is:

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

   Error

  Call to undefined method ProtoneMedia\LaravelFormComponents\Components\Form::assets()

it seems to me that due to the similarity of the name, is logging the wrong class

Call to undefined method ProtoneMedia\LaravelFormComponents\Components\Form::assets()

Steps to reproduce

1. Add "protonemedia/laravel-form-components": "^3.6", to composer.json file in "require" section
2. Run composer install
3. Add "rawilk/laravel-form-components" library: "^7.1.3" to composer.json file in "require" section or run composer require rawilk/laravel-form-components in console
4. Get the error

Relevant log output

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

   Error

  Call to undefined method ProtoneMedia\LaravelFormComponents\Components\Form::assets()

  at C:\laragon\www\new-tabimuse\vendor\rawilk\laravel-form-components\src\FormComponentsServiceProvider.php:127
    123▕         if (! class_exists($component)) {
    124▕             return;
    125▕         }
    126▕
  ➜ 127▕         foreach ($component::assets() as $asset) {
    128▕             $files = (array) ($assets[$asset] ?? []);
    129▕
    130▕             collect($files)->filter(function (string $file) {
    131▕                 return Str::endsWith($file, '.css');

  1   C:\laragon\www\new-tabimuse\vendor\rawilk\laravel-form-components\src\FormComponentsServiceProvider.php:63
      Rawilk\FormComponents\FormComponentsServiceProvider::registerAssets("ProtoneMedia\LaravelFormComponents\Components\Form", ["https://unpkg.com/[email protected]/dist/cdn.min.js", "https://unpkg.com/@popperjs/core@2"])

  2   C:\laragon\www\new-tabimuse\vendor\laravel\framework\src\Illuminate\Support\ServiceProvider.php:266
      Rawilk\FormComponents\FormComponentsServiceProvider::Rawilk\FormComponents\{closure}(Object(Illuminate\View\Compilers\BladeCompiler), Object(Illuminate\Foundation\Application))
Script @php artisan package:discover --ansi handling the post-autoload-dump event returned with error code 1

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Quill Options withToolbarButton Not Work

Laravel Form Components Version

^7.1

Laravel Version

v8.83.10

Alpine Version

v3.3.2

Bug description

When adding a custom button from the Syntax error, I already tested on pages in white only with the component and returns the same error.

Taking the very example of the site.

Steps to reproduce

<x-quill :quill-options="QuillOptions::defaults()->withToolbarButton('variables', <<<HTML
    const cursorPosition = this.quill.getSelection().index;
    this.quill.insertText(cursorPosition, value);
    this.quill.setSelection(cursorPosition + value.length);
HTML, ['Option 1', 'Option 2']" />

Relevant log output

syntax error, unexpected token "endif", expecting end of file

[Component Idea] File Input

Could be useful to include a file input.

Any easy way to change colours?

Feature Description

For example:

focus-within:ring-red-400 focus-within:border-red-300

Do I need to override every class if I want to change all the colours from blue to indigo? Is there any easier way?

Is this feature valuable for other users as well and why?

No response

<custom-select> requires Popper

Laravel Form Components Version

v7.1.3

Laravel Version

v9.2

Alpine Version

v3.0.6

Bug description

I have installed laravel-form-components, I have installed popperjs, filepond and flatpickr

In my resources/js/app.js I have

require('./bootstrap');

import Alpine from 'alpinejs';
import 'flag-icons/css/flag-icons.css';
import flatpickr from 'flatpickr';
import * as FilePond from 'filepond';
import { createPopper } from '@popperjs/core';

window.flatpickr = flatpickr;
window.FilePond = FilePond;
window.createPopper = createPopper;
window.Alpine = Alpine;

Alpine.start();

But the popper is not loaded in the final view

The final HTML:

<!-- FormComponents Scripts -->
<script src="/form-components/form-components.js?id=03553f899311a06c3381" data-turbolinks-eval="false"></script>
<script src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.11/flatpickr.min.js"></script>
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>

and in resources/css/app.css I have this

@import 'tailwindcss/base';                                                   
@import 'tailwindcss/components';                                             
@import 'tailwindcss/utilities';                                              
@import "filepond/dist/filepond.min.css";                                     
@import "flatpickr/dist/flatpickr.min.css";                                   
@import '../../vendor/rawilk/laravel-form-components/resources/css/index.css';
[x-cloak] {                                                                   
    display: none;                                                            
}                                                                             

I'm including the @fcStyles() and @fcScripts() in my layout and I get the error

Uncaught TypeError: <custom-select> requires Popper (https://popper.js.org)
    at Proxy._initSelect (form-components.js?id=03553f899311a06c3381:1:9265)
    at Proxy.init (form-components.js?id=03553f899311a06c3381:1:12573)
    at cdn.min.js:5:361
    at N (cdn.min.js:5:79)
    at cdn.min.js:5:29412
    at Function.<anonymous> (cdn.min.js:5:10296)
    at r (cdn.min.js:5:1652)
    at n (cdn.min.js:5:1682)
    at er (cdn.min.js:5:1692)
    at w (cdn.min.js:5:4385)

Steps to reproduce

No response

Relevant log output

No response

[Feature Request]: IDE Support

Feature Description

Can you advise if there is a way to get the <x-input wire:model="model.sku"/> being recognised in the IDE, the same way that <x-form-components::inputs.input wire:model="model.sku"/> does?

I am using PHP Storm & Laravel Idea specifically but this may be relevant to other IDE's also

Is this feature valuable for other users as well and why?

No response

Custom Select component has issues with "multiple" property in livewire

Laravel Form Components Version

v7.1

Laravel Version

v9.5.1

Alpine Version

v3.0.6

Bug description

When I use the custom-select component with "multiple" property, the component has a bad behavior when multiple options are selected quickly.

In the php:

public $tagList;
public $tags;

public function mount()
{
	$this->tags = [];
	$this->tagList = [
		[
			'id' => 1,
			'name' => 'ABC',
		],
		[
			'id' => 2,
			'name' => 'QWE',
		],
		[
			'id' => 3,
			'name' => 'ZXC',
		],
		[
			'id' => 4,
			'name' => 'FGH',
		],
		[
			'id' => 5,
			'name' => 'RTY5A',
		],
		[
			'id' => 6,
			'name' => '6ABC',
		],
		[
			'id' => 7,
			'name' => 'dfgABC',
		],
		[
			'id' => 8,
			'name' => 'vbnv',
		],
		[
			'id' => 9,
			'name' => 'FGHJF',
		],
		[
			'id' => 10,
			'name' => 'BNMNBMNBM',
		],
	];
	
	// ...
}

In the blade file:

<x-form-group label="{{ __('Tags') }}" name="tags" class="col-span-6 sm:col-span-4">
	<x-custom-select
		name="tags"
		value-field="id"
		label-field="name"
		:options="$tagList"
		wire:model="tags"
		placeholder="{{ __('Please select your tags') }}"
		multiple 
		optional 
	/>
</x-form-group>

As result, the input toggles the first selected option indefinitely.

Plus, sometimes the option selected shows the ID instead of the NAME.

I tried to solve using "closeOnSelect" and "wire:model.lazy", but the custom-input behaviour is still weird:

when I select several options and I clicked on each item to delete them, then the id is displayed instead of the name.

I would appreciate any help.

Thanks!

Steps to reproduce

1. Use a custom-select component and set a wire:model
2. Add "multiple" property
3. Select several options in the component
4. In the input: Click on each selected option to remove it.
5. The selected options on the left will display the id instead of the name.

Relevant log output

No response

Component class modification

Is there any easy way of customizing classes for the compnents, like

focus:border-blue-300 focus:ring-4 focus:ring-opacity-50 focus:ring-blue-400

or do I need to overide and make new Custom Class?

Custom Select component does not work

<x-custom-select wire:model="product.category_id" :options="['foo', 'bar']" />

• Package version: 3.1.1
• Laravel version: 8.x

form-components/form-components.js?id= ERR_ABORTED 404

Laravel Form Components Version

^7.1

Laravel Version

9.19

Alpine Version

3.10

Bug description

In a production environment not found the form-components.js file, and nothing works:

I don't know why but it works locally. I'm using Vite. Locally works with npm run dev and build

I don't see in the Docs if I have to publish something, I use @fcStyles and @fcScripts correctly...
Did I miss something? I'm the only one?

Steps to reproduce

No response

Relevant log output

GET /form-components/form-components.js?id=03553f899311a06c3381 404
players:1 Refused to execute script from '/form-components/form-components.js?id=03553f899311a06c3381' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

How to edit images on FilePond component

Feature Description

Hey there! I'm using Filepond component with Livewire. The question is how to edit those images once you uploaded it?

Like editing a blog post with an image already set. Is that currently possible?

Is this feature valuable for other users as well and why?

No response

A problem with Select and its selectedKey and function old()

Hello, I used the v2 and v3 of laravel-form-components in different projects.

The problem is that the array of options that I gave to "x-select" has the keys numeric (int) and when comparing it with the value returned by the old() function that returns the numeric value as a string, these are not match by the triple equal "==="

laravel-form-components/src/Components/Inputs/Select.php

Line 56 in 6e9a9aa

$this->selectedKey = old($name, $value);

laravel-form-components/src/Components/Inputs/Select.php

Line 61 in 6e9a9aa

if ($this->selectedKey === $key) {

Support Laravel 11?

Feature Description

When will support for Laravel 11 come out approximately?

Is this feature valuable for other users as well and why?

No response

Documentation link broken

Description

First of all, thank you for the great package.
Back then when I first installed this package, the documentation site worked.
But currently am not able to load your documentation site anymore

Steps to reproduce

try open https://randallwilk.dev

Context
not important

Thank you

[Component Idea] Date Picker

Need to find a date picker library I like and implement it into a blade/alpine date picker component.

Module build failed

Laravel Form Components Version

v7.0.4

Laravel Version

v9.0.1

Alpine Version

v3.9.0

Bug description

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(1:1) ...vendor/rawilk/laravel-form-components/resources/css/addons.css @layer components is used but no matching @tailwind components directive is present.

> @layer components {
      ^
        .leading-addon svg {
           @apply h-5 w-5;

Please note in my resources/css/app.css, I have the Tailwind directives imported.

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

@import "../../vendor/rawilk/laravel-form-components/resources/css/index.css"; 

Steps to reproduce

No response

Relevant log output

No response

How to deal with array values?

Hello Randall,

first of all thank you very much for your package. I started using it today and it's a pleasure to work with.

I ran into an issue with array values in regular (number) inputs. My data structure is simply like this measurements[torso][t1]. When I don't enter any value into the required field I get a proper error message back. But in the case of the old value being needed to fill the value I get nothing back. The field value is null.

<x-form-group label="1"
              name="measurements[torso][t1]"
              :border="false">
    <x-input type="number"
             min="0"
             max="1000"
             step=".1"
             name="measurements[torso][t1]"/>
</x-form-group>

Before I used the package I handled the form building manually and the fields worked properly.

<div class="col-span-6 sm:col-span-4">
    <x-jet-label for="t1" value="1"/>
    <x-jet-input id="t1"
                 name="measurements[torso][t1]"
                 type="number"
                 value="{{ old('measurements.torso.t1') }}"
                 class="mt-1 block"/>
    <x-jet-input-error for="measurements.torso.t1" class="mt-2"/>
</div>

I guess the reason is that I don't save the value straight into a table field? Instead I use the measurements and put them into a single table field. There are 50 values in total in that array when it's saved.

Or is it that the array is not correctly deconstructed for the old value? I see in the Input.php class that you json_encode the value when it is an array. As you can see I used measurements.torso.t1 to get back my old value from the array. When and where is the json_decode(ed)?

if (is_array($this->value)) {
    $this->value = json_encode($this->value);
}

Any help would be appreciated! Thank you very much.

Best regards

Mike

Livewire Reset Form - Custom Select

Laravel Form Components Version

V8.1.4

Laravel Version

v10.21.0

Alpine Version

v3.13.0

Bug description

Hi,

I have a Livewire component which renders a view through a "Modal" where a "Custom Select" is located, this works correctly, but when I send the form, I execute the Livewire "Reset" method, which correctly cleans the form except the "Custom Select", this does not clean the select when the value is empy.

Component Livewire:

   public string $name = "";
   // ...
    public function addNewElement() : void {
        $this->reset('name');
        // $this->show_modal = false;
    }

View:

<x-form-group :label="__('Name')" name="name">
    <x-custom-select name="name" wire:model="name" optional
        :options="$elements" :placeholder="__('Select a element')" required/>
</x-form-group>

Steps to reproduce

No response

Relevant log output

No response

[Feature Request]: Kitchen sink example full form

Feature Description

Loving this package thank you :) Just thinking it would be great to see what's possible with this package by default at a glance. E.g such as the grid to stack form groups? Submit button

<form action="{{ route('customer.profile.update') }}" enctype="multipart/form-data" method="post">
    @csrf
    <x-form-group label="Name" name="name">
        <x-input name="name" :value="old('name', $user->name)" required />
    </x-form-group>

    <x-form-group label="Email" name='email'>
        <x-input name="email" type="email" :value="old('email', $user->email)" required />
    </x-form-group>

    <x-form-group label="Phone" name='phone'>
        <x-input name="phone" type="tel" :value="old('phone', $user->phone)" required />
    </x-form-group>

    <div class='lg:grid lg:grid-cols-2 lg:space-x-8'>
        <x-form-group label="Billing Address" name="billing_address_id">
            <x-select name="billing_address_id"
                :value="old('billing_address_id', $user->billing_address_id)" :options="$addresses"
                required>
                <option value=''>Select Address</option>
            </x-select>
        </x-form-group>

        <x-form-group label="Delivery Address" name="delivery_address_id">
            <x-select name="delivery_address_id"
                :value="old('delivery_address_id', $user->delivery_address_id)"
                :options="$addresses" required>
            </x-select>
        </x-form-group>
    </div>

    <x-form-group>
        <x-form.button>Save Details</x-form.button>
    </x-form-group>
</form>

Is this feature valuable for other users as well and why?

No response

[Feature Request]: Datepicker working with livewire

Feature Description

Use datepicker (flatpickr) with livewire (wire:model)

Is this feature valuable for other users as well and why?

No response

referenceNode.parentNode is null

Laravel Form Components Version

v6.0.0

Laravel Version

v8.6.3

Alpine Version

v3.4.2

Bug description

file upload success.

Steps to reproduce

represh web page

Relevant log output

Uncaught TypeError: referenceNode.parentNode is null
    insertBefore http://admin.test/js/app.js:9882
    replaceElement http://admin.test/js/app.js:20511
    createAppAtElement http://admin.test/js/app.js:20766
    createApp http://admin.test/js/app.js:20775
    create http://admin.test/js/app.js:21045
    anonymous http://admin.test/js/app.js line 4753 > AsyncFunction:11
    releaseNextTicks http://admin.test/js/app.js:4953
    nextTick http://admin.test/js/app.js:4946
    setTimeout handler*nextTick/< http://admin.test/js/app.js:4945
    nextTick http://admin.test/js/app.js:4944
    anonymous http://admin.test/js/app.js line 4753 > AsyncFunction:10
    generateEvaluatorFromString http://admin.test/js/app.js:4764
    tryCatch http://admin.test/js/app.js:4788
    evaluate http://admin.test/js/app.js:4718
    js http://admin.test/js/app.js:5966
    skipDuringClone http://admin.test/js/app.js:5459
    flushHandlers http://admin.test/js/app.js:4831
    stopDeferring http://admin.test/js/app.js:4836
    deferHandlingDirectives http://admin.test/js/app.js:4839
    initTree http://admin.test/js/app.js:5027
    start http://admin.test/js/app.js:4995
    start http://admin.test/js/app.js:4994
    js http://admin.test/js/app.js:8387
    __webpack_require__ http://admin.test/js/app.js:41206
    <anonymous> http://admin.test/js/app.js:41371
    O http://admin.test/js/app.js:41243
    <anonymous> http://admin.test/js/app.js:41373
    <anonymous> http://admin.test/js/app.js:41375

Date picker strange behaviour

<x-date-picker name="date" />

this always gives null value in livewire. Also UI breaks when used wire:model="date"

Alpine.js headless components conflict

Laravel Form Components Version

7.1.6

Laravel Version

9.50.1

Alpine Version

3.10.5

Bug description

$disclosure is a new magic method which ships with the new Alpine beta and is used in the new headless alpine components.

Including the @fcScripts causes the error, while, @fcJavaScript works OK.

Does fcScripts also load AlpineJs?

Steps to reproduce

No response

Relevant log output

No response