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
<div class="lui-float_bar" data-controller="float-bar" data-turbo-prefetch="false">
  <span class="lui-float_bar__count">
    <span data-float-bar-target='counter'>0</span>
    <span>
      selected
    </span>
  </span>
  <span>
    <div class="lui-action_buttons">
      <div class="lui-action_buttons__button-group">
        <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink" data-action="click->float-bar#selectAll">
          <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
            Select All
          </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: 12px;">
              progress_activity
            </i>
          </div>
        </button>
      </div>
      <div class="lui-action_buttons__button-group">
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--size-tiny lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
            <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">
                Run
              </div>
            </div>
            <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-play" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Run
            </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: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </span>
        <span data-float-bar-target="action">
          <a class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink" href="#">
            <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">
                Export
              </div>
            </div>
            <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-file-arrow-down" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Export
            </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: 12px;">
                progress_activity
              </i>
            </div>
          </a>
        </span>
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
            <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-clone" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Duplicate
            </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: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </span>
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
            <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-play-pause" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Activate/Pause
            </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: 12px;">
                progress_activity
              </i>
            </div>
          </button>
        </span>
        <span data-float-bar-target="action">
          <a class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink" href="#">
            <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-trash" data-lui--button-target="leadingIcon"></i></div>
            </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
              Delete
            </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: 12px;">
                progress_activity
              </i>
            </div>
          </a>
        </span>
        <span data-float-bar-target="action">
          <div class="inline-flex lui-modal-wrapper" data-controller="modal" data-modal-open-value="false" data-modal-single-use-value="false">
            <div class="lui-modal__trigger" data-action="click->modal#open">
              <button class="lui-button lui-button--neutral--tertiary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
                <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-play-pause" data-lui--button-target="leadingIcon"></i></div>
                </div>
  <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                  Open Modal
                </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: 12px;">
                    progress_activity
                  </i>
                </div>
              </button>
            </div>
            <dialog id="" data-modal-target="modal" style="max-width:480px;" class="lui-modal rounded-md p-0 ">
              <div class="lui-modal__wrapper">
                <div class="lui-modal__header">
                  <div class="lui-header lui-header--page">
                    <div class="lui-header__title_container">
                      <span class="lui-header__title_container__title">
                        Open Modal
                      </span>
                    </div>
    <span class="lui-header__description">
                      Modal description
                    </span>
                  </div>
                  <div class="-mt-1" >
                    <button data-action="click->modal#close" class="cursor-pointer -mr-1 p-1">
                      <div class="lui-icon h-[10px] w-[10px]">
                        <i class="fa-regular fa-xmark lui-icon__icon" style="font-size: 10px; color: black;"></i>
                      </div>
                    </button>
                  </div>
                </div>
                <div class="lui-modal__content">
                  Some content
                </div>
                <div class="lui-modal__footer">
                  <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit relative" data-controller="lui--button" data-action="click->modal#close">
                    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                      Cancel
                    </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: 14px;">
                        progress_activity
                      </i>
                    </div>
                  </button>
                  <button class="lui-button lui-button--size-small lui-button--neutral--tertiary w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
                    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                      Secondary Action
                    </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: 14px;">
                        progress_activity
                      </i>
                    </div>
                  </button>
                  <button class="lui-button lui-button--size-small lui-button--neutral--secondary w-fit w-fit relative" data-controller="lui--button" data-float-bar-target="actionLink">
                    <span class="lui-button__text opacity-100 inline-flex" data-lui--button-target="text">
                      Primary Action
                    </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: 14px;">
                        progress_activity
                      </i>
                    </div>
                  </button>
                </div>
              </div>
            </dialog>
          </div>
        </span>
      </div>
    </div>
  </span>
</div>

No Usage documentation to display.

1
2
3
4
5
6
7
8
9
10
11
12
13
<%= render LooposUi::FloatBar.new(count: params[:count] || 0) do |fb| %>
  <% fb.with_action_run(text: "Run", kind: :app, type: :secondary) %>
  <% fb.with_action_export(href: "#") %>
  <% fb.with_action(text: "Duplicate", icon: "clone") %>
  <% fb.with_action(text: "Activate/Pause", icon: "play-pause") %>
  <% fb.with_action_delete(href: "#", text: "Delete") %>
  <% fb.with_modal_action(title: "Open Modal", description: "Modal description") do |modal| %>
    <% modal.with_trigger_button(text: "Open Modal", icon: "play-pause") %>
    <% modal.with_primary_action(text: "Primary Action") %>
    <% modal.with_secondary_action(text: "Secondary Action") %>
    Some content
  <% end %>
<% end %>

No notes provided.

Param Description Input

—

Description

The FloatBar component is designed to be used in the Table component. It's purpose is to display the actions that can be performed on the selected rows of the table.

Arguments

Property Default Description
count 0 Sets the initial count value.

Slots

The floating bar is composed of actions that are passed as slots*. All actions follow the same structure as the Button component. To use the slot, you can pass the actions:

  • with_action(...) - to add single button action. All arguments are the same as the Button component.
  • with_action_{preset}: to add a button preset action. Eg: with_action_delete(href: "...") will add a delete button action.
  • with_action_manual: to add a manual button action. This is useful when you need to add a custom action that is not covered by the presets or cannot be constructed with the with_action method. Eg: Modal actions, that are not yet implemented in the LoopOS UI.
  • with_modal_action(**kwargs) Create a modal action. Shorter than using action manual + rendering the modal. Eg: ```erb <%= render LooposUi::FloatBar.new(count: params[:count] || 0) do |fb| %> <%# ...other actions... %> <% fb.withmodalaction(title: "Open Modal", description: "Modal description") do |modal| %> <% modal.withtriggerbutton(text: "Open Modal", icon: "play-pause") %> <% modal.withprimaryaction(text: "Primary Action") %> <% modal.withsecondaryaction(text: "Secondary Action") %> Some content <% end %> <% end %>

The trigger will already have default styles for the floatbar.

Actions, having the same structure as the `Button` component, follow the same rules whe in a list: actions with kind: :app must never follow actions with kind: :neutral. This is checked at runtime, and will throw an error if violated. Manual slots are ignored in this check.
\* _Technically, there are no *actions* slots. It's just an alias for the *buttons* slot, but with different default parameters.
You should **not** use the buttons slots directly, even though it's publicly available. Always use the *actions* slot instead.
## Actions
Actions are the buttons that are displayed in the floating bar, than can be clicked to perform an action on the selected rows of the table.
This can be anything from deleting the selected rows, to exporting them to a CSV file.
This is usually a request to the server, be it `GET`, `POST` or any other method.
The floating bar will inject the `id[]` parameter with the selected rows' ids - this means that when building the action, you should not include the `id[]` parameter in the URL or form data.
The `FloatBar` component will inject these ids (through it's stimulus controller) for any request, that:
1. is initiated by any url Action created with `with_action` or `with_action_{preset}`.
2. any form submission fired from an action slot.
3. any `<a>` tag that has the `data-float-bar-target` attribute set to `actionLink`.
Examples of these rules:
```erb
<%= table.with_action_bar do |ab| %>
  <%# Rule 1 %>
  <% ab.with_action_new(href: "#", kind: :neutra, type: :secondary) %>
  <%# Rule 2 %>
  <% ab.with_action_manual do %>
    <div data-controller="modal">
      <%= render LooposUi::Button.new(..., tag_options: { data: {'action': "click->modal#open" }} )%>
      <%= render LooposUi::ModalComponent.new(title: ... ) do |modal| %>
        <% modal.with_custom_content do %>
          <div class="w-fit">
            <%= render LooposUi::Button.new(
                    text: ...,
                    href: ...,
                    tag_options: { data: { "float-bar-target": "actionLink" }}
                )%>
          </div>
        <% end %>
      <% end %>
    </div>
  <% end %>
  <%# Rule 3 %>
  <% ab.with_action_manual do %>
    <div data-controller="modal" >
      <%= render LooposUi::Button.new(..., tag_options: { data: { action: "click->modal#open" } })%>
      <%= render LooposUi::ModalComponent.new(title: ...) do |modal| %>
        <% modal.with_custom_content do %>
          <%= form_tag update_app_instance_release_admin_app_management_app_instances_path do %>
            ...
            <%= render LooposUi::Button.new(...)%> <%# Submit button %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>
<% end %>

FAQ

Q: I have a custom action with a modal, how can I make the request have the selected ids? It doesn't send the id[] parameters.

You need to add the data-float-bar-target="actionLink" attribute to the <a> tag inside the action slot. Check the example above for more details.