@ibobbyts/svelte-ui-utils 0.1.2

package/dist/pagination/Pagination.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">
+  import Dropdown from '../dropdown/Dropdown.svelte';
+  import { getPageCount, normalizePagination } from '../data-table/state.js';
+  import { getUiMessages, type UiLanguage } from '../i18n.js';
+  import type { DropdownValue } from '../dropdown/types.js';
+  import type { PaginationChangeHandler, PaginationDropdownPlacement, PaginationState } from '../data-table/types.js';
+
+  export let pagination: PaginationState = { page: 1, pageSize: 20 };
+  export let totalRows = 0;
+  export let pageSizeOptions: number[] = [10, 20, 50, 100];
+  export let language: UiLanguage = 'en_us';
+  export let pageSizeLabel: string | undefined = undefined;
+  export let maxPageButtons = 15;
+  export let pageSizeDropdownPlacement: PaginationDropdownPlacement = 'down';
+  export let onPaginationChange: PaginationChangeHandler | undefined = undefined;
+
+  type PaginationItem = { kind: 'page'; page: number } | { kind: 'ellipsis' };
+
+  $: messages = getUiMessages(language);
+  $: resolvedPageSizeLabel = pageSizeLabel ?? messages.table.pageSizeLabel;
+  $: normalized = normalizePagination(pagination, totalRows);
+  $: pageCount = getPageCount(totalRows, normalized.pageSize);
+  $: pageItems = buildPaginationItems(normalized.page, pageCount, maxPageButtons);
+  $: pageSizeDropdownOptions = pageSizeOptions.map((option) => ({ label: String(option), value: option }));
+
+  function buildPaginationItems(currentPage: number, totalPages: number, maxButtons: number): PaginationItem[] {
+    if (totalPages <= 1) {
+      return [];
+    }
+
+    const visiblePageCount = Math.max(3, Math.trunc(maxButtons));
+    if (totalPages <= visiblePageCount) {
+      return Array.from({ length: totalPages }, (_, index) => ({ kind: 'page', page: index + 1 }));
+    }
+
+    const page = Math.min(Math.max(Math.trunc(currentPage), 1), totalPages);
+    const innerWindowSize = visiblePageCount - 2;
+    const maxInnerPage = totalPages - 1;
+    let windowStart = page - Math.floor(innerWindowSize / 2);
+    let windowEnd = windowStart + innerWindowSize - 1;
+
+    if (windowStart < 2) {
+      windowStart = 2;
+      windowEnd = windowStart + innerWindowSize - 1;
+    }
+    if (windowEnd > maxInnerPage) {
+      windowEnd = maxInnerPage;
+      windowStart = windowEnd - innerWindowSize + 1;
+    }
+
+    const pages = [1];
+    for (let p = windowStart; p <= windowEnd; p += 1) {
+      pages.push(p);
+    }
+    pages.push(totalPages);
+
+    const items: PaginationItem[] = [];
+    for (let i = 0; i < pages.length; i += 1) {
+      const previousPage = pages[i - 1];
+      const nextPage = pages[i];
+      if (previousPage !== undefined && nextPage !== undefined && nextPage - previousPage > 1) {
+        items.push({ kind: 'ellipsis' });
+      }
+      if (nextPage !== undefined) {
+        items.push({ kind: 'page', page: nextPage });
+      }
+    }
+    return items;
+  }
+
+  function setPage(page: number) {
+    void onPaginationChange?.(normalizePagination({ ...normalized, page }, totalRows));
+  }
+
+  function setPageSize(nextValue: DropdownValue) {
+    const pageSize = typeof nextValue === 'number' ? nextValue : Number(nextValue);
+    if (!Number.isFinite(pageSize)) {
+      return;
+    }
+    void onPaginationChange?.(normalizePagination({ page: 1, pageSize }, totalRows));
+  }
+</script>
+
+<div class="suu-pagination" aria-label={messages.table.paginationLabel}>
+  <div class="suu-pagination__pages" class:suu-pagination__pages--empty={pageItems.length === 0}>
+    {#each pageItems as item, index (item.kind === 'page' ? `page-${item.page}` : `ellipsis-${index}`)}
+      {#if item.kind === 'page'}
+        <button
+          type="button"
+          class:suu-pagination__page-button={true}
+          class:suu-pagination__page-button--active={item.page === normalized.page}
+          aria-current={item.page === normalized.page ? 'page' : undefined}
+          on:click={() => setPage(item.page)}
+        >
+          {item.page}
+        </button>
+      {:else}
+        <span class="suu-pagination__ellipsis" aria-hidden="true">...</span>
+      {/if}
+    {/each}
+  </div>
+  <div class="suu-pagination__size">
+    <span>{resolvedPageSizeLabel}</span>
+    <Dropdown
+      value={normalized.pageSize}
+      options={pageSizeDropdownOptions}
+      ariaLabel={resolvedPageSizeLabel}
+      placement={pageSizeDropdownPlacement}
+      onChange={setPageSize}
+    />
+  </div>
+</div>

package/dist/pagination/Pagination.svelte.d.ts

@@ -0,0 +1,30 @@
+import { type UiLanguage } from '../i18n.js';
+import type { PaginationChangeHandler, PaginationDropdownPlacement, PaginationState } from '../data-table/types.js';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Pagination: $$__sveltets_2_IsomorphicComponent<{
+    pagination?: PaginationState;
+    totalRows?: number;
+    pageSizeOptions?: number[];
+    language?: UiLanguage;
+    pageSizeLabel?: string | undefined;
+    maxPageButtons?: number;
+    pageSizeDropdownPlacement?: PaginationDropdownPlacement;
+    onPaginationChange?: PaginationChangeHandler | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pagination = InstanceType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/pagination/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/pagination/Pagination.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAE5D,OAAO,KAAK,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAyGpH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,UAAU;iBAVyR,eAAe;;sBAAkD,MAAM,EAAE;eAAa,UAAU;oBAAkB,MAAM,GAAG,SAAS;;gCAAsE,2BAA2B;yBAAuB,uBAAuB,GAAG,SAAS;;;kBAUze,CAAC;AAC9E,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/pagination/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Pagination } from './Pagination.svelte';
+export { getPageCount, normalizePagination } from '../data-table/state.js';
+export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
+export type { UiLanguage, UiMessages } from '../i18n.js';
+export type { PaginationChangeHandler, PaginationDropdownPlacement, PaginationState } from '../data-table/types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,uBAAuB,EAAE,2BAA2B,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/pagination/index.js

@@ -0,0 +1,3 @@
+export { default as Pagination } from './Pagination.svelte';
+export { getPageCount, normalizePagination } from '../data-table/state.js';
+export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';