@salesforcedevs/docs-components 1.3.345-sppage-alpha → 1.3.345-sppage-alpha1
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
CHANGED
|
@@ -1,46 +1,99 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<!-- Display Attributes if they exist -->
|
|
2
|
+
<div title="properties">
|
|
4
3
|
<template if:true={hasAttributes}>
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
4
|
+
<doc-heading
|
|
5
|
+
header="Attributes"
|
|
6
|
+
hash="attributes"
|
|
7
|
+
aria-level="2"
|
|
8
|
+
></doc-heading>
|
|
9
|
+
<table>
|
|
10
|
+
<thead>
|
|
11
|
+
<tr>
|
|
12
|
+
<th>Name</th>
|
|
13
|
+
<th>Description</th>
|
|
14
|
+
</tr>
|
|
15
|
+
</thead>
|
|
16
|
+
<tbody>
|
|
17
|
+
<template for:each={attributes} for:item="attribute">
|
|
18
|
+
<tr key={attribute.name}>
|
|
19
|
+
<td>{attribute.nameInKebabCase}</td>
|
|
20
|
+
<td>{attribute.description}</td>
|
|
21
|
+
</tr>
|
|
22
|
+
</template>
|
|
23
|
+
</tbody>
|
|
24
|
+
</table>
|
|
14
25
|
</template>
|
|
15
26
|
|
|
16
|
-
<!-- Display Methods if they exist -->
|
|
17
27
|
<template if:true={hasMethods}>
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
<doc-heading
|
|
29
|
+
header="Methods"
|
|
30
|
+
hash="methods"
|
|
31
|
+
aria-level="2"
|
|
32
|
+
></doc-heading>
|
|
33
|
+
<table>
|
|
34
|
+
<thead>
|
|
35
|
+
<tr>
|
|
36
|
+
<th>Name</th>
|
|
37
|
+
<th>Description</th>
|
|
38
|
+
</tr>
|
|
39
|
+
</thead>
|
|
40
|
+
<tbody>
|
|
41
|
+
<template for:each={methods} for:item="method">
|
|
42
|
+
<tr key={method.name}>
|
|
43
|
+
<td>{method.nameInKebabCase}</td>
|
|
44
|
+
<td>{method.description}</td>
|
|
45
|
+
</tr>
|
|
46
|
+
</template>
|
|
47
|
+
</tbody>
|
|
48
|
+
</table>
|
|
27
49
|
</template>
|
|
28
50
|
|
|
29
|
-
<!-- Display Slots if they exist -->
|
|
30
51
|
<template if:true={hasSlots}>
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
52
|
+
<doc-heading
|
|
53
|
+
header="Slots"
|
|
54
|
+
hash="slots"
|
|
55
|
+
aria-level="2"
|
|
56
|
+
></doc-heading>
|
|
57
|
+
<table>
|
|
58
|
+
<thead>
|
|
59
|
+
<tr>
|
|
60
|
+
<th>Name</th>
|
|
61
|
+
<th>Description</th>
|
|
62
|
+
</tr>
|
|
63
|
+
</thead>
|
|
64
|
+
<tbody>
|
|
65
|
+
<template for:each={slots} for:item="slot">
|
|
66
|
+
<tr key={slot.name}>
|
|
67
|
+
<td>{slot.nameInKebabCase}</td>
|
|
68
|
+
<td>{slot.description}</td>
|
|
69
|
+
</tr>
|
|
70
|
+
</template>
|
|
71
|
+
</tbody>
|
|
72
|
+
</table>
|
|
40
73
|
</template>
|
|
41
74
|
|
|
42
|
-
<template if:true={
|
|
43
|
-
<
|
|
75
|
+
<template if:true={hasEvents}>
|
|
76
|
+
<doc-heading
|
|
77
|
+
header="Events"
|
|
78
|
+
hash="events"
|
|
79
|
+
aria-level="2"
|
|
80
|
+
></doc-heading>
|
|
81
|
+
<table>
|
|
82
|
+
<thead>
|
|
83
|
+
<tr>
|
|
84
|
+
<th>Name</th>
|
|
85
|
+
<th>Description</th>
|
|
86
|
+
</tr>
|
|
87
|
+
</thead>
|
|
88
|
+
<tbody>
|
|
89
|
+
<template for:each={slots} for:item="slot">
|
|
90
|
+
<tr key={slot.name}>
|
|
91
|
+
<td>{slot.nameInKebabCase}</td>
|
|
92
|
+
<td>{slot.description}</td>
|
|
93
|
+
</tr>
|
|
94
|
+
</template>
|
|
95
|
+
</tbody>
|
|
96
|
+
</table>
|
|
44
97
|
</template>
|
|
45
|
-
</
|
|
98
|
+
</div>
|
|
46
99
|
</template>
|
|
@@ -1,43 +1,56 @@
|
|
|
1
1
|
import { LightningElement, track, api } from "lwc";
|
|
2
|
-
import { toJson } from "dxUtils/normalizers";
|
|
3
2
|
|
|
4
|
-
export default class
|
|
5
|
-
@track data: any;
|
|
6
|
-
@track error: any; // To track any errors
|
|
3
|
+
export default class SpecificationContent extends LightningElement {
|
|
4
|
+
@track data: any;
|
|
7
5
|
@api component: string = "button";
|
|
6
|
+
@api type: string = "lightning";
|
|
7
|
+
|
|
8
|
+
private attributes = [];
|
|
9
|
+
private methods = [];
|
|
10
|
+
private slots = [];
|
|
11
|
+
private events = [];
|
|
8
12
|
|
|
9
|
-
// Lifecycle method to fetch data when the component is inserted into the DOM
|
|
10
13
|
connectedCallback() {
|
|
11
|
-
this.
|
|
14
|
+
this.fetchPropertiesData();
|
|
12
15
|
}
|
|
13
16
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
17
|
+
async fetchPropertiesData() {
|
|
18
|
+
const url = `http://localhost:3002/get-properties?component=${this.component}&type=${this.type}`;
|
|
19
|
+
|
|
20
|
+
try {
|
|
21
|
+
const response = await fetch(url);
|
|
22
|
+
|
|
23
|
+
if (!response.ok) {
|
|
24
|
+
throw new Error(`Failed to fetch: ${response.statusText}`);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
const result = await response.json();
|
|
28
|
+
this.data = result;
|
|
29
|
+
({
|
|
30
|
+
attributes: this.attributes,
|
|
31
|
+
methods: this.methods,
|
|
32
|
+
slots: this.slots,
|
|
33
|
+
events: this.events
|
|
34
|
+
} = this.data);
|
|
35
|
+
} catch (error) {
|
|
36
|
+
this.data = {};
|
|
37
|
+
console.error("fetchPropertiesData() failed for:" + url);
|
|
38
|
+
}
|
|
27
39
|
}
|
|
28
40
|
|
|
29
|
-
// Helper to check if attributes exist
|
|
30
41
|
get hasAttributes() {
|
|
31
|
-
return this.
|
|
42
|
+
return this.attributes;
|
|
32
43
|
}
|
|
33
44
|
|
|
34
|
-
// Helper to check if methods exist
|
|
35
45
|
get hasMethods() {
|
|
36
|
-
return this.
|
|
46
|
+
return this.methods;
|
|
37
47
|
}
|
|
38
48
|
|
|
39
|
-
// Helper to check if slots exist
|
|
40
49
|
get hasSlots() {
|
|
41
|
-
return this.
|
|
50
|
+
return this.slots;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
get hasEvents() {
|
|
54
|
+
return this.events;
|
|
42
55
|
}
|
|
43
56
|
}
|