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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<div id="lui-token_list_5793709857" class="lui-token-list lui-token-list--horizontal"
    data-controller="token-list"
    data-token-list-frame-id-value="lui-token_list_5793709857_frame"
    data-token-list-model-association-overlay-outlet="#lui-token_list_5793709857 .lui-association-overlay">
  <turbo-frame class="lui-token-list__items" id="lui-token_list_5793709857_frame">
    <div data-controller="drag" class="lui-token-list__items">
      <span id="lui-token_9912568611" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
        <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">
            Flow Feature
          </div>
        </div>
        <i class="lui-token__icon fa-regular fa-regular fa-timeline-arrow"></i>
        <span class="lui-token__text">Flows</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; background-color: #F8F9FA;">
        <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">
            Protocol Feature
          </div>
        </div>
        <i class="lui-token__icon fa-regular fa-regular fa-bars-staggered"></i>
        <span class="lui-token__text">Protocols</span>
        <div class="lui-token__actions">
        </div>
      </span>
      <span id="lui-token_6597424226" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
        <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">
            Pricing Rules Feature
          </div>
        </div>
        <i class="lui-token__icon fa-regular fa-regular fa-euro-sign"></i>
        <span class="lui-token__text">Pricing Rules</span>
        <div class="lui-token__actions">
        </div>
      </span>
    </div>
    <span>
      <span class="lui-counter lui-counter--increment">
        <span class="lui-counter__text lui-counter__text--increment">+4</span>
      </span>
      <div class="lui-tooltip hidden"
    data-controller="tooltips"
    data-tooltips-tippy-target-id-value=""
    data-tooltips-position-value="top"
    data-tooltips-interactive-value="true"
  >
        <div class="lui-tooltip__description">
          <div class="flex flex-col gap-1">
            <span id="lui-token_8670528836" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <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">
                  Forward Trade-In Feature
                </div>
              </div>
              <span class="lui-token__text">Forward Trade In</span>
              <div class="lui-token__actions">
              </div>
            </span>
            <span id="lui-token_9451751915" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <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">
                  Acceptable Feature
                </div>
              </div>
              <span class="lui-token__text">Acceptable</span>
              <div class="lui-token__actions">
              </div>
            </span>
            <span id="lui-token_5215854990" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <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">
                  Acceptable Online Feature
                </div>
              </div>
              <span class="lui-token__text">Acceptable Online</span>
              <div class="lui-token__actions">
              </div>
            </span>
            <span id="lui-token_1569762617" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529; background-color: #F8F9FA;">
              <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">
                  Saleable as New Feature
                </div>
              </div>
              <span class="lui-token__text">Saleable As New</span>
              <div class="lui-token__actions">
              </div>
            </span>
          </div>
        </div>
      </div>
    </span>
  </turbo-frame>
</div>

(Apps/Features/Services)::List

When using component, remember to declare the module of what element you're gonna use (per example, LooposUi::Apps::List for Apps)

Used Components Components where is Used
Table

Usage rules

  • ✅ Do Use in Tables
  • ❌ Don't
1
2
3
4
5
6
7
8
9
<%= render LooposUi::Features::List.new(list: {
  flows: {tooltip: "Flow Feature" },
  protocols: {tooltip: "Protocol Feature" },
  pricing_rules: { tooltip: "Pricing Rules Feature" },
  forward_trade_in: { tooltip: "Forward Trade-In Feature" },
  acceptable: { tooltip: "Acceptable Feature" },
  acceptable_online: { tooltip: "Acceptable Online Feature" },
  saleable_as_new: { tooltip: "Saleable as New Feature" }
}) %>

No notes provided.

No params configured.

List

Description

The 'List' component compiles a list of elements from 3 different types. Apps, Features, and Services. These types cannot be mixed. Each of them have their own arguments and properties.

The Apps List features a list of IconToolips components of all apps that you declare it with. Other than the hash keys, it will also automatically use the icon of the chosen apps.

The Features List is a list of EntityTokens that correspond to the current Features: flows, protocols, pricing_rules, forward_trade_in, acceptable, acceptable_online, saleable_as_new. The tokens show as well the name of the Feature as text, the respective icon and the general color as well.

The Services List is a TokenList of the current Services: emails, incoming_payments, invoices, payments, sms, shippings. This list is composed of IconTooltips, which means it will also use the respective icon of the service.

Arguments

Property Description
list Hash that will contain the elements you want to pass. These can also have their own hash, with their own keys. These keys can be seen below

Element hash keys

Property Default Description
tooltip nil Text that will show up on the tooltip
count nil Number that will show up in the counter. Not avaiable in LooposUi::Features::List
url nil URL of the EntityToken in the List. This is only avaiable when using LooposUi::Features::List