maquina-components 0.3.1.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b851df46a3afd618bc81e81319613ac295fb6b09fa5b68a3579f1508d3a07bda
-  data.tar.gz: e90010af3a12f9ffd8930201bc5b07a697cafa10da533e4ffeaa546bca8d6ec9
+  metadata.gz: 5a1e90929a51b6023b0884911c00d7168804740389aa4b22594923f8ccf223c7
+  data.tar.gz: da1376c62eab19ac2145795de7bed3711ed4452574fd76c8659eedec5b933450
 SHA512:
-  metadata.gz: 023b264cbe15f2d62aa508a35dc3919827130f1382e795b02a31afdf4c7160218f2f784eaf3c6521f75fce9ab5f3e7a0068b4b6064e9fe28a321b4d105955533
-  data.tar.gz: 48606389939ad53c12e519e5d9d95b316cf083b492646c992c5a713eee5de1919fe218a860975350980619c2aba836d364ee10db32cccd75113045f159cdd5f3
+  metadata.gz: b2db7a9538eb06ae5b236cf02aabb77818a772a6df372ae439f64723615a68d9b4f4aa44c612c1e91c199758dddb4064d76bdaa1d616fcd64d48fcb68ec9e89e
+  data.tar.gz: 524381d71a7fdeb252e1ebd7e0627386e248c58da9abdcde5be359e0d2d65f3ae86eb6e19db953c2147a1e35aa4d4bf4fd345179120388136704740814aea68e

data/app/assets/stylesheets/sidebar.css

@@ -23,6 +23,18 @@
   transition: none !important;
 }
 
+/* Prevent layout shift before Stimulus initializes.
+   The server renders collapsible="offcanvas" (gap=0) but JS immediately
+   sets collapsible="none" (gap=sidebar-width) for expanded desktop sidebars.
+   This rule keeps the gap at the correct width during loading so the main
+   content doesn't jump from left to right. Desktop-only — on mobile JS
+   forces the sidebar closed and the gap should stay at 0. */
+@media (min-width: 768px) {
+  [data-sidebar-part="root"].sidebar-loading[data-state="expanded"] [data-sidebar-part="gap"] {
+    width: var(--sidebar-width);
+  }
+}
+
 /* ===== Sidebar Gap (creates space on desktop) ===== */
 [data-sidebar-part="gap"] {
   @apply relative bg-transparent;

data/app/helpers/maquina_components/toast_helper.rb

@@ -15,9 +15,9 @@ module MaquinaComponents
   #   <%= toast :error, "Save failed", description: "Please check your connection." %>
   #
   # @example Toast with action
-  #   <%= toast :info, "New version available" do %>
+  #   <%= toast :info, "New version available", content: capture { %>
   #     <%= render "components/toast/action", label: "Refresh", href: root_path %>
-  #   <% end %>
+  #   <% } %>
   #
   module ToastHelper
     # Flash type to toast variant mapping
@@ -55,15 +55,14 @@ module MaquinaComponents
     # @param title [String] Toast title
     # @param description [String, nil] Optional description
     # @param options [Hash] Additional options passed to the toast partial
-    # @yield Optional block for custom content (e.g., action button)
+    # @param content [String, nil] HTML content via `capture` (e.g., action button)
     # @return [String] HTML-safe toast element
-    def toast(variant, title, description: nil, **options, &block)
+    def toast(variant, title, description: nil, **options)
       render "components/toast",
         variant: variant,
         title: title,
         description: description,
-        **options,
-        &block
+        **options
     end
 
     # Render a success toast
@@ -71,8 +70,8 @@ module MaquinaComponents
     # @param title [String] Toast title
     # @param options [Hash] Additional options
     # @return [String] HTML-safe toast element
-    def toast_success(title, **options, &block)
-      toast(:success, title, **options, &block)
+    def toast_success(title, **options)
+      toast(:success, title, **options)
     end
 
     # Render an error toast
@@ -80,8 +79,8 @@ module MaquinaComponents
     # @param title [String] Toast title
     # @param options [Hash] Additional options
     # @return [String] HTML-safe toast element
-    def toast_error(title, **options, &block)
-      toast(:error, title, **options, &block)
+    def toast_error(title, **options)
+      toast(:error, title, **options)
     end
 
     # Render a warning toast
@@ -89,8 +88,8 @@ module MaquinaComponents
     # @param title [String] Toast title
     # @param options [Hash] Additional options
     # @return [String] HTML-safe toast element
-    def toast_warning(title, **options, &block)
-      toast(:warning, title, **options, &block)
+    def toast_warning(title, **options)
+      toast(:warning, title, **options)
     end
 
     # Render an info toast
@@ -98,8 +97,8 @@ module MaquinaComponents
     # @param title [String] Toast title
     # @param options [Hash] Additional options
     # @return [String] HTML-safe toast element
-    def toast_info(title, **options, &block)
-      toast(:info, title, **options, &block)
+    def toast_info(title, **options)
+      toast(:info, title, **options)
     end
 
     private

data/app/javascript/controllers/date_picker_controller.js

@@ -28,12 +28,35 @@ export default class extends Controller {
   }
 
   connect() {
+    this.boundTeardown = this.teardown.bind(this)
+
     this.setupPopoverEvents()
     this.updateDisplay()
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
   }
 
   disconnect() {
     this.teardownPopoverEvents()
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
+  }
+
+  /**
+   * Reset to closed state before Turbo caches the page
+   */
+  teardown() {
+    if (this.hasPopoverTarget) {
+      try {
+        if (this.popoverTarget.matches(":popover-open")) {
+          this.popoverTarget.hidePopover()
+        }
+      } catch {
+        // Popover API not supported
+      }
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false")
+    }
   }
 
   /**

data/app/javascript/controllers/dropdown_menu_controller.js

@@ -15,19 +15,25 @@ export default class extends Controller {
   static targets = ["trigger", "content", "chevron"]
 
   static values = {
-    open: { type: Boolean, default: false }
+    open: { type: Boolean, default: false },
+    autoClose: { type: Boolean, default: false }
   }
 
   connect() {
     this.handleClickOutside = this.handleClickOutside.bind(this)
     this.handleKeydown = this.handleKeydown.bind(this)
+    this.boundTeardown = this.teardown.bind(this)
 
     // Set initial state on root element
     this.element.dataset.state = "closed"
+    this.element.addEventListener("click", this.handleItemClick)
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
   }
 
   disconnect() {
     this.removeEventListeners()
+    this.element.removeEventListener("click", this.handleItemClick)
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
   }
 
   toggle(event) {
@@ -71,7 +77,8 @@ export default class extends Controller {
     // Wait for animation to complete
     const animationDuration = 100 // matches CSS animation duration
 
-    setTimeout(() => {
+    this._closeTimeout = setTimeout(() => {
+      this._closeTimeout = null
       this.openValue = false
       this.element.dataset.state = "closed"
       this.contentTarget.dataset.state = "closed"
@@ -92,6 +99,39 @@ export default class extends Controller {
     }, animationDuration)
   }
 
+  // Turbo Cache Teardown
+
+  teardown() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout)
+      this._closeTimeout = null
+    }
+
+    this.openValue = false
+    this.element.dataset.state = "closed"
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      this.contentTarget.hidden = true
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false")
+    }
+
+    this.removeEventListeners()
+  }
+
+  handleItemClick = (event) => {
+    if (!this.autoCloseValue || !this.openValue) return
+
+    const item = event.target.closest('[data-dropdown-menu-part="item"]')
+    if (!item) return
+    if (item.disabled || item.getAttribute("aria-disabled") === "true") return
+
+    this.teardown()
+  }
+
   // Event Handlers
 
   handleClickOutside(event) {

data/app/javascript/controllers/sidebar_controller.js

@@ -33,6 +33,9 @@ export default class extends Controller {
 
     // Track if we're on mobile
     this._isMobile = null
+
+    // Guard flag for morph-triggered attribute changes
+    this._morphing = false
   }
 
   connect() {
@@ -43,12 +46,62 @@ export default class extends Controller {
     this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
     window.addEventListener("resize", this.resizeHandler)
 
+    this.boundTeardown = this.teardown.bind(this)
+    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
+    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:morph", this.boundHandleMorph)
+
     // Apply initial state without animation
     this.updateStateImmediate()
   }
 
   disconnect() {
     window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
+    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:morph", this.boundHandleMorph)
+  }
+
+  // ============================================================================
+  // Turbo Cache Teardown
+  // ============================================================================
+
+  teardown() {
+    if (this.isMobile()) {
+      this.openValue = false
+    }
+
+    if (this.hasBackdropTarget) {
+      this.backdropTarget.setAttribute("data-state", "hidden")
+      this.backdropTarget.classList.add("hidden")
+    }
+
+    this.unlockScroll()
+  }
+
+  beforeMorphElement(event) {
+    if (event.target === this.element) {
+      this._morphing = true
+    }
+  }
+
+  handleMorph() {
+    const cookieValue = this.getCookie(this.cookieNameValue)
+
+    if (this.isMobile()) {
+      this.openValue = false
+    } else if (cookieValue !== null) {
+      this.openValue = cookieValue === "true"
+    }
+
+    if (this.hasSidebarTarget) {
+      this.sidebarTarget.classList.remove("sidebar-loading")
+    }
+
+    this.updateState()
+    this._morphing = false
   }
 
   // ============================================================================
@@ -70,6 +123,7 @@ export default class extends Controller {
 
   openValueChanged(new_value, old_value) {
     if (new_value === old_value) return
+    if (this._morphing) return
 
     this.updateState()
     this.persistState()

data/app/views/components/_dropdown_menu.html.erb

@@ -1,8 +1,9 @@
-<%# locals: (css_classes: "", **html_options) %>
+<%# locals: (auto_close: false, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     component: "dropdown-menu",
     controller: "dropdown-menu"
   ) %>
+<% merged_data["dropdown-menu-auto-close-value"] = true if auto_close %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>

data/app/views/components/_sidebar.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (id: nil, state: :collapsed, collapsible: :offcanvas, variant: :inset, side: :left, css_classes: "", **html_options) %>
-<% random_id = id || "sidebar-#{SecureRandom.hex(6)}"
+<% stable_id = id || "sidebar-#{side}"
   
   merged_data = (html_options.delete(:data) || {}).merge(
     sidebar_part: :root,
@@ -11,16 +11,16 @@
   ) %>
 
 <aside
-  id="<%= random_id %>"
+  id="<%= stable_id %>"
   class="group peer sidebar-loading <%= css_classes %>"
   <%= tag.attributes(data: merged_data, **html_options) %>
 >
   <%# Sidebar gap (creates space for sidebar on desktop) %>
-  <div id="<%= random_id %>-gap" data-sidebar-part="gap"></div>
+  <div id="<%= stable_id %>-gap" data-sidebar-part="gap"></div>
 
   <%# Mobile backdrop overlay %>
   <div
-    id="<%= random_id %>-overlay"
+    id="<%= stable_id %>-overlay"
     data-sidebar-part="backdrop"
     data-sidebar-target="backdrop"
     data-action="click->sidebar#backdropClick"
@@ -28,12 +28,12 @@
 
   <%# Sidebar container (fixed positioned) %>
   <div
-    id="<%= random_id %>-container"
+    id="<%= stable_id %>-container"
     data-sidebar-part="container"
     data-sidebar-target="container"
   >
     <%# Inner sidebar content wrapper %>
-    <div id="<%= random_id %>-inner" data-sidebar-part="inner">
+    <div id="<%= stable_id %>-inner" data-sidebar-part="inner">
       <%= yield %>
     </div>
   </div>

data/app/views/components/_toast.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (variant: :default, title: nil, description: nil, icon: nil, duration: 5000, dismissible: true, css_classes: "", **html_options) %>
+<%# locals: (variant: :default, title: nil, description: nil, icon: nil, duration: 5000, dismissible: true, content: nil, css_classes: "", **html_options) %>
 <%
   # Auto-select icon based on variant if not provided
   default_icons = {
@@ -39,7 +39,7 @@
       <%= render "components/toast/description", text: description %>
     <% end %>
 
-    <%= yield if block_given? %>
+    <%= content if content %>
   </div>
 
   <% if dismissible %>

data/app/views/components/_toaster.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (position: :bottom_right, css_classes: "", **html_options) %>
+<%# locals: (position: :bottom_right, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     component: :toaster,
     controller: "toaster",
@@ -13,5 +13,5 @@
       class: css_classes.presence,
       data: merged_data,
       **html_options do %>
-  <%= yield if block_given? %>
+  <%= content if content %>
 <% end %>

data/app/views/components/alert/_description.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :description) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/alert/_title.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :title) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/card/_description.html.erb

@@ -1,6 +1,6 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(card_part: :description) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/card/_title.html.erb

@@ -1,9 +1,9 @@
-<%# locals: (text: nil, size: :default, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, size: :default, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     card_part: :title,
     size: (size == :sm ? :sm : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/combobox/_label.html.erb

@@ -1,8 +1,8 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     combobox_part: "label"
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/sidebar/_provider.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (default_open: true, variant: :inset, css_classes: "", cookie_name: "sidebar_state", keyboard_shortcut: "b", **html_options) %>
+<%# locals: (id: nil, default_open: true, variant: :inset, css_classes: "", cookie_name: "sidebar_state", keyboard_shortcut: "b", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     component: :sidebar,
     variant: variant,
@@ -11,6 +11,6 @@
     action: "keydown.meta+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->sidebar#toggleWithKeyboard"
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, id: id || "sidebar-provider", class: css_classes, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/toast/_description.html.erb

@@ -1,8 +1,8 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     toast_part: "description"
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/app/views/components/toast/_title.html.erb

@@ -1,8 +1,8 @@
-<%# locals: (text: nil, css_classes: "", **html_options) %>
+<%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
 <% merged_data = (html_options.delete(:data) || {}).merge(
     toast_part: "title"
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
-  <%= text || yield %>
+  <%= text || content %>
 <% end %>

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.3.1.1"
+  VERSION = "0.4.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: maquina-components
 version: !ruby/object:Gem::Version
-  version: 0.3.1.1
+  version: 0.4.0
 platform: ruby
 authors:
 - Mario Alberto Chávez