@cahyo-dimas/freeday 1.7.0 → 1.8.0

package/adapters/react/components/FdyTableFilter.tsx

@@ -0,0 +1,193 @@
+import type { JSX } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+import { isFilterActive } from '../../core/table-model.js';
+import type { FdyColumnFilter, FdyColumnFilterType } from '../../core/table-model.js';
+
+// Internal to FdyTable: one column's header funnel button + its type-aware filter popover
+// (text / enum / number / date) over freeday's `.fdy-table__filterbtn` + `.fdy-filter*` classes.
+// React port of adapters/vue/components/FdyTableFilter.vue. Reuses usePopover so the panel escapes
+// the table's `overflow:hidden` via the top layer. Purely controlled — renders the current
+// `filter`, emits the next one (or null to clear); the parent owns where it goes. Not exported.
+
+export interface FdyTableFilterProps {
+  label: string;
+  type: FdyColumnFilterType;
+  filter: FdyColumnFilter | undefined;
+  /** Distinct values for an enum filter (computed by the parent over the full row set). */
+  options: ReadonlyArray<string>;
+  /** The next filter for this column, or null to clear it. */
+  onChange: (filter: FdyColumnFilter | null) => void;
+}
+
+export function FdyTableFilter(props: FdyTableFilterProps): JSX.Element {
+  const rootRef = useRef<HTMLSpanElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState<boolean>(false);
+
+  usePopover(panelRef, triggerRef, open);
+  // Popover attr for React 18/19 JSX typing: set once on mount (same as the other components).
+  useEffect((): void => {
+    panelRef.current?.setAttribute('popover', 'manual');
+  }, []);
+
+  const active: boolean = isFilterActive(props.filter);
+  const filter: FdyColumnFilter | undefined = props.filter;
+  const textValue: string = filter?.type === 'text' ? filter.text : '';
+  const enumValues: ReadonlyArray<string> = filter?.type === 'enum' ? filter.values : [];
+  const numMin: string = filter?.type === 'number' && filter.min !== null ? String(filter.min) : '';
+  const numMax: string = filter?.type === 'number' && filter.max !== null ? String(filter.max) : '';
+  const dateFrom: string = filter?.type === 'date' && filter.from !== null ? filter.from : '';
+  const dateTo: string = filter?.type === 'date' && filter.to !== null ? filter.to : '';
+
+  function apply(next: FdyColumnFilter): void {
+    props.onChange(isFilterActive(next) ? next : null);
+  }
+  function parseNum(v: string): number | null {
+    const t: string = v.trim();
+    if (t === '') return null;
+    const n: number = Number(t);
+    return Number.isNaN(n) ? null : n;
+  }
+  function onEnumToggle(value: string, checked: boolean): void {
+    const set: string[] = enumValues.filter((v: string): boolean => v !== value);
+    if (checked) set.push(value);
+    apply({ type: 'enum', values: set });
+  }
+  function close(returnFocus: boolean): void {
+    setOpen(false);
+    if (returnFocus) triggerRef.current?.focus();
+  }
+  function reset(): void {
+    props.onChange(null);
+    close(true);
+  }
+
+  // Dismiss on outside pointer or Escape while open.
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    function onPointerDown(e: MouseEvent): void {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) close(false);
+    }
+    function onKeydown(e: KeyboardEvent): void {
+      if (e.key === 'Escape') close(true);
+    }
+    document.addEventListener('mousedown', onPointerDown);
+    document.addEventListener('keydown', onKeydown);
+    return (): void => {
+      document.removeEventListener('mousedown', onPointerDown);
+      document.removeEventListener('keydown', onKeydown);
+    };
+  }, [open]);
+
+  return (
+    <span ref={rootRef} className="fdy-table__filterwrap">
+      <button
+        ref={triggerRef}
+        type="button"
+        className={active ? 'fdy-table__filterbtn is-active' : 'fdy-table__filterbtn'}
+        aria-haspopup="dialog"
+        aria-pressed={active}
+        aria-expanded={open}
+        aria-label={`Filter ${props.label}`}
+        onClick={(e): void => {
+          e.stopPropagation();
+          setOpen((v: boolean): boolean => !v);
+        }}
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+          <path d="M3 5h18l-7 8v5l-4 2v-7z" />
+        </svg>
+      </button>
+
+      <div ref={panelRef} className="fdy-filter" hidden={!open} role="dialog" aria-label={`Filter ${props.label}`}>
+        {props.type === 'text' && (
+          <>
+            <div className="fdy-filter__title">Contains text</div>
+            <input
+              className="fdy-input"
+              type="search"
+              placeholder="Contains…"
+              value={textValue}
+              onChange={(e): void => apply({ type: 'text', text: e.target.value })}
+            />
+          </>
+        )}
+
+        {props.type === 'enum' && (
+          <>
+            <div className="fdy-filter__title">Show values</div>
+            <div className="fdy-filter__list">
+              {props.options.map((val: string): JSX.Element => (
+                <label key={val} className="fdy-filter__check">
+                  <input
+                    type="checkbox"
+                    className="fdy-checkbox"
+                    checked={enumValues.includes(val)}
+                    onChange={(e): void => onEnumToggle(val, e.target.checked)}
+                  />
+                  {val}
+                </label>
+              ))}
+            </div>
+          </>
+        )}
+
+        {props.type === 'number' && (
+          <>
+            <div className="fdy-filter__title">Value range</div>
+            <div className="fdy-filter__range">
+              <input
+                className="fdy-input"
+                type="text"
+                inputMode="numeric"
+                placeholder="Min"
+                value={numMin}
+                onChange={(e): void => apply({ type: 'number', min: parseNum(e.target.value), max: parseNum(numMax) })}
+              />
+              <span aria-hidden="true">–</span>
+              <input
+                className="fdy-input"
+                type="text"
+                inputMode="numeric"
+                placeholder="Max"
+                value={numMax}
+                onChange={(e): void => apply({ type: 'number', min: parseNum(numMin), max: parseNum(e.target.value) })}
+              />
+            </div>
+          </>
+        )}
+
+        {props.type === 'date' && (
+          <>
+            <div className="fdy-filter__title">Date range</div>
+            <div className="fdy-filter__range">
+              <input
+                className="fdy-input"
+                type="date"
+                aria-label="From"
+                value={dateFrom}
+                onChange={(e): void => apply({ type: 'date', from: e.target.value || null, to: dateTo || null })}
+              />
+              <span aria-hidden="true">–</span>
+              <input
+                className="fdy-input"
+                type="date"
+                aria-label="To"
+                value={dateTo}
+                onChange={(e): void => apply({ type: 'date', from: dateFrom || null, to: e.target.value || null })}
+              />
+            </div>
+          </>
+        )}
+
+        <div className="fdy-filter__foot">
+          <button type="button" className="fdy-btn fdy-btn--ghost fdy-btn--sm" onClick={reset}>Reset</button>
+          <button type="button" className="fdy-btn fdy-btn--sm" onClick={(): void => close(true)}>Close</button>
+        </div>
+      </div>
+    </span>
+  );
+}

package/adapters/react/index.d.ts

@@ -35,3 +35,19 @@ export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAuto
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
 export { FdyCfl, type FdyCflProps, type CflColumn, type CflPage } from './components/FdyCfl';
 export { FdyChart, type FdyChartProps, type FdyChartSeries } from './components/FdyChart';
+export { FdyTable, type FdyTableProps } from './components/FdyTable';
+export { FdyModal, type FdyModalProps } from './components/FdyModal';
+export { FdyDrawer, type FdyDrawerProps } from './components/FdyDrawer';
+
+/** Controlled data-table types (shared, framework-agnostic core). */
+export type {
+  FdyTableColumn,
+  FdySortState,
+  FdySortDir,
+  FdyColumnType,
+  FdyColumnAlign,
+  FdyColumnFilterType,
+  FdyColumnFilter,
+  FdyFilterMap,
+  FdyPageState,
+} from '../core/table-model';

package/adapters/react/index.js

@@ -7,3 +7,6 @@ export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
 export { FdyCascade } from './components/FdyCascade.tsx';
 export { FdyCfl } from './components/FdyCfl.tsx';
 export { FdyChart } from './components/FdyChart.tsx';
+export { FdyTable } from './components/FdyTable.tsx';
+export { FdyModal } from './components/FdyModal.tsx';
+export { FdyDrawer } from './components/FdyDrawer.tsx';

package/adapters/vue/components/FdyDrawer.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } from 'vue';
+
+// A controlled Vue wrapper over freeday's `.fdy-drawer` native <dialog> side panel
+// (src/components/drawer.css). Same controlled contract and glue as FdyModal — showModal()/close()
+// guarded, @cancel.prevent so Esc routes through app state, backdrop-click via `event.target ===
+// dialogEl` — applied to a drawer that anchors left (default) or right. Native <dialog> supplies the
+// focus trap, focus restore, top-layer stacking and inert background; `dismissible` (default true)
+// gates Esc + backdrop dismissal.
+
+const props = defineProps<{
+  open: boolean;
+  title: string;
+  side?: 'left' | 'right';
+  dismissible?: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const dialogEl: Ref<HTMLDialogElement | null> = ref(null);
+const titleId: string = `${useId()}-title`;
+const dismissible: ComputedRef<boolean> = computed((): boolean => props.dismissible !== false);
+const drawerClass: ComputedRef<string> = computed((): string =>
+  props.side === 'right' ? 'fdy-drawer fdy-drawer--right' : 'fdy-drawer',
+);
+
+function sync(open: boolean): void {
+  const el: HTMLDialogElement | null = dialogEl.value;
+  if (el === null) return;
+  if (open && !el.open) el.showModal();
+  else if (!open && el.open) el.close();
+}
+watch((): boolean => props.open, sync, { flush: 'post' });
+onMounted((): void => sync(props.open));
+
+function onCancel(): void {
+  if (dismissible.value) emit('close');
+}
+function onClick(e: MouseEvent): void {
+  if (dismissible.value && e.target === dialogEl.value) emit('close');
+}
+</script>
+
+<template>
+  <dialog
+    ref="dialogEl"
+    :class="drawerClass"
+    :aria-labelledby="titleId"
+    @cancel.prevent="onCancel"
+    @click="onClick"
+  >
+    <div class="fdy-drawer__header">
+      <h3 :id="titleId" class="fdy-drawer__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+      <button v-if="dismissible" class="fdy-drawer__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+    </div>
+
+    <div class="fdy-drawer__body">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="fdy-drawer__footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</template>

package/adapters/vue/components/FdyModal.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } from 'vue';
+
+// A controlled Vue wrapper over freeday's `.fdy-modal` native <dialog> (src/components/modal.css).
+// The kit styles the dialog but nothing drives it; every consumer re-derives the same imperative
+// glue to reconcile a reactive `open` boolean with a DOM element whose open/close is a method call.
+// This writes that glue once: showModal()/close() guarded against the already-open/closed cases
+// (showModal() on an open dialog throws), @cancel.prevent so Esc routes through app state instead of
+// closing the DOM behind its back, and backdrop-click detection via `event.target === dialogEl`.
+// Native <dialog> already provides the focus trap, focus restore, top-layer stacking and inert
+// background — the wrapper only avoids breaking them. `dismissible` (default true) gates Esc + backdrop.
+
+const props = defineProps<{
+  open: boolean;
+  title: string;
+  size?: 'sm' | 'md' | 'lg' | 'wide';
+  dismissible?: boolean;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const dialogEl: Ref<HTMLDialogElement | null> = ref(null);
+const titleId: string = `${useId()}-title`;
+const dismissible: ComputedRef<boolean> = computed((): boolean => props.dismissible !== false);
+const modalClass: ComputedRef<string> = computed((): string =>
+  props.size !== undefined ? `fdy-modal fdy-modal--${props.size}` : 'fdy-modal',
+);
+
+// Reconcile the reactive `open` with the dialog's method-driven state. Both guards matter:
+// showModal() on an already-open dialog throws; close() on a closed one is a no-op but kept symmetric.
+function sync(open: boolean): void {
+  const el: HTMLDialogElement | null = dialogEl.value;
+  if (el === null) return;
+  if (open && !el.open) el.showModal();
+  else if (!open && el.open) el.close();
+}
+watch((): boolean => props.open, sync, { flush: 'post' });
+onMounted((): void => sync(props.open));
+
+// Esc fires `cancel`; .prevent stops the native close so app state stays the single source of truth.
+function onCancel(): void {
+  if (dismissible.value) emit('close');
+}
+// The ::backdrop is not a separate element — a click whose target is the dialog box itself (not its
+// content) is a backdrop click.
+function onClick(e: MouseEvent): void {
+  if (dismissible.value && e.target === dialogEl.value) emit('close');
+}
+</script>
+
+<template>
+  <dialog
+    ref="dialogEl"
+    :class="modalClass"
+    :aria-labelledby="titleId"
+    @cancel.prevent="onCancel"
+    @click="onClick"
+  >
+    <div class="fdy-modal__header">
+      <h3 :id="titleId" class="fdy-modal__title">
+        <slot name="title">{{ title }}</slot>
+      </h3>
+      <button v-if="dismissible" class="fdy-modal__close" type="button" aria-label="Close" @click="$emit('close')">&times;</button>
+    </div>
+
+    <div class="fdy-modal__body">
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="fdy-modal__footer">
+      <slot name="footer" />
+    </div>
+  </dialog>
+</template>

package/adapters/vue/components/FdyTable.vue

@@ -0,0 +1,245 @@
+<script setup lang="ts" generic="Row extends Record<string, unknown>">
+import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
+import {
+  cellValue,
+  cellText,
+  distinctValues,
+  filterRows,
+  sortRows,
+  paginate,
+  pageWindow,
+} from '../../core/table-model.js';
+import type {
+  FdyTableColumn,
+  FdySortState,
+  FdyColumnFilter,
+  FdyFilterMap,
+  FdyPageState,
+} from '../../core/table-model';
+import FdyTableFilter from './FdyTableFilter.vue';
+
+// A controlled Vue data table over freeday's `.fdy-datatable` / `.fdy-table*` / `.fdy-filter*` /
+// `.fdy-pagination__*` classes. Unlike the freeday-table.js enhancer (which snapshots static rows
+// and fights a framework's patcher), this reads `rows` as the source of truth on every render, so
+// it is safe over a `v-for` bound to reactive data. Two modes:
+//   • Client mode (no `page` prop): the component sorts/filters (and paginates when `pageSize` is
+//     set) over the full `rows`. `sort`/`filters` are controlled when provided, else internal.
+//   • Server mode (`page` prop present): `rows` are rendered exactly as given (the server already
+//     sorted/filtered/paged); the sort headers, filters and pager only emit intent
+//     (`update:sort` / `update:filters` / `update:page`) for the caller to feed back into its query.
+// Column filters (text/enum/number/date) apply live; in server mode, debounce the emit if needed.
+
+const props = defineProps<{
+  columns: ReadonlyArray<FdyTableColumn<Row>>;
+  rows: ReadonlyArray<Row>;
+  rowKey: (row: Row) => string | number;
+  /** Controlled sort. Provide (even as null) to own sorting; omit for internal client sort. */
+  sort?: FdySortState | null;
+  /** Controlled filter map keyed by column key. Provide to own filtering; omit for internal. */
+  filters?: FdyFilterMap;
+  /** Server pagination state (0-based index). Presence switches the table into server mode. */
+  page?: FdyPageState;
+  /** Client-side page size when `page` is absent; 0/undefined = render all rows (no pager). */
+  pageSize?: number;
+  loading?: boolean;
+  emptyText?: string;
+  ariaLabel?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:sort': [sort: FdySortState | null];
+  'update:filters': [filters: FdyFilterMap];
+  'update:page': [page: FdyPageState];
+}>();
+
+const internalSort: Ref<FdySortState | null> = ref(null);
+const internalFilters: Ref<FdyFilterMap> = ref({});
+const internalPageIndex: Ref<number> = ref(0);
+
+const serverPaged: ComputedRef<boolean> = computed((): boolean => props.page != null);
+const sortControlled: ComputedRef<boolean> = computed((): boolean => serverPaged.value || props.sort !== undefined);
+const filtersControlled: ComputedRef<boolean> = computed((): boolean => serverPaged.value || props.filters !== undefined);
+
+const effectiveSort: ComputedRef<FdySortState | null> = computed((): FdySortState | null =>
+  sortControlled.value ? (props.sort ?? null) : internalSort.value,
+);
+const effectiveFilters: ComputedRef<FdyFilterMap> = computed((): FdyFilterMap =>
+  filtersControlled.value ? (props.filters ?? {}) : internalFilters.value,
+);
+
+// Enum options: explicit (server mode) or the distinct values across the current rows (client mode).
+const enumOptionsMap: ComputedRef<Record<string, ReadonlyArray<string>>> = computed(
+  (): Record<string, ReadonlyArray<string>> => {
+    const out: Record<string, ReadonlyArray<string>> = {};
+    for (const col of props.columns) {
+      if (col.filter === 'enum') out[col.key] = col.options ?? distinctValues(props.rows, col);
+    }
+    return out;
+  },
+);
+
+const filteredSorted: ComputedRef<Row[]> = computed((): Row[] => {
+  if (serverPaged.value) return props.rows.slice();
+  const filtered: Row[] = filterRows(props.rows, props.columns, effectiveFilters.value);
+  return sortRows(filtered, props.columns, effectiveSort.value);
+});
+const totalCount: ComputedRef<number> = computed((): number =>
+  serverPaged.value ? (props.page as FdyPageState).total : filteredSorted.value.length,
+);
+const displayRows: ComputedRef<Row[]> = computed((): Row[] => {
+  if (serverPaged.value) return props.rows.slice();
+  if (props.pageSize && props.pageSize > 0) return paginate(filteredSorted.value, internalPageIndex.value, props.pageSize);
+  return filteredSorted.value;
+});
+
+const pageSizeEff: ComputedRef<number> = computed((): number =>
+  serverPaged.value ? (props.page as FdyPageState).size : (props.pageSize ?? 0),
+);
+const currentPage1: ComputedRef<number> = computed((): number =>
+  (serverPaged.value ? (props.page as FdyPageState).index : internalPageIndex.value) + 1,
+);
+const totalPages: ComputedRef<number> = computed((): number =>
+  pageSizeEff.value > 0 ? Math.max(1, Math.ceil(totalCount.value / pageSizeEff.value)) : 1,
+);
+const hasPager: ComputedRef<boolean> = computed((): boolean => pageSizeEff.value > 0 && totalPages.value > 1);
+const pages: ComputedRef<Array<number | 'ellipsis'>> = computed((): Array<number | 'ellipsis'> =>
+  pageWindow(currentPage1.value, totalPages.value),
+);
+const rangeFrom: ComputedRef<number> = computed((): number =>
+  totalCount.value === 0 ? 0 : (currentPage1.value - 1) * pageSizeEff.value + 1,
+);
+const rangeTo: ComputedRef<number> = computed((): number =>
+  totalCount.value === 0 ? 0 : rangeFrom.value - 1 + displayRows.value.length,
+);
+
+// Client mode: keep the page in range when a filter shrinks the row set.
+watch(totalPages, (tp: number): void => {
+  if (!serverPaged.value && internalPageIndex.value > tp - 1) internalPageIndex.value = Math.max(0, tp - 1);
+});
+
+function ariaSortOf(col: FdyTableColumn<Row>): 'ascending' | 'descending' | undefined {
+  const s: FdySortState | null = effectiveSort.value;
+  if (s === null || s.key !== col.key) return undefined;
+  return s.dir === 'asc' ? 'ascending' : 'descending';
+}
+function onSort(col: FdyTableColumn<Row>): void {
+  if (col.sortable !== true) return;
+  const cur: FdySortState | null = effectiveSort.value;
+  const next: FdySortState =
+    cur !== null && cur.key === col.key
+      ? { key: col.key, dir: cur.dir === 'asc' ? 'desc' : 'asc' }
+      : { key: col.key, dir: 'asc' };
+  if (sortControlled.value) emit('update:sort', next);
+  else {
+    internalSort.value = next;
+    internalPageIndex.value = 0;
+  }
+}
+function onFilterChange(col: FdyTableColumn<Row>, filter: FdyColumnFilter | null): void {
+  const nextMap: FdyFilterMap = { ...effectiveFilters.value };
+  if (filter === null) delete nextMap[col.key];
+  else nextMap[col.key] = filter;
+  if (filtersControlled.value) emit('update:filters', nextMap);
+  else {
+    internalFilters.value = nextMap;
+    internalPageIndex.value = 0;
+  }
+}
+function goTo(page1: number): void {
+  const clamped: number = Math.min(Math.max(1, page1), totalPages.value);
+  const index0: number = clamped - 1;
+  if (serverPaged.value) {
+    const p: FdyPageState = props.page as FdyPageState;
+    emit('update:page', { index: index0, size: p.size, total: p.total });
+  } else {
+    internalPageIndex.value = index0;
+  }
+}
+
+function cellClass(col: FdyTableColumn<Row>): string | undefined {
+  return col.mono === true ? 'fdy-mono' : undefined;
+}
+function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefined {
+  return col.align !== undefined ? { textAlign: col.align } : undefined;
+}
+</script>
+
+<template>
+  <div class="fdy-datatable">
+    <div v-if="$slots.toolbar" class="fdy-table-toolbar">
+      <slot name="toolbar" />
+    </div>
+
+    <div class="fdy-table-scroll">
+      <table class="fdy-table" :aria-label="ariaLabel">
+        <thead>
+          <tr>
+            <th v-for="col in columns" :key="col.key" scope="col" :style="alignStyle(col)" :aria-sort="ariaSortOf(col)">
+              <button
+                v-if="col.sortable"
+                type="button"
+                class="fdy-table__sortbtn"
+                @click="onSort(col)"
+              >{{ col.label }}</button>
+              <template v-else>{{ col.label }}</template>
+              <FdyTableFilter
+                v-if="col.filter"
+                :label="col.label"
+                :type="col.filter"
+                :filter="effectiveFilters[col.key]"
+                :options="enumOptionsMap[col.key] ?? []"
+                @change="onFilterChange(col, $event)"
+              />
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-if="loading">
+            <td :colspan="columns.length" class="fdy-table__state" role="status">Loading…</td>
+          </tr>
+          <tr v-else-if="displayRows.length === 0">
+            <td :colspan="columns.length" class="fdy-table__state">
+              <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
+            </td>
+          </tr>
+          <tr v-for="row in displayRows" v-else :key="rowKey(row)">
+            <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
+              <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-if="hasPager" class="fdy-table-footer">
+      <span class="fdy-table-footer__info">Showing {{ rangeFrom }}–{{ rangeTo }} of {{ totalCount }}</span>
+      <nav aria-label="Pagination">
+        <ul class="fdy-pagination__list">
+          <li>
+            <button
+              type="button"
+              class="fdy-pagination__link"
+              aria-label="Previous page"
+              :disabled="currentPage1 === 1"
+              @click="goTo(currentPage1 - 1)"
+            >‹</button>
+          </li>
+          <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>
+          </li>
+          <li>
+            <button
+              type="button"
+              class="fdy-pagination__link"
+              aria-label="Next page"
+              :disabled="currentPage1 === totalPages"
+              @click="goTo(currentPage1 + 1)"
+            >›</button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</template>