LoopOS UI v1.1.48.1

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
<div class="w-full max-w-4xl">
  <div class="lui-human_view" data-controller="human-view" data-human-view-icon-behavior-value="rotate">
    <div class="lui-human_view__content">
      <div class="lui-human_view-tree_node">
        <div class="lui-human_view-tree_node__branch">
          <button
        type="button"
        class="lui-human_view-tree_node__trigger"
        data-action="click->human-view#toggleTree"
            aria-expanded="false"
            aria-controls="extra-data-tree-46c24c3a4987">
            <i
          data-tree-icon
          data-tree-icon-closed="fa-chevron-right"
          data-tree-icon-open="fa-chevron-down"
          class="fa-solid fa-chevron-right lui-human_view-tree_node__icon"></i>
            <span class="lui-human_view-tree_node__key">item</span>
          </button>
          <div id="extra-data-tree-46c24c3a4987" data-tree-content data-state="closed" class="lui-human_view-tree_node__children" hidden>
            <div class="lui-human_view-tree_node">
              <div class="lui-human_view-tree_node__leaf">
                <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                <span class="lui-human_view-tree_node__key">id:</span>
                <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--number">1024</span>
              </div>
            </div>
            <div class="lui-human_view-tree_node">
              <div class="lui-human_view-tree_node__branch">
                <button
        type="button"
        class="lui-human_view-tree_node__trigger"
        data-action="click->human-view#toggleTree"
                  aria-expanded="false"
                  aria-controls="extra-data-tree-52e6c013a100">
                  <i
          data-tree-icon
          data-tree-icon-closed="fa-chevron-right"
          data-tree-icon-open="fa-chevron-down"
          class="fa-solid fa-chevron-right lui-human_view-tree_node__icon"></i>
                  <span class="lui-human_view-tree_node__key">metadata</span>
                </button>
                <div id="extra-data-tree-52e6c013a100" data-tree-content data-state="closed" class="lui-human_view-tree_node__children" hidden>
                  <div class="lui-human_view-tree_node">
                    <div class="lui-human_view-tree_node__leaf">
                      <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                      <span class="lui-human_view-tree_node__key">archived:</span>
                      <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--default">false</span>
                    </div>
                  </div>
                  <div class="lui-human_view-tree_node">
                    <div class="lui-human_view-tree_node__leaf">
                      <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                      <span class="lui-human_view-tree_node__key">source:</span>
                      <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--string">catalog</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="lui-human_view-tree_node">
              <div class="lui-human_view-tree_node__branch">
                <button
        type="button"
        class="lui-human_view-tree_node__trigger"
        data-action="click->human-view#toggleTree"
                  aria-expanded="false"
                  aria-controls="extra-data-tree-46e0a142f87a">
                  <i
          data-tree-icon
          data-tree-icon-closed="fa-chevron-right"
          data-tree-icon-open="fa-chevron-down"
          class="fa-solid fa-chevron-right lui-human_view-tree_node__icon"></i>
                  <span class="lui-human_view-tree_node__key">prices</span>
                </button>
                <div id="extra-data-tree-46e0a142f87a" data-tree-content data-state="closed" class="lui-human_view-tree_node__children" hidden>
                  <div class="lui-human_view-tree_node">
                    <div class="lui-human_view-tree_node__leaf">
                      <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                      <span class="lui-human_view-tree_node__key">1:</span>
                      <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--number">12.5</span>
                    </div>
                  </div>
                  <div class="lui-human_view-tree_node">
                    <div class="lui-human_view-tree_node__leaf">
                      <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                      <span class="lui-human_view-tree_node__key">2:</span>
                      <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--number">14.0</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="lui-human_view-tree_node">
              <div class="lui-human_view-tree_node__leaf">
                <i class="fa-solid fa-chevron-right lui-human_view-tree_node__icon lui-human_view-tree_node__icon--placeholder"></i>
                <span class="lui-human_view-tree_node__key">status:</span>
                <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--string">draft</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

No Usage documentation to display.

Create a markdown file in /project/test/components/loopos_ui/usage_documentation/human_view.md.

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
<%
  payload = {
    item: {
      id: 1024,
      status: "draft",
      prices: [12.5, 14.0],
      metadata: {
        source: "catalog",
        archived: false
      }
    }
  }
  icon_behavior = params[:tree_icon_behavior].presence || "rotate"
  icon_closed = params[:tree_icon_closed].presence || "fa-chevron-right"
  icon_open = params[:tree_icon_open].presence || "fa-chevron-down"
%>
<div class="w-full max-w-4xl">
  <%= render LooposUi::HumanView.new(
    data: payload,
    tree_icon_behavior: icon_behavior,
    tree_icon_closed: icon_closed,
    tree_icon_open: icon_open
  ) %>
</div>

No notes provided.

Param Description Input

—

fa-chevron-right

fa-chevron-down

Description

The HumanView component renders nested data in a readable tree format. It supports Hash, Array, and String input values and is designed for human-friendly inspection of structured payloads.

Arguments

Property Default Description
title nil Optional label used when rendering primitive values.
data required Data to render. Accepts Hash, Array or String.
tree_icon_behavior "rotate" Tree icon interaction behavior. Allowed: rotate, swap.
tree_icon_closed "fa-chevron-right" Icon class used when node is closed.
tree_icon_open "fa-chevron-down" Icon class used when node is open.

Behavior Notes

  • String input is parsed as JSON when possible.
  • Invalid JSON string input is rendered as plain text.
  • Blank input renders the fallback "No data to display.".
  • Nested structures are rendered using LooposUi::HumanView::TreeNode.