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
<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="textarea" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite seu texto aqui" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="rows" id="rows" /><input type="hidden" name="maxlength" id="maxlength" /><input type="hidden" name="minlength" id="minlength" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="wrap" id="wrap" /><input type="hidden" name="resize" id="resize" /><input type="hidden" name="mode" id="mode" value="inline" />
    <div data-controller="textarea" class="lui-text_area lui-text_area--inline">
      <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="textarea" type="textarea" placeholder="Digite seu texto aqui" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-textarea-target="input" wrap="soft" style="resize: vertical">
              <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>
  </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="textarea" /><input type="hidden" name="value" id="value" /><input type="hidden" name="placeholder" id="placeholder" value="Digite seu texto aqui" /><input type="hidden" name="help" id="help" /><input type="hidden" name="error" id="error" /><input type="hidden" name="readonly" id="readonly" value="false" /><input type="hidden" name="rows" id="rows" /><input type="hidden" name="maxlength" id="maxlength" /><input type="hidden" name="minlength" id="minlength" /><input type="hidden" name="autocomplete_type" id="autocomplete_type" /><input type="hidden" name="wrap" id="wrap" /><input type="hidden" name="resize" id="resize" /><input type="hidden" name="mode" id="mode" value="inline" />
    <div data-controller="textarea" class="lui-text_area lui-text_area--inline">
      <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
 data-input-original-input-value="Mew"
  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[name]" type="textarea" value="Mew" placeholder="Digite seu texto aqui" class="lui-input__input" mode="inline" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange" data-textarea-target="input" wrap="soft" style="resize: vertical">
              <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>
  </form>
</turbo-frame></div>

Inputs::TextArea

The Input Text Area component is used for multi-line text input, such as comments or descriptions.

Used Components Components where is Used
Form Entry

Usage rules

✅ Do

  • Use for collecting long, free-form text
  • Support resizing

❌ Don't

  • Don’t use for short text input
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
<%
  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) %>
      <%= render LooposUi::Inputs::TextArea.new(
        **preview_params,
        value: params[preview_params[:name]].presence || preview_params[:value]
      ) %>
    <% 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) %>
      <%= render LooposUi::Inputs::TextArea.new(
        **preview_params,
        model: Pokemon.new(name: params.dig(:pokemon, :name).presence || "Mew"),
        attribute: :name
    ) %>
    <% 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

Number of rows

Input max length

Input min length

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

Wrap text

—

Sleep for 2 seconds, for testing purposes

—

Description

Inputs::TextArea component is used to render a textarea input field.

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 textarea 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.

Text field specific arguments

Property Default Description
rows nil Number of rows of the textarea.
cols nil Number of columns of the textarea.
maxlength nil Maximum length of the input field.
minlength nil Minimum length of the input field.
wrap nil Wrap text in textarea, can be soft
resize "vertical" CSS resize behaviour applied inline to the textarea.
data_attributes {} Extra data attributes merged into the textarea input.
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::TextArea.new(
    model: Pokemon.new(description: "A rare psychic Pokémon"),
    attribute: :description,
    placeholder: "Digite aqui",
    rows: 4,
    cols: 50) %>

Example using name and value:

<%= render LooposUi::Inputs::TextArea.new(
    name: "description",
    value: "Default description",
    rows: 3,
    wrap: "soft",
    resize: "vertical"
) %>

⚠️ 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: "some_url", method: :post do %>
    <%= render LooposUi::Inputs::TextArea.new(
      #...
    ) %>
  <% end %>
<% end %>

Depending on how the backend is implemented, you may not need a turbo frame tag, if you respond with a turbo stream, you can replace the form directly.