📣

sl-design-system · Jan 7, 2025 · 8ed2eb8 · 8ed2eb8
1 parent c202cbd
commit 8ed2eb8
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 15 deletions.
diff --git a/packages/components/data-source/src/fetch-data-source.ts b/packages/components/data-source/src/fetch-data-source.ts
@@ -1,9 +1,4 @@
-import {
-  DATA_SOURCE_DEFAULT_PAGE_SIZE,
-  DataSource,
-  type DataSourceOptions,
-  type DataSourceSort
-} from './data-source.js';
+import { DataSource, type DataSourceOptions, type DataSourceSort } from './data-source.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export interface FetchDataSourceCallbackOptions<T = any> {
@@ -56,9 +51,6 @@ export class FetchDataSource<T = any> extends DataSource<T> {
   /** Object for keeping track of outstanding fetch calls. */
   #pages: Record<number, Promise<void> | undefined> = {};
 
-  /** The page size when retrieving data. */
-  #pageSize = DATA_SOURCE_DEFAULT_PAGE_SIZE;
-
   /** Proxy of the items array. */
   #proxy: T[] = [];
 
@@ -75,21 +67,20 @@ export class FetchDataSource<T = any> extends DataSource<T> {
     return this.#proxy;
   }
 
-  override get pageSize(): number {
-    return this.#pageSize;
-  }
-
   get size(): number {
     return this.#size;
   }
 
   constructor(options: FetchDataSourceOptions<T>) {
     super(options);
 
-    this.#pageSize = options.pageSize ?? DATA_SOURCE_DEFAULT_PAGE_SIZE;
     this.#size = options.size ?? FetchDataSource.defaultSize;
     this.fetchPage = options.fetchPage;
 
+    if (typeof options.pageSize === 'number') {
+      this.setPageSize(options.pageSize);
+    }
+
     if (options.placeholder) {
       this.placeholder = options.placeholder;
     }

diff --git a/packages/components/grid/src/stories/pagination.stories.ts b/packages/components/grid/src/stories/pagination.stories.ts
@@ -173,7 +173,7 @@ export const DataSource2: Story = {
       <div class="pagination">
         <sl-paginator-status .dataSource=${ds}></sl-paginator-status>
         <sl-paginator .dataSource=${ds}></sl-paginator>
-        <sl-paginator-page-size .dataSource=${ds} .pageSizes=${[10, 15, 20]}></sl-paginator-page-size>
+        <sl-paginator-page-size .dataSource=${ds} page-sizes="[5,10,15,20]"></sl-paginator-page-size>
       </div>
     `;
   }

diff --git a/packages/components/paginator/src/examples.stories.ts b/packages/components/paginator/src/examples.stories.ts
@@ -19,6 +19,7 @@ export const Connected: Story = {
     };
 
     const onPageSizeChange = ({ detail: pageSize }: SlChangeEvent<number>): void => {
+      document.querySelector('sl-paginator')!.page = 0;
       document.querySelector('sl-paginator')!.pageSize = pageSize;
       document.querySelector('sl-paginator-status')!.pageSize = pageSize;
     };