Is it possible to open modals without binding them to a route? I have a modal for a mobile menu (it's only available on small screens) that I am struggling to get to work perfectly.

Originally posted by @MotionPhix in https://github.com/protonemedia/laravel-splade/issues/86#issuecomment-1304878424

The photo above shows how my app looks like on mobile phones. When I click on the hamburger menu, I get the following picture:

As you can see, It is working. I am able to load the menu in a modal but there is a problem. Since for now we load modals attached to a certain route, look at my web routes snippet below.

From the picture above you can see how I have attached the modal to /menu route. The problem with this is that I am unable to tell which route to change as active in the mobile modal menu. If you take a look at the picture, I echoed out request()->url() in the modal and it shows http::/tracker.test/menu instead of the route I am at now which is http://tracker.test, which is the Dashboard.

The following picture shows how the routes contradict each other

This is because we are loading modals in routes and at times (like this time) we may just need to load a modal not to attach it to a route. Is that a possibility we could look forward to or we find alternative solutions?

Hi!

I've created a simple Blade Component that acts as a radio input. Selectable cards ala:

This is pure blade, no Vue in use. It's a generic html input type="radio" element. However the element doesn't seem to be submitted to the server, along with the additional form values.

(It works if I exchange it for x-splade-input, however this breaks the CSS, as it is nested and the selector input:checked + label will no longer work.

Is there a way to make form submission work with regular input fields, or get a splade input field without any nested markup?

I have come to a conclusion that the choices library is causing some issues to laravel splade especially the x-splade-select component most notably. I have been working on a project and have spent hours trying to resolve it until I just decided to remove the choices attribute from the x-splade-select component that things finally worked out. Take a look below:

That's my data in just a normal table.

This is my code with choices attribute disabled. When I click on the edit icon in the table, I get the following screen

Notice how on the Company the name appears correctly matching the name in the table under Organisations? Now, take a look if I enable choices attribute.

This is my code with choices attribute included. Now when I click on edit in the same table, I get the following.

See how the name under Company doesn't match the name under Organisations in the table? It's because of the choices library. I don't know why, though. Another issue with the choices library that I noticed is that when you put searchEnabled => false and then you click in the select field, and then clicking away without selecting any item, the selection list won't close no matter what you do. Then only way to close it is if you actually make a selection. Would appreciate if you could take a look into those issues.

I would recommend allowing developers to customize the components without publishing the views files. My opinions are inspired by this great article from folks @filamentphp.

PS: Emphasis could focus on enabling custom style without touching the vendor blade files.

I can't get rowLink / rowModal / rowSlideover to work, this is my setup:

    public function index()
    {
        return view('posts.index', [
            'dances' => SpladeTable::for(Post::class)
                ->defaultSort('title')
                ->withGlobalSearch(columns: ['title'])
                ->column(key: 'title', canBeHidden: false, sortable: true)
                ->rowLink(fn (Post $post) => route('posts.edit', ['post' => $post]))
                ->paginate(25),
        ]);
    }

Maybe I misread it in the documentation but the tablerows are not clickable. I tried in both Splade versions v0.6.13 and v0.7.1. Or will this only work when I create a table class for this?

Possibly related to https://github.com/protonemedia/laravel-splade/issues/69#issuecomment-1304840600

In my blade I have the following:

                        <x-splade-form
                            action="{{ route('posts.destroy', ['post' => $post]) }}"
                            method="delete"
                            confirm
                        >
                            <x-splade-submit>{{ __('Delete') }}</x-splade-submit>
                        </x-splade-form>

which posts to:

    public function destroy(Post $post)
    {
        $post->delete();

        return redirect()->route('posts.index');
    }

The delete is successful but the redirect results in:

Symfony \ Component \ HttpKernel \ Exception \ MethodNotAllowedHttpException
The DELETE method is not supported for this route. Supported methods: GET, HEAD, POST. 

Where Laravel applications usually do a POST-request with a _method: DELETE and CSRF-token in the body:

I see in Splade a DELETE-request (which results in a DELETE-request for the redirect):

Workaround for now is to show return $this->index(); instead of return redirect()->route('posts.index'); after the delete.

I try to select the permission that was already to attach the role but, from the model, I get the data [1,2,3] but the select option was not selected or was the attached value pre-selected, what I did a mistake? as a option showing in both select option

It would be nice if you can set an attribute for x-splade-modal to show a default close-button (X) in the right upper corner. This button can $emit('close') on click.

Hi Pascal,

Thanks for adding Filepond, I just finished my own custom Filepond upload implementation when #100 was added. So I refactored and I love it!

I use a FormRequest that implements HasSpladeFileUploads, validate with 'filePath' => ['nullable', 'file'],

My form contains: <x-splade-file name="filePath" :label="__('Bestand')" filepond accept="video/quicktime, video/mp4" server />

I managed to get it working like this:

        // First I do an update on the model
        $model->update($request->safe()->except(['filePath']));

        // Then I add the file if one was uploaded
        if (!empty($request->validated('filePath'))) {
            $model->path = $request->validated('filePath')->store('files');
            $model->save();
        }

I have to do it this way because $request->file(...) and $request->allFiles() are empty. The snippet from the documentation ($path = $request->file('filePath')->store('files');) is not working for this approach.

Is this expected behaviour or am I doing something wrong here?

Hello,

1. It would be great to instead be able use the web middleware instead of a custom one considering so many Laravel packages rely on it and not yours.
2. While installing the Breeze demo app in the documentation many of your references don't coincide with the blade files (especially routes and views in the breeze demo plugin).. none of them have Vue components that are used as examples. I actually dont see anything Vue related in it.. Example: Link component isn't used for any routes in the blade files...
3. It would be nice to also have a library of .vue components to be able to reference to for building the app...

I am not criticizing. I am just asking for a feature/enhancement. Thanks!

From the docs, I learned that we have to register any custom component in the app.js file. So is there any way we can use different js functions/methods in a specific route/page, not in the global scope?

Is it possible to have a persistent form or do I need to wrap everything into layout?

When uploading large files, I would love to let users run around and do other stuff while files are being uploaded in the background.

Thanks buddy

I built an app using Laravel and Splade. When I create views, the CSS is there but certain elements like images and charts disappear. When I comment out this line:

@vite(['resources/js/app.js'])

Everything looks fine but Splade is no longer active. This suggests that there's something wrong with my Vite configuration but I can't figure it out. I have tried this with multiple templates and different assets so the issue isn't the template.

The error I get from the console is runtime-core.esm-bundler.js:40 [Vue warn]: Template compilation error: Tags with side effect (