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
<div class="w-full max-w-4xl">
  <div class="space-y-4">
    <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-ad1dca49adfb">
          <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-ad1dca49adfb" 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__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-997e2e0e2a1f">
                <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">details</span>
              </button>
              <div id="extra-data-tree-997e2e0e2a1f" 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">owner:</span>
                    <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--string">ops</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-690581a2d348">
                <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">retries</span>
              </button>
              <div id="extra-data-tree-690581a2d348" 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">1</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">2</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">source:</span>
              <span class="lui-human_view-tree_node__value lui-human_view-tree_node__value--string">api</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">completed</span>
      </div>
    </div>
  </div>
</div>

No Usage documentation to display.

Create a markdown file in /project/test/components/loopos_ui/usage_documentation/tree_node.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
26
27
<%
  selected_node_key = params[:node_key].presence || "metadata"
  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">
  <div class="space-y-4">
    <%= render LooposUi::HumanView::TreeNode.new(
      node_key: selected_node_key,
      node_value: {
        source: "api",
        retries: [1, 2],
        details: { owner: "ops" }
      },
      tree_icon_closed: icon_closed,
      tree_icon_open: icon_open
    ) %>
    <%= render LooposUi::HumanView::TreeNode.new(
      node_key: "status",
      node_value: "completed",
      tree_icon_closed: icon_closed,
      tree_icon_open: icon_open
    ) %>
  </div>
</div>

No notes provided.

Param Description Input

metadata

fa-chevron-right

fa-chevron-down

Description

LooposUi::HumanView::TreeNode is an internal subcomponent used by HumanView to render one node of a nested structure. It recursively renders child nodes when the current value is a Hash or Array.

Arguments

Property Default Description
node_key required Label/key for the current node.
node_value required Value for the current node.
tree_icon_closed "fa-chevron-right" Icon class used when node is collapsed.
tree_icon_open "fa-chevron-down" Icon class used when node is expanded.

Behavior Notes

  • Hash children are sorted by key string.
  • Array children are mapped to numbered keys ("1", "2", ...).
  • Leaf values are rendered with semantic color classes:
    • String -> success
    • Numeric -> warning
    • NilClass -> informative
    • other types -> neutral