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
<turbo-frame class="lui-v2-card" id="card-15954ff21">
  <div class="lui-card_v2-top">
    <div class="lui-title_description lui-title_description--small">
      <span class="lui-title_description__title">
        App instance name
      </span>
      <span class="lui-title_description__description">
        <span class="lui-label" style="color: #212529; background-color: #ffffff; border: 1px solid var(--General-Gray-200, #ECEFF2);">
          <svg height="12" width="12" viewBox="0 0 12 12">
            <path d="M5.94853 12.0007C5.35232 12.0007 4.69999 11.7762 4.07192 11.1481C3.76092 10.8371 3.53185 10.5018 3.39076 10.1484C3.04487 10.0118 2.72629 9.80398 2.46232 9.54002L0.852712 7.93041C0.185204 7.2629 -0.674971 5.59565 0.852712 4.06797C1.16371 3.75697 1.49898 3.52789 1.85246 3.3868C1.98899 3.04091 2.19683 2.72233 2.4608 2.45836L4.0704 0.848758C4.09013 0.829036 4.55738 0.367849 5.25371 0.135738C5.92577 -0.0887876 6.93614 -0.146436 7.93133 0.848758C8.24233 1.15976 8.47141 1.49503 8.61249 1.8485C8.95838 1.98504 9.27697 2.19288 9.54094 2.45685L11.1505 4.06645C11.1703 4.08617 11.6315 4.55343 11.8636 5.24976C12.0881 5.92182 12.1457 6.93218 11.1505 7.92738C10.8395 8.23837 10.5043 8.46745 10.1508 8.60854C10.0143 8.95443 9.80642 9.27149 9.54245 9.53698L7.93285 11.1466C7.53993 11.5395 6.80112 11.9992 5.94701 11.9992L5.94853 12.0007ZM4.17812 9.63407L4.18722 9.66593C4.27066 9.95417 4.44815 10.2363 4.71667 10.5049C5.95611 11.7443 7.15915 10.6338 7.29265 10.5049L8.90074 8.89678C8.9417 8.85582 8.98114 8.81182 9.01907 8.76783C8.03298 8.6586 7.33057 7.96985 7.29265 7.93193L6.00466 6.64394L4.71667 7.93193C4.71667 7.93193 4.13412 8.53268 4.13412 9.2806C4.13412 9.39589 4.14777 9.51423 4.17963 9.63407H4.17812ZM2.37129 4.17264L2.3364 4.18175C2.04816 4.26518 1.76598 4.44268 1.49746 4.7112C0.258023 5.95064 1.36851 7.15367 1.49746 7.28718L3.10555 8.89526C3.14651 8.93622 3.19051 8.97567 3.2345 9.01359C3.34373 8.02599 4.03399 7.32359 4.0704 7.28718L5.35839 5.99919L4.0704 4.7112C4.0704 4.7112 3.27546 3.93902 2.36978 4.17264H2.37129ZM7.93285 7.28566C7.9465 7.29931 8.60491 7.93344 9.41047 7.86366C9.48481 7.85759 9.55914 7.84394 9.63651 7.82422L9.66989 7.81511C9.95813 7.73168 10.2403 7.55418 10.5088 7.28566C11.7483 6.04622 10.6378 4.84319 10.5088 4.70968L8.90074 3.1016C8.85977 3.06064 8.81578 3.02119 8.77178 2.98478C8.66256 3.97239 7.97229 4.67479 7.93437 4.7112L6.64789 5.99767L7.93437 7.28414L7.93285 7.28566ZM2.98874 3.23206C3.97635 3.34129 4.67875 4.03004 4.71516 4.06797L6.00314 5.35595L7.29113 4.06797C7.29113 4.06797 7.87368 3.46721 7.87368 2.7193C7.87368 2.604 7.86003 2.48567 7.82817 2.36582L7.81907 2.33396C7.73563 2.04572 7.55813 1.76355 7.28961 1.49503C6.05017 0.255586 4.84714 1.36608 4.71364 1.49503L3.10555 3.10311C3.06459 3.14407 3.02515 3.18807 2.98722 3.23206H2.98874Z" fill="url(#paint0_linear_238_1315)"/>
            <defs>
              <linearGradient id="paint0_linear_238_1315" x1="6.00163" y1="12.0007" x2="6.00163" y2="0.00071859" gradientUnits="userSpaceOnUse">
                <stop stop-color="#F27335"/>
                <stop offset="1" stop-color="#FCAA30"/>
              </linearGradient>
            </defs>
          </svg>
          <span class="lui-label__text">Partner (logo partner)</span>
        </span>
      </span></div>
    <div class="lui-card_v2-corner">
      <span class="lui-label" style="color: #b53c00; background-color: #fbf5f2;">
        <i class="fa-regular fa-smile lui-label__icon"></i>
        <span class="lui-label__text">state</span>
      </span>
    </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>
  <div class="z-10 w-full">
    <div class="flex gap-[6px]">
      <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button">
        <span class="lui-button__text" data-lui--button-target="text">
          Details
        </span>
        <i class="lui-button__icon lui-button__icon--small fa-regular fa-arrow-up-right-from-square"></i>
      </button>
      <button class="lui-button lui-button--size-small lui-button--core--secondary w-fit w-fit" data-controller="lui--button">
        <span class="lui-button__text" data-lui--button-target="text">
          Open
        </span>
        <i class="lui-button__icon lui-button__icon--small fa-regular fa-arrow-up-right-from-square"></i>
      </button>
    </div>
  </div>
  <div class="lui-card_v2-img">
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
      <path d="M59.3384 119.994C53.7018 119.994 47.1628 117.982 40.683 111.502C37.5762 108.396 35.2832 105.037 33.8777 101.502C30.4159 100.141 27.2352 98.0546 24.587 95.4064L8.49104 79.3104C8.29871 79.1181 3.68295 74.4432 1.36028 67.4751C-0.873633 60.7586 -1.4654 50.6394 8.49104 40.683C11.5978 37.5762 14.9561 35.2832 18.4919 33.8777C19.8529 30.4159 21.9389 27.2352 24.587 24.587L40.683 8.49104C40.8753 8.29871 45.5503 3.68295 52.5183 1.36028C59.2496 -0.873633 69.354 -1.4654 79.3104 8.49104C82.4172 11.5978 84.7103 14.9561 86.1157 18.4919C89.5775 19.8529 92.7583 21.9389 95.4064 24.587L111.502 40.683C111.695 40.8753 116.31 45.5503 118.633 52.5183C120.882 59.2348 121.459 69.354 111.502 79.3104C108.396 82.4172 105.037 84.7103 101.502 86.1157C100.141 89.5775 98.0546 92.7583 95.4064 95.4064L79.3104 111.502C79.1181 111.695 74.4432 116.31 67.4751 118.633C65.1229 119.417 62.3712 119.994 59.3532 119.994H59.3384ZM41.7482 96.3532L41.837 96.6639C42.6654 99.5488 44.4407 102.374 47.1184 105.052C52.5479 110.482 58.2584 112.094 64.5903 109.993C69.4723 108.366 72.8306 105.097 72.875 105.052L88.971 88.9562C89.3852 88.5419 89.7847 88.1129 90.1397 87.6691C80.2572 86.5743 73.2448 79.6803 72.8602 79.2956L59.9893 66.4248L47.1184 79.2956C47.1184 79.2956 41.2896 85.302 41.2896 92.7878C41.2896 93.9418 41.4227 95.1253 41.7334 96.3384L41.7482 96.3532ZM23.655 41.7334L23.3147 41.8369C20.4299 42.6654 17.6042 44.4407 14.9265 47.1332C2.52901 59.5307 13.6394 71.5583 14.9265 72.9046L31.0077 88.9858C31.4219 89.4 31.8509 89.7994 32.3095 90.1693C33.4043 80.3016 40.2984 73.2744 40.6682 72.9046L53.5539 60.0189L40.683 47.148C40.609 47.0741 32.7238 39.4255 23.655 41.763V41.7334ZM79.3104 72.8602C79.3104 72.8602 86.0122 79.3548 94.0749 78.6447H94.0897C94.8442 78.5707 95.6135 78.4524 96.3976 78.2452L96.6787 78.1565C99.5636 77.328 102.389 75.5527 105.067 72.8602C117.464 60.4627 106.354 48.4203 105.067 47.0889L88.9858 31.0077C88.5715 30.5934 88.1425 30.194 87.6839 29.8241C86.5891 39.6918 79.6951 46.719 79.3252 47.0889L66.4396 59.9745L79.3104 72.8454V72.8602ZM29.8537 32.3243C39.7362 33.4191 46.7486 40.3279 47.1332 40.6978L60.0041 53.5687L72.875 40.6978C72.875 40.6978 78.7039 34.6914 78.7039 27.2056C78.7039 26.0516 78.5707 24.8533 78.2452 23.6402L78.1565 23.3443C77.328 20.4595 75.5527 17.6338 72.875 14.9561C67.4455 9.52662 61.735 7.91407 55.4032 10.0148C50.5211 11.6422 47.1628 14.9117 47.1184 14.9561L31.0225 31.052C30.6082 31.4663 30.2088 31.8953 29.8537 32.3391V32.3243Z" fill="url(#paint0_linear_827_29852)"/>
      <defs>
        <linearGradient id="paint0_linear_827_29852" x1="60.0041" y1="119.994" x2="60.0041" y2="-0.000779596" gradientUnits="userSpaceOnUse">
          <stop stop-color="#F27335"/>
          <stop offset="1" stop-color="#FCAA30"/>
        </linearGradient>
      </defs>
    </svg>
  </div>
</turbo-frame>
<turbo-frame class="lui-v2-card" id="card-24ed5cb23">
  <div class="lui-card_v2-top">
    <div class="lui-title_description lui-title_description--small">
      <span class="lui-title_description__title">
        Embalagem Pequena/Média
      </span>
      <span class="lui-title_description__description">
        Peso inferior a 30Kg, dimensões inferiores a 1,5m.
      </span></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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<%= render LooposUi::V2::Card.new(
  title: "App instance name",
  **preview_params
) do |card| %>
  <% card.with_corner do %>
    <%= render LooposUi::CounterLabel.new(text: "state", icon: "fa-regular fa-smile") %>
  <% end %>
  <% card.with_custom_description do %>
    <%= render LooposUi::StateLabel.new(
        text: "Partner (logo partner)",
        color: :white,
        icon: "core",
        light: true) %>
  <% end %>
  <%= render LooposUi::DummySlot.new %>
  <% card.with_footer do %>
    <div class="flex gap-[6px]">
      <%= render LooposUi::Button.new(
            text: "Details",
            size: :small,
            type: :secondary,
            trailing_icon: "fa-regular fa-arrow-up-right-from-square"
            ) %>
      <%= render LooposUi::Button.new(
            text: "Open",
            size: :small,
            type: :secondary,
            trailing_icon: "fa-regular fa-arrow-up-right-from-square"
            ) %>
    </div>
  <% end %>
  <% card.with_logo_img do %>
    <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120" fill="none">
      <path d="M59.3384 119.994C53.7018 119.994 47.1628 117.982 40.683 111.502C37.5762 108.396 35.2832 105.037 33.8777 101.502C30.4159 100.141 27.2352 98.0546 24.587 95.4064L8.49104 79.3104C8.29871 79.1181 3.68295 74.4432 1.36028 67.4751C-0.873633 60.7586 -1.4654 50.6394 8.49104 40.683C11.5978 37.5762 14.9561 35.2832 18.4919 33.8777C19.8529 30.4159 21.9389 27.2352 24.587 24.587L40.683 8.49104C40.8753 8.29871 45.5503 3.68295 52.5183 1.36028C59.2496 -0.873633 69.354 -1.4654 79.3104 8.49104C82.4172 11.5978 84.7103 14.9561 86.1157 18.4919C89.5775 19.8529 92.7583 21.9389 95.4064 24.587L111.502 40.683C111.695 40.8753 116.31 45.5503 118.633 52.5183C120.882 59.2348 121.459 69.354 111.502 79.3104C108.396 82.4172 105.037 84.7103 101.502 86.1157C100.141 89.5775 98.0546 92.7583 95.4064 95.4064L79.3104 111.502C79.1181 111.695 74.4432 116.31 67.4751 118.633C65.1229 119.417 62.3712 119.994 59.3532 119.994H59.3384ZM41.7482 96.3532L41.837 96.6639C42.6654 99.5488 44.4407 102.374 47.1184 105.052C52.5479 110.482 58.2584 112.094 64.5903 109.993C69.4723 108.366 72.8306 105.097 72.875 105.052L88.971 88.9562C89.3852 88.5419 89.7847 88.1129 90.1397 87.6691C80.2572 86.5743 73.2448 79.6803 72.8602 79.2956L59.9893 66.4248L47.1184 79.2956C47.1184 79.2956 41.2896 85.302 41.2896 92.7878C41.2896 93.9418 41.4227 95.1253 41.7334 96.3384L41.7482 96.3532ZM23.655 41.7334L23.3147 41.8369C20.4299 42.6654 17.6042 44.4407 14.9265 47.1332C2.52901 59.5307 13.6394 71.5583 14.9265 72.9046L31.0077 88.9858C31.4219 89.4 31.8509 89.7994 32.3095 90.1693C33.4043 80.3016 40.2984 73.2744 40.6682 72.9046L53.5539 60.0189L40.683 47.148C40.609 47.0741 32.7238 39.4255 23.655 41.763V41.7334ZM79.3104 72.8602C79.3104 72.8602 86.0122 79.3548 94.0749 78.6447H94.0897C94.8442 78.5707 95.6135 78.4524 96.3976 78.2452L96.6787 78.1565C99.5636 77.328 102.389 75.5527 105.067 72.8602C117.464 60.4627 106.354 48.4203 105.067 47.0889L88.9858 31.0077C88.5715 30.5934 88.1425 30.194 87.6839 29.8241C86.5891 39.6918 79.6951 46.719 79.3252 47.0889L66.4396 59.9745L79.3104 72.8454V72.8602ZM29.8537 32.3243C39.7362 33.4191 46.7486 40.3279 47.1332 40.6978L60.0041 53.5687L72.875 40.6978C72.875 40.6978 78.7039 34.6914 78.7039 27.2056C78.7039 26.0516 78.5707 24.8533 78.2452 23.6402L78.1565 23.3443C77.328 20.4595 75.5527 17.6338 72.875 14.9561C67.4455 9.52662 61.735 7.91407 55.4032 10.0148C50.5211 11.6422 47.1628 14.9117 47.1184 14.9561L31.0225 31.052C30.6082 31.4663 30.2088 31.8953 29.8537 32.3391V32.3243Z" fill="url(#paint0_linear_827_29852)"/>
      <defs>
        <linearGradient id="paint0_linear_827_29852" x1="60.0041" y1="119.994" x2="60.0041" y2="-0.000779596" gradientUnits="userSpaceOnUse">
          <stop stop-color="#F27335"/>
          <stop offset="1" stop-color="#FCAA30"/>
        </linearGradient>
      </defs>
    </svg>
  <% end %>
<% end %>
<%= render LooposUi::V2::Card.new() do |card| %>
  <% card.with_title_description(title: "Embalagem Pequena/Média", description: "Peso inferior a 30Kg, dimensões inferiores a 1,5m.") %>
<% end %>

No notes provided.

Param Description Input

—

—

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