bastinald/ui

Laravel Livewire & Bootstrap 5 UI & CRUD starter kit.

ui's Issues

php artisan ui:migrate command fails on docker

I'm using laradock to run the app.

    "require": {
        "php": "^8.0",
        "babenkoivan/telegram-notifications": "^1.1",
        "bastinald/ui": "^2.2",
        "diglactic/laravel-breadcrumbs": "^7.1",
        "fruitcake/laravel-cors": "^2.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "intervention/image": "^2.7",
        "jantinnerezo/livewire-alert": "^2.2",
        "laravel/framework": "^8.75",
        "laravel/sanctum": "^2.11",
        "laravel/tinker": "^2.5"
    },

I set the configs in .env file.

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=memor
DB_USERNAME=memor
DB_PASSWORD=memor

throws this:

how to get variable from route url in custom?

I get this

How can I get employee_id assigned to public property id?

login/registration redirect

Hi @bastinald !
I chose your project for PWA capabilities integrated in livewire. I've installed the repo but when i try to login or to register, the application doesnt make anything, the Auth system doesn't works.

I followed all the instructions:

• created a new laravel project
• configured the .ENV
• composer require bastinald/ui
• php artisan ui:install

Then I tried to login but when I click on the submit it doesn't works. I don't receive error messages or other messages.

What should I do?
Thank you very much!
Marco

laravel 9

support laravel 9

please

Sass depreciation notices on install

not a huge deal as exerything appears to work, but figured it would be a pretty quick update for you to resolve some of the deprecation warnings on install:

Recommendation: math.div($value-diff * 100, $rfs-breakpoint)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
231 │           $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
    │                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 231:30       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, $rfs-rem-value)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
208 │         $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
    │                                                           ^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 208:59       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value, $value * 0 + if($unit == px, 1, 1 / $rfs-rem-value))

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
208 │         $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
    │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 208:17       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value, $rfs-rem-value)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
212 │           $val: $val + ' ' +  if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
    │                                                      ^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 212:54       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(1, $rfs-rem-value)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
208 │         $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
    │                                                           ^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 208:59       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value, $value * 0 + if($unit == px, 1, 1 / $rfs-rem-value))

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
208 │         $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
    │                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 208:17       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($value, $rfs-rem-value)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
212 │           $val: $val + ' ' +  if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
    │                                                      ^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/vendor/_rfs.scss 212:54       rfs-fluid-value()
    node_modules/bootstrap/scss/mixins/_utilities.scss 37:28  generate-utility()
    node_modules/bootstrap/scss/utilities/_api.scss 30:11     @import
    node_modules/bootstrap/scss/bootstrap.scss 51:9           @import
    vendor/bastinald/ui/resources/scss/ui.scss 26:9           @import
    resources/scss/app.scss 2:9                               root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules/@fortawesome/fontawesome-free/scss/_variables.scss 12:25  @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 5:9   @import
    vendor/bastinald/ui/resources/scss/ui.scss 27:9                        @import
    resources/scss/app.scss 2:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(4em, 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   font-size: (4em / 3);
  │               ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 6:15     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    vendor/bastinald/ui/resources/scss/ui.scss 27:9                       @import
    resources/scss/app.scss 2:9                                           root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(3em, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
7 │   line-height: (3em / 4);
  │                 ^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_larger.scss 7:17     @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 8:9  @import
    vendor/bastinald/ui/resources/scss/ui.scss 27:9                       @import
    resources/scss/app.scss 2:9                                           root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($fa-li-width * 5, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

  ╷
6 │   margin-left: $fa-li-width * 5/4;
  │                ^^^^^^^^^^^^^^^^^^
  ╵
    node_modules/@fortawesome/fontawesome-free/scss/_list.scss 6:16        @import
    node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss 10:9  @import
    vendor/bastinald/ui/resources/scss/ui.scss 27:9                        @import
    resources/scss/app.scss 2:9                                            root stylesheet

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(20em, 16)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
12 │ $fa-fw-width:          (20em / 16);
   │                         ^^^^^^^^^
   ╵
    node_modules/@fortawesome/fontawesome-free/scss/_variables.scss 12:25  @import
    node_modules/@fortawesome/fontawesome-free/scss/solid.scss 5:9         @import
    vendor/bastinald/ui/resources/scss/ui.scss 28:9                        @import
    resources/scss/app.scss 2:9                                            root stylesheet

UI installed!```

Lazy option

Hello, thanks for awesome package..

<x-ui::input :label="__('Email')" type="email" model="email"/>

how to insert lazy option?

Migration Error

When running php artisan ui:migrate, I get the following error: "An exception occurred while executing a query: SQLSTATE[42P07]: Duplicate table: 7 ERROR: relation "temp_users_email_verified_at_index" already exists"

Default for Selects and such?

So i have the following setup to give me a nice list of states:

<x-ui::select :options="App\Models\Contact::states()" label="State" />

But how do I set a default selected state (Florida for example)? I don't see any default/selected options for selects.

Pivot Tables?

With your migrations design built into the model class, how should pivot tables, etc, be handled? I have Contacts, Vendors, Users, etc, models where I need to be able to relate those to each other. Typically I would have a migrations file/table that would relate them to each other. Wasn't sure if there was a way to handle that when doing the UI migration method within the model class since its really a third table when relating two tables to each other. I know this really isn't any issue, so hopefully its ok to answer here. Probably more a documentation update request? I appreciate your time.

how to extend updatedProperty from WithModel?

when I change radio button I need to update company select options
How can I catch the moment when model['role'] is changed and update companyOptions accordingly
https://i.imgur.com/bK7QfeR.png

Feature Request: Component Folders

So as Im testing things and planning, in order to avoid my components and views directory roots from getting messy, it would be nice when creating the component to be able to do something like:

php artisan ui:component Contacts\create -f

or something that would automatically put that component into a its own folder. Reason I am asking for this is that each model will have a create, update, and index. Could even have a view if i decide to go that route. Thoughts on this or a better way to keep things organized?

Feature Request: Searchable/Filterable Tables

I really like your coding style and everything appears to be very straightforward to use. Great documentation too. Only thing I have left that i really need is a solid livewire table option for BS5. The only one that I know of is https://github.com/rappasoft/laravel-livewire-tables, which isnt bad, but from what i have seen from your packages so far, yours would be even more flexible and easier to use. Have anything in the works?

Some Questions

Hey,

i saw your video https://www.youtube.com/watch?v=CYl1pMgiecU and wrote a comment that i don't saw anymore so i write this issue for some questions.

First, i already used https://github.com/bastinald/laravel-livewire-auth and it works some perfect and i will take a look at this too.

But i have some questions before i will do this:

1. I had several problems when i wanted to inject some service containers via dependency injection at the mount function. Is this here also a problem? Have i to use $this->emit('showModal', 'foo', $service) or can i inject these service directly via the mount function?
2. Is there a way to save a migration log for the automatic migrations? I want to have some logs for these insteadof creating incremental migration files to have a sort of logging.
3. i had one more question but i forgot it :D

Greetings

Wanted to know which Laravel-Livewire Scaffolding to use

Hi @bastinald ,

Your repositories are awesome, welldone.

Please let me know what is the difference between UI, Laravel-Livewire Scaffolding Starter kits (all reps that deal with basic starter kit laravel-livewire), or which I should use for my new project.

Thanks.

Possible Seed bug when ran with flush?

It appears that when running ui:migrate --fs everything appears to run and i get success messages for both, but then looking at the tables, the seeds never run. It isn't until i run the --s on its own where it finally spits out an error. Guess it doesn't like enum types, but thats a whole other matter and maybe i will just not use them.

How to set default value for radio button?

Can't publish ui stub

Good package to use .
I need to customize login/register form but vendor:publish command fails.
Can't locate path: <$project_directory\vendor\bastinald\ui\src\Providers/../../views>
Help Needed !

Composer installs older version unless you're on PHP 8.0

Is this intentional? Composer will only install 1.0.4 unless I'm on PHP 8.

new feature needed pass an assoc array property to select component as options, not like a string.

<x-ui::select :label="__('Color')" :options="['Red', 'Blue']" model="color"/>

What I want is to pass an assoc array and the select component should parse it automatically

$managers = User::where('role', 'manager')->get(['id', 'name']);

$arr = [];
$managers->map(function ($item) use (&$arr){
    $arr[$item->id] = $item->name;
});

$this->managerOptions = $arr;

use it in view like this
<x-ui::select :label="__('Manager')" :options="managerOptions" model="manager_id"/>

thanks

radio button options misunderstanding in usage

TypeError
Illuminate\Support\Arr::isAssoc(): Argument #1 ($array) must be of type array, string given, called in /var/www/webdashboard.test/storage/framework/views/9d465923f39b268503f96b3b64bf195c5b6b59ca.php on line 22 (View: /var/www/webdashboard.test/resources/views/vendor/ui/components/radio.blade.php)

used in save.blade.php
<x-ui::radio :label="__('Роль')" options="['supervisor', 'manager']" model="role"/>

role exists in users table. default value is manager

What to send ? passing array in options.