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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<turbo-frame class="lui-v2-card lui-v2-card--full" id="card-15954ff21">
  <div class="lui-card_v2-top">
    <div class="lui-title_description lui-title_description--small">
      <span class="lui-title_description__title">
        Paid Items
        <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">
              Total and value of items paid to the seller
            </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>
      </span>
    </div>
    <div class="lui-card_v2-corner">
      <form id="some_form_id" class="flex gap-2" action="#" accept-charset="UTF-8" method="get">
        <div id="looposui-inputs-select_user_id_9912568611" data-controller="input-select" data-input-select-input-outlet="#looposui-inputs-select_user_id_9912568611 .lui-inner-input" data-input-select-mode-value="form">
          <div class="lui-input-select lui-input-select--form relative">
            <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="form"
    data-input-form-value="">
              <div class="w-full flex flex-col">
                <span class="lui-input ">
                  <input name="user_id" type="text" 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="opacity-0 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 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 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" data-input-select-target="hiddenInput" autocomplete="off" />
        </div>
      </form>
    </div>
  </div>
  <div class="z-10 w-full">
    <div class="w-full w-full lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
      SLOT
    </div>
  </div>
</turbo-frame>

V2::Card

The V2::Card component is a flexible container used to display related information in a concise, visually grouped layout. This component has 7 subtypes:

  • V2::Card::Draft: Basic card with draft styles
  • V2::Card::AppInstance: App instance cards
  • V2::Card::FinancialLog: Financial Data
  • V2::Card::Script: Checking and running scripts
  • V2::Card::Favorites: Favorites card
  • V2::Card::Dashboard: Dashboards currently only existing in Core's main page

-

Usage rules

  • ✅ Do
    • Use for visually grouping related content
    • Maintain a consistent card layout across similar content
    • Prioritize using card variants if applicable
  • ❌ Don't
    • Don’t overload the card with too much information
    • Don’t use inconsistent styles or sizes within a card group
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
<% dashboard_info = OpenStruct.new(
  title: "Paid Items",
  description: "",
  tooltip: "Total and value of items paid to the seller") %>
<%= render LooposUi::V2::Card::Dashboard.new(dashboard_info: dashboard_info) do |dashboard_card| %>
  <% dashboard_card.with_select_form do %>
    <%= form_with url: "#", method: :get, class: "flex gap-2", id: "some_form_id" do %>
      <%= 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: false,
      ) %>
    <% end %>
  <% end %>
  <%= render LooposUi::DummySlot.new %>
<% end %>

No notes provided.

No params configured.

V2 Card Components

The V2 Card system provides a flexible, modular approach to displaying information in card layouts. It consists of a base V2::Card component and several specialized card types for different use cases.

Base V2::Card Component

The foundation component that all specialized cards are built upon.

Arguments

Property Default Type Required Description
title nil String Title of the card (uses LooposUi::TitleDescription)
description nil String Description of the card (uses LooposUi::TitleDescription)
logo nil String Image URL to display
draft false Boolean Applies draft styling to the card
full false Boolean Makes the card take full width
id nil String Unique identifier for lazy loading
src nil String URL for lazy loading content

Slots

Slot Description
title_description Custom title and description component (overrides title/description props)
custom_description Custom description content (not just plain string)
footer Content displayed at the bottom of the card
corner Content displayed at the top right corner
logo_img Custom logo component (not just image URL)

V2::Card::Script

Displays script information with execution details and download capabilities.

Arguments

Property Default Type Required Description
script - Object ✓ Script object with properties: name, last_run_result_file, last_run_result_file_name, last_run_date, last_run_result_level
href - String ✓ URL for the script action button
scheduled false Boolean Indicates if the script is scheduled

Slots

Slot Description
modal Modal content for script actions (auto-includes trigger button)

Script Object Structure

The script object should respond to:

  • name - Script name
  • last_run_result_file - URL to download result file
  • last_run_result_file_name - Display name for result file
  • last_run_date - Date of last execution
  • last_run_result_level - Result level/status

V2::Card::FinancialLog

Displays financial transaction information with amounts, status, and timestamps.

Arguments

Property Default Type Required Description
header_info - Object ✓ Object with title and description properties
item_value - Object ✓ Object with amount, status, and updated_at properties
fti false Boolean Adds an FTI Entity Token after the state label

Slots

Slot Description
modal Modal content for Financial Log (auto-includes trigger button)
title_info Open slot, whatever you put in here will appear after the title. Usefull for Entity Tokens

You can pass trigger_args to the with_modal call to pass additional arguments to the trigger button, which will initialize the Button component.

<%= render LooposUi::V2::Card::FinancialLog.new(...) do |fl| %>
  <% fl.with_modal(trigger_args: { disabled: true }) do |modal| %>
    ...Modal content...
  <% end %>
<% end %>

Object Structures

header_info should respond to:

  • title - Transaction title
  • description - Transaction description

item_value should respond to:

  • amount - Money object with amount
  • status - Status string (agreed, waiting_agreement, draft, etc.)
  • updated_at - Timestamp

Status Colors

The component automatically applies color coding based on status:

  • agreed → Success (green)
  • waiting_agreement, draft → Warning (yellow)
  • Other statuses → Neutral (gray)

V2::Card::Dashboard

Full-width cards for dashboard displays with optional form controls.

Arguments

Property Default Type Required Description
dashboard_info - Object ✓ Object with title, description, and tooltip properties

Slots

Slot Description
select_form Form component for the corner slot (typically contains a Select component)

Dashboard Object Structure

The dashboard_info object should respond to:

  • title - Dashboard title
  • description - Dashboard description
  • tooltip - Tooltip text

V2::Card::Draft

Cards with draft styling for preview or incomplete content.

Arguments

Property Default Type Required Description
draft_info - Object ✓ Object with title and description properties

Slots

Slot Description
corner Content for the top right corner

Draft Object Structure

The draft_info object should respond to:

  • title - Draft title
  • description - Draft description

V2::Card::AppInstance

Displays application instance information with status indicators and action buttons.

Arguments

Property Default Type Required Description
app_instance - Object ✓ App instance object with various properties
open_href - String ✓ URL for the "Open" button
details_href - String ✓ URL for the "Details" button

App Instance Object Structure

The app_instance object should respond to:

  • name - Instance name (used as title)
  • partner - Partner information
  • app - App type/name
  • status - Instance status
  • app_release - Release version
  • id - Instance ID

Status Indicators

The component automatically applies status colors and icons:

  • Creating/Updating/Deleting/Stopped → Notice (yellow) with exclamation icon
  • Created/To Create/Running → Success (green) with check icon
  • Error states → Danger (red) with X icon
  • Other → Informative (gray) with circle icon

V2::Card::Favorites

Collapsible favorites section with expand/collapse functionality.

Arguments

None required.

Slots

Slot Description
content Content to display in the collapsible section

Lazy Loading

All V2 card components support lazy loading through the LazyLoading module. This adds id and src options to the component. Providing src makes the card lazy loadable, appending the id and src to the turbo-frame wrapping the card.

To create a lazy loading card, you can still use all the slots and arguments, and you may populate them with

Skeleton and Skeleton::Bar

Lazy Loading Arguments

Property Default Type Required Description
id nil String ✓ Unique identifier for the card
src nil String ✓ URL to load content from