If you have many pickers, the rendering time will be significantly slower. To solve this, this commit provides a solution for this.

the trick is, just create a flatpickr instance, if you need one.

I'd like to start with apologising for the low attention this repo has gotten over the years. Blade UI Kit started as an ambitious project. I'd very much would like to see it continue to grow and evolve. But unfortunately I keep missing out on time to put in the work. Things like https://github.com/blade-ui-kit/blade-ui-kit/issues/116 need thorough attention and I just don't have the bandwidth atm to do that.

Therefor I'd like to search for a new co-maintainer of this library. I'm mainly looking for someone who can:

• put in attentive thoughts into the library to evolve it further
• work on new components
• keep the documentation updated
• respond and handle new issues
• review pull requests and merge them
• do new releases

You'll mostly make your own decisions on the project as I won't be involved too much anymore for the foreseeable future. I'll still update the library for new PHP and Laravel versions but that's as far as I want to go (for now).

If your interested feel free to hmu through this issue ✌️

• Library Version: latest
• Laravel Version: latest
• PHP Version: 7.4

Description:

When using the markdown from Nova like so:

I render the component using <x-markdown>{{ $markdown }}</x-markdown>

And it renders the quotes as html unicodes

Steps To Reproduce:

Create markdown entry in database

use <x-markdown>{{ $x }}</xmarkdown>

• Library Version: 0.3.1
• Laravel Version: 8.58.0
• PHP Version: 7.4.19

Description:

When adding the color picker with the default option, the HTML input element added doesn't have the initial value as set in the option. The HTML input element generated is as below: <input id="type-text-color-input" name="type-text-color" type="hidden">

The old() value does have the value from previous response as what the docs stated: "The color-picker component also supports old values that were set. For example, you might want to apply some validation in the backend, but also make sure the user doesn't lose their input data when you re-render the form with any validation errors. When re-rendering the form, the color-picker component will remember the old value:"

Steps To Reproduce:

Add a color picker as the code below: <x-buk-color-picker name="type-text-color" class="mb-3" :options="['theme' => 'classic', 'default' => '#000000']" />

Hi,

How can I conditionnaly apply class only if input has error ?

I'd like my input having following class in normal state:

border-gray-300 focus:shadow-outline-blue focus:border-blue-300

and this one in error state:

border-red-300 focus:shadow-outline-red focus:border-red-300

• Library Version: 0.3.0
• Laravel Version: 8.13.0
• PHP Version: 7.4

Description:

When I install blade ui kit, everything works great locally and on vapor... However, for some reason I CANNOT use tinker through the vapor CLI while blade-ui-kit is installed. I get this error:

{"output":"\n InvalidArgumentException \n\n Please provide a valid cache path.\n\n at vendor/laravel/framework/src/Illuminate/View/Compilers/Compiler.php:36\n 32\u2595 */\n 33\u2595 public function __construct(Filesystem $files, $cachePath)\n 34\u2595 {\n 35\u2595 if (! $cachePath) {\n \u279c 36\u2595 throw new InvalidArgumentException('Please provide a valid cache path.');\n 37\u2595 }\n 38\u2595 \n 39\u2595 $this->files = $files;\n 40\u2595 $this->cachePath = $cachePath;\n\n \u001b[2m+19 vendor frames \u001b[22m\n 20 [internal]:0\n Illuminate\Foundation\Application::Illuminate\Foundation\{closure}(Object(BladeUI\Icons\BladeIconsServiceProvider))\n\n \u001b[2m+5 vendor frames \u001b[22m\n 26 artisan:43\n Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))\n","context":{"command":"/opt/bin/php /var/task/artisan tinker --execute "phpinfo();" --no-interaction 2>&1","aws_request_id":"8dab5f41-937a-4ea5-9141-b6431b24a416"}} Function Logs:

Steps To Reproduce:

install blade-ui-kit, deploy to laravel vapor, try and use (i'm using redis for cache)

vapor tinker 

On page view countdown looks like stopped at zero. But if I refresh the page countdown countinues to positive counting

I'm using component like this: <x-countdown :expires="new Carbon\Carbon($project->end_date)"/>

Should I add extra code or something?

• Library Version: 0.1.1
• Laravel Version: 8.5.0 (also tested on 8.0)
• PHP Version: 7.4.10

Description:

I've followed the instructions about composition (https://blade-ui-kit.com/docs/0.x/introduction), but getting an unresolved dependency exception. When changing the attribute echo'ing to unescaped, the sub-component doesn't render. I'm using the latest Laravel 8 version, so I was expecting either of those 2 to work (as the "Piping Attributes" paragraph explains).

Steps To Reproduce:

• Create resources/views/components/forms/input.blade.php

• Use <x-input {{ $attributes->merge(['class' => 'p-4 text-gray-700']) }} /> as documented

• This gives exception : Unresolvable dependency resolving [Parameter #0 [ <required> string $name ]] in class BladeUIKit\Components\Forms\Inputs\Input

• Change to <x-input {!! $attributes->merge(['class' => 'p-4 text-gray-700']) !!} />

• Renders <x-input> instead of <input ...> (Thus nothing is showing in the frontend)

See example repository: https://github.com/patrickbrouwers/blade-ui-kit-composition

Anything I missed? Anybody else with the same issue?

Excited to be able to use it! Hopefully we can get the composition working, because that would make it very powerful!

Motive: the default file input component provided by browsers are not pleasing to the eye, most of the time it needs to be customized to make it viable within a design, what if we had a component that already took care of the designs for use?

this File input component solves this issue of the default styling, since it is now styles better than the default file input , and its a custom component itself, making the first of it's kind in the package

Should perhaps config merging In the service provider be done only when config is not cached in the Laravel app? https://github.com/blade-ui-kit/blade-ui-kit/blob/1baaa2d04555e7060c70dc22c29d441f37dff689/src/BladeUIKitServiceProvider.php#L20

See example in the Jetstream service provider

This pull request bumps the version of Alpine from 2.x to 3.x.

One notable difference here is that the script enqueued by BUK will always be the latest release of Alpine. Enqueuing a specific version of Alpine is problematic since the only way to bump the version is by releasing a new version of BUK.

Always using the latest version will allow users/developers to lock the version themselves by publishing the config file.

TODO:

• [x] Bump Alpine version to 3.x
• [ ] Check any components that rely on Alpine.

How can I run an AlpineJS function when a new x-color-picker color is selected?

I'd like to update a preview when a new color is selected, and have multiple x-color-pickers on the page.

Have spent quite a bit of time trying to figure out a way to do this.

• Library Version: 0.3.4
• Laravel Version: 9.4.1
• PHP Version: 8.1.3

Description:

PR #125 (and therefore version 0.3.4) breaks the defaultDate Flatpickr property before mouseenter is triggered. Since the instance is not initialized before mouseenter is triggered, the default date is not set on page load.

A workaround for this is to set the value attribute instead of defaultDate, but this does not work when wanting to use altInput since value on the instance and value on the input field (the display) differs. It therefore results in the true, non-alt value showing until mouseenter is triggered, upon which the formatting from altFormat is applied.

For anyone else encountering this before it is fixed: Set blade-ui-kit/blade-ui-kit to 0.3.3 in composer.json and run composer update and php artisan view:clear.

Steps To Reproduce:

This is my scenario which I haven't found a workaround for.

<x-buk-flat-pickr
	name="flatpickrInstance"
	format="Y-m-d H:i:S"
	value="12:00" # This provides the default value before the instance is initialized. Can be removed to make the issue more obvious
	:options="['defaultDate' => '2022-04-29 12:00', 'altInput' => true, 'altFormat' => 'H:i']"
/>
<script>
	 // This returns "12:00" before mouseenter and "2022-04-29 12:00" after mouseenter
	 // It should always return the full date string 
	console.log(flatpickrInstance.value);
</script>

Currently the Unsplash component fails hard when a photo can't be found with Undefined array key "urls". We should convert that into a readable exception based on the message returned in the JSON payload.

I encountered this problem while using pikaday component in my blade view within form tag.

A question has been asked here before too on Stackoverflow

https://stackoverflow.com/questions/68847171/laravel-pikaday-is-not-defined-in-blade-ui-kit

What is happening here ? I don't understand. Please help me with this issue.

• Library Version: 0.3.2
• Laravel Version: 8.69.0
• PHP Version: 7.4.21

Description:

when the component is inserted into a livewire element, the date can only be selected once. livewire updates the form and clicking on the flatpickr input no longer appears the dropdown for choosing the date.

Blade UI is not designed to work with Livewire or you can integrate the following logic in the package?: https://laravel-livewire.com/docs/2.x/alpine-js#creating-a-datepicker

thanks and congratulations for your work

Steps To Reproduce:

<x-flat-pickr wire:model="state.date" name="date" /> into a livewire component and select a date. Once a value has been selected and clicked on a different html element, it is no longer possible to choose a new date