Packages

kanta

0.3.1
0.5.1 0.5.0 0.4.2 0.4.1 0.4.0 0.3.1 0.3.0 0.2.2 0.2.1 0.2.0 0.1.4 0.1.3 0.1.2 0.1.1 0.1.0 0.0.1-rc1

User-friendly translations manager for Elixir/Phoenix projects.

HexDocs

Current section

Files

Jump to
Readme
16 Versions
13 Dependencies
Dependants
Files
Activity
kanta lib kanta_web components shared select select.html.heex
Raw

lib/kanta_web/components/shared/select/select.html.heex 

<div

  id={"#{@id}-wrapper"}

  phx-hook="Select"

  x-data={"{ open: false, idx: -1, selectedIdx: #{Enum.find_index(@options, & &1.value == @field.value) || 0}, max: #{length(@options) - 1} }"}

  x-init={"() => { $watch('selectedIdx', val => $dispatch('selected-change', { selectedIdx: val, id: '##{@id}' }) ) }"}

  x-on:reset="open = false"

>

  <label class="block text-sm font-medium text-gray-700 dark:text-content-light" @click="$refs.button.focus()">

    <%= @label %>

  </label>

  <%= hidden_input @form, @field.name %>

  <div class="relative mt-1">

    <button

      type="button"

      style="min-width: 12rem;"

      class="relative w-full py-2 pl-3 pr-10 text-left bg-white dark:bg-stone-900 border border-gray-300 cursor-default rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-primary-dark focus:dark:ring-accent-dark focus:border-primary-dark focus:dark:border-accent-dark sm:text-sm"

      x-ref="button"

      @click="open = !open"

      @keydown.escape.window="open = false"

      @keydown.enter.stop.prevent="selectedIdx = idx"

      @keydown.arrow-up.prevent="idx = idx === 0 ? max : idx - 1"

      @keydown.arrow-down.prevent="idx = idx === max ? 0 : idx + 1"

    >

      <span class="flex items-center">

        <div class="flex-shrink-0 w-3 h-3 rounded-full" style={"background-color: #{@selected_option.color}"}/>

        <span class="block ml-3 truncate text-stone-900 dark:text-content-light"><%= @selected_option.label %></span>

      </span>

      <span class="absolute inset-y-0 right-0 flex items-center pr-2 ml-3 pointer-events-none">

        <Icons.chevrons_up_down class="w-5 h-5 text-gray-400" />

      </span>

    </button>



    <ul

        x-show="open"

        x-transition:leave="transition ease-in duration-100"

        x-transition:leave-start="opacity-100"

        x-transition:leave-end="opacity-0"

        class="absolute z-10 w-full py-1 mt-1 overflow-auto text-base bg-white dark:bg-stone-900 shadow-lg max-h-56 rounded-md ring-1 ring-black dark:ring-white ring-opacity-5 focus:outline-none sm:text-sm"

        @click.away="open = false"

        tabindex="-1"

        role="listbox"

      >



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

        <li

          class="relative py-2 pl-3 hover:bg-primary hover:dark:bg-accent-dark text-content-dark dark:text-content-light hover:text-content-light cursor-pointer select-none pr-9"

          role="option"

          @click="selectedIdx = idx"

          @mouseenter={"idx = #{idx}"}

        >

          <div class="flex items-center">

            <div class="flex-shrink-0 w-3 h-3 rounded-full" style={"background-color: #{option.color}"}/>

            <span class="block ml-3 font-normal truncate">

              <%= option.label %>

            </span>

          </div>

        </li>

      <% end %>

    </ul>

  </div>

</div>