@relax.js/core 1.0.0 → 1.0.2

package/docs/DataLoader.md

@@ -0,0 +1,64 @@
+# DataLoader
+
+An interface for loading paginated, sortable data from any data source. Components like tables use this to fetch data on demand as users navigate pages or change sort order.
+
+## Interface
+
+```ts
+interface DataLoader {
+    load(options: {
+        page: number;
+        pageSize: number;
+        sort: { column: string; direction: 'asc' | 'desc' }[];
+    }): Promise<{ rows: Record<string, any>[]; totalCount: number }>;
+}
+```
+
+### `load(options)`
+
+| Option     | Type                                          | Description                     |
+|-----------|-----------------------------------------------|---------------------------------|
+| `page`     | `number`                                     | 1-based page number to load     |
+| `pageSize` | `number`                                     | Number of rows per page         |
+| `sort`     | `{ column: string; direction: 'asc' \| 'desc' }[]` | Sort specifications       |
+
+**Returns** `Promise<{ rows: Record<string, any>[]; totalCount: number }>`
+
+- `rows` - The data for the requested page
+- `totalCount` - Total number of rows across all pages (used for pagination)
+
+## Example
+
+```ts
+import { DataLoader } from '@anthropic-ai/relax.js/core';
+
+class UserDataLoader implements DataLoader {
+    async load(options) {
+        const params = new URLSearchParams({
+            page: options.page.toString(),
+            pageSize: options.pageSize.toString(),
+            sort: JSON.stringify(options.sort),
+        });
+
+        const response = await fetch(`/api/users?${params}`);
+        return response.json();
+    }
+}
+```
+
+## Using with Pager
+
+```ts
+import { DataLoader, Pager, PageSelectedEvent } from '@anthropic-ai/relax.js/core';
+
+const loader: DataLoader = new UserDataLoader();
+const result = await loader.load({ page: 1, pageSize: 25, sort: [] });
+
+const pager = new Pager(container, result.totalCount, 25);
+
+container.addEventListener('pageselected', async (e: PageSelectedEvent) => {
+    const data = await loader.load({ page: e.page, pageSize: 25, sort: [] });
+    pager.update(data.totalCount);
+    // render data.rows...
+});
+```

package/docs/Pager.md

@@ -0,0 +1,59 @@
+# Pager
+
+Renders pagination buttons (Previous, page numbers, Next) inside a container element and dispatches a `PageSelectedEvent` when the user clicks a page.
+
+## Usage
+
+```ts
+import { Pager, PageSelectedEvent } from '@anthropic-ai/relax.js/core';
+
+const container = document.querySelector('.pager');
+const pager = new Pager(container, totalCount, pageSize);
+
+container.addEventListener('pageselected', (e: PageSelectedEvent) => {
+    console.log('Selected page:', e.page);
+});
+```
+
+## Constructor
+
+```ts
+new Pager(container: HTMLElement, totalCount: number, pageSize: number)
+```
+
+| Parameter    | Description                          |
+|-------------|--------------------------------------|
+| `container` | The element to render buttons into   |
+| `totalCount`| Total number of items across all pages |
+| `pageSize`  | Number of items per page             |
+
+## Methods
+
+### `update(totalCount: number)`
+
+Updates the total count and re-renders the buttons. If the current page exceeds the new page count, it resets to the last page.
+
+### `getCurrentPage(): number`
+
+Returns the current 1-based page number.
+
+## PageSelectedEvent
+
+Dispatched on the container element when the user selects a page. Bubbles and is composed.
+
+| Property | Type     | Description               |
+|----------|----------|---------------------------|
+| `page`   | `number` | The selected page number  |
+
+### Listening for page changes
+
+```ts
+container.addEventListener('pageselected', (e: PageSelectedEvent) => {
+    const rows = await loader.load({
+        page: e.page,
+        pageSize: 25,
+        sort: [],
+    });
+    // render rows...
+});
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@relax.js/core",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "Ship faster with less code. Web Component library with routing, forms, DI, templating, and i18n. No virtual DOM, no build magic, no surprise re-renders.",
     "main": "./dist/index.js",
     "module": "./dist/index.mjs",