maquina-components 0.7.3 → 0.8.0

data/app/javascript/controllers/calendar_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["day", "input", "inputEnd", "prevButton", "nextButton", "grid", "caption"]
+  static targets = ["day", "input", "inputEnd", "prevButton", "nextButton", "grid", "caption", "monthSelect", "yearSelect"]
 
   static values = {
     month: Number,
@@ -11,12 +11,45 @@ export default class extends Controller {
     minDate: String,
     maxDate: String,
     mode: { type: String, default: "single" },
-    weekStartsOn: { type: String, default: "sunday" }
+    weekStartsOn: { type: String, default: "sunday" },
+    disabledDates: Array,
+    showOutsideDays: { type: Boolean, default: true },
+    // Bounds of the caption's year select (caption_layout: :dropdown only)
+    startYear: Number,
+    endYear: Number
   }
 
   connect() {
     this.updateNavigationState()
     this.updateDayStates()
+
+    // Inside a popover (date picker or a caller's own), track which side of
+    // the trigger it opened on, so the header can sit next to the trigger
+    this.popover = this.element.closest("[popover]")
+    if (this.popover) {
+      this.boundUpdateSide = this.updateSide.bind(this)
+      this.popover.addEventListener("toggle", this.boundUpdateSide)
+    }
+  }
+
+  disconnect() {
+    this.popover?.removeEventListener("toggle", this.boundUpdateSide)
+  }
+
+  /**
+   * Sets data-side="top|bottom" when the popover is open. A popover flipped
+   * above its trigger is pinned at its bottom edge, so CSS moves the header
+   * there: month heights differ, and the arrows must not move under the cursor.
+   */
+  updateSide() {
+    if (!this.popover?.matches(":popover-open")) return
+
+    const trigger = this.popover.id &&
+      document.querySelector(`[popovertarget="${CSS.escape(this.popover.id)}"]`)
+    if (!trigger) return
+
+    const above = this.popover.getBoundingClientRect().top < trigger.getBoundingClientRect().top
+    this.element.dataset.side = above ? "top" : "bottom"
   }
 
   previousMonth() {
@@ -43,12 +76,38 @@ export default class extends Controller {
     this.navigateToMonth(newMonth, newYear)
   }
 
+  // Caption dropdowns (caption_layout: :dropdown)
+  selectMonth() {
+    this.navigateToMonth(Number(this.monthSelectTarget.value), this.yearValue)
+  }
+
+  selectYear() {
+    const year = Number(this.yearSelectTarget.value)
+    this.navigateToMonth(this.clampMonth(this.monthValue, year), year)
+  }
+
+  // A year change keeps the month, unless min/max date rule it out that year
+  clampMonth(month, year) {
+    const [minYear, minMonth] = (this.minDateValue || "").split("-").map(Number)
+    const [maxYear, maxMonth] = (this.maxDateValue || "").split("-").map(Number)
+
+    if (year === minYear && month < minMonth) return minMonth
+    if (year === maxYear && month > maxMonth) return maxMonth
+    return month
+  }
+
   navigateToMonth(month, year) {
+    // The year select lists only startYear..endYear; never show a month it can't
+    if ((this.hasStartYearValue && year < this.startYearValue) ||
+        (this.hasEndYearValue && year > this.endYearValue)) return
+
     this.monthValue = month
     this.yearValue = year
 
     this.rebuildCalendar()
+    this.syncDropdowns()
     this.updateNavigationState()
+    this.updateSide()
 
     this.dispatch("navigate", {
       detail: {
@@ -98,30 +157,35 @@ export default class extends Controller {
       weeks.push(week)
     }
 
-    // Parse dates for comparison
-    const selectedDate = this.selectedValue ? new Date(this.selectedValue) : null
-    const selectedEndDate = this.selectedEndValue ? new Date(this.selectedEndValue) : null
-    const minDate = this.minDateValue ? new Date(this.minDateValue) : null
-    const maxDate = this.maxDateValue ? new Date(this.maxDateValue) : null
-
     // Rebuild grid HTML
-    grid.innerHTML = weeks.map(week => this.buildWeekHTML(week, month, selectedDate, selectedEndDate, minDate, maxDate)).join('')
+    grid.innerHTML = weeks.map(week => this.buildWeekHTML(week, month)).join('')
   }
 
-  buildWeekHTML(days, displayMonth, selectedDate, selectedEndDate, minDate, maxDate) {
-    // Use string comparisons for range to avoid timezone issues
+  // Mirrors calendar/_week.html.erb. Dates compare as ISO strings, which sort
+  // lexicographically and avoid the UTC shift of new Date("YYYY-MM-DD").
+  buildWeekHTML(days, displayMonth) {
     const selectedStr = this.selectedValue || ""
     const selectedEndStr = this.selectedEndValue || ""
+    const minStr = this.minDateValue || ""
+    const maxStr = this.maxDateValue || ""
+    const disabledDates = new Set(this.disabledDatesValue)
 
     const daysHTML = days.map(day => {
       const dateStr = this.formatDate(day)
       const isOutside = day.getMonth() + 1 !== displayMonth
+
+      // A hidden outside day keeps its grid column
+      if (isOutside && !this.showOutsideDaysValue) {
+        return '<span aria-hidden="true" data-calendar-part="outside-day"></span>'
+      }
       const isToday = this.isSameDate(day, new Date())
       const isSelected = selectedStr && dateStr === selectedStr
       const isRangeEnd = selectedEndStr && dateStr === selectedEndStr
       // ISO date strings are lexicographically sortable
       const isRangeMiddle = selectedStr && selectedEndStr && dateStr > selectedStr && dateStr < selectedEndStr
-      const isDisabled = (minDate && day < minDate) || (maxDate && day > maxDate)
+      const isDisabled = (minStr && dateStr < minStr) ||
+                         (maxStr && dateStr > maxStr) ||
+                         disabledDates.has(dateStr)
 
       let dayState = null
       if (isSelected && this.modeValue === "range" && selectedEndStr) {
@@ -221,7 +285,8 @@ export default class extends Controller {
 
   handleKeydown(event) {
     const currentButton = event.currentTarget
-    const currentDate = new Date(currentButton.dataset.date)
+    // Local midnight: a bare "YYYY-MM-DD" parses as UTC and shifts a day west of it
+    const currentDate = new Date(currentButton.dataset.date + "T00:00:00")
     let targetDate = null
 
     switch (event.key) {
@@ -269,8 +334,9 @@ export default class extends Controller {
     const dateStr = this.formatDate(date)
     const targetButton = this.dayTargets.find(btn => btn.dataset.date === dateStr)
 
-    if (targetButton && !targetButton.disabled) {
-      targetButton.focus()
+    if (targetButton) {
+      // A disabled day in the visible month is not focusable; stay put
+      if (!targetButton.disabled) targetButton.focus()
     } else {
       this.navigateToMonth(date.getMonth() + 1, date.getFullYear())
       requestAnimationFrame(() => {
@@ -328,16 +394,40 @@ export default class extends Controller {
   }
 
   updateNavigationState() {
-    if (this.minDateValue && this.hasPrevButtonTarget) {
-      const minDate = new Date(this.minDateValue)
-      const firstOfMonth = new Date(this.yearValue, this.monthValue - 1, 1)
-      this.prevButtonTarget.disabled = firstOfMonth <= minDate
+    const firstOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue - 1, 1))
+    const lastOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue, 0))
+
+    if (this.hasPrevButtonTarget) {
+      this.prevButtonTarget.disabled = Boolean(
+        (this.minDateValue && firstOfMonth <= this.minDateValue) ||
+        (this.hasStartYearValue && this.monthValue === 1 && this.yearValue <= this.startYearValue)
+      )
     }
 
-    if (this.maxDateValue && this.hasNextButtonTarget) {
-      const maxDate = new Date(this.maxDateValue)
-      const lastOfMonth = new Date(this.yearValue, this.monthValue, 0)
-      this.nextButtonTarget.disabled = lastOfMonth >= maxDate
+    if (this.hasNextButtonTarget) {
+      this.nextButtonTarget.disabled = Boolean(
+        (this.maxDateValue && lastOfMonth >= this.maxDateValue) ||
+        (this.hasEndYearValue && this.monthValue === 12 && this.yearValue >= this.endYearValue)
+      )
+    }
+  }
+
+  // Mirrors calendar_month_options: a month wholly outside min/max is disabled
+  syncDropdowns() {
+    if (this.hasMonthSelectTarget) {
+      for (const option of this.monthSelectTarget.options) {
+        const month = Number(option.value)
+        const first = this.formatDate(new Date(this.yearValue, month - 1, 1))
+        const last = this.formatDate(new Date(this.yearValue, month, 0))
+
+        option.disabled = Boolean((this.minDateValue && last < this.minDateValue) ||
+          (this.maxDateValue && first > this.maxDateValue))
+      }
+      this.monthSelectTarget.value = String(this.monthValue)
+    }
+
+    if (this.hasYearSelectTarget) {
+      this.yearSelectTarget.value = String(this.yearValue)
     }
   }
 
@@ -348,12 +438,8 @@ export default class extends Controller {
       selectedEnd: this.selectedEndValue || null
     }
 
+    // Stimulus dispatches a bubbling "calendar:change" — once
     this.dispatch("change", { detail })
-
-    this.element.dispatchEvent(new CustomEvent("calendar:change", {
-      bubbles: true,
-      detail
-    }))
   }
 
   formatDate(date) {

data/app/javascript/controllers/combobox_controller.js

@@ -9,9 +9,10 @@ import { Controller } from "@hotwired/stimulus"
  * - Single selection with toggle
  * - Keyboard navigation
  * - Focus management
+ * - Form submission through a hidden input (rendered when `name:` is given)
  */
 export default class extends Controller {
-  static targets = ["trigger", "content", "input", "option", "empty", "label"]
+  static targets = ["trigger", "content", "input", "option", "empty", "label", "hiddenInput"]
 
   static values = {
     value: { type: String, default: "" },
@@ -171,6 +172,9 @@ export default class extends Controller {
 
     this.updateSelection()
     this.updateTriggerState()
+    // valueValueChanged runs later (attribute observer); write the input now so
+    // it is current when combobox:change fires
+    this.updateHiddenInput()
 
     // Close popover
     if (this.hasContentTarget) {
@@ -326,9 +330,20 @@ export default class extends Controller {
     }
   }
 
-  // Value change callback
+  // Value change callback: also covers a programmatic
+  // data-combobox-value-value write
   valueValueChanged() {
     this.updateSelection()
     this.updateTriggerState()
+    this.updateHiddenInput()
+  }
+
+  updateHiddenInput() {
+    if (!this.hasHiddenInputTarget) return
+    if (this.hiddenInputTarget.value === this.valueValue) return
+
+    this.hiddenInputTarget.value = this.valueValue
+    // Let form listeners (autosave, validation) see the new value
+    this.hiddenInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
   }
 }

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) {