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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<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; background-color: #F8F9FA;">
      <span class="lui-token__key-text">Key: </span>
      <span class="lui-token__text">Bulbasaur</span>
    </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" autocomplete="off" /><input type="hidden" name="authenticity_token" value="gcUTmXsn2Uu7xlWyUuEQtjwZJtl0biqCEgAoYNtUbPkjoyx4xVxLgDO2ooJ_4BksJegpUVloeieP2Nxw9FDSGA" autocomplete="off" />
              <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:0x00007f1c0b337a88>">
                  <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" 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--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>
          </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; background-color: #F8F9FA;">
      <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" autocomplete="off" /><input type="hidden" name="authenticity_token" value="3E9dwcdNgsixVsGM9gDDzXve7rS7TCuUKFLAD7kqVr1-KWIgeTYQAzkmNrzbAcpXYi_hPJZKezG1ijQfli7oXA" autocomplete="off" />
              <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:0x00007f1c096dc960>">
                  <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" 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--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>
          </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