@salesforcedevs/docs-components 1.3.344-fix-alpha → 1.3.344-spage

package/lwc.config.json

@@ -18,6 +18,7 @@
         "doc/headingAnchor",
         "doc/overview",
         "doc/phase",
+        "doc/specificationContent",
         "doc/versionPicker",
         "doc/xmlContent",
         "docUtils/utils"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.344-fix-alpha",
+    "version": "1.3.344-spage",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/specificationContent/specificationContent.html

@@ -0,0 +1,46 @@
+<template>
+    <lightning-card title="Fetched Data">
+        <!-- Display Attributes if they exist -->
+        <template if:true={hasAttributes}>
+            <h3>Attributes</h3>
+            <ul>
+                <template for:each={data.attribute} for:item="attr">
+                    <li key={attr.name}>
+                        <strong>{attr.name}:</strong>
+                        {attr.desc}
+                    </li>
+                </template>
+            </ul>
+        </template>
+
+        <!-- Display Methods if they exist -->
+        <template if:true={hasMethods}>
+            <h3>Methods</h3>
+            <ul>
+                <template for:each={data.method} for:item="method">
+                    <li key={method.name}>
+                        <strong>{method.name}:</strong>
+                        {method.desc}
+                    </li>
+                </template>
+            </ul>
+        </template>
+
+        <!-- Display Slots if they exist -->
+        <template if:true={hasSlots}>
+            <h3>Slots</h3>
+            <ul>
+                <template for:each={data.slots} for:item="slot">
+                    <li key={slot.name}>
+                        <strong>{slot.name}:</strong>
+                        {slot.desc}
+                    </li>
+                </template>
+            </ul>
+        </template>
+
+        <template if:true={error}>
+            <p>Error fetching data: {error}</p>
+        </template>
+    </lightning-card>
+</template>

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -0,0 +1,41 @@
+import { LightningElement, track } from "lwc";
+import { toJson } from "dxUtils/normalizers";
+
+export default class specificationContent extends LightningElement {
+    @track data: any; // Reactive property to store fetched data
+    @track error: any; // To track any errors
+
+    // Lifecycle method to fetch data when the component is inserted into the DOM
+    connectedCallback() {
+        this.loadData();
+    }
+
+    // Method to make the API call
+    loadData() {
+        fetch("http://localhost:3002/card") // Sample API URL
+            .then((response) => response.json()) // Convert response to JSON
+            .then((result) => {
+                this.data = toJson(result); // Store data to update UI
+                this.error = undefined; // Clear any previous errors
+            })
+            .catch((error) => {
+                this.error = error; // Capture any errors
+                this.data = {}; // Clear data on error
+            });
+    }
+
+    // Helper to check if attributes exist
+    get hasAttributes() {
+        return this.data?.attribute;
+    }
+
+    // Helper to check if methods exist
+    get hasMethods() {
+        return this.data?.method;
+    }
+
+    // Helper to check if slots exist
+    get hasSlots() {
+        return this.data?.slots;
+    }
+}