@stimulus-plumbers/controllers 0.3.2 → 0.4.0

package/src/controllers/{input_format_controller.js → input_formatter_controller.js}

@@ -5,27 +5,27 @@ import { attachFormatter } from '../plumbers';
 export default class extends Controller {
   static targets = ['input', 'toggle'];
   static values = {
-    type: { type: String, default: 'plain' },
+    format: { type: String, default: 'plain' },
     options: { type: Object, default: {} },
     revealed: { type: Boolean, default: false },
   };
 
   connect() {
-    attachFormatter(this, { type: this.typeValue, options: this.optionsValue });
+    attachFormatter(this, { type: this.formatValue, options: this.optionsValue });
     this.format(this.readValue());
     this.drawToggle();
   }
 
-  typeValueChanged() {
+  formatValueChanged() {
     if (!this.formatter) return;
-    attachFormatter(this, { type: this.typeValue, options: this.optionsValue });
+    attachFormatter(this, { type: this.formatValue, options: this.optionsValue });
     this.format(this.readValue());
     this.drawToggle();
   }
 
   optionsValueChanged() {
     if (!this.formatter) return;
-    attachFormatter(this, { type: this.typeValue, options: this.optionsValue });
+    attachFormatter(this, { type: this.formatValue, options: this.optionsValue });
     this.format(this.readValue());
   }
 
@@ -45,7 +45,7 @@ export default class extends Controller {
   }
 
   toggle() {
-    if (!this.formatter.maskable() && this.typeValue !== 'password') return;
+    if (!this.formatter.maskable() && this.formatValue !== 'password') return;
     this.revealedValue = !this.revealedValue;
   }
 
@@ -59,7 +59,7 @@ export default class extends Controller {
 
   drawToggle() {
     if (!this.hasToggleTarget) return;
-    const hasToggleBehavior = this.formatter?.maskable() || this.typeValue === 'password';
+    const hasToggleBehavior = this.formatter?.maskable() || this.formatValue === 'password';
     this.toggleTarget.hidden = !hasToggleBehavior;
     if (hasToggleBehavior) setPressed(this.toggleTarget, this.revealedValue);
   }
@@ -72,7 +72,7 @@ export default class extends Controller {
   onFormatting(raw) {
     if (!this.formatter) return;
 
-    if (this.typeValue === 'password') {
+    if (this.formatValue === 'password') {
       if (this.hasInputTarget) this.inputTarget.type = this.revealedValue ? 'text' : 'password';
       return;
     }

package/src/controllers/popover_controller.js

@@ -1,47 +1,69 @@
 import { Controller } from '@hotwired/stimulus';
-import { attachContentLoader, attachVisibility } from '../plumbers';
+import { focusFirst } from '../accessibility/focus';
+import { attachContentLoader, attachDismisser, attachVisibility } from '../plumbers';
 
 export default class extends Controller {
-  static targets = ['content', 'template', 'loader', 'activator'];
+  static targets = ['trigger', 'panel', 'template', 'loader'];
   static classes = ['hidden'];
   static values = {
     url: String,
     loadedAt: String,
     reload: { type: String, default: 'never' },
     staleAfter: { type: Number, default: 3600 },
+    closeOnSelect: { type: Boolean, default: true },
   };
 
   connect() {
     attachContentLoader(this, {
-      element: this.hasContentTarget ? this.contentTarget : null,
+      element: this.hasPanelTarget ? this.panelTarget : null,
       url: this.hasUrlValue ? this.urlValue : null,
     });
 
-    if (this.hasContentTarget) {
+    if (this.hasPanelTarget) {
       attachVisibility(this, {
-        element: this.contentTarget,
-        activator: this.hasActivatorTarget ? this.activatorTarget : null,
+        element: this.panelTarget,
+        activator: this.hasTriggerTarget ? this.triggerTarget : null,
       });
+      attachDismisser(this);
     }
     if (this.hasLoaderTarget)
       attachVisibility(this, { element: this.loaderTarget, visibility: 'contentLoaderVisibility' });
   }
 
-  async show() {
+  async dismissed() {
+    await this.close();
+  }
+
+  async open() {
+    if (!this.hasPanelTarget) return;
     await this.visibility.show();
   }
 
-  async hide() {
+  async close() {
+    if (!this.hasPanelTarget) return;
     await this.visibility.hide();
   }
 
+  async toggle() {
+    this.visibility?.visible ? await this.close() : await this.open();
+  }
+
+  async closeOnSelect() {
+    if (this.closeOnSelectValue) await this.close();
+  }
+
   async shown() {
     await this.load();
+    if (this.hasPanelTarget) focusFirst(this.panelTarget);
+  }
+
+  async hidden() {
+    if (this.hasTriggerTarget) this.triggerTarget.focus();
   }
 
   canLoad() {
-    if (this.hasContentTarget && this.contentTarget.tagName.toLowerCase() === 'turbo-frame') {
-      if (this.hasUrlValue) this.contentTarget.setAttribute('src', this.urlValue);
+    if (this.hasPanelTarget && this.panelTarget.tagName.toLowerCase() === 'turbo-frame') {
+      if (this.hasUrlValue) this.panelTarget.setAttribute('src', this.urlValue);
       return false;
     }
     return true;
@@ -52,8 +74,8 @@ export default class extends Controller {
   }
 
   async contentLoaded({ content }) {
-    if (this.hasContentTarget) {
-      this.contentTarget.replaceChildren(this.getContentNode(content));
+    if (this.hasPanelTarget) {
+      this.panelTarget.replaceChildren(this.getContentNode(content));
     }
     if (this.hasLoaderTarget) await this.contentLoaderVisibility.hide();
   }

package/src/index.js

@@ -18,7 +18,7 @@ export { Formatter, FORMATTER_TYPES } from './plumbers/formatter.js';
 
 // Export Stimulus controllers
 export { default as CalendarMonthController } from './controllers/calendar_month_controller.js';
-export { default as CalendarMonthObserverController } from './controllers/calendar_month_observer_controller.js';
+export { default as CalendarObserverController } from './controllers/calendar_observer_controller.js';
 export { default as ClipboardController } from './controllers/clipboard_controller.js';
 export { default as ComboboxDateController } from './controllers/combobox_date_controller.js';
 export { default as ComboboxDropdownController } from './controllers/combobox_dropdown_controller.js';
@@ -26,8 +26,8 @@ export { default as ComboboxTimeController } from './controllers/combobox_time_c
 export { default as DismisserController } from './controllers/dismisser_controller.js';
 export { default as FlipperController } from './controllers/flipper_controller.js';
 export { default as InputComboboxController } from './controllers/input_combobox_controller.js';
-export { default as InputFormatController } from './controllers/input_format_controller.js';
-export { default as InputSearchController } from './controllers/input_search_controller.js';
+export { default as InputFormatterController } from './controllers/input_formatter_controller.js';
+export { default as InputClearableController } from './controllers/input_clearable_controller.js';
 export { default as ModalController } from './controllers/modal_controller.js';
 export { default as PannerController } from './controllers/panner_controller.js';
 export { default as PopoverController } from './controllers/popover_controller.js';

package/src/plumbers/calendar.js

@@ -77,6 +77,7 @@ export class Calendar extends Plumber {
     this.daysOfWeek = this.buildDaysOfWeek();
     this.daysOfMonth = this.buildDaysOfMonth();
     this.monthsOfYear = this.buildMonthsOfYear();
+    this.yearsOfDecade = this.buildYearsOfDecade();
   }
 
   /**
@@ -162,6 +163,24 @@ export class Calendar extends Plumber {
     return monthsOfYear;
   }
 
+  /**
+   * Builds array of year objects spanning the decade containing the current year.
+   * Returns 12 entries: decade start - 1 (buffer) through decade start + 10 (buffer).
+   * @returns {Array<Object>} Array of year objects
+   */
+  buildYearsOfDecade() {
+    const decadeStart = Math.floor(this.year / 10) * 10;
+    const yearsOfDecade = [];
+    for (let i = decadeStart - 1; i <= decadeStart + 10; i++) {
+      yearsOfDecade.push({
+        value: i,
+        current: i === this.year,
+        outside: i < decadeStart || i > decadeStart + 9,
+      });
+    }
+    return yearsOfDecade;
+  }
+
   /**
    * Gets the current "today" reference date.
    * @returns {Date} Today's date
@@ -177,11 +196,11 @@ export class Calendar extends Plumber {
   set today(value) {
     if (!isValidDate(value)) return;
 
-    const month = this.month ? this.month : value.getMonth();
-    const year = this.year ? this.year : value.getFullYear();
+    const month = this.month ?? value.getMonth();
+    const year = this.year ?? value.getFullYear();
     const sameMonthYear = month == value.getMonth() && year == value.getFullYear();
-    const day = this.hasDayValue ? this.day : sameMonthYear ? value.getDate() : 1;
-    this.now = new Date(year, month, day).toISOString();
+    const day = sameMonthYear ? value.getDate() : 1;
+    this.now = new Date(year, month, day);
   }
 
   /**
@@ -380,6 +399,9 @@ export class Calendar extends Plumber {
           get monthsOfYear() {
             return context.monthsOfYear;
           },
+          get yearsOfDecade() {
+            return context.yearsOfDecade;
+          },
           navigate: async (to) => await context.navigate(to),
           step: async (type, value) => await context.step(type, value),
           isDisabled: (date) => context.isDisabled(date),

package/src/plumbers/plumber/date.js

@@ -1,3 +1,5 @@
+const DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
 export function isValidDate(value) {
   return value instanceof Date && !isNaN(value);
 }
@@ -5,8 +7,17 @@ export function isValidDate(value) {
 export function tryParseDate(...values) {
   if (values.length === 0) throw 'Missing values to parse as date';
   if (values.length === 1) {
-    const parsed = new Date(values[0]);
-    if (values[0] && isValidDate(parsed)) return parsed;
+    const dateValue = values[0];
+    if (!dateValue) return undefined;
+    if (typeof dateValue === 'string' && DATE_ONLY_PATTERN.test(dateValue)) {
+      // YYYY-MM-DD strings are UTC by spec; use local constructor instead
+      const [year, month, day] = dateValue.split('-').map(Number);
+      const parsed = new Date(year, month - 1, day);
+      if (isValidDate(parsed)) return parsed;
+    } else {
+      const parsed = new Date(dateValue);
+      if (isValidDate(parsed)) return parsed;
+    }
   } else {
     const parsed = new Date(...values);
     if (isValidDate(parsed)) return parsed;