@salesforcedevs/docs-components 1.3.345-spec-ux-alpha → 1.3.345-spec-alpha2

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/modules/doc/contentLayout/contentLayout.ts +21 -1
  3. package/src/modules/doc/specificationContent/specificationContent.html +46 -37
  4. package/src/modules/doc/specificationContent/specificationContent.ts +38 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "1.3.345-spec-ux-alpha",
3
+ "version": "1.3.345-spec-alpha2",
4
4
  "description": "Docs Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
package/src/modules/doc/contentLayout/contentLayout.ts CHANGED
@@ -12,6 +12,7 @@ declare const Sprig: (eventType: string, eventNme: string) => void;
12
12
 
13
13
  const TOC_HEADER_TAG = "doc-heading";
14
14
  const RNB_BY_TAB = "docs-tab";
15
+ const SPECIFICATION_TAB_TITLE = "Specification";
15
16
  const HIGHLIGHTABLE_SELECTOR = [
16
17
  "p",
17
18
  "h1",
@@ -116,6 +117,13 @@ export default class ContentLayout extends LightningElement {
116
117
  this.updateRNB();
117
118
  };
118
119
 
120
+ onRNBClick = () => {
121
+ const currentTab = this.getSelectedTabId();
122
+ if (currentTab === SPECIFICATION_TAB_TITLE) {
123
+ this.didScrollToSelectedHash = false;
124
+ }
125
+ };
126
+
119
127
  private getTabPanelList() {
120
128
  return document.querySelector("dx-tab-panel-list");
121
129
  }
@@ -295,6 +303,11 @@ export default class ContentLayout extends LightningElement {
295
303
  this.setRNBByTab();
296
304
  if (this.showTabBasedRNB) {
297
305
  window.addEventListener("tabchanged", this.onTabChanged);
306
+ window.addEventListener(
307
+ "specificationdatarendered",
308
+ this.onTabChanged
309
+ );
310
+ window.addEventListener("selectedcontent", this.onRNBClick);
298
311
  this.restoreTabSelection();
299
312
  }
300
313
  this.restoreScroll();
@@ -310,7 +323,14 @@ export default class ContentLayout extends LightningElement {
310
323
  window.removeEventListener("scroll", this.adjustNavPosition);
311
324
  window.removeEventListener("resize", this.adjustNavPosition);
312
325
  window.removeEventListener("tabchanged", this.onTabChanged);
313
- window.removeEventListener("popstate", this.handlePopState);
326
+ if (this.showTabBasedRNB) {
327
+ window.removeEventListener(
328
+ "specificationdatarendered",
329
+ this.onTabChanged
330
+ );
331
+ window.removeEventListener("selectedcontent", this.onRNBClick);
332
+ window.removeEventListener("popstate", this.handlePopState);
333
+ }
314
334
  this.searchSyncer.dispose();
315
335
  this.clearRenderObserverTimer();
316
336
 
package/src/modules/doc/specificationContent/specificationContent.html CHANGED
@@ -11,20 +11,28 @@
11
11
  <thead>
12
12
  <tr>
13
13
  <th>Name</th>
14
+ <th>Description</th>
14
15
  <th>Type</th>
15
- <th>Required</th>
16
16
  <th>Default</th>
17
- <th>Description</th>
17
+ <th>Required</th>
18
18
  </tr>
19
19
  </thead>
20
20
  <tbody>
21
21
  <template for:each={attributes} for:item="attribute">
22
22
  <tr key={attribute.name}>
23
23
  <td>{attribute.nameInKebabCase}</td>
24
+ <td>{attribute.description}</td>
24
25
  <td>{attribute.type}</td>
25
- <td>{attribute.required}</td>
26
26
  <td>{attribute.default}</td>
27
- <td>{attribute.description}</td>
27
+ <td>
28
+ <template lwc:if={attribute.required}>
29
+ <dx-icon
30
+ symbol="success"
31
+ size="large"
32
+ color="green-vibrant-65"
33
+ ></dx-icon>
34
+ </template>
35
+ </td>
28
36
  </tr>
29
37
  </template>
30
38
  </tbody>
@@ -42,43 +50,44 @@
42
50
  <thead>
43
51
  <tr>
44
52
  <th>Name</th>
45
- <th>Arguments</th>
46
53
  <th>Description</th>
54
+ <th>Argument Name</th>
55
+ <th>Argument Type</th>
56
+ <th>Argument Description</th>
47
57
  </tr>
48
58
  </thead>
49
59
  <tbody>
50
- <template for:each={methods} for:item="method">
51
- <tr key={method.name}>
52
- <td>{method.nameInKebabCase}</td>
53
- <td>
54
- <template if:true={method.arguments.length}>
55
- <table>
56
- <thead>
57
- <tr>
58
- <th>Name</th>
59
- <th>Type</th>
60
- <th>Description</th>
61
- </tr>
62
- </thead>
63
- <tbody>
64
- <template
65
- for:each={method.arguments}
66
- for:item="argument"
67
- >
68
- <tr key={argument.name}>
69
- <td>{argument.name}</td>
70
- <td>{argument.type}</td>
71
- <td>
72
- {argument.description}
73
- </td>
74
- </tr>
75
- </template>
76
- </tbody>
77
- </table>
78
- </template>
79
- </td>
80
- <td>{method.description}</td>
81
- </tr>
60
+ <template for:each={processedMethods} for:item="method">
61
+ <template if:true={method.firstArgument}>
62
+ <tr key={method.name}>
63
+ <td rowspan={method.arguments.length}>
64
+ {method.nameInKebabCase}
65
+ </td>
66
+ <td rowspan={method.arguments.length}>
67
+ {method.description}
68
+ </td>
69
+ <td>{method.firstArgument.name}</td>
70
+ <td>{method.firstArgument.type}</td>
71
+ <td>{method.firstArgument.description}</td>
72
+ </tr>
73
+ <template
74
+ for:each={method.remainingArguments}
75
+ for:item="arg"
76
+ >
77
+ <tr key={arg.name}>
78
+ <td>{arg.name}</td>
79
+ <td>{arg.type}</td>
80
+ <td>{arg.description}</td>
81
+ </tr>
82
+ </template>
83
+ </template>
84
+ <template if:false={method.firstArgument}>
85
+ <tr key={method.name}>
86
+ <td>{method.nameInKebabCase}</td>
87
+ <td>{method.description}</td>
88
+ <td colspan="3"></td>
89
+ </tr>
90
+ </template>
82
91
  </template>
83
92
  </tbody>
84
93
  </table>
package/src/modules/doc/specificationContent/specificationContent.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { LightningElement, track, api } from "lwc";
2
+ import { Method, Specifiaction } from "typings/custom";
2
3
 
3
4
  export default class SpecificationContent extends LightningElement {
4
5
  @track data: any;
@@ -11,20 +12,20 @@ export default class SpecificationContent extends LightningElement {
11
12
  * http://api.salesforce.com/doc-platform/developer/v1/{type}/{sub-type}/{component-name}
12
13
  * Until the API integration is ready, we will go ahead with mocked-router-url.
13
14
  */
14
- @api routerUrl: string =
15
+ @api apiBaseUrl: string =
15
16
  "https://cx-mock-router-internal-07a18d7b3f61.herokuapp.com";
16
17
 
17
- private attributes = [];
18
- private methods = [];
19
- private slots = [];
20
- private events = [];
18
+ private attributes: Specifiaction[] = [];
19
+ private methods: Method[] = [];
20
+ private slots: Specifiaction[] = [];
21
+ private events: Specifiaction[] = [];
21
22
 
22
23
  connectedCallback() {
23
24
  this.fetchComponentMetadata();
24
25
  }
25
26
 
26
27
  async fetchComponentMetadata() {
27
- const url = `${this.routerUrl}/${this.model}/${this.namespace}/${this.component}`;
28
+ const url = `${this.apiBaseUrl}/${this.model}/${this.namespace}/${this.component}`;
28
29
 
29
30
  try {
30
31
  const response = await fetch(url);
@@ -48,6 +49,22 @@ export default class SpecificationContent extends LightningElement {
48
49
  }
49
50
  }
50
51
 
52
+ /**
53
+ * This getting is doing the data processing for Method to display the nested tables.
54
+ */
55
+ get processedMethods() {
56
+ return this.methods.map((method) => {
57
+ const [firstArgument, ...remainingArguments] =
58
+ method.arguments || [];
59
+ return {
60
+ ...method,
61
+ firstArgument,
62
+ remainingArguments,
63
+ hasArguments: method.arguments && method.arguments.length > 0
64
+ };
65
+ });
66
+ }
67
+
51
68
  get hasAttributes() {
52
69
  return this.attributes?.length > 0;
53
70
  }
@@ -63,4 +80,19 @@ export default class SpecificationContent extends LightningElement {
63
80
  get hasEvents() {
64
81
  return this.events?.length > 0;
65
82
  }
83
+
84
+ renderedCallback(): void {
85
+ this.notifySpecificationDataRendered();
86
+ }
87
+
88
+ notifySpecificationDataRendered() {
89
+ // Dispatch a custom event to notify the specification tab has rendered.
90
+ this.dispatchEvent(
91
+ new CustomEvent("specificationdatarendered", {
92
+ detail: { name: "doc-specification-content" },
93
+ bubbles: true,
94
+ composed: true
95
+ })
96
+ );
97
+ }
66
98
  }