If you place the time picker inside a normal <form></form> closing the time picker select is submitting the form (it is acting as a normal button)
https://github.com/PH7-Jack/wireui/blob/d197de88449825041e0df38e1a65ac53573fc491/resources/views/components/time-picker.blade.php#L267
should be modified to include this tag (html5)

 type="button"

Hi
I think we can have ajax modal

Where WireUI Docs source?

Hello,

I have an issue with the package. I have this code inside the Blade of a Livewire Component.

The notification displays well.

But, when I click on the accept or reject button, nothing happens. The modal just closes and it's not triggering the code in the Livewire class.

• OS: Windows
• Browser: Edge
• Package version: 0.11.4
• Laravel 8
• PHP 8

There is another problem: I'm in Rome(UTC+2) timezone and if I pass "2021-06-16 19:50:00" to DateTime picker I see on the frontend

16/06/2021 17:50

with these params

display-format="DD/MM/YYYY HH:mm"
parse-format="YYYY-MM-DD hh:mm:ss"
and with or without without-timezone

Actually, the Datetime Picker component doesn't accept Carbon\Carbon type as livewire model, but it could be convenient on many occasions.

After I add currency input I get:

ErrorException
Undefined variable $_instance (View: C:\xampp\htdocs\noyan-io\resources\views\vendor\wireui\components\inputs\currency.blade.php)

currency input code:

                        <x-inputs.currency
                            label="Currency"
                            placeholder="Currency"
                            icon="currency-dollar"
                            thousands="."
                            decimal=","
                            precision="4"
                            wire:model="currency"
                        />

Describe the bug
I get this error on my production server ( and only on production )

file_exists(): File name is longer than the maximum allowed path length on this platform (4096): /var/www/vhosts/********************/resources/views/<div class="relative" x-data="{ localeDateConfig: {}, config: { interval: 10, is12H: true, readonly: false, disabled: false, }, withoutTimezone: false, timezone: 'UTC', userTimezone: '', ...
As shown above, it seems like the view content is treated as a file name for some reason.

After digging around (for days) I found the exact same issue here and I found other packages which had and fixed the issue here.

I think and hope you can find better details about the issue in the provided links. Never the less, please let me know if you need further information about the issue.

Describe the bug
Whenever navigating through the dates in the datetime picker component, it auto closes.

To Reproduce
Steps to reproduce the behavior:

1. Open the datetime picker
2. Click anywhere

Expected behavior
Just like the demo page here, it should be able to navigate through the dates.

Screenshots
If applicable, add screenshots to help explain your problem.

<x-datetime-picker without-time label="Birthday" display-format="DD-MM-YYYY" parse-format="YYYY-MM-DD" wire:model="personalCard.birthday" />

It's also worth noting that it also has the same behaviour when no attributes are defined. i.e <x-datetime-picker />

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome (Version 92.0.4515.131 (Official Build) (64-bit))

Additional context
I'm using AlpineJS version 2.8.2.

Thank you for this awesome package <3

I want to have jalali datepicker I find out you use dayjs for datepicker.
We have dayjs-jalali how can I use it for datepicker?
https://www.npmjs.com/package/dayjs-jalali

I saw that the desktop version always positions the modal at the top.
Is it possible to set md:items-center?
I prefer to have a modal at the center of the screen.
If you think it's not like that, can you provide an option to do this?

Describe the bug
I'm trying to implement notifications but when the page is loaded I get an error message in the console:
Uncaught SyntaxError: Unexpected token 'if'

It's referencing the Notification Template (published in the configs) at line 7:
notification.id = $wireui.utils.uuid()

When I add a semicolon at the end of the line the error just moves to the next one and so on.
Other Components like Dropdown are working fine. I think the error is properly with my environment.
I don't use Typescript just plain TALL Stack.

To Reproduce
Steps to reproduce the behavior:

1. See Notifications

Expected behavior
Showing notifications

Desktop (please complete the following information):

• OS: Win 10
• Browser: Chrome
• Version; latest

Any help would be appreciated.

It would be nice to have a flag on the button that, if present, not only lock (as already do) the button but show a waiter icon like a spinner. What do you think?

Describe the bug

The documented function

// or use a full syntax
$this->notify([
    'title'       => 'Profile saved!',
    'description' => 'Your profile was successfull saved',
    'icon'        => 'success'
]);

doesn't work. This method does not exist in the WireUi\Traits\Actions trait.

I am trying to use input fields that are quite small and if an error is present on that field the text is very unpleasant looking, I have added a full error report on the bottom of the form. but would like to be able to disable error reporting on specific fields.

When select a date, cannot select another month

Alpine v3 related issues
alpinejs/alpine#1545
alpinejs/alpine#1627

It would be great if you could add a date-time range picker. Thank you for a good job.

Describe the bug
when using select with search on a livewire component, search box does not clear until page is refreshed.

To Reproduce
use any select with search

Additional context
Recommend either:

1. add search: '' to closePopover()

closePopover() {        
    this.popover = false
    search: ''
    this.$refs.select.dispatchEvent(new Event('close')) 
},

2. watch for a emit('clear') from livewire.

nonetheless Great work! I have used a number of the available components, with little to no issues. although bit more documentation on some of them would be beneficial!

Hi
When I want to use WireUI in layouts blade I get:
$_instance is undefined
Which mains we can not use wireui in blade layouts.

When adding the component select in a livewire view, it returns this error:
Typed property WireUi\View\Components\Icon::$style must be string, null used (View: C:\xampp\htdocs\Projetos\teste.com.br\resources\views\vendor\wireui\components\select.blade.php).
Unknown Property
Did you mean WireUi\View\Components\Icon::$style ?

<x-select
    label="Select Relator"
    placeholder="Select relator"
    wire:model.defer="model"
>
    <x-select.user-option img="https://via.placeholder.com/500" label="People 1" value="1" />
    <x-select.user-option img="https://via.placeholder.com/500" label="People 2" value="2" />
    <x-select.user-option img="https://via.placeholder.com/500" label="People 3" value="3" />
    <x-select.user-option img="https://via.placeholder.com/500" label="People 4" value="4" />
</x-select>

Hi,

I would like to dynamically set disabled prop on the x-button component however im unsuccessful.

I did a bit of googling and i dont think you can set the disabled prop to true or false because it doesnt work on this basis.

<x-button wire:click="selectImage" md icon="check" positive label="Positive" disabled="{{$selectedImagePath ? false : true }}" />

Could you help me out a bit please?

Thank you very much.

Please add a file CONTRIBUTING.md to the root of the project. It would be very helpful to know how to install and run the project.

Please see modal.
I think margin top need to be change.

Describe the bug
I try to use the notification component. I added the <x-notifications /> into my layout on the first line after the body open tag. In my LiveWire Component I added the Actions trait and then called the example code into a form submit method (which is also sending an email, which I get so the method is called):

$this->notification()->success(
    $title = 'Profile saved',
    $description = 'Your profile was successfull saved'
);

and this is the result I get in network tab:

but no notification is shown.

To test it further, I created a simple blade view:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    @livewireStyles
    @wireUiScripts
</head>
<body>
<x-notifications />
<x-dialog z-index="z-50" blur="md" align="center" />
@livewireScripts
</body>
</html>

and then called the notification over the browser console:

window.$wireui.notify({
    title: 'Profile saved!',
    description: 'Your profile was successfull saved',
    icon: 'success'
})

Same. Nothing happens. The same problem occurs with the dialog.

In all cases - no error message or something is shown in the brower console.

I have a simple form:

            <form wire:submit.prevent="save">
                <div>

                    <x-input wire:model="name" name="name" label="Name"/>
                </div>

                <div class="mt-6">

                    <x-input wire:model="email" name="email" label="E-mail address"/>
                </div>

                <div class="mt-6">
                    <x-button primary label="Request invitation" spinner="save" type="submit"/>
                </div>
            </form>

How I can make the spinner only on submit, not when validating?
Or some demo of form with multiple components and buttons will be nice

Hi,
Thanks for great repo.

I think it would be good idea to have datepicker.

When loading a select from the database the data is stripped.

<x-select label="Select Venue" placeholder="Select one status" wire:model.defer="editing.venue_id">
    @foreach ($venuesCol as $venue)
        <x-select.option label="{{ $venue->name }}" value="{{ $venue->id }}" />
    @endforeach
 </x-select>

Wireui don't work with chrome browser on android.

If you try to load the page you have an error:
VM28:71 Uncaught SyntaxError: Unexpected token '.'
also on documentation page
https://livewire-wireui.com/docs/get-started

Hi
When I want to use x-textarea I get:

Unable to locate a class or view for component [textarea]. (View: C:\xampp\htdocs\noyan-io\resources\views\livewire\panel\ticket\create.blade.php)

While I can use x-input.

Just wanted to say thanks! So far its been really fun wokring with WireUI.

Related Problem
I'm using another packages that uses "icon","text","textarea","label","button","dropdown" blade component name and wireUI is conflicting with it.
To be more clear, I'm only planning to use the the following components from this package:

• Datetimepicker
• Notifications
• Toggle
• Checkbox

The solution I'd like
It would be nice to disable the other components as I'll not be using them. & to avoid any conflicts if the same name is used.

Alternatives solutions

• the ablility to rename these components to avoid conflict if I'm planning to use both packages.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:
Within a modal created a field with <x-select

Expected behavior
For the dropdown to be collapsed.

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome, Firefox
• Version [e.g. 22]

Additional context
Blade

       <div>
                    <x-select label="Select Template" placeholder="Select one template" wire:model.defer="editing.template">
                        @foreach (App\Models\Page::TEMPLATES as $value => $label)
                            <x-select.option label="{{ $label }}" value="{{ $value }}" />
                        @endforeach
                    </x-select>
       </div>

Layout

    <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.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        
        <!-- Styles -->
        @wireUiStyles
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        @livewireStyles

        <!-- Scripts -->
        @wireUiScripts
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>

Tailwind Config

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    mode: 'jit',
    presets: [
        require('./vendor/ph7jack/wireui/tailwind.config.js')
    ],
    purge: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './vendor/ph7jack/wireui/resources/**/*.blade.php',
        './vendor/ph7jack/wireui/ts/**/*.ts',
        './vendor/ph7jack/wireui/src/View/**/*.php'
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

Since there are constant changes, it would be useful to have a sort of changelog to understand what has changed.

An example can be this: https://keepachangelog.com/en/1.0.0/

https://github.com/alighasemzadeh/dolist/blob/64a827b1f30b17018875dc910c35e310a8258fe0/resources/views/livewire/task/edit.blade.php#L5

Hi I have one input with both prepend and append.
1-Display is not right.
2-Buttons not work.

my demo application is : dolist.ir

Is your feature request related to a problem? Please describe.
No, it would just be nice

Describe the solution you'd like
Best would be to be able to override current class with your own, that way it can be heavily modified without you having to modify the code to much!

Describe alternatives you've considered
I primarily try to use the toggle function and the color scheme is just wrong in my application. I already have a different variation but it is not as neat as yours!

Additional context

Note:
Very nice job on this add-on, it melts beautifully into my already setup application without to much fuzz :)

Describe the bug
When trying to show Notification component with JavaScript following the steps and description from documentation, it doesn't work.

console.log(window.$wireui) shows "undefined"

To Reproduce
Steps to reproduce the behavior:

1. Fresh install Laravel & Livewire + Wireui
2. Include to layout file
3. Below @wireUiScripts add

<script>    
      window.$wireui.notify({
          title: 'Profile saved!',
          description: 'Your profile was successfull saved',
          icon: 'success'
      })
</script>

(docs example)

Expected behavior
Success notification is shown :)

Showing notifications from Livewire component using $this->notify() or $this->successNotification() works as expected.

upgraded to 0.11.6
and so far I have received the following errors.

this has rendered most of my app useless..
I dont have time to track down the issues at the moment I need to find a workaround for now.

Toggle:

ArgumentCountError Too few arguments to function WireUi\View\Components\Toggle::backgroundClasses(), 0 passed in D:\public\8bppl\storage\framework\views\6607105b8e9f49a6c5d3198e95721ba50237b5bc.php on line 8 and exactly 1 expected (View: D:\public\8bppl\vendor\ph7jack\wireui\resources\views\components\toggle.blade.php)

Modal:

ErrorException Undefined variable $divider (View: D:\public\8bppl\vendor\ph7jack\wireui\resources\views\components\card.blade.php)

Describe the bug
When I use @wireUiScripts and @ @wireUiStyles the URL output is as following pic.

URL Demo = http://localhost:8000/http://:/wireui/assets/scripts#?id=321b1add183dd4202271

there is extra "http://:/" in url.

It's same for styles in
Please help me.

To Reproduce
Steps to reproduce the behavior:

1. Create new Laravel project.
2. Add "@wireUiScripts" and "@wireUiStlyles" in app.blade.php.
3. open in browser.
4. Inspect at place of "@wireUiScripts" and "@wireUiStlyles"

Expected behavior
The URL should be "http://localhost:8000/wireui/assets/scripts#?id=321b1add183dd4202271"

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome
  I tried in almost every browser like Firefox, etc.

I've been trying to alter the size of a modal on the screen using the "max-width" property but was finding that 2xl->6xl were all the same width. Looking modal.php code the "getMaxWidth" function seems to set the max-width to max-w-2xl for everything everything from 2xl-6xl.
Is this correct or should they set the max width to the icoming string (ie. 3xl=> sm:max-w-3xl, 4xl => sm:max-w-4xl, etc.) ?

Describe the bug
If you use datepicker component inside a modal or modal-card on mobile devices, the component displayed outside the screen

Expected behavior
I expect I can see the picker over the modal

Screenshots

Additional context
On desktop devices work fine

Describe the bug
After the composer install, i've an error linked to my own notification system:
Attempt to read property "id" on null

To Reproduce
My notification system is base on the one from Caleb described in Livewire here https://laravel-livewire.com/screencasts/s8-toasters

part of the code is in the notification.blade.php

<div x-data="{
        messages: [],
        remove(message) {
            this.messages.splice(this.messages.indexOf(message), 1)
        },
        autoclose: true,
    }" @notify.window="let message = $event.detail.message; messages.push(message); autoclose = $event.detail.autoclose; if(autoclose){ setTimeout(() => { remove(message) }, 5000) }" class="fixed inset-0 flex flex-col items-end justify-center px-4 py
 
 
 
 
</div>

Expected behavior
Should not cause any issue.

Desktop (please complete the following information):
Alpine V2

Describe the bug
select Event doesn't work on x-select component
I tried only with multiselect options

To Reproduce

<x-select
   multiselect
    ...
    x-on:select="alert('selected/unselected option')"
>
    ...
</x-select>

Additional context
open and close event works fine

I would like to have the possibility to pass an key value array as options params on select like this

[ 
   1 => "name1" ,
   2 => "name2" ,
]

So without

option-label="name"
option-value="id" 

An option to attach an button to an input like this:

Or this:

(https://tailwindcomponents.com/component/search-input-with-integrated-icon-and-button)

Describe the solution you'd like
Add the option to set min and max limit on datepicker like HTML input date

https://www.w3schools.com/jsref/prop_date_min.asp

Is your feature request related to a problem? Please describe.
I am trying to implement your spinner attribute. By the way, it does disable the button even though I am not using spinner attribute. Example given to your documentation is however not working for me.

Describe the solution you'd like
I would like to have a clear example on how to use it, currently using laravel-breeze.

Describe alternatives you've considered
I dont know any, I am new to this.

Additional context
I dont know any, I am new to this.

It should be great to have Min and Max for the timepicker dropdown (to limit values)

Hi
I think we need file input. multiple.

Describe the bug
When I try to use x-error component obtain this error:
Unable to locate a class or view for component [error]
If I use
@error('model') <span class="text-red-600">{{ $message }}</span> @enderror
or add the error component on resource > views > components
All work fine

To Reproduce
Steps to reproduce the behavior:

1. Include x-error component on a livewire component

Desktop (please complete the following information):

• OS: Mac OS X
• Browser chrome
• Version 90

Additional context
If I publish the wireui components with command php artisan vendor:publish --tag='wireui.resources' not work

Hi
I change my website to force SSL
now I get:
Mixed content: load all resources via HTTPS to improve the security of your site
Even though the initial HTML page is loaded over a secure HTTPS connection, some resources like images, stylesheets or scripts are being accessed over an insecure HTTP connection. Usage of insecure resources is restricted to strengthen the security of your entire site.
To resolve this issue, load all resources over a secure HTTPS connection.

How can I force SSL for WireUI.