blade-ui-kit / blade-ui-kit

A set of renderless components to utilise in your Laravel Blade views.

Blade UI Kit

Blade UI Kit is a set of renderless components to utilise in your Laravel Blade views. In all essence, it's a collection of useful utilities, connecting the dots between different parts of the TALL stack. It was made for Blade, Laravel's powerful templating engine.

Official Documentation

Documentation for Blade UI Kit can be found on its website.

Changelog

Check out the CHANGELOG in this repository for all the recent changes.

Maintainers

Blade UI Kit is developed and maintained by Dries Vints.

License

Blade UI Kit is open-sourced software licensed under the MIT license.

blade-ui-kit's Issues

Button with loader

A button with a loader indication would be cool. This will be a though one to crack in terms of how dynamic we could make it.

@themsaid recently created one with a countdown timer and cancel feature.

SVG sidings

A component that provides some SVG sidings from https://wweb.dev/resources/css-separator-generator out of the box.

Flatpickr

Would like to add Flatpickr as a Date/Time picker option. Currently used in Laravel Nova and uses vanilla javascript.

https://flatpickr.js.org/

I would be happy to PR this one if interested.

Weather

A component to load weather from different providers. Ability to manually set the weather data location and Also, component to provide a way to detect the location and figure out the location for itself to show the weather data for the user.

[checkbox] Allow to set a value

Checkbox is missing a value attribute.

Leaflet JS Map

An alternative map component that requires no API key / cost and is open source.

Initially this should work similarly to the MapBox / Google Maps components but have scope for expansion.

https://leafletjs.com/

Charts

Would be cool if Blade UI Kit could ship with some chart components. This can go pretty far so we probably need a new namespace and different components for different charts. Thinking of keeping it just to one single Chart library but one that's pretty flexible. Appreciating any suggestions!

Integrate with Livewire events/attributes

Multiple mapbox components on the same page

• Library Version: #.#.#
• Laravel Version: 7
• PHP Version: 7.3

Description:

When rendering multiple mapbox components on a page, only one of the maps renders correctly because each instance of the map object is being assigned to the same variable

Steps To Reproduce:

QuillJS

Labels values from resource files

It would be great to be able to customize the value of the labels. My current label component is something like this

public function __construct($for, $label = '')
{
   $this->for = $for;
   $this->label = $label;

   if ($this->for === '' && $this->label !== '') {
      $this->label = Lang::has('validation.attributes.' . $this->field)
         ? Lang::get('validation.attributes.' . $this->field)
         : ucwords(str_replace('_', ' ', $this->field));
   }
}

Vue component

Add vue component in some 'x-component' and add some 'x-component' in vue component.

Pikaday component not updating wire:model

• Library Version: 0.1.1
• Laravel Version: 8.0.0
• PHP Version: 7.4.7

Description:

I have fresh Jetstream installation and I have added this to resources/views/profile/update-profile-information-form.blade.php:

<!-- Birth Date -->
<div class="col-span-6 sm:col-span-4">
  <x-jet-label for="born_at" value="Birth Date" />
  <x-date-picker class="block mt-1 w-full" name="born_at" wire:model="state.born_at" />
  <x-jet-input-error for="born_at" class="mt-2" />
</div>

My resources/views/components/date-picker.blade.php component is like this:

@props(['name'])
<x-pikaday
    :name="$name"
    {{ $attributes->merge(['class' => 'form-input rounded-md shadow-sm']) }}
    format="DD.MM.YYYY"
/>

And I have cast in app/Models/User.php:

protected $casts = [
  ...
  'born_at' => 'date:d.m.Y'
];

When I open the profile page birth date is shown correctly but if I change it and hit Save the original value is sent to app/Actions/Fortify/UpdateUserProfileInformation.php

Steps To Reproduce:

laravel new test --jet --stack=livewire
composer require blade-ui-kit/blade-ui-kit
add born_at column to users table, data type date
add above codes to project
add dd($input); to app/Actions/Fortify/UpdateUserProfileInformation.php:21
migrate and run

Adding input type file

so im thinking of adding this input, any notes on the component?

[mapbox] Easier way to set Markers

Atm you're limited to passing coordinates for Markers. This prevents you from using extended features from Mapbox: https://docs.mapbox.com/mapbox-gl-js/api/markers

We'll need a way to easier pass marker configuration.

Banner Component

It can be useful to have a Banner component to show a temporary message.
For example to accept cookies, to show a new product in the shop page, and so on...

If you want to see an example, I've built a Session Dismiss-able Banner (taken from TailwindUI).
To make it I've used Alpine.js and the Window.sessionStorage JS API. Today the SessionStorage is supported in all browser.
You can see the banner in this website.
Open the dev tools and check the Session Storage in the Storage/Application tab. As soon as you dismiss the banner a "dismiss" key will be injected.

With Alpine.js it works pretty well 👍

Improve `assertComponentRenders` from ComponentTestCase.

Wanted to try have a go at PRing some of the component suggestions, but when it comes to writing tests it was made basically impossible (or at least very unenjoyable) by the fact that assertComponentRenders includes what I assume is EOL or something of a similar nature. (Invisible Characters)

My tests were outputting pretty much exactly what was expected, except for like 1 random "space" that didn't exist. Even after completely disabling EOL/Linebreak in my editor, it continued to happen in the tests.

Not sure if there is something I'm unaware of since I'm pretty new to OSS, and I'm not sure if this is something that can really be improved or fixed, but I think it would help people contribute a lot easier if this wasn't an issue (or there was some documentation explaining what/why it happens in the contributor section and what we should do to deal with it.) because while I was developing some of the components, I spent maybe 15-20 minutes actually writing the components, and then an additional 2 hours trying to get the tests to pass when this issue stated was pretty much the only reason they weren't passing.

Hopefully this can be looked into, and I'm happy to try help solve it if necessary. Just figured I would post this since I'm only really assuming what I said above is the issue and not 100% certain.

Favicons

Would be cool if we could have a favicons component which also generates some image sizes from a square image and caches them.

TOC and Anchors are not playing nicely

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

Description:

When using the <x-toc> component I can click a TOC link and it will jump to the correct place in the page. But when I then click another it does a small loop and does not update the page

See GIF

Steps To Reproduce:

<x-toc>{!! $article->content !!}</x-toc>

And display

<x-markdown class="markdown" anchors>{!! $article->content !!}</x-markdown>

Implement acceptance tests

To test some JS components in their behavior. Like the dropdown component.

Using Dusk? Or maybe something else? 🤔

Google Maps

Besides Mapbox we probably also want to provide a Google Maps component.

Tinymce Support

Tinymce is one of the best Wysiwyg editor please consider adding this as a component

UI

Carbon component to use <time> attribute

Is there a reason why the <x-carbon> component doesn't generate a <time> HTML element under the hood? It seems like the appropriate semantic element to use, rather than a plain <span> - figure there must be some reason behind the choice?

Label component nesting

In HTML this is perfectly fine:

<label>
    Do you like Blade UI kit?
    <input type="checkbox" name="like"> Yes, yes, yes!
</label>

With components someone may write:

<x-label>
    Do you like Blade UI kit?
    <x-checkbox name="like"/> Yes, yes, yes!
</x-label>

This does not work at the moment.

1. The for attribute on the label component is required.
2. The label component does not support nested components at this time.

Personally I would just wrap it in a <label> tag, but I can Imagine someone tries to accomplish the same with the <x-label> syntax.

[mapbox] Easier way to handle Map options

Atm you can pass key/values as options for the Map instance but that doesn't works for callbacks etc. You currently need to export the view to overwrite this hard-coded.

It would be cool if you could pass any sort of options to the component or maybe even do it with slots.

Identicon

Like the Unavatar component it would be cool if we could provide a component that generates an identicon. Not sure which library we could use for that.

More input types

Provide more components for different input types. Not saying we should provide a component for every single one, just the ones that make sense. Like: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Input component should accept `null` for the value attribute

Passing null to :value is not possible at the moment, only strings are accepted.

$user->name = null;

<x-input name="name" :value="$user->name ?? ''"/>

Passing a null to the value attribute should be possible.

Modal

Would be cool to have alpinejs modal components. Especially since jetstream has some modals like this, and it’s definitely a component I dread making when doing new projects because it’s an inconvenience, so I think it would be perfect for Blade UI Kit. Could also get turbocharged by the end user once Laravel 8 comes out and forwarding attributes from component to component becomes a thing! 😊

[markdown] Cache contents

Maybe cache the markdown if the content hasn't changed.

Merge config only when not cached?

Should perhaps config merging In the service provider be done only when config is not cached in the Laravel app?

blade-ui-kit/src/BladeUIKitServiceProvider.php

Line 20 in 1baaa2d

$this->mergeConfigFrom(__DIR__ . '/../config/blade-ui-kit.php', 'blade-ui-kit');

See example in the Jetstream service provider

Navigation

It would be cool if we could a component that integrates with https://github.com/spatie/laravel-navigation

Cleave.js

A mask component using something like Cleave.js would be great.

Add default slot to OG component

Consider adding a default slot for OG component to be able to add custom meta tags.

[easymde] handle image upload

[form] [form-button] Make action optionally

Allow action to be optionally. Take current url by default.

Allow null values

It would be nice if the input component handles null values. Now we have to construct the label like this:

Something like this would be much cleaner:

[date-time] Use PHP formatting for local option

At the moment when you use the local option for the date-time component you need to pass a format in JS date formatting. It would be cool if people could just use PHP date formatting instead so they didn't have to worry about making doing the translation.

Add normal button component

Might it be useful to add a normal button component?

Was building a form and I expected a button component to use like the other form components.

[Idea] SimpleMDE is unmaintained and already has an XSS vulnerability. Maybe use EasyMDE instead?

In short, SimpleMDE looks like abandonware. Zero updates in 4+ years.

I think it's better for Blade UI KIT to use EasyMDE from day one. It's a SimpleMDE fork, its syntax is 100% compatible, so it's a drop-in replacement. But it's maintained. At least that's what we did for Backpack.

When an XSS vulnerability was discovered in SimpleMDE (can't remember exactly when it was discovered, it wasn't June 1st, but a lot longer ago - more than 6-8 months ago):

SimpleMDE did nothing, EasyMDE promptly fixed it.

Just my 2 cents 😄

Cropper.js

Would it be possible to include a Cropper.js component?

CropperJS is a JS image cropper. I don't really know if it would be too useful, but it could be a neat addition to the kit.

Repository URL: https://github.com/fengyuanchen/cropperjs

Markdown showing unescaped caracters

• 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>

Add Tagify

https://github.com/yairEO/tagify

Video Embed

Feature to embed Youtube and Vimeo videos by id (like unsplash?). Attributes to pass start seconds which we provide in query params.

Custom Font Preloader Component (for fast loading)

Today custom fonts are frequently used in websites but often they lack in network performance.
To improve the font loading, I usually write a component to avoid this problem.

If you are interested, you can check out this gist as an example (this component is optimized for Google Fonts).

Related article:
https://ahmadawais.com/google-fonts-load-faster/

Component suggestion: Alpine backed select component

This is a feature suggestion

Making collapsable dropdowns are something we all do quite often yet it takes quite a lot of code to implement such when accounting for both keyboard navigation and mouse navigation - this is why a lot of implementations simply allow for mouse control.

Example from TailwindUI:

It would be really helpfull with a blade component that could be used with a syntax something like so:

// name: This is the name of the input field that holds the selected value (and will be used if this is inside a form)
// value: This is used to store the value of the currently selected item (often the "old" value when using form validation)
<x-dropdown name="country" value="{{ old('country') }}">
    <x-slot name="input">
        <x-dropdown-item value="US">United States of America</x-dropdown-item>
        <x-dropdown-item value="CA">Canada</x-dropdown-item>
        ....
    </x-slot>
</x-dropdown>

The dropdown should behave like a normal dropdown would but also adhere to the ARIA Practices - this is what TailwindUI writes about their dropdown:

<!--
  Custom select controls like this require a considerable amount of JS to implement from scratch. We're planning
  to build some low-level libraries to make this easier with popular frameworks like React, Vue, and even Alpine.js
  in the near future, but in the mean time we recommend these reference guides when building your implementation:

  https://www.w3.org/TR/wai-aria-practices/#Listbox
  https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
-->

This is a hole list of beautiful TailwindUI dropdowns that would all benefit from a plugin like this to work.

Trouble installing and using the package

• Library Version: ^0.1.0
• Laravel Version: "^7.24",
• PHP Version: 7.4.7

Description:

I tried to install & use this package in a fresh laravel project and I am getting this error.
Unable to locate a class or view for component [markdown-editor].

Steps To Reproduce:

1. Installed fresh laravel project
2. installed livewire
3. Installe tall preset
4. Installed blade-ui-kit
5. published the config file
6. Added the directives @bukScripts and @bukStyles to the layout
7. To be extra safe I ran the following commands -> artisan config:clear, artisan view:clear; composer dump-autoload
8. Created a livewire component home and pointed the route / to load the view.
   Route::view('/', 'livewire.home')->name('home');
9. Tried to use the markdown component in the home.blade.php file.

{{-- Nothing in the world is as soft and yielding as water. --}}

and if I visit the route / I get the foilowing error.

InvalidArgumentException
Unable to locate a class or view for component [markdown-editor].

To be extra safe, I published the view files, and cleared the views and config and tried again. Still the same problem.

Any examples o how to use it?

I would love to test them on my project, can you share some examples on how to use it?

Search

A simple search component that integrates with Laravel Scout would be cool.