bastinald / laravel-livewire-modals Goto Github PK
View Code? Open in Web Editor NEWDynamic Laravel Livewire Bootstrap modals.
Dynamic Laravel Livewire Bootstrap modals.
Hi,
I'm working in an migration from Livewire 2 to 3 but I cannot use your package due to is blocked to Livewire 2.
Could you upgrade the Livewire version please?
Thanks in advance.
Hi
https://github.com/alighasemzadeh/bap/tree/master/resources/views/livewire/admin/user
This my modal code but I can open modal.
Some modals can be pretty heavy to load / setup, thus I like to display a loader on the button that triggers a modal.
I am guessing this won't be possible here, as wire:target has nothing to really target. Right?
Double checked some of your existing modals and even tried adding autofocus to an input, but no dice. I think there needs to be a way to autofocus on the first input opening a form within a modal. Thoughts? I opened it here because i figured it would apply to this package and your ui package.
Hello,
Do you plan to have any implementation of show, create & edit routes ?
Today, when we click on "read" or "edit" it's a javascript-button . If we refresh the page, we loose the popup (going back to the main page).
Could be useful to:
History.pushState()
)Right now, I did something like that:
class Index extends Component
{
public $entity;
public $action;
public function route()
{
return Route::get('member/tn-members/{entity?}/{action?}', static::class)
->name('member.tn-members')
->middleware('auth');
}
public function loaded() {
if( $this->entity->exists ) {
switch($this->action) {
case 'show':
$this->emit('showModal', 'member.tn-members.read', $this->entity->id);
break;
case 'edit':
$this->emit('showModal', 'member.tn-members.save', $this->entity->id);
break;
case 'create':
$this->emit('showModal', 'member.tn-members.save');
break;
}
}
}
public function mount($entity = null, $action = 'show') {
$this->entity = TnMember::findOrNew($entity);
$this->action = $action;
}
// [...]
}
And the view:
@section('title', __('Tn Members'))
<div wire:init="loaded">
(I also tried with addEventListener('contentChanged') but we still need the wire:init)
Now, when I use the url the modal are automatically opening (like trello cards)
There is maybe another way to do it :)
For the other point (History.pushState), it's another story.
I don't know if the best is to change a little bit the emit parameters ? pass the route directly ? add extra parameter like data-href ?
wire:click="$emit('showModal', 'member.tn-members.read', route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']), {{ $tnMember->id }})"
or
<x-bs::button icon="eye" :title="__('Read')" color="outline-primary" size="sm"
data-href="{{ route('member.tn-members', ['entity' => $tnMember->id, 'action' => 'show']) }}"
wire:click="$emit('showModal', 'member.tn-members.read', $event.target.getAttribute('data-href'), {{ $tnMember->id }})"/>
or manipulate via Modals::showModal, but need to handle create(=save & no id)/edit(=save & id)/show(=read)
or let the Read/Save component handle the route event and raise an $emit('changeUrl') ?
(Interesting article with potential solution about the changeUrl event: livewire/livewire#399)
after many checking the package readme as how can i install and use it into laravel. after installing the package and adding some code into project like with what we see in read me, clicking on button doesn't show any modal
i can't push javascript event listener, ex: livewire:load
Good extension.
offcanvas has similar functionality. can add it here or make another similar extension.
also sometimes multimodal is needed. no plans to do?
Hello,
I use this modal component, and I have some possible improvements:
This will prevent to have several overlay displayed (without possibility to clean them), if we have modal with modal link inside or if we want to do some navigation.
Livewire.on('showBootstrapModal', () => {
let modal = Modal.getOrCreateInstance(modalsElement);
if( modal ) {
modal.show();
}
});
If we trigger event hideModal, and this one does not exists ... there is an error.
Linked to next improvement too.
Livewire.on('hideModal', () => {
let modal = Modal.getInstance(modalsElement);
if( modal ) {
modal.hide();
}
});
Currently we have $this->emit('$refresh'); $this->emit('hideModal');
but I think it could be better to have:
$this->emit('$refresh');
$this->emit('hideModal');
Indeed, this will prevent the system to not refresh (i.e.: the list), if the modal does not exists (i.e.: trigger event via another Component) and/or protect the modal.hide()
.
I created a system to change the modal in "columns", and I had some issues when I tried to play with the layout & css (flex, overflow). To provide more flexibility, could it be possible to separate the modal-body and the content ?
<div class="modal-body">
<div class="d-grid gap-3"></div>
</div>
If everything is on the same tag, the flex propriety of the d-grid is filling all the height of the modal-body, and the inputs are like that :
Any chance you could add support for bootstrap 4?
It seems all that needs to change is the javascript that you import:
// modals-bs4.js
let modalsElement = document.getElementById('laravel-livewire-modals');
$(modalsElement).on('hidden.bs.modal', () => {
Livewire.emit('resetModal');
});
Livewire.on('showBootstrapModal', () => {
$(modalsElement).modal('show');
});
Livewire.on('hideModal', () => {
$(modalsElement).modal('hide');
});
Thanks, love the package!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.