Packages

live_select

1.0.2
1.7.5 1.7.4 1.7.3 1.7.2 1.7.1 1.7.0 1.6.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.3 1.3.2 1.3.1 1.3.0 1.2.2 1.2.1 1.2.0 retired 1.1.1 1.1.0 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0 0.4.1 0.4.0 0.3.3 0.3.2 0.3.1 0.3.0 0.2.1 0.2.0 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0

Dynamic (multi)selection field for LiveView

HexDocs

Current section

Files

Jump to
Readme
45 Versions
3 Dependencies
Dependants
Files
Activity
live_select priv static live_select.min.js
Raw

priv/static/live_select.min.js 

export default{LiveSelect:{textInput(){return this.el.querySelector("input[type=text]")},maybeStyleClearButton(){const t=this.el.querySelector("button[phx-click=clear]");t&&(this.textInput().style.position="relative",t.style.position="absolute",t.style.top="0px",t.style.bottom="0px",t.style.right="5px")},attachDomEventHandlers(){this.textInput().onkeydown=e=>{e.code==="Enter"&&e.preventDefault(),this.pushEventTo(this.el,"keydown",{key:e.code})};const t=this.el.querySelector("ul");t&&(t.onmousedown=e=>{e.target.dataset.idx&&(this.textInput().blur(),this.pushEventTo(this.el,"option_click",{idx:e.target.dataset.idx}))})},setInputValue(t,{focus:e}){this.textInput().value=t,e&&this.textInput().focus()},inputEvent(t,e){const l=e==="single"?"input[class=single-mode]":t.length===0?"input[name=live_select_empty_selection]":"input[type=hidden]";this.el.querySelector(l).dispatchEvent(new Event("input",{bubbles:!0}))},mounted(){this.maybeStyleClearButton(),this.handleEvent("change",({payload:t,target:e})=>{this.el.id===t.id&&(e?this.pushEventTo(e,"live_select_change",t):this.pushEvent("live_select_change",t))}),this.handleEvent("select",({id:t,selection:e,mode:l,focus:i,input_event:n})=>{if(this.el.id===t){if(l==="single"){const s=e.length>0?e[0].label:null;this.setInputValue(s,{focus:i,blur})}else this.setInputValue(null,{focus:i,blur});n&&this.inputEvent(e,l)}}),this.attachDomEventHandlers()},updated(){this.maybeStyleClearButton(),this.attachDomEventHandlers()}}};