LoopOS UI v1.1.59.0-release.taskforce.dynamic.form.in.UI.rc2

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
<div>
<h1 class="heading-20 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" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite um número" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="min" id="min" /><input type="hidden" name="max" id="max" /><input type="hidden" name="step" id="step" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="mode" id="mode" value="inline" /><input type="hidden" name="with_actions" id="with_actions" value="true" />
    <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">
              <div class="lui-input-chrome relative w-full">
                <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" step="1" inputmode="decimal">
                  <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>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
                  <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                    <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i></div>
                  </div>
                    
                  <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                    <i class="lui-m_icon animate-spin material-symbols-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading lui--button#startLoading" type="submit" disabled="disabled">
                  <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                    <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i></div>
                  </div>
                    
                  <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                    <i class="lui-m_icon animate-spin material-symbols-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </form>
</turbo-frame>  
<h1 class="heading-20 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" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite um número" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="min" id="min" /><input type="hidden" name="max" id="max" /><input type="hidden" name="step" id="step" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="mode" id="mode" value="inline" /><input type="hidden" name="with_actions" id="with_actions" value="true" />
    <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">
              <div class="lui-input-chrome relative w-full">
                <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" step="1" inputmode="decimal">
                  <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>
            </div>
            <span class="lui-inner-input__actions opacity-0 flex items-center gap-1 h-fit" data-input-target="actions">
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="cancel" data-action="click->input#handleClose" type="button" disabled="disabled">
                  <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                    <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-xmark" data-lui--button-target="leadingIcon"></i></div>
                  </div>
                    
                  <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                    <i class="lui-m_icon animate-spin material-symbols-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
              <span class="lui-button__tooltip-wrapper inline-flex w-fit">
                <button class="lui-button lui-button--icon-only lui-button--neutral--secondary lui-button--size-tiny w-fit w-fit relative" data-controller="lui--button" data-input-target="submit" data-action="click->input#setLoading lui--button#startLoading" type="submit" disabled="disabled">
                  <div class="opacity-100 inline-flex" data-lui--button-target="leadingIcon">
                    <div class="flex items-center justify-center" style="width: 12px; height: 12px;"><i class="lui-button__icon lui-button__icon--tiny fa-regular fa-check" data-lui--button-target="leadingIcon"></i></div>
                  </div>
                    
                  <div class="absolute w-full flex items-center justify-center opacity-0" data-lui--button-target="loadingIcon">
                    <i class="lui-m_icon animate-spin material-symbols-rounded" style="--lui-micon-size: 12px;">
                      progress_activity
                    </i>
                  </div>
                </button></span>
            </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="heading-20 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="heading-20 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

HTML autocomplete token (e.g. email, tel, off)

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.
appearance nil Visual modifier. Defaults to mode when omitted.
form nil HTML form attribute used to associate the input and submit button with an external form.
readonly false Renders the value as readonly text.
custom_readonly false In readonly mode, renders the provided content instead of the plain value.
open_actions false Open field in edit mode by default.
extra_input_attributes {} Extra attributes merged into the rendered input wrapper.

Number field specific arguments

Property Default Description
min nil Minimum value allowed.
max nil Maximum value allowed.
step 1 Step value for increment/decrement.
with_actions true Enables increment/decrement action controls when supported by the template/controller.
autocomplete_type nil Optional HTML autocomplete token. When not provided, the component keeps its previous behavior.

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.