fix: pagination update

Author: shinokada

src/lib/alert/theme.ts

@@ -30,10 +30,6 @@ const alert = tv({
       fuchsia: "bg-fuchsia-100 text-fuchsia-500 hover:bg-fuchsia-200 focus:ring-fuchsia-400 dark:bg-fuchsia-200 dark:text-fuchsia-600 dark:hover:bg-fuchsia-300",
       pink: "bg-pink-100 text-pink-500 hover:bg-pink-200 focus:ring-pink-400 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300",
       rose: "bg-rose-100 text-rose-500 hover:bg-rose-200 focus:ring-rose-400 dark:bg-rose-200 dark:text-rose-600 dark:hover:bg-rose-300",
-      info: "bg-info-100 text-info-500 hover:bg-info-200 focus:ring-info-400 dark:bg-info-200 dark:text-info-600 dark:hover:bg-info-300",
-      success: "bg-success-100 text-success-500 hover:bg-success-200 focus:ring-success-400 dark:bg-success-200 dark:text-success-600 dark:hover:bg-success-300",
-      warning: "bg-warning-100 text-warning-500 hover:bg-warning-200 focus:ring-warning-400 dark:bg-warning-200 dark:text-warning-600 dark:hover:bg-warning-300",
-      failure: "bg-failure-100 text-failure-500 hover:bg-failure-200 focus:ring-failure-400 dark:bg-failure-200 dark:text-failure-600 dark:hover:bg-failure-300"
     },
     rounded: {
       true: 'rounded-lg'

src/lib/forms/range/Range.svelte

@@ -4,7 +4,7 @@
   let {
     value = $bindable(),
     appearance = 'none',
-    color = 'primary',
+    color = 'blue',
     rangeSize = 'md',
     inputClass,
     ...attributes

src/lib/index.ts

@@ -20,6 +20,7 @@ export * from './indicator';
 export * from './kbd';
 export * from './list-group';
 export * from './nav';
+export * from './pagination';
 export * from './progress';
 export * from './rating';
 export * from './sidebar';

src/lib/pagination/Pagination.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    import { setContext } from 'svelte';
+  import { type PaginationProps as Props, pagination, PaginationItem } from '.';
+
+  let {
+    pages = [],
+    previous,
+    next,
+    prevContent,
+    nextContent,
+    activeClass,
+    normalClass,
+    ulClass,
+    table,
+    size,
+    ariaLabel,
+    ...attributes
+  }: Props = $props()
+
+  setContext('group', true);
+  setContext('table', table);
+  setContext('size', size);
+  
+  const paginationClass = $derived(pagination({ table, size }));
+</script>
+
+<nav aria-label={ariaLabel}>
+  <ul class={paginationClass}>
+    {#if typeof previous === 'function'}
+    <li>
+      <PaginationItem {size} onclick={()=>previous()} class={table ? 'rounded-l' : 'rounded-s-lg'}>
+        {#if prevContent}
+          {@render prevContent()}
+        {:else}
+          Previous
+        {/if}
+      </PaginationItem>
+    </li>
+    {/if}
+    {#each pages as { name, href, active }}
+      <li>
+        <PaginationItem {size} {active} {href} {...attributes}>
+          {name}
+        </PaginationItem>
+      </li>
+    {/each}
+    {#if typeof next === 'function'}
+    <li>
+      <PaginationItem size={size} onclick={()=>next()} class={table ? 'rounded-r' : 'rounded-e-lg'}>
+        {#if nextContent}
+          {@render nextContent()}
+        {:else}
+          Next
+        {/if}
+      </PaginationItem>
+    </li>
+    {/if}
+  </ul>
+</nav>

src/lib/pagination/PaginationItem.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { paginationItem, type PaginationItemProps as Props } from '.';
+  import { getContext } from 'svelte';
+
+  let {
+    children,
+    size,
+    class: className,
+    href,
+    active,
+    activeClass,
+    normalClass,
+    ...attributes
+  }: Props = $props()
+
+const group = getContext<boolean>('group');
+const table = getContext<boolean>('table');
+const paginationClass = $derived(paginationItem({ size, active, group, table }));
+
+</script>
+
+<svelte:element this={href ? 'a' : 'button'} {href} class={paginationClass} role={href ? 'button' : undefined} {...attributes}>
+  {#if children}
+  {@render children()}
+  {/if}
+</svelte:element>

src/lib/pagination/index.ts

@@ -0,0 +1,45 @@
+import { paginationItem, pagination } from './theme'
+import type { Snippet } from 'svelte';
+import Pagination from './Pagination.svelte'
+import { type VariantProps } from 'tailwind-variants';
+import PaginationItem from './PaginationItem.svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
+type PaginationItemProps = PaginationItemAttributes & (
+  | (HTMLAnchorAttributes & { href: string })
+  | (HTMLButtonAttributes & { href?: never })
+);
+
+type PaginationItemType = VariantProps<typeof paginationItem>;
+interface PaginationItemAttributes {
+  children?: Snippet;
+  name?: string | undefined;
+  href?: string | undefined;
+  active?: boolean;
+  activeClass?: string;
+  normalClass?: string;
+  rel?: string;
+  size?: PaginationItemType['size'];
+}
+
+interface PaginationProps {
+  prevContent?: Snippet;
+  nextContent?: Snippet;
+  pages?: PaginationItemProps[];
+  previous?: ()=>void;
+  next?: ()=>void;
+  activeClass?: string;
+  normalClass?: string;
+  ulClass?: string;
+  table?: boolean;
+  size?: PaginationItemType['size'];
+  ariaLabel?: string;
+}
+
+export {
+  Pagination,
+  PaginationItem,
+  paginationItem,
+  pagination,
+  type PaginationItemProps,
+  type PaginationProps
+}

src/lib/pagination/theme.ts

@@ -0,0 +1,54 @@
+import { tv } from 'tailwind-variants';
+
+export const paginationItem = tv({
+  base: 'flex items-center font-medium',
+  variants: {
+    size: {
+      default: 'h-8 px-3 text-sm',
+      large: 'h-10 px-4 text-base',
+    },
+    active: {
+      true: 'text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white',
+      false: 'text-gray-500 bg-white hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white',
+    },
+    group: {
+      true: '',
+      false: 'rounded-lg',
+    },
+    table: {
+      true: 'rounded',
+      false: 'border',
+    },
+  },
+  compoundVariants: [
+    {
+      group: false,
+      table: false,
+      class: 'rounded-lg',
+    },
+  ],
+  defaultVariants: {
+    size: 'default',
+    active: false,
+    group: false,
+    table: false,
+  },
+});
+
+export const pagination = tv({
+  base: 'inline-flex -space-x-px rtl:space-x-reverse items-center',
+  variants: {
+    table: {
+      true: 'divide-x rtl:divide-x-reverse dark divide-gray-700 dark:divide-gray-700',
+      false: '',
+    },
+    size: {
+      default: '',
+      large: '',
+    },
+  },
+  defaultVariants: {
+    table: false,
+    size: 'default',
+  },
+});

src/routes/components/badge/+page.svelte

@@ -206,7 +206,7 @@
     <EnvelopeSolid class="text-white dark:text-white" />
     <span class="sr-only">Notifications</span>
     <Indicator
-      color="dark"
+      color="sky"
       border
       size="xl"
       placement="bottom-right"

src/routes/components/button/+page.svelte

@@ -201,7 +201,7 @@
   <Button class="gap-2">
     Messages
     <Indicator
-      color="none"
+      color="cyan"
       class="bg-primary-200 text-xs font-semibold text-primary-800"
       size="lg">2</Indicator
     >
@@ -230,7 +230,7 @@
 <H2>Loader</H2>
 <CodeWrapper>
   <Button>
-    <Spinner class="me-3" size="4" color="white" />Loading ...
+    <Spinner class="me-3" size="4" color="teal" />Loading ...
   </Button>
   <Button color="alternative">
     <Spinner class="me-3" size="4" />Loading ...

src/routes/components/pagination/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { Select, Label } from '$lib';
+  import { Select, Label, Pagination, PaginationItem } from '$lib';
+  import { ChevronLeftOutline, ChevronRightOutline, ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
+  import { page } from '$app/stores';
   import HighlightCompo from '../../utils/HighlightCompo.svelte';
   import CodeWrapper from '../../utils/CodeWrapper.svelte';
   import H1 from '../../utils/H1.svelte';
@@ -10,6 +12,101 @@
     import: 'default',
     eager: true
   });
+
+  let activeUrl = $state($page.url.searchParams.get('page'));
+  let pages = $state([
+    { name: "1", href: '/components/pagination?page=1', active: false },
+    { name: "2", href: '/components/pagination?page=2', active: false },
+    { name: "3", href: '/components/pagination?page=3', active: false },
+    { name: "4", href: '/components/pagination?page=4', active: false },
+    { name: "5", href: '/components/pagination?page=5', active: false }
+  ]);
+  let helper = { start: 1, end: 10, total: 100 };
+ 
+  $effect(()=>{
+    pages.forEach((page) => {
+      let splitUrl = page.href.split('?');
+      let queryString = splitUrl.slice(1).join('?');
+      const hrefParams = new URLSearchParams(queryString);
+      let hrefValue = hrefParams.get('page');
+      if (hrefValue === activeUrl) {
+        page.active = true;
+      } else {
+        page.active = false;
+      }
+    });
+    pages = pages;
+  })
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
 </script>
 
 <H1>Pagination</H1>
+
+<H2>Default pagination</H2>
+<CodeWrapper class="space-y-4 flex flex-col">
+  <Pagination {pages} {previous} {next} />
+  <Pagination {pages} size="large" {previous} {next} />
+</CodeWrapper>
+
+<H2>Pagination with icons</H2>
+<CodeWrapper>
+  <Pagination {pages} {previous} {next}>
+    {#snippet prevContent()}
+      <span class="sr-only">Previous</span>
+      <ChevronLeftOutline class="w-5 h-5" />
+    {/snippet}
+    {#snippet nextContent()}
+      <span class="sr-only">Next</span>
+      <ChevronRightOutline class="w-5 h-5" />
+    {/snippet}
+  </Pagination>
+</CodeWrapper>
+
+<H2>Previous and next</H2>
+<CodeWrapper>
+  <div class="flex space-x-3 rtl:space-x-reverse">
+    <PaginationItem onclick={previous}>Previous</PaginationItem>
+    <PaginationItem onclick={next}>Next</PaginationItem>
+  </div>
+</CodeWrapper>
+
+
+<H2>Previous and next with icons</H2>
+<CodeWrapper>
+  <div class="flex space-x-3 rtl:space-x-reverse">
+    <PaginationItem class="flex items-center" onclick={previous}>
+      <ArrowLeftOutline class="me-2 w-5 h-5" />
+      Previous
+    </PaginationItem>
+    <PaginationItem class="flex items-center" onclick={next}>
+      Next
+      <ArrowRightOutline class="ms-2 w-5 h-5" />
+    </PaginationItem>
+  </div>
+</CodeWrapper>
+
+<H2>Table data pagination</H2>
+<CodeWrapper>
+  <div class="flex flex-col items-center justify-center gap-2">
+    <div class="text-sm text-gray-700 dark:text-gray-400">
+      Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
+      to
+      <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+      of
+      <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
+      Entries
+    </div>
+  
+    <Pagination table>
+      {#snippet prevContent()}
+        Prev
+      {/snippet}
+    </Pagination>
+  </div>
+</CodeWrapper>