@zywave/customelement-manifest-element 1.1.0 → 1.2.0

package/customelement-manifest-element.css

@@ -21,7 +21,7 @@
 }
 
 section + section {
-  margin-top: 40px;
+  margin-top: 2.5rem;
 }
 
 h1 {
@@ -48,7 +48,7 @@ table span {
 }
 table thead th,
 table tbody td {
-  padding: 15px;
+  padding: 0.9375rem;
 }
 table thead th:first-child,
 table tbody td:first-child {
@@ -68,7 +68,8 @@ table tbody tr:last-child > td {
   border-bottom: 0;
 }
 table tbody td {
-  padding: 15px;
+  vertical-align: top;
+  padding: 0.9375rem;
   border-bottom: 1px solid hsla(var(--schema-primary-color-h), var(--schema-primary-color-s), var(--schema-primary-color-l), 0.1);
 }
 table tbody td:first-child {
@@ -81,13 +82,25 @@ table tbody td.name, table tbody td.type, table tbody td.default {
   width: 16.667%;
 }
 table tbody td.name span, table tbody td.type span, table tbody td.default span {
-  padding: 5px 10px;
+  padding: 0.3125rem 0.625rem;
 }
-table tbody td.name span, table tbody td.type span {
+table tbody td.name span, table tbody td.type span, table tbody td.signature span {
   font-family: monospace;
   background-color: hsla(var(--schema-primary-color-h), var(--schema-primary-color-s), var(--schema-primary-color-l), 0.1);
   color: var(--schema-primary-color);
 }
+table tbody td.signature span {
+  padding: 0.3125rem 0.625rem;
+}
+table tbody td.signature .expanded-details {
+  margin-left: 1.5625rem;
+}
+table tbody td.signature .param-container {
+  margin-top: 0.3125rem;
+}
+table tbody td.signature .param-description {
+  margin-left: 0.9375rem;
+}
 table tbody td.summary {
   width: 50%;
 }
@@ -111,7 +124,7 @@ a:hover {
 }
 a:focus {
   outline: 1px solid var(--schema-accent-color);
-  outline-offset: 4px;
+  outline-offset: 0.25rem;
   text-decoration: none;
 }
 a:active {
@@ -126,11 +139,11 @@ code {
 
 select {
   display: inline-block;
-  height: 36px;
+  height: 2.25rem;
   padding: 0 1em;
-  padding-right: 35px;
+  padding-right: 2.1875rem;
   border: 1px solid #cbcbd2;
-  border-radius: 4px;
+  border-radius: 0.25rem;
   outline: none;
   font: inherit;
   cursor: pointer;

package/customelement-manifest-element.js

@@ -33,7 +33,7 @@ function buildTable(items, columns) {
     <tbody> ${rows} </tbody>
   </table>`;
 }
-function renderDescripton(str) {
+function renderDescription(str) {
     if (!str) {
         return str;
     }
@@ -47,6 +47,37 @@ function renderDescripton(str) {
     }
     return result;
 }
+function renderMethodSignature(obj) {
+    const methodReturn = () => {
+        const returnType = obj.return?.type?.text;
+        if (returnType?.length === 0) {
+            return 'void';
+        }
+        return returnType ?? 'unknown';
+    };
+    if (obj.parameters) {
+        const methodSignatureSummary = obj.parameters?.map(param => param.name + (param.optional ? '?' : '')).join(', ');
+        const methodParametersDetailed = obj.parameters?.map(param => {
+            const argumentType = `: ${param?.type?.text}${param.default ? ` = ${param.default}` : ''}`;
+            const argumentHtml = param.name + (param.optional ? '?' : '') + argumentType;
+            return html `
+        <div class="param-container">
+          <div class="param">${argumentHtml}</div>
+          ${param.description
+                ? html `<div class="param-description">${renderDescription(param.description)}</div>`
+                : nothing}
+        </div>
+      `;
+        });
+        return html `<details>
+      <summary>${obj.name}(${methodSignatureSummary}): ${methodReturn()}</summary>
+      <div class="expanded-details">${methodParametersDetailed}</div>
+    </details>`;
+    }
+    else {
+        return html `${obj.name}(): ${methodReturn()}`;
+    }
+}
 function prettify(str) {
     let regexMatch;
     const linkRegex = /^https?:\/\//;
@@ -162,7 +193,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
         return this.#activeElement
             ? html `<article>
             <div class="header-row"><${getHeaderTag(this.initialHeaderLevel)}>${this.#activeElementName}</${getHeaderTag(this.initialHeaderLevel)}>${this.#renderElementChooser()}</div>
-            <div>${renderDescripton(this.#activeElement.description)}</div>
+            <div>${renderDescription(this.#activeElement.description)}</div>
             ${this.#renderAttributes()} ${this.#renderProperties()} ${this.#renderCssProperties()}
             ${this.#renderCssShadowParts()} ${this.#renderEvents()} ${this.#renderMethods()} ${this.#renderSlots()} </article
           >`
@@ -196,7 +227,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                     header: "Description",
                     type: "summary",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                 },
                 {
@@ -239,7 +270,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },
@@ -281,7 +312,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },
@@ -316,7 +347,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },
@@ -344,7 +375,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },
@@ -379,10 +410,17 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },
+                {
+                    header: "Signature",
+                    valueAccessor(item) {
+                        return renderMethodSignature(item);
+                    },
+                    type: "signature",
+                },
             ]);
             return html `
         <section part="methods">
@@ -411,7 +449,7 @@ let CustomElementManifestElement = class CustomElementManifestElement extends Li
                 {
                     header: "Description",
                     valueAccessor(item) {
-                        return renderDescripton(item.description);
+                        return renderDescription(item.description);
                     },
                     type: "summary",
                 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zywave/customelement-manifest-element",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "UNLICENSED",
   "type": "module",
@@ -31,6 +31,7 @@
     "@web/test-runner": "^0.13.18",
     "@web/test-runner-junit-reporter": "^0.4.7",
     "@web/test-runner-playwright": "^0.8.6",
+    "@zywave/zui-sass-scripts": "^4.0.14",
     "custom-elements-manifest": "^1.0.0",
     "es-dev-server": "^2.1.0",
     "eslint": "^7.30.0",