npm - @cahyo-dimas/freeday - Versions diffs - 3.7.0 → 3.9.0 - Mend

@cahyo-dimas/freeday 3.7.0 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/CHANGELOG.md +197 -0
package/COMPONENTS.md +214 -18
package/README.id.md +4 -4
package/README.md +4 -3
package/adapters/blazor/FdyDatepicker.razor +3 -1
package/adapters/blazor/FdyDatepicker.razor.cs +36 -1
package/adapters/blazor/FdyMonthpicker.razor +29 -0
package/adapters/blazor/FdyMonthpicker.razor.cs +102 -0
package/adapters/blazor/FdyTable.razor +6 -1
package/adapters/blazor/FdyTable.razor.cs +33 -0
package/adapters/blazor/FdyTableFooter.razor +6 -6
package/adapters/blazor/FdyTableFooter.razor.cs +36 -0
package/adapters/core/month-grid.d.ts +116 -0
package/adapters/core/month-grid.js +234 -0
package/adapters/react/components/FdyDatepicker.tsx +164 -166
package/adapters/react/components/FdyMonthpicker.tsx +400 -0
package/adapters/react/components/FdyTable.tsx +38 -2
package/adapters/react/components/FdyTableFilter.tsx +13 -1
package/adapters/react/components/FdyTableFooter.tsx +37 -6
package/adapters/react/index.d.ts +6 -2
package/adapters/react/index.js +1 -0
package/adapters/react/usePopover.ts +54 -9
package/adapters/vue/components/FdyDatepicker.vue +158 -160
package/adapters/vue/components/FdyMonthpicker.vue +387 -0
package/adapters/vue/components/FdyTable.vue +33 -1
package/adapters/vue/components/FdyTableFilter.vue +13 -1
package/adapters/vue/components/FdyTableFooter.vue +39 -6
package/adapters/vue/index.d.ts +16 -0
package/adapters/vue/index.js +1 -0
package/adapters/vue/usePopover.ts +53 -10
package/dist/freeday-datepicker.js +68 -14
package/dist/freeday-menu.js +15 -1
package/dist/freeday-popover.js +33 -11
package/dist/freeday-table.js +64 -5
package/dist/freeday-tabs.js +21 -2
package/dist/freeday.bundle.css +50 -2
package/dist/freeday.css +50 -2
package/dist/freeday.js +201 -33
package/docs/agent-onboarding.md +3 -3
package/docs/getting-started.md +6 -6
package/docs/integrations.md +22 -4
package/package.json +2 -2
package/src/components/table.css +19 -2
package/src/components/tabs.css +31 -0

package/adapters/vue/components/FdyMonthpicker.vue ADDED Viewed

@@ -0,0 +1,387 @@
+<script lang="ts">
+/* The one format this component speaks, re-exported from the shared core so the name has a single
+   home. `FdyDatepicker` cannot use it: its `modelValue` holds `YYYY-MM-DD` or `YYYY-MM` depending
+   on `mode`, and a `defineProps<{...}>` cannot carry a union discriminated by another prop. That
+   is the whole reason this component exists. */
+export type { FdyMonth } from '../../core/month-grid';
+</script>
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+import {
+  YEARS_PER_PAGE,
+  addMonths,
+  monthCells as buildMonthCells,
+  monthFormatters,
+  monthKeyIntent,
+  pageLocale,
+  parseISOMonth,
+  startOfMonth,
+  toISOMonth,
+  yearCells as buildYearCells,
+  yearKeyIntent,
+  yearPageStart,
+  yearRangeLabel,
+  type FdyMonthCell,
+  type FdyMonthFormatters,
+  type FdyYearCell,
+} from '../../core/month-grid.js';
+// A controlled month picker over freeday's `.fdy-datepicker` / `.fdy-cal__*` classes (see
+// src/components/datepicker.css). It renders the same trigger and the same popover the date picker
+// does, and reuses `FdyDatepicker`'s own month and year grids through
+// adapters/core/month-grid.js, so there is one copy of that logic rather than a fifth.
+//
+// It exists for its SIGNATURE. 3.8.0 answered "we need a month" with `mode="month"` on
+// FdyDatepicker, which left `modelValue: string | null` carrying `YYYY-MM-DD` or `YYYY-MM`
+// depending on a different prop. Here the value has one format, there is no mode to read, and the
+// day grid is absent rather than merely unvisited.
+//
+// Month names come from `<html lang>` through Intl, which is the capability `<input type="month">`
+// cannot offer: it names the month in the BROWSER's language.
+/** Which grid is on screen. There is no level below months here: that is the component. */
+type CalendarLevel = 'months' | 'years';
+const props = defineProps<{
+  /** The chosen month, ISO `YYYY-MM` (`'2026-10'`). `''`/`null` for empty. One format, always. */
+  modelValue: string | null;
+  /** Earliest selectable month, `YYYY-MM` (a full `YYYY-MM-DD` is read too, as its own month). */
+  min?: string;
+  /** Latest selectable month. A bound that falls inside a month leaves that month pickable. */
+  max?: string;
+  /** BCP-47 tag for the month names. Defaults to the page's `<html lang>`, then `en`. */
+  locale?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its month, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+  id?: string;
+  ariaLabelledby?: string;
+  /** Show a clear (×) button in the trigger when a month is set, so an optional month can be unset. Emits `''` via update:modelValue + change. Off by default. */
+  clearable?: boolean;
+  /** aria-label for the clear button (when `clearable`). Default 'Clear month'. */
+  clearLabel?: string;
+  /** aria-labels for the year arrows shown in the month grid. Defaults 'Previous year' / 'Next year'. */
+  prevYearLabel?: string;
+  nextYearLabel?: string;
+  /** aria-label for the title button that drills from the month grid to the year grid. Default 'Choose year'. */
+  chooseYearLabel?: string;
+  /** aria-labels for the page arrows shown in the year grid. Defaults 'Previous years' / 'Next years'. */
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
+}>();
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+const baseId: string = useId();
+const triggerId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-trigger`);
+const titleId: string = `${baseId}-title`;
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLDivElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+// Render the panel in the top layer (popover) so it never gets clipped by a card or scroll
+// container; positions against the trigger. Same plumbing every kit dropdown uses.
+usePopover(panelEl, triggerEl, open);
+/** Resolved once here so every formatter below reads the same tag. */
+const activeLocale: ComputedRef<string> = computed((): string => props.locale ?? pageLocale());
+const formatters: ComputedRef<FdyMonthFormatters> = computed(
+  (): FdyMonthFormatters => monthFormatters(activeLocale.value),
+);
+const selectedDate: ComputedRef<Date | null> = computed((): Date | null => parseISOMonth(props.modelValue));
+const minDate: ComputedRef<Date | null> = computed((): Date | null => parseISOMonth(props.min));
+const maxDate: ComputedRef<Date | null> = computed((): Date | null => parseISOMonth(props.max));
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const displayPlaceholder: ComputedRef<string> = computed((): string => props.placeholder ?? 'Select month');
+const showClear: ComputedRef<boolean> = computed(
+  (): boolean => props.clearable === true && selectedDate.value !== null && isDisabled.value === false && isReadonly.value === false,
+);
+const clearLabelText: ComputedRef<string> = computed((): string => props.clearLabel ?? 'Clear month');
+const chooseYearLabelText: ComputedRef<string> = computed((): string => props.chooseYearLabel ?? 'Choose year');
+const prevYearLabelText: ComputedRef<string> = computed((): string => props.prevYearLabel ?? 'Previous year');
+const nextYearLabelText: ComputedRef<string> = computed((): string => props.nextYearLabel ?? 'Next year');
+const prevYearsLabelText: ComputedRef<string> = computed((): string => props.prevYearsLabel ?? 'Previous years');
+const nextYearsLabelText: ComputedRef<string> = computed((): string => props.nextYearsLabel ?? 'Next years');
+/** The year the month grid shows, held as its January so the shared helpers can take a Date. */
+const view: Ref<Date> = ref(startOfMonth(selectedDate.value ?? new Date()));
+const level: Ref<CalendarLevel> = ref('months');
+const focusMonth: Ref<number> = ref(0);
+const focusYear: Ref<number> = ref(0);
+/* The month named in the page's language, through the same formatter the cells use. This is the
+   capability `<input type="month">` cannot be pushed into: it reads the browser. */
+const displayValue: ComputedRef<string> = computed((): string => {
+  if (selectedDate.value === null) return displayPlaceholder.value;
+  return formatters.value.name.format(selectedDate.value);
+});
+const monthCells: ComputedRef<FdyMonthCell[]> = computed((): FdyMonthCell[] => buildMonthCells({
+  year: view.value.getFullYear(),
+  selected: selectedDate.value,
+  min: minDate.value,
+  max: maxDate.value,
+  focusMonth: focusMonth.value,
+  formatters: formatters.value,
+}));
+const yearPage: ComputedRef<number> = computed((): number => yearPageStart(focusYear.value));
+const yearCells: ComputedRef<FdyYearCell[]> = computed((): FdyYearCell[] => buildYearCells({
+  pageStart: yearPage.value,
+  selected: selectedDate.value,
+  min: minDate.value,
+  max: maxDate.value,
+  focusYear: focusYear.value,
+}));
+const yearRangeText: ComputedRef<string> = computed((): string => yearRangeLabel(yearPage.value));
+function focusMonthCell(): void {
+  const cell: HTMLElement | null = panelEl.value?.querySelector('.fdy-cal__month[tabindex="0"]') ?? null;
+  cell?.focus();
+}
+function focusYearCell(): void {
+  const cell: HTMLElement | null = panelEl.value?.querySelector('.fdy-cal__year[tabindex="0"]') ?? null;
+  cell?.focus();
+}
+/** `index` is already 0-11: the wrap lives in `monthKeyIntent`, so it is applied in one place. */
+function moveMonthFocus(index: number, yearDelta: number): void {
+  if (yearDelta !== 0) view.value = addMonths(view.value, yearDelta * 12);
+  focusMonth.value = index;
+  void nextTick((): void => focusMonthCell());
+}
+/* A month is the ANSWER here. In FdyDatepicker the same click walks down into the month's days,
+   which is the one thing the two components do differently with the shared grid. */
+function pickMonth(index: number): void {
+  const year: number = view.value.getFullYear();
+  if (monthCells.value[index].disabled) return;
+  const first: Date = new Date(year, index, 1);
+  focusMonth.value = index;
+  view.value = first;
+  const iso: string = toISOMonth(first);
+  emit('update:modelValue', iso);
+  emit('change', iso);
+  closePanel(true);
+}
+function openYearGrid(): void {
+  focusYear.value = view.value.getFullYear();
+  level.value = 'years';
+  void nextTick((): void => focusYearCell());
+}
+function openMonthGrid(): void {
+  focusMonth.value = view.value.getMonth();
+  level.value = 'months';
+  void nextTick((): void => focusMonthCell());
+}
+/* Picking a year is NAVIGATION and commits nothing: it drops to that year's months, where the
+   answer is given. Without this level, reaching a month four years back is four arrow presses per
+   year and no pointer route at all. */
+function openYear(year: number): void {
+  view.value = new Date(year, view.value.getMonth(), 1);
+  openMonthGrid();
+}
+function moveYearFocus(year: number): void {
+  focusYear.value = year;
+  view.value = new Date(year, view.value.getMonth(), 1);
+  void nextTick((): void => focusYearCell());
+}
+function onMonthKeydown(e: KeyboardEvent): void {
+  const intent = monthKeyIntent(e.key, focusMonth.value);
+  if (intent.action === 'none') return;
+  e.preventDefault();
+  if (intent.action === 'focus') moveMonthFocus(intent.index, intent.yearDelta);
+  else if (intent.action === 'choose') pickMonth(intent.index);
+  else closePanel(true);
+}
+function onYearKeydown(e: KeyboardEvent): void {
+  const intent = yearKeyIntent(e.key, focusYear.value);
+  if (intent.action === 'none') return;
+  /* stopPropagation as well, matching FdyDatepicker's year grid: the panel is in the top layer and
+     a bubbling Escape would otherwise be read a second time by whatever is behind it. */
+  e.preventDefault();
+  e.stopPropagation();
+  if (intent.action === 'focus') moveYearFocus(intent.year);
+  else if (intent.action === 'choose') openYear(intent.year);
+  else closePanel(true);
+}
+// Clear (reset to empty). Emits '', parseISOMonth('') is null, so the placeholder shows again.
+function clearValue(): void {
+  emit('update:modelValue', '');
+  emit('change', '');
+  open.value = false;
+  triggerEl.value?.focus();
+}
+function openPanel(): void {
+  if (isDisabled.value || isReadonly.value || open.value) return;
+  view.value = startOfMonth(selectedDate.value ?? view.value);
+  /* Reopening starts on months. Without this a picker that drilled to the year grid and was
+     dismissed would open on years next time, and a keyboard user would land on a grid that cannot
+     answer. */
+  level.value = 'months';
+  focusMonth.value = view.value.getMonth();
+  open.value = true;
+  void nextTick((): void => focusMonthCell());
+}
+function closePanel(returnFocus: boolean): void {
+  if (!open.value) return;
+  open.value = false;
+  if (returnFocus) triggerEl.value?.focus();
+}
+function toggle(): void {
+  if (open.value) closePanel(false);
+  else openPanel();
+}
+// Close when a pointer lands outside the whole control.
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) {
+    closePanel(false);
+  }
+}
+/* A null relatedTarget means focus fell to <body>, which is what happens when the element the user
+ * just pressed is REMOVED by the click it triggered (drilling into the year grid replaces the grid,
+ * and with it the cell that had focus). That is not focus leaving the control, and closing on it
+ * made the panel vanish mid-navigation. A pointer that really lands outside is handled by the
+ * mousedown listener, which is the reliable path for that case. */
+function onFocusout(e: FocusEvent): void {
+  const next: EventTarget | null = e.relatedTarget;
+  if (next === null) return;
+  if (rootEl.value !== null && !(next instanceof Node && rootEl.value.contains(next))) {
+    closePanel(false);
+  }
+}
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+</script>
+<template>
+  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }" @focusout="onFocusout">
+    <button
+      :id="triggerId"
+      ref="triggerEl"
+      type="button"
+      class="fdy-datepicker__trigger"
+      :class="{ 'is-open': open }"
+      aria-haspopup="dialog"
+      :aria-expanded="open"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <span class="fdy-datepicker__value" :class="{ 'fdy-datepicker__value--placeholder': selectedDate === null }">{{ displayValue }}</span>
+      <span class="fdy-datepicker__icon" :class="{ 'is-hidden': showClear }" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="3" y="4" width="18" height="18" rx="2"></rect>
+          <path d="M16 2v4M8 2v4M3 10h18"></path>
+        </svg>
+      </span>
+    </button>
+    <button
+      v-if="showClear"
+      type="button"
+      class="fdy-datepicker__clear"
+      :aria-label="clearLabelText"
+      @mousedown.prevent
+      @click="clearValue"
+    >
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+        <path d="M18 6 6 18M6 6l12 12"></path>
+      </svg>
+    </button>
+    <div ref="panelEl" class="fdy-datepicker__panel" role="dialog" aria-modal="false" popover="manual" :aria-labelledby="titleId" :hidden="!open">
+      <!-- ONE head for both levels on purpose: swapping it with v-if destroys the very button the
+           user just pressed, focus falls to <body>, and the panel's own focusout handler closes it.
+           The labels and handlers switch; the elements do not. -->
+      <div class="fdy-cal__head">
+        <button
+          type="button"
+          class="fdy-cal__nav"
+          :aria-label="level === 'years' ? prevYearsLabelText : prevYearLabelText"
+          @click="level === 'years' ? moveYearFocus(focusYear - YEARS_PER_PAGE) : moveMonthFocus(focusMonth, -1)"
+        >‹</button>
+        <button
+          :id="titleId"
+          type="button"
+          class="fdy-cal__title"
+          :aria-label="level === 'years' ? undefined : chooseYearLabelText"
+          @click="level === 'years' ? openMonthGrid() : openYearGrid()"
+        >{{ level === 'years' ? yearRangeText : String(view.getFullYear()) }}</button>
+        <button
+          type="button"
+          class="fdy-cal__nav"
+          :aria-label="level === 'years' ? nextYearsLabelText : nextYearLabelText"
+          @click="level === 'years' ? moveYearFocus(focusYear + YEARS_PER_PAGE) : moveMonthFocus(focusMonth, 1)"
+        >›</button>
+      </div>
+      <div v-if="level === 'years'" class="fdy-cal__grid fdy-cal__grid--years" role="grid" :aria-labelledby="titleId" @keydown="onYearKeydown">
+        <button
+          v-for="cell in yearCells"
+          :key="cell.year"
+          type="button"
+          class="fdy-cal__year"
+          :class="{ 'is-today': cell.today, 'is-selected': cell.selected }"
+          role="gridcell"
+          :aria-label="String(cell.year)"
+          :aria-selected="cell.selected ? 'true' : undefined"
+          :disabled="cell.disabled"
+          :tabindex="cell.focusable ? 0 : -1"
+          @click="openYear(cell.year)"
+        >{{ cell.year }}</button>
+      </div>
+      <div v-else class="fdy-cal__grid fdy-cal__grid--months" role="grid" :aria-labelledby="titleId" @keydown="onMonthKeydown">
+        <button
+          v-for="cell in monthCells"
+          :key="cell.index"
+          type="button"
+          class="fdy-cal__month"
+          :class="{ 'is-today': cell.today, 'is-selected': cell.selected }"
+          role="gridcell"
+          :aria-label="cell.ariaLabel"
+          :aria-selected="cell.selected ? 'true' : undefined"
+          :disabled="cell.disabled"
+          :tabindex="cell.focusable ? 0 : -1"
+          @click="pickMonth(cell.index)"
+        >{{ cell.label }}</button>
+      </div>
+    </div>
+  </div>
+</template>

package/adapters/vue/components/FdyTable.vue CHANGED Viewed

@@ -69,6 +69,13 @@ const props = withDefaults(defineProps<{
   pageSizes?: readonly number[];
   pageIndex?: number;
   loading?: boolean;
+  /** The loading row's text, rendered by this table rather than by the footer. Default `Loading…`.
+   *  Blazor has carried `LoadingText` all along while the two script adapters wrote the word into
+   *  the template, so a table in any other language could translate its empty row and not the row
+   *  right beside it. Defaulted here, like `emptyText` and the four selection strings, and
+   *  unlike the six footer strings further down, which the footer defaults because the footer is
+   *  what renders them. */
+  loadingText?: string;
   emptyText?: string;
   ariaLabel?: string;
   /** Opt in to row activation: rows become focusable and emit `row-activate` on click/Enter/Space. */
@@ -96,6 +103,23 @@ const props = withDefaults(defineProps<{
   selectRowLabel?: string;
   /** Accessible name of the bulk bar region. Default `Bulk actions`. */
   bulkLabel?: string;
+  /* The footer's six strings, forwarded to the `FdyTableFooter` this table draws itself. 3.8.0 gave
+   * the footer those props and this table passed none of them on, so the hatch reached every footer
+   * except the one almost every screen uses, and the documented way out was to switch the footer off
+   * and render it yourself: a door that opens only if you stop using the table. Flat props, with the
+   * footer's own names, so moving between the two routes moves a prop rather than reshaping it. */
+  /** Footer range line, `{from}` `{to}` `{total}` substituted. Default `Showing {from}–{to} of {total}`. */
+  infoText?: string;
+  /** Footer: the visible word beside the rows-per-page control, which also names it. Default `Rows`. */
+  pageSizeLabel?: string;
+  /** Footer: accessible name of the pager landmark. Default `Pagination`. */
+  paginationLabel?: string;
+  /** Footer: accessible name of the previous-page arrow. Default `Previous page`. */
+  prevLabel?: string;
+  /** Footer: accessible name of the next-page arrow. Default `Next page`. */
+  nextLabel?: string;
+  /** Footer: accessible name of a numbered page button. `{n}` substituted. Default `Go to page {n}`. */
+  pageLabel?: string;
 }>(), { pager: true });
 const emit = defineEmits<{
@@ -418,7 +442,7 @@ const colSpan: ComputedRef<number> = computed((): number =>
         </thead>
         <tbody>
           <tr v-if="loading">
-            <td :colspan="colSpan" class="fdy-table__state" role="status">Loading…</td>
+            <td :colspan="colSpan" class="fdy-table__state" role="status">{{ loadingText ?? 'Loading…' }}</td>
           </tr>
           <tr v-else-if="displayRows.length === 0">
             <td :colspan="colSpan" class="fdy-table__state">
@@ -461,10 +485,18 @@ const colSpan: ComputedRef<number> = computed((): number =>
       </table>
     </div>
+    <!-- The six strings are passed as given, `undefined` included: every default lives in the
+         footer, so an omitted prop here is the footer's English and not a second copy of it. -->
     <FdyTableFooter
       v-if="pager !== false"
       :page="footerPage"
       :page-sizes="pageSizes"
+      :info-text="infoText"
+      :page-size-label="pageSizeLabel"
+      :pagination-label="paginationLabel"
+      :prev-label="prevLabel"
+      :next-label="nextLabel"
+      :page-label="pageLabel"
       @update:page="onFooterPage"
     />
   </div>

package/adapters/vue/components/FdyTableFilter.vue CHANGED Viewed

@@ -28,7 +28,19 @@ const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
 const panelEl: Ref<HTMLDivElement | null> = ref(null);
 const open: Ref<boolean> = ref(false);
-usePopover(panelEl, triggerEl, open);
+/* Always end-aligned, and not an option the parent can set: the funnel is a 24px button in a
+   column header while the panel runs past 200px, so lining up their LEFT edges aligns the panel
+   with nothing anybody can see. In the rightmost column, the one this was reported from, the panel
+   ran past the page and the viewport clamp parked it 4px off the screen edge. A prop no caller
+   would ever set to 'start' is a prop that should not exist. The clamp still catches the leftmost
+   column, where an end-aligned panel would hang off the other edge.
+   `matchWidth:false` for the other half of the same thought. Every other typed dropdown wants a
+   panel at least as wide as the control it hangs off; this one hangs off a 24px icon, and that
+   floor is written inline, where it outranks the `min-width:14rem` `.fdy-filter` asks for: the
+   panel measured 224px on the raw path and 206 here, and an enum column with short labels would
+   have gone narrower still. The choice sits in this component rather than in the hook, because a
+   hook that guessed it from the trigger's size would be guessing for the other nine callers too. */
+usePopover(panelEl, triggerEl, open, 'end', false);
 const active: ComputedRef<boolean> = computed((): boolean => isFilterActive(props.filter));

package/adapters/vue/components/FdyTableFooter.vue CHANGED Viewed

@@ -25,6 +25,28 @@ const props = defineProps<{
    * holds the row you were looking at.
    */
   pageSizes?: readonly number[];
+  /* The strings, six of them, one per thing this band says. The raw path has had a hatch since
+   * 1.39.0 (`data-fdy-text-<key>` read through `textOf()`) and this path had none, so an app that
+   * does not speak English could only rewrite the whole band by hand; one shipped eighty one lines
+   * of its own markup to change five words. Names follow the enhancer's `TEXT` keys where a key
+   * exists, `info`, `prev`, `next`, so one string is not two names across the two paths. The other
+   * three have no twin because on the raw path that markup is the app's own. Defaults stay English
+   * on every path, which COMPONENTS.md promises and the suite enforces. */
+  /**
+   * The range line. `{from}`, `{to}` and `{total}` are substituted, every occurrence, as `textOf()`
+   * does. Default `Showing {from}–{to} of {total}`, the enhancer's `info`.
+   */
+  infoText?: string;
+  /** The visible word beside the rows-per-page control, which also names it. Default `Rows`. */
+  pageSizeLabel?: string;
+  /** Accessible name of the pager landmark. Default `Pagination`. */
+  paginationLabel?: string;
+  /** Accessible name of the previous-page arrow. Default `Previous page`. */
+  prevLabel?: string;
+  /** Accessible name of the next-page arrow. Default `Next page`. */
+  nextLabel?: string;
+  /** Accessible name of a numbered page button. `{n}` substituted. Default `Go to page {n}`. */
+  pageLabel?: string;
 }>();
 const emit = defineEmits<{ 'update:page': [page: FdyPageState] }>();
@@ -47,6 +69,13 @@ const pages: ComputedRef<Array<number | 'ellipsis'>> = computed((): Array<number
   pageWindow(currentPage1.value, totalPages.value),
 );
+const infoLine: ComputedRef<string> = computed((): string =>
+  (props.infoText ?? 'Showing {from}–{to} of {total}')
+    .replace(/\{from\}/g, String(rangeFrom.value))
+    .replace(/\{to\}/g, String(rangeTo.value))
+    .replace(/\{total\}/g, String(props.page.total)),
+);
 const hasPager: ComputedRef<boolean> = computed((): boolean => props.page.size > 0 && totalPages.value > 1);
 const sizes: ComputedRef<readonly number[]> = computed((): readonly number[] => props.pageSizes ?? []);
 /* Just the number. The control sits beside a label reading "Rows", so "20 per page" states the same
@@ -58,6 +87,10 @@ const sizeOptions: ComputedRef<Array<{ value: string; label: string }>> = comput
  * the whole band in that case, and this is where that decision now lives. */
 const visible: ComputedRef<boolean> = computed((): boolean => hasPager.value || sizes.value.length > 0);
+function pageAriaLabel(page1: number): string {
+  return (props.pageLabel ?? 'Go to page {n}').replace(/\{n\}/g, String(page1));
+}
 function goTo(page1: number): void {
   const clamped: number = Math.min(Math.max(1, page1), totalPages.value);
   emit('update:page', { index: clamped - 1, size: props.page.size, total: props.page.total });
@@ -76,10 +109,10 @@ function onSize(value: string): void {
 <template>
   <div v-if="visible" class="fdy-table-footer">
-    <span class="fdy-table-footer__info">Showing {{ rangeFrom }}–{{ rangeTo }} of {{ page.total }}</span>
+    <span class="fdy-table-footer__info">{{ infoLine }}</span>
     <div v-if="sizes.length > 0" class="fdy-table-footer__size">
-      <span :id="sizeLabelId">Rows</span>
+      <span :id="sizeLabelId">{{ pageSizeLabel ?? 'Rows' }}</span>
       <!-- The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on macOS it
            drops a dark panel into a light page. FdyCombo's own header says exactly that. -->
       <FdyCombo
@@ -90,13 +123,13 @@ function onSize(value: string): void {
       />
     </div>
-    <nav v-if="hasPager" class="fdy-pagination" aria-label="Pagination">
+    <nav v-if="hasPager" class="fdy-pagination" :aria-label="paginationLabel ?? 'Pagination'">
       <ul class="fdy-pagination__list">
         <li>
           <button
             type="button"
             class="fdy-pagination__link"
-            aria-label="Previous page"
+            :aria-label="prevLabel ?? 'Previous page'"
             :disabled="currentPage1 === 1"
             @click="goTo(currentPage1 - 1)"
           >‹</button>
@@ -104,13 +137,13 @@ function onSize(value: string): void {
         <li v-for="(p, i) in pages" :key="typeof p === 'number' ? p : `gap-${i}`">
           <span v-if="p === 'ellipsis'" class="fdy-pagination__ellipsis">…</span>
           <span v-else-if="p === currentPage1" class="fdy-pagination__link" aria-current="page">{{ p }}</span>
-          <button v-else type="button" class="fdy-pagination__link" :aria-label="`Go to page ${p}`" @click="goTo(p)">{{ p }}</button>
+          <button v-else type="button" class="fdy-pagination__link" :aria-label="pageAriaLabel(p)" @click="goTo(p)">{{ p }}</button>
         </li>
         <li>
           <button
             type="button"
             class="fdy-pagination__link"
-            aria-label="Next page"
+            :aria-label="nextLabel ?? 'Next page'"
             :disabled="currentPage1 === totalPages"
             @click="goTo(currentPage1 + 1)"
           >›</button>

package/adapters/vue/index.d.ts CHANGED Viewed

@@ -12,6 +12,16 @@ export interface UseFreedayReturn {
  */
 export declare function useFreeday(rootRef?: Ref<HTMLElement | null>): UseFreedayReturn;
+/**
+ * Which of the panel's edges lines up with the trigger's. `'start'` (the default) puts the panel's
+ * LEFT edge on the trigger's left edge, right for an input-shaped dropdown; `'end'` puts its RIGHT
+ * edge on the trigger's right edge, which is what a panel much wider than its trigger needs when
+ * the trigger sits in a right-hand gutter or a table header. Either way the panel is kept inside
+ * the viewport, so `'end'` near the left edge slides right instead of hanging off it. Same two
+ * names as the raw `FreedayPopover.place()`.
+ */
+export type FdyPopoverAlign = 'start' | 'end';
 /**
  * Anchor a dropdown panel to its trigger in the top layer, so it escapes any ancestor overflow clip
  *, `.fdy-card` is `overflow:hidden`, so a panel positioned inside one is otherwise cut at the card's
@@ -23,10 +33,16 @@ export declare function usePopover(
   panelRef: Ref<HTMLElement | null>,
   triggerRef: Ref<HTMLElement | null>,
   open: Ref<boolean>,
+  align?: FdyPopoverAlign,
+  matchWidth?: boolean,
 ): void;
 export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
+/** A picker that answers with a whole month, `YYYY-MM`. Replaces `FdyDatepicker`'s deprecated
+ *  `mode="month"`, where one prop carried two formats and another prop chose between them. */
+export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
+export type { FdyMonth } from '../core/month-grid';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
 export type { DateRangeValue } from './components/FdyDateRange.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';

package/adapters/vue/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ export { useFreeday } from './useFreeday.js';
 export { usePopover } from './usePopover.ts';
 export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
+export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';