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
<form id="combobox_form_mode_form" class="flex flex-col gap-4 max-w-md" action="#" accept-charset="UTF-8" method="get">
  <div class="lui-combobox w-full flex flex-col gap-1 lui-combobox--form">
    <label class="text-sm font-medium text-text-v2-primary" for="looposui-inputs-combobox_combobox_language_5793709857">
      Language
    </label>      
    <p id="looposui-inputs-combobox_combobox_language_5793709857_description" class="text-copy-12-400 text-text-v2-secondary">
      Form mode: no submit-on-change — use the button below.
    </p>
    <select name="combobox_language" id="looposui-inputs-combobox_combobox_language_5793709857" class="lui-combobox__select w-full" style="visibility: hidden;" data-controller="combobox" data-combobox-submit-on-change-value="false" 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="60" 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" aria-describedby="looposui-inputs-combobox_combobox_language_5793709857_description"><option value="">Select language…</option>
      <option selected="selected" value="ruby">Ruby</option>
      <option value="js">JavaScript</option>
      <option value="python">Python</option></select>
  </div>
  <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button" data-action="lui--button#startLoading" type="submit">
    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
      Submit
    </span>          
    <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
      <i class="lui-m_icon animate-spin material-symbols-outlined" style="--lui-micon-size: 16px;">
        progress_activity
      </i>
    </div>
  </button>
</form>
<div class="mt-6 max-w-md">
  <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p>
  <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
    <span class="text-text-v2-secondary">params[:combobox_language]:</span>
    <code class="ml-1 text-text-v2-primary break-all">—</code>
  </div>
</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
<%
  if params.key?(:combobox_language) && params[:simulate_slow_response].present?
    sleep 2
  end
%>
<%= form_with url: "#", method: :get, class: "flex flex-col gap-4 max-w-md", id: "combobox_form_mode_form" do %>
  <%= lookbook_fields(params.slice(:simulate_slow_response)) %>
  <%= render LooposUi::Inputs::Combobox.new(
        name: "combobox_language",
        label: "Language",
        description: "Form mode: no submit-on-change — use the button below.",
        mode: :form,
        include_blank: "Select language…",
        options: [
          { value: "ruby", text: "Ruby" },
          { value: "js", text: "JavaScript" },
          { value: "python", text: "Python" },
        ],
        value: params[:combobox_language].presence || "ruby",
      ) %>
  <%= render LooposUi::Button.new(text: "Submit", kind: :neutral, tag_options: { type: :submit }) %>
<% end %>
<div class="mt-6 max-w-md">
  <p class="text-sm font-medium text-text-v2-primary mb-2">Current submitted value</p>
  <div class="rounded-md border border-v2-gray-200 bg-surface-secondary p-3 text-copy-12-400">
    <span class="text-text-v2-secondary">params[:combobox_language]:</span>
    <code class="ml-1 text-text-v2-primary break-all"><%= params[:combobox_language].presence || "—" %></code>
  </div>
</div>

Same as Select mode: :form — no autosubmit; use with an explicit submit button.

Param Description Input

Simulate slow response, 2 seconds delay

No documentation to display.

Create a markdown file in combobox.