From 88a83700952c54245470dc1d2a20f89fd724698f Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Fri, 25 Feb 2022 10:34:50 -0300 Subject: [PATCH 01/16] Add dynamic property minHeight + test --- demo/index.js | 4 +++- src/ApiResourceExampleDocument.d.ts | 5 +++++ src/ApiResourceExampleDocument.js | 25 +++++++++++++++++++++- test/api-resource-example-document.test.js | 11 ++++++++++ 4 files changed, 43 insertions(+), 2 deletions(-) diff --git a/demo/index.js b/demo/index.js index b5f9b75..9307950 100644 --- a/demo/index.js +++ b/demo/index.js @@ -125,7 +125,9 @@ class ApiDemo extends ApiDemoPage { html`` : + mediatype="${this.mediaType}" + minHeight="600px" + >` : html`

Examples not found in selected method

`; } diff --git a/src/ApiResourceExampleDocument.d.ts b/src/ApiResourceExampleDocument.d.ts index 7dcae0b..3871edc 100644 --- a/src/ApiResourceExampleDocument.d.ts +++ b/src/ApiResourceExampleDocument.d.ts @@ -45,6 +45,11 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * @attribute */ mediaType: string; + /** + * Minimium height of the example panel + * @attribute + */ + minHeight: string; /** * Type (model) name for which examples are generated for. * This is used by RAML to XML examples processor to wrap the example diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index a885a2a..b780c4d 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -121,6 +121,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * If enabled, the example panel would be closed */ _collapseExamplePanel: { type: Boolean, reflect: true }, + minHeight: '', }; } @@ -317,6 +318,28 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { })); } + get minHeight() { + return this._minHeight; + } + + /** + * @param {string} value + */ + set minHeight(value) { + const old = this._minHeight; + if (old === value) { + return; + } + this._minHeight = value; + this.requestUpdate('minHeight', old); + this.dispatchEvent(new CustomEvent('min-height-changed', { + composed: true, + detail: { + value + } + })); + } + get _collapseExamplePanel() { return this.__collapseExamplePanel } @@ -667,7 +690,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) {
${this._titleTemplate(item)} ${this._descriptionTemplate(item)} -
+
{ assert.isDefined(expandIconCollapsed); }); + it('should change min-height panel when minHeight is setted', async () => { + const payloads = getPayload(element, amf, '/IncludedInline', 'post'); + element.examples = payloads; + element.minHeight = '300px'; + + await aTimeout(100); + const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer')); + + assert.equal(wrraperExample.style.minHeight, '300px'); + }); + it('should expand example panel on click ', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; From e0adb5d9a1b368e42f9c4f2413a54190e55ecc4a Mon Sep 17 00:00:00 2001 From: Alex Perez Date: Fri, 25 Feb 2022 11:45:02 -0300 Subject: [PATCH 02/16] Added table in readme with definition of the dynamic properties --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index d79475c..33ddf70 100644 --- a/README.md +++ b/README.md @@ -80,3 +80,28 @@ npm start ```sh npm test ``` + +### Properties +| Name | Type | Required | Default | Comment | +|--------------------|-----------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| examples | object[] | yes | - | AMF model for examples. It can be Payload shape, list of Payload shapes, or any shape. | +| mediaType | string | yes | - | Examples media type | +| minHeight | string | no | 500px | Minimium height of the example panel | +| typeName | string | no | - | Type (model) name for which examples are generated for. This is used by RAML to XML examples processor to wrap the example in type name. If missing this wrapping is omitted. | +| payloadId | string | no | - | Rendered payload ID (if any) to associate examples with the payload. | +| _renderedExamples | Example[] | no | - | Computed in a debouncer examples to render. | +| hasExamples | boolean | no | false | Computed value, true if there are examples to render. This value is reflected to attribute so the element can be hidden via CSS until examples are set. ```api-resource-example-document { display: none; } api-resource-example-document[has-examples] { display: block; } ``` | +| table | boolean | no | - | If true it will display a table view instead of JSON code. `isJson` must be set to use this option. | +| isJson | boolean | no | false | Computed value, true if selected media type is application/json or equivalent. | +| noAuto | boolean | no | - | Configuration passed to example generator. When set the generator only returns examples that are defined in API file, without auto generating examples from object properties. | +| noActions | boolean | no | false | When set the actions row (copy, switch view type) is not rendered. | +| rawOnly | boolean | no | - | When set it only renders "raw" examples. To be used when media type context is unknown. This can happen if RAML type document is rendered outside method documentation (not in a request/response body when media type is known). | +| compatibility | boolean | no | false | Enables Anypoint compatibility styling | +| _effectiveTable | boolean | no | - | | +| _hasLocalStorage | boolean | no | - | True if current environment has localStorage support. Chrome apps do not have localStorage property. | +| _renderReadOnly | boolean | no | false | If enabled then the example generator will be called with this option to add read-only properties to the example | +| _examplesDebouncer | boolean | no | - | | + + + + From 1645ffd9fe5fa2e0cd036c6cc1fed21702a22db7 Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 25 Feb 2022 16:46:39 -0300 Subject: [PATCH 03/16] Refactor changes and fix typo --- demo/index.js | 3 ++- src/ApiResourceExampleDocument.js | 20 ++++++++++++++++---- src/styles/Document.js | 1 + 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/demo/index.js b/demo/index.js index 9307950..12a47fa 100644 --- a/demo/index.js +++ b/demo/index.js @@ -98,6 +98,7 @@ class ApiDemo extends ApiDemoPage { const mediaType = this.mediaTypes[index].label; const body = this.payloads[index]; this.hasExamples = true; + this.minHeight = '200px'; this.examples = body; this.mediaType = mediaType; } @@ -126,7 +127,7 @@ class ApiDemo extends ApiDemoPage { .amf="${this.amf}" .examples="${this.examples}" mediatype="${this.mediaType}" - minHeight="600px" + minHeight="${this.minHeight}" >` : html`

Examples not found in selected method

`; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index b780c4d..53a6651 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -1,6 +1,6 @@ /* eslint-disable no-plusplus */ /* eslint-disable class-methods-use-this */ -import { LitElement, html } from 'lit-element'; +import {LitElement, html, css, unsafeCSS} from 'lit-element'; import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js'; import { ExampleGenerator } from '@api-components/api-example-generator'; import '@advanced-rest-client/arc-icons/arc-icon.js'; @@ -34,7 +34,14 @@ import elementStyles from './styles/Document.js'; */ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { get styles() { - return elementStyles; + return [ + css` + .customRedererMinHeight { + min-height: ${unsafeCSS(this.minHeight)}; + } + `, + elementStyles + ]; } static get properties() { @@ -121,7 +128,10 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * If enabled, the example panel would be closed */ _collapseExamplePanel: { type: Boolean, reflect: true }, - minHeight: '', + /** + * If has, the example panel would have a minHeigh setted + */ + minHeight: { type: String }, }; } @@ -686,11 +696,13 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; + const customRedererMinHeight = this.minHeight ? 'customRedererMinHeight' : ''; + return examples.map((item) => html`
${this._titleTemplate(item)} ${this._descriptionTemplate(item)} -
+
Date: Fri, 25 Feb 2022 17:10:45 -0300 Subject: [PATCH 04/16] change dynamic to maxHeight --- README.md | 2 +- demo/index.js | 4 ++-- src/ApiResourceExampleDocument.js | 26 +++++++++++++------------- src/styles/Document.js | 6 ++++-- 4 files changed, 20 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 33ddf70..64f897b 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ npm test |--------------------|-----------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | examples | object[] | yes | - | AMF model for examples. It can be Payload shape, list of Payload shapes, or any shape. | | mediaType | string | yes | - | Examples media type | -| minHeight | string | no | 500px | Minimium height of the example panel | +| maxHeight | string | no | 500px | Max height of the example panel | | typeName | string | no | - | Type (model) name for which examples are generated for. This is used by RAML to XML examples processor to wrap the example in type name. If missing this wrapping is omitted. | | payloadId | string | no | - | Rendered payload ID (if any) to associate examples with the payload. | | _renderedExamples | Example[] | no | - | Computed in a debouncer examples to render. | diff --git a/demo/index.js b/demo/index.js index 12a47fa..4afeb75 100644 --- a/demo/index.js +++ b/demo/index.js @@ -98,7 +98,7 @@ class ApiDemo extends ApiDemoPage { const mediaType = this.mediaTypes[index].label; const body = this.payloads[index]; this.hasExamples = true; - this.minHeight = '200px'; + this.maxHeight = '100px'; this.examples = body; this.mediaType = mediaType; } @@ -127,7 +127,7 @@ class ApiDemo extends ApiDemoPage { .amf="${this.amf}" .examples="${this.examples}" mediatype="${this.mediaType}" - minHeight="${this.minHeight}" + maxHeight="${this.maxHeight}" >` : html`

Examples not found in selected method

`; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 53a6651..7a90238 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -36,8 +36,8 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { get styles() { return [ css` - .customRedererMinHeight { - min-height: ${unsafeCSS(this.minHeight)}; + .customMaxHeight { + max-height: ${unsafeCSS(this.maxHeight)}; } `, elementStyles @@ -129,9 +129,9 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ _collapseExamplePanel: { type: Boolean, reflect: true }, /** - * If has, the example panel would have a minHeigh setted + * If has, the example panel would have a maxHeight setted */ - minHeight: { type: String }, + maxHeight: { type: String }, }; } @@ -328,21 +328,21 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { })); } - get minHeight() { - return this._minHeight; + get maxHeight() { + return this._maxHeight; } /** * @param {string} value */ - set minHeight(value) { - const old = this._minHeight; + set maxHeight(value) { + const old = this._maxHeight; if (old === value) { return; } - this._minHeight = value; - this.requestUpdate('minHeight', old); - this.dispatchEvent(new CustomEvent('min-height-changed', { + this._maxHeight = value; + this.requestUpdate('maxHeight', old); + this.dispatchEvent(new CustomEvent('max-height-changed', { composed: true, detail: { value @@ -696,13 +696,13 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; - const customRedererMinHeight = this.minHeight ? 'customRedererMinHeight' : ''; + const customRedererMaxHeight = this.maxHeight ? 'customMaxHeight' : 'defaultMaxHeight'; return examples.map((item) => html`
${this._titleTemplate(item)} ${this._descriptionTemplate(item)} -
+
Date: Fri, 25 Feb 2022 21:00:32 -0300 Subject: [PATCH 05/16] fix test --- src/ApiResourceExampleDocument.d.ts | 4 ++-- test/api-resource-example-document.test.js | 18 ++++++++++++++---- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/ApiResourceExampleDocument.d.ts b/src/ApiResourceExampleDocument.d.ts index 3871edc..84a0ee8 100644 --- a/src/ApiResourceExampleDocument.d.ts +++ b/src/ApiResourceExampleDocument.d.ts @@ -46,10 +46,10 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { */ mediaType: string; /** - * Minimium height of the example panel + * Maximum height of the example panel * @attribute */ - minHeight: string; + maxHeight: string; /** * Type (model) name for which examples are generated for. * This is used by RAML to XML examples processor to wrap the example diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 88dc131..85b529a 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -560,15 +560,25 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(expandIconCollapsed); }); - it('should change min-height panel when minHeight is setted', async () => { + it('should change max-height panel when maxHeight is setted', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; - element.minHeight = '300px'; + element.maxHeight = '300px'; await aTimeout(100); - const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer')); + const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.customMaxHeight')); - assert.equal(wrraperExample.style.minHeight, '300px'); + assert.isDefined(wrraperExample); + }); + + it('should don`t have max-height panel when maxHeight is setted', async () => { + const payloads = getPayload(element, amf, '/IncludedInline', 'post'); + element.examples = payloads; + + await aTimeout(100); + const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.defaultMaxHeight')); + + assert.isDefined(wrraperExample); }); it('should expand example panel on click ', async () => { From 9b87795ae31d204cafc4eaaddd56d51e6e664b9b Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 25 Feb 2022 21:09:06 -0300 Subject: [PATCH 06/16] improve test --- test/api-resource-example-document.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 85b529a..ad95e01 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -560,7 +560,7 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(expandIconCollapsed); }); - it('should change max-height panel when maxHeight is setted', async () => { + it('should change panel max-height when maxHeight property is settled with custom styles', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; element.maxHeight = '300px'; @@ -571,7 +571,7 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(wrraperExample); }); - it('should don`t have max-height panel when maxHeight is setted', async () => { + it('should have max-height default when maxHeight property is not custom', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; From 6d822ffb899023f6d9098fe4615c8db212650324 Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 25 Feb 2022 21:11:12 -0300 Subject: [PATCH 07/16] improve wording --- test/api-resource-example-document.test.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index ad95e01..00c39dd 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -560,7 +560,7 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(expandIconCollapsed); }); - it('should change panel max-height when maxHeight property is settled with custom styles', async () => { + it('should have panel max-height when maxHeight property is settled with custom styles', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; element.maxHeight = '300px'; @@ -571,7 +571,7 @@ describe('ApiResourceExampleDocument', () => { assert.isDefined(wrraperExample); }); - it('should have max-height default when maxHeight property is not custom', async () => { + it('should have the maximum height that the client sets in the maxHight prop', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; From 717628ad0812c4d2753997a2baf282388ad5a6ba Mon Sep 17 00:00:00 2001 From: alexperez Date: Fri, 25 Feb 2022 21:13:36 -0300 Subject: [PATCH 08/16] rename var --- src/ApiResourceExampleDocument.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 7a90238..1ff7d14 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -696,13 +696,13 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; - const customRedererMaxHeight = this.maxHeight ? 'customMaxHeight' : 'defaultMaxHeight'; + const classMaxHeight = this.maxHeight ? 'customMaxHeight' : 'defaultMaxHeight'; return examples.map((item) => html`
${this._titleTemplate(item)} ${this._descriptionTemplate(item)} -
+
Date: Fri, 25 Feb 2022 21:22:00 -0300 Subject: [PATCH 09/16] 4.3.6 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2ecf8d0..0a0464c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@api-components/api-resource-example-document", - "version": "4.3.5", + "version": "4.3.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index f75e34f..7028e1b 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@api-components/api-resource-example-document", "description": "A viewer for examples in a resource based on AMF model", - "version": "4.3.5", + "version": "4.3.6", "license": "Apache-2.0", "main": "index.js", "module": "index.js", From fca603f0e8c761c165dd12adbecdc474f1db28dc Mon Sep 17 00:00:00 2001 From: alexperez Date: Tue, 1 Mar 2022 19:34:22 -0300 Subject: [PATCH 10/16] Code review --- src/ApiResourceExampleDocument.js | 6 ------ src/styles/Document.js | 6 +++--- 2 files changed, 3 insertions(+), 9 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 1ff7d14..77a4b22 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -342,12 +342,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { } this._maxHeight = value; this.requestUpdate('maxHeight', old); - this.dispatchEvent(new CustomEvent('max-height-changed', { - composed: true, - detail: { - value - } - })); } get _collapseExamplePanel() { diff --git a/src/styles/Document.js b/src/styles/Document.js index 0eb7e77..5815778 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -22,10 +22,10 @@ export default css` font-size: 1rem; display: var(--api-example-title-display, block); min-height: 36px; - padding: 0 10px 0px 10px; + padding: 0 10px 0 10px; background-color: var(--api-example-title-background-color, #ff9800); color: var(--api-example-title-color, #000); - border-radius: 0px 2px 0px 0px; + border-radius: 0 2px 0 0; display: flex; justify-content: space-between; align-items: center; @@ -61,7 +61,7 @@ export default css` } .defaultMaxHeight { - max-height: 500px + max-height: var(--api-resource-example-document-max-height, 500px); } .collapse { From 75607e52806a83cf4740dab27d4ce950f8f7212f Mon Sep 17 00:00:00 2001 From: alexperez Date: Tue, 1 Mar 2022 19:51:30 -0300 Subject: [PATCH 11/16] Code review --- src/ApiResourceExampleDocument.js | 6 +++--- src/styles/Document.js | 5 +---- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 77a4b22..e4784d3 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -36,8 +36,8 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { get styles() { return [ css` - .customMaxHeight { - max-height: ${unsafeCSS(this.maxHeight)}; + .renderer.customMaxHeight { + max-height: var(--api-resource-example-document-max-height, ${unsafeCSS(this.maxHeight)}); } `, elementStyles @@ -690,7 +690,7 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; - const classMaxHeight = this.maxHeight ? 'customMaxHeight' : 'defaultMaxHeight'; + const classMaxHeight = this.maxHeight ? 'customMaxHeight' : ''; return examples.map((item) => html`
diff --git a/src/styles/Document.js b/src/styles/Document.js index 5815778..526e2bd 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -54,16 +54,13 @@ export default css` .renderer { padding: 8px 0; display: flex; + max-height: var(--api-resource-example-document-max-height, 500px); -webkit-transition: all 0.4s 0.1s ease-in-out; -moz-transition: all 0.4s 0.1s ease-in-out; -o-transition: all 0.4s 0.1s ease-in-out; transition: all 0.4s 0.1s ease-in-out; } -.defaultMaxHeight { - max-height: var(--api-resource-example-document-max-height, 500px); -} - .collapse { max-height: 0; margin: 0; From 75dafc071142ea2b47d6707382153f0d2de6e186 Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Mar 2022 15:36:01 -0300 Subject: [PATCH 12/16] Use css variables --- demo/index.js | 2 -- src/ApiResourceExampleDocument.js | 34 +++---------------------------- src/styles/Document.js | 2 +- 3 files changed, 4 insertions(+), 34 deletions(-) diff --git a/demo/index.js b/demo/index.js index 4afeb75..b041a0f 100644 --- a/demo/index.js +++ b/demo/index.js @@ -98,7 +98,6 @@ class ApiDemo extends ApiDemoPage { const mediaType = this.mediaTypes[index].label; const body = this.payloads[index]; this.hasExamples = true; - this.maxHeight = '100px'; this.examples = body; this.mediaType = mediaType; } @@ -127,7 +126,6 @@ class ApiDemo extends ApiDemoPage { .amf="${this.amf}" .examples="${this.examples}" mediatype="${this.mediaType}" - maxHeight="${this.maxHeight}" >` : html`

Examples not found in selected method

`; } diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index e4784d3..5ed02be 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -1,6 +1,6 @@ /* eslint-disable no-plusplus */ /* eslint-disable class-methods-use-this */ -import {LitElement, html, css, unsafeCSS} from 'lit-element'; +import {LitElement, html} from 'lit-element'; import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js'; import { ExampleGenerator } from '@api-components/api-example-generator'; import '@advanced-rest-client/arc-icons/arc-icon.js'; @@ -34,14 +34,7 @@ import elementStyles from './styles/Document.js'; */ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { get styles() { - return [ - css` - .renderer.customMaxHeight { - max-height: var(--api-resource-example-document-max-height, ${unsafeCSS(this.maxHeight)}); - } - `, - elementStyles - ]; + return elementStyles; } static get properties() { @@ -128,10 +121,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * If enabled, the example panel would be closed */ _collapseExamplePanel: { type: Boolean, reflect: true }, - /** - * If has, the example panel would have a maxHeight setted - */ - maxHeight: { type: String }, }; } @@ -328,22 +317,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { })); } - get maxHeight() { - return this._maxHeight; - } - - /** - * @param {string} value - */ - set maxHeight(value) { - const old = this._maxHeight; - if (old === value) { - return; - } - this._maxHeight = value; - this.requestUpdate('maxHeight', old); - } - get _collapseExamplePanel() { return this.__collapseExamplePanel } @@ -690,13 +663,12 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; - const classMaxHeight = this.maxHeight ? 'customMaxHeight' : ''; return examples.map((item) => html`
${this._titleTemplate(item)} ${this._descriptionTemplate(item)} -
+
Date: Wed, 2 Mar 2022 15:37:50 -0300 Subject: [PATCH 13/16] Use css variables --- demo/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/demo/index.js b/demo/index.js index b041a0f..b5f9b75 100644 --- a/demo/index.js +++ b/demo/index.js @@ -125,8 +125,7 @@ class ApiDemo extends ApiDemoPage { html`` : + mediatype="${this.mediaType}">` : html`

Examples not found in selected method

`; } From b234e3ba8ee3bdbd5926864d28734f8090b4122c Mon Sep 17 00:00:00 2001 From: alexperez Date: Wed, 2 Mar 2022 15:39:55 -0300 Subject: [PATCH 14/16] Use css variables --- src/ApiResourceExampleDocument.d.ts | 5 ----- src/ApiResourceExampleDocument.js | 3 +-- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/src/ApiResourceExampleDocument.d.ts b/src/ApiResourceExampleDocument.d.ts index 84a0ee8..7dcae0b 100644 --- a/src/ApiResourceExampleDocument.d.ts +++ b/src/ApiResourceExampleDocument.d.ts @@ -45,11 +45,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { * @attribute */ mediaType: string; - /** - * Maximum height of the example panel - * @attribute - */ - maxHeight: string; /** * Type (model) name for which examples are generated for. * This is used by RAML to XML examples processor to wrap the example diff --git a/src/ApiResourceExampleDocument.js b/src/ApiResourceExampleDocument.js index 5ed02be..a885a2a 100644 --- a/src/ApiResourceExampleDocument.js +++ b/src/ApiResourceExampleDocument.js @@ -1,6 +1,6 @@ /* eslint-disable no-plusplus */ /* eslint-disable class-methods-use-this */ -import {LitElement, html} from 'lit-element'; +import { LitElement, html } from 'lit-element'; import { AmfHelperMixin } from '@api-components/amf-helper-mixin/amf-helper-mixin.js'; import { ExampleGenerator } from '@api-components/api-example-generator'; import '@advanced-rest-client/arc-icons/arc-icon.js'; @@ -663,7 +663,6 @@ export class ApiResourceExampleDocument extends AmfHelperMixin(LitElement) { let parts = 'content-action-button, code-content-action-button, content-action-button-disabled, '; parts += 'code-content-action-button-disabled content-action-button-active, '; parts += 'code-content-action-button-active, code-wrapper, example-code-wrapper, markdown-html'; - return examples.map((item) => html`
${this._titleTemplate(item)} From 904ba0931e9840065cbebc9aebcb79eb9c81c8aa Mon Sep 17 00:00:00 2001 From: alexperez Date: Thu, 3 Mar 2022 10:20:48 -0300 Subject: [PATCH 15/16] Unit test --- src/styles/Document.js | 2 +- test/api-resource-example-document.test.js | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/styles/Document.js b/src/styles/Document.js index 8d4bdcb..526e2bd 100644 --- a/src/styles/Document.js +++ b/src/styles/Document.js @@ -61,7 +61,7 @@ export default css` transition: all 0.4s 0.1s ease-in-out; } -.renderer.collapse { +.collapse { max-height: 0; margin: 0; overflow: hidden; diff --git a/test/api-resource-example-document.test.js b/test/api-resource-example-document.test.js index 00c39dd..c652946 100644 --- a/test/api-resource-example-document.test.js +++ b/test/api-resource-example-document.test.js @@ -563,22 +563,22 @@ describe('ApiResourceExampleDocument', () => { it('should have panel max-height when maxHeight property is settled with custom styles', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; - element.maxHeight = '300px'; await aTimeout(100); - const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.customMaxHeight')); + const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer')); - assert.isDefined(wrraperExample); + assert.equal(getComputedStyle(wrraperExample).maxHeight, '500px'); }); - it('should have the maximum height that the client sets in the maxHight prop', async () => { + it('should have panel max-height when maxHeight property is settled with custom styles variables', async () => { const payloads = getPayload(element, amf, '/IncludedInline', 'post'); element.examples = payloads; + element.style.setProperty('--api-resource-example-document-max-height', '100px'); await aTimeout(100); - const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.defaultMaxHeight')); + const wrraperExample = /** @type HTMLElement */ (element.shadowRoot.querySelector('.renderer')); - assert.isDefined(wrraperExample); + assert.equal(getComputedStyle(wrraperExample).maxHeight, '100px'); }); it('should expand example panel on click ', async () => { From dd5c00890cc4fbfebf7161f9ba950eb9d4d09900 Mon Sep 17 00:00:00 2001 From: alexperez Date: Thu, 3 Mar 2022 10:32:49 -0300 Subject: [PATCH 16/16] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 64f897b..7c160bc 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,6 @@ npm test |--------------------|-----------|----------|---------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | examples | object[] | yes | - | AMF model for examples. It can be Payload shape, list of Payload shapes, or any shape. | | mediaType | string | yes | - | Examples media type | -| maxHeight | string | no | 500px | Max height of the example panel | | typeName | string | no | - | Type (model) name for which examples are generated for. This is used by RAML to XML examples processor to wrap the example in type name. If missing this wrapping is omitted. | | payloadId | string | no | - | Rendered payload ID (if any) to associate examples with the payload. | | _renderedExamples | Example[] | no | - | Computed in a debouncer examples to render. |