fix

appwrite · Sep 5, 2024 · dbde627 · dbde627
1 parent deaf1f5
commit dbde627
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 32 deletions.
diff --git a/v2/pink-sb/package.json b/v2/pink-sb/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@appwrite.io/pink-svelte",
-    "version": "1.0.0-next.35",
+    "version": "1.0.0-next.36",
     "scripts": {
         "dev": "storybook dev -p 6006",
         "dev:package": "svelte-kit sync && svelte-package --watch",

diff --git a/v2/pink-sb/src/lib/Pagination.svelte b/v2/pink-sb/src/lib/Pagination.svelte
@@ -1,48 +1,58 @@
 <script lang="ts">
+    import { createPagination } from '@melt-ui/svelte';
     import { IconChevronLeft, IconChevronRight } from '@appwrite.io/pink-icons-svelte';
     import Anchor from './button/Anchor.svelte';
     import Icon from './Icon.svelte';
 
     export let page;
     export let total;
     export let limit;
-    export let siblings = 2;
+    export let siblings = 1;
     export let createLink: (page: number) => string = (page: number) => '#' + page;
 
-    $: pages = Math.ceil(total / limit);
-    $: hasPrevious = page > 1;
-    $: hasNext = page < pages;
-    $: firstPages = Array.from({ length: siblings }, (_, i) => i + 1);
-    $: lastPages = Array.from({ length: siblings }, (_, i) => pages - i).reverse();
+    // $: pages = Math.ceil(total / limit);
+    // $: hasPrevious = page > 1;
+    // $: hasNext = page < pages;
+    // $: firstPages = Array.from({ length: siblings }, (_, i) => i + 1);
+    // $: lastPages = Array.from({ length: siblings }, (_, i) => pages - i).reverse();
+
+    const {
+        elements: { root, prevButton, nextButton },
+        states: { pages }
+    } = createPagination({
+        count: total,
+        perPage: limit,
+        defaultPage: page,
+        siblingCount: siblings
+    });
 </script>
 
-<nav>
+<nav {...$root} use:root>
     <Anchor
         variant="text"
-        href={hasPrevious ? createLink(page - 1) : null}
+        href={$prevButton.disabled ? undefined : createLink(page - 1)}
         size="small"
-        disabled={!hasPrevious}
+        disabled={$prevButton.disabled}
     >
         <svelte:fragment slot="start">
             <Icon icon={IconChevronLeft} />
         </svelte:fragment>
         Previous
     </Anchor>
-    {#each firstPages as link}
-        <Anchor variant="text" href={createLink(link)} size="small">
-            {link}
-        </Anchor>
-    {/each}
-    {#each lastPages as link}
-        <Anchor variant="text" href={createLink(link)} size="small">
-            {link}
-        </Anchor>
+    {#each $pages as page (page.key)}
+        {#if page.type === 'ellipsis'}
+            <Anchor variant="text" disabled size="small">...</Anchor>
+        {:else}
+            <Anchor variant="text" href={createLink(page.value)} size="small">
+                {page.value}
+            </Anchor>
+        {/if}
     {/each}
     <Anchor
         variant="text"
-        href={hasNext ? createLink(page + 1) : null}
+        href={$nextButton.disabled ? undefined : createLink(page + 1)}
         size="small"
-        disabled={!hasNext}
+        disabled={$nextButton.disabled}
     >
         <svelte:fragment slot="end">
             <Icon icon={IconChevronRight} />

diff --git a/v2/pink-sb/src/lib/Tag.svelte b/v2/pink-sb/src/lib/Tag.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
     import type { HTMLButtonAttributes } from 'svelte/elements';
 
-    type $$Props = HTMLButtonAttributes & {
-        content: string;
-    } & Partial<{
+    type $$Props = HTMLButtonAttributes &
+        Partial<{
             selected: boolean;
         }>;
 
-    export let content: $$Props['content'];
-
     export let selected: $$Props['selected'] = false;
 </script>
 
-<button on:click class:selected {...$$restProps}>{content}</button>
+<button on:click class:selected {...$$restProps}><slot /></button>
 
 <style lang="scss">
     @use '../scss/mixins/transitions';

diff --git a/v2/pink-sb/src/stories/Pagination.stories.svelte b/v2/pink-sb/src/stories/Pagination.stories.svelte
@@ -22,3 +22,11 @@
 </Template>
 
 <Story name="Default" />
+<Story
+    name="Many"
+    args={{
+        total: 200,
+        page: 1,
+        limit: 5
+    }}
+/>
diff --git a/v2/pink-sb/src/stories/Tag.stories.svelte b/v2/pink-sb/src/stories/Tag.stories.svelte
@@ -4,20 +4,25 @@
 
     export const meta: MetaProps = {
         title: 'Components/Tag',
-        component: Tag,
-        args: {
-            content: 'Tag'
-        }
+        component: Tag
     };
 </script>
 
 <script>
+    import Icon from '$lib/Icon.svelte';
     import { Story, Template } from '@storybook/addon-svelte-csf';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
 </script>
 
 <Template let:args>
-    <Tag {...args} />
+    <Tag {...args}>Content</Tag>
 </Template>
 
 <Story name="Default" />
 <Story name="Selected" args={{ selected: true }} />
+<Story name="Action" let:args>
+    <Tag {...args}>
+        <Icon icon={IconDuplicate} />
+        Action
+    </Tag>
+</Story>