@uni-design-system/uni-angular 1.0.0 → 2.0.0

package/.storybook/main.ts

@@ -1,24 +1,41 @@
-import type { StorybookConfig } from '@analogjs/storybook-angular';
-import { dirname } from "path"
-import { fileURLToPath } from "url"
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+import { mergeConfig } from 'vite';
+import type { StorybookConfig as StorybookConfigBase } from '@storybook/angular';
+import type { StorybookConfigVite } from '@storybook/builder-vite';
 
 function getAbsolutePath(value: string) {
-  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)))
+  return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
 }
 
+type StorybookConfig = StorybookConfigBase & StorybookConfigVite;
+
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    getAbsolutePath('@storybook/addon-a11y'),
-    getAbsolutePath('@storybook/addon-docs')
-  ],
-  "framework": {
-    // Switch this to the Analog framework to fix the 'undefined' error
-    name: getAbsolutePath('@analogjs/storybook-angular'),
-    options: {}
-  }
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [getAbsolutePath('@storybook/addon-a11y'), getAbsolutePath('@storybook/addon-docs')],
+  framework: {
+    name: getAbsolutePath('@storybook/angular') as '@storybook/angular',
+    options: {
+      builder: {
+        name: getAbsolutePath('@storybook/builder-vite') as '@storybook/builder-vite',
+        options: {},
+      },
+    },
+  },
+  staticDirs: ['../../../public'],
+  managerHead: (head) => `${head}<link rel="icon" href="/favicon.ico" />`,
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      optimizeDeps: {
+        exclude: ['@angular/animations', '@angular/animations/browser'],
+      },
+      build: {
+        rollupOptions: {
+          external: ['@angular/animations', '@angular/animations/browser'],
+        },
+      },
+    });
+  },
 };
 
 export default config;

package/.storybook/manager.ts

@@ -0,0 +1,24 @@
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'UNI Design System',
+  brandUrl: 'https://uni-design-system.github.io/uni/docs/angular',
+  brandImage: 'uni-storybook-logo.png',
+
+  appBg: 'white',
+});
+
+addons.setConfig({
+  theme,
+  sidebar: {
+    // This filter excludes individual stories from the sidebar list,
+    // leaving only the MDX documentation pages visible.
+    filters: {
+      patterns: (item) => {
+        return item.type === 'docs';
+      },
+    },
+  },
+});

package/.storybook/preview.ts

@@ -1,14 +1,21 @@
-import type { Preview } from '@storybook/angular'
+import { applicationConfig, type Preview } from '@storybook/angular';
+import { UNI_THEMES } from '../src/lib/theming/theme.token';
+import { UniThemes } from '@uni-design-system/uni-core';
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
+  decorators: [
+    applicationConfig({
+      providers: [{ provide: UNI_THEMES, useValue: UniThemes }],
+    }),
+  ],
 };
 
 export default preview;

package/.storybook/tsconfig.json

@@ -4,7 +4,8 @@
     "moduleResolution": "bundler",
     "module": "ESNext",
     "esModuleInterop": true,
-    "types": ["node"],
+    "types": ["node", "vite/client"],
+    "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true,
     "experimentalDecorators": true,
@@ -12,10 +13,12 @@
   },
   "exclude": ["../src/test.ts", "../src/**/*.spec.ts"],
   "include": [
-    "../src/**/*.ts",            // Added: includes your actual components
-    "../src/**/*.stories.ts",    // Updated: specifically target TS stories
+    "../src/**/*.ts",
+    "../src/**/*.tsx",
+    "../src/**/*.stories.ts",
     "./preview.ts",
-    "./main.ts"                  // Added: includes the config itself
+    "./main.ts",
+    "./vite.config.ts"
   ],
   "files": ["./typings.d.ts"]
 }

package/.turbo/turbo-build.log

@@ -12,14 +12,14 @@ Building entry point '@uni-design-system/uni-angular'
 - Writing package manifest
 ℹ Removing scripts section in package.json as it's considered a potential security vulnerability.
 ℹ Removing devDependencies section in package.json.
-
-------------------------------------------------------------------------------
 ✔ Writing package manifest
 ✔ Built @uni-design-system/uni-angular
+
+------------------------------------------------------------------------------
 Built Angular Package
 - from: /home/runner/work/uni/uni/packages/angular
 - to:   /home/runner/work/uni/uni/packages/angular/dist
 ------------------------------------------------------------------------------
 
-Build at: 2026-05-12T03:13:00.556Z - Time: 2783ms
+Build at: 2026-05-19T14:44:38.737Z - Time: 2418ms
 

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @uni-design-system/uni-angular
 
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [[`4a049de`](https://github.com/uni-design-system/uni/commit/4a049def689d56d6b6cc1d2da73c9facd93ed515)]:
+  - @uni-design-system/uni-core@1.1.0
+
 ## 1.0.0
 
 ### Major Changes

package/dist/fesm2022/uni-design-system-uni-angular.mjs

@@ -4,8 +4,8 @@ import { CommonModule } from '@angular/common';
 
 class UniButtonComponent {
     label = 'Button';
-    bgColor = "#000000";
-    textColor = "#fff";
+    bgColor = '#000000';
+    textColor = '#fff';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: UniButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.12", type: UniButtonComponent, isStandalone: true, selector: "uni-button", inputs: { label: "label" }, ngImport: i0, template: `
     <button [style.background-color]="bgColor" [style.color]="textColor">

package/dist/fesm2022/uni-design-system-uni-angular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"uni-design-system-uni-angular.mjs","sources":["../../src/lib/button.component.ts","../../src/uni-design-system-uni-angular.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common'; // Still useful for pipes/directives\n\n@Component({\n  selector: 'uni-button',\n  standalone: true, // Optional but explicit\n  imports: [CommonModule],\n  template: `\n    <button [style.background-color]=\"bgColor\" [style.color]=\"textColor\">\n      {{ label }}\n    </button>\n  `,\n  styles: [`\n    button { padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer; }\n  `]\n})\nexport class UniButtonComponent {\n  @Input() label: string = 'Button';\n  bgColor = \"#000000\";\n  textColor = \"#fff\";\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAgBa,kBAAkB,CAAA;IACpB,KAAK,GAAW,QAAQ;IACjC,OAAO,GAAG,SAAS;IACnB,SAAS,GAAG,MAAM;wGAHP,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EATnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EALS,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAUX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAb9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cACV,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;sBAMA;;;ACjBH;;AAEG;;;;"}
+{"version":3,"file":"uni-design-system-uni-angular.mjs","sources":["../../src/lib/button.component.ts","../../src/uni-design-system-uni-angular.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { CommonModule } from '@angular/common'; // Still useful for pipes/directives\n\n@Component({\n  selector: 'uni-button',\n  standalone: true, // Optional but explicit\n  imports: [CommonModule],\n  template: `\n    <button [style.background-color]=\"bgColor\" [style.color]=\"textColor\">\n      {{ label }}\n    </button>\n  `,\n  styles: [\n    `\n      button {\n        padding: 12px 24px;\n        border-radius: 4px;\n        border: none;\n        cursor: pointer;\n      }\n    `,\n  ],\n})\nexport class UniButtonComponent {\n  @Input() label: string = 'Button';\n  bgColor = '#000000';\n  textColor = '#fff';\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;MAuBa,kBAAkB,CAAA;IACpB,KAAK,GAAW,QAAQ;IACjC,OAAO,GAAG,SAAS;IACnB,SAAS,GAAG,MAAM;wGAHP,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,kBAAkB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,OAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAhBnB;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EALS,YAAY,EAAA,CAAA,EAAA,CAAA;;4FAiBX,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBApB9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,cACV,IAAI,EAAA,OAAA,EACP,CAAC,YAAY,CAAC,EAAA,QAAA,EACb;;;;AAIT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,0EAAA,CAAA,EAAA;;sBAaA;;;ACxBH;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uni-design-system/uni-angular",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/uni-design-system/uni",
@@ -14,10 +14,11 @@
   "peerDependencies": {
     "@angular/common": "21.2.12",
     "@angular/core": "21.2.12",
-    "@uni-design-system/uni-core": "1.0.1"
+    "@emotion/css": "^11.0.0",
+    "@uni-design-system/uni-core": "1.1.0"
   },
   "devDependencies": {
-    "@analogjs/storybook-angular": "^2.5.0",
+    "@analogjs/storybook-angular": "^2.5.1",
     "@analogjs/vite-plugin-angular": "^2.5.0",
     "@angular-devkit/architect": "^0.2102.10",
     "@angular-devkit/build-angular": "^21.2.10",
@@ -25,12 +26,15 @@
     "@angular/compiler": "21.2.12",
     "@angular/compiler-cli": "21.2.12",
     "@angular/platform-browser-dynamic": "21.2.12",
-    "@storybook/addon-a11y": "^10.3.6",
-    "@storybook/addon-docs": "^10.3.6",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/angular": "^10.3.6",
+    "@emotion/css": "^11.0.0",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/angular": "^10.4.0",
+    "@storybook/builder-vite": "^10.4.0",
+    "@types/react": "^18.3.28",
     "ng-packagr": "^21.0.0",
-    "storybook": "^10.3.6",
+    "react": "^18.2.0",
+    "storybook": "^10.4.0",
     "tslib": "^2.8.1",
     "typescript": "5.9.3",
     "vite": "^8.0.10",
@@ -39,8 +43,8 @@
   },
   "scripts": {
     "build": "pnpm ng-packagr -p ng-package.json",
-    "storybook": "ng run @uni-design-system/uni-angular:storybook",
-    "build-storybook": "ng run @uni-design-system/uni-angular:build-storybook",
+    "storybook": "pnpm ng run @uni-design-system/uni-angular:storybook",
+    "build-storybook": "pnpm dlx @angular/cli run @uni-design-system/uni-angular:build-storybook",
     "release": "pnpm build && pnpm changeset publish"
   }
 }

package/src/lib/button.component.ts

@@ -10,12 +10,19 @@ import { CommonModule } from '@angular/common'; // Still useful for pipes/direct
       {{ label }}
     </button>
   `,
-  styles: [`
-    button { padding: 12px 24px; border-radius: 4px; border: none; cursor: pointer; }
-  `]
+  styles: [
+    `
+      button {
+        padding: 12px 24px;
+        border-radius: 4px;
+        border: none;
+        cursor: pointer;
+      }
+    `,
+  ],
 })
 export class UniButtonComponent {
   @Input() label: string = 'Button';
-  bgColor = "#000000";
-  textColor = "#fff";
+  bgColor = '#000000';
+  textColor = '#fff';
 }

package/src/lib/cdk/datasource/base-datasource.ts

@@ -0,0 +1,113 @@
+import { computed, signal, Signal, WritableSignal } from '@angular/core';
+
+export type SortDirection = 'asc' | 'desc' | 'indet';
+
+export interface Sort<T> {
+  column?: keyof T;
+  direction: SortDirection;
+}
+
+export abstract class UniBaseDatasource<T> {
+  abstract records: Signal<T[]>;
+  abstract recordCount: Signal<number>;
+
+  selections = signal<T[]>([]);
+
+  sort: WritableSignal<Sort<T>> = signal({
+    column: undefined,
+    direction: 'indet',
+  });
+
+  sortColumn = computed(() => this.sort().column);
+  sortDirection = computed(() => this.sort().direction);
+
+  abstract pageIndex: Signal<number>;
+  abstract pageSize: Signal<number>;
+  abstract pageCount: Signal<number>;
+
+  pages = computed(() => Array.from({ length: this.pageCount() }, (_, index) => index + 1));
+
+  startIndex = computed(() => {
+    const pageSize = this.pageSize();
+    const pageIndex = this.pageIndex();
+    return pageSize > 0 ? pageIndex * pageSize : 0;
+  });
+
+  endIndex = computed(() => {
+    const pageSize = this.pageSize();
+    const total = this.recordCount();
+
+    // If unpaginated (pageSize = 0), return total count
+    if (pageSize === 0) {
+      return total;
+    }
+
+    const start = this.startIndex();
+    return Math.min(start + pageSize, total);
+  });
+
+  disablePrevious = computed(() => {
+    const pageSize = this.pageSize();
+    return pageSize === 0 ? true : this.pageIndex() === 0;
+  });
+
+  disableNext = computed(() => {
+    const pageSize = this.pageSize();
+    return pageSize === 0 ? true : this.pageIndex() + 1 >= this.pageCount();
+  });
+
+  truncatedPages = computed(() => {
+    const currentPage = this.pageIndex() + 1;
+    const displayRange = 3;
+    const totalPages = this.pageCount();
+
+    const pages: (number | string)[] = [];
+    const startPage = Math.max(1, currentPage - displayRange);
+    const endPage = Math.min(totalPages, currentPage + displayRange);
+
+    if (startPage > 1) {
+      pages.push(1);
+      if (startPage > 2) {
+        pages.push('...');
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pages.push('...');
+      }
+      pages.push(totalPages);
+    }
+    return pages;
+  });
+
+  isSelected(row: T): boolean {
+    return this.selections().some((selection) => selection === row);
+  }
+
+  toggleSelection(row: T) {
+    this.selections.update((selections) => {
+      return selections.includes(row) ? selections.filter((i) => i !== row) : [...selections, row];
+    });
+  }
+
+  clearSelections() {
+    this.selections.set([]);
+  }
+
+  selectAll() {
+    this.selections.set([...this.records()]);
+  }
+
+  abstract sortRecords(sort: Sort<T>): void;
+  abstract firstPage(): void;
+  abstract nextPage(): void;
+  abstract previousPage(): void;
+  abstract lastPage(): void;
+  abstract jumpToPage(page: number): void;
+  abstract setPageSize(size: number): void;
+}

package/src/lib/cdk/datasource/datasource.types.ts

@@ -0,0 +1,10 @@
+import { UniBaseDatasource } from './base-datasource';
+import { UniRecordDatasource } from './record-datasource';
+import { UniServerSideDatasource } from './server-side-datasource';
+
+export type UniDatasource<T> = UniBaseDatasource<T>;
+
+export type { Sort, SortDirection } from './base-datasource';
+export type { DataLoader, PageRequest, PageResponse } from './server-side-datasource';
+
+export { UniBaseDatasource, UniRecordDatasource, UniServerSideDatasource };

package/src/lib/cdk/datasource/record-datasource.ts

@@ -0,0 +1,115 @@
+import { computed, signal } from '@angular/core';
+import { UniBaseDatasource, Sort } from './base-datasource';
+
+export class UniRecordDatasource<T> extends UniBaseDatasource<T> {
+  private _pageNumber = signal(1);
+  private _pageSize = signal<number>(0); // 0 = unpaginated (show all)
+
+  initialRecords = signal<T[]>([]);
+  override recordCount = computed((): number => this.initialRecords().filter(this.filter()).length);
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  filter = signal<(value: T) => boolean>((value) => true);
+
+  override pageIndex = signal<number>(0);
+  override pageSize = computed(() => this._pageSize());
+
+  override pageCount = computed(() => {
+    const pageSize = this.pageSize();
+    return pageSize > 0 ? Math.ceil(this.recordCount() / pageSize) : 1;
+  });
+
+  override records = computed(() => {
+    const { column, direction } = this.sort();
+    const filter = this.filter();
+    const pageSize = this.pageSize();
+
+    let filteredRecords = this.initialRecords().filter(filter);
+
+    // Apply sorting if specified
+    if (column && direction !== 'indet') {
+      filteredRecords = [...filteredRecords].sort((a, b) => {
+        const valueA = a[column];
+        const valueB = b[column];
+
+        const isString = typeof valueA === 'string';
+        const isAsc = direction === 'asc';
+
+        return isString
+          ? stringCompare(valueA as string, valueB as string, isAsc)
+          : numberCompare(valueA as number, valueB as number, isAsc);
+      });
+    }
+
+    // Apply pagination only if pageSize > 0
+    if (pageSize > 0) {
+      return filteredRecords.slice(this.startIndex(), this.endIndex());
+    }
+
+    // Return all records (unpaginated)
+    return filteredRecords;
+  });
+
+  constructor(data: T[]) {
+    super();
+    this.initialRecords.set(data);
+  }
+
+  override sortRecords(sort: Sort<T>) {
+    this.sort.set(sort);
+  }
+
+  override firstPage() {
+    this.pageIndex.set(0);
+  }
+
+  override nextPage() {
+    if (this.pageIndex() < this.pageCount() - 1) {
+      this.pageIndex.update((i) => i + 1);
+    }
+  }
+
+  override previousPage() {
+    this.pageIndex.update((i) => (i > 1 ? i - 1 : 0));
+  }
+
+  override lastPage() {
+    this.pageIndex.set(this.pageCount() - 1);
+  }
+
+  override jumpToPage(page: number) {
+    const i = page - 1;
+    if (i >= 0 && i < this.pageCount()) {
+      this.pageIndex.set(i);
+    }
+  }
+
+  override setPageSize(size: number) {
+    this._pageSize.set(size);
+    if (size > 0) {
+      this._pageNumber.set(1);
+      this.pageIndex.set(0);
+    }
+  }
+
+  setFilter(filter: (value: T) => boolean) {
+    this.filter.set(filter);
+  }
+
+  clearFilter() {
+    this.filter.set(() => true);
+  }
+}
+
+function stringCompare(a = 'zzz', b = 'zzz', isAsc: boolean): number {
+  a = a.toString();
+  b = b.toString();
+
+  return isAsc
+    ? a.localeCompare(b, undefined, { sensitivity: 'base' })
+    : b.localeCompare(a, undefined, { sensitivity: 'base' });
+}
+
+function numberCompare(a = 0, b = 0, isAsc: boolean): number {
+  return isAsc ? a - b : b - a;
+}

package/src/lib/cdk/datasource/server-side-datasource.ts

@@ -0,0 +1,172 @@
+import {
+  computed,
+  linkedSignal,
+  resource,
+  ResourceLoaderParams,
+  ResourceRef,
+  type ResourceStatus,
+  signal,
+} from '@angular/core';
+import { UniBaseDatasource, Sort, SortDirection } from './base-datasource';
+
+export interface PageRequest {
+  pageNumber: number;
+  pageSize: number;
+  sortColumn?: string;
+  sortDirection?: SortDirection;
+  filter?: Record<string, any>;
+}
+
+export interface PageResponse<T> {
+  data: T[];
+  totalRecords: number;
+  pageNumber: number;
+  pageSize: number;
+}
+
+export type DataLoader<T> = (request: PageRequest) => Promise<PageResponse<T>>;
+
+export class UniServerSideDatasource<T> extends UniBaseDatasource<T> {
+  private _pageNumber = signal(1);
+  private _pageSize = signal(10);
+  private _sortColumn = signal<keyof T | undefined>(undefined);
+  private _sortDirection = signal<SortDirection>('indet');
+  private filter = signal<Record<string, any>>({});
+
+  override sortColumn = computed(() => this._sortColumn());
+  override sortDirection = computed(() => this._sortDirection());
+
+  private totalRecords = signal(0);
+
+  private dataResource: ResourceRef<PageResponse<T> | undefined>;
+
+  override pageIndex = computed(() => this._pageNumber() - 1);
+  override pageSize = computed(() => this._pageSize());
+
+  override pageCount = computed(() => {
+    const total = this.totalRecords();
+    const size = this.pageSize();
+    return total > 0 ? Math.ceil(total / size) : 0;
+  });
+
+  private readonly _records = linkedSignal<
+    {
+      val: PageResponse<T> | undefined;
+      status: ResourceStatus;
+    },
+    T[]
+  >({
+    source: () => ({
+      val: this.dataResource.value(),
+      status: this.dataResource.status(),
+    }),
+    computation: (source, previous) => {
+      if (source.status === 'loading' && previous) {
+        return previous.value;
+      }
+      return source.val?.data ?? [];
+    },
+  });
+
+  override records = this._records.asReadonly();
+
+  override recordCount = computed(() => this.totalRecords());
+
+  isLoading = computed(() => this.dataResource.isLoading());
+
+  error = computed(() => this.dataResource.error());
+
+  hasError = computed(() => this.dataResource.hasValue() === false && this.error() !== undefined);
+
+  constructor(
+    private dataLoader: DataLoader<T>,
+    initialPageSize = 10
+  ) {
+    super();
+    this._pageSize.set(initialPageSize);
+
+    this.dataResource = resource({
+      params: () => ({
+        pageNumber: this._pageNumber(),
+        pageSize: this._pageSize(),
+        sortColumn: this._sortColumn() as string | undefined,
+        sortDirection: this._sortDirection(),
+        filter: this.filter(),
+      }),
+      loader: async (params: ResourceLoaderParams<PageRequest>) => {
+        const request = params.params;
+        const response = await this.dataLoader(request);
+
+        if (request.pageNumber === 1 || this.totalRecords() === 0) {
+          this.totalRecords.set(response.totalRecords);
+        }
+
+        return response;
+      },
+    });
+  }
+
+  override sortRecords(sort: Sort<T>) {
+    this.sort.set(sort);
+    this._sortColumn.set(sort.column);
+    this._sortDirection.set(sort.direction);
+    this._pageNumber.set(1);
+  }
+
+  override firstPage() {
+    this._pageNumber.set(1);
+  }
+
+  override nextPage() {
+    if (this._pageNumber() < this.pageCount()) {
+      this._pageNumber.update((n) => n + 1);
+    }
+  }
+
+  override previousPage() {
+    if (this._pageNumber() > 1) {
+      this._pageNumber.update((n) => n - 1);
+    }
+  }
+
+  override lastPage() {
+    this._pageNumber.set(this.pageCount());
+  }
+
+  override jumpToPage(page: number) {
+    if (page >= 1 && page <= this.pageCount()) {
+      this._pageNumber.set(page);
+    }
+  }
+
+  override setPageSize(size: number) {
+    if (size > 0) {
+      this._pageSize.set(size);
+      this._pageNumber.set(1);
+    }
+  }
+
+  setFilter(filterValues: Record<string, any>) {
+    this.filter.set(filterValues);
+    this._pageNumber.set(1);
+  }
+
+  clearFilter() {
+    this.filter.set({});
+    this._pageNumber.set(1);
+  }
+
+  refresh() {
+    this.dataResource.reload();
+  }
+
+  getPageRequest(): PageRequest {
+    return {
+      pageNumber: this._pageNumber(),
+      pageSize: this._pageSize(),
+      sortColumn: this._sortColumn() as string | undefined,
+      sortDirection: this._sortDirection(),
+      filter: this.filter(),
+    };
+  }
+}