-
Notifications
You must be signed in to change notification settings - Fork 718
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support phoenix liveview #487
Support phoenix liveview #487
Conversation
The PR is work in progress, will continue tomorrow, please leave feedback as well. |
Hey @jmnda-dev, I've checked the progress so far and it looks good! So we need both the Cheers, |
Yeah, that way it will work for both LiveViews and regular Views |
…ev/flowbite into support_phoenix_liveview
I have added instruction for including the javascript file via CDN, though I have some questions:
|
@zoltanszogyenyi I have not added a datepicker javascript file for Phoenix, I feel it's not necessary, however I have added instructions for setting up the datepicker using |
Hey @jmnda-dev, Thanks for the contribution.
Cheers, |
Hi @zoltanszogyenyi, I make a slight change to the Phoenix docs. As for now the generated files, I have checked everything and all looks good on my end. |
@jmnda-dev - thanks for looking into this. I am actually running into the same exact problem with LiveView. @zoltanszogyenyi - any update on this? |
@gsperka If you haven't found a solution yet, you can look at a quick fix I mentioned in this issue #486 The work on the PR is done, waiting feedback from @zoltanszogyenyi. If you have any suggestions on this PR let me know. |
Hey @jmnda-dev, I'll try to include this in the weekend for the next release! Looks pretty good at a first glance. Cheers, |
Hey @jmnda-dev , thanks a lot for the work. Note this problem is referenced here: https://elixirforum.com/t/tailwind-javascripts-stop-working-after-live-redirects-between-liveviews/50282/13 @zoltanszogyenyi for what it's worth, until this is merged, I've patched our app (which is on Phoenix Liveview + Tailwind latest version) with @jmnda-dev 's work (see below) and FlowbiteJS now works for me. Until then I basically had to deactivate all your JS and kind of reimplement it with custom JS. Not ideal! Thanks both and have a good Sunday :). Here's what I did based on the work of this PR In import './flowbite' instead of directly doing In /*
Fetched code from https://github.com/themesberg/flowbite/pull/487
to support LiveView re-renders and navigation.
Without this patch, Flowbite JS is unusable within LiveView.
*/
import 'flowbite';
import Events from 'flowbite/lib/esm/dom/events';
// core components
import {
initAccordions, initCarousels, initCollapses, initDials, initDismisses, initDrawers, initDropdowns,
initModals, initPopovers, initTabs, initTooltips
} from 'flowbite';
const liveViewLoadEvents = new Events('phx:page-loading-stop', [
initAccordions,
initCollapses,
initCarousels,
initDismisses,
initDropdowns,
initModals,
initDrawers,
initTabs,
initTooltips,
initPopovers,
initDials,
]);
liveViewLoadEvents.init();
const regularViewLoadEvents = new Events('load', [
initAccordions,
initCollapses,
initCarousels,
initDismisses,
initDropdowns,
initModals,
initDrawers,
initTabs,
initTooltips,
initPopovers,
initDials,
]);
regularViewLoadEvents.init(); |
Merged <3. Will release v1.6.5 soon - will let you peeps know. |
Thank you @zoltanszogyenyi |
This PR resolves #486
index.phoenix.ts
for initializing Flowbite components in Phoenix LiveViews and regular viewsindex.phoenix.ts
flowbite-datepicker