phlex_kit 0.4.0 → 0.5.0

data/app/components/phlex_kit/calendar/calendar.rb

@@ -1,16 +1,44 @@
 module PhlexKit
   # Calendar (month grid with day selection), ported from ruby_ui's
-  # RubyUI::Calendar. Renders the header (title + prev/next), the <table> the
-  # phlex-kit--calendar controller fills, and the <template>s it clones per day
-  # state (upstream's Mustache dependency is replaced with a tiny {{key}}
-  # interpolator in the controller). Pass `input_id:` a CSS selector (e.g.
-  # "#due-date") to push the picked date into a phlex-kit--calendar-input outlet —
-  # that's how PhlexKit::DatePicker binds it to an Input. Tailwind → vanilla
-  # `.pk-calendar*` (calendar.css).
+  # RubyUI::Calendar and extended to shadcn/ui's current calendar surface.
+  # Renders the header (title or month/year dropdown caption + prev/next),
+  # the <table> the phlex-kit--calendar controller fills, and the <template>s
+  # it clones per day state.
+  #
+  # `mode:` — :single (default), :range (pick start then end;
+  # range-start/in-range/range-end day states), or :multiple (toggle days).
+  # `selected_date:` / `range_start:`+`range_end:` / `selected_dates:` seed
+  # the selection per mode. `min_date:`/`max_date:` clamp; `disabled_dates:`
+  # (array of ISO strings or Dates) are unpickable and struck through
+  # ("booked"). `week_numbers: true` prepends an ISO week column.
+  # `caption_layout: :dropdown` swaps the title for native month/year
+  # <select>s (their captionLayout="dropdown"; `from_year:`/`to_year:` bound
+  # the year list). Pass `input_id:` a CSS selector (e.g. "#due-date") to
+  # push the picked date (or "start – end" range) into a
+  # phlex-kit--calendar-input outlet — that's how PhlexKit::DatePicker binds
+  # an Input. Sizing rides --pk-cell-size/--pk-cell-radius (calendar.css).
   class Calendar < BaseComponent
-    def initialize(selected_date: nil, min_date: nil, input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+    MODES = { single: "single", range: "range", multiple: "multiple" }.freeze
+    CAPTION_LAYOUTS = %i[label dropdown].freeze
+    MONTHS = %w[January February March April May June July August September October November December].freeze
+
+    def initialize(mode: :single, selected_date: nil, selected_dates: [], range_start: nil, range_end: nil,
+                   min_date: nil, max_date: nil, disabled_dates: [], week_numbers: false,
+                   caption_layout: :label, from_year: nil, to_year: nil,
+                   input_id: nil, date_format: "yyyy-MM-dd", **attrs)
+      @mode = MODES.fetch(mode.to_sym)
       @selected_date = selected_date
+      @selected_dates = Array(selected_dates).map(&:to_s)
+      @range_start = range_start
+      @range_end = range_end
       @min_date = min_date
+      @max_date = max_date
+      @disabled_dates = Array(disabled_dates).map(&:to_s)
+      @week_numbers = week_numbers
+      @caption_layout = caption_layout.to_sym
+      raise ArgumentError, "caption_layout must be :label or :dropdown" unless CAPTION_LAYOUTS.include?(@caption_layout)
+      @from_year = from_year
+      @to_year = to_year
       @input_id = input_id
       @date_format = date_format
       @attrs = attrs
@@ -19,29 +47,69 @@ module PhlexKit
     def view_template
       div(**mix(calendar_attrs, @attrs)) do
         render CalendarHeader.new do
-          render CalendarTitle.new
+          if @caption_layout == :dropdown
+            render_dropdown_caption
+          else
+            render CalendarTitle.new
+          end
           render CalendarPrev.new
           render CalendarNext.new
         end
         render CalendarBody.new # Where the calendar is rendered (Weekdays and Days)
-        render CalendarWeekdays.new # Template for the weekdays
+        render CalendarWeekdays.new(week_numbers: @week_numbers) # Template for the weekdays
         render CalendarDays.new # Templates for the day states
       end
     end
 
     private
 
+    def render_dropdown_caption
+      view_year = parse_year(@selected_date) || parse_year(@range_start) || Time.now.year
+      first_year = @from_year || parse_year(@min_date) || (view_year - 10)
+      last_year = @to_year || parse_year(@max_date) || (view_year + 10)
+
+      div(class: "pk-calendar-dropdowns") do
+        select(
+          class: "pk-native-select-field pk-calendar-dropdown",
+          aria: { label: "Month" },
+          data: { phlex_kit__calendar_target: "monthSelect", action: "change->phlex-kit--calendar#setMonth" }
+        ) do
+          MONTHS.each_with_index { |name, index| option(value: index.to_s) { name } }
+        end
+        select(
+          class: "pk-native-select-field pk-calendar-dropdown",
+          aria: { label: "Year" },
+          data: { phlex_kit__calendar_target: "yearSelect", action: "change->phlex-kit--calendar#setYear" }
+        ) do
+          (first_year..last_year).each { |year| option(value: year.to_s) { year.to_s } }
+        end
+      end
+    end
+
+    def parse_year(value)
+      value.to_s[/\A(\d{4})/, 1]&.to_i
+    end
+
     def calendar_attrs
-      {
-        class: "pk-calendar",
-        data: {
-          controller: "phlex-kit--calendar",
-          phlex_kit__calendar_selected_date_value: @selected_date&.to_s,
-          phlex_kit__calendar_min_date_value: @min_date&.to_s,
-          phlex_kit__calendar_format_value: @date_format,
-          phlex_kit__calendar_phlex_kit__calendar_input_outlet: @input_id
-        }
+      data = {
+        controller: "phlex-kit--calendar",
+        phlex_kit__calendar_mode_value: @mode,
+        phlex_kit__calendar_selected_date_value: @selected_date&.to_s,
+        phlex_kit__calendar_min_date_value: @min_date&.to_s,
+        phlex_kit__calendar_max_date_value: @max_date&.to_s,
+        phlex_kit__calendar_format_value: @date_format,
+        phlex_kit__calendar_phlex_kit__calendar_input_outlet: @input_id
       }
+      data[:phlex_kit__calendar_range_start_value] = @range_start.to_s if @range_start
+      data[:phlex_kit__calendar_range_end_value] = @range_end.to_s if @range_end
+      data[:phlex_kit__calendar_selected_dates_value] = JSON.generate(@selected_dates) if @selected_dates.any?
+      data[:phlex_kit__calendar_disabled_dates_value] = JSON.generate(@disabled_dates) if @disabled_dates.any?
+      data[:phlex_kit__calendar_week_numbers_value] = "true" if @week_numbers
+      # Seed the view on the selection so the grid opens on the right month.
+      view_seed = @selected_date || @range_start || @selected_dates.first
+      data[:phlex_kit__calendar_view_date_value] = view_seed.to_s if view_seed
+
+      { class: "pk-calendar", data: data }
     end
   end
 end

data/app/components/phlex_kit/calendar/calendar_controller.js

@@ -1,10 +1,12 @@
 import { Controller } from "@hotwired/stimulus";
 
-// Ported from ruby_ui's calendar controller with the mustache dependency
-// replaced: the day templates only use {{day}} / {{dayDate}}, so this tiny
-// interpolator covers them and only @hotwired/stimulus is needed. Identifiers
-// renamed ruby-ui -> phlex-kit; the week-row markup uses .pk-calendar-week
-// (calendar.css) instead of Tailwind utilities.
+// Ported from ruby_ui's calendar controller (mustache replaced by a tiny
+// {{key}} interpolator) and extended to shadcn's current calendar surface:
+// mode single (default) / range / multiple, min/max + explicit disabled
+// dates (rendered struck-through as "booked"), ISO week numbers, and a
+// month/year dropdown caption (native <select>s the controller keeps in
+// sync). Day templates gain a {{state}} class hook so range-start /
+// range-end / in-range / booked ride the same five templates.
 function renderTemplate(template, data) {
   return template.replace(/{{\s*(\w+)\s*}}/g, (_, key) => String(data[key] ?? ""));
 }
@@ -13,6 +15,8 @@ export default class extends Controller {
   static targets = [
     "calendar",
     "title",
+    "monthSelect",
+    "yearSelect",
     "weekdaysTemplate",
     "disabledDateTemplate",
     "selectedDateTemplate",
@@ -21,22 +25,20 @@ export default class extends Controller {
     "otherMonthDateTemplate",
   ];
   static values = {
-    selectedDate: {
-      type: String,
-      default: null,
-    },
-    minDate: {
-      type: String,
-      default: null,
-    },
+    mode: { type: String, default: "single" },
+    selectedDate: { type: String, default: null },
+    selectedDates: { type: Array, default: [] },
+    rangeStart: { type: String, default: null },
+    rangeEnd: { type: String, default: null },
+    minDate: { type: String, default: null },
+    maxDate: { type: String, default: null },
+    disabledDates: { type: Array, default: [] },
+    weekNumbers: { type: Boolean, default: false },
     viewDate: {
       type: String,
       default: new Date().toISOString().slice(0, 10),
     },
-    format: {
-      type: String,
-      default: "yyyy-MM-dd", // Default format
-    },
+    format: { type: String, default: "yyyy-MM-dd" },
   };
   static outlets = ["phlex-kit--calendar-input"];
 
@@ -54,12 +56,70 @@ export default class extends Controller {
     this.viewDateValue = this.adjustMonth(-1);
   }
 
+  // month/year dropdown caption (native selects)
+  setMonth(e) {
+    const date = this.viewDate();
+    date.setDate(2);
+    date.setMonth(Number(e.target.value));
+    this.viewDateValue = date.toISOString().slice(0, 10);
+  }
+
+  setYear(e) {
+    const date = this.viewDate();
+    date.setDate(2);
+    date.setFullYear(Number(e.target.value));
+    this.viewDateValue = date.toISOString().slice(0, 10);
+  }
+
   selectDay(e) {
     e.preventDefault();
-    if (this.isDateDisabled(e.currentTarget.dataset.day)) return;
+    const iso = e.currentTarget.dataset.day;
+    if (this.isDateDisabled(iso)) return;
+
+    switch (this.modeValue) {
+      case "range":
+        this.selectRangeDay(iso);
+        break;
+      case "multiple":
+        this.toggleMultipleDay(iso);
+        break;
+      default:
+        this.selectedDateValue = iso;
+    }
+  }
+
+  selectRangeDay(iso) {
+    const candidate = this.parseDate(iso);
+    const start = this.parseDate(this.rangeStartValue);
+    const end = this.parseDate(this.rangeEndValue);
+
+    if (!start || (start && end)) {
+      // begin a fresh range
+      this.rangeStartValue = this.isoDate(candidate);
+      this.rangeEndValue = null;
+    } else if (candidate < start) {
+      this.rangeStartValue = this.isoDate(candidate);
+    } else {
+      this.rangeEndValue = this.isoDate(candidate);
+    }
+    this.updateCalendar();
+    this.pushToOutlets();
+    this.dispatchChange();
+  }
 
-    // Set the selected date value
-    this.selectedDateValue = e.currentTarget.dataset.day;
+  toggleMultipleDay(iso) {
+    const day = this.isoDate(this.parseDate(iso));
+    const current = [...this.selectedDatesValue];
+    const index = current.indexOf(day);
+    if (index >= 0) {
+      current.splice(index, 1);
+    } else {
+      current.push(day);
+      current.sort();
+    }
+    this.selectedDatesValue = current;
+    this.updateCalendar();
+    this.dispatchChange();
   }
 
   selectedDateValueChanged(value, prevValue) {
@@ -69,38 +129,77 @@ export default class extends Controller {
       return;
     }
 
-    // update the viewDateValue to the first day of month of the selected date (This will trigger updateCalendar() function)
+    // update the viewDateValue to the selected date's month (this re-renders)
     const newViewDate = new Date(selectedDate);
-    newViewDate.setDate(2); // set the day to the 2nd (to avoid issues with months with different number of days and timezones)
+    newViewDate.setDate(2); // avoid month-length/timezone edges
     this.viewDateValue = newViewDate.toISOString().slice(0, 10);
 
-    // Re-render the calendar
     this.updateCalendar();
-
-    // update the input value
-    this.phlexKitCalendarInputOutlets.forEach((outlet) => {
-      const formattedDate = this.formatDate(selectedDate);
-      outlet.setValue(formattedDate);
-    });
+    this.pushToOutlets();
+    this.dispatchChange();
   }
 
   viewDateValueChanged(value, prevValue) {
     this.updateCalendar();
   }
 
+  pushToOutlets() {
+    const value = this.formattedSelection();
+    if (value === null) return;
+    this.phlexKitCalendarInputOutlets.forEach((outlet) => outlet.setValue(value));
+  }
+
+  formattedSelection() {
+    if (this.modeValue === "range") {
+      const start = this.parseDate(this.rangeStartValue);
+      const end = this.parseDate(this.rangeEndValue);
+      if (!start) return null;
+      return end ? `${this.formatDate(start)} – ${this.formatDate(end)}` : this.formatDate(start);
+    }
+    if (this.modeValue === "multiple") {
+      return this.selectedDatesValue.map((d) => this.formatDate(this.parseDate(d))).join(", ");
+    }
+    const selected = this.selectedDate();
+    return selected ? this.formatDate(selected) : null;
+  }
+
+  dispatchChange() {
+    this.dispatch("change", {
+      detail: {
+        mode: this.modeValue,
+        selected: this.selectedDateValue,
+        selectedDates: this.selectedDatesValue,
+        rangeStart: this.rangeStartValue,
+        rangeEnd: this.rangeEndValue,
+        formatted: this.formattedSelection(),
+      },
+    });
+  }
+
   adjustMonth(adjustment) {
     const date = this.viewDate();
-    date.setDate(2); // set the day to the 2nd (to avoid issues with months with different number of days and timezones)
+    date.setDate(2); // avoid month-length/timezone edges
     date.setMonth(date.getMonth() + adjustment);
     return date.toISOString().slice(0, 10);
   }
 
   updateCalendar() {
-    // Update the title with month and year
-    this.titleTarget.textContent = this.monthAndYear();
+    if (this.hasTitleTarget) {
+      this.titleTarget.textContent = this.monthAndYear();
+    }
+    this.syncDropdowns();
     this.calendarTarget.innerHTML = this.calendarHTML();
   }
 
+  syncDropdowns() {
+    if (this.hasMonthSelectTarget) {
+      this.monthSelectTarget.value = String(this.viewDate().getMonth());
+    }
+    if (this.hasYearSelectTarget) {
+      this.yearSelectTarget.value = String(this.viewDate().getFullYear());
+    }
+  }
+
   calendarHTML() {
     return this.weekdaysTemplateTarget.innerHTML + this.calendarDays();
   }
@@ -112,53 +211,83 @@ export default class extends Controller {
   }
 
   renderWeek(week) {
-    const days = week
-      .map((day) => {
-        return this.renderDay(day);
-      })
-      .join("");
-    return `<tr class="pk-calendar-week">${days}</tr>`;
+    let cells = week.map((day) => this.renderDay(day)).join("");
+    if (this.weekNumbersValue) {
+      const weekNumber = this.isoWeekNumber(week[0]);
+      cells = `<td class="pk-calendar-weeknumber" role="presentation">${weekNumber}</td>` + cells;
+    }
+    return `<tr class="pk-calendar-week">${cells}</tr>`;
   }
 
   renderDay(day) {
     const today = new Date();
-    const selectedDate = this.selectedDate();
-    let dateHTML = "";
-    const data = { day: day, dayDate: day.getDate() };
+    const iso = this.isoDate(day);
+    const data = { day: iso, dayDate: day.getDate(), state: this.dayState(day) };
 
     if (this.isDateDisabled(day)) {
-      // disabledDate
-      dateHTML = renderTemplate(
-        this.disabledDateTemplateTarget.innerHTML,
-        data,
-      );
-    } else if (
-      selectedDate &&
-      day.toDateString() === selectedDate.toDateString()
-    ) {
-      // selectedDate
-      // Render the selected date template
-      dateHTML = renderTemplate(
-        this.selectedDateTemplateTarget.innerHTML,
-        data,
-      );
-    } else if (day.toDateString() === today.toDateString()) {
-      // todayDate
-      dateHTML = renderTemplate(this.todayDateTemplateTarget.innerHTML, data);
-    } else if (day.getMonth() === this.viewDate().getMonth()) {
-      // currentMonthDate
-      dateHTML = renderTemplate(
-        this.currentMonthDateTemplateTarget.innerHTML,
-        data,
-      );
-    } else {
-      // otherMonthDate
-      dateHTML = renderTemplate(
-        this.otherMonthDateTemplateTarget.innerHTML,
-        data,
+      return renderTemplate(this.disabledDateTemplateTarget.innerHTML, data);
+    }
+    if (this.isDaySelected(day)) {
+      return renderTemplate(this.selectedDateTemplateTarget.innerHTML, data);
+    }
+    if (this.isDayInRange(day)) {
+      // middle of a range: current-month look + the in-range state class
+      return renderTemplate(this.currentMonthDateTemplateTarget.innerHTML, data);
+    }
+    if (day.toDateString() === today.toDateString()) {
+      return renderTemplate(this.todayDateTemplateTarget.innerHTML, data);
+    }
+    if (day.getMonth() === this.viewDate().getMonth()) {
+      return renderTemplate(this.currentMonthDateTemplateTarget.innerHTML, data);
+    }
+    return renderTemplate(this.otherMonthDateTemplateTarget.innerHTML, data);
+  }
+
+  // Extra state classes interpolated into the day templates ({{state}}).
+  dayState(day) {
+    const states = [];
+    if (this.isBooked(day)) states.push("booked");
+    if (this.modeValue === "range") {
+      const start = this.parseDate(this.rangeStartValue);
+      const end = this.parseDate(this.rangeEndValue);
+      const isStart = start && day.toDateString() === start.toDateString();
+      const isEnd = end && day.toDateString() === end.toDateString();
+      if (isStart) states.push("range-start");
+      if (isEnd) states.push("range-end");
+      // caps only band with the accent once the range is complete
+      if (start && end && (isStart || isEnd)) states.push("range-cap");
+      if (this.isDayInRange(day)) states.push("in-range");
+    }
+    return states.join(" ");
+  }
+
+  isDaySelected(day) {
+    if (this.modeValue === "range") {
+      const start = this.parseDate(this.rangeStartValue);
+      const end = this.parseDate(this.rangeEndValue);
+      return (
+        (start && day.toDateString() === start.toDateString()) ||
+        (end && day.toDateString() === end.toDateString())
       );
     }
-    return dateHTML;
+    if (this.modeValue === "multiple") {
+      return this.selectedDatesValue.includes(this.isoDate(day));
+    }
+    const selectedDate = this.selectedDate();
+    return selectedDate && day.toDateString() === selectedDate.toDateString();
+  }
+
+  isDayInRange(day) {
+    if (this.modeValue !== "range") return false;
+    const start = this.parseDate(this.rangeStartValue);
+    const end = this.parseDate(this.rangeEndValue);
+    if (!start || !end) return false;
+    const candidate = this.startOfDay(day);
+    return candidate > this.startOfDay(start) && candidate < this.startOfDay(end);
+  }
+
+  isBooked(day) {
+    return this.disabledDatesValue.includes(this.isoDate(day));
   }
 
   monthAndYear() {
@@ -222,7 +351,6 @@ export default class extends Controller {
         break;
       }
     }
-    // *** the magic starts here
     return weeks.map(({ start, end }, index) => {
       const sub = +(start > end && index === 0);
       return Array.from({ length: 7 }, (_, index) => {
@@ -232,6 +360,21 @@ export default class extends Controller {
     });
   }
 
+  isoWeekNumber(date) {
+    const target = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+    const dayNumber = target.getUTCDay() || 7;
+    target.setUTCDate(target.getUTCDate() + 4 - dayNumber);
+    const yearStart = new Date(Date.UTC(target.getUTCFullYear(), 0, 1));
+    return Math.ceil(((target - yearStart) / 86400000 + 1) / 7);
+  }
+
+  isoDate(date) {
+    const year = date.getFullYear();
+    const month = ("0" + (date.getMonth() + 1)).slice(-2);
+    const day = ("0" + date.getDate()).slice(-2);
+    return `${year}-${month}-${day}`;
+  }
+
   formatDate(date) {
     const format = this.formatValue;
     const day = date.getDate();
@@ -282,13 +425,21 @@ export default class extends Controller {
     return this.parseDate(this.minDateValue);
   }
 
+  maxDate() {
+    return this.parseDate(this.maxDateValue);
+  }
+
   isDateDisabled(date) {
-    const minDate = this.minDate();
     const candidate = this.parseDate(date);
+    if (!candidate) return false;
+
+    const minDate = this.minDate();
+    if (minDate && this.startOfDay(candidate) < this.startOfDay(minDate)) return true;
 
-    if (!minDate || !candidate) return false;
+    const maxDate = this.maxDate();
+    if (maxDate && this.startOfDay(candidate) > this.startOfDay(maxDate)) return true;
 
-    return this.startOfDay(candidate) < this.startOfDay(minDate);
+    return this.disabledDatesValue.includes(this.isoDate(candidate));
   }
 
   parseDate(value) {

data/app/components/phlex_kit/calendar/calendar_days.rb

@@ -1,7 +1,8 @@
 module PhlexKit
   # <template>s for the five day states (disabled / selected / today / current
   # month / other month). The controller picks one per day and interpolates
-  # {{day}} / {{dayDate}}. See calendar.rb.
+  # {{day}} / {{dayDate}} / {{state}} — state carries the extra range/booked
+  # classes (range-start / range-end / in-range / booked). See calendar.rb.
   class CalendarDays < BaseComponent
     def initialize(**attrs)
       @attrs = attrs
@@ -22,7 +23,7 @@ module PhlexKit
         button(
           data_day: "{{day}}",
           name: "day",
-          class: "pk-calendar-day disabled",
+          class: "pk-calendar-day disabled {{state}}",
           disabled: true,
           role: "gridcell",
           tabindex: "-1",
@@ -38,7 +39,7 @@ module PhlexKit
           data_day: "{{day}}",
           data_action: "click->phlex-kit--calendar#selectDay",
           name: "day",
-          class: "pk-calendar-day selected",
+          class: "pk-calendar-day selected {{state}}",
           role: "gridcell",
           tabindex: "0",
           type: "button",
@@ -53,7 +54,7 @@ module PhlexKit
           data_day: "{{day}}",
           data_action: "click->phlex-kit--calendar#selectDay",
           name: "day",
-          class: "pk-calendar-day today",
+          class: "pk-calendar-day today {{state}}",
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -67,7 +68,7 @@ module PhlexKit
           data_day: "{{day}}",
           data_action: "click->phlex-kit--calendar#selectDay",
           name: "day",
-          class: "pk-calendar-day",
+          class: "pk-calendar-day {{state}}",
           role: "gridcell",
           tabindex: "-1",
           type: "button"
@@ -81,7 +82,7 @@ module PhlexKit
           data_day: "{{day}}",
           data_action: "click->phlex-kit--calendar#selectDay",
           name: "day",
-          class: "pk-calendar-day other",
+          class: "pk-calendar-day other {{state}}",
           role: "gridcell",
           tabindex: "-1",
           type: "button"

data/app/components/phlex_kit/calendar/calendar_weekdays.rb

@@ -4,7 +4,8 @@ module PhlexKit
   class CalendarWeekdays < BaseComponent
     DAYS = %w[Monday Tuesday Wednesday Thursday Friday Saturday Sunday].freeze
 
-    def initialize(**attrs)
+    def initialize(week_numbers: false, **attrs)
+      @week_numbers = week_numbers
       @attrs = attrs
     end
 
@@ -12,6 +13,7 @@ module PhlexKit
       template(data: { phlex_kit__calendar_target: "weekdaysTemplate" }) do
         thead(**@attrs) do
           tr(class: "pk-calendar-weekdays-row") do
+            th(scope: "col", class: "pk-calendar-weekday pk-calendar-weeknumber-head", aria: { label: "Week number" }) { "#" } if @week_numbers
             DAYS.each { |day| render_day(day) }
           end
         end