Packages

mavu_snippets_ui

0.1.13
0.1.24 0.1.20 0.1.19 0.1.18 0.1.17 0.1.16 0.1.15 0.1.14 0.1.13 0.1.12 0.1.11 0.1.10 0.1.8 0.1.7 0.1.6 0.1.5 0.1.4

MavuSnippetsUi: Rodent - Management for mavu_* projects

HexDocs

Current section

Files

Jump to
Readme
17 Versions
13 Dependencies
Dependants
Files
Activity
mavu_snippets_ui lib live mavu_list searchbox_component.html.heex
Raw

lib/live/mavu_list/searchbox_component.html.heex 

<div class="flex justify-end" id="list-search" x-data={"{\n  keyword: '#{ @keyword }',\n  start_search:function() {\n     window.PhxContext.pushEventTo('#{ @target }','list.set_keyword', {keyword: this.keyword});\n  }\n  }"}>

  <div class="px-3 mt-5 w-60">

    <label for="search" class="sr-only">Search</label>

    <div class="relative mt-1 rounded-md shadow-sm">

      <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none" aria-hidden="true">

        <svg class="w-4 h-4 mr-3 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"

          fill="currentColor" aria-hidden="true">

          <path fill-rule="evenodd"

            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"

            clip-rule="evenodd" />

        </svg>

      </div>

      <input type="text" name="search" id="search" x-model.debounce.250="keyword" x-ref="kwinput"

        x-on:keydown.enter="start_search"

        class="block w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 pl-9 sm:text-sm"

        placeholder="Search">

      <a class="absolute inset-y-0 right-0 flex items-center pr-3" href="#"

        x-on:click="keyword='';start_search();$refs.kwinput.focus()">

        <svg class="w-4 h-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"

          x-show="keyword.length">

          <path fill-rule="evenodd"

            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"

            clip-rule="evenodd" />

        </svg>

      </a>

    </div>

  </div>

</div>