@triptease/tt-paginator 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/src/TtPaginator.js +14 -12
- package/dist/cjs/src/TtPaginator.js.map +1 -1
- package/dist/cjs/src/styles.js +3 -1
- package/dist/cjs/src/styles.js.map +1 -1
- package/dist/esm/src/TtPaginator.d.ts +0 -1
- package/dist/esm/src/TtPaginator.js +14 -12
- package/dist/esm/src/TtPaginator.js.map +1 -1
- package/dist/esm/src/styles.js +3 -1
- package/dist/esm/src/styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -15,7 +15,7 @@ class TtPaginator extends lit_1.LitElement {
|
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
17
|
this.totalRows = 0;
|
|
18
|
-
this.pageSize =
|
|
18
|
+
this.pageSize = 25;
|
|
19
19
|
this.currentPage = 1;
|
|
20
20
|
}
|
|
21
21
|
get totalPages() {
|
|
@@ -45,10 +45,15 @@ class TtPaginator extends lit_1.LitElement {
|
|
|
45
45
|
const range = (0, page_range_js_1.computePageRange)(this.currentPage, this.totalPages);
|
|
46
46
|
return (0, lit_1.html) `
|
|
47
47
|
<nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
<button class="small" data-theme="tertiary" aria-label="Go to first page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>
|
|
49
|
+
First
|
|
50
|
+
</button>
|
|
51
|
+
<button class="small" data-theme="tertiary" aria-label="Go to previous page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>
|
|
52
|
+
Previous
|
|
53
|
+
</button>
|
|
50
54
|
${range.map((page) => (0, lit_1.html) `
|
|
51
55
|
<button
|
|
56
|
+
class="small"
|
|
52
57
|
data-page=${page}
|
|
53
58
|
data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
|
|
54
59
|
aria-label="Go to page ${page}"
|
|
@@ -58,18 +63,15 @@ class TtPaginator extends lit_1.LitElement {
|
|
|
58
63
|
${page}
|
|
59
64
|
</button>
|
|
60
65
|
`)}
|
|
61
|
-
|
|
62
|
-
|
|
66
|
+
<button class="small" data-theme="tertiary" aria-label="Go to next page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>
|
|
67
|
+
Next
|
|
68
|
+
</button>
|
|
69
|
+
<button class="small" data-theme="tertiary" aria-label="Go to last page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>
|
|
70
|
+
Last
|
|
71
|
+
</button>
|
|
63
72
|
</nav>
|
|
64
73
|
`;
|
|
65
74
|
}
|
|
66
|
-
renderNavButton(label, text, targetPage, disabled) {
|
|
67
|
-
return (0, lit_1.html) `
|
|
68
|
-
<button data-theme="tertiary" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>
|
|
69
|
-
${text}
|
|
70
|
-
</button>
|
|
71
|
-
`;
|
|
72
|
-
}
|
|
73
75
|
goToPage(page) {
|
|
74
76
|
if (page < 1 || page > this.totalPages || page === this.currentPage)
|
|
75
77
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAAgD;AAChD,qDAAoD;AACpD,mDAAmD;AACnD,2CAAqC;AAErC,MAAa,WAAY,SAAQ,gBAAU;IAA3C;;QAIE,cAAS,GAAG,CAAC,CAAC;QAGd,aAAQ,GAAG,EAAE,CAAC;QAGN,gBAAW,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { computePageRange } from './page-range.js';\nimport { styles } from './styles.js';\n\nexport class TtPaginator extends LitElement {\n static styles = styles;\n\n @property({ type: Number, attribute: 'total-rows' })\n totalRows = 0;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 25;\n\n @state()\n private currentPage = 1;\n\n private get totalPages() {\n return Math.ceil(this.totalRows / this.pageSize);\n }\n\n protected willUpdate(changed: Map<string, unknown>) {\n if (changed.has('totalRows') || changed.has('pageSize')) {\n this.currentPage = 1;\n }\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n const keyMap: Record<string, number> = {\n ArrowRight: this.currentPage + 1,\n ArrowLeft: this.currentPage - 1,\n Home: 1,\n End: this.totalPages,\n };\n\n const targetPage = keyMap[e.key];\n if (targetPage === undefined) return;\n\n e.preventDefault();\n this.goToPage(targetPage);\n }\n\n render() {\n if (this.totalPages <= 1) return nothing;\n\n const range = computePageRange(this.currentPage, this.totalPages);\n\n return html`\n <nav role=\"navigation\" aria-label=\"Pagination\" @keydown=${this.handleKeyDown}>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to first page\" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>\n First\n </button>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to previous page\" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>\n Previous\n </button>\n ${range.map(\n (page) => html`\n <button\n class=\"small\"\n data-page=${page}\n data-theme=${page === this.currentPage ? 'primary' : 'secondary'}\n aria-label=\"Go to page ${page}\"\n aria-current=${page === this.currentPage ? 'page' : 'false'}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </button>\n `\n )}\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to next page\" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>\n Next\n </button>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to last page\" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>\n Last\n </button>\n </nav>\n `;\n }\n\n private goToPage(page: number) {\n if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n this.currentPage = page;\n this.dispatchEvent(\n new CustomEvent('page-change', {\n detail: { page: this.currentPage },\n bubbles: true,\n composed: true,\n })\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-paginator': TtPaginator;\n }\n}\n"]}
|
package/dist/cjs/src/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAC1B,mDAAiE;AAEpD,QAAA,MAAM,GAAG;IACpB,YAAU;IACV,IAAA,SAAG,EAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":";;;AAAA,6BAA0B;AAC1B,mDAAiE;AAEpD,QAAA,MAAM,GAAG;IACpB,YAAU;IACV,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;GAgBF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n baseStyles,\n css`\n :host {\n display: block;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-scale-1);\n margin-top: var(--space-scale-2);\n }\n\n button {\n min-width: 2rem;\n }\n `,\n];\n"]}
|
|
@@ -8,7 +8,6 @@ export declare class TtPaginator extends LitElement {
|
|
|
8
8
|
protected willUpdate(changed: Map<string, unknown>): void;
|
|
9
9
|
private handleKeyDown;
|
|
10
10
|
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
11
|
-
private renderNavButton;
|
|
12
11
|
private goToPage;
|
|
13
12
|
}
|
|
14
13
|
declare global {
|
|
@@ -12,7 +12,7 @@ export class TtPaginator extends LitElement {
|
|
|
12
12
|
constructor() {
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.totalRows = 0;
|
|
15
|
-
this.pageSize =
|
|
15
|
+
this.pageSize = 25;
|
|
16
16
|
this.currentPage = 1;
|
|
17
17
|
}
|
|
18
18
|
get totalPages() {
|
|
@@ -42,10 +42,15 @@ export class TtPaginator extends LitElement {
|
|
|
42
42
|
const range = computePageRange(this.currentPage, this.totalPages);
|
|
43
43
|
return html `
|
|
44
44
|
<nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
<button class="small" data-theme="tertiary" aria-label="Go to first page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>
|
|
46
|
+
First
|
|
47
|
+
</button>
|
|
48
|
+
<button class="small" data-theme="tertiary" aria-label="Go to previous page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>
|
|
49
|
+
Previous
|
|
50
|
+
</button>
|
|
47
51
|
${range.map((page) => html `
|
|
48
52
|
<button
|
|
53
|
+
class="small"
|
|
49
54
|
data-page=${page}
|
|
50
55
|
data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
|
|
51
56
|
aria-label="Go to page ${page}"
|
|
@@ -55,18 +60,15 @@ export class TtPaginator extends LitElement {
|
|
|
55
60
|
${page}
|
|
56
61
|
</button>
|
|
57
62
|
`)}
|
|
58
|
-
|
|
59
|
-
|
|
63
|
+
<button class="small" data-theme="tertiary" aria-label="Go to next page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>
|
|
64
|
+
Next
|
|
65
|
+
</button>
|
|
66
|
+
<button class="small" data-theme="tertiary" aria-label="Go to last page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>
|
|
67
|
+
Last
|
|
68
|
+
</button>
|
|
60
69
|
</nav>
|
|
61
70
|
`;
|
|
62
71
|
}
|
|
63
|
-
renderNavButton(label, text, targetPage, disabled) {
|
|
64
|
-
return html `
|
|
65
|
-
<button data-theme="tertiary" aria-label=${label} ?disabled=${disabled} @click=${() => this.goToPage(targetPage)}>
|
|
66
|
-
${text}
|
|
67
|
-
</button>
|
|
68
|
-
`;
|
|
69
|
-
}
|
|
70
72
|
goToPage(page) {
|
|
71
73
|
if (page < 1 || page > this.totalPages || page === this.currentPage)
|
|
72
74
|
return;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,OAAO,WAAY,SAAQ,UAAU;IAA3C;;QAIE,cAAS,GAAG,CAAC,CAAC;QAGd,aAAQ,GAAG,EAAE,CAAC;QAGN,gBAAW,GAAG,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"TtPaginator.js","sourceRoot":"","sources":["../../../src/TtPaginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { computePageRange } from './page-range.js';\nimport { styles } from './styles.js';\n\nexport class TtPaginator extends LitElement {\n static styles = styles;\n\n @property({ type: Number, attribute: 'total-rows' })\n totalRows = 0;\n\n @property({ type: Number, attribute: 'page-size' })\n pageSize = 25;\n\n @state()\n private currentPage = 1;\n\n private get totalPages() {\n return Math.ceil(this.totalRows / this.pageSize);\n }\n\n protected willUpdate(changed: Map<string, unknown>) {\n if (changed.has('totalRows') || changed.has('pageSize')) {\n this.currentPage = 1;\n }\n }\n\n private handleKeyDown(e: KeyboardEvent) {\n const keyMap: Record<string, number> = {\n ArrowRight: this.currentPage + 1,\n ArrowLeft: this.currentPage - 1,\n Home: 1,\n End: this.totalPages,\n };\n\n const targetPage = keyMap[e.key];\n if (targetPage === undefined) return;\n\n e.preventDefault();\n this.goToPage(targetPage);\n }\n\n render() {\n if (this.totalPages <= 1) return nothing;\n\n const range = computePageRange(this.currentPage, this.totalPages);\n\n return html`\n <nav role=\"navigation\" aria-label=\"Pagination\" @keydown=${this.handleKeyDown}>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to first page\" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>\n First\n </button>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to previous page\" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>\n Previous\n </button>\n ${range.map(\n (page) => html`\n <button\n class=\"small\"\n data-page=${page}\n data-theme=${page === this.currentPage ? 'primary' : 'secondary'}\n aria-label=\"Go to page ${page}\"\n aria-current=${page === this.currentPage ? 'page' : 'false'}\n @click=${() => this.goToPage(page)}\n >\n ${page}\n </button>\n `\n )}\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to next page\" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>\n Next\n </button>\n <button class=\"small\" data-theme=\"tertiary\" aria-label=\"Go to last page\" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>\n Last\n </button>\n </nav>\n `;\n }\n\n private goToPage(page: number) {\n if (page < 1 || page > this.totalPages || page === this.currentPage) return;\n this.currentPage = page;\n this.dispatchEvent(\n new CustomEvent('page-change', {\n detail: { page: this.currentPage },\n bubbles: true,\n composed: true,\n })\n );\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'tt-paginator': TtPaginator;\n }\n}\n"]}
|
package/dist/esm/src/styles.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU;IACV,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEjE,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\nimport { styles as baseStyles } from '@triptease/stylesheet/lit';\n\nexport const styles = [\n baseStyles,\n css`\n :host {\n display: block;\n }\n\n nav {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--space-scale-1);\n margin-top: var(--space-scale-2);\n }\n\n button {\n min-width: 2rem;\n }\n `,\n];\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Numeric pagination web component",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "@triptease",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.5",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/esm/src/index.js",
|
|
9
9
|
"module": "dist/esm/src/index.js",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
"test:watch": "vitest --config=./vitest.browser.config.mjs"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@triptease/stylesheet": "2.1.
|
|
39
|
+
"@triptease/stylesheet": "2.1.2",
|
|
40
40
|
"lit": "^3.1.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|