View Source LiveSelect
LiveSelect
is a stateful LiveView component that implements a dynamic search and selection
field that can be filled dynamically by your application. It has no external dependencies apart from
LiveView. It comes with optional pre-configured styles
for DaisyUI.
installation
Installation
To install, add this to your dependencies:
[
{:live_select, "~> 0.1.0"}
]
javascript-hooks
Javascript Hooks
LiveSelect
relies on Javascript hooks to work. You need to add LiveSelect
's hooks to your live socket.
In your app.js
file:
import live_select from "live_select"
...
// if you don't have any other hooks you can do this
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks: live_select})
// if you have other hooks (called "my_hooks") you can do this:
const hooks = Object.assign(my_hooks, live_select)
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}, hooks})
styling
Styling
LiveSelect
supports 2 styling options: styling with daisyUI or custom styling. The choice
of styling is controlled using the style
option in LiveSelect.live_select/3
.
If you want to use daisyUI styles, you'll have to install daisyUI. This is as simple as adding an additional plugin to your tailwind.config.js
Moreover, in order for tailwind to see the daisyUI classes used by LiveSelect
, you need to add the following line to the content
section in your tailwind.config.js
:
module.exports = {
content: [
...
'../deps/live_select/lib/live_select/component.*ex'
],
...
}
That's it! Now your LiveSelect
component will use pre-configured daisyUI styles.
NOTE: you might need an additional ..
in the path if your application is an umbrella app
showcase-app
Showcase app
The repository includes a showcase app you can use to play around with the different options and parameter for LiveSelect
.
To start the showcase app, simply run:
PORT=4001 mix phx.server
from within the cloned repository. The app will be available at http://localhost:4001. The showcase app shows the messages and events that your LiveView receives. For each event or message, the app shows function head of the callback that your LiveView needs to implement in order to handle the event.
This allows you to quickly copy and paste the function definition into your live view.
usage
Usage
Refer to the online documentation.
todo
TODO
- [X] Add
package.json
to enableimport live_select from "live_select"
- [X] Make sure component classes are included by tailwind
- [X] Enable custom styling
- [X] Rename LiveSelect.render to live_select
- [ ] Enable slots
- [ ] Enable tailwind styles