Packages

live_select

0.2.1
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 lib live_select component.html.heex
Raw

lib/live_select/component.html.heex 

<div

  id={@id}

  class={class(@style, :container, @container_class, @container_extra_class)}

  name="live-select"

  phx-hook="LiveSelect"

  phx-target={@myself}

  phx-click-away="click_away"

>

  <%= text_input(@form, @text_input_field,

    value: @input,

    class:

      "#{class(@style, :text_input, @text_input_class, @text_input_extra_class)}#{if @selected, do: " #{class(@style, :text_input_selected, @text_input_selected_class)}"}",

    phx_click: "click",

    placeholder: @placeholder,

    phx_debounce: @debounce,

    phx_keyup: "keyup",

    phx_target: @myself,

    phx_change: "change",

    disabled: @disabled,

    readonly: !is_nil(@selected),

    autocomplete: "off",

    phx_focus: "focus",

    phx_blur: "blur"

  ) %>

  <%= hidden_input(@form, @field, disabled: @disabled) %>

  <ul

    class={class(@style, :dropdown, @dropdown_class, @dropdown_extra_class)}

    style={if Enum.empty?(@options) || @hide_dropdown, do: "display: none;", else: ""}

    name="live-select-dropdown"

  >

    <%= for {{label, _}, idx} <- Enum.with_index(@options) do %>

      <li

        phx-click="option-click"

        phx-value-idx={idx}

        phx-target={@myself}

        name={"option-#{idx + 1}"}

      >

        <div class={[

          class(@style, :option, @option_class, @option_extra_class),

          if(idx == @current_focus, do: class(@style, :active_option, @active_option_class))

        ]}>

          <%= label %>

        </div>

      </li>

    <% end %>

  </ul>

</div>