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
<div>
<h1 class="text-primary-lg-regular mb-6">Using name + value: </h1>
<turbo-frame id="some_unique_id">
  <form action="#" accept-charset="UTF-8" method="get">
    <input type="hidden" name="name" id="name" value="number" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite um número" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="min" id="min" autocomplete="off" /><input type="hidden" name="max" id="max" autocomplete="off" /><input type="hidden" name="step" id="step" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" /><input type="hidden" name="with_actions" id="with_actions" value="true" autocomplete="off" />
    <div class="w-64">
      <div data-controller="number-input" data-number-input-step-value="1" data-number-input-mode-value="inline">
        <div class="lui-number lui-number--inline relative">
          <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
 data-input-original-input-value=""
  data-input-mode-value="inline"
  data-input-form-value="">
            <div class="w-full flex flex-col">
              <span class="lui-input ">
                <input name="number" type="number" placeholder="Digite um número" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-number-input-target="input">
                <span class="lui-input__addon-right">
                  <div class="flex gap-2">
                    <i class="fa-regular fa-minus cursor-pointer" data-action="click->number-input#decrease"></i>
                    <i class="fa-regular fa-plus cursor-pointer" data-action="click->number-input#increase"></i>
                  </div>
                </span>
                <span class="lui-input__spinner">
                  <i class="fa-regular fa-spinner"></i>
                </span>
              </span>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
                <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
              </button>
              <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
                <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</turbo-frame>  
<h1 class="text-primary-lg-regular my-6">Using model + attribute </h1>
<turbo-frame id="some_other_id">
  <form action="#" accept-charset="UTF-8" method="get">
    <input type="hidden" name="name" id="name" value="number" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite um número" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="min" id="min" autocomplete="off" /><input type="hidden" name="max" id="max" autocomplete="off" /><input type="hidden" name="step" id="step" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" /><input type="hidden" name="with_actions" id="with_actions" value="true" autocomplete="off" />
    <div class="w-64">
      <div data-controller="number-input" data-number-input-step-value="1" data-number-input-mode-value="inline">
        <div class="lui-number lui-number--inline relative">
          <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
 data-input-original-input-value="100"
  data-input-mode-value="inline"
  data-input-form-value="">
            <div class="w-full flex flex-col">
              <span class="lui-input ">
                <input name="pokemon[hp]" type="number" value="100" placeholder="Digite um número" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-number-input-target="input">
                <span class="lui-input__addon-right">
                  <div class="flex gap-2">
                    <i class="fa-regular fa-minus cursor-pointer" data-action="click->number-input#decrease"></i>
                    <i class="fa-regular fa-plus cursor-pointer" data-action="click->number-input#increase"></i>
                  </div>
                </span>
                <span class="lui-input__spinner">
                  <i class="fa-regular fa-spinner"></i>
                </span>
              </span>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <button class="lui-button lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
                <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i>
              </button>
              <button class="lui-button lui-button--success--secondary lui-button--size-tiny w-fit w-fit" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading" type="submit" disabled="disabled">
                <i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</turbo-frame></div>

Inputs::Number

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<%
  sleep_enabled = preview_params.delete(:sleep)
  if sleep_enabled && (params[preview_params[:name]].present? || params[:pokemon].present?)
    sleep(2)
  end
%>
<div>
  <h1 class="text-primary-lg-regular mb-6">Using name + value: </h1>
  <%= turbo_frame_tag "some_unique_id" do %>
    <%= form_with url: "#", method: :get do %>
      <%= lookbook_fields(preview_params) %>
      <div class="w-64">
        <%= render LooposUi::Inputs::Number.new(
          **preview_params,
          value: params[preview_params[:name]].presence || preview_params[:value]
        ) %>
      </div>
    <% end %>
  <% end %>
  <h1 class="text-primary-lg-regular my-6">Using model + attribute </h1>
  <%= turbo_frame_tag "some_other_id" do %>
    <%= form_with url: "#", method: :get do %>
      <%= lookbook_fields(preview_params) %>
      <div class="w-64">
        <%= render LooposUi::Inputs::Number.new(
          **preview_params,
          model: Pokemon.new(hp: params.dig(:pokemon, :hp).presence || 100),
          attribute: :hp
        ) %>
      </div>
    <% end %>
  <% end %>
</div>

Base options Specific options Testing options

Param Description Input

Input name

Input value

Input placeholder

Input readonly

Input help text

Input error text

Input min value

Input max value

Input step value

Sleep for 2 seconds, for testing purposes

With actions

—

Description

Inputs::Number component is used to render a number input field with increment/decrement controls.

Arguments

Most input components have the following base arguments:

Base Arguments

Property Default Description
model nil ActiveRecord instance.
attribute nil Attribute name of the model.
name nil Name of the input field.
value nil Value of the input field.
placeholder nil Placeholder text.
error nil Error message. If model is present, the errors will be extracted for the current attribute
help nil Help message.
mode :inline Mode of the input. Can be :inline, :autosubmit, or :form.
open_actions false Open field in edit mode by default.

Number field specific arguments

Property Default Description
min nil Minimum value allowed.
max nil Maximum value allowed.
step 1 Step value for increment/decrement.

Slots

No slots available for this component.

Usage

You have two usages for this component:

  • With a model and an attribute
  • With name and value

Example using a model and an attribute:

<%= render LooposUi::Inputs::Number.new(
    model: Pokemon.new(hp: 100),
    attribute: :hp,
    placeholder: "Digite um número",
    min: 0,
    max: 999,
    step: 10
) %>

Example using name and value:

<%= render LooposUi::Inputs::Number.new(
    name: "quantity",
    value: 50,
    min: 0,
    max: 100,
    step: 5
) %>

⚠️ Important

It's the responsibility of the developer to handle the generation of the form, and handling any turbo frame updates or form submissions. The recommendation is to use the form_with helper from Rails, along with a turbo_frame_tag, so only the inline component is updated:

<%= turbo_frame_tag "some_unique_id" do %>
    <%= form_with url: "#", method: :get do %>
        <%= render LooposUi::Inputs::Number.new(
            name: "quantity",
            value: nil,
            placeholder: "Digite um número",
            min: 0,
            max: 100,
            step: 1
            ) %>
    <% end %>
<% end %>

This update follows the same structure as the text and text_area components while maintaining the specific features of the number input like min, max and step values.