Skip to content

Commit

Permalink
feat: pagination large (#895)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jjagielka
jjagielka authored Jul 5, 2023
1 parent 7910969 commit a5cd87a
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 30 deletions.
23 changes: 11 additions & 12 deletions src/lib/paginations/Pagination.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,12 @@
'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';
export let ulClass: string = 'inline-flex -space-x-px items-center';
export let table: boolean = false;
let normalCls: string = twMerge(normalClass, $$props.classNormal);
let activeCls: string = twMerge(activeClass, $$props.classActive);
export let large: boolean = false;
const dispatch = createEventDispatcher();
setContext('group', true);
setContext('table', table);
setContext<boolean>('group', true);
setContext<boolean>('table', table);
const previous = () => {
dispatch('previous');
Expand All @@ -29,16 +27,20 @@
</script>

<nav aria-label="Page navigation">
<ul class={twMerge(ulClass, table && 'divide-x divide-gray-700', $$props.class)}>
<ul class={twMerge(ulClass, table && 'divide-x dark divide-gray-700 dark:divide-gray-700', $$props.class)}>
<li>
<PaginationItem on:click={previous} class={twJoin(normalCls, table ? 'rounded-l' : 'rounded-l-lg')}>
<PaginationItem {large} on:click={previous} {normalClass} class={table ? 'rounded-l' : 'rounded-l-lg'}>
<slot name="prev">Previous</slot>
</PaginationItem>
</li>
{#each pages as { name, href, active }}
<li>
<PaginationItem
{large}
{active}
{activeClass}
{normalClass}
{href}
on:blur
on:change
on:click
Expand All @@ -48,14 +50,11 @@
on:keyup
on:mouseenter
on:mouseleave
on:mouseover
{activeCls}
{normalCls}
{href}>{name}</PaginationItem>
on:mouseover>{name}</PaginationItem>
</li>
{/each}
<li>
<PaginationItem on:click={next} class={twJoin(normalCls, table ? 'rounded-r' : 'rounded-r-lg')}>
<PaginationItem {large} on:click={next} {normalClass} class={table ? 'rounded-r' : 'rounded-r-lg'}>
<slot name="next">Next</slot>
</PaginationItem>
</li>
Expand Down
22 changes: 12 additions & 10 deletions src/lib/paginations/PaginationItem.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,25 @@
export let href: string | undefined = undefined;
export let active: boolean = false;
export let activeClass: string = '';
export let activeClass: string =
'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';
export let normalClass: string =
'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';
export let large: boolean = false;
const group = getContext('group');
const table = getContext('table');
const group = getContext<boolean>('group');
const table = getContext<boolean>('table');
let defaultClass: string;
$: defaultClass = twMerge([
'block py-2',
group ? 'px-3' : 'px-4',
'text-sm font-medium',
table || 'border border-gray-300',
group || (table ? 'rounded' : 'rounded-lg'),
$: defaultClass = twMerge(
'flex items-center font-medium',
large ? 'h-10 px-4 text-base' : 'h-8 px-3 text-sm',
group ? '' : table ? 'rounded' : 'rounded-lg',
// table || 'border border-gray-300 dark:border-gray-700 dark:bg-gray-800',
table ? '' : 'border',
active ? activeClass : normalClass,
$$props.class
]);
);
</script>

<!-- svelte-ignore a11y-click-events-have-key-events -->
Expand Down
72 changes: 64 additions & 8 deletions src/routes/docs/components/pagination.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The pagination component can be used to navigate across a series of content and

Use the following list of pagination items to indicate a series of content for your website.

```svelte example class="flex justify-center"
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { page } from '$app/stores';
import { Pagination } from 'flowbite-svelte'
Expand Down Expand Up @@ -69,13 +69,14 @@ Use the following list of pagination items to indicate a series of content for y
</script>
<Pagination {pages} on:previous={previous} on:next={next} />
<Pagination {pages} large on:previous={previous} on:next={next} />
```

## Pagination with icons

The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.

```svelte example class="flex justify-center"
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { page } from '$app/stores';
import { Pagination, ChevronLeft, ChevronRight } from 'flowbite-svelte'
Expand Down Expand Up @@ -122,13 +123,25 @@ The following pagination component example shows how you can use SVG icons inste
<ChevronRight class="w-5 h-5"/>
</svelte:fragment>
</Pagination>
<Pagination {pages} large on:previous={previous} on:next={next} icon >
<svelte:fragment slot="prev">
<span class="sr-only">Previous</span>
<ChevronLeft class="w-5 h-5"/>
</svelte:fragment>
<svelte:fragment slot="next">
<span class="sr-only">Next</span>
<ChevronRight class="w-5 h-5"/>
</svelte:fragment>
</Pagination>
```

## Previous and next

Use the following markup to show simple previous and next elements.

```svelte example class="flex justify-center"
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { Pagination, PaginationItem } from 'flowbite-svelte'
const previous = () => {
Expand All @@ -143,13 +156,17 @@ Use the following markup to show simple previous and next elements.
<PaginationItem on:click={previous}>Previous</PaginationItem>
<PaginationItem on:click={next}>Next</PaginationItem>
</div>
<div class="flex space-x-3">
<PaginationItem large on:click={previous}>Previous</PaginationItem>
<PaginationItem large on:click={next}>Next</PaginationItem>
</div>
```

## Previous and next with icons

Use the following code to show simple previous and next elements with icons.

```svelte example class="flex justify-center"
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { Pagination, PaginationItem } from 'flowbite-svelte'
const previous = () => {
Expand All @@ -170,13 +187,23 @@ Use the following code to show simple previous and next elements with icons.
<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</PaginationItem>
</div>
<div class="flex space-x-3">
<PaginationItem large class="flex items-center" on:click={previous}>
<svg class="mr-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
Previous
</PaginationItem>
<PaginationItem large class="flex items-center" on:click={next}>
Next
<svg class="ml-2 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</PaginationItem>
</div>
```

## Table data pagination

You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.

```svelte example
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { Pagination, PaginationItem } from 'flowbite-svelte'
Expand All @@ -190,7 +217,7 @@ You can use the following markup to show the number of data shown inside a table
};
</script>
<div class="flex flex-col items-center justify-center">
<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>
Expand All @@ -201,13 +228,24 @@ You can use the following markup to show the number of data shown inside a table
<span slot="prev">Prev</span>
</Pagination>
</div>
<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 large>
<span slot="prev">Prev</span>
</Pagination>
</div>
```

## Table data pagination with icons

You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.

```svelte example
```svelte example class="flex flex-col justify-center items-center gap-3"
<script>
import { Pagination } from 'flowbite-svelte'
Expand All @@ -221,7 +259,7 @@ You can use the following code to show the number of data shown inside a table e
};
</script>
<div class="flex flex-col items-center justify-center">
<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>
Expand All @@ -239,6 +277,24 @@ You can use the following code to show the number of data shown inside a table e
</div>
</Pagination>
</div>
<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 large>
<div slot="prev" class="flex items-center gap-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
Prev
</div>
<div slot="next" class="flex items-center gap-2">
Next
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</div>
</Pagination>
</div>
```

## Event example
Expand Down

2 comments on commit a5cd87a

@vercel
Copy link

@vercel vercel bot commented on a5cd87a Jul 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flowbite-svelte – ./

flowbite-svelte.vercel.app
flowbite-svelte-git-main-themesberg.vercel.app
flowbite-svelte.com
www.flowbite-svelte.com
flowbite-svelte-themesberg.vercel.app

@vercel
Copy link

@vercel vercel bot commented on a5cd87a Jul 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flowbite-svelte-update – ./

flowbite-svelte-update-themesberg.vercel.app
flowbite-svelte-update.vercel.app
flowbite-svelte-update-git-main-themesberg.vercel.app

Please sign in to comment.