LoopOS UI v1.1.48.1

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
<div class="w-full max-w-md flex flex-col gap-2">
  <p class="text-copy-12-400 text-text-v2-secondary">
    Open the dropdown or type to filter. Data comes from
    <code class="text-text-v2-primary">GET /combobox_async_options</code>
    (<code>query</code>, <code>page</code>, <code>per_page</code>). Changing the selection submits the GET form.
  </p>
  <form id="combobox_async_autosubmit_form" data-turbo-frame="combobox-async-autosubmit-frame" action="#" accept-charset="UTF-8" method="get">
    <div class="lui-combobox w-full flex flex-col gap-1 lui-combobox--autosubmit">
      <label class="text-sm font-medium text-text-v2-primary" for="looposui-inputs-combobox_combobox_async_character_id_6503213766">
        Character (async)
      </label>      
      <p id="looposui-inputs-combobox_combobox_async_character_id_6503213766_description" class="text-copy-12-400 text-text-v2-secondary">
        Tom Select loads options from the dummy Rails endpoint; autosubmit sends the form on change.
      </p>
      <select name="combobox_async_character_id" id="looposui-inputs-combobox_combobox_async_character_id_6503213766" class="lui-combobox__select w-full" form="combobox_async_autosubmit_form" style="visibility: hidden;" data-controller="combobox" data-combobox-submit-on-change-value="true" data-combobox-dropdown-input-value="true" data-combobox-dropdown-input-placeholder-value="Search..." data-combobox-clear-button-value="false" data-combobox-open-on-mouse-down-value="true" data-combobox-lock-scroll-value="false" data-combobox-disable-typing-value="false" data-combobox-allow-new-value="false" data-combobox-scroll-buttons-value="false" data-combobox-update-field-value="false" data-combobox-update-field-source-value="name" data-combobox-per-page-value="20" data-combobox-virtual-scroll-value="false" data-combobox-optgroup-columns-value="false" data-combobox-response-data-field-value="data" data-combobox-search-param-value="query" data-combobox-show-count-value="false" data-combobox-count-text-value="selected" data-combobox-tags-position-value="inline" data-combobox-enable-flag-toggle-value="false" data-combobox-value-field-value="value" data-combobox-label-field-value="label" data-combobox-url-value="/combobox_async_options" aria-describedby="looposui-inputs-combobox_combobox_async_character_id_6503213766_description"><option value="">Search characters…</option></select>
    </div>
  </form>
</div>
<div class="mt-6">
  <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p>
  <turbo-frame id="combobox-async-autosubmit-frame">
    <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-text-v2-secondary">params[:combobox_async_character_id]:</span>
        <code class="ml-1 text-text-v2-primary">—</code>
      </div>
      <div class="mt-1 text-text-v2-contrast">
        2026-05-05 20:52:09 UTC
      </div>
    </div>
  </turbo-frame></div>

No Usage documentation to display.

Create a markdown file in /project/test/components/loopos_ui/usage_documentation/combobox.md.

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
<%
  if params.key?(:combobox_async_character_id) &&
       ActiveModel::Type::Boolean.new.cast(params[:simulate_slow_response])
    sleep 2
  end
%>
<% form_id = "combobox_async_autosubmit_form" %>
<%# Uses test/dummy ComboboxAsyncOptionsController — same-origin JSON for Tom Select remote load. %>
<div class="w-full max-w-md flex flex-col gap-2">
  <p class="text-copy-12-400 text-text-v2-secondary">
    Open the dropdown or type to filter. Data comes from
    <code class="text-text-v2-primary">GET <%= combobox_async_options_path %></code>
    (<code>query</code>, <code>page</code>, <code>per_page</code>). Changing the selection submits the GET form.
  </p>
  <%= form_with url: "#", method: :get, id: form_id, data: { turbo_frame: "combobox-async-autosubmit-frame" } do %>
    <%= lookbook_fields(params.slice(:simulate_slow_response)) %>
    <%= render LooposUi::Inputs::Combobox.new(
          name: "combobox_async_character_id",
          label: "Character (async)",
          description: "Tom Select loads options from the dummy Rails endpoint; autosubmit sends the form on change.",
          include_blank: "Search characters…",
          mode: :autosubmit,
          form: form_id,
          options: [],
          url: combobox_async_options_path,
          value_field: "value",
          label_field: "label",
          per_page: 20,
          searchable: true,
          value: params[:combobox_async_character_id].presence,
        ) %>
  <% end %>
</div>
<div class="mt-6">
  <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p>
  <%= turbo_frame_tag "combobox-async-autosubmit-frame" do %>
    <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
      <div>
        <span class="text-text-v2-secondary">params[:combobox_async_character_id]:</span>
        <code class="ml-1 text-text-v2-primary"><%= params[:combobox_async_character_id].presence || "—" %></code>
      </div>
      <div class="mt-1 text-text-v2-contrast">
        <%= Time.current %>
      </div>
    </div>
  <% end %>
</div>

Async options + mode: :autosubmit; submitted param shown in the turbo frame below.

Param Description Input

Simulate slow response, 2 seconds delay

No documentation to display.

Create a markdown file in combobox.