Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: pagination large #895

Merged
merged 1 commit into from
Jul 5, 2023
Merged

feat: pagination large #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions src/lib/paginations/Pagination.svelte
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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