maquina-components 0.8.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 95885780d4ac7c947e4561e821d4c3cb2f985a3a363738f7cdc7fc01a858fc11
-  data.tar.gz: 35100ad72833ef5be786a40444f5af15c37866d0dc8dce4dee34232f04bfe0a5
+  metadata.gz: 3cc64fa3b021d92f3dd1e54f71c762404e3c7778a137f2eee3ca4a33d28c247b
+  data.tar.gz: aa3a45337cc8d43e1c47e884750418b198c2afde379cc74858a9c866b7aa0bec
 SHA512:
-  metadata.gz: b1e7d220b352af1cd2e9fabf11902165c2d7d958608ea504f0b6a896fef336c3c8cd1e556090ab2db7dfa54c8812249fc5611c1a19820701c37c015c15b82a10
-  data.tar.gz: 347641b6a36dac6f72f9344e8e6af0a81f0c80bf29dd1ce022e20db9a295db2141d540eb16d41cea92fc19f4a59345438712f9b958c802b3cc1f109bd2d5abbb
+  metadata.gz: 9568653a565de12c6a0485663fc48b7f31b75855da80a5cbbb118df5025ecae1a8e3bcf88eeaf43d86e42bd2c1f458b2dc4aebe9deff0e3e8276689a98a75185
+  data.tar.gz: cce7f348df9e0594b464366b492efbc76270698e44d76316bcd6c11e2aacf9d2c99c6c2dfda2b3cc40da07705c4480bc4cb0c43d2701bbb661a2645b0dfde283

data/app/javascript/controllers/calendar_controller.js

@@ -14,6 +14,10 @@ export default class extends Controller {
     weekStartsOn: { type: String, default: "sunday" },
     disabledDates: Array,
     showOutsideDays: { type: Boolean, default: true },
+    // false: a click on the selected day keeps it (single mode), and the start
+    // clicked again makes a one-day range (range mode), so a required date
+    // can't be emptied by a click
+    deselectable: { type: Boolean, default: true },
     // Bounds of the caption's year select (caption_layout: :dropdown only)
     startYear: Number,
     endYear: Number
@@ -188,7 +192,10 @@ export default class extends Controller {
                          disabledDates.has(dateStr)
 
       let dayState = null
-      if (isSelected && this.modeValue === "range" && selectedEndStr) {
+      if (isSelected && isRangeEnd) {
+        // A one-day range
+        dayState = "selected"
+      } else if (isSelected && this.modeValue === "range" && selectedEndStr) {
         dayState = "range-start"
       } else if (isRangeEnd) {
         dayState = "range-end"
@@ -242,6 +249,8 @@ export default class extends Controller {
 
   handleSingleSelection(dateStr) {
     if (this.selectedValue === dateStr) {
+      // Nothing changes, so nothing is dispatched
+      if (!this.deselectableValue) return
       this.selectedValue = ""
     } else {
       this.selectedValue = dateStr
@@ -268,12 +277,13 @@ export default class extends Controller {
         // Clicked before start - swap
         this.selectedEndValue = this.selectedValue
         this.selectedValue = dateStr
-      } else if (dateStr === selectedStr) {
+      } else if (dateStr === selectedStr && this.deselectableValue) {
         // Clicked same date - clear
         this.selectedValue = ""
         this.selectedEndValue = ""
       } else {
-        // Clicked after start - set end
+        // Clicked after start, or the start again when not deselectable
+        // (a one-day range) - set end
         this.selectedEndValue = dateStr
       }
     }
@@ -358,7 +368,10 @@ export default class extends Controller {
       let state = null
 
       if (this.modeValue === "range" && selectedStr && selectedEndStr) {
-        if (dateStr === selectedStr) {
+        if (dateStr === selectedStr && dateStr === selectedEndStr) {
+          // A one-day range
+          state = "selected"
+        } else if (dateStr === selectedStr) {
           state = "range-start"
         } else if (dateStr === selectedEndStr) {
           state = "range-end"

data/app/javascript/controllers/date_picker_controller.js

@@ -128,6 +128,19 @@ export default class extends Controller {
     })
   }
 
+  /**
+   * Close the popover when the selected day is clicked again and stays
+   * selected (a non-deselectable calendar): the click confirms the date.
+   * Bound on the calendar, so it runs after the day's own selectDay; a click
+   * that picks a new day has already closed the popover in handleChange.
+   */
+  confirmSelection(event) {
+    const day = event.target.closest("[data-calendar-part='day']")
+    if (day?.dataset.state === "selected" && this.popoverTarget.matches(":popover-open")) {
+      this.closePopover()
+    }
+  }
+
   /**
    * Handle calendar navigate event
    * Can be used to fetch events for the new month

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, caption_layout: :label, years: nil, 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, deselectable: true, 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)
@@ -61,6 +61,7 @@
     "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-deselectable-value": (false unless deselectable),
     "calendar-start-year-value": year_range&.first,
     "calendar-end-year-value": year_range&.last
   )

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, 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) %>
+<%# 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, deselectable: nil, size: :default, full_width: false, css_classes: "", **html_options) %>
 <%
   # Deterministic ID for popover targeting: random ids break idiomorph
   # matching across Turbo morphs
@@ -83,9 +83,11 @@
           week_starts_on: week_starts_on,
           caption_layout: caption_layout,
           years: years,
+          # A required date can't be emptied by clicking it again
+          deselectable: deselectable.nil? ? !required : deselectable,
           data: {
             "date-picker-target": "calendar",
-            action: "calendar:change->date-picker#handleChange calendar:navigate->date-picker#handleNavigate"
+            action: "calendar:change->date-picker#handleChange calendar:navigate->date-picker#handleNavigate click->date-picker#confirmSelection"
           } %>
   </div>
 <% end %>

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

@@ -20,7 +20,9 @@
                     (max_date && day > max_date) ||
                     disabled_dates.include?(day)
 
-      day_state = if is_selected && mode == :range && selected_end_date
+      day_state = if is_selected && is_range_end
+                    "selected" # a one-day range
+                  elsif is_selected && mode == :range && selected_end_date
                     "range-start"
                   elsif is_range_end
                     "range-end"

data/lib/maquina_components/version.rb

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

metadata

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