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
<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-small w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink" data-action="click->float-bar#selectAll">
          <span class="lui-button__text" data-lui--button-target="text">
            Select All
          </span>
        </button>
      </div>
      <div class="lui-action_buttons__button-group">
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" 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>
            <i class="lui-button__icon lui-button__icon--small fa-regular fa-play" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Run
            </span>
          </button>
        </span>
        <span data-float-bar-target="action">
          <a class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" 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>
            <i class="lui-button__icon lui-button__icon--small fa-regular fa-file-arrow-down" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Export
            </span>
          </a>
        </span>
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink">
            <i class="lui-button__icon lui-button__icon--small fa-regular fa-clone" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Duplicate
            </span>
          </button>
        </span>
        <span data-float-bar-target="action">
          <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink">
            <i class="lui-button__icon lui-button__icon--small fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Activate/Pause
            </span>
          </button>
        </span>
        <span data-float-bar-target="action">
          <a class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink" href="#">
            <i class="lui-button__icon lui-button__icon--small fa-regular fa-trash" data-lui--button-target="leadingIcon"></i>
            <span class="lui-button__text" data-lui--button-target="text">
              Delete
            </span>
          </a>
        </span>
        <span data-float-bar-target="action">
          <div data-controller="modal" class="inline-flex">
            <div class="lui-modal__trigger" data-action="click->modal#open">
              <button class="lui-button lui-button--neutral--tertiary lui-button--size-small w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink">
                <i class="lui-button__icon lui-button__icon--small fa-regular fa-play-pause" data-lui--button-target="leadingIcon"></i>
                <span class="lui-button__text" data-lui--button-target="text">
                  Open Modal
                </span>
              </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-title_description lui-title_description--normal">
                    <span class="lui-title_description__title">
                      Open Modal
                    </span>
                    <span class="lui-title_description__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" data-controller="lui--button" data-action="click->modal#close">
                    <span class="lui-button__text" data-lui--button-target="text">
                      Cancel
                    </span>
                  </button>
                  <button class="lui-button lui-button--size-small lui-button--core--tertiary w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink">
                    <span class="lui-button__text" data-lui--button-target="text">
                      Secondary Action
                    </span>
                  </button>
                  <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button" data-float-bar-target="actionLink">
                    <span class="lui-button__text" data-lui--button-target="text">
                      Primary Action
                    </span>
                  </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.