api-viewer-element - npm Package Compare versions

Comparing version 0.2.5 to 0.2.6

CHANGELOG.md

@@ -19,2 +19,8 @@ # Change Log
 
+## [0.2.6] - 2019-11-15
+
+### Added
+
+- Exposed `selected` property to toggle selected element name
+
 ## [0.2.5] - 2019-11-13
@@ -21,0 +27,0 @@

lib/api-viewer-select.js

@@ -21,8 +21,9 @@ import { __decorate } from "tslib";
     render() {
+        const { options } = this;
+        const selected = options.find((_, index) => this.selected === index);
         return html `
-      <select @change="${this._onChange}">
-        ${this.options.map((option, index) => {
-            const selected = this.selected === index;
+      <select @change="${this._onChange}" .value="${selected}">
+        ${options.map(option => {
             return html `
-            <option ?selected="${selected}">${option}</option>
+            <option>${option}</option>
           `;
@@ -29,0 +30,0 @@ })}

lib/api-viewer.d.ts

@@ -6,2 +6,3 @@ import { LitElement, TemplateResult } from 'lit-element';
     section: string;
+    selected?: string;
     private jsonFetched;
@@ -8,0 +9,0 @@ private lastSrc?;

lib/api-viewer.js

@@ -14,4 +14,5 @@ import { __decorate } from "tslib";
     // eslint-disable-next-line class-methods-use-this
-    async renderDocs(jsonFetched, section) {
+    async renderDocs(jsonFetched, section, selected) {
         const elements = await jsonFetched;
+        const index = elements.findIndex(el => el.name === selected);
         return elements.length
@@ -22,2 +23,3 @@ ? html `
             .section="${section}"
+            .selected="${index >= 0 ? index : 0}"
           ></api-viewer-content>
@@ -68,3 +70,3 @@ `
         return html `
-      ${until(this.renderDocs(this.jsonFetched, this.section))}
+      ${until(this.renderDocs(this.jsonFetched, this.section, this.selected))}
     `;
@@ -82,2 +84,5 @@ }
 ], ApiViewer.prototype, "section", void 0);
+__decorate([
+    property({ type: String })
+], ApiViewer.prototype, "selected", void 0);
 ApiViewer = __decorate([
@@ -84,0 +89,0 @@ customElement('api-viewer')

package.json

 {
   "name": "api-viewer-element",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Web Components API viewer element",
@@ -5,0 +5,0 @@ "author": "Serhii Kulykov <[e-mail]>",

README.md

@@ -92,2 +92,11 @@ # <api-viewer>
 
+### Selected tag
+
+By default, the first element found in JSON file is shown. Set the `selected` property to configure
+it to a different tag name:
+
+```html
+<api-viewer src="./custom-elements.json" selected="my-element"></api-viewer>
+```
+
 ### Knobs
@@ -94,0 +103,0 @@

No alert changes

Improved metrics

Total package byte prevSize

207556

increased by0.6%

Lines of code

2494

increased by0.28%

Number of lines in readme file

209

increased by4.5%

No dependency changes