LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<form id="some_form_id" class="flex gap-2" action="#" accept-charset="UTF-8" method="get">
  <div id="looposui-inputs-select_user_id_5793709857" class="grow" data-controller="input-select" data-input-select-input-outlet="#looposui-inputs-select_user_id_5793709857 .lui-inner-input" data-input-select-mode-value="form">
    <div class="lui-input-select lui-input-select--form relative lui-inputs__select">
      <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="user 1"
    data-input-mode-value="form"
    data-input-form-value="">
        <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="form" 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--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
            <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
              <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i></div>
            </div>
            
            <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: 12px;">
                progress_activity
              </i>
            </div>
          </button>
          <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
            <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
              <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i></div>
            </div>
            
            <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: 12px;">
                progress_activity
              </i>
            </div>
          </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 class="lui-input-select__option "
                role="option"
                data-input-select-target="option"
                data-text="user 4"
                data-value="4">
            <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 4</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 5"
                data-value="5">
            <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 5</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 6"
                data-value="6">
            <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 6</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 7"
                data-value="7">
            <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 7</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 8"
                data-value="8">
            <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 8</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 9"
                data-value="9">
            <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 9</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 10"
                data-value="10">
            <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 10</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="1" data-input-select-target="hiddenInput" />
  </div>
  <button class="lui-button lui-button--neutral--primary lui-button--size-default w-fit w-fit relative" data-controller="lui--button">
    <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>

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_with url: "#", method: :get, class: "flex gap-2", id: "some_form_id" do %>
  <%= lookbook_fields(params.slice(:simulate_slow_response)) %>
  <%= render LooposUi::Inputs::Select.new(
    mode: :form,
    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: 4, text: "user 4", icon: "user" },
      { value: 5, text: "user 5", icon: "user" },
      { value: 6, text: "user 6", icon: "user" },
      { value: 7, text: "user 7", icon: "user" },
      { value: 8, text: "user 8", icon: "user" },
      { value: 9, text: "user 9", icon: "user" },
      { value: 10, text: "user 10", icon: "user" }
    ],
    value: 1,
    placeholder: "Selecione um user",
    readonly: params[:readonly] || false,
  ) %>
  <%= render LooposUi::Button.new(
    text: "Submit",
    kind: :neutral,
  )%>
<% end %>

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.