[Steps] Add pagintion integration example

techniq · Jun 21, 2024 · 8e2c169 · 8e2c169
1 parent 671fc2a
commit 8e2c169
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 4 deletions.
diff --git a/packages/svelte-ux/src/lib/components/Pagination.svelte b/packages/svelte-ux/src/lib/components/Pagination.svelte
@@ -32,7 +32,7 @@
     | 'perPage'
     | 'actions';
 
-  /** Determine which actions to show */
+  /** Determine which actions to show and order */
   export let show: ShowComponent[] = ['prevPage', 'pagination', 'nextPage'];
 
   export let classes: {

diff --git a/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte b/packages/svelte-ux/src/routes/docs/components/Steps/+page.svelte
@@ -5,8 +5,9 @@
     mdiListBoxOutline,
     mdiTruckDeliveryOutline,
   } from '@mdi/js';
+  import { range } from 'd3-array';
 
-  import { Steps, Step } from 'svelte-ux';
+  import { Button, Paginate, Steps, Step } from 'svelte-ux';
   import Preview from '$lib/components/Preview.svelte';
 
   const steps = [
@@ -29,8 +30,6 @@
     { label: 'Purchase', completed: false, icon: mdiCreditCardOutline },
     { label: 'Receive product', completed: false, icon: mdiTruckDeliveryOutline },
   ];
-
-  const steps2 = ['Fly to moon', 'Shrink the moon', 'Grab the moon', 'Sit on toilet'];
 </script>
 
 <h1>Examples</h1>
@@ -188,3 +187,28 @@
     }}
   />
 </Preview>
+
+<h2>Pagination integration</h2>
+
+<Preview>
+  <Paginate data={range(4)} perPage={1} let:pagination let:current>
+    <div class="inline-grid gap-5">
+      <Steps>
+        <Step completed={current.page >= 1}>Register</Step>
+        <Step completed={current.page >= 2}>Choose plan</Step>
+        <Step completed={current.page >= 3}>Purchase</Step>
+        <Step completed={current.page >= 4}>Receive product</Step>
+      </Steps>
+
+      <div>
+        <Button on:click={pagination.prevPage} disabled={current.isFirst}>Previous</Button>
+        <Button
+          on:click={pagination.nextPage}
+          color="primary"
+          variant="fill"
+          disabled={current.isLast}>Next</Button
+        >
+      </div>
+    </div>
+  </Paginate>
+</Preview>