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
134
135
<div class="flex flex-col gap-2 justify-center items-center">
<div class="flex gap-2" >
  <h3>new</h3>
  <a class="lui-button lui-button--size-default lui-button--core--tertiary w-fit w-fit" data-controller="lui--button" href="#">
    <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">
        New
      </div>
    </div>
    <i class="lui-button__icon lui-button__icon--default fa-regular fa-plus-large" data-lui--button-target="leadingIcon"></i>
    <span class="lui-button__text" data-lui--button-target="text">
      New
    </span>
  </a>
</div>
<div class="flex gap-2" >
  <h3>delete</h3>
</div>
<div class="flex gap-2" >
  <h3>back</h3>
  <a class="lui-button lui-button--neutral--tertiary lui-button--size-default w-fit w-fit" data-controller="lui--button" data-turbo-action="advance" href="javascript:history.back()">
    <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">
        Back
      </div>
    </div>
    <i class="lui-button__icon lui-button__icon--default fa-regular fa-close" data-lui--button-target="leadingIcon"></i>
  </a>
</div>
<div class="flex gap-2" >
  <h3>enable</h3>
</div>
<div class="flex gap-2" >
  <h3>copy</h3>
  <button class="lui-button lui-button--neutral--tertiary lui-button--size-default w-fit w-fit" data-controller="lui--button" data-method="patch">
    <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">
        Copy
      </div>
    </div>
    <i class="lui-button__icon lui-button__icon--default fa-regular fa-copy" data-lui--button-target="leadingIcon"></i>
  </button>
</div>
<div class="flex gap-2" >
  <h3>export</h3>
</div>
<div class="flex gap-2" >
  <h3>duplicate</h3>
</div>
<div class="flex gap-2" >
  <h3>clipboard_copy</h3>
</div>
<div class="flex gap-2" >
  <h3>export_pricing</h3>
</div>
<div class="flex gap-2" >
  <h3>import_pricing</h3>
</div>
<div class="flex gap-2" >
  <h3>import</h3>
</div>
<div class="flex gap-2" >
  <h3>download_template</h3>
</div>
<div class="flex gap-2" >
  <h3>export_catalog</h3>
</div>
<div class="flex gap-2" >
  <h3>run</h3>
</div>
<div class="flex gap-2" >
  <h3>for_row_action</h3>
</div>
<div class="flex gap-2" >
  <h3>help</h3>
  <button class="lui-button lui-button--size-default lui-button--core--tertiary w-fit w-fit" data-controller="lui--button" data-turbo="false">
    <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">
        Help
      </div>
    </div>
    <i class="lui-button__icon lui-button__icon--default fa-regular fa-circle-question" data-lui--button-target="leadingIcon"></i>
    <span class="lui-button__text" data-lui--button-target="text">
      Help
    </span>
  </button>
</div>
<div class="flex gap-2" >
  <h3>validation</h3>
  <button class="lui-button lui-button--size-default lui-button--core--secondary w-fit w-fit" data-controller="lui--button" data-turbo="false">
    <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">
        Open in Validation
      </div>
    </div>
    <svg height="24" width="24" viewBox="0 0 12 10">
      <path d="M4.708 9.24858C3.95829 9.24858 3.20859 8.96398 2.63778 8.39317L0.912326 6.66772C0.876549 6.63194 0.00162625 5.75051 0 4.54058C0 3.81202 0.305735 3.13388 0.912326 2.52728C1.97915 1.46046 3.06223 1.52226 3.78266 1.76295C4.53073 2.01176 5.02999 2.50614 5.05113 2.52728L5.56828 3.04443L6.94897 1.66375C6.98475 1.62797 7.8678 0.753045 9.0761 0.751419H9.08098C9.80792 0.751419 10.4844 1.05878 11.0894 1.66375C12.1562 2.73057 12.0944 3.81365 11.8537 4.53408C11.6049 5.28215 11.1105 5.78141 11.0894 5.80255C10.3982 6.49371 9.44526 6.76692 8.54595 6.62056L6.77659 8.38992C6.20577 8.96073 5.45607 9.24533 4.70637 9.24533L4.708 9.24858ZM2.94026 2.59559C2.53207 2.59559 2.07022 2.75171 1.60348 3.21844C1.18716 3.63476 0.97575 4.07873 0.977377 4.53896C0.977377 5.33419 1.59698 5.97006 1.60186 5.97656L3.32731 7.70201C4.08839 8.4631 5.32597 8.4631 6.08706 7.70201L7.46612 6.32295L4.3616 3.21844C4.27053 3.129 3.69484 2.59559 2.93863 2.59559H2.94026ZM6.26107 3.73559L7.64175 5.11627C8.40284 5.87736 9.64041 5.87736 10.4015 5.11627C10.5397 4.97479 11.7301 3.68517 10.4015 2.35653C9.98518 1.94021 9.53633 1.73205 9.08098 1.73042C8.28575 1.73042 7.64988 2.35002 7.64338 2.3549L6.26269 3.73559H6.26107Z" fill="url(#paint0_linear_238_3029)"/>
      <defs>
        <linearGradient id="paint0_linear_238_3029" x1="6.00086" y1="9.24858" x2="6.00086" y2="0.754671" gradientUnits="userSpaceOnUse">
          <stop stop-color="#059898"/>
          <stop offset="1" stop-color="#00D8B5"/>
        </linearGradient>
      </defs>
    </svg>
    <span class="lui-button__text" data-lui--button-target="text">
      Follow up item
    </span>
  </button>
</div>
<div>

No Usage documentation to display.

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
<%
    args = {
        href: "#",
        text: "Text"
    }
%>
<div class="flex flex-col gap-2 justify-center items-center">
    <% LooposUi::Button.presets.each do |name, rendered| %>
        <% next if [:manual,:button].include?(name) %>
        <div class="flex gap-2" >
            <h3><%= name %></h3>
            <% rendered =  %>
            <% rendered = rendered[:renders] if rendered.is_a?(Hash) %>
            <% if rendered.is_a? Proc %>
                <% args = rendered.parameters.filter_map do |type, param| %>
                    <% next unless type == :keyreq %>
                    <% [ param, args[param] ] %>
                <% end.to_h %>
                <%= render rendered.call(**args)%>
            <% elsif rendered.is_a?(Class) && rendered < ViewComponent::Base %>
                <%# Do we need this ? i think not%>
            <% end %>
        </div>
    <% end %>
<div>

No notes provided.

No params configured.

Description

The Button component is a simple button that can be used to trigger actions or navigate to different parts of the application.

Arguments

Property Description Default Value
kind The kind of the button. Can be :app, :neutral, :success, or :danger. :app
app The application type. If kind is :app and app is not provided, it defaults to LooposUi.config.app_type. nil
text The text displayed on the button. nil
size The size of the button. Can be :default, :small, or :tiny. :default
type The type of the button. Can be :primary, :secondary, or :tertiary. :primary
href Decides the type of the button. If present, the button will be rendered as an anchor tag, otherwise as a button. nil
tag The wrapper HTML tag that should be used to create the button. Eg: button, a, label, etc. Default is button, unless you specify href button
tag_options Hash with additional options to be passed to the tag builder. {}
leading_icon The icon displayed before the text. If the string is an app name, the respective app icon will be rendered nil
icon The icon displayed before the text, alternative way to set leading_icon. nil
trailing_icon The icon displayed after the text. If the string is an app name, the respective app icon will be rendered nil
disabled Boolean value, controls whether the button/link is clickable. false
active Boolean value, controls whether the button/link is in an active state. true

When the kind is set to :app and the app property is not provided, it will default to LooposUi.config.app_type.

Color Customization

To customize button colors (primary color, hover color, border color, text color), use the ThemeContext component to wrap your buttons. This only works if button is of type primary:

<%= render LooposUi::ThemeContext.new(theme: {
  button: {
    primary_color: "apps-default-800-primary",
    hover_color: "apps-default-900-hover",
    border_color: "apps-default-800-primary",
    text_color: "general-global-white"
  }
}) do %>
  <%= render LooposUi::Button.new(text: "Custom Button") %>
<% end %>

icon, leading_icon, and trailing_icon should be a string with the FontAwesome icon class (for example, fa-regular fa-plus). You can also pass in just the icon name - if the passed in value does not contain fa-, it will be prepended with fa-regular fa-{VALUE}. This way you can just pass in plus for the same effect.

Presets

As most buttons will have the same kind, size, and type, there are some presets available to make it easier to create buttons. The presets are defined in the LooposUi::Button::Presets module.

Currently, the available presets are:

  • new:
  • delete:
  • back:
  • enable:
  • copy:
  • export:
  • validation:

All presets accept the same arguments as the Button component, but most only require the href property.

Slots

There are three slots available for the Button component: counter, leading_icon and trailing_icon. The first one adds a counter next to the button, while the other two add the respective icons. The last two can also be passed in as properties, which is the heavily recommended way of doing it.

JavaScript/Stimulus Controller

The Button component includes a Stimulus controller (lui--button) that provides dynamic functionality for updating button content and handling icon interactions.

Controller Targets

Target Description
text The text content span element within the button
leadingIcon The leading icon element (when using FontAwesome icons)

Controller Methods

Method Description
rotateLeadingIcon() Toggles a 180-degree rotation on the leading icon. Useful for expand/collapse buttons.

Dynamic Updates

The controller automatically watches for changes to specific data attributes and updates the button content accordingly:

  • data-text: Updates the button text content
  • data-leading-icon: Updates the leading icon class
  • data-tooltip-title: Updates the tooltip if it exists

Usage Examples

Dynamic Text Updates

<%= render LooposUi::Button.new(text: "Initial Text", icon: :chevron-down) %>
<script>
  // Update button text dynamically
  const button = document.querySelector('[data-controller="lui--button"]')
  button.dataset.text = "Updated Text"
</script>

Integration with Other Components

The button controller is often used in conjunction with other components. For example, in the Log component:

<%= render LooposUi::Button.new(
  text: "Show More",
  leading_icon: "fa-regular fa-chevron-down",
  data: {
    action: "click->log#showMore log:toggleExpand->lui--button#rotateLeadingIcon"
  }
) %>