@triptease/tt-paginator 1.0.11 → 1.0.13
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 +37 -26
- package/dist/cjs/src/TtPaginator.js.map +1 -1
- package/dist/cjs/src/styles.js +7 -2
- package/dist/cjs/src/styles.js.map +1 -1
- package/dist/esm/src/TtPaginator.d.ts +2 -0
- package/dist/esm/src/TtPaginator.js +37 -26
- package/dist/esm/src/TtPaginator.js.map +1 -1
- package/dist/esm/src/styles.js +7 -2
- package/dist/esm/src/styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -21,6 +21,12 @@ class TtPaginator extends lit_1.LitElement {
|
|
|
21
21
|
get totalPages() {
|
|
22
22
|
return Math.ceil(this.totalRows / this.pageSize);
|
|
23
23
|
}
|
|
24
|
+
get firstRow() {
|
|
25
|
+
return (this.currentPage - 1) * this.pageSize + 1;
|
|
26
|
+
}
|
|
27
|
+
get lastRow() {
|
|
28
|
+
return Math.min(this.currentPage * this.pageSize, this.totalRows);
|
|
29
|
+
}
|
|
24
30
|
willUpdate(changed) {
|
|
25
31
|
if (changed.has('totalRows') || changed.has('pageSize')) {
|
|
26
32
|
this.currentPage = 1;
|
|
@@ -40,36 +46,41 @@ class TtPaginator extends lit_1.LitElement {
|
|
|
40
46
|
this.goToPage(targetPage);
|
|
41
47
|
}
|
|
42
48
|
render() {
|
|
43
|
-
if (this.
|
|
49
|
+
if (this.totalRows === 0)
|
|
44
50
|
return lit_1.nothing;
|
|
45
51
|
const range = (0, page_range_js_1.computePageRange)(this.currentPage, this.totalPages);
|
|
46
52
|
return (0, lit_1.html) `
|
|
47
|
-
<
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
53
|
+
<div class="paginator-row">
|
|
54
|
+
<span class="small">Showing results ${this.firstRow} - ${this.lastRow} of ${this.totalRows}</span>
|
|
55
|
+
${this.totalPages > 1 ? (0, lit_1.html) `
|
|
56
|
+
<nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
|
|
57
|
+
<button class="small" data-theme="tertiary" aria-label="Go to first page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>
|
|
58
|
+
First
|
|
59
|
+
</button>
|
|
60
|
+
<button class="small" data-theme="tertiary" aria-label="Go to previous page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>
|
|
61
|
+
Previous
|
|
62
|
+
</button>
|
|
63
|
+
${range.map((page) => (0, lit_1.html) `
|
|
64
|
+
<button
|
|
65
|
+
class="small"
|
|
66
|
+
data-page=${page}
|
|
67
|
+
data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
|
|
68
|
+
aria-label="Go to page ${page}"
|
|
69
|
+
aria-current=${page === this.currentPage ? 'page' : 'false'}
|
|
70
|
+
@click=${() => this.goToPage(page)}
|
|
71
|
+
>
|
|
72
|
+
${page}
|
|
73
|
+
</button>
|
|
74
|
+
`)}
|
|
75
|
+
<button class="small" data-theme="tertiary" aria-label="Go to next page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>
|
|
76
|
+
Next
|
|
77
|
+
</button>
|
|
78
|
+
<button class="small" data-theme="tertiary" aria-label="Go to last page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>
|
|
79
|
+
Last
|
|
64
80
|
</button>
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
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>
|
|
72
|
-
</nav>
|
|
81
|
+
</nav>
|
|
82
|
+
` : lit_1.nothing}
|
|
83
|
+
</div>
|
|
73
84
|
`;
|
|
74
85
|
}
|
|
75
86
|
goToPage(page) {
|
|
@@ -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 private get firstRow() {\n return (this.currentPage - 1) * this.pageSize + 1;\n }\n\n private get lastRow() {\n return Math.min(this.currentPage * this.pageSize, this.totalRows);\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.totalRows === 0) return nothing;\n\n const range = computePageRange(this.currentPage, this.totalPages);\n\n return html`\n <div class=\"paginator-row\">\n <span class=\"small\">Showing results ${this.firstRow} - ${this.lastRow} of ${this.totalRows}</span>\n ${this.totalPages > 1 ? 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 ` : nothing}\n </div>\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
|
@@ -10,12 +10,17 @@ exports.styles = [
|
|
|
10
10
|
display: block;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
+
.paginator-row {
|
|
14
|
+
display: flex;
|
|
15
|
+
justify-content: space-between;
|
|
16
|
+
align-items: center;
|
|
17
|
+
margin-top: var(--space-scale-2);
|
|
18
|
+
}
|
|
19
|
+
|
|
13
20
|
nav {
|
|
14
21
|
display: flex;
|
|
15
22
|
align-items: center;
|
|
16
|
-
justify-content: flex-end;
|
|
17
23
|
gap: var(--space-scale-1);
|
|
18
|
-
margin-top: var(--space-scale-2);
|
|
19
24
|
}
|
|
20
25
|
|
|
21
26
|
button {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;GAqBF;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 .paginator-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: var(--space-scale-2);\n }\n\n nav {\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\n }\n\n button {\n min-width: 2rem;\n }\n `,\n];\n"]}
|
|
@@ -5,6 +5,8 @@ export declare class TtPaginator extends LitElement {
|
|
|
5
5
|
pageSize: number;
|
|
6
6
|
private currentPage;
|
|
7
7
|
private get totalPages();
|
|
8
|
+
private get firstRow();
|
|
9
|
+
private get lastRow();
|
|
8
10
|
protected willUpdate(changed: Map<string, unknown>): void;
|
|
9
11
|
private handleKeyDown;
|
|
10
12
|
render(): typeof nothing | import("lit-html").TemplateResult<1>;
|
|
@@ -18,6 +18,12 @@ export class TtPaginator extends LitElement {
|
|
|
18
18
|
get totalPages() {
|
|
19
19
|
return Math.ceil(this.totalRows / this.pageSize);
|
|
20
20
|
}
|
|
21
|
+
get firstRow() {
|
|
22
|
+
return (this.currentPage - 1) * this.pageSize + 1;
|
|
23
|
+
}
|
|
24
|
+
get lastRow() {
|
|
25
|
+
return Math.min(this.currentPage * this.pageSize, this.totalRows);
|
|
26
|
+
}
|
|
21
27
|
willUpdate(changed) {
|
|
22
28
|
if (changed.has('totalRows') || changed.has('pageSize')) {
|
|
23
29
|
this.currentPage = 1;
|
|
@@ -37,36 +43,41 @@ export class TtPaginator extends LitElement {
|
|
|
37
43
|
this.goToPage(targetPage);
|
|
38
44
|
}
|
|
39
45
|
render() {
|
|
40
|
-
if (this.
|
|
46
|
+
if (this.totalRows === 0)
|
|
41
47
|
return nothing;
|
|
42
48
|
const range = computePageRange(this.currentPage, this.totalPages);
|
|
43
49
|
return html `
|
|
44
|
-
<
|
|
45
|
-
<
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
50
|
+
<div class="paginator-row">
|
|
51
|
+
<span class="small">Showing results ${this.firstRow} - ${this.lastRow} of ${this.totalRows}</span>
|
|
52
|
+
${this.totalPages > 1 ? html `
|
|
53
|
+
<nav role="navigation" aria-label="Pagination" @keydown=${this.handleKeyDown}>
|
|
54
|
+
<button class="small" data-theme="tertiary" aria-label="Go to first page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(1)}>
|
|
55
|
+
First
|
|
56
|
+
</button>
|
|
57
|
+
<button class="small" data-theme="tertiary" aria-label="Go to previous page" ?disabled=${this.currentPage === 1} @click=${() => this.goToPage(this.currentPage - 1)}>
|
|
58
|
+
Previous
|
|
59
|
+
</button>
|
|
60
|
+
${range.map((page) => html `
|
|
61
|
+
<button
|
|
62
|
+
class="small"
|
|
63
|
+
data-page=${page}
|
|
64
|
+
data-theme=${page === this.currentPage ? 'primary' : 'secondary'}
|
|
65
|
+
aria-label="Go to page ${page}"
|
|
66
|
+
aria-current=${page === this.currentPage ? 'page' : 'false'}
|
|
67
|
+
@click=${() => this.goToPage(page)}
|
|
68
|
+
>
|
|
69
|
+
${page}
|
|
70
|
+
</button>
|
|
71
|
+
`)}
|
|
72
|
+
<button class="small" data-theme="tertiary" aria-label="Go to next page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.currentPage + 1)}>
|
|
73
|
+
Next
|
|
74
|
+
</button>
|
|
75
|
+
<button class="small" data-theme="tertiary" aria-label="Go to last page" ?disabled=${this.currentPage === this.totalPages} @click=${() => this.goToPage(this.totalPages)}>
|
|
76
|
+
Last
|
|
61
77
|
</button>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
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>
|
|
69
|
-
</nav>
|
|
78
|
+
</nav>
|
|
79
|
+
` : nothing}
|
|
80
|
+
</div>
|
|
70
81
|
`;
|
|
71
82
|
}
|
|
72
83
|
goToPage(page) {
|
|
@@ -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 private get firstRow() {\n return (this.currentPage - 1) * this.pageSize + 1;\n }\n\n private get lastRow() {\n return Math.min(this.currentPage * this.pageSize, this.totalRows);\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.totalRows === 0) return nothing;\n\n const range = computePageRange(this.currentPage, this.totalPages);\n\n return html`\n <div class=\"paginator-row\">\n <span class=\"small\">Showing results ${this.firstRow} - ${this.lastRow} of ${this.totalRows}</span>\n ${this.totalPages > 1 ? 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 ` : nothing}\n </div>\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
|
@@ -7,12 +7,17 @@ export const styles = [
|
|
|
7
7
|
display: block;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
.paginator-row {
|
|
11
|
+
display: flex;
|
|
12
|
+
justify-content: space-between;
|
|
13
|
+
align-items: center;
|
|
14
|
+
margin-top: var(--space-scale-2);
|
|
15
|
+
}
|
|
16
|
+
|
|
10
17
|
nav {
|
|
11
18
|
display: flex;
|
|
12
19
|
align-items: center;
|
|
13
|
-
justify-content: flex-end;
|
|
14
20
|
gap: var(--space-scale-1);
|
|
15
|
-
margin-top: var(--space-scale-2);
|
|
16
21
|
}
|
|
17
22
|
|
|
18
23
|
button {
|
|
@@ -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;;;;;;;;;;;;;;;;;;;;;GAqBF;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 .paginator-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: var(--space-scale-2);\n }\n\n nav {\n display: flex;\n align-items: center;\n gap: var(--space-scale-1);\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.13",
|
|
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.9",
|
|
40
40
|
"lit": "^3.1.4"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|