mkocansey / bladewind Goto Github PK

BladewindUI is a collection of elegant Laravel blade-based UI components spiced with TailwindCSS and Javascript.

License: MIT License

Blade 74.36% CSS 5.16% JavaScript 17.39% PHP 3.09%

javascript tailwindcss ui-components css html ui blade laravel php

bladewind's Introduction

BladewindUI is a collection of UI components written purely using TailwindCSS, Laravel blade templates and Vanilla Javascript. These components are super simple to use and come with different levels of customization.

Installation

The full installation guide is available on https://bladewindui.com/install.

BladewindUI is very specific to Laravel since all components are written purely using blade syntax. To install in your Laravel project simply run this command in the terminal at the root of your project.

composer require mkocansey/bladewind

Next you need to publish the package assets by running this command, still in the terminal at the root of your Laravel project.

php artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=bladewind-public --force

Now include the BladewindUI css file in the <head> of your pages. This should ideally be done in the layouts file your app pages extend from. You will also need to include the css used for animating the modals and other elements.

<link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />

<link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />

Finally, include the BladewindUI javascript file anywhere before the closing of the </body> tag of your pages. Again, this should ideally be done in the layouts file your app's pages extend from.

<script src="{{ asset('vendor/bladewind/js/helpers.js') }}" type="text/javascript"></script>

You are now ready to start using any of the BladewindUI components in your application

<x-bladewind::button>Save User</x-bladewind::button>

Components Include

Alert
Avatar
Bell
Button
Card
Centered Content
Checkbox
Datepicker
Dropdown
Dropmenu
Empty State
Filepicker
Horizontal Line Graph
Icon
Input
List View
Modal
Notification
Process Indicator
Progress Bar
Radio Button
Rating
Select
Statistic
Spinner
Tab
Table
Tag
Textarea
Timeline
Toggle
Verification Code

Check out the full documentation on https://bladewindui.com.

Questions and General Info

If you want to ask anything at all or report a security vulnerability, please e-mail [email protected] or tweet @bladewindui

License

BladewindUI is an open-sourced library licensed under the MIT license.

bladewind's People

Contributors

Stargazers

Watchers

bladewind's Issues

Css modification on components out of bladewind scope

bladewind css file brings modification on native table.
bladewind-ui.min.css
thead>tr>th {
border-top-width: 1px;
border-color: rgb(229 231 235 / 0.2);
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
....
Should it use a specific id or class of table bladewind component to avoid doing modifications on non baldewind compoenents ?

Dropdown does not close unless you click on it

The dropdown component does not close when you click outside the 'list'
one have to click on the select itself to close it

when i am customizing the components its have no effect at ui

like i update and add some class at statistic.blade.php but there no reflection on frontend event when I am making empty this file Html its no effect at ui

Modals

The modals in phones look shrinked!

Screenshot_20220615-131510.png

Range datepicker

The javascript for range datepicker is redeclaring constant variables for months.

<x-bladewind::datepicker type="range" date_from_label="start date" date_to_label="end date" />

[Question] Livewire compatibility

Hi!

Thanks for your nice work :)

Is this package supposed to work with Livewire ?

Just tried select component + wire:model and it does not work, once it places wire:model on every single option.

https://bladewindui.com/component/select

Also tried input component with icon + wire:model.liveand cursor overflows after rerendering page.
It does not accept wire:key on x-bladewind.list-item

Laravel mix is not recognizing Tailwind classes in components

When I run "npm run watch" it doesn't save the classes in the components files.

composer.json
"laravel/framework": "^9.11",
"mkocansey/bladewind": "^0.1.7",

Package.json
"postcss": "^8.4.6",
"postcss-import": "^14.0.2",
"tailwindcss": "^3.0.18"
"laravel-mix": "^6.0.6",

tailwind.config.js

content: [
    './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
    './storage/framework/views/*.php',
    './resources/views/**/*.blade.php',
],

webpack.mix.js

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

Drag-n-Drop for file uploads

It seems the filepicker component doesn't support drag-and-dropping of files onto the componnet, The original file upload widget of the browser allows that.

Is it possible to add drag-n-drop support?

bladewind-ui.min.css conflicts with default Jetstream Dashboard page

After adding this line:

<link href="{{ asset('bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />

On a clean Jetstream installation, the four sections from the Dashboard page changed to single rows and darker background.

Is there a particular order that I should load the css files ?? Before or after app.css and/or @livewireStyles ??

Before

After

Thanks!!

Ratings precision option

Option that allows user to rate 0.5, 1, 1.5... to 5. When the user hovers halfway on a star it highlights half of the star. If the user hovers to the max width to the right it highlights fully the star.
At this point when the user hovers and clicks the star to the highlighted part the ratings value is calculated and may include floating number if there were halfway highlighted stars.
A rating option to display stars precisely with rating="X.XX" value up to 2 decimal places. The highlighted stars are displayed precisely based on the rating value.

Datepicker shows double asterisks

Double asterisks are shown in the date picker input field when required="true"

[https://bladewindui.com/component/datepicker]

Missing view component

I am trying to install BladewindUI in Laravel 10, and after follow the installation steps, I get the following error:

Unable to locate a class or view for component [bladewind.table]

I also edited the file app/config/app.config and added the Mkocansey\Bladewind\BladewindServiceProvider::class in providers, but the error persists

Improve dark mode implementation for all components

The dark mode versions of the components can look much better, especially component/table.

Make dark theme easily customisable in the Tailwind config js file

Currently, all BladewindUI components use bg-slate-[700 - 900] for their dark theme styling. This styling is directly embedded in the component's css styles. Considering different apps handle dark theming differently, it will be best to provide default dark theme colours but abstract the styling of the components in dark theme mode and make it the responsibility of the web app.

This should easily be configurable in the tailwind.config.js file

It's not possible to style the text on a button

It's not possible style text on the button e.g.

<x-bladewind::button size="tiny" color="red" class="font-bold text-black">Options</x-bladewind::button>

render a red button with white text, I would have expected a red button with bold black text

lang path error when installing package laravel 8

Call to undefined function Mkocansey\Bladewind\lang_path()

at vendor/mkocansey/bladewind/src/BladewindServiceProvider.php:21

     17▕     $this->loadViewsFrom(__DIR__.'/resources/views', 'bladewind');
     18▕ 
     19▕     $this->publishes([
     20▕         __DIR__.'/resources/views/components/' => resource_path('views/components/bladewind'),
  ➜  21▕         __DIR__.'/resources/lang' => lang_path(),
     22▕         __DIR__.'/resources/assets/compiled' => public_path('bladewind'),
     23▕     ], 'assets');
     24▕ 
     25▕     $this->publishes([

  +7 vendor frames

8 [internal]:0
Illuminate\Foundation\Application::Illuminate\Foundation{closure}()

  +5 vendor frames

14 artisan:37
Illuminate\Foundation\Console\Kernel::handle()

onchange and onkeyup attribute is not working for textarea

The Bladewind textarea component does not respond to attributes such as onchange and onkeyup as shown in the below code

<x-bladewind.textarea required="true" label="message" onchange="countChar(this)" onkeyup="countChar(this)" />

using below versions
Laravel 9.2
PHP 8.0.2
TailwindCSS 3.0.18

how to reset dropdown menu?

First, thanks for the package.
how can i reset the dropdown menus in a form using javascript?

Mutiple Tab groups In Same Page not working correctly

Hi,

Thanks for your great work ! You save us lot of time !

I am displaying multiple tab groups in same page. when I change tabs in one group other group's active tab get deselected. Is this default behavior ?
Or multiple tab groups are not supported?

File picker component should show selected files in edit mode

When in edit mode, the File picker component should do the following based on file types

Image files: show a preview of the image
All other files: show the file name

The input field associated with the component should pass the selected value if user updates a form without selecting a new file.

File picker doesn't work if name is "logo"

The file picker strangely doesn't respond to click when the name attribute is set to "logo" as shown in the code below.

<x-bladewind::filepicker name="logo" placeholder="Logo" accepted_file_types=".png, .jpg" required="true" />

I'm using

Laravel 9.2
PHP 8.0.2
TailwindCSS 3.0.18

Missing component "meta" breaks the Blade views compilation

Steps to reproduce

Set up a new Laravel project
Install the Bladewind
Run the console command artisan view:cache

Expected result
The compilation is finished correctly

Actual result
The compilation failed due to the error
Unable to locate a class or view for component [meta]

Additional details
log.txt
The log file example is attached
Here is the component, which causes the issue
https://github.com/mkocansey/bladewind/blob/v1.4.5/src/resources/views/components/app.blade.php#L5

@lang laravel blade Code not working

<x-bladewind::tab-heading name="notice" active="true" label={{ @lang('home.notice') }} />

Show the correct passing of boolean values in the documentation

The bladewindui documentation shows passing of booloeans like this:

<x-bladewind.card has_shadow="false">
    // the card content goes here
</x-bladewind.card>

Following this results in a string. Using a string in @if($has_shadow) is always true.
The correct way to pass booleans is:

<x-bladewind.card :has_shadow="false">
    // the card content goes here
</x-bladewind.card>

Uploading multiple files

It would be great, if the widget could support upload of multiple files, as the HTML input field supports this as well: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple

Datepicker component partially breaks when used with AlpineJs in Laravel 9.x app

I have a Laravel 9.x app that uses AlpineJs in app.js (latest version of AlpineJs 3.x) - when I use the datepicker component it duplicates the days row and the selected date doesn't always work. This only happens when AlpineJs is integrated and the Alpine.start() line in resources/js/app.js is active - when I comment the line out everything seems to work perfectly fine. Any ideas? (See screenshot below)

require('./bootstrap');
import Alpine from 'alpinejs';
window.Alpine = Alpine;

Alpine.start(); // when the line is commented out the datepicker seems to work as expected

Console log errors

alpinejs:5 Uncaught ReferenceError: day is not defined
    at eval (eval at <anonymous> (alpinejs:5:648), <anonymous>:3:32)
    at alpinejs:5:985
    at qt (alpinejs:1:4878)
    at alpinejs:5:27821
    at r (alpinejs:5:15722)
    at Object.Mr [as effect] (alpinejs:5:15510)
    at K (alpinejs:1:375)
    at alpinejs:1:488
    at Function.<anonymous> (alpinejs:5:27814)
    at r (alpinejs:5:1705)

This also appears in the warnings

Alpine Expression Error: day is not defined

Expression: "day"
<div x-text="day" class="text-gray-800 font-medium text-center text-xs uppercase cursor-default">Sat</div>

Code-wise the error appears to be here in the template

        <div class="flex flex-wrap mb-3 -mx-1">
            <template x-for="(day, index) in DAYS" :key="index">
            <div style="width: 14.26%" class="px-0.5">
                <div x-text="day" class="text-gray-800 font-medium text-center text-xs uppercase cursor-default"></div>
            </div>
            </template>
        </div>

Laravel breeze and Bladewind does not play well

I have noticed that bladewind changes the css for navigation

after installing bladewind, the menu dropdown is not displaying as before

Time and date-time picker

Will you add time and date-time pickers?

Add prefixing and suffixing to component/input

Will be great to have a static prefix or suffix for the Input component.
Potential use cases for these are:

when you want to users to enter phone numbers or emails for very specific country codes or domains.
Examples:
+233 [user-appends-the-mobile-number]
[user-prepends-their-email]@bladewindui.com
entering measures or metrics
Examples:
[user-digit]kg
[user-digit]/mile

<a> styled as a button

Would be nice to have a link styled as a button :)

Option to display only ratings without triggering any events

Sometimes we want to display only ratings without triggering events that will later change rating value and CSS components. This is useful for displaying just a static rating of something.

Label and Placeholder together on Input text box

Currently, if you list a placeholder, even if it is blank, the label isn't displayed. On edit forms, if the field is blank, you still need to see the label to know what goes in that input box.

Love the way the label starts in the box as a placeholder and then moves to the label when the user enters the box, but why couldn't there be the label if we are editing and there is already something in the box?

I don't know if I'm making myself clear, but if you use the Placeholder attribute, the label won't show up at all.

Move spinners away from the button text

From the picture above, the spinner looks awkwardly close to the button text in cases where the button width is longer than usual. If possible, icons prefixes/suffixes as well as the spinner should sit to the extreme left and/or right of the button text.

No publishable resources for tag [assets].

http://prntscr.com/hqjEfVNj-aGY
artisan vendor:publish --provider="Mkocansey\Bladewind\BladewindServiceProvider" --tag=assets --force

Progress bar with decimals in percentage

The progress bar only works with integer percentages, I'd like for it to work with decimals / floats as well, so if I input lets say 55.32% I get this displayed in the label and also reflected in the progress bar (currently I think its parsed as 100% if I pass a float).

Items selected should not be clickable after a Select component is disabled

The following steps can be followed to replicate the issue.

Create a multiple select field using <x-bladewind.select multiple="true" ...>
Select a few items in the field
Disable the field via JavaScript
Click on any of the selected items to remove them from the Select field. The items are removed. This should not be possible if the field if disabled or readonly

Centered content component is missing 3xl and 4xl classes

I noticed that when using big and xl sizes for the centered-content component, the rendered div goes full width instead of staying in the desired max size. It appears that both max-w-3xl and max-w-4xl are not included inside bladewind-ui.min.css

I worked around this by installing Tailwind CSS in my Laravel project, modifying resources/views/components/centered-content.blade.php and adding the two missing classes to the empty div, like this:

<div class="max-w-7xl max-w-6xl max-w-2xl max-w-3xl max-w-4xl max-w-lg max-w-md"></div>

After running npm run dev, the problem was solved. But it would be nice if these two classes were already compiled.

can we install in the laravel 8 in my existing project

Problem 1
- Root composer.json requires mkocansey/bladewind ^0.1.7 -> satisfiable by mkocansey/bladewind[v0.1.7].
- mkocansey/bladewind v0.1.7 requires laravel/framework ^9.0 -> found laravel/framework[v9.0.0-beta.1, ..., 9.x-dev] but it conflicts with your root composer.json require (^8.75).

Pagination numbers

I think it's worth adding them...

reference: https://lorisleiva.com/laravel-pagination-with-tailwindcss/

Set Dropdown values using Javascript

Good day,

How can I set the default value to the dropdown from the javascript?

bladewind modal:

javascript:

Thank you

Icon from Alert component added in page are hidden when notification is launched

The following steps can be followed to replicate the issue.

add <x-bladewind::alert show_close_icon="false" show_icon="true"> in page
add <x-bladewind::notification /> in page
display the page in your browser
in browser console try showNotification( "test", "test", );
icon from <x-bladewind::alert show_close_icon="false" show_icon="true"> disappears

it seems that this comes from usage of modal-icon in Alert component, and showNotification remove all icon of this type.

Dropdown is not passing selected values

Each dropdown has a corresponding input field that holds its selected value.
These values are not being passed.

styling conflict with the tailwindcss/forms plugin

Some bladewind components like toggle do not render correctly due to the tailwindcss/forms plugin styles being automatically applied to them.

In tailwindcss in the tailwind.config.js when using a plugin this plugin can either be set to a strategy of base or class.


// tailwind.config.js

plugins: [
  require("@tailwindcss/forms")({
    strategy: 'base', // only generate global styles
    strategy: 'class', // only generate classes
  }),
],

The default strategy is base and this is when the bladewind components styling gets confused with the tailwindcss/forms styling.

In tailwindcss V3 tailwind.config.js you can exclude a path in the content option from being affected by the global styling by preceding it with an "!".


// tailwind.config.js

content: [

      '!./vendor/mkocansey/bladewind/resources/views/components/*.blade.php',
      '!./vendor/mkocansey/bladewind/resources/assets/css/*.css',
      '!./vendor/mkocansey/bladewind/public/css/*.css',
      '!./vendor/mkocansey/bladewind/public/css/*.min.css',
      '!./vendor/mkocansey/bladewind/public/js/*.js',

],

However,

somehow the plugins have higher priority and still affect the content's excluded path (for example where the bladewind components are located )

Many laravel packages that use tailwindcss for styling rely on the tailwindcss/forms plugin (for example laravel/breeze) so it is very common to see this plugin being used but its styling conflicts with the bladewind styling of components.

// tailwind.config.js

plugins: [
    forms
],

And in many cases, this plugin does affect a lot of other already-made components across the app (that is why changing the plugin's strategy to class is not really the solution since the rest of the components' styling will not be any more affected by the tailwindcss/forms plugin's styling )

I personally didn't yet find a way to isolate the bladewind package installed components folder from the configuration of my app's tailwind.config.js so if you know how please tell me because I may be missing some information.

After doing some research I think that the bladewind package should also expose its tailwindcss configuration as a plugin and when it is installed, the user should add it in the plugins array option. By ordering the plugins in that array, tailwind will know then how to prioritize the plugin so which styles come first and which styles will be overridden.

// tailwind.config.js

plugins: [
        require('bladewind/plugin')
    ]

=> more information about that is in this stackoverflow link:
https://stackoverflow.com/questions/72388980/consuming-a-component-library-that-uses-tailwindcss

"cdn.min.js:1 Alpine Expression Error: app is not defined" and tens of other errors

My app template head:
` {{-- livewire --}}
@livewireStyles
{{-- wireui --}}
wireui:scripts/
@Vite(['resources/css/app.css', 'resources/js/app.js'])

{{-- livewire modal --}}
    <!-- Focus plugin -->
    <script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
{{-- bladewindui --}}
    <link href="{{ asset('vendor/bladewind/css/animate.min.css') }}" rel="stylesheet" />
    {{-- <link href="{{ asset('vendor/bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" /> --}}
    <script src="{{ asset('vendor/bladewind/js/helpers.js') }}"></script>`

My app.js

`/*jshint esversion: 11 */
import './bootstrap';
import Alpine from 'alpinejs';
import flatpickr from "flatpickr";
window.Alpine = Alpine;
window.flatpickr = flatpickr;

import {livewire_hot_reload} from 'virtual:livewire-hot-reload';

import("./../../node_modules/flatpickr/dist/flatpickr.min.css");

import "./../../vendor/power-components/livewire-powergrid/dist/powergrid.css";

import SlimSelect from 'slim-select';
window.SlimSelect = SlimSelect;
import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
Alpine.start();
livewire_hot_reload();

`
I'm using the datepicker inside a table inside a livewire component, livewire-ui-modal, which is called by a powergrid table.

I suspect the load order of the HEAD part of the template, but I'm really confused.

Unable to locate a class or view for component [frameless].

hi,

When using the "error page", I face the error of the absence of the frameless component
Unable to locate a class or view for component [frameless].

And in use without "frameless", the screen is displayed in a mess.

question: How to display form errors

First of all, thanks for the great library !

It would be cool if each input had a build in way to display errors when the input is required or if the validation fails

Small typo in the Basic Card example...

First of all... Excellent modules!!

There is a small typo in the first Card example.

https://bladewindui.com/component/card

There is a slash at the end of the closing tag:

<x-bladewind.card>
    // the card content goes here
</x-bladewind.card/> <-- Extra slash at the end

Loss of custom change on assets

hi,
Unfortunately, with every change in the composer, all assets are copied and rewritten from the beginning, which causes the loss of custom changes.

  Copying directory [E:\laragon\www\x\vendor\mkocansey\bladewind\src\resources\views\components] to [E:\laragon\www\x\resources\views\components\bladewind]  DONE
  Copying directory [E:\laragon\www\x\vendor\mkocansey\bladewind\src\resources\lang] to [E:\laragon\www\x\lang]  DONE
  Copying directory [E:\laragon\www\x\vendor\mkocansey\bladewind\src\resources\assets\compiled] to [E:\laragon\www\x\public\bladewind]  DONE

Allow customization of date format for Datepicker component

Only minor but a good enhancement would be allow the customisation of how the dates appear after being selected - for instance in the UK we usually use the format 30/06/2022 (day/month/year)

Originally posted by @gkimpson in #10 (comment)

dropdown.js:40 Uncaught TypeError: dom_els(...).forEach is not a function

In a new Laravel project I'm getting this:

dropdown.js:40 Uncaught TypeError: dom_els(...).forEach is not a function

code:
layout/guest.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Scripts -->
        <link href="{{ asset('bladewind/css/animate.min.css') }}" rel="stylesheet" />

        <link href="{{ asset('bladewind/css/bladewind-ui.min.css') }}" rel="stylesheet" />


        <wireui:scripts />
        @vite(['resources/css/app.css', 'resources/js/app.js'])
        @livewireStyles
        @livewireScripts

        <script src="{{ asset('bladewind/js/helpers.js') }}"></script>

    </head>
    <body>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>


    </body>
</html>

Test view

<x-guest-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Test') }}
        </h2>
    </x-slot>
    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                   @livewire('test')
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

livewire class

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Test extends Component
{
    public $tests;

    public function mount()
    {
        $this->tests = [
            ['id' => 1, 'name' => 'name'],
            ['id' => 2, 'name' => 'name 2']
        ];
    }
    public function render()
    {
        return view('livewire.test');
    }
}

livewire blade

<div>
    <x-bladewind.dropdown
        name="tests"
        searchable="true"
        label_key="name"
        value_key="id"
        data="{{ json_encode($tests)}}" />
</div>

web.php

Route::get('/test', function () {
    return view('test');
});

NOTE: I have tried to have the bladewind/js/helpers.js before any other scripts