Skip to content

Commit dbea986

Browse files
MGREMYMGREMY
authored
feat(pagination): add new pagination component (#106)
## PR Checklist Please check if your PR fulfills the following requirements: <!--- [ ] Tests for the changes have been added (for bug fixes/features)--> - [x] Docs have been added/updated (for bug fixes/features) ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> - [ ] Bugfix - [x] Feature - [ ] Code style update (formatting, local variables) - [ ] Refactoring (no functional changes, no API changes) - [ ] Build related changes - [ ] CI-related changes - [x] Documentation content changes - [ ] Other... Please describe: ## Issue Number <!-- Bugs and features must be linked to an issue. --> Issue Number: N/A ## Does this PR introduce a breaking change? <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> - [ ] Yes - [x] No ## Other information Remaining works to do: - [x] fix icons in first/last and prev/next button - [x] possibility to use custom icons, like in accordion (#95) - [ ] ~~possibility to customize buttons' label + internalization~~ - [x] implement different size variables - [x] remove duplications from `libs/flowbite-angular/core/flowbite.theme.init.ts` - [x] remove unused pageChange output - [x] create InjectionTokens for properties (tabs, pageSize, etc..) - [x] use a cleaner way to customize `PaginationButtonDirective` (big thanks @MGREMY ) - [x] requested changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit ## Release Notes: Flowbite Angular Pagination Component - **New Features** - Introduced multiple Pagination components with various configurations, including default, custom, and text navigation modes. - Added support for customizable pagination styles and attributes such as current page, total items, and page size. - Expanded the available SVG icons for navigation. - **Documentation** - Updated documentation with comprehensive examples for different pagination styles and configurations. - Added compatibility information for library versions with Angular and TailwindCSS. - **Improvements** - Enhanced theming capabilities for pagination components. - Improved error handling for page navigation controls. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 parents aab3f50 + e8860f1 commit dbea986

24 files changed

+844
-2
lines changed

‎apps/docs/docs/components/pagination/_both.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<flowbite-pagination
2+
[totalItems]="100"
3+
[navigationMode]="'both'" />

‎apps/docs/docs/components/pagination/_both.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PaginationComponent } from 'flowbite-angular/pagination';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'flowbite-demo-pagination-both',
7+
imports: [PaginationComponent],
8+
templateUrl: './_both.component.html',
9+
})
10+
export class FlowbiteBothComponent {}

‎apps/docs/docs/components/pagination/_custom.component.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<flowbite-pagination
2+
[currentPage]="20"
3+
[totalItems]="100000"
4+
[pageSize]="50"
5+
[hasFirstLast]="false"
6+
[ariaLabel]="'Custom pagination'"
7+
[customStyle]="{
8+
root: { base: 'flex gap-2' },
9+
}" />

‎apps/docs/docs/components/pagination/_custom.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PaginationComponent } from 'flowbite-angular/pagination';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'flowbite-demo-pagination-custom',
7+
imports: [PaginationComponent],
8+
templateUrl: './_custom.component.html',
9+
})
10+
export class FlowbiteCustomComponent {}

‎apps/docs/docs/components/pagination/_default.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<flowbite-pagination [totalItems]="1000" />

‎apps/docs/docs/components/pagination/_default.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PaginationComponent } from 'flowbite-angular/pagination';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'flowbite-demo-pagination-default',
7+
imports: [PaginationComponent],
8+
templateUrl: './_default.component.html',
9+
})
10+
export class FlowbiteDefaultComponent {}

‎apps/docs/docs/components/pagination/_text.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<flowbite-pagination
2+
[totalItems]="100"
3+
[navigationMode]="'text'" />

‎apps/docs/docs/components/pagination/_text.component.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { PaginationComponent } from 'flowbite-angular/pagination';
2+
3+
import { Component } from '@angular/core';
4+
5+
@Component({
6+
selector: 'flowbite-demo-pagination-text',
7+
imports: [PaginationComponent],
8+
templateUrl: './_text.component.html',
9+
})
10+
export class FlowbiteTextComponent {}

‎apps/docs/docs/components/pagination/index.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
keyword: PaginationPage
3+
---
4+
5+
## Default pagination
6+
7+
{{ NgDocActions.demo('flowbiteDefaultComponent', {container: false}) }}
8+
9+
```angular-html file="./_default.component.html" group="default" name="html"
10+
11+
```
12+
13+
```angular-ts file="./_default.component.ts" group="default" name="typescript"
14+
15+
```
16+
17+
## Pagination with text
18+
19+
{{ NgDocActions.demo('flowbiteTextComponent', {container: false}) }}
20+
21+
```angular-html file="./_text.component.html" group="text" name="html"
22+
23+
```
24+
25+
```angular-ts file="./_text.component.ts"#L1 group="text" name="typescript"
26+
27+
```
28+
29+
## Pagination with text and icon
30+
31+
{{ NgDocActions.demo('flowbiteBothComponent', {container: false}) }}
32+
33+
```angular-html file="./_both.component.html" group="both" name="html"
34+
35+
```
36+
37+
```angular-ts file="./_both.component.ts"#L1 group="both" name="typescript"
38+
39+
```
40+
41+
## Customized pagination
42+
43+
{{ NgDocActions.demo('flowbiteCustomComponent', {container: false}) }}
44+
45+
```angular-html file="./_custom.component.html" group="custom" name="html"
46+
47+
```
48+
49+
```angular-ts file="./_custom.component.ts"#L1 group="custom" name="typescript"
50+
51+
```

‎apps/docs/docs/components/pagination/ng-doc.page.ts

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import ComponentCategory from '../ng-doc.category';
2+
import { FlowbiteBothComponent } from './_both.component';
3+
import { FlowbiteCustomComponent } from './_custom.component';
4+
import { FlowbiteDefaultComponent } from './_default.component';
5+
import { FlowbiteTextComponent } from './_text.component';
6+
7+
import type { NgDocPage } from '@ng-doc/core';
8+
9+
/**
10+
* Use the pagination component to show a list of buttons to navigate in your tables
11+
*
12+
* @status:info NEW
13+
*/
14+
const pagination: NgDocPage = {
15+
title: 'Pagination',
16+
mdFile: './index.md',
17+
category: ComponentCategory,
18+
order: 10,
19+
demos: {
20+
flowbiteDefaultComponent: FlowbiteDefaultComponent,
21+
flowbiteTextComponent: FlowbiteTextComponent,
22+
flowbiteBothComponent: FlowbiteBothComponent,
23+
flowbiteCustomComponent: FlowbiteCustomComponent,
24+
},
25+
};
26+
27+
export default pagination;

‎apps/docs/docs/getting-started/quickstart/ng-doc.page.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import type { NgDocPage } from '@ng-doc/core';
55
/**
66
* Get started with flowbite-angular by including it into your project using NPM
77
*
8-
* @status:alert UPDATES
8+
* @status:success UPDATES
99
*/
1010
const Quickstart: NgDocPage = {
1111
title: 'Quickstart',

‎apps/docs/docs/getting-started/versioning/index.md

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ keyword: VersioningPage
66
77
| Flowbite-angular version | Angular version | TailwindCSS version |
88
| ------------------------ | --------------- | ------------------- |
9+
| 1.4.0 | >=18.0.0 | ^3.0.0 |
10+
| 1.3.0 | >=18.0.0 | ^3.0.0 |
911
| 1.2.0 | >=18.0.0 | ^3.0.0 |
1012
| 1.1.1 | 18.0.0 | ^3.0.24 |
1113
| 1.0.0 | 18.0.0 | ^3.0.24 |

‎apps/docs/docs/getting-started/versioning/ng-doc.page.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { NgDocPage } from '@ng-doc/core';
66
* Here is a reference table that matches versions of flowbite-angular with its Angular version. It
77
* also shows the TailwindCSS version used.
88
*
9-
* @status:alert NEW
9+
* @status:info NEW
1010
*/
1111
const Versioning: NgDocPage = {
1212
title: 'Versioning',

‎apps/docs/docs/ng-doc.api.ts

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ const api: NgDocApi = {
3232
'libs/flowbite-angular/indicator/index.ts',
3333
'libs/flowbite-angular/modal/index.ts',
3434
'libs/flowbite-angular/navbar/index.ts',
35+
'libs/flowbite-angular/pagination/index.ts',
3536
'libs/flowbite-angular/scroll-top/index.ts',
3637
'libs/flowbite-angular/sidebar/index.ts',
3738
'libs/flowbite-angular/theme/index.ts',

‎libs/flowbite-angular/core/flowbite.theme.init.ts

+15
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,12 @@ import {
118118
navbarToggleTheme,
119119
NavbarToggleThemeService,
120120
} from 'flowbite-angular/navbar';
121+
import {
122+
FLOWBITE_PAGINATION_THEME_TOKEN,
123+
paginationDefaultValueProvider,
124+
paginationTheme,
125+
PaginationThemeService,
126+
} from 'flowbite-angular/pagination';
121127
import {
122128
FLOWBITE_SCROLL_TOP_THEME_TOKEN,
123129
scrollTopDefaultValueProvider,
@@ -263,6 +269,10 @@ export function initFlowbite(): EnvironmentProviders {
263269
provide: NavbarThemeService,
264270
useClass: NavbarThemeService,
265271
},
272+
{
273+
provide: PaginationThemeService,
274+
useClass: PaginationThemeService,
275+
},
266276
{
267277
provide: ScrollTopThemeService,
268278
useClass: ScrollTopThemeService,
@@ -391,6 +401,10 @@ export function initFlowbite(): EnvironmentProviders {
391401
provide: FLOWBITE_NAVBAR_THEME_TOKEN,
392402
useValue: navbarTheme,
393403
},
404+
{
405+
provide: FLOWBITE_PAGINATION_THEME_TOKEN,
406+
useValue: paginationTheme,
407+
},
394408
{
395409
provide: FLOWBITE_SCROLL_TOP_THEME_TOKEN,
396410
useValue: scrollTopTheme,
@@ -447,6 +461,7 @@ export function initFlowbite(): EnvironmentProviders {
447461
navbarIconButtonDefaultValueProvider,
448462
navbarContentDefaultValueProvider,
449463
navbarBrandDefaultThemeProvider,
464+
paginationDefaultValueProvider,
450465
scrollTopDefaultValueProvider,
451466
sidebarDefaultValueProvider,
452467
sidebarToggleDefaultValueProvider,

‎libs/flowbite-angular/pagination/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# flowbite-angular/pagination
2+
3+
Secondary entry point of `flowbite-angular`. It can be used by importing from
4+
`flowbite-angular/pagination`.

‎libs/flowbite-angular/pagination/index.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
export {
2+
PaginationComponent,
3+
paginationDefaultValueProvider,
4+
FLOWBITE_PAGINATION_CURRENT_PAGE_DEFAULT_VALUE,
5+
FLOWBITE_PAGINATION_BUTTON_PROPERTIES_DEFAULT_VALUE,
6+
FLOWBITE_PAGINATION_CUSTOM_STYLE_DEFAULT_VALUE,
7+
FLOWBITE_PAGINATION_PREVIOUS_ICON_DEFAULT_VALUE,
8+
FLOWBITE_PAGINATION_NEXT_ICON_DEFAULT_VALUE,
9+
FLOWBITE_PAGINATION_FIRST_ICON_DEFAULT_VALUE,
10+
FLOWBITE_PAGINATION_LAST_ICON_DEFAULT_VALUE,
11+
FLOWBITE_PAGINATION_TABS_DEFAULT_VALUE,
12+
FLOWBITE_PAGINATION_PAGE_SIZE_DEFAULT_VALUE,
13+
FLOWBITE_PAGINATION_HAS_FIRST_LAST_DEFAULT_VALUE,
14+
FLOWBITE_PAGINATION_HAS_PREV_NEXT_DEFAULT_VALUE,
15+
FLOWBITE_PAGINATION_NAVIGATION_MODE_DEFAULT_VALUE,
16+
FLOWBITE_PAGINATION_SIZE_DEFAULT_VALUE,
17+
} from './pagination.component';
18+
export type { PaginationProperties, PaginationClass, PaginationTheme } from './pagination.theme';
19+
export { paginationTheme } from './pagination.theme';
20+
export {
21+
PaginationThemeService,
22+
FLOWBITE_PAGINATION_THEME_TOKEN,
23+
} from './pagination.theme.service';

‎libs/flowbite-angular/pagination/ng-package.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"lib": {
3+
"entryFile": "./index.ts"
4+
}
5+
}

0 commit comments

Comments
 (0)