LoopOS UI v1.1.26.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<turbo-frame id="example">
  <form action="#" accept-charset="UTF-8" method="get">
    <input type="hidden" name="placeholder" id="placeholder" value="Pesquisar..." autocomplete="off" /><input type="hidden" name="event_only" id="event_only" value="true" autocomplete="off" />
    <div class="w-64 flex justify-end items-center">
      <div data-controller="search"
  id="looposui-inputs-search_query_5793709857"
  class="lui-search"
  data-search-input-outlet="#looposui-inputs-search_query_5793709857 .lui-inner-input"
  data-search-event-only-value="true"
  >
        <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value=""
    data-input-mode-value="autosubmit"
    data-input-form-value="">
          <div class="w-full flex flex-col">
            <span class="lui-input ">
              <span class="lui-input__addon-left">
                <div class="text-[12px] flex items-center text-center">
                  <i class="fa-regular fa-magnifying-glass text-gray-400"></i>
                </div>
              </span>
              <input name="query" type="search" placeholder="Pesquisar..." class="lui-input__input" mode="autosubmit" contentEditable="true" data-input-target="input" data-action="input->search#toggleClearButton input->input#setEditing input->search#onInput change->search#onInput" data-search-target="input">
              <span class="lui-input__addon-right">
                <span class="flex">
                  <i class="fa-regular fa-xmark cursor-pointer text-gray-400"
          data-search-target="clearButton"
          data-action="click->search#clear click->input#finishEditing">
                  </i>
                </span>
              </span>
              <span class="lui-input__spinner">
                <i class="fa-regular fa-spinner"></i>
              </span>
            </span>
          </div>
          <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
            <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
            </button>
            <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
              <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
            </button>
          </span>
        </div>
      </div>
    </div>
  </form>
</turbo-frame>
<div id="search-event-display">
</div>
<script>
  document.addEventListener("search", (event) => {
    const { query, finished } = event.detail
    document.getElementById("search-event-display").innerHTML = `
      <p>Query: ${query}</p>
      Simulating busy work ...
    `
    setTimeout(() => {
      // Simulate work being done
      finished()
      document.getElementById("search-event-display").innerHTML = `
        <p>Finished</p>
      `
    }, 2000)
  })
</script>

Inputs::Search

The Input Search component is a specialized text input for searching within datasets or lists.

Usage rules

✅ Do

  • Use for search-specific interactions like filtering datasets.

❌ Don't

  • Don’t use as a general text input
  • Don’t ignore empty state results
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<% 
  value = params[:query].presence || preview_params.delete(:value)
  if params[:query].present? # User palying with the input with event_only false
    sleep(2) # Simulate work being done
  end
%>
<%= turbo_frame_tag "example" do %>
  <%= form_with url: "#", method: :get do %>
    <%= lookbook_fields(preview_params) %>
    <div class="w-64 flex justify-end items-center">
      <%= render LooposUi::Inputs::Search.new(
      name: "query",
      value: value,
      **preview_params
      ) %>
    </div>
  <% end %>
<% end %>
<div id="search-event-display">
</div>
<script>
  document.addEventListener("search", (event) => {
    const { query, finished } = event.detail
    document.getElementById("search-event-display").innerHTML = `
      <p>Query: ${query}</p>
      Simulating busy work ...
    `
    setTimeout(() => {
      // Simulate work being done
      finished()
      document.getElementById("search-event-display").innerHTML = `
        <p>Finished</p>
      `
    }, 2000)
  })
</script>

No notes provided.

Param Description Input

—

—

—

Description

The Input Search component is a specialized text input for searching within datasets or lists.

Arguments

Property Default Description
name nil The input name that will be used when submitting. Usually you'll want q or query
value nil The initial value of the input.
placeholder nil The placeholder text that will be displayed when the input is empty.
open_actions false Open field in edit mode by default.
event_only true If true, the input will only dispatch the search event and will not submit the form.

Events

The Inputs::Search component dispatches and listens to several custom events to enable interactive search behavior:

Dispatched Events

Event Name Description
search Fired whenever the input value changes (debounced by 500ms). Carries the current query. Bubbles

The search event is dispatched as a CustomEvent and bubbles up the DOM. Its detail property contains:

Property Type Description
query String The current value of the search input.
finished Function A callback to be called when your async work is done. This will stop the loading indicator.

You can see an example in the preview source.