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
<div class="flex items-end justify-center w-[100vw] h-full">
  <div id="31c5eb54-aa89-407c-881d-94480b8dae60" class="lui-mini_app lui-mini_app--open" data-controller="miniapp miniapp-drag" data-miniapps-target="miniapp" data-restriction="parent" popover="auto">
    <div class="lui-mini_app__drag-container">
      <div class="lui-mini_app__drag-handle">
        <div class="lui-icon h-[20px] w-[20px]">
          <i class="fa-solid fa-grip-dots lui-icon__icon" style="font-size: 20px; color: #6D6D6D;"></i>
        </div>
      </div>
    </div>
    <div class="lui-header lui-header--page">
      <div class="lui-header__title_container">
        <span class="lui-header__title_container__title">
          Title
        </span>
        <span class="flex w-fit">
          <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">
              This is a tooltip
            </div>
          </div>
          <i class="lui-m_icon material-symbols-outlined" style="--lui-micon-size: 16px;">
            info
          </i>
        </span>
      </div>
  
      <div class="lui-header__token_zone">
        <span id="lui-token_5793709857" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
          <i class="lui-token__icon fa-regular fa-regular fa-user"></i>
          <span class="lui-token__text">EntityToken</span>
          <div class="lui-token__actions">
          </div>
        </span>
        <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
          <i class="lui-token__icon fa-regular fa-regular fa-user"></i>
          <span class="lui-token__text">EntityToken</span>
          <div class="lui-token__actions">
          </div>
        </span>
        <span id="lui-token_2322156580" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
          <i class="lui-token__icon fa-regular fa-regular fa-user"></i>
          <span class="lui-token__text">EntityToken</span>
          <div class="lui-token__actions">
          </div>
        </span>
      </div>
  <span class="lui-header__description">
        Description
        <i class="lui-m_icon material-symbols-outlined" style="--lui-micon-size: 16px;">
          calendar_clock
        </i>
      </span>
    </div>
    <div class="lui-mini_app__content">
      <div class="w-96 h-64 lui-dummy_slot text-[#78818a] text-primary-xs-bold leading-none">
        Content Slot
      </div>
    </div>
  </div>
</div>

MiniApp

Description

Used Components Components where is Used
Label

Usage rules

  • ✅ Do
  • ❌ Don't
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="flex items-end justify-center w-[100vw] h-full">
   <%= render LooposUi::MiniApp.new(open: true) do |mini_app| %>
      <% mini_app.with_header(title: "Title", description: "Description", 
                           tooltip: "This is a tooltip",
                           description_icon: :calendar_clock) do |header| %>
      <% header.with_token_zone do %>
         <%= render LooposUi::EntityToken.new(text: "EntityToken", icon: "fa-regular fa-user") %>
         <%= render LooposUi::EntityToken.new(text: "EntityToken", icon: "fa-regular fa-user") %>
         <%= render LooposUi::EntityToken.new(text: "EntityToken", icon: "fa-regular fa-user") %>
      <% end %>
   <% end %>
      <%= render LooposUi::DummySlot.new(text: "Content Slot", classes: "w-96 h-64") %>
   <% end %>
</div>

No notes provided.

No params configured.

Description

MiniApp is a draggable container component that provides a floating window-like interface for displaying content. It features a drag-and-drop functionality with customizable restrictions and z-index management to bring focused elements to the front.

Arguments

Property Default Required Description
open false No Controls whether the mini app is open. When true, applies the lui-mini_app--open modifier class
miniapp_id SecureRandom.uuid No Unique identifier for the mini app instance. Used for DOM targeting and event handling
restriction "parent" No Defines the drag restriction area. Can be "parent" (restrict to parent element) or a CSS selector string for a specific element
data_attributes {"controller": "miniapp miniapp-drag", "miniapps-target": "miniapp"} No Additional data attributes for Stimulus controllers and targeting

Slots

header - Renders a header component using LooposUi::Header Slot attributes: - All attributes supported by LooposUi::Header component

content - Main content area of the mini app Slot attributes: - Any HTML content or components

CSS Classes

The component automatically generates the following CSS classes:

  • lui-mini_app - Base container class with flex layout, padding, border, and shadow
  • lui-mini_app--open - Modifier class applied when open is true, changes display to flex
  • lui-mini_app__drag-container - Container for the drag handle
  • lui-mini_app__drag-handle - Interactive drag handle with grip dots icon
  • lui-mini_app__content - Content area wrapper

JavaScript Controllers

The component uses two Stimulus controllers:

MiniAppController (miniapp)

  • Purpose: Basic mini app functionality
  • Methods:
    • toggle() - Toggles the lui-mini_app--open class on the element

MiniAppDragController (miniapp-drag)

  • Purpose: Handles drag-and-drop functionality using Interact.js
  • Features:
    • Drag restriction based on restriction data attribute
    • Automatic z-index management (brings dragged element to front)
    • Initial positioning simulation
    • Mouse event handling for bringing elements to front
  • Configuration:
    • Uses .lui-mini_app__drag-handle as the drag trigger
    • Applies z-1000 class to active elements
    • Supports both "parent" and CSS selector restrictions

Usage Examples

Basic Mini App

<%= render LooposUi::MiniApp.new do |mini_app| %>
  <% mini_app.with_header(title: "My Mini App", description: "A simple mini app") %>
  <div class="p-4">
    <p>Mini app content goes here</p>
  </div>
<% end %>

Draggable Mini App with Custom Restriction

<div class="draggable" data-controller="miniapp-drag">
  <%= render LooposUi::MiniApp.new(restriction: "#container") do |mini_app| %>
    <% mini_app.with_header(title: "Draggable App") %>
    <div class="p-4">
      <p>This mini app can only be dragged within the #container element</p>
    </div>
  <% end %>
</div>

Mini App with Header and Token Zone

<%= render LooposUi::MiniApp.new(open: true) do |mini_app| %>
  <% mini_app.with_header(title: "Title", description: "Description", 
                       tooltip: "This is a tooltip",
                       description_icon: :calendar_clock) do |header| %>
    <% header.with_token_zone do %>
      <%= render LooposUi::EntityToken.new(text: "EntityToken", icon: "fa-regular fa-user") %>
      <%= render LooposUi::EntityToken.new(text: "EntityToken", icon: "fa-regular fa-user") %>
    <% end %>
  <% end %>
  <div class="p-4">
    <p>Main content area</p>
  </div>
<% end %>

Dependencies

  • Interact.js: Required for drag-and-drop functionality
  • Stimulus: Required for JavaScript controller functionality
  • Font Awesome: Required for the grip dots icon in the drag handle