LoopOS UI v1.1.29.0-release.2025.q4.uxe.december.rc1

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
<div data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
  <button popovertarget="popover-a2f8c39196d7e1ebc1a3-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
    <span id="lui-token_6503213766" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
      <span class="lui-token__key-text">Key: </span>
      <span class="lui-token__text">Bulbasaur</span>
      <div class="lui-token__actions">
      </div>
    </span>
  </button>  
  <div id="popover-a2f8c39196d7e1ebc1a3-target" popover="auto" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
    <div class="bg-white lui-popover-inner absolute pointer-events-auto">
      <div class="lui-popover_template" data-controller="popover-template">
        <div class="lui-form_entry lui-form_entry--vertical">
          <div class="lui-form_entry__input">
            <form action="/pokemons/1/update_name" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="4w_X9Gk9k-HASjt103je-OIn6ESMX_2uvP_DDI39jCYc0dgR8srkPHlwsP5o0F_SFD0AHuyoi9gdM_jvmNtEKg" />
              <div class="lui-text relative">
                <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="Bulbasaur"
    data-input-mode-value="autosubmit"
    data-input-form-value="#<ActionView::Helpers::FormBuilder:0x00007daef2f046b8>">
                  <div class="w-full flex flex-col">
                    <span class="lui-input ">
                      <input name="pokemon[name]" type="text" value="Bulbasaur" class="lui-input__input" mode="autosubmit" form="#<ActionView::Helpers::FormBuilder:0x00007daef2f046b8>" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange">
                      <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--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-outlined" style="--lui-micon-size: 12px;">
                          progress_activity
                        </i>
                      </div>
                    </button>
                    <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" 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-outlined" style="--lui-micon-size: 12px;">
                          progress_activity
                        </i>
                      </div>
                    </button>
                  </span>
                </div>
              </div>
            </form>
          </div>
          <div class="lui-form_entry__label-wrapper pl-2" style="">
            <span class="lui-form_entry__label">Popover Template</span>
            <span class="lui-form_entry__required"></span>
            <div class="lui-form_entry__icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div data-controller="popover" data-popover-open-value="false" data-popover-rotate-toggle-value="false" class="lui-popover">
  <button popovertarget="popover-23cbd54e8820c046244c-target" data-controller="popover-toggle" data-popover-target="toggle" data-popover-toggle-position-value="bottom_left" data-popover-toggle-anchor-value="top_left" data-popover-toggle-on-close-value="" data-popover-toggle-rotate-value="false" type="button" class="lui-popover-toggle-wrapper">
    <span id="lui-token_6597424226" class="lui-token lui-entity-token lui-entity-token-general  " style="color: #212529;">
      <i class="lui-token__icon fa-regular fa-regular fa-smile"></i>
      <span class="lui-token__text">Bulbasaur</span>
      <div class="lui-token__actions">
      </div>
    </span>
  </button>  
  <div id="popover-23cbd54e8820c046244c-target" popover="auto" data-popover-target="popover" class="pointer-events-none w-full h-full bg-transparent overflow-hidden">
    <div class="bg-white lui-popover-inner absolute pointer-events-auto">
      <div class="lui-popover_template" data-controller="popover-template">
        <div class="lui-form_entry lui-form_entry--vertical">
          <div class="lui-form_entry__input">
            <form action="/pokemons/1/update_name" accept-charset="UTF-8" method="post"><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="sHRt-NMx1O6nS3WbxAmcGPJtEcAACaC01ilBDQzzgqRPqmIdSMajMx5x_hB_oR0yBHf5mmD-1sJ35XruGdVKqA" />
              <div class="lui-text relative">
                <div data-controller="input" data-input-open-actions-value="false" class="lui-inner-input relative flex gap-2"
   data-input-original-input-value="Bulbasaur"
    data-input-mode-value="autosubmit"
    data-input-form-value="#<ActionView::Helpers::FormBuilder:0x00007daef2da62d0>">
                  <div class="w-full flex flex-col">
                    <span class="lui-input ">
                      <input name="pokemon[name]" type="text" value="Bulbasaur" class="lui-input__input" mode="autosubmit" form="#<ActionView::Helpers::FormBuilder:0x00007daef2da62d0>" contentEditable="true" data-input-target="input" data-action="input->input#onChange change->input#onChange">
                      <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--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-outlined" style="--lui-micon-size: 12px;">
                          progress_activity
                        </i>
                      </div>
                    </button>
                    <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" 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-outlined" style="--lui-micon-size: 12px;">
                          progress_activity
                        </i>
                      </div>
                    </button>
                  </span>
                </div>
              </div>
            </form>
          </div>
          <div class="lui-form_entry__label-wrapper pl-2" style="">
            <span class="lui-form_entry__label">Popover Template</span>
            <span class="lui-form_entry__required"></span>
            <div class="lui-form_entry__icon">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

PopoverTemplate

A specialized popover component that combines an entity token as the toggle trigger with a form input in the popover content. Perfect for inline editing scenarios where space is limited.

Used Components Components where is Used
LooposUi::Popover Base popover functionality
LooposUi::Input Form input field
LooposUi::EntityToken Toggle trigger display
LooposUi::FormEntry Form layout and labeling

Usage rules

✅ Do

  • Use for inline editing of simple data fields
  • Provide a clear, descriptive title for the input
  • Use entity tokens that clearly represent the data being edited
  • Keep the input simple (text, number, select) - avoid complex form controls
  • Ensure the entity token text is concise and meaningful

❌ Don't

  • Use for complex forms with multiple fields
  • Use for critical data that requires validation before saving
  • Use when the popover content would be too large for the viewport
  • Use entity tokens with unclear or generic text
  • Use for data that doesn't benefit from inline editing

Examples

Basic Usage

<%= render LooposUi::PopoverTemplate.new(title: "Edit Name") do |popover_template| %>
  <% popover_template.with_input(model: user, attribute: :name) %>
  <% popover_template.with_entity_token do %>
    <%= render LooposUi::EntityToken.new(text: user.name, icon: "fa-regular fa-user") %>
  <% end %>
<% end %>

With Custom Input

<%= render LooposUi::PopoverTemplate.new(title: "Edit Status") do |popover_template| %>
  <% popover_template.with_input(name: "status", value: "active", placeholder: "Enter status") %>
  <% popover_template.with_entity_token do %>
    <%= render LooposUi::EntityToken.new(text: "Active", icon: "fa-solid fa-check") %>
  <% end %>
<% end %>
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
<%= render LooposUi::PopoverTemplate.new(title: "Popover Template") do |popover_template| %>
  <% popover_template.with_input do %>
    <%= form_with model: Pokemon.first, url: update_name_pokemon_path(Pokemon.first), method: :patch, local: true do |form| %>
      <%= render LooposUi::Inputs::Text.new(mode: :autosubmit, name: "pokemon[name]", value: "-", model: Pokemon.first, attribute: :name, form: form) %>
    <% end %>
  <% end %>
  <% popover_template.with_entity_token do %>
    <%= render(LooposUi::EntityToken.new(
        text: Pokemon.first.name,
        kind: :key_value,
        key_text: "Key",
    )) %>
    
  <% end %>
<% end %>
<%= render LooposUi::PopoverTemplate.new(title: "Popover Template") do |popover_template| %>
  <% popover_template.with_input do %>
    <%= form_with model: Pokemon.first, url: update_name_pokemon_path(Pokemon.first), method: :patch, local: true do |form| %>
      <%= render LooposUi::Inputs::Text.new(mode: :autosubmit, name: "pokemon[name]", value: "-", model: Pokemon.first, attribute: :name, form: form) %>
    <% end %>
  <% end %>
  <% popover_template.with_entity_token do %>
    <%= render LooposUi::EntityToken.new(text: Pokemon.first.name, icon: "fa-regular fa-smile") %>
  <% end %>
<% end %>

No notes provided.

No params configured.

Description

PopoverTemplate is a specialized popover component that combines an entity token as the toggle trigger with a form input in the popover content.

Arguments

Property Default Required Description
title - ✓ The label text displayed above the input field in the popover content

Slots

input - Form Input Slot

Renders a form input component within the popover content. Accepts parameters for the LooposUi::Input component.

entity_token - Toggle Trigger Slot

Renders an entity token component that serves as the popover toggle trigger.

JS Events

Inherits from Popover component:

  • Popover open/close events

Developer Requirements

Important: You must implement your own form and backend logic. The component only handles the frontend interaction - it automatically submits the form when clicking outside the popover, but you need to provide:

  • Your own form_with with proper action URL and method
  • Backend controller action to handle the form submission
  • Input field with class lui-input__input for proper functionality