maquina-components 0.7.4 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f12b51321ecf3ce0e3c1372bab8dec0770be3fc69f66ac68384f8980994d1018
-  data.tar.gz: 6b24d430d5014890dc45a78cf2b13e5ef1d4b8991732b59b0002c40d8f7f598d
+  metadata.gz: 95885780d4ac7c947e4561e821d4c3cb2f985a3a363738f7cdc7fc01a858fc11
+  data.tar.gz: 35100ad72833ef5be786a40444f5af15c37866d0dc8dce4dee34232f04bfe0a5
 SHA512:
-  metadata.gz: c64b09b67ffc2f10d85e7870edfa538c11171e210abf0381b1ac8f7e481771e83f24327317bb2208795fdd675dd8133ae58557c7eba17913f5d6f7fcd5cd176c
-  data.tar.gz: 2d66b6f096c3cfc5854e4fff1daea50f4f7f2dfe9b640db6f849cda507ae449f6ccf7a37b9b0f2a2724d3a72e5f8859575072a4ce35284a3f93a82c5f13b7fea
+  metadata.gz: b1e7d220b352af1cd2e9fabf11902165c2d7d958608ea504f0b6a896fef336c3c8cd1e556090ab2db7dfa54c8812249fc5611c1a19820701c37c015c15b82a10
+  data.tar.gz: 347641b6a36dac6f72f9344e8e6af0a81f0c80bf29dd1ce022e20db9a295db2141d540eb16d41cea92fc19f4a59345438712f9b958c802b3cc1f109bd2d5abbb

data/app/assets/stylesheets/calendar.css

@@ -7,15 +7,24 @@
  * Structure:
  * - calendar (root container)
  *   - header (navigation)
+ *     - caption, or with caption_layout: :dropdown
+ *       dropdowns > month-select, year-select (native [data-component="select"])
  *   - weekdays (day name headers)
  *   - grid (day buttons grid)
  *     - week (row)
  *       - day (button)
+ *   - footer (optional, the partial's block)
+ *
+ * Inside a popover the controller sets data-side="top|bottom" on the root.
+ * Flipped above its trigger, a popover is pinned at its bottom edge while
+ * months change height (4-6 weeks), so [data-side="top"] moves the header
+ * last — next to the trigger, where the arrows stay put.
  *
  * Cascade order in this file (full contract documented in form.css):
  *   1. base      [data-component="calendar"], [data-calendar-part="…"]
  *   2. sizes     — none (cell metrics come from --cell-size)
- *   3. variants  [data-calendar-part="day"]:where([data-today], [data-state="…"], [data-outside])
+ *   3. variants  [data-calendar-part="day"]:where([data-today], [data-state="…"], [data-outside]),
+ *                [data-component="calendar"]:where([data-side="top"])
  *   4. states    […]:where(:hover, :focus-visible, :disabled)
  *   5. dark      — none; dark-mode differences are tokens (see tokens.css)
  * Every rule is flattened to 0,1,0 with :where() and lives in
@@ -94,6 +103,26 @@
     color: var(--foreground);
   }
 
+  /* ===== Caption dropdowns =====
+     Month and year are native selects styled by form.css (colors, radius,
+     focus, chevron, dark mode). Here they only shrink to fit beside the
+     arrows in a 7-cell header: calendar.css loads after form.css, so these
+     0,1,0 rules win on source order. */
+  [data-calendar-part="dropdowns"] {
+    display: flex;
+    align-items: center;
+    @apply gap-1;
+  }
+
+  :where([data-calendar-part="dropdowns"]) [data-component="select"] {
+    width: auto;
+    height: var(--cell-size);
+    @apply pl-2 pr-6 py-0 text-sm;
+    font-weight: var(--label-weight, 500);
+    background-position: right 0.25rem center;
+    background-size: 1rem 1rem;
+  }
+
   /* ===== Weekday Headers ===== */
   [data-calendar-part="weekdays"] {
     display: grid;
@@ -123,6 +152,11 @@
     grid-template-columns: repeat(7, var(--cell-size));
   }
 
+  /* ===== Footer ===== */
+  [data-calendar-part="footer"] {
+    @apply mt-4;
+  }
+
   /* ===== Day Button Base ===== */
   [data-calendar-part="day"] {
     display: inline-flex;
@@ -205,6 +239,19 @@
     @apply opacity-30;
   }
 
+  /* ===== Popover side ===== */
+
+  /* Opened above the trigger: weekdays, grid, footer, then the header */
+  [data-component="calendar"]:where([data-side="top"]) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where([data-component="calendar"][data-side="top"]) [data-calendar-part="header"] {
+    order: 1;
+    @apply mt-4 mb-0;
+  }
+
   /* ===== Day States ===== */
 
   /* Hover — only for cells with no selection state of their own */

data/app/assets/stylesheets/date_picker.css

@@ -14,7 +14,8 @@
  *   2. sizes     :where([data-size="sm"|"lg"]) [data-date-picker-part="trigger"]
  *   3. variants  :where([data-full-width]) …
  *   4. states    […]:where(:hover, :focus-visible, :disabled, [aria-expanded],
- *                          :has(input:invalid))
+ *                          :has(input:invalid)); popover open/closed, and
+ *                          :has(calendar[data-side="top"]) for the animation
  *   5. dark      — none; dark-mode differences are tokens (see tokens.css)
  * Every rule is flattened to 0,1,0 with :where() and lives in
  * @layer components, so a caller's utility class wins and source order is
@@ -160,6 +161,17 @@
     }
   }
 
+  /* Opened above the trigger (the calendar's data-side): grow upward out of it */
+  [data-date-picker-part="popover"]:where(:not(:popover-open):has([data-component="calendar"][data-side="top"])) {
+    transform: translateY(0.5rem) scale(0.95);
+  }
+
+  @starting-style {
+    [data-date-picker-part="popover"]:where(:popover-open:has([data-component="calendar"][data-side="top"])) {
+      transform: translateY(0.5rem) scale(0.95);
+    }
+  }
+
   /* Backdrop */
   [data-date-picker-part="popover"]::backdrop {
     background-color: transparent;

data/app/helpers/maquina_components/calendar_helper.rb

@@ -72,6 +72,43 @@ module MaquinaComponents
       end
     end
 
+    # Years offered by the caption's year select (caption_layout: :dropdown)
+    #
+    # min_date/max_date set the bounds when present; otherwise years applies,
+    # 100 years back to 10 ahead by default. Given both, the narrower bound
+    # wins. The displayed year is always included.
+    #
+    # @param display_year [Integer] Year the calendar shows
+    # @param min_date [Date, nil] Minimum selectable date
+    # @param max_date [Date, nil] Maximum selectable date
+    # @param years [Range, nil] Explicit span of years
+    # @return [Range]
+    def calendar_year_range(display_year, min_date: nil, max_date: nil, years: nil)
+      first, last = (years || ((Date.current.year - 100)..(Date.current.year + 10))).minmax
+      first = min_date.year if min_date && (years.nil? || min_date.year > first)
+      last = max_date.year if max_date && (years.nil? || max_date.year < last)
+
+      [first, display_year].min..[last, display_year].max
+    end
+
+    # Options for the caption's month select: abbreviated localized names
+    # (the full ones do not fit beside the year in a 7-cell header), with the
+    # months wholly outside min_date/max_date disabled for that year
+    #
+    # @param year [Integer] Year the months belong to
+    # @param min_date [Date, nil] Minimum selectable date
+    # @param max_date [Date, nil] Maximum selectable date
+    # @return [Array<Array(String, Integer, Boolean)>] [name, month, disabled]
+    def calendar_month_options(year, min_date: nil, max_date: nil)
+      I18n.t("date.abbr_month_names").drop(1).each_with_index.map do |name, index|
+        first_of_month = Date.new(year, index + 1, 1)
+        disabled = (min_date && first_of_month.end_of_month < min_date) ||
+          (max_date && first_of_month > max_date)
+
+        [name, index + 1, !!disabled]
+      end
+    end
+
     # Check if a date falls within a range
     #
     # @param date [Date] The date to check

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,
@@ -13,12 +13,43 @@ export default class extends Controller {
     mode: { type: String, default: "single" },
     weekStartsOn: { type: String, default: "sunday" },
     disabledDates: Array,
-    showOutsideDays: { type: Boolean, default: true }
+    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() {
@@ -45,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: {
@@ -337,14 +394,40 @@ export default class extends Controller {
   }
 
   updateNavigationState() {
-    if (this.minDateValue && this.hasPrevButtonTarget) {
-      const firstOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue - 1, 1))
-      this.prevButtonTarget.disabled = firstOfMonth <= this.minDateValue
+    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.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.maxDateValue && this.hasNextButtonTarget) {
-      const lastOfMonth = this.formatDate(new Date(this.yearValue, this.monthValue, 0))
-      this.nextButtonTarget.disabled = lastOfMonth >= this.maxDateValue
+    if (this.hasYearSelectTarget) {
+      this.yearSelectTarget.value = String(this.yearValue)
     }
   }
 

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

@@ -1,4 +1,4 @@
-<%# locals: (selected: nil, selected_end: nil, month: nil, year: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, cell_size: nil, input_name: nil, input_name_end: nil, css_classes: "", **html_options) %>
+<%# locals: (selected: nil, selected_end: nil, month: nil, year: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, caption_layout: :label, years: nil, cell_size: nil, input_name: nil, input_name_end: nil, css_classes: "", **html_options) %>
 <%
   # Dates may arrive as Date, Time or ISO strings
   selected_date = calendar_to_date(selected)
@@ -36,6 +36,18 @@
     abbr_day_names.rotate(1) :
     abbr_day_names
 
+  # caption_layout: :dropdown swaps the caption for month and year selects.
+  # Their locals reach the header only then, so an app's own calendar/header
+  # override written for the caption keeps working.
+  dropdown = caption_layout.to_sym == :dropdown
+  year_range = calendar_year_range(display_year, min_date: min_date_parsed, max_date: max_date_parsed, years: years) if dropdown
+  header_locals = if dropdown
+    {caption_layout: :dropdown, years: year_range,
+     month_options: calendar_month_options(display_year, min_date: min_date_parsed, max_date: max_date_parsed)}
+  else
+    {}
+  end
+
   merged_data = merge_component_data(html_options,
     controller: "calendar",
     component: "calendar",
@@ -48,7 +60,9 @@
     "calendar-max-date-value": max_date_parsed&.iso8601,
     "calendar-week-starts-on-value": week_starts_on,
     "calendar-disabled-dates-value": disabled_dates_parsed.map(&:iso8601).presence,
-    "calendar-show-outside-days-value": show_outside_days
+    "calendar-show-outside-days-value": show_outside_days,
+    "calendar-start-year-value": year_range&.first,
+    "calendar-end-year-value": year_range&.last
   )
 
   # cell_size and a caller's style: both write the style attribute, so join them
@@ -80,7 +94,8 @@
   <%= render "components/calendar/header",
         month: display_month,
         year: display_year,
-        month_name: I18n.l(first_of_month, format: "%B %Y") %>
+        month_name: I18n.l(first_of_month, format: "%B %Y"),
+        **header_locals %>
 
   <%# Weekday headers %>
   <div data-calendar-part="weekdays">
@@ -104,4 +119,13 @@
             show_outside_days: show_outside_days %>
     <% end %>
   </div>
+
+  <%# Optional footer (actions such as Clear/Done); stays between the grid and
+      a header moved to the bottom when the calendar's popover opens above.
+      Without a caller block a partial's yield returns content_for(:layout),
+      which is the whole page when rendered from a layout, so that is no footer. %>
+  <% footer = capture { yield }.presence %>
+  <% if footer && footer != content_for(:layout) %>
+    <div data-calendar-part="footer"><%= footer %></div>
+  <% end %>
 <% end %>

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

@@ -1,4 +1,4 @@
-<%# locals: (selected: nil, selected_end: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, placeholder: nil, input_name: nil, input_name_end: nil, id: nil, disabled: false, required: false, size: :default, full_width: false, css_classes: "", **html_options) %>
+<%# locals: (selected: nil, selected_end: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, caption_layout: :label, years: nil, placeholder: nil, input_name: nil, input_name_end: nil, id: nil, disabled: false, required: false, size: :default, full_width: false, css_classes: "", **html_options) %>
 <%
   # Deterministic ID for popover targeting: random ids break idiomorph
   # matching across Turbo morphs
@@ -81,6 +81,8 @@
           disabled_dates: disabled_dates,
           show_outside_days: show_outside_days,
           week_starts_on: week_starts_on,
+          caption_layout: caption_layout,
+          years: years,
           data: {
             "date-picker-target": "calendar",
             action: "calendar:change->date-picker#handleChange calendar:navigate->date-picker#handleNavigate"

data/app/views/components/calendar/_header.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (month:, year:, month_name:, css_classes: "", **html_options) %>
+<%# locals: (month:, year:, month_name:, caption_layout: :label, years: nil, month_options: nil, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options, "calendar-part": "header") %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
@@ -9,9 +9,33 @@
     <%= builtin_icon_for :chevron_left, class: "size-4" %>
   </button>
 
-  <div data-calendar-part="caption">
-    <%= month_name %>
-  </div>
+  <% if caption_layout.to_sym == :dropdown %>
+    <div data-calendar-part="dropdowns">
+      <select data-component="select"
+              data-calendar-part="month-select"
+              data-calendar-target="monthSelect"
+              data-action="change->calendar#selectMonth"
+              aria-label="<%= t("maquina_components.calendar.month", default: "Month") %>">
+        <% month_options.each do |name, value, disabled| %>
+          <%= tag.option name, value: value, selected: value == month, disabled: disabled %>
+        <% end %>
+      </select>
+
+      <select data-component="select"
+              data-calendar-part="year-select"
+              data-calendar-target="yearSelect"
+              data-action="change->calendar#selectYear"
+              aria-label="<%= t("maquina_components.calendar.year", default: "Year") %>">
+        <% years.each do |value| %>
+          <%= tag.option value, value: value, selected: value == year %>
+        <% end %>
+      </select>
+    </div>
+  <% else %>
+    <div data-calendar-part="caption">
+      <%= month_name %>
+    </div>
+  <% end %>
 
   <button type="button"
           data-action="click->calendar#nextMonth"

data/lib/maquina_components/version.rb

@@ -1,3 +1,3 @@
 module MaquinaComponents
-  VERSION = "0.7.4"
+  VERSION = "0.8.0"
 end

metadata

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