phlex_kit 0.14.1 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc498540064c2a8e95dbe9b86dad991b2decb5dbd36c58f8ea8c39dce04fd146
-  data.tar.gz: 4b04765fe0ef28d0562542546df1d841fe2a9bd0a6df3cde2c344a5f80902d98
+  metadata.gz: 7e817130c54d3e6a8c547328c09b8e632e13adda0cafa7ed0f415359fd1c0ed9
+  data.tar.gz: bcb04540a46d3442ac21b8d54d10b1f903bbcf33af2ec65344e7ad6879ab8462
 SHA512:
-  metadata.gz: f94e22d2a6537aae8571df45dea339fe6f03c2ed64b084223ee9359240f4032c85c1ce2132b63321e9d334b99cd9e0619babe7ec390937446913759434ae2a6c
-  data.tar.gz: e8a31936f3a6bd52fa30b61f3faf36e0ac8845ad78fd5c10624a021f3c0c6e6e99124eab540e42e0a0fd0dbe99bb4e6e2e2845c978939f646755a92e0576e30e
+  metadata.gz: ad56db4fec9925c964ed13084658ddf29942d79d17d4cd141bdb3efa0bef5d3e0be0c6c9ff8f53b28da163dfb0f080c1a79c8330b806f01823e0e092b479a5f5
+  data.tar.gz: 3e90c49dc0cb097b2aee66a28d7537c7c834df03015338832e6f00c9cbe40c93374d7a1d034a3c9765b848dc12407afc44681d2b6ef4aa62176295fecb1f3ad2

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

@@ -16,7 +16,11 @@ module PhlexKit
   # 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).
+  # an Input. `locale:` (a BCP 47 tag) drives every Intl call the controller
+  # makes — caption, weekday headers, month dropdown, day accessible names and
+  # the EEEE/MMMM format tokens; unset follows the browser. The server-rendered
+  # month/weekday words stay English as the pre-JS baseline. Note the `do`/PPPP
+  # ordinal suffixes (st/nd/rd/th) are an English rule and stay English. Sizing rides --pk-cell-size/--pk-cell-radius (calendar.css).
   class Calendar < BaseComponent
     MODES = { single: "single", range: "range", multiple: "multiple" }.freeze
     CAPTION_LAYOUTS = %i[label dropdown].freeze
@@ -25,7 +29,7 @@ module PhlexKit
     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)
+                   input_id: nil, date_format: "yyyy-MM-dd", locale: nil, **attrs)
       @mode = MODES.fetch(mode.to_sym)
       @selected_date = selected_date
       @selected_dates = Array(selected_dates).map(&:to_s)
@@ -41,6 +45,7 @@ module PhlexKit
       @to_year = to_year
       @input_id = input_id
       @date_format = date_format
+      @locale = locale
       @attrs = attrs
     end
 
@@ -112,6 +117,8 @@ module PhlexKit
       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
+      # Unset = the runtime's own locale (the controller passes undefined to Intl).
+      data[:phlex_kit__calendar_locale_value] = @locale if @locale
       # 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

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

@@ -41,6 +41,10 @@ export default class extends Controller {
     // toISOString() is UTC (wrong day for non-UTC users near midnight).
     viewDate: { type: String, default: "" },
     format: { type: String, default: "yyyy-MM-dd" },
+    // BCP 47 tag for every Intl call below. Unset = "" = undefined to Intl,
+    // i.e. the runtime's own locale (the server markup is English only as the
+    // pre-JS baseline, so the grid localizes itself on first render).
+    locale: { type: String, default: "" },
   };
   static outlets = ["phlex-kit--calendar-input"];
 
@@ -274,6 +278,34 @@ export default class extends Controller {
   // `focusDay` overrides the day to refocus after re-render: on a keyboard
   // month cross the target day lives in the NEW grid, not the pre-render
   // activeElement, so onKeydown passes it explicitly.
+  // undefined (not "") is what Intl wants for "use the runtime default".
+  locale() {
+    return this.localeValue || undefined;
+  }
+
+  // The weekday <th>s are cloned verbatim from a server template and the month
+  // dropdown's <option>s are server-rendered — both English. Relabel them from
+  // Intl on every render so the whole chrome speaks one language.
+  localizeChrome() {
+    const heads = [...this.calendarTarget.querySelectorAll(".pk-calendar-weekday")].filter(
+      (th) => !th.classList.contains("pk-calendar-weeknumber-head"),
+    );
+    // The server row runs Monday..Sunday; 2024-01-01 was a Monday.
+    heads.forEach((th, index) => {
+      const day = new Date(2024, 0, 1 + index);
+      const name = day.toLocaleDateString(this.locale(), { weekday: "long" });
+      th.setAttribute("aria-label", name);
+      th.textContent = day.toLocaleDateString(this.locale(), { weekday: "short" }).slice(0, 2);
+    });
+
+    if (!this.hasMonthSelectTarget) return;
+    [...this.monthSelectTarget.options].forEach((option) => {
+      const month = Number(option.value);
+      if (!Number.isFinite(month)) return;
+      option.textContent = new Date(2024, month, 1).toLocaleDateString(this.locale(), { month: "long" });
+    });
+  }
+
   updateCalendar(focusDay = null) {
     if (this.hasTitleTarget) {
       this.titleTarget.textContent = this.monthAndYear();
@@ -288,6 +320,7 @@ export default class extends Controller {
         ? document.activeElement.dataset?.day
         : null);
     this.calendarTarget.innerHTML = this.calendarHTML();
+    this.localizeChrome();
     this.ensureGridTabStop(focusedDay);
   }
 
@@ -419,7 +452,7 @@ export default class extends Controller {
       dayDate: day.getDate(),
       // full human-readable date for the button's accessible name — a bare
       // day number ("14") is meaningless to a screen reader
-      dayLabel: day.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
+      dayLabel: day.toLocaleDateString(this.locale(), { weekday: "long", month: "long", day: "numeric", year: "numeric" }),
       state: this.dayState(day),
     };
 
@@ -499,10 +532,10 @@ export default class extends Controller {
       .filter(Boolean);
   }
 
+  // One Intl call rather than `${month} ${year}` so locales that order the
+  // parts differently (ja-JP → "2026年1月") come out right, not just translated.
   monthAndYear() {
-    const month = this.viewDate().toLocaleString("en-US", { month: "long" });
-    const year = this.viewDate().getFullYear();
-    return `${month} ${year}`;
+    return this.viewDate().toLocaleDateString(this.locale(), { month: "long", year: "numeric" });
   }
 
   selectedDate() {
@@ -592,8 +625,8 @@ export default class extends Controller {
     const hours = date.getHours();
     const minutes = date.getMinutes();
     const seconds = date.getSeconds();
-    const dayOfWeek = date.toLocaleString("en-US", { weekday: "long" });
-    const monthName = date.toLocaleString("en-US", { month: "long" });
+    const dayOfWeek = date.toLocaleString(this.locale(), { weekday: "long" });
+    const monthName = date.toLocaleString(this.locale(), { month: "long" });
     const daySuffix = this.getDaySuffix(day);
 
     const map = {

data/app/components/phlex_kit/command/command.rb

@@ -7,7 +7,15 @@ module PhlexKit
   # Upstream's fuse.js fuzzy search is replaced with a dependency-free substring
   # match in the controller. Tailwind → vanilla `.pk-command*` (command.css).
   class Command < BaseComponent
-    def initialize(**attrs)
+    # Announcement templates for the live region — the only strings the
+    # controller writes itself (CommandEmpty is server-rendered, so it
+    # localizes with the rest of your markup). %{count} is interpolated.
+    DEFAULT_RESULTS_FORMAT = "%{count} result(s)"
+    DEFAULT_NO_RESULTS_TEXT = "No results"
+
+    def initialize(results_format: DEFAULT_RESULTS_FORMAT, no_results_text: DEFAULT_NO_RESULTS_TEXT, **attrs)
+      @results_format = results_format
+      @no_results_text = no_results_text
       @attrs = attrs
     end
 
@@ -21,12 +29,17 @@ module PhlexKit
     private
 
     # Screen-reader announcement of the filtered result count — the controller
-    # writes "N results" / "No results" into it from filter().
+    # writes the results_format / no_results_text strings into it from
+    # filter(), interpolating %{count}.
     def live_region
       div(
         class: "pk-sr-only",
         aria: { live: "polite" },
-        data: { phlex_kit__command_target: "liveRegion" }
+        data: {
+          phlex_kit__command_target: "liveRegion",
+          results_format: @results_format,
+          no_results_text: @no_results_text
+        }
       )
     end
   end

data/app/components/phlex_kit/command/command_controller.js

@@ -262,8 +262,13 @@ export default class extends Controller {
     if (count === null) {
       this.liveRegionTarget.textContent = "";
     } else {
+      // Templates come from the server (Command's results_format: /
+      // no_results_text: kwargs) — the defaults mirror command.rb's.
+      const data = this.liveRegionTarget.dataset;
       this.liveRegionTarget.textContent =
-        count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"}`;
+        count === 0
+          ? data.noResultsText || "No results"
+          : (data.resultsFormat || "%{count} result(s)").replace("%{count}", count);
     }
   }
 

data/app/components/phlex_kit/date_picker/date_picker.rb

@@ -20,6 +20,7 @@ module PhlexKit
       placeholder: "Select a date",
       selected_date: value,
       date_format: "yyyy-MM-dd",
+      locale: nil,
       input_attrs: {},
       calendar_attrs: {},
       trigger_attrs: {},
@@ -31,6 +32,7 @@ module PhlexKit
       @label = label
       @selected_date = selected_date
       @date_format = date_format
+      @locale = locale
       # Seed the input with the same date_format the calendar controller
       # writes — a bare `selected_date.to_s` (ISO) would mismatch the format
       # until the first interaction.
@@ -65,7 +67,8 @@ module PhlexKit
             end
           end
           render PopoverContent.new(**@content_attrs) do
-            render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format, **@calendar_attrs)
+            render Calendar.new(input_id: input_selector, selected_date: @selected_date, date_format: @date_format,
+              locale: @locale, **@calendar_attrs)
           end
         end
       end

data/lib/phlex_kit/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module PhlexKit
-  VERSION = "0.14.1"
+  VERSION = "0.15.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: phlex_kit
 version: !ruby/object:Gem::Version
-  version: 0.14.1
+  version: 0.15.0
 platform: ruby
 authors:
 - Matt Kennedy