@salesforcedevs/docs-components 1.17.12 → 1.17.13-table
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/package.json +2 -2
- package/src/modules/doc/contentLayout/contentLayout.ts +39 -15
- package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts +15 -103
- package/src/modules/doc/specificationContent/specificationContent.html +6 -2
- package/src/modules/doc/table/table.css +261 -0
- package/src/modules/doc/table/table.html +46 -0
- package/src/modules/doc/table/table.ts +175 -0
- package/LICENSE +0 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/docs-components",
|
|
3
|
-
"version": "1.17.
|
|
3
|
+
"version": "1.17.13-table",
|
|
4
4
|
"description": "Docs Lightning web components for DSC",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "index.js",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"@types/lodash.orderby": "4.6.9",
|
|
26
26
|
"@types/lodash.uniqby": "4.7.9"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
|
|
29
29
|
}
|
|
@@ -248,41 +248,65 @@ export default class ContentLayout extends LightningElement {
|
|
|
248
248
|
const docHeaderHeight = docHeaderEl.getBoundingClientRect().height;
|
|
249
249
|
const totalHeaderHeight = globalNavHeight + docHeaderHeight;
|
|
250
250
|
|
|
251
|
+
// Collect any banners rendered via the doc-phase and version-banner slots
|
|
252
|
+
const versionBannerSlot = this.template.querySelector(
|
|
253
|
+
"[name=version-banner]"
|
|
254
|
+
) as any;
|
|
255
|
+
const docPhaseSlot = this.template.querySelector(
|
|
256
|
+
"[name=doc-phase]"
|
|
257
|
+
) as any;
|
|
258
|
+
const versionBannerEls = (
|
|
259
|
+
versionBannerSlot
|
|
260
|
+
? (versionBannerSlot.assignedElements() as HTMLElement[])
|
|
261
|
+
: []
|
|
262
|
+
) as HTMLElement[];
|
|
263
|
+
const docPhaseEls = (
|
|
264
|
+
docPhaseSlot
|
|
265
|
+
? (docPhaseSlot.assignedElements() as HTMLElement[])
|
|
266
|
+
: []
|
|
267
|
+
) as HTMLElement[];
|
|
268
|
+
const bannersTotalHeight = [
|
|
269
|
+
...versionBannerEls,
|
|
270
|
+
...docPhaseEls
|
|
271
|
+
].reduce(
|
|
272
|
+
(sum, el) => sum + (el?.getBoundingClientRect()?.height || 0),
|
|
273
|
+
0
|
|
274
|
+
);
|
|
275
|
+
|
|
251
276
|
// Selecting the doc section heading and RNB here.
|
|
252
277
|
const docHeadingEls = Array.from(
|
|
253
278
|
document.querySelectorAll("doc-heading")
|
|
254
279
|
);
|
|
255
280
|
const rightNavBarEl = this.template.querySelector(".right-nav-bar");
|
|
256
281
|
|
|
257
|
-
sidebarEl.style.setProperty(
|
|
282
|
+
(sidebarEl as HTMLElement).style.setProperty(
|
|
258
283
|
"--dx-c-content-sidebar-sticky-top",
|
|
259
|
-
`${
|
|
284
|
+
`${totalHeaderHeight}px`
|
|
260
285
|
);
|
|
261
286
|
|
|
262
287
|
docHeaderEl.style.setProperty(
|
|
263
288
|
"--dx-g-global-header-height",
|
|
264
289
|
`${globalNavHeight}px`
|
|
265
290
|
);
|
|
291
|
+
// Expose heights as CSS variables for sticky offsets used by page content
|
|
292
|
+
const rootStyle = document.documentElement.style;
|
|
293
|
+
rootStyle.setProperty(
|
|
294
|
+
"--dx-g-doc-header-banner-height",
|
|
295
|
+
`${docHeaderHeight + bannersTotalHeight}px`
|
|
296
|
+
);
|
|
266
297
|
|
|
267
298
|
// Adjusting the doc section heading on scroll.
|
|
268
299
|
docHeadingEls.forEach((docHeadingEl) => {
|
|
269
|
-
(docHeadingEl as any).style.scrollMarginTop =
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
docPhaseEl.getBoundingClientRect().height +
|
|
273
|
-
40
|
|
274
|
-
}px`
|
|
275
|
-
: `${totalHeaderHeight + 40}px`;
|
|
300
|
+
(docHeadingEl as any).style.scrollMarginTop = `${
|
|
301
|
+
totalHeaderHeight + bannersTotalHeight + 40
|
|
302
|
+
}px`;
|
|
276
303
|
});
|
|
277
304
|
|
|
278
305
|
// Adjusting the right nav bar on scroll.
|
|
279
306
|
if (rightNavBarEl) {
|
|
280
|
-
rightNavBarEl.style.top =
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
docPhaseEl.getBoundingClientRect().height
|
|
284
|
-
}px`
|
|
285
|
-
: `${totalHeaderHeight}px`;
|
|
307
|
+
(rightNavBarEl as HTMLElement).style.top = `${
|
|
308
|
+
totalHeaderHeight + bannersTotalHeight
|
|
309
|
+
}px`;
|
|
286
310
|
}
|
|
287
311
|
|
|
288
312
|
// If doc phase element exists, we need to account for its sticky position. Mobile should include the sidebar height (since it becomes sticky aswell).
|
|
@@ -2,111 +2,44 @@ import ContentLayout from "doc/contentLayout";
|
|
|
2
2
|
|
|
3
3
|
const TOC_HEADER_TAG = "doc-heading";
|
|
4
4
|
const RNB_BY_TAB = "docs-tab";
|
|
5
|
-
const
|
|
5
|
+
const SPECIFICATION_TAB_TITLE = "Specification";
|
|
6
6
|
export const OBSERVER_ATTACH_WAIT_TIME = 500;
|
|
7
7
|
|
|
8
8
|
export default class LwcContentLayout extends ContentLayout {
|
|
9
9
|
private rnbByTab: boolean = false;
|
|
10
10
|
|
|
11
|
-
// DOM element caches to avoid repeated queries
|
|
12
|
-
private tabPanelListCache: any = null;
|
|
13
|
-
private hasSpecContentCache: boolean | null = null;
|
|
14
|
-
private allTabsCache: any[] | null = null;
|
|
15
|
-
private mainSlotCache: any = null;
|
|
16
|
-
|
|
17
11
|
private setRNBByTab() {
|
|
18
|
-
const tabPanelListItem = this.getTabPanelList();
|
|
19
|
-
this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
|
|
12
|
+
const tabPanelListItem: any = this.getTabPanelList();
|
|
13
|
+
this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB ? true : false;
|
|
20
14
|
}
|
|
21
15
|
|
|
22
16
|
get showTabBasedRNB() {
|
|
23
17
|
return this.rnbByTab;
|
|
24
18
|
}
|
|
25
19
|
|
|
26
|
-
/**
|
|
27
|
-
* Check if the main slot contains doc-specification-content
|
|
28
|
-
* Uses caching to avoid repeated DOM queries
|
|
29
|
-
*/
|
|
30
|
-
private hasSpecificationContent(): boolean {
|
|
31
|
-
if (this.hasSpecContentCache !== null) {
|
|
32
|
-
return this.hasSpecContentCache;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
const mainSlot = this.getMainSlot();
|
|
36
|
-
if (mainSlot) {
|
|
37
|
-
const assignedElements = (mainSlot as any).assignedElements();
|
|
38
|
-
|
|
39
|
-
for (const element of assignedElements) {
|
|
40
|
-
if (
|
|
41
|
-
element.tagName === SPECIFICATION_TAG ||
|
|
42
|
-
element.querySelector(SPECIFICATION_TAG) ||
|
|
43
|
-
element.shadowRoot?.querySelector(SPECIFICATION_TAG)
|
|
44
|
-
) {
|
|
45
|
-
return (this.hasSpecContentCache = true);
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
return (this.hasSpecContentCache = false);
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Clear all caches when content changes
|
|
54
|
-
*/
|
|
55
|
-
private clearAllCaches(): void {
|
|
56
|
-
this.hasSpecContentCache = null;
|
|
57
|
-
this.tabPanelListCache = null;
|
|
58
|
-
this.allTabsCache = null;
|
|
59
|
-
this.mainSlotCache = null;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Get the main slot element with caching
|
|
64
|
-
*/
|
|
65
|
-
private getMainSlot(): any {
|
|
66
|
-
if (!this.mainSlotCache) {
|
|
67
|
-
this.mainSlotCache =
|
|
68
|
-
this.template.querySelector("slot:not([name])");
|
|
69
|
-
}
|
|
70
|
-
return this.mainSlotCache;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* Get tab panel list with caching
|
|
75
|
-
*/
|
|
76
|
-
private getTabPanelList(): any {
|
|
77
|
-
if (!this.tabPanelListCache) {
|
|
78
|
-
// eslint-disable-next-line @lwc/lwc/no-document-query
|
|
79
|
-
this.tabPanelListCache =
|
|
80
|
-
document.querySelector("dx-tab-panel-list");
|
|
81
|
-
}
|
|
82
|
-
return this.tabPanelListCache;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
20
|
onRNBClick = (event: CustomEvent) => {
|
|
86
21
|
event.stopPropagation();
|
|
87
|
-
|
|
22
|
+
const currentTab = this.getSelectedTabId();
|
|
23
|
+
if (currentTab === SPECIFICATION_TAB_TITLE) {
|
|
88
24
|
this.didScrollToSelectedHash = false;
|
|
89
25
|
}
|
|
90
26
|
};
|
|
91
27
|
|
|
92
28
|
onTabChanged = () => {
|
|
93
29
|
this.updateRNB();
|
|
94
|
-
|
|
95
|
-
const { hash } = window.location;
|
|
96
|
-
if (this.hasSpecificationContent() && hash) {
|
|
97
|
-
this.didScrollToSelectedHash = false;
|
|
98
|
-
|
|
99
|
-
requestAnimationFrame(() => this.updateHeadingForRNB());
|
|
100
|
-
}
|
|
101
30
|
};
|
|
102
31
|
|
|
32
|
+
private getTabPanelList() {
|
|
33
|
+
// eslint-disable-next-line @lwc/lwc/no-document-query
|
|
34
|
+
return document.querySelector("dx-tab-panel-list");
|
|
35
|
+
}
|
|
36
|
+
|
|
103
37
|
protected getHeadingElements() {
|
|
104
38
|
let headingElements = super.getHeadingElements();
|
|
105
39
|
if (this.showTabBasedRNB) {
|
|
106
|
-
const tabPanelListItem = this.getTabPanelList();
|
|
40
|
+
const tabPanelListItem: any = this.getTabPanelList();
|
|
107
41
|
const tabPanels =
|
|
108
42
|
tabPanelListItem?.querySelectorAll("dx-tab-panel");
|
|
109
|
-
|
|
110
43
|
for (const tabPanelItem of tabPanels) {
|
|
111
44
|
if (tabPanelItem.active) {
|
|
112
45
|
// This is needed for Specification tab content
|
|
@@ -132,7 +65,6 @@ export default class LwcContentLayout extends ContentLayout {
|
|
|
132
65
|
private updateURL() {
|
|
133
66
|
const tabs = this.getAllTabs();
|
|
134
67
|
const selectedTabId = this.getSelectedTabId();
|
|
135
|
-
|
|
136
68
|
tabs.forEach((tab: any) => {
|
|
137
69
|
if (tab.getAttribute("aria-selected") === "true") {
|
|
138
70
|
const tabID = tab.getAttribute("aria-label");
|
|
@@ -169,38 +101,22 @@ export default class LwcContentLayout extends ContentLayout {
|
|
|
169
101
|
const selectedTabId = this.getSelectedTabId();
|
|
170
102
|
if (selectedTabId) {
|
|
171
103
|
this.selectTabById(selectedTabId);
|
|
172
|
-
|
|
173
|
-
// If there's a hash and we have specification content,
|
|
174
|
-
// we need to wait for the content to load before scrolling
|
|
175
|
-
const { hash } = window.location;
|
|
176
|
-
if (this.hasSpecificationContent() && hash) {
|
|
177
|
-
// Reset the scroll flag to allow scrolling once content is loaded
|
|
178
|
-
this.didScrollToSelectedHash = false;
|
|
179
|
-
}
|
|
180
104
|
}
|
|
181
105
|
});
|
|
182
106
|
}
|
|
183
107
|
|
|
184
108
|
private getAllTabs(): any[] {
|
|
185
|
-
|
|
186
|
-
if (this.allTabsCache) {
|
|
187
|
-
return this.allTabsCache;
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
const tabPanelListItem = this.getTabPanelList();
|
|
109
|
+
const tabPanelListItem: any = this.getTabPanelList();
|
|
191
110
|
if (tabPanelListItem?.shadowRoot) {
|
|
192
|
-
|
|
111
|
+
return Array.from(
|
|
193
112
|
tabPanelListItem.shadowRoot.querySelectorAll(
|
|
194
113
|
"dx-tab-panel-item"
|
|
195
114
|
)
|
|
196
115
|
).map((tabPanelItem: any) =>
|
|
197
116
|
tabPanelItem.shadowRoot.querySelector("button")
|
|
198
117
|
);
|
|
199
|
-
} else {
|
|
200
|
-
this.allTabsCache = [];
|
|
201
118
|
}
|
|
202
|
-
|
|
203
|
-
return this.allTabsCache;
|
|
119
|
+
return [];
|
|
204
120
|
}
|
|
205
121
|
|
|
206
122
|
private selectTabById(tabId: string) {
|
|
@@ -242,12 +158,8 @@ export default class LwcContentLayout extends ContentLayout {
|
|
|
242
158
|
}
|
|
243
159
|
}
|
|
244
160
|
|
|
245
|
-
onSlotChange(): void {
|
|
246
|
-
this.clearAllCaches();
|
|
247
|
-
super.onSlotChange();
|
|
248
|
-
}
|
|
249
|
-
|
|
250
161
|
updateHeadingForRNB(): void {
|
|
162
|
+
// We only need to update URL in case of /docs and ignore if tabs are used anywhere else in DSC
|
|
251
163
|
if (this.showTabBasedRNB) {
|
|
252
164
|
this.updateURL();
|
|
253
165
|
}
|
|
@@ -73,7 +73,9 @@
|
|
|
73
73
|
<template lwc:if={method.firstArgument}>
|
|
74
74
|
<tr key={method.name}>
|
|
75
75
|
<td rowspan={method.arguments.length}>
|
|
76
|
-
<span class="code">
|
|
76
|
+
<span class="code">
|
|
77
|
+
{method.nameInKebabCase}
|
|
78
|
+
</span>
|
|
77
79
|
</td>
|
|
78
80
|
<td rowspan={method.arguments.length}>
|
|
79
81
|
{method.description}
|
|
@@ -98,7 +100,9 @@
|
|
|
98
100
|
<template lwc:else>
|
|
99
101
|
<tr key={method.name}>
|
|
100
102
|
<td>
|
|
101
|
-
<span class="code">
|
|
103
|
+
<span class="code">
|
|
104
|
+
{method.nameInKebabCase}
|
|
105
|
+
</span>
|
|
102
106
|
</td>
|
|
103
107
|
<td>{method.description}</td>
|
|
104
108
|
<td colspan="3"></td>
|
|
@@ -0,0 +1,261 @@
|
|
|
1
|
+
/* stylelint-disable selector-class-pattern */
|
|
2
|
+
|
|
3
|
+
/* Table wrapper for overflow handling */
|
|
4
|
+
.doc-table-wrapper {
|
|
5
|
+
margin: 16px 0;
|
|
6
|
+
|
|
7
|
+
/* Ensure sticky positioning context */
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* Only add horizontal scroll when sticky headers are disabled */
|
|
12
|
+
.doc-table-wrapper:not(.doc-table-wrapper--sticky-headers) {
|
|
13
|
+
overflow-x: auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/* When sticky headers are enabled, remove overflow to allow sticky positioning */
|
|
17
|
+
.doc-table-wrapper--sticky-headers {
|
|
18
|
+
overflow-x: visible;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* GitHub markdown table styles - exact replication */
|
|
22
|
+
.doc-table {
|
|
23
|
+
border-spacing: 0;
|
|
24
|
+
border-collapse: collapse;
|
|
25
|
+
display: table;
|
|
26
|
+
width: max-content;
|
|
27
|
+
max-width: 100%;
|
|
28
|
+
overflow: auto;
|
|
29
|
+
font-size: 14px;
|
|
30
|
+
line-height: 1.45;
|
|
31
|
+
color: #1f2328;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Table caption - GitHub style */
|
|
35
|
+
.doc-table__caption {
|
|
36
|
+
caption-side: top;
|
|
37
|
+
padding: 8px 0;
|
|
38
|
+
font-weight: 600;
|
|
39
|
+
color: #656d76;
|
|
40
|
+
text-align: left;
|
|
41
|
+
font-size: 14px;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Header and cell base styles */
|
|
45
|
+
.doc-table__header-cell,
|
|
46
|
+
.doc-table__cell {
|
|
47
|
+
padding: 6px 13px;
|
|
48
|
+
border: 1px solid #d1d9e0;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Header specific styles */
|
|
52
|
+
.doc-table__header-cell {
|
|
53
|
+
font-weight: 600;
|
|
54
|
+
background-color: #f6f8fa;
|
|
55
|
+
text-align: left;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Body cell styles */
|
|
59
|
+
.doc-table__cell {
|
|
60
|
+
background-color: #fff;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Row hover effect - subtle like GitHub */
|
|
64
|
+
.doc-table__row:hover .doc-table__cell {
|
|
65
|
+
background-color: #f6f8fa;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Sticky headers */
|
|
69
|
+
.doc-table--sticky-headers .doc-table__header-cell {
|
|
70
|
+
position: sticky;
|
|
71
|
+
top: var(--dx-g-doc-header-banner-height, 0);
|
|
72
|
+
z-index: 10;
|
|
73
|
+
|
|
74
|
+
/* Ensure background is maintained when sticky */
|
|
75
|
+
background-color: #f6f8fa;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Bordered table variant - enhanced GitHub style */
|
|
79
|
+
.doc-table--bordered {
|
|
80
|
+
border: 1px solid #d1d9e0;
|
|
81
|
+
border-radius: 6px;
|
|
82
|
+
overflow: hidden;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.doc-table--bordered .doc-table__header-cell:first-child,
|
|
86
|
+
.doc-table--bordered .doc-table__cell:first-child {
|
|
87
|
+
border-left: none;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.doc-table--bordered .doc-table__header-cell:last-child,
|
|
91
|
+
.doc-table--bordered .doc-table__cell:last-child {
|
|
92
|
+
border-right: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Striped table variant - GitHub style alternating rows */
|
|
96
|
+
.doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
|
|
97
|
+
background-color: #f6f8fa;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
|
|
101
|
+
background-color: #eaeef2;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Links within table cells - GitHub style */
|
|
105
|
+
.doc-table__cell a {
|
|
106
|
+
color: #0969da;
|
|
107
|
+
text-decoration: none;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.doc-table__cell a:hover {
|
|
111
|
+
text-decoration: underline;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.doc-table__cell a:visited {
|
|
115
|
+
color: #8250df;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Code within table cells - GitHub style */
|
|
119
|
+
.doc-table__cell code {
|
|
120
|
+
padding: 0.2em 0.4em;
|
|
121
|
+
margin: 0;
|
|
122
|
+
font-size: 85%;
|
|
123
|
+
white-space: break-spaces;
|
|
124
|
+
background-color: rgb(175 184 193 / 20%);
|
|
125
|
+
border-radius: 6px;
|
|
126
|
+
font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
|
|
127
|
+
"Liberation Mono", Menlo, monospace;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
/* Strong/bold text in cells */
|
|
131
|
+
.doc-table__cell strong,
|
|
132
|
+
.doc-table__cell b {
|
|
133
|
+
font-weight: 600;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
/* Emphasis/italic text in cells */
|
|
137
|
+
.doc-table__cell em,
|
|
138
|
+
.doc-table__cell i {
|
|
139
|
+
font-style: italic;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Empty state - GitHub inspired */
|
|
143
|
+
.doc-table__empty {
|
|
144
|
+
padding: 32px;
|
|
145
|
+
text-align: center;
|
|
146
|
+
border: 1px solid #d1d9e0;
|
|
147
|
+
border-radius: 6px;
|
|
148
|
+
background-color: #f6f8fa;
|
|
149
|
+
margin: 16px 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.doc-table__empty-message {
|
|
153
|
+
color: #656d76;
|
|
154
|
+
font-style: italic;
|
|
155
|
+
margin: 0;
|
|
156
|
+
font-size: 14px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Responsive design - GitHub mobile behavior */
|
|
160
|
+
@media (max-width: 768px) {
|
|
161
|
+
.doc-table-wrapper {
|
|
162
|
+
margin-left: -16px;
|
|
163
|
+
margin-right: -16px;
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
.doc-table {
|
|
167
|
+
font-size: 12px;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.doc-table__header-cell,
|
|
171
|
+
.doc-table__cell {
|
|
172
|
+
padding: 4px 8px;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
/* Adjust sticky header position for mobile */
|
|
176
|
+
.doc-table--sticky-headers .doc-table__header-cell {
|
|
177
|
+
top: var(--dx-g-doc-header-banner-height, 0);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
/* Dark mode support (GitHub style) */
|
|
182
|
+
@media (prefers-color-scheme: dark) {
|
|
183
|
+
.doc-table {
|
|
184
|
+
color: #f0f6fc;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.doc-table__header-cell,
|
|
188
|
+
.doc-table__cell {
|
|
189
|
+
border-color: #30363d;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.doc-table__header-cell {
|
|
193
|
+
background-color: #161b22;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Ensure sticky headers maintain background in dark mode */
|
|
197
|
+
.doc-table--sticky-headers .doc-table__header-cell {
|
|
198
|
+
background-color: #161b22;
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.doc-table__cell {
|
|
202
|
+
background-color: #0d1117;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.doc-table__row:hover .doc-table__cell {
|
|
206
|
+
background-color: #161b22;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.doc-table--striped .doc-table__row:nth-child(even) .doc-table__cell {
|
|
210
|
+
background-color: #161b22;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.doc-table--striped .doc-table__row:nth-child(even):hover .doc-table__cell {
|
|
214
|
+
background-color: #21262d;
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.doc-table__caption {
|
|
218
|
+
color: #8b949e;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.doc-table__empty {
|
|
222
|
+
background-color: #161b22;
|
|
223
|
+
border-color: #30363d;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.doc-table__empty-message {
|
|
227
|
+
color: #8b949e;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.doc-table__cell a {
|
|
231
|
+
color: #58a6ff;
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.doc-table__cell a:visited {
|
|
235
|
+
color: #bc8cff;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.doc-table__cell code {
|
|
239
|
+
background-color: rgb(110 118 129 / 40%);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* High contrast mode support */
|
|
244
|
+
@media (prefers-contrast: high) {
|
|
245
|
+
.doc-table__header-cell,
|
|
246
|
+
.doc-table__cell {
|
|
247
|
+
border: 1px solid;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.doc-table__row:hover .doc-table__cell {
|
|
251
|
+
background-color: highlight;
|
|
252
|
+
color: highlighttext;
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
/* Reduced motion support */
|
|
257
|
+
@media (prefers-reduced-motion: reduce) {
|
|
258
|
+
.doc-table__row:hover .doc-table__cell {
|
|
259
|
+
transition: none;
|
|
260
|
+
}
|
|
261
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class={wrapperClasses} if:true={hasData}>
|
|
3
|
+
<table class={tableClasses}>
|
|
4
|
+
<!-- Caption -->
|
|
5
|
+
<caption if:true={caption} class="doc-table__caption">
|
|
6
|
+
{caption}
|
|
7
|
+
</caption>
|
|
8
|
+
<!-- Table Header -->
|
|
9
|
+
<thead class="doc-table__head">
|
|
10
|
+
<tr class="doc-table__header-row">
|
|
11
|
+
<th
|
|
12
|
+
for:each={columns}
|
|
13
|
+
for:item="column"
|
|
14
|
+
key={column.key}
|
|
15
|
+
class="doc-table__header-cell"
|
|
16
|
+
scope="col"
|
|
17
|
+
>
|
|
18
|
+
{column.label}
|
|
19
|
+
</th>
|
|
20
|
+
</tr>
|
|
21
|
+
</thead>
|
|
22
|
+
<!-- Table Body -->
|
|
23
|
+
<tbody class="doc-table__body">
|
|
24
|
+
<tr
|
|
25
|
+
for:each={processedRows}
|
|
26
|
+
for:item="row"
|
|
27
|
+
key={row.id}
|
|
28
|
+
class="doc-table__row"
|
|
29
|
+
>
|
|
30
|
+
<td
|
|
31
|
+
for:each={row.cells}
|
|
32
|
+
for:item="cell"
|
|
33
|
+
key={cell.key}
|
|
34
|
+
class="doc-table__cell"
|
|
35
|
+
>
|
|
36
|
+
{cell.value}
|
|
37
|
+
</td>
|
|
38
|
+
</tr>
|
|
39
|
+
</tbody>
|
|
40
|
+
</table>
|
|
41
|
+
</div>
|
|
42
|
+
<!-- Empty state -->
|
|
43
|
+
<div class="doc-table__empty" if:false={hasData}>
|
|
44
|
+
<p class="doc-table__empty-message">No data available</p>
|
|
45
|
+
</div>
|
|
46
|
+
</template>
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
import { LightningElement, api } from "lwc";
|
|
2
|
+
|
|
3
|
+
interface TableColumn {
|
|
4
|
+
key: string;
|
|
5
|
+
label: string;
|
|
6
|
+
type?: "text" | "link" | "html";
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
interface TableRow {
|
|
10
|
+
[key: string]: any;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
interface TableData {
|
|
14
|
+
columns: TableColumn[];
|
|
15
|
+
rows: TableRow[];
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export default class Table extends LightningElement {
|
|
19
|
+
@api caption: string = "";
|
|
20
|
+
|
|
21
|
+
private _striped: boolean = false;
|
|
22
|
+
private _bordered: boolean = false;
|
|
23
|
+
private _stickyHeaders: boolean = false;
|
|
24
|
+
|
|
25
|
+
@api
|
|
26
|
+
get striped(): boolean {
|
|
27
|
+
return this._striped;
|
|
28
|
+
}
|
|
29
|
+
set striped(value: boolean | string) {
|
|
30
|
+
this._striped = this.toBooleanValue(value);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@api
|
|
34
|
+
get bordered(): boolean {
|
|
35
|
+
return this._bordered;
|
|
36
|
+
}
|
|
37
|
+
set bordered(value: boolean | string) {
|
|
38
|
+
this._bordered = this.toBooleanValue(value);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@api
|
|
42
|
+
get stickyHeaders(): boolean {
|
|
43
|
+
return this._stickyHeaders;
|
|
44
|
+
}
|
|
45
|
+
set stickyHeaders(value: boolean | string) {
|
|
46
|
+
this._stickyHeaders = this.toBooleanValue(value);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
private _tableData: TableData = { columns: [], rows: [] };
|
|
50
|
+
|
|
51
|
+
@api
|
|
52
|
+
get tableData(): string | TableData {
|
|
53
|
+
return this._tableData;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
set tableData(value: string | TableData) {
|
|
57
|
+
if (typeof value === "string") {
|
|
58
|
+
// Handle the case where object is stringified as "[object Object]"
|
|
59
|
+
if (value === "[object Object]") {
|
|
60
|
+
console.error(
|
|
61
|
+
"Invalid JSON provided to table component: Object was not properly serialized. Use property binding (.table-data) instead of attribute binding (table-data) for objects."
|
|
62
|
+
);
|
|
63
|
+
this._tableData = { columns: [], rows: [] };
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
try {
|
|
68
|
+
this._tableData = JSON.parse(value);
|
|
69
|
+
} catch (error) {
|
|
70
|
+
console.error(
|
|
71
|
+
"Invalid JSON provided to table component:",
|
|
72
|
+
error
|
|
73
|
+
);
|
|
74
|
+
this._tableData = { columns: [], rows: [] };
|
|
75
|
+
}
|
|
76
|
+
} else if (value) {
|
|
77
|
+
this._tableData = value as TableData;
|
|
78
|
+
} else {
|
|
79
|
+
this._tableData = { columns: [], rows: [] };
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
get columns(): TableColumn[] {
|
|
84
|
+
return this._tableData?.columns || [];
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
get rows(): TableRow[] {
|
|
88
|
+
return this._tableData?.rows || [];
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
get hasData(): boolean {
|
|
92
|
+
return this.columns.length > 0 && this.rows.length > 0;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
get wrapperClasses(): string {
|
|
96
|
+
const classes = ["doc-table-wrapper"];
|
|
97
|
+
|
|
98
|
+
if (this.stickyHeaders) {
|
|
99
|
+
classes.push("doc-table-wrapper--sticky-headers");
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
return classes.join(" ");
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
get tableClasses(): string {
|
|
106
|
+
const classes = ["doc-table"];
|
|
107
|
+
|
|
108
|
+
if (this.striped) {
|
|
109
|
+
classes.push("doc-table--striped");
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
if (this.bordered) {
|
|
113
|
+
classes.push("doc-table--bordered");
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
if (this.stickyHeaders) {
|
|
117
|
+
classes.push("doc-table--sticky-headers");
|
|
118
|
+
}
|
|
119
|
+
return classes.join(" ");
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
get processedRows(): Array<{
|
|
123
|
+
id: string;
|
|
124
|
+
cells: Array<{ key: string; value: any; type: string }>;
|
|
125
|
+
}> {
|
|
126
|
+
return this.rows.map((row, index) => ({
|
|
127
|
+
id: `row-${index}`,
|
|
128
|
+
cells: this.columns.map((column) => ({
|
|
129
|
+
key: column.key,
|
|
130
|
+
value: row[column.key] || "",
|
|
131
|
+
type: column.type || "text"
|
|
132
|
+
}))
|
|
133
|
+
}));
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
private renderCellContent(value: any, type: string): string {
|
|
137
|
+
if (value === null || value === undefined) {
|
|
138
|
+
return "";
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
switch (type) {
|
|
142
|
+
case "html":
|
|
143
|
+
return value.toString();
|
|
144
|
+
case "link":
|
|
145
|
+
if (typeof value === "object" && value.url && value.text) {
|
|
146
|
+
return `<a href="${value.url}" target="_blank" rel="noopener noreferrer">${value.text}</a>`;
|
|
147
|
+
}
|
|
148
|
+
return value.toString();
|
|
149
|
+
case "text":
|
|
150
|
+
default:
|
|
151
|
+
return value.toString();
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
// Method to handle cell content rendering in the template
|
|
156
|
+
getCellContent(value: any, type: string): string {
|
|
157
|
+
return this.renderCellContent(value, type);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
// Method to check if cell content should be rendered as HTML
|
|
161
|
+
isHtmlCell(type: string): boolean {
|
|
162
|
+
return type === "html" || type === "link";
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Helper method to convert string/boolean values to boolean
|
|
166
|
+
private toBooleanValue(value: boolean | string): boolean {
|
|
167
|
+
if (typeof value === "boolean") {
|
|
168
|
+
return value;
|
|
169
|
+
}
|
|
170
|
+
if (typeof value === "string") {
|
|
171
|
+
return value.toLowerCase() === "true";
|
|
172
|
+
}
|
|
173
|
+
return false;
|
|
174
|
+
}
|
|
175
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
Copyright (c) 2020, Salesforce.com, Inc.
|
|
2
|
-
All rights reserved.
|
|
3
|
-
|
|
4
|
-
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
5
|
-
|
|
6
|
-
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
7
|
-
|
|
8
|
-
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
9
|
-
|
|
10
|
-
* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
11
|
-
|
|
12
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|