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.

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

feat(pagination): add new pagination component #106

Merged
merged 34 commits into from
Dec 31, 2024
Merged
Changes from 1 commit
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
18761f3
feat(pagination): implement basics based on flowbite (wip)
bence444 Dec 11, 2024
e6482df
feat(pagination): implement basics based on flowbite (wip)
bence444 Dec 11, 2024
cc20b83
feat(pagination): move button design to its own directive
bence444 Dec 12, 2024
6d48101
Merge branch 'pagination' of https://github.com/bence444/flowbite-ang…
bence444 Dec 12, 2024
9f2ca65
feat(pagination): implement basics based on flowbite (wip)
bence444 Dec 11, 2024
1bd73bd
feat(pagination): move button design to its own directive
bence444 Dec 12, 2024
6a77a41
feat(pagination): implement basics based on flowbite (wip)
bence444 Dec 11, 2024
b2c05d5
Merge branch 'pagination' of https://github.com/bence444/flowbite-ang…
bence444 Dec 19, 2024
a43f5cb
fix: merge conflict
bence444 Dec 19, 2024
1aa9da0
feat(pagination): add icons, style active button, jsdoc comments
bence444 Dec 19, 2024
cbaf247
docs(pagination): add NgDoc documentation
bence444 Dec 19, 2024
620f320
fix(pagination): remove duplicated provider registrations
bence444 Dec 19, 2024
2c083bf
fix(pagination): remove unused pageChange output
bence444 Dec 19, 2024
ea541d2
fix(pagination): fix demo component selector
bence444 Dec 19, 2024
a47e774
fix(pagination): correct first visible page
bence444 Dec 20, 2024
1ceabbe
feat(utils): add double chevron icon from `https://flowbite.com/icons/`
bence444 Dec 20, 2024
c92b724
feat(paginator): add customizable icons, size variables
bence444 Dec 20, 2024
15376cb
feat(pagination): add property providers
bence444 Dec 20, 2024
523363e
Merge branch 'main' into pagination
MGREMY Dec 28, 2024
3edf1c4
feat(pagination): remove directive & use flowbite-button
MGREMY Dec 29, 2024
e524102
Merge pull request #1 from MGREMY/pagination
bence444 Dec 30, 2024
cb31e76
chore(pagination): code style updates
bence444 Dec 30, 2024
338e5f3
chore(pagination): use `model` instead of `input`
bence444 Dec 30, 2024
970b79d
refactor(pagination): remove `nav` element, use root and rootClass
bence444 Dec 30, 2024
b914355
chore(pagination): code style
bence444 Dec 30, 2024
c983fca
feat(utils): add left/double left chevron icon
bence444 Dec 30, 2024
434bfa4
feat(pagination): use left sided icons instead of `rotate-180`
bence444 Dec 30, 2024
783c3ed
Merge branch 'main' into pagination
bence444 Dec 30, 2024
0ec0dfa
fix(pagination): place label before icon in next/last button
bence444 Dec 30, 2024
87b1887
refactor(pagination): update post update post comment
MGREMY Dec 30, 2024
021058b
refactor(pagination): fix doc attribute
MGREMY Dec 30, 2024
3947513
Merge pull request #2 from MGREMY/pagination
bence444 Dec 31, 2024
bd238c4
feat(pagination): possibility to use `totalPages` or `totalItems`
bence444 Dec 31, 2024
e8860f1
refactor(pagination): use `Array.from` instead of for loop
bence444 Dec 31, 2024
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
Prev Previous commit
Next Next commit
fix(pagination): correct first visible page
  • Loading branch information
bence444 committed Dec 20, 2024
commit a47e774f0a9442dc31ab9b2fa9a0a496fcd31a2f
18 changes: 14 additions & 4 deletions libs/flowbite-angular/pagination/pagination.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,8 @@ export class PaginationComponent extends BaseComponent<PaginationClass> {
return 1;
}

if (this.currentPage() > this.maxPages() - Math.floor(this.tabs() / 2)) {
return this.maxPages() - this.tabs() + 1;
if (this.currentPage() > this.maxPages() - Math.ceil(this.tabs() / 2)) {
return this.maxPages() - this.visiblePagesCount() + 1;
}

return this.currentPage() - Math.floor(this.tabs() / 2);
Expand All @@ -257,9 +257,12 @@ export class PaginationComponent extends BaseComponent<PaginationClass> {
*/
readonly visiblePages = computed(() => {
const pages: number[] = [];
const visibleTabs = Math.min(this.tabs(), this.maxPages());

for (let i = this.firstPageToShow(); i < this.firstPageToShow() + visibleTabs; i++) {
for (
let i = this.firstPageToShow();
i < this.firstPageToShow() + this.visiblePagesCount();
i++
) {
pages.push(i);
}

Expand All @@ -276,6 +279,13 @@ export class PaginationComponent extends BaseComponent<PaginationClass> {
return Math.min(this.currentPage(), this.maxPages());
});

/**
* Value of how many page tabs to display
*/
readonly visiblePagesCount = computed(() => {
return Math.min(this.tabs(), this.maxPages());
});

/**
* Set the custom style for this pagination
*/
Expand Down