@triptease/tt-table-wrapper 1.0.2 → 1.0.4
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.
|
@@ -31,8 +31,8 @@ class TtTableWrapper extends lit_1.LitElement {
|
|
|
31
31
|
}
|
|
32
32
|
render() {
|
|
33
33
|
return (0, lit_1.html) `
|
|
34
|
-
<
|
|
35
|
-
|
|
34
|
+
<div>
|
|
35
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
36
36
|
<tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>
|
|
37
37
|
</div>
|
|
38
38
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAAuC;AACvC,qDAA6C;AAC7C,2CAAqC;AAErC,mCAAiC;AAEjC,MAAM,aAAa,GAAkC;IACnD,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,cAAc,GAAyC;IAC3D,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAa,cAAe,SAAQ,gBAAU;IAA9C;;QAIE,cAAS,GAAG,CAAC,CAAC;QAGd,aAAQ,GAAG,EAAE,CAAC;QAEN,cAAS,GAAc,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QACtD,wBAAmB,GAAG,IAAI,GAAG,EAA2B,CAAC;IAgEnE,CAAC;IA9DC,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA
|
|
1
|
+
{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\nimport type { SortDirection, SortState } from './types.js';\nimport '@triptease/tt-paginator';\n\nconst ARIA_SORT_MAP: Record<SortDirection, string> = {\n asc: 'ascending',\n desc: 'descending',\n none: '',\n};\n\nconst NEXT_DIRECTION: Record<SortDirection, SortDirection> = {\n none: 'asc',\n asc: 'desc',\n desc: 'none',\n};\n\nexport class TtTableWrapper 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 = 10;\n\n private sortState: SortState = { key: '', direction: 'none' };\n private headerClickHandlers = new Map<HTMLElement, () => void>();\n\n render() {\n return html`\n <div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>\n </div>\n `;\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.cleanupHandlers();\n }\n\n private handleSlotChange() {\n this.cleanupHandlers();\n this.sortState = { key: '', direction: 'none' };\n\n const headers = this.querySelectorAll<HTMLElement>('th[data-sort-key]');\n for (const header of headers) {\n const handler = () => this.handleSortClick(header);\n this.headerClickHandlers.set(header, handler);\n header.addEventListener('click', handler);\n }\n }\n\n private handleSortClick(header: HTMLElement) {\n const key = header.dataset.sortKey!;\n const isSameColumn = key === this.sortState.key;\n\n const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';\n\n this.clearAriaSortFromAll();\n\n if (direction !== 'none') {\n header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);\n }\n\n this.sortState = { key, direction };\n\n this.dispatchEvent(\n new CustomEvent('sort-change', {\n detail: { key, direction },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private clearAriaSortFromAll() {\n const headers = this.querySelectorAll('th[aria-sort]');\n for (const header of headers) {\n header.removeAttribute('aria-sort');\n }\n }\n\n private cleanupHandlers() {\n for (const [header, handler] of this.headerClickHandlers) {\n header.removeEventListener('click', handler);\n }\n this.headerClickHandlers.clear();\n }\n}\n"]}
|
|
@@ -28,8 +28,8 @@ export class TtTableWrapper extends LitElement {
|
|
|
28
28
|
}
|
|
29
29
|
render() {
|
|
30
30
|
return html `
|
|
31
|
-
<
|
|
32
|
-
|
|
31
|
+
<div>
|
|
32
|
+
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
33
33
|
<tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>
|
|
34
34
|
</div>
|
|
35
35
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,yBAAyB,CAAC;AAEjC,MAAM,aAAa,GAAkC;IACnD,GAAG,EAAE,WAAW;IAChB,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,cAAc,GAAyC;IAC3D,IAAI,EAAE,KAAK;IACX,GAAG,EAAE,MAAM;IACX,IAAI,EAAE,MAAM;CACb,CAAC;AAEF,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QAIE,cAAS,GAAG,CAAC,CAAC;QAGd,aAAQ,GAAG,EAAE,CAAC;QAEN,cAAS,GAAc,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;QACtD,wBAAmB,GAAG,IAAI,GAAG,EAA2B,CAAC;IAgEnE,CAAC;IA9DC,MAAM;QACJ,OAAO,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"TtTableWrapper.js","sourceRoot":"","sources":["../../../src/TtTableWrapper.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { styles } from './styles.js';\nimport type { SortDirection, SortState } from './types.js';\nimport '@triptease/tt-paginator';\n\nconst ARIA_SORT_MAP: Record<SortDirection, string> = {\n asc: 'ascending',\n desc: 'descending',\n none: '',\n};\n\nconst NEXT_DIRECTION: Record<SortDirection, SortDirection> = {\n none: 'asc',\n asc: 'desc',\n desc: 'none',\n};\n\nexport class TtTableWrapper 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 = 10;\n\n private sortState: SortState = { key: '', direction: 'none' };\n private headerClickHandlers = new Map<HTMLElement, () => void>();\n\n render() {\n return html`\n <div>\n <slot @slotchange=${this.handleSlotChange}></slot>\n <tt-paginator total-rows=${this.totalRows} page-size=${this.pageSize}></tt-paginator>\n </div>\n `;\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.cleanupHandlers();\n }\n\n private handleSlotChange() {\n this.cleanupHandlers();\n this.sortState = { key: '', direction: 'none' };\n\n const headers = this.querySelectorAll<HTMLElement>('th[data-sort-key]');\n for (const header of headers) {\n const handler = () => this.handleSortClick(header);\n this.headerClickHandlers.set(header, handler);\n header.addEventListener('click', handler);\n }\n }\n\n private handleSortClick(header: HTMLElement) {\n const key = header.dataset.sortKey!;\n const isSameColumn = key === this.sortState.key;\n\n const direction = isSameColumn ? NEXT_DIRECTION[this.sortState.direction] : 'asc';\n\n this.clearAriaSortFromAll();\n\n if (direction !== 'none') {\n header.setAttribute('aria-sort', ARIA_SORT_MAP[direction]);\n }\n\n this.sortState = { key, direction };\n\n this.dispatchEvent(\n new CustomEvent('sort-change', {\n detail: { key, direction },\n bubbles: true,\n composed: true,\n })\n );\n }\n\n private clearAriaSortFromAll() {\n const headers = this.querySelectorAll('th[aria-sort]');\n for (const header of headers) {\n header.removeAttribute('aria-sort');\n }\n }\n\n private cleanupHandlers() {\n for (const [header, handler] of this.headerClickHandlers) {\n header.removeEventListener('click', handler);\n }\n this.headerClickHandlers.clear();\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Table wrapper web component with sorting and pagination",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": "@triptease",
|
|
6
|
-
"version": "1.0.
|
|
6
|
+
"version": "1.0.4",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/esm/src/index.js",
|
|
9
9
|
"module": "dist/esm/src/index.js",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"test:watch": "vitest --config=./vitest.browser.config.mjs"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@triptease/stylesheet": "2.1.
|
|
40
|
-
"@triptease/tt-paginator": "1.0.
|
|
39
|
+
"@triptease/stylesheet": "2.1.2",
|
|
40
|
+
"@triptease/tt-paginator": "1.0.5",
|
|
41
41
|
"lit": "^3.1.4"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|