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
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
<form id="some_form_id" data-turbo-frame="example-frame" action="#" accept-charset="UTF-8" method="get">
  <div id="looposui-inputs-select2_user_id_5793709857" data-controller="input-select2" data-input-select2-input-outlet="#looposui-inputs-select2_user_id_5793709857 .lui-inner-input" data-input-select2-mode-value="inline" data-input-select2-form-value="some_form_id" data-input-select2-multiple-value="false">
    <div class="lui-input-select lui-input-select--inline lui-select2--single--no-actions-menu relative">
      <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="user 3"
    data-input-mode-value="inline"
    data-input-form-value="some_form_id">
        <div class="w-full flex flex-col">
          <span class="lui-input ">
            <input name="_" type="text" value="user 3" placeholder="Selecione um user" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="select2:updateController->input-select#updateValues" 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-select2-target="clearButton"
            data-action="click->input-select2#clear">
                </i>
                <div data-input-select2-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 class="lui-input-select__wrapper" data-controller="select2" data-input-select2-target="menu" data-select2-parent-selects-children-value="true" data-select-target-id="looposui-inputs-select2_user_id_5793709857" data-select2-id="looposui-inputs-select2_user_id_5793709857">
        <div class="lui-input-select__options" role="listbox">
          <div data-controller="search"
  id="looposui-inputs-search_query_9912568611"
  class="lui-search"
  data-search-input-outlet="#looposui-inputs-search_query_9912568611 .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->select2#handleSearch" 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 class="lui-association-overlay__divider"></div>
          <div class="lui-association-overlay__results" data-select2-target="results">
            <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user group 1" data-value="user_group_1">
              <div class="lui-input-select__option-wrapper">
                <div class="lui-input-select__option-text">
                  <div></div>
                  <i class="fa-regular fa-user-group"></i><span role="text">user group 1</span>  <span class="lui-icon_tooltip">
                    <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="false"
  >
                      <div class="lui-tooltip__title">
                        User Group 1
                      </div>
                    </div>
                    <div class="lui-icon h-[12px] w-[12px]">
                      <i class="fa-regular fa-circle-info lui-icon__icon" style="font-size: 12px; color: black;"></i>
                    </div>
                  </span>
                </div>
                <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
            </div>
            <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_group_1"></div>
            <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user group 2" data-value="user_group_2">
              <div class="lui-input-select__option-wrapper">
                <div class="lui-input-select__option-text">
                  <div></div>
                  <i class="fa-regular fa-user-group"></i><span role="text">user group 2</span></div>
                <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
            </div>
            <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_group_2">
              <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user 3" data-value="user_3">
                <div class="lui-input-select__option-wrapper">
                  <div class="lui-input-select__option-text">
                    <div></div>
                    <i class="fa-regular fa-user"></i><span role="text">user 3</span></div>
                  <i class="fa-regular fa-check " data-input-select2-target="check"></i></div>
              </div>
              <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_3"></div>
              <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user 4" data-value="user_4">
                <div class="lui-input-select__option-wrapper">
                  <div class="lui-input-select__option-text">
                    <div></div>
                    <i class="fa-regular fa-user"></i><span role="text">user 4</span></div>
                  <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
              </div>
              <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_4">
                <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user 10" data-value="user_10">
                  <div class="lui-input-select__option-wrapper">
                    <div class="lui-input-select__option-text">
                      <div></div>
                      <i class="fa-regular fa-user"></i><span role="text">user 10</span></div>
                    <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
                </div>
                <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_10"></div>
              </div>
            </div>
            <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user group 3" data-value="user_group_3">
              <div class="lui-input-select__option-wrapper">
                <div class="lui-input-select__option-text">
                  <div></div>
                  <i class="fa-regular fa-user-group"></i><span role="text">user group 3</span></div>
                <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
            </div>
            <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_group_3">
              <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user 5" data-value="user_5">
                <div class="lui-input-select__option-wrapper">
                  <div class="lui-input-select__option-text">
                    <div></div>
                    <i class="fa-regular fa-user"></i><span role="text">user 5</span></div>
                  <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
              </div>
              <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_5"></div>
              <div class="lui-input-select__option" role="option" data-input-select2-target="option" data-select2-target="option" data-action="click->input-select2#select " data-text="user 6" data-value="user_6">
                <div class="lui-input-select__option-wrapper">
                  <div class="lui-input-select__option-text">
                    <div></div>
                    <i class="fa-regular fa-user"></i><span role="text">user 6</span></div>
                  <i class="fa-regular fa-check hidden!" data-input-select2-target="check"></i></div>
              </div>
              <div class="lui-input-select__option-children" style="padding-left: 20px" data-select2-parent="user_6"></div>
            </div>
            <div class="hidden lui-association-overlay__empty-search" data-select2-target="emptySearch">
              Nenhum resultado encontrado
            </div>
          </div>
        </div>
      </div>
  </div>
    <div data-input-select2-target="hiddenInputWrapper">
      <input type="hidden" name="user_id" id="user_id" value="user 3" data-input-select2-target="hiddenInput" autocomplete="off" />
    </div>
  </div>
</form>
<div class="mt-6">
  Only this frame will be updated:
  <turbo-frame id="example-frame">
    <div>
      Selected Filters: 
    </div>
    <div>
      2025-12-06 11:31:00 UTC
    </div>
  </turbo-frame></div>

Inputs::Select2

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
34
35
36
37
38
39
40
41
42
43
44
45
<%
  if params.key?(:user_id) && params[:simulate_slow_response].present?
    sleep 2
  end
  selected_options = params[:multiple] ? [:user_3, :user_group_3] : :user_3
%>
<% 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::Select2.new(
    name: "user_id",
    option_indent_size: 20,
    parent_selects_children: true,
    multiple: params[:multiple] || false,
    show_actions_in_menu: params[:multiple] || false,
    options: [
      { value: :user_group_1, text: "user group 1", icon: "user-group", tooltip: "User Group 1" },
      { value: :user_group_2, text: "user group 2", icon: "user-group", child_options: [
        { value: :user_3, text: "user 3", icon: "user" },
        { value: :user_4, text: "user 4", icon: "user", child_options: [
          { value: :user_10, text: "user 10", icon: "user" },
        ] },
      ] },
      { value: :user_group_3, text: "user group 3", icon: "user-group", child_options: [
        { value: :user_5, text: "user 5", icon: "user" },
        { value: :user_6, text: "user 6", icon: :user },
      ] },
    ],
    value: selected_options,
    placeholder: "Selecione um user",
    form: form_id
  ) %>
<% end %>
<div class="mt-6">
    Only this frame will be updated:
    <%= turbo_frame_tag "example-frame" do %>
        <div>
            Selected Filters: <%= params[:user_id] %>
        </div>
        <div>
            <%= Time.current %>
        </div>
<% end %>
</div>

No notes provided.

Param Description Input

Allow selecting multiple options

Description

The Inputs::Select2 component is an enhanced select input that supports searching, multi-selection, nested options, icons, tooltips, and custom actions. It is designed for selecting one or more options from a potentially large or hierarchical dataset, with a user-friendly interface and keyboard accessibility.

Arguments

Property Default Description
name :value The name attribute for the input.
options [] Array of option objects. Each option can have value, text, icon, tooltip, child_options.
multiple false Allows selecting multiple options if true.
placeholder nil Placeholder text shown when no option is selected.
option_indent_size 20 Indentation (in px) for nested child options.
parent_selects_children true If true, selecting a parent option selects all its children.
show_actions_in_menu false If true (and multiple), shows Reset and Apply buttons in the dropdown menu.
portal_target nil DOM selector for rendering the dropdown in a portal (for overlays, modals, etc).
value nil The currently selected value(s).
form nil The form id or object for integration with Rails forms.
open_actions false Open field in edit mode by default.

Option Object Schema

Property Default Description
value - The value for the option (string or symbol).
text - The display text for the option.
icon "" Optional icon class for the option.
tooltip "" Optional tooltip text for the option.
child_options [] Array of nested option objects (for hierarchical selects).
attributes {} Additional HTML attributes for the option element.

Slots

This component does not use named slots, but you can customize the options array to render complex option trees, icons, and tooltips.

Usage Example

<%= render LooposUi::Inputs::Select2.new(
  name: "user_id",
  options: [
    { value: :admin, text: "Admin", icon: "fa-user-shield" },
    { value: :user, text: "User", icon: "fa-user" },
    { value: :guest, text: "Guest", icon: "fa-user-secret", tooltip: "Limited access" },
    { value: :group, text: "Group", icon: "fa-users", child_options: [
      { value: :group_member, text: "Group Member", icon: "fa-user-friends" }
    ] }
  ],
  multiple: true,
  placeholder: "Select user type",
  show_actions_in_menu: true
) %>

⚠️ 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.