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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<form id="some_form_id" data-turbo-frame="example-frame" action="#" accept-charset="UTF-8" method="get">
  <div id="looposui-inputs-select_user_id_5793709857" data-controller="input-select" data-input-select-input-outlet="#looposui-inputs-select_user_id_5793709857 .lui-inner-input" data-input-select-mode-value="autosubmit" data-input-select-form-value="some_form_id">
    <div class="lui-input-select lui-input-select--autosubmit relative">
      <div data-controller="input" data-input-open-actions-value="true" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="user 1"
    data-input-mode-value="autosubmit"
    data-input-form-value="some_form_id">
        <div class="w-full flex flex-col">
          <span class="lui-input ">
            <input name="user_id" type="text" value="user 1" placeholder="Selecione um user" class="lui-input__input" mode="autosubmit" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-input-select-target="textInput" readonly="readonly">
            <span class="lui-input__addon-right">
              <span class="flex flex-row items-center gap-2">
                <i class=" fa-solid fa-xmark cursor-pointer text-gray-400 lui-input-select__clear"
              data-input-select-target="clearButton"
              data-action="click->input-select#clear">
                </i>
                <div data-input-select-target="icon">
                  <div class="lui-icon h-[12px] w-[12px]">
                    <i class="fa-regular fa-chevron-down lui-icon__icon" style="font-size: 12px; color: #212529;"></i>
                  </div>
                </div>
              </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 data-input-select-target="menu" class="lui-input-select__wrapper">
        <div class="lui-input-select__options" role="listbox">
          <div class="lui-input-select__option"
                role="option"
                data-input-select-target="option"
                data-text="user 1"
                data-value="1">
            <div class="lui-input-select__option-wrapper">
              <div class="lui-input-select__option-text">
                <i class="fa-regular fa-user"></i>
                <span role="text">user 1</span>
              </div>
              <i class="fa-regular fa-check " data-input-select-target="check"></i>
            </div>
          </div>
          <div class="lui-input-select__option"
                role="option"
                data-input-select-target="option"
                data-text="user 2"
                data-value="2">
            <div class="lui-input-select__option-wrapper">
              <div class="lui-input-select__option-text">
                <i class="fa-regular fa-user"></i>
                <span role="text">user 2</span>
              </div>
              <i class="fa-regular fa-check hidden!" data-input-select-target="check"></i>
            </div>
          </div>
          <div class="lui-input-select__option"
                role="option"
                data-input-select-target="option"
                data-text="user 3"
                data-value="3">
            <div class="lui-input-select__option-wrapper">
              <div class="lui-input-select__option-text">
                <i class="fa-regular fa-user"></i>
                <span role="text">user 3</span>
              </div>
              <i class="fa-regular fa-check hidden!" data-input-select-target="check"></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" name="user_id" id="user_id" value="user 1" data-input-select-target="hiddenInput" autocomplete="off" />
  </div>
</form>
<div class="mt-6">
  Only this frame will be updated:
  <turbo-frame id="example-frame">
    <div>
      Selected user: 
    </div>
    <div>
      2025-12-06 11:36:30 UTC
    </div>
  </turbo-frame></div>

Inputs::Select

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
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
<%
    if params.key?(:user_id) && params[:simulate_slow_response].present?
        sleep 2
    end
%>
<% form_id = "some_form_id" %>
<%= form_with url: "#", method: :get, id: form_id, data: { turbo_frame: "example-frame" } do %>
  <%= lookbook_fields(params.slice(:simulate_slow_response)) %>
  <%= render LooposUi::Inputs::Select.new(
    name: "user_id",
    options: [
      { value: 1, text: "user 1", icon: "user" },
      { value: 2, text: "user 2", icon: "user" },
      { value: 3, text: "user 3", icon: "user" },
    ],
    value: "1",
    open_actions: true,
    placeholder: "Selecione um user",
    mode: :autosubmit,
    form: form_id
  ) %>
<% end %>
<div class="mt-6">
  Only this frame will be updated:
  <%= turbo_frame_tag "example-frame" do %>
    <div>
      Selected user: <%= params[:user_id] %>
    </div>
    <div>
      <%= Time.current %>
    </div>
  <% end %>
</div>

No notes provided.

Param Description Input

Simulate slow response, 2 seconds delay

Inputs::Select

Description

Inputs::Select component is used to render select input fields.

Arguments

Most input components have the following base arguments:

Base Arguments

Property Default Description
name nil Name of the input field.
placeholder nil Placeholder text.
error nil Error message. If model is present, the errors will be extracted for the current attribute
help nil Help message.
value nil Pre-selected option. Must have the same value as an exisiting option.
open_actions false Open field in edit mode by default.

Select Specific arguments

Property Default Description
options nil Options for the select field.
mode :inline Mode of the select field. Can be :inline, :autosubmit or :form.
form nil Form id to be submitted when the mode is :autosubmit. Will try to use find closest parent if omitted.

Options schema

Property Description
value Value of the option.
text Label of the option.
icon Icon of the option. Can use the shorthand version fa-regular fa-* will be prepended if missing.

Modes

There are two modes for the select component:

  • :inline - The select field will be rendered as a normal select field, and on change, the actions cancel/save will appear.
  • :autosubmit - The select field will be rendered as a normal select field, and on change, the form will be submitted. The actions cancel/save will not appear.
  • :form - The select field will be rendered as a normal select field. Will only be submitted when the form is submitted. The developer is responsible for creating a submittable form.

Both these modes still require the developer to build the form.

Slots

No slots available for this component.

⚠️ Important

It's the responsibility of the developer to handle the generation of the form, and handling any turbo frame updates or form submissions. The recommendation is to use the form_with helper from Rails, along with a turbo_frame_tag, so only the inline component is updated.