maquina-components 0.7.3 → 0.7.4

data/app/javascript/controllers/date_picker_controller.js

@@ -24,7 +24,10 @@ export default class extends Controller {
     selectedEnd: String,
     format: { type: String, default: "long" },
     placeholder: String,
-    placeholderRange: String
+    placeholderRange: String,
+    // I18n date data from date_picker_locale_data: strftime patterns and
+    // localized names, so the display matches the server-rendered text
+    locale: Object
   }
 
   connect() {
@@ -188,22 +191,54 @@ export default class extends Controller {
   }
 
   /**
-   * Format date for display
+   * Format date for display, mirroring the server's date_picker_format:
+   * the locale's strftime pattern when there is one, Intl otherwise.
    */
   formatDate(dateStr, format = "long") {
     if (!dateStr) return ""
 
-    try {
-      const date = new Date(dateStr + "T00:00:00")
-      const options = format === "short"
-        ? { month: "short", day: "numeric", year: "numeric" }
-        : { weekday: "long", month: "long", day: "numeric", year: "numeric" }
+    const date = new Date(dateStr + "T00:00:00")
+    if (isNaN(date)) return dateStr
 
-      const locale = document.documentElement.lang || undefined
-      return date.toLocaleDateString(locale, options)
-    } catch {
-      return dateStr
-    }
+    const pattern = this.localeValue.formats?.[format === "short" ? "short" : "long"]
+    if (pattern) return this.strftime(date, pattern)
+
+    const options = format === "short"
+      ? { month: "short", day: "numeric", year: "numeric" }
+      : { month: "long", day: "numeric", year: "numeric" }
+
+    return date.toLocaleDateString(document.documentElement.lang || undefined, options)
+  }
+
+  /**
+   * The strftime subset Rails locale date formats use. "%-d" drops padding.
+   */
+  strftime(date, pattern) {
+    const locale = this.localeValue
+    const pad = (number, width = 2) => String(number).padStart(width, "0")
+
+    return pattern.replace(/%(-?)([a-zA-Z%])/g, (match, noPad, directive) => {
+      const padded = (number) => noPad ? String(number) : pad(number)
+
+      switch (directive) {
+        case "Y": return String(date.getFullYear())
+        case "y": return pad(date.getFullYear() % 100)
+        case "m": return padded(date.getMonth() + 1)
+        case "d": return padded(date.getDate())
+        case "e": return noPad ? String(date.getDate()) : String(date.getDate()).padStart(2, " ")
+        case "j": {
+          const start = new Date(date.getFullYear(), 0, 1)
+          const day = Math.round((date - start) / 86400000) + 1
+          return noPad ? String(day) : pad(day, 3)
+        }
+        case "B": return locale.month_names?.[date.getMonth() + 1] ?? match
+        case "b": return locale.abbr_month_names?.[date.getMonth() + 1] ?? match
+        case "A": return locale.day_names?.[date.getDay()] ?? match
+        case "a": return locale.abbr_day_names?.[date.getDay()] ?? match
+        case "%": return "%"
+        default: return match
+      }
+    })
   }
 
   /**
@@ -237,20 +272,21 @@ export default class extends Controller {
    * Clear the selection
    */
   clear() {
+    const calendarController = this.hasCalendarTarget &&
+      this.application.getControllerForElementAndIdentifier(this.calendarTarget, "calendar")
+
+    // The calendar's own calendar:change runs handleChange, which updates the
+    // inputs and display and dispatches date-picker:change exactly once
+    if (calendarController) {
+      calendarController.clear()
+      return
+    }
+
     this.selectedValue = ""
     this.selectedEndValue = ""
     this.updateInputs()
     this.updateDisplay()
 
-    // Also clear the calendar
-    if (this.hasCalendarTarget) {
-      const calendarController = this.application.getControllerForElementAndIdentifier(
-        this.calendarTarget,
-        "calendar"
-      )
-      calendarController?.clear()
-    }
-
     this.dispatch("change", {
       detail: { selected: null, selectedEnd: null }
     })

data/app/javascript/controllers/drawer_controller.js

@@ -20,7 +20,7 @@ export default class extends Controller {
     keyboardShortcut: { type: String, default: "d" }
   }
 
-  static targets = ["drawer", "container", "backdrop", "panel"]
+  static targets = ["drawer", "backdrop", "panel"]
 
   initialize() {
     const cookieValue = this.getCookie(this.cookieNameValue)
@@ -28,35 +28,60 @@ export default class extends Controller {
       ? cookieValue === "true"
       : this.defaultOpenValue
 
-    this._morphing = false
+    // Set by a same-URL "replace" visit (a page refresh) until it renders
+    this._refreshing = false
   }
 
   connect() {
-    this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
-    window.addEventListener("resize", this.resizeHandler)
-
+    this.boundTrackVisit = this.trackVisit.bind(this)
+    this.boundClearVisit = this.clearVisit.bind(this)
     this.boundTeardown = this.teardown.bind(this)
-    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundPreserveAttribute = this.preserveAttribute.bind(this)
     this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:visit", this.boundTrackVisit)
+    document.addEventListener("turbo:load", this.boundClearVisit)
     document.addEventListener("turbo:before-cache", this.boundTeardown)
-    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.addEventListener("turbo:morph", this.boundHandleMorph)
 
     this.updateStateImmediate()
   }
 
   disconnect() {
-    window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:visit", this.boundTrackVisit)
+    document.removeEventListener("turbo:load", this.boundClearVisit)
     document.removeEventListener("turbo:before-cache", this.boundTeardown)
-    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.removeEventListener("turbo:morph", this.boundHandleMorph)
   }
 
   // ============================================================================
-  // Turbo Cache Teardown
+  // Turbo Integration (cache teardown and page-refresh morphs)
   // ============================================================================
 
+  // A page refresh is a same-path "replace" visit -- Turbo's own isPageRefresh
+  // test. It covers Turbo.visit(location.href, { action: "replace" }), refresh
+  // broadcasts and same-URL form redirects. An open drawer must survive it.
+  trackVisit(event) {
+    const { url, action } = event.detail
+    this._refreshing = action === "replace" &&
+      new URL(url, window.location.href).pathname === window.location.pathname
+  }
+
+  clearVisit() {
+    this._refreshing = false
+  }
+
+  // Runs before Turbo snapshots the page: real navigation closes the drawer so
+  // the cached snapshot starts closed; a page refresh leaves it open. Either
+  // way the scroll lock is released so no snapshot is cached locked --
+  // handleMorph() re-locks after a refresh.
   teardown() {
+    if (this._refreshing) {
+      this.unlockScroll()
+      return
+    }
+
     this.openValue = false
 
     if (this.hasBackdropTarget) {
@@ -67,25 +92,34 @@ export default class extends Controller {
     this.unlockScroll()
   }
 
-  beforeMorphElement(event) {
-    if (event.target === this.element) {
-      this._morphing = true
+  // The morph must not overwrite the attributes this controller owns; the
+  // drawer's contents still morph normally.
+  preserveAttribute(event) {
+    const owned = this.ownedAttributes(event.target)
+    if (owned?.includes(event.detail.attributeName)) {
+      event.preventDefault()
     }
   }
 
-  handleMorph() {
-    const cookieValue = this.getCookie(this.cookieNameValue)
+  ownedAttributes(element) {
+    if (element === this.element) return ["data-drawer-open-value"]
+    if (this.hasDrawerTarget && element === this.drawerTarget) return ["data-state"]
+    if (this.hasBackdropTarget && element === this.backdropTarget) return ["data-state", "class"]
+    if (this.hasPanelTarget && element === this.panelTarget) return ["aria-hidden", "inert"]
+    return null
+  }
 
-    if (cookieValue !== null) {
-      this.openValue = cookieValue === "true"
-    }
+  // After a morph, keep the live state and re-apply what the morph can still
+  // reset: the body scroll lock (<body> is morphed) and the trigger's aria.
+  handleMorph() {
+    this._refreshing = false
 
     if (this.hasDrawerTarget) {
       this.drawerTarget.classList.remove("drawer-loading")
     }
 
     this.updateState()
-    this._morphing = false
+    this.dispatchStateChange()
   }
 
   // ============================================================================
@@ -108,7 +142,6 @@ export default class extends Controller {
 
   openValueChanged(new_value, old_value) {
     if (new_value === old_value) return
-    if (this._morphing) return
 
     this.updateState()
     this.persistState()
@@ -238,18 +271,26 @@ export default class extends Controller {
 
   // Styling lives in drawer.css (body[data-maquina-scroll-locked]); the
   // controller only records the scroll offset and flips the attribute
+  // Idempotent and owned: the offset is recorded once per lock (re-locking
+  // after a morph reset <body> must not record the locked page's offset of 0),
+  // and a closed drawer never releases a lock it didn't take -- the sidebar
+  // shares the same body attribute.
   lockScroll() {
-    this.scrollPosition = window.pageYOffset
+    if (!this._scrollLocked) {
+      this.scrollPosition = window.scrollY
+      this._scrollLocked = true
+    }
     document.body.style.setProperty("--maquina-scroll-lock-top", `-${this.scrollPosition}px`)
     document.body.setAttribute("data-maquina-scroll-locked", "")
   }
 
   unlockScroll() {
+    if (!this._scrollLocked) return
+
+    this._scrollLocked = false
     document.body.removeAttribute("data-maquina-scroll-locked")
     document.body.style.removeProperty("--maquina-scroll-lock-top")
-    if (this.scrollPosition !== undefined) {
-      window.scrollTo(0, this.scrollPosition)
-    }
+    window.scrollTo(0, this.scrollPosition)
   }
 
   // ============================================================================
@@ -265,23 +306,4 @@ export default class extends Controller {
       bubbles: true
     })
   }
-
-  // ============================================================================
-  // Utilities
-  // ============================================================================
-
-  checkScreenSize() {
-  }
-
-  debounce(func, wait) {
-    let timeout
-    return function executedFunction(...args) {
-      const later = () => {
-        clearTimeout(timeout)
-        func(...args)
-      }
-      clearTimeout(timeout)
-      timeout = setTimeout(later, wait)
-    }
-  }
-}
+}

data/app/javascript/controllers/drawer_trigger_controller.js

@@ -26,11 +26,24 @@ export default class extends Controller {
 
   connect() {
     this.handleStateChanged = this.handleStateChanged.bind(this)
+    this.preserveAttribute = this.preserveAttribute.bind(this)
     window.addEventListener("drawer:stateChanged", this.handleStateChanged)
+    this.element.addEventListener("turbo:before-morph-attribute", this.preserveAttribute)
   }
 
   disconnect() {
     window.removeEventListener("drawer:stateChanged", this.handleStateChanged)
+    this.element.removeEventListener("turbo:before-morph-attribute", this.preserveAttribute)
+  }
+
+  // The server never renders these (only the client knows the live state), so
+  // without this every page morph strips them from the trigger
+  preserveAttribute(event) {
+    if (event.target !== this.element) return
+
+    if (["aria-expanded", "aria-controls", "aria-haspopup"].includes(event.detail.attributeName)) {
+      event.preventDefault()
+    }
   }
 
   drawerOutletConnected(outlet) {

data/app/javascript/controllers/sidebar_controller.js

@@ -34,8 +34,8 @@ export default class extends Controller {
     // Track if we're on mobile
     this._isMobile = null
 
-    // Guard flag for morph-triggered attribute changes
-    this._morphing = false
+    // Set by a same-URL "replace" visit (a page refresh) until it renders
+    this._refreshing = false
   }
 
   connect() {
@@ -46,11 +46,15 @@ export default class extends Controller {
     this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
     window.addEventListener("resize", this.resizeHandler)
 
+    this.boundTrackVisit = this.trackVisit.bind(this)
+    this.boundClearVisit = this.clearVisit.bind(this)
     this.boundTeardown = this.teardown.bind(this)
-    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundPreserveAttribute = this.preserveAttribute.bind(this)
     this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:visit", this.boundTrackVisit)
+    document.addEventListener("turbo:load", this.boundClearVisit)
     document.addEventListener("turbo:before-cache", this.boundTeardown)
-    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.addEventListener("turbo:morph", this.boundHandleMorph)
 
     // Apply initial state without animation
@@ -59,16 +63,40 @@ export default class extends Controller {
 
   disconnect() {
     window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:visit", this.boundTrackVisit)
+    document.removeEventListener("turbo:load", this.boundClearVisit)
     document.removeEventListener("turbo:before-cache", this.boundTeardown)
-    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.removeEventListener("turbo:morph", this.boundHandleMorph)
   }
 
   // ============================================================================
-  // Turbo Cache Teardown
+  // Turbo Integration (cache teardown and page-refresh morphs)
   // ============================================================================
 
+  // A page refresh is a same-path "replace" visit -- Turbo's own isPageRefresh
+  // test. It covers Turbo.visit(location.href, { action: "replace" }), refresh
+  // broadcasts and same-URL form redirects. The open state must survive it.
+  trackVisit(event) {
+    const { url, action } = event.detail
+    this._refreshing = action === "replace" &&
+      new URL(url, window.location.href).pathname === window.location.pathname
+  }
+
+  clearVisit() {
+    this._refreshing = false
+  }
+
+  // Runs before Turbo snapshots the page. Real navigation parks the mobile
+  // drawer so the cached snapshot (and the next page) starts closed; a page
+  // refresh leaves it open. Either way the scroll lock is released so no
+  // snapshot is cached locked -- handleMorph() re-locks after a refresh.
   teardown() {
+    if (this._refreshing) {
+      this.unlockScroll()
+      return
+    }
+
     if (this.isMobile()) {
       this.openValue = false
     }
@@ -81,19 +109,35 @@ export default class extends Controller {
     this.unlockScroll()
   }
 
-  beforeMorphElement(event) {
-    if (event.target === this.element) {
-      this._morphing = true
+  // The server renders open state from the desktop cookie, which mobile never
+  // writes, so a morph must not overwrite the attributes this controller owns.
+  // The menu contents below them still morph normally.
+  preserveAttribute(event) {
+    const owned = this.ownedAttributes(event.target)
+    if (owned?.includes(event.detail.attributeName)) {
+      event.preventDefault()
     }
   }
 
+  ownedAttributes(element) {
+    if (element === this.element) return ["data-sidebar-open-value"]
+    if (this.hasSidebarTarget && element === this.sidebarTarget) return ["data-state", "data-collapsible"]
+    if (this.hasBackdropTarget && element === this.backdropTarget) return ["data-state", "class"]
+    if (this.hasContainerTarget && element === this.containerTarget) return ["inert"]
+    return null
+  }
+
+  // After a morph: keep the live state on mobile, re-read the cookie on
+  // desktop, then re-apply everything the morph can still reset -- the body
+  // scroll lock (<body> is morphed) and the trigger's aria-expanded.
   handleMorph() {
-    const cookieValue = this.getCookie(this.cookieNameValue)
+    this._refreshing = false
 
-    if (this.isMobile()) {
-      this.openValue = false
-    } else if (cookieValue !== null) {
-      this.openValue = cookieValue === "true"
+    if (!this.isMobile()) {
+      const cookieValue = this.getCookie(this.cookieNameValue)
+      if (cookieValue !== null) {
+        this.openValue = cookieValue === "true"
+      }
     }
 
     if (this.hasSidebarTarget) {
@@ -101,7 +145,7 @@ export default class extends Controller {
     }
 
     this.updateState()
-    this._morphing = false
+    this.dispatchStateChange()
   }
 
   // ============================================================================
@@ -123,7 +167,6 @@ export default class extends Controller {
 
   openValueChanged(new_value, old_value) {
     if (new_value === old_value) return
-    if (this._morphing) return
 
     this.updateState()
     this.persistState()
@@ -278,31 +321,23 @@ export default class extends Controller {
     }
   }
 
+  // data-collapsible describes the current state ("none" just means open), so
+  // only the direction of the crossing matters: entering mobile parks the
+  // drawer closed, leaving it restores the saved desktop state.
   handleScreenSizeChange(wasMobile, isMobile) {
-    if (this.sidebarTarget.getAttribute("data-collapsible") === "offcanvas") {
-      // Mobile to desktop: restore saved state
-      if (wasMobile && !isMobile) {
-        const cookieValue = this.getCookie(this.cookieNameValue)
-        this.openValue = cookieValue !== null
-          ? cookieValue === "true"
-          : this.defaultOpenValue
-      }
-      // Desktop to mobile: close sidebar
-      else if (!wasMobile && isMobile) {
-        this.openValue = false
-      }
-    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "icon") {
-      // Icon mode is always visible, just changes width
-      // Desktop to mobile: might want to close
-      if (!wasMobile && isMobile) {
-        this.openValue = false
-      }
-    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "none") {
-      // Non-collapsible sidebars stay open
-      this.openValue = true
+    if (wasMobile && !isMobile) {
+      const cookieValue = this.getCookie(this.cookieNameValue)
+      this.openValue = cookieValue !== null
+        ? cookieValue === "true"
+        : this.defaultOpenValue
+    } else if (!wasMobile && isMobile) {
+      this.openValue = false
     }
 
+    // Crossing the breakpoint without an open-state change still moves the
+    // drawer between offcanvas and icon rail, and drops a desktop scroll lock
     this.updateState()
+    if (!isMobile) this.unlockScroll()
   }
 
   isMobile() {
@@ -342,19 +377,26 @@ export default class extends Controller {
   // ============================================================================
 
   // Styling lives in drawer.css (body[data-maquina-scroll-locked]); the
-  // controller only records the scroll offset and flips the attribute
+  // controller only records the scroll offset and flips the attribute.
+  //
+  // Idempotent: the offset is recorded once per lock. Re-locking after a morph
+  // reset <body> must not record the locked page's offset of 0.
   lockScroll() {
-    this.scrollPosition = window.pageYOffset
+    if (!this._scrollLocked) {
+      this.scrollPosition = window.scrollY
+      this._scrollLocked = true
+    }
     document.body.style.setProperty("--maquina-scroll-lock-top", `-${this.scrollPosition}px`)
     document.body.setAttribute("data-maquina-scroll-locked", "")
   }
 
   unlockScroll() {
+    if (!this._scrollLocked) return
+
+    this._scrollLocked = false
     document.body.removeAttribute("data-maquina-scroll-locked")
     document.body.style.removeProperty("--maquina-scroll-lock-top")
-    if (this.scrollPosition !== undefined) {
-      window.scrollTo(0, this.scrollPosition)
-    }
+    window.scrollTo(0, this.scrollPosition)
   }
 
   // ============================================================================

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -21,11 +21,24 @@ export default class extends Controller {
 
   connect() {
     this.handleStateChanged = this.handleStateChanged.bind(this)
+    this.preserveAttribute = this.preserveAttribute.bind(this)
     window.addEventListener("sidebar:stateChanged", this.handleStateChanged)
+    this.element.addEventListener("turbo:before-morph-attribute", this.preserveAttribute)
   }
 
   disconnect() {
     window.removeEventListener("sidebar:stateChanged", this.handleStateChanged)
+    this.element.removeEventListener("turbo:before-morph-attribute", this.preserveAttribute)
+  }
+
+  // The server never renders these (only the client knows the live state), so
+  // without this every page morph strips them from the trigger
+  preserveAttribute(event) {
+    if (event.target !== this.element) return
+
+    if (["aria-expanded", "aria-controls"].includes(event.detail.attributeName)) {
+      event.preventDefault()
+    }
   }
 
   sidebarOutletConnected(outlet) {

data/app/javascript/controllers/toast_controller.js

@@ -101,9 +101,8 @@ export default class extends Controller {
   }
 
   handleAction(event) {
-    // If this toast was created via JS API with an action callback,
-    // the callback is stored on the toaster controller or needs to be
-    // dispatched as an event for the parent to handle
+    // Bubbles to the toaster, which runs the action.onClick given to the
+    // JS API, and on to any document-level `toast:action` listeners
     this.dispatch("action", {
       detail: { toastId: this.element.id },
       bubbles: true

data/app/javascript/controllers/toaster_controller.js

@@ -12,6 +12,7 @@ import { Controller } from "@hotwired/stimulus"
  *   Toast.info("New update available", { duration: 10000 })
  *   Toast.warning("Session expiring soon")
  *   Toast.show("Custom message", { variant: "default" })
+ *   Toast.show("Event created", { action: { label: "Undo", onClick: (event) => undo() } })
  *   Toast.dismiss(toastId)
  *   Toast.dismissAll()
  */
@@ -23,11 +24,18 @@ export default class extends Controller {
   }
 
   connect() {
+    // action.onClick callbacks, keyed by toast element
+    this.actionCallbacks = new WeakMap()
+    this.runActionCallback = this.runActionCallback.bind(this)
+    this.element.addEventListener("toast:action", this.runActionCallback)
+
     // Expose global Toast API
     this.setupGlobalApi()
   }
 
   disconnect() {
+    this.element.removeEventListener("toast:action", this.runActionCallback)
+
     // Clean up global API
     if (window.Toast && window.Toast._controller === this) {
       delete window.Toast
@@ -112,6 +120,10 @@ export default class extends Controller {
     // Insert into container
     this.element.insertAdjacentHTML("beforeend", toastHtml)
 
+    if (typeof action?.onClick === "function") {
+      this.actionCallbacks.set(document.getElementById(toastId), action.onClick)
+    }
+
     // Enforce max visible
     this.enforceMaxVisible()
 
@@ -163,7 +175,7 @@ export default class extends Controller {
            data-variant="${variant}"
            data-toast-duration-value="${duration}"
            data-toast-dismissible-value="${dismissible}"
-           data-toast-action-callback="${action ? "true" : "false"}"
+           data-toast-action-callback-value="${action ? "true" : "false"}"
            data-state="entering">
         ${iconHtml}
         <div data-toast-part="content">
@@ -176,6 +188,16 @@ export default class extends Controller {
     `.trim()
   }
 
+  /**
+   * Runs the action.onClick passed to the JS API when the toast's action
+   * button is clicked. The toast controller dispatches `toast:action`
+   * (bubbling) from the toast element; it still reaches document listeners.
+   */
+  runActionCallback(event) {
+    const callback = this.actionCallbacks.get(event.target)
+    if (callback) callback(event)
+  }
+
   getIconSvg(name) {
     const icons = {
       circle_check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',