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
<div data-controller="collapsiblev2">
<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">
        <div class="lui-icon h-[16px] w-[16px]">
          <i class="fa-solid fa-star lui-icon__icon" style="font-size: 16px; color: black;"></i>
        </div>
        Favorites
      </span>
    </div>
  </div>
  <div class="z-10 w-full">
    <div data-collapsiblev2-target="container">
      <div class="w-full flex flex-wrap gap-4">
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 0
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 1
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 2
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 3
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 4
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 5
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 6
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 7
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 8
        </div>
        <div class="w-full w-[100px] lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
          Favorite 9
        </div>
      </div>
    </div>
  </div>
  <div class="z-10 w-full">
    <div class="w-full flex justify-end">
      <button class="lui-button lui-button--size-tiny lui-button--core--secondary w-fit w-fit" data-controller="lui--button" data-collapsiblev2-target="button" data-action="click->collapsiblev2#toggle">
        <span class="lui-button__text" data-lui--button-target="text">
          View more
        </span>
        <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-chevron-down"></i>
      </button>
    </div>
  </div>
</turbo-frame></div>

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
<%= render LooposUi::V2::Card::Favorites.new do %>
    <div class="w-full flex flex-wrap gap-4">
      <% 10.times do |i| %>
          <%= render LooposUi::DummySlot.new(text: "Favorite #{i}", classes: "w-[100px]") %>
      <% end %>
    </div>
<% 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