lato_cms 3.0.12 → 3.0.13

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6fd8416ab840a11e364752d13f21440d8282862df78e4b4b67ef8f69432aa56b
-  data.tar.gz: 544411ddd79120e75f9f3df5cf7136d9d0d940cd3ba15abb0720fbf95ec368f7
+  metadata.gz: d1b3de7e40dab4ee5574179d52307473705c2b084aa7a2a76d03dcd0fb0f3cef
+  data.tar.gz: 70cfbb74343f62265a02f93d8998d92995b8332f8bc16e9671b3ab4af63ef70b
 SHA512:
-  metadata.gz: b0d6f6b71abf13818513d8921e6daa52254ea32209d9b0a44ff3b25f3d3d1e83e4dc90e262eeefba8f9ac08a7fe5bf65d518f6a3c638dfabcdfb072b238ba28d
-  data.tar.gz: f899bc4fbe56254e67359839b79a29598ba0507d05704d7e8cb8cded33f0675f3499bb6aac33666b0b4f2b5eae8f18614e3b3b0f2f0c68fb00c4b22f136af7ba
+  metadata.gz: '054983638f6a1454267a5d7eed3574152eac784a03ff1905c357a42bcd3fa5a3093b4591a8308008925f2b1612e7eb2eeccf2b58916a6080550156bc1414540d'
+  data.tar.gz: 1767c5b3550717035094aa78c755bc8b0531cbec89d430421334c91e9fe2b96b9d0c9b9c5735e52fdd582906b82846d55cce21002b7ec32ad8de6aaac034a415

data/app/assets/javascripts/lato_cms/controllers/lato_cms_repeater_controller.js

@@ -6,6 +6,44 @@ export default class extends Controller {
 
   connect () {
     this.refresh()
+
+    // Native validation skips hidden inputs: expand the item hosting an invalid
+    // field so the browser can focus it and show the error message.
+    this.onInvalid = (event) => this.expandItemFor(event.target)
+    this.element.addEventListener('invalid', this.onInvalid, true)
+  }
+
+  disconnect () {
+    this.element.removeEventListener('invalid', this.onInvalid, true)
+  }
+
+  expandItemFor (field) {
+    const item = field.closest('[data-lato-cms-repeater-target="item"]')
+    if (!item) return
+
+    this.collapseOthers(item)
+    this.setItemExpanded(item, true)
+  }
+
+  // Close every item except the given one (single-open accordion invariant).
+  collapseOthers (item) {
+    this.itemTargets.forEach((other) => {
+      if (other !== item) this.setItemExpanded(other, false)
+    })
+  }
+
+  // Bootstrap reads open state from the 'show' class, so toggling classes
+  // directly stays in sync with its lazily-created Collapse instances.
+  setItemExpanded (item, expanded) {
+    const collapse = item.querySelector('.collapse')
+    if (!collapse || collapse.classList.contains('show') === expanded) return
+
+    collapse.classList.toggle('show', expanded)
+    const toggle = item.querySelector('[data-bs-toggle="collapse"]')
+    if (toggle) {
+      toggle.classList.toggle('collapsed', !expanded)
+      toggle.setAttribute('aria-expanded', expanded.toString())
+    }
   }
 
   add () {
@@ -18,6 +56,8 @@ export default class extends Controller {
       .replaceAll('NEW_INDEX', this.itemTargets.length.toString())
 
     this.itemsTarget.insertAdjacentHTML('beforeend', html)
+    // The new item is rendered expanded: enforce single-open accordion behavior.
+    this.collapseOthers(this.itemTargets[this.itemTargets.length - 1])
     this.refresh()
   }
 

data/app/assets/stylesheets/lato_cms/application.scss

@@ -400,6 +400,19 @@ body.controller-pages.action-show {
   top: 4px;
 }
 
+// ── Repeater items ─────────────────────────────────────────────────────────────
+
+.lato-cms-repeater-item__toggle {
+  .bi-chevron-down {
+    display: inline-block;
+    transition: transform 0.2s ease;
+  }
+
+  &.collapsed .bi-chevron-down {
+    transform: rotate(-90deg);
+  }
+}
+
 .controller-pages-show {
   .accordion-button {
     font-weight: 500;

data/app/views/lato_cms/pages/_repeater.html.erb

@@ -7,18 +7,25 @@
 <%# Seed `min` empty items when the list is empty, so the minimum is met up front. %>
 <% item_ids = Array.new(min) { SecureRandom.uuid } if item_ids.blank? && min.positive? %>
 
+<%# Accordion behavior (one item open at a time) hangs off the items container id. %>
+<% items_container_id = "repeater-items-#{tc[:template_component_id]}" %>
+<%# Expand only the first empty item: saved items start collapsed. %>
+<% first_empty_id = item_ids.find { |id| fields_by_item[id].blank? } %>
+
 <div data-controller="lato-cms-repeater"
      data-lato-cms-repeater-min-value="<%= min %>"
      data-lato-cms-repeater-max-value="<%= max %>">
-  <div data-lato-cms-repeater-target="items">
+  <div id="<%= items_container_id %>" data-lato-cms-repeater-target="items">
     <% item_ids.each_with_index do |item_id, item_index| %>
       <% item_fields = (fields_by_item[item_id] || []).index_by(&:base_field_id) %>
-      <%= render 'lato_cms/pages/repeater_item', tc: tc, item_id: item_id, item_index: item_index, item_fields: item_fields %>
+      <%= render 'lato_cms/pages/repeater_item', tc: tc, item_id: item_id, item_index: item_index, item_fields: item_fields,
+          parent_id: items_container_id, expanded: item_id == first_empty_id %>
     <% end %>
   </div>
 
   <template data-lato-cms-repeater-target="template">
-    <%= render 'lato_cms/pages/repeater_item', tc: tc, item_id: 'NEW_RECORD', item_index: 'NEW_INDEX', item_fields: {} %>
+    <%= render 'lato_cms/pages/repeater_item', tc: tc, item_id: 'NEW_RECORD', item_index: 'NEW_INDEX', item_fields: {},
+        parent_id: items_container_id, expanded: true %>
   </template>
 
   <button type="button" class="btn btn-sm btn-outline-primary" data-action="lato-cms-repeater#add" data-lato-cms-repeater-target="addButton">

data/app/views/lato_cms/pages/_repeater_item.html.erb

@@ -1,28 +1,36 @@
+<% collapse_id = "repeater-collapse-#{item_id}" %>
+
 <div class="card mb-3" data-lato-cms-repeater-target="item" data-repeater-item-id="<%= item_id %>">
   <input type="hidden" name="repeater_order[]" value="<%= item_id %>" data-lato-cms-repeater-target="orderInput">
 
-  <div class="card-header d-flex justify-content-between align-items-center py-2">
-    <strong class="small"><%= tc[:name] %> #<span data-lato-cms-repeater-target="position"><%= item_index.to_i + 1 %></span></strong>
-    <button type="button" class="btn btn-sm btn-outline-danger" data-action="lato-cms-repeater#remove">
+  <div class="card-header d-flex justify-content-between align-items-center gap-2 py-2">
+    <button type="button" class="lato-cms-repeater-item__toggle btn btn-link p-0 flex-grow-1 text-start text-decoration-none text-body <%= 'collapsed' unless expanded %>"
+        data-bs-toggle="collapse" data-bs-target="#<%= collapse_id %>" aria-expanded="<%= expanded %>" aria-controls="<%= collapse_id %>">
+      <i class="bi bi-chevron-down me-2 small"></i>
+      <strong class="small"><%= tc[:name] %> #<span data-lato-cms-repeater-target="position"><%= item_index.to_i + 1 %></span></strong>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger flex-shrink-0" data-action="lato-cms-repeater#remove">
       <i class="bi bi-trash me-1"></i><%= t('lato_cms.repeater_remove_item') %>
     </button>
   </div>
 
-  <div class="card-body pb-2">
-    <% tc[:fields].each do |field_id, field_config| %>
-      <% page_field = item_fields[field_id.to_s] %>
-      <% input_name_prefix = "repeater_items[#{item_id}][#{field_id}]" %>
-      <% dom_id_prefix = "repeater_items_#{item_id}_#{field_id}" %>
+  <div id="<%= collapse_id %>" class="collapse <%= 'show' if expanded %>" data-bs-parent="#<%= parent_id %>">
+    <div class="card-body pb-2">
+      <% tc[:fields].each do |field_id, field_config| %>
+        <% page_field = item_fields[field_id.to_s] %>
+        <% input_name_prefix = "repeater_items[#{item_id}][#{field_id}]" %>
+        <% dom_id_prefix = "repeater_items_#{item_id}_#{field_id}" %>
 
-      <div class="mb-3">
-        <%= lato_cms_render_field(
-            field_id: field_id,
-            field_config: field_config,
-            page_field: page_field,
-            input_name_prefix: input_name_prefix,
-            dom_id_prefix: dom_id_prefix
-          ) %>
-      </div>
-    <% end %>
+        <div class="mb-3">
+          <%= lato_cms_render_field(
+              field_id: field_id,
+              field_config: field_config,
+              page_field: page_field,
+              input_name_prefix: input_name_prefix,
+              dom_id_prefix: dom_id_prefix
+            ) %>
+        </div>
+      <% end %>
+    </div>
   </div>
 </div>

data/lib/lato_cms/version.rb

@@ -1,3 +1,3 @@
 module LatoCms
-  VERSION = "3.0.12"
+  VERSION = "3.0.13"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: lato_cms
 version: !ruby/object:Gem::Version
-  version: 3.0.12
+  version: 3.0.13
 platform: ruby
 authors:
 - Gregorio Galante