I’m just getting into Live View and really enjoying the experience. I wondered though - what are people using for front end ui components? I thinking of things like Date Pickers, Time Pickerrs. I’ve seens some Live View only components but I think that for things like a date picker it would be better to do in the front end.
I’d recommend web components which are a standard and will work with anything: plain js/react/vue/angular/you name it + LiveView. Google has a collection with Material UI (https://material-components.github.io/material-components-web-components/demos/index.html) but there are also more (https://www.webcomponents.org/element/vaadin/vaadin-date-picker)
Vaadin is very heavy. Single date picker is 261.4kB (minified), 71kB(minified+gzipped)
Vanillajs, 0 dependencies. 48.2kB(minified), 13.8kB(minified+gzipped)
Some lightweight vanillajs components that work well with liveview:
Dropdown(arrow-up/down -able): https://www.webcomponents.org/element/@github/details-menu-element
Time element: https://www.webcomponents.org/element/time-elements
Either use with phx-hook or html “custom element”, you may not need hook since “custom element” has a bunch of callback such as
attributeChangedCallback. For example, patching html attribute from liveview server will trigger that last callback, and when it’s removed from
document you can dispose *EventListener inside
I am in same boat.
I am avoiding unnecessary packages/plugins and using Alphine.js wherever possible.
I am searching for an alternative to select2, if readers know an easy way over jQuery.
Thanks for the suggestions @DanBunea and @50kudos - I’ll take a look at webcomponents and other vanilla js type options.
I was on the same hunt. Settled with slim select which is pretty nice. https://slimselectjs.com/
thanks @harmon25 - I’ll take a look.
I’m starting to use flatpickr but getting tripped up a little when Liveview executes validations on-change and updates the DOM. I figure a new thread was warranted, and describe my planned strategy to deal with this here: Correct strategy for using datepicker attached to an input field with Liveview?
If anyone has any helpful suggestions, I’d be eager to hear them! Thanks!