@jsekulowicz/ds-components 0.9.6 → 0.9.8
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/custom-elements.json +33 -1
- package/dist/atoms/table/pagination-range.d.ts.map +1 -1
- package/dist/atoms/table/pagination-range.js +5 -1
- package/dist/atoms/table/pagination-range.js.map +1 -1
- package/dist/atoms/table/table-pagination.d.ts +5 -0
- package/dist/atoms/table/table-pagination.d.ts.map +1 -1
- package/dist/atoms/table/table-pagination.js +37 -3
- package/dist/atoms/table/table-pagination.js.map +1 -1
- package/dist/atoms/table/table-pagination.styles.d.ts.map +1 -1
- package/dist/atoms/table/table-pagination.styles.js +21 -0
- package/dist/atoms/table/table-pagination.styles.js.map +1 -1
- package/package.json +1 -1
package/custom-elements.json
CHANGED
|
@@ -6625,7 +6625,7 @@
|
|
|
6625
6625
|
{
|
|
6626
6626
|
"kind": "variable",
|
|
6627
6627
|
"name": "tablePaginationStyles",
|
|
6628
|
-
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } `"
|
|
6628
|
+
"default": "css` :host { display: flex; align-items: center; justify-content: space-between; column-gap: var(--ds-space-4); row-gap: var(--ds-space-3); flex-wrap: wrap; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } nav { display: flex; align-items: center; gap: var(--ds-space-2); } .list { display: flex; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; } button { min-width: 2rem; height: 2rem; padding: 0 var(--ds-space-2); background: transparent; color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); } button:hover:not(:disabled) { background: var(--ds-color-bg-muted); } button:focus-visible { outline: 2px solid var(--ds-color-focus); outline-offset: 2px; } button:disabled { color: var(--ds-color-fg-subtle); cursor: not-allowed; opacity: 0.6; } button[aria-current=\"page\"] { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); border-color: var(--ds-color-accent); } /* Without this override the generic button:hover:not(:disabled) rule wins on specificity (it carries an extra :not pseudo-class) and the current-page button briefly flashes back to the muted surface colour on hover. Keep the active button on-brand by stepping to the accent-hover token instead. */ button[aria-current=\"page\"]:hover:not(:disabled) { background: var(--ds-color-accent-hover); border-color: var(--ds-color-accent-hover); } .ellipsis { display: inline-flex; min-width: 2rem; justify-content: center; color: var(--ds-color-fg-muted); } .size { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-color-fg-muted); } select { padding: var(--ds-space-1) var(--ds-space-2); background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); font: inherit; } .summary { color: var(--ds-color-fg-muted); } svg { width: 1em; height: 1em; } /* Compact mode is driven by the host's [compact] attribute, which ds-table-pagination toggles automatically via ResizeObserver when the host is narrower than ~480px. We hide the Previous / Next text label here so the buttons collapse to icons; the page-number range shrinks via the JS path (maxVisiblePages → 3, siblingCount → 0). The slot itself stays in the DOM so consumer overrides via ::part(prev-next-label) still work if labels are wanted even when compact. */ :host([compact]) .label { display: none; } `"
|
|
6629
6629
|
}
|
|
6630
6630
|
],
|
|
6631
6631
|
"exports": [
|
|
@@ -6680,6 +6680,10 @@
|
|
|
6680
6680
|
"description": "The Next button.",
|
|
6681
6681
|
"name": "button-next"
|
|
6682
6682
|
},
|
|
6683
|
+
{
|
|
6684
|
+
"description": "The text label inside the Previous / Next buttons. Hidden by default below 480px (compact mode); style this part to override.",
|
|
6685
|
+
"name": "prev-next-label"
|
|
6686
|
+
},
|
|
6683
6687
|
{
|
|
6684
6688
|
"description": "The size `<select>` wrapper.",
|
|
6685
6689
|
"name": "size-selector"
|
|
@@ -6771,6 +6775,25 @@
|
|
|
6771
6775
|
"attribute": "hide-page-numbers",
|
|
6772
6776
|
"reflects": true
|
|
6773
6777
|
},
|
|
6778
|
+
{
|
|
6779
|
+
"kind": "field",
|
|
6780
|
+
"name": "compact",
|
|
6781
|
+
"type": {
|
|
6782
|
+
"text": "boolean"
|
|
6783
|
+
},
|
|
6784
|
+
"default": "false",
|
|
6785
|
+
"attribute": "compact",
|
|
6786
|
+
"reflects": true
|
|
6787
|
+
},
|
|
6788
|
+
{
|
|
6789
|
+
"kind": "field",
|
|
6790
|
+
"name": "#resizeObserver",
|
|
6791
|
+
"privacy": "private",
|
|
6792
|
+
"type": {
|
|
6793
|
+
"text": "ResizeObserver | null"
|
|
6794
|
+
},
|
|
6795
|
+
"default": "null"
|
|
6796
|
+
},
|
|
6774
6797
|
{
|
|
6775
6798
|
"kind": "field",
|
|
6776
6799
|
"name": "#totalPages",
|
|
@@ -6964,6 +6987,15 @@
|
|
|
6964
6987
|
}
|
|
6965
6988
|
],
|
|
6966
6989
|
"attributes": [
|
|
6990
|
+
{
|
|
6991
|
+
"description": "Reflected boolean attribute toggled automatically when the component is narrower than 480px. In compact mode the prev/next labels collapse to icons, the visible page count drops to \"first … current … last\", and `sibling-count` is forced to 0.",
|
|
6992
|
+
"name": "compact",
|
|
6993
|
+
"type": {
|
|
6994
|
+
"text": "boolean"
|
|
6995
|
+
},
|
|
6996
|
+
"default": "false",
|
|
6997
|
+
"fieldName": "compact"
|
|
6998
|
+
},
|
|
6967
6999
|
{
|
|
6968
7000
|
"name": "page",
|
|
6969
7001
|
"type": {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-range.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/pagination-range.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACb,EAAE,oBAAoB,GAAG,mBAAmB,EAAE,
|
|
1
|
+
{"version":3,"file":"pagination-range.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/pagination-range.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAE7E,MAAM,MAAM,oBAAoB,GAAG;IACjC,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,oBAAoB,CAAC,EACnC,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACb,EAAE,oBAAoB,GAAG,mBAAmB,EAAE,CAgC9C"}
|
|
@@ -2,7 +2,11 @@ export function buildPaginationRange({ totalPages, currentPage, maxVisiblePages,
|
|
|
2
2
|
const total = Math.max(1, Math.floor(totalPages));
|
|
3
3
|
const current = clamp(Math.floor(currentPage), 1, total);
|
|
4
4
|
const siblings = Math.max(0, Math.floor(siblingCount));
|
|
5
|
-
|
|
5
|
+
// Floor at 3 so callers (e.g. ds-table-pagination's compact mode)
|
|
6
|
+
// can opt into "first … current … last" — five visible items
|
|
7
|
+
// including the two ellipses — without us silently bumping back to
|
|
8
|
+
// the historical 5-page minimum.
|
|
9
|
+
const maxVisible = Math.max(3, Math.floor(maxVisiblePages));
|
|
6
10
|
if (total <= maxVisible) {
|
|
7
11
|
return range(1, total);
|
|
8
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination-range.js","sourceRoot":"","sources":["../../../src/atoms/table/pagination-range.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,oBAAoB,CAAC,EACnC,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACS;IACrB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;QACxB,OAAO,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,WAAW,GAAG,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;IAEnD,IAAI,CAAC,gBAAgB,IAAI,iBAAiB,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,gBAAgB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClD,OAAO,CAAC,CAAC,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,CAAC,CAAC,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;AAC3F,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW;IACvC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC5C,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AACrD,CAAC"}
|
|
1
|
+
{"version":3,"file":"pagination-range.js","sourceRoot":"","sources":["../../../src/atoms/table/pagination-range.ts"],"names":[],"mappings":"AASA,MAAM,UAAU,oBAAoB,CAAC,EACnC,UAAU,EACV,WAAW,EACX,eAAe,EACf,YAAY,GACS;IACrB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAClD,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,EAAE,CAAC,EAAE,KAAK,CAAC,CAAC;IACzD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC;IACvD,kEAAkE;IAClE,6DAA6D;IAC7D,mEAAmE;IACnE,iCAAiC;IACjC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAE5D,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;QACxB,OAAO,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC;IACzB,CAAC;IAED,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;IAC7D,MAAM,gBAAgB,GAAG,WAAW,GAAG,CAAC,CAAC;IACzC,MAAM,iBAAiB,GAAG,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC;IAEnD,IAAI,CAAC,gBAAgB,IAAI,iBAAiB,EAAE,CAAC;QAC3C,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QAC7D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;QAC3C,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,gBAAgB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC3C,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,QAAQ,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QAC9D,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QAClD,OAAO,CAAC,CAAC,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,OAAO,CAAC,CAAC,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,EAAE,cAAc,EAAE,KAAK,CAAC,CAAC;AAC3F,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IACpD,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC;AAED,SAAS,KAAK,CAAC,KAAa,EAAE,GAAW;IACvC,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC;IAC5C,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;AACrD,CAAC"}
|
|
@@ -16,8 +16,10 @@ import { DsElement } from '@jsekulowicz/ds-core';
|
|
|
16
16
|
* @csspart button - Any `<button>` inside the nav.
|
|
17
17
|
* @csspart button-prev - The Previous button.
|
|
18
18
|
* @csspart button-next - The Next button.
|
|
19
|
+
* @csspart prev-next-label - The text label inside the Previous / Next buttons. Hidden by default below 480px (compact mode); style this part to override.
|
|
19
20
|
* @csspart size-selector - The size `<select>` wrapper.
|
|
20
21
|
* @csspart summary - The summary region.
|
|
22
|
+
* @attr compact - Reflected boolean attribute toggled automatically when the component is narrower than 480px. In compact mode the prev/next labels collapse to icons, the visible page count drops to "first … current … last", and `sibling-count` is forced to 0.
|
|
21
23
|
*/
|
|
22
24
|
export declare class DsTablePagination extends DsElement {
|
|
23
25
|
#private;
|
|
@@ -29,6 +31,9 @@ export declare class DsTablePagination extends DsElement {
|
|
|
29
31
|
maxVisiblePages: number;
|
|
30
32
|
siblingCount: number;
|
|
31
33
|
hidePageNumbers: boolean;
|
|
34
|
+
compact: boolean;
|
|
35
|
+
connectedCallback(): void;
|
|
36
|
+
disconnectedCallback(): void;
|
|
32
37
|
render(): TemplateResult;
|
|
33
38
|
}
|
|
34
39
|
//# sourceMappingURL=table-pagination.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAEtF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"table-pagination.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAEtF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAcjD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,iBAAkB,SAAQ,SAAS;;IAC9C,OAAgB,MAAM,4BAAgD;IAE3B,IAAI,SAAK;IACe,QAAQ,SAAM;IACtC,KAAK,SAAK;IACrB,eAAe,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACO,eAAe,SAAK;IACxB,YAAY,SAAK;IACZ,eAAe,UAAS;IAIxD,OAAO,UAAS;IAInD,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;IAwG5B,MAAM,IAAI,cAAc;CAiBlC"}
|
|
@@ -9,6 +9,12 @@ import { property } from 'lit/decorators.js';
|
|
|
9
9
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
10
10
|
import { tablePaginationStyles } from './table-pagination.styles.js';
|
|
11
11
|
import { buildPaginationRange } from './pagination-range.js';
|
|
12
|
+
// Width threshold (px) below which the component switches into compact
|
|
13
|
+
// mode: prev/next collapse to icon-only, fewer page buttons render, and
|
|
14
|
+
// the siblingCount is forced to 0. Matches breakpoint.sm so it lines
|
|
15
|
+
// up with ds-table's own stack breakpoint.
|
|
16
|
+
const COMPACT_WIDTH_PX = 480;
|
|
17
|
+
const COMPACT_MAX_VISIBLE = 3;
|
|
12
18
|
const ICON_PREV = svg `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 4l-4 4 4 4"/></svg>`;
|
|
13
19
|
const ICON_NEXT = svg `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>`;
|
|
14
20
|
/**
|
|
@@ -27,8 +33,10 @@ const ICON_NEXT = svg `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor
|
|
|
27
33
|
* @csspart button - Any `<button>` inside the nav.
|
|
28
34
|
* @csspart button-prev - The Previous button.
|
|
29
35
|
* @csspart button-next - The Next button.
|
|
36
|
+
* @csspart prev-next-label - The text label inside the Previous / Next buttons. Hidden by default below 480px (compact mode); style this part to override.
|
|
30
37
|
* @csspart size-selector - The size `<select>` wrapper.
|
|
31
38
|
* @csspart summary - The summary region.
|
|
39
|
+
* @attr compact - Reflected boolean attribute toggled automatically when the component is narrower than 480px. In compact mode the prev/next labels collapse to icons, the visible page count drops to "first … current … last", and `sibling-count` is forced to 0.
|
|
32
40
|
*/
|
|
33
41
|
export class DsTablePagination extends DsElement {
|
|
34
42
|
constructor() {
|
|
@@ -39,6 +47,10 @@ export class DsTablePagination extends DsElement {
|
|
|
39
47
|
this.maxVisiblePages = 7;
|
|
40
48
|
this.siblingCount = 1;
|
|
41
49
|
this.hidePageNumbers = false;
|
|
50
|
+
// `compact` is reflected so consumer styles can react to it (e.g.
|
|
51
|
+
// tighten surrounding layout) without re-deriving the breakpoint.
|
|
52
|
+
this.compact = false;
|
|
53
|
+
this.#resizeObserver = null;
|
|
42
54
|
this.#onSizeChange = (event) => {
|
|
43
55
|
const value = Number(event.target.value);
|
|
44
56
|
if (!Number.isFinite(value) || value <= 0) {
|
|
@@ -50,6 +62,23 @@ export class DsTablePagination extends DsElement {
|
|
|
50
62
|
};
|
|
51
63
|
}
|
|
52
64
|
static { this.styles = [...DsElement.styles, tablePaginationStyles]; }
|
|
65
|
+
#resizeObserver;
|
|
66
|
+
connectedCallback() {
|
|
67
|
+
super.connectedCallback();
|
|
68
|
+
if (typeof ResizeObserver === 'undefined') {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
this.#resizeObserver = new ResizeObserver((entries) => {
|
|
72
|
+
const width = entries[0]?.contentRect.width ?? this.clientWidth;
|
|
73
|
+
this.compact = width > 0 && width < COMPACT_WIDTH_PX;
|
|
74
|
+
});
|
|
75
|
+
this.#resizeObserver.observe(this);
|
|
76
|
+
}
|
|
77
|
+
disconnectedCallback() {
|
|
78
|
+
this.#resizeObserver?.disconnect();
|
|
79
|
+
this.#resizeObserver = null;
|
|
80
|
+
super.disconnectedCallback();
|
|
81
|
+
}
|
|
53
82
|
get #totalPages() {
|
|
54
83
|
return Math.max(1, Math.ceil(this.total / Math.max(1, this.pageSize)));
|
|
55
84
|
}
|
|
@@ -69,8 +98,8 @@ export class DsTablePagination extends DsElement {
|
|
|
69
98
|
return buildPaginationRange({
|
|
70
99
|
totalPages: this.#totalPages,
|
|
71
100
|
currentPage: this.#currentPage,
|
|
72
|
-
maxVisiblePages: this.maxVisiblePages,
|
|
73
|
-
siblingCount: this.siblingCount,
|
|
101
|
+
maxVisiblePages: this.compact ? COMPACT_MAX_VISIBLE : this.maxVisiblePages,
|
|
102
|
+
siblingCount: this.compact ? 0 : this.siblingCount,
|
|
74
103
|
});
|
|
75
104
|
}
|
|
76
105
|
#renderButton(page, current) {
|
|
@@ -103,7 +132,9 @@ export class DsTablePagination extends DsElement {
|
|
|
103
132
|
@click=${() => this.#emitPage(target)}
|
|
104
133
|
>
|
|
105
134
|
${part === 'button-prev' ? icon : nothing}
|
|
106
|
-
<
|
|
135
|
+
<span class="label" part="prev-next-label">
|
|
136
|
+
<slot name=${slotName}>${defaultText}</slot>
|
|
137
|
+
</span>
|
|
107
138
|
${part === 'button-next' ? icon : nothing}
|
|
108
139
|
</button>
|
|
109
140
|
`;
|
|
@@ -167,4 +198,7 @@ __decorate([
|
|
|
167
198
|
__decorate([
|
|
168
199
|
property({ type: Boolean, reflect: true, attribute: 'hide-page-numbers' })
|
|
169
200
|
], DsTablePagination.prototype, "hidePageNumbers", void 0);
|
|
201
|
+
__decorate([
|
|
202
|
+
property({ type: Boolean, reflect: true })
|
|
203
|
+
], DsTablePagination.prototype, "compact", void 0);
|
|
170
204
|
//# sourceMappingURL=table-pagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAA+C,MAAM,KAAK,CAAC;AACtF,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAA4B,MAAM,uBAAuB,CAAC;AAEvF,MAAM,SAAS,GAAG,GAAG,CAAA,mLAAmL,CAAC;AACzM,MAAM,SAAS,GAAG,GAAG,CAAA,iLAAiL,CAAC;AAEvM
|
|
1
|
+
{"version":3,"file":"table-pagination.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,yBAiHjC,CAAC"}
|
|
@@ -59,6 +59,15 @@ export const tablePaginationStyles = css `
|
|
|
59
59
|
color: var(--ds-color-accent-fg);
|
|
60
60
|
border-color: var(--ds-color-accent);
|
|
61
61
|
}
|
|
62
|
+
/* Without this override the generic button:hover:not(:disabled)
|
|
63
|
+
rule wins on specificity (it carries an extra :not pseudo-class)
|
|
64
|
+
and the current-page button briefly flashes back to the muted
|
|
65
|
+
surface colour on hover. Keep the active button on-brand by
|
|
66
|
+
stepping to the accent-hover token instead. */
|
|
67
|
+
button[aria-current="page"]:hover:not(:disabled) {
|
|
68
|
+
background: var(--ds-color-accent-hover);
|
|
69
|
+
border-color: var(--ds-color-accent-hover);
|
|
70
|
+
}
|
|
62
71
|
|
|
63
72
|
.ellipsis {
|
|
64
73
|
display: inline-flex;
|
|
@@ -91,5 +100,17 @@ export const tablePaginationStyles = css `
|
|
|
91
100
|
width: 1em;
|
|
92
101
|
height: 1em;
|
|
93
102
|
}
|
|
103
|
+
|
|
104
|
+
/* Compact mode is driven by the host's [compact] attribute, which
|
|
105
|
+
ds-table-pagination toggles automatically via ResizeObserver when
|
|
106
|
+
the host is narrower than ~480px. We hide the Previous / Next
|
|
107
|
+
text label here so the buttons collapse to icons; the page-number
|
|
108
|
+
range shrinks via the JS path (maxVisiblePages → 3, siblingCount
|
|
109
|
+
→ 0). The slot itself stays in the DOM so consumer overrides via
|
|
110
|
+
::part(prev-next-label) still work if labels are wanted even when
|
|
111
|
+
compact. */
|
|
112
|
+
:host([compact]) .label {
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
94
115
|
`;
|
|
95
116
|
//# sourceMappingURL=table-pagination.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"table-pagination.styles.js","sourceRoot":"","sources":["../../../src/atoms/table/table-pagination.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHvC,CAAC"}
|
package/package.json
CHANGED