alice.pds.demo.boltless.dev
This repository has no description
1<script module lang="ts">
2 import { defineMeta } from "@storybook/addon-svelte-csf";
3 import Pagination from "./Pagination.svelte";
4
5 const { Story } = defineMeta({
6 title: "UI/Pagination",
7 component: Pagination,
8 tags: ["autodocs"],
9 argTypes: {
10 page: { control: { type: "number" } },
11 total: { control: { type: "number" } },
12 siblings: { control: { type: "number" } },
13 boundaries: { control: { type: "number" } },
14 labels: { control: { type: "boolean" } },
15 disabled: { control: { type: "boolean" } }
16 },
17 args: {
18 page: 1,
19 total: 10
20 }
21 });
22</script>
23
24<Story name="FirstPage" args={{ page: 1, total: 10 }} />
25<Story name="MiddlePage" args={{ page: 5, total: 10 }} />
26<Story name="LastPage" args={{ page: 10, total: 10 }} />
27<Story name="FewPages" args={{ page: 2, total: 3 }} />
28<Story name="SinglePage" args={{ page: 1, total: 1 }} />
29<Story name="ManyPages" args={{ page: 12, total: 40 }} />
30<Story name="WithLabels" args={{ page: 5, total: 10, labels: true }} />
31<Story name="Disabled" args={{ page: 5, total: 10, disabled: true }} />
32
33<!-- slots are sized from `total`, so a four-digit range keeps one width across the
34 whole row instead of widening as the current page gains a digit -->
35<Story name="FourDigitRange" args={{ page: 1234, total: 5000 }} />
36<Story name="WideWindow" args={{ page: 20, total: 40, siblings: 2, boundaries: 2 }} />
37<Story name="NarrowWindow" args={{ page: 20, total: 40, siblings: 0 }} />