[Paginate] Rename items to data and pageItems slot prop to `pag…

…eData` to better integrate with `Table`. Maintain `data` type to `pageData`. Improve types for Table, Paginate, Selection, Steps, and InfiniteScroll
techniq · Mar 20, 2024 · fc50ca2 · fc50ca2
1 parent e06cec6
commit fc50ca2
Show file tree

Hide file tree

Showing 15 changed files with 94 additions and 76 deletions.
diff --git a/.changeset/old-pianos-rush.md b/.changeset/old-pianos-rush.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": patch
+---
+
+Improve types for Table, Paginate, Selection, Steps, and InfiniteScroll
diff --git a/.changeset/swift-yaks-grow.md b/.changeset/swift-yaks-grow.md
@@ -0,0 +1,5 @@
+---
+"svelte-ux": minor
+---
+
+Breaking change: [Paginate] Rename `items` to `data` and `pageItems` slot prop to `pageData` to better integrate with `Table`. Maintain `data` type to `pageData`.
diff --git a/packages/svelte-ux/src/lib/components/InfiniteScroll.svelte b/packages/svelte-ux/src/lib/components/InfiniteScroll.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { intersection } from '../actions/observer.js';
 
-  export let items: any[];
+  type T = $$Generic;
+
+  export let items: T[];
   export let perPage = 10;
   export let disabled = false;
 

diff --git a/packages/svelte-ux/src/lib/components/Paginate.svelte b/packages/svelte-ux/src/lib/components/Paginate.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
   import paginationStore from '../stores/paginationStore.js';
 
-  export let items: any[];
+  type T = $$Generic;
+
+  export let data: T[];
   export let perPage = 10;
 
   const pagination = paginationStore({ perPage });
   $: pagination.setPerPage(perPage);
-  $: pagination.setTotal(items.length);
-  $: pageItems = $pagination.slice(items);
+  $: pagination.setTotal(data.length);
+  $: pageData = $pagination.slice(data);
 </script>
 
-<slot {pagination} {pageItems} />
+<slot {pagination} {pageData} />
diff --git a/packages/svelte-ux/src/lib/components/Selection.svelte b/packages/svelte-ux/src/lib/components/Selection.svelte
@@ -3,8 +3,8 @@
 
   type T = $$Generic;
 
-  export let initial: any[] = [];
-  export let all: any[] = [];
+  export let initial: T[] = [];
+  export let all: T[] = [];
   export let single = false;
   export let max: number | undefined = undefined;
 

diff --git a/packages/svelte-ux/src/lib/components/Steps.svelte b/packages/svelte-ux/src/lib/components/Steps.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  export let items: any[];
+  type T = $$Generic;
+
+  export let data: T[];
   export let lineGap = 4;
 
   // binded
@@ -12,13 +14,13 @@
   style:--lineBottom="{lineGap}px"
   style:--lineOffset="{circleSize / 2}px"
 >
-  {#each items as item, index}
+  {#each data as item, index}
     <li class="step relative flex gap-4 pb-10">
       <div bind:clientWidth={circleSize}>
         <slot name="marker" {item} />
       </div>
 
-      {#if index < items.length - 1}
+      {#if index < data.length - 1}
         <div
           class="line absolute top-[var(--lineTop)] bottom-[var(--lineBottom)] left-0 w-[2px] translate-x-[var(--lineOffset)] bg-surface-content/20"
         />

diff --git a/packages/svelte-ux/src/lib/components/Table.svelte b/packages/svelte-ux/src/lib/components/Table.svelte
@@ -12,13 +12,15 @@
   import { getSettings } from './settings.js';
   import type { tableOrderStore } from '$lib/index.js';
 
+  type T = $$Generic;
+
   const dispatch = createEventDispatcher<{
     headerClick: { column: ColumnDef };
-    cellClick: { column: ColumnDef; rowData: any };
+    cellClick: { column: ColumnDef; rowData: T };
   }>();
 
   export let columns: ColumnDef[] = [];
-  export let data: any[] | null = [];
+  export let data: T[] | null = [];
 
   export let order: ReturnType<typeof tableOrderStore> | undefined = undefined;
 
@@ -69,7 +71,7 @@
   });
 
   const { format } = getSettings();
-  $: getCellContent = (column: ColumnDef, rowData: any, rowIndex: number) => {
+  $: getCellContent = (column: ColumnDef, rowData: T, rowIndex: number) => {
     let value = getCellValue(column, rowData, rowIndex);
     if (column.format) {
       if (typeof column.format === 'function') {

diff --git a/packages/svelte-ux/src/lib/stores/paginationStore.ts b/packages/svelte-ux/src/lib/stores/paginationStore.ts
@@ -56,8 +56,8 @@ function createState(page: number, perPage: number, total: number) {
     hasPrevious: totalPages > 1 && page > 1,
     hasNext: page < totalPages,
 
-    slice<T>(items: T[]) {
-      return items.slice((page - 1) * perPage, page * perPage);
+    slice<T>(data: T[]) {
+      return data.slice((page - 1) * perPage, page * perPage);
     },
   };
 }
diff --git a/packages/svelte-ux/src/lib/utils/rollup.ts b/packages/svelte-ux/src/lib/utils/rollup.ts
@@ -3,7 +3,7 @@ import { get, isFunction } from 'lodash-es';
 
 export default function <T = any>(
   data: T[],
-  reduce: (items: T[]) => any,
+  reduce: (values: T[]) => any,
   keys: (((d: any) => any) | string | null)[] = [],
   emptyKey = 'Unknown'
 ) {

diff --git a/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md b/packages/svelte-ux/src/routes/docs/components/Paginate/+page.md
@@ -6,7 +6,7 @@
 	import Paginate from '$lib/components/Paginate.svelte';
 	import Preview from '$lib/components/Preview.svelte';
 
-	const items = Array(100).fill(null).map((x, i) => ({ name: `Item: ${i + 1}`}))
+	const data = Array(100).fill(null).map((x, i) => ({ name: `Item: ${i + 1}`}))
 </script>
 
 <h1>Usage</h1>
@@ -16,8 +16,8 @@
   import { Paginate, Pagination } from 'svelte-ux';
 </script>
 
-<Paginate {items} let:pageItems let:pagination>
-  {#each pageItems as child}
+<Paginate {data} let:pageData let:pagination>
+  {#each pageData as d}
     <!-- render item -->
   {/each}
   <Pagination {pagination} />
@@ -29,11 +29,11 @@
 <h2>Default</h2>
 
 <Preview>
-	<Paginate {items} let:pageItems let:pagination>
-		{#each pageItems as child}
-			<ListItem title={child.name} />
+	<Paginate {data} let:pageData let:pagination>
+		{#each pageData as d}
+			<ListItem title={d.name} />
 		{/each}
-		{#if pageItems.length > 0}
+		{#if pageData.length > 0}
 			<Pagination {pagination} />
 		{/if}
 	</Paginate>
@@ -42,11 +42,11 @@
 <h2>Per page</h2>
 
 <Preview>
-	<Paginate {items} perPage={5} let:pageItems let:pagination>
-		{#each pageItems as child}
-			<ListItem title={child.name} />
+	<Paginate {data} perPage={5} let:pageData let:pagination>
+		{#each pageData as d}
+			<ListItem title={d.name} />
 		{/each}
-		{#if pageItems.length > 0}
+		{#if pageData.length > 0}
 			<Pagination {pagination} />
 		{/if}
 	</Paginate>

diff --git a/packages/svelte-ux/src/routes/docs/components/Selection/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Selection/+page.svelte
@@ -7,12 +7,12 @@
   import Radio from '$lib/components/Radio.svelte';
   import Selection from '$lib/components/Selection.svelte';
 
-  const items = Array.from({ length: 5 }).map((_, i) => {
+  const data = Array.from({ length: 5 }).map((_, i) => {
     return {
       id: i + 1,
     };
   });
-  const manyItems = Array.from({ length: 50 }).map((_, i) => {
+  const data2 = Array.from({ length: 50 }).map((_, i) => {
     return {
       id: i + 1,
     };
@@ -25,10 +25,10 @@
 
 <Preview>
   <Selection let:selected let:isSelected let:toggleSelected>
-    {#each items as item}
+    {#each data as d}
       <div>
-        <Checkbox checked={isSelected(item.id)} on:change={() => toggleSelected(item.id)}>
-          {item.id}
+        <Checkbox checked={isSelected(d.id)} on:change={() => toggleSelected(d.id)}>
+          {d.id}
         </Checkbox>
       </div>
     {/each}
@@ -40,10 +40,10 @@
 
 <Preview>
   <Selection initial={[1, 2, 3]} let:selected let:isSelected let:toggleSelected>
-    {#each items as item}
+    {#each data as d}
       <div>
-        <Checkbox checked={isSelected(item.id)} on:change={() => toggleSelected(item.id)}>
-          {item.id}
+        <Checkbox checked={isSelected(d.id)} on:change={() => toggleSelected(d.id)}>
+          {d.id}
         </Checkbox>
       </div>
     {/each}
@@ -55,7 +55,7 @@
 
 <Preview>
   <Selection
-    all={items.map((item) => item.id)}
+    all={data.map((d) => d.id)}
     let:isAnySelected
     let:isAllSelected
     let:toggleAll
@@ -70,10 +70,10 @@
     >
       Select all
     </Checkbox>
-    {#each items as item}
+    {#each data as d}
       <div>
-        <Checkbox checked={isSelected(item.id)} on:change={() => toggleSelected(item.id)}>
-          {item.id}
+        <Checkbox checked={isSelected(d.id)} on:change={() => toggleSelected(d.id)}>
+          {d.id}
         </Checkbox>
       </div>
     {/each}
@@ -84,9 +84,9 @@
 <h2>Select all (paginated)</h2>
 
 <Preview>
-  <Paginate items={manyItems} perPage={5} let:pagination let:pageItems>
+  <Paginate data={data2} perPage={5} let:pagination let:pageData>
     <Selection
-      all={pageItems.map((item) => item.id)}
+      all={pageData.map((d) => d.id)}
       let:selected
       let:isAnySelected
       let:isAllSelected
@@ -102,14 +102,14 @@
       >
         Select all
       </Checkbox>
-      {#each pageItems as item}
+      {#each pageData as d}
         <div>
-          <Checkbox checked={isSelected(item.id)} on:change={() => toggleSelected(item.id)}>
-            {item.id}
+          <Checkbox checked={isSelected(d.id)} on:change={() => toggleSelected(d.id)}>
+            {d.id}
           </Checkbox>
         </div>
       {/each}
-      {#if pageItems.length > 0}
+      {#if pageData.length > 0}
         <Pagination {pagination} />
       {/if}
       selected: {JSON.stringify(selected)}
@@ -122,10 +122,10 @@
 
 <Preview>
   <Selection single let:selected let:toggleSelected>
-    {#each items as item}
+    {#each data as d}
       <div>
-        <Radio group={selected} value={item.id} on:change={() => toggleSelected(item.id)}>
-          {item.id}
+        <Radio group={selected} value={d.id} on:change={() => toggleSelected(d.id)}>
+          {d.id}
         </Radio>
       </div>
     {/each}

diff --git a/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte
@@ -8,7 +8,7 @@
 
   import { cls } from '$lib/utils/styles.js';
 
-  const items = [
+  const data = [
     {
       title: 'Label Created',
       location: 'United States',
@@ -53,7 +53,7 @@
 <h2>Basic</h2>
 
 <Preview>
-  <Steps {items}>
+  <Steps {data}>
     <div slot="item" let:item>
       <div class="text-lg font-bold">{item.title}</div>
       <div class="text-sm text-surface-content/50">

diff --git a/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Table/+page.svelte
@@ -83,9 +83,9 @@
 <h2>Pagination</h2>
 
 <Preview>
-  <Paginate items={data} perPage={5} let:pageItems let:pagination>
+  <Paginate {data} perPage={5} let:pageData let:pagination>
     <Table
-      data={pageItems}
+      data={pageData}
       columns={[
         {
           name: 'name',
@@ -161,9 +161,9 @@
 <h2>Order + Pagination</h2>
 
 <Preview>
-  <Paginate items={data.sort($order.handler)} perPage={5} let:pageItems let:pagination>
+  <Paginate data={data.sort($order.handler)} perPage={5} let:pageData let:pagination>
     <Table
-      data={pageItems}
+      data={pageData}
       columns={[
         {
           name: 'name',