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
<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="textarea" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite seu texto aqui" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="rows" id="rows" autocomplete="off" /><input type="hidden" name="maxlength" id="maxlength" autocomplete="off" /><input type="hidden" name="minlength" id="minlength" autocomplete="off" /><input type="hidden" name="wrap" id="wrap" autocomplete="off" /><input type="hidden" name="resize" id="resize" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" />
    <div data-controller="textarea" class="lui-text_area">
      <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="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>
        <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>
  </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="textarea" autocomplete="off" /><input type="hidden" name="value" id="value" autocomplete="off" /><input type="hidden" name="placeholder" id="placeholder" value="Digite seu texto aqui" autocomplete="off" /><input type="hidden" name="help" id="help" autocomplete="off" /><input type="hidden" name="error" id="error" autocomplete="off" /><input type="hidden" name="readonly" id="readonly" value="false" autocomplete="off" /><input type="hidden" name="rows" id="rows" autocomplete="off" /><input type="hidden" name="maxlength" id="maxlength" autocomplete="off" /><input type="hidden" name="minlength" id="minlength" autocomplete="off" /><input type="hidden" name="wrap" id="wrap" autocomplete="off" /><input type="hidden" name="resize" id="resize" autocomplete="off" /><input type="hidden" name="mode" id="mode" value="inline" autocomplete="off" />
    <div data-controller="textarea" class="lui-text_area">
      <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">
          <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>
        <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>
  </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="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) %>
      <%= render LooposUi::Inputs::TextArea.new(
        **preview_params,
        value: params[preview_params[:name]].presence || preview_params[:value]
      ) %>
    <% 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) %>
      <%= 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

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.
open_actions false Open field in edit mode by default.

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

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.