openapi-explorer 2.2.701 → 2.2.703
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/dist/browser/openapi-explorer.min.js +2 -2
- package/dist/es/components/api-request.js +45 -21
- package/dist/es/components/api-response.js +4 -4
- package/dist/es/components/request-form-table.js +4 -4
- package/dist/es/components/schema-table.js +4 -4
- package/dist/es/components/schema-tree.js +4 -4
- package/dist/es/templates/components-template.js +2 -2
- package/dist/es/templates/endpoint-template.js +3 -3
- package/dist/es/templates/expanded-endpoint-template.js +3 -3
- package/dist/es/templates/overview-template.js +2 -2
- package/dist/es/templates/security-scheme-template.js +2 -2
- package/dist/es/templates/server-template.js +2 -2
- package/dist/es/utils/common-utils.js +33 -0
- package/dist/lib/components/api-request.js +45 -21
- package/dist/lib/components/api-response.js +4 -4
- package/dist/lib/components/request-form-table.js +4 -4
- package/dist/lib/components/schema-table.js +4 -4
- package/dist/lib/components/schema-tree.js +4 -4
- package/dist/lib/templates/components-template.js +2 -2
- package/dist/lib/templates/endpoint-template.js +7 -7
- package/dist/lib/templates/expanded-endpoint-template.js +3 -3
- package/dist/lib/templates/overview-template.js +2 -2
- package/dist/lib/templates/security-scheme-template.js +2 -2
- package/dist/lib/templates/server-template.js +2 -2
- package/dist/lib/utils/common-utils.js +36 -0
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { LitElement, html } from 'lit';
|
|
2
|
-
import { marked } from 'marked';
|
|
3
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
4
3
|
import { keyed } from 'lit/directives/keyed.js';
|
|
5
4
|
import formatXml from 'xml-but-prettier';
|
|
6
5
|
import { getI18nText } from '../languages/index.js';
|
|
7
6
|
import { schemaInObjectNotation, getTypeInfo, generateExample, isPatternProperty } from '../utils/schema-utils.js';
|
|
7
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
8
8
|
import './schema-tree.js';
|
|
9
9
|
import getRequestFormTable from './request-form-table.js';
|
|
10
10
|
import './tag-input.js';
|
|
@@ -228,7 +228,7 @@ export default class ApiRequest extends LitElement {
|
|
|
228
228
|
this.computeCurlSyntax();
|
|
229
229
|
}}"> ${paramSchema.allowedValues.map(allowedValue => html` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[param.name]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || html` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" @input="${() => {
|
|
230
230
|
this.computeCurlSyntax();
|
|
231
|
-
}}" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, paramSchema.type)} </td> ${this.renderStyle === 'focused' ? html` <td colspan="2" style="vertical-align:top"> ${param.description ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(
|
|
231
|
+
}}" placeholder="${paramSchema.example || defaultVal || ''}" class="request-param" part="textbox textbox-param" data-ptype="${paramLocation}" data-pname="${param.name}" data-default="${Array.isArray(defaultVal) ? defaultVal.join('~|~') : defaultVal}" data-array="false" @keyup="${this.requestParamFunction}" .value="${this.fillRequestWithDefault === 'true' ? defaultVal : ''}">` : ''} ${this.exampleListTemplate.call(this, param, paramSchema.type)} </td> ${this.renderStyle === 'focused' ? html` <td colspan="2" style="vertical-align:top"> ${param.description ? html` <div class="param-description" style="margin-top:1rem"> ${unsafeHTML(toMarkdown(param.description))} </div>` : ''} ${paramSchema.constraints.length || displayAllowedValuesHints || paramSchema.pattern ? html` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? html`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? html` <div class="tooltip tooltip-replace" style="cursor:pointer;max-width:100%;display:flex"> <div style="white-space:nowrap;font-weight:700;margin-right:2px">Pattern: </div> <div style="white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden">${paramSchema.pattern}</div> <br> <div class="tooltip-text" style="position:absolute;display:block">${paramSchema.pattern}</div> </div> ` : ''} ${(_paramSchema$allowedV = paramSchema.allowedValues) === null || _paramSchema$allowedV === void 0 ? void 0 : _paramSchema$allowedV.map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" class="${this.allowTry === 'true' ? '' : 'inactive-link'}" data-type="${paramSchema.type === 'array' ? 'array' : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
|
|
232
232
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
|
|
233
233
|
if (inputEl) {
|
|
234
234
|
inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
|
|
@@ -252,7 +252,7 @@ export default class ApiRequest extends LitElement {
|
|
|
252
252
|
renderLongFormatExamples(exampleList, paramType, paramName) {
|
|
253
253
|
return html` <ul style="margin-block-start:.25em"> ${exampleList.map(example => {
|
|
254
254
|
var _example$exampleSumma, _example$exampleDescr;
|
|
255
|
-
return html` <li> ${this.renderExample(example, paramType, paramName)} ${((_example$exampleSumma = example.exampleSummary) === null || _example$exampleSumma === void 0 ? void 0 : _example$exampleSumma.length) > 0 ? html`<span>(${example.exampleSummary})</span>` : ''} ${((_example$exampleDescr = example.exampleDescription) === null || _example$exampleDescr === void 0 ? void 0 : _example$exampleDescr.length) > 0 ? html`<p>${unsafeHTML(
|
|
255
|
+
return html` <li> ${this.renderExample(example, paramType, paramName)} ${((_example$exampleSumma = example.exampleSummary) === null || _example$exampleSumma === void 0 ? void 0 : _example$exampleSumma.length) > 0 ? html`<span>(${example.exampleSummary})</span>` : ''} ${((_example$exampleDescr = example.exampleDescription) === null || _example$exampleDescr === void 0 ? void 0 : _example$exampleDescr.length) > 0 ? html`<p>${unsafeHTML(toMarkdown(example.exampleDescription))}</p>` : ''} </li>`;
|
|
256
256
|
})} </ul>`;
|
|
257
257
|
}
|
|
258
258
|
|
|
@@ -362,7 +362,7 @@ export default class ApiRequest extends LitElement {
|
|
|
362
362
|
this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
|
|
363
363
|
}
|
|
364
364
|
const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
|
|
365
|
-
reqBodyDefaultHtml = html` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : html` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(
|
|
365
|
+
reqBodyDefaultHtml = html` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : html` <select aria-label="request body example" style="min-width:100px;max-width:100%;margin-bottom:-1px" @change="${e => this.onSelectExample(e)}"> ${reqBodyExamples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === this.selectedRequestBodyExample}"> ${v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary ? v.exampleSummary : v.exampleId} </option>`)} </select>`} ${displayedBodyExample ? html` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(toMarkdown(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
|
|
366
366
|
this.computeCurlSyntax();
|
|
367
367
|
}}" class="textarea request-body-param-user-input" part="textarea textarea-param" spellcheck="false" data-ptype="${reqBody.mimeType}" data-default="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}" data-default-format="${displayedBodyExample.exampleFormat}" style="width:100%;resize:vertical" .value="${this.fillRequestWithDefault === 'true' ? displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8) : ''}"></textarea> </slot> <textarea class="textarea is-hidden request-body-param ${reqBody.mimeType.substring(reqBody.mimeType.indexOf('/') + 1)}" spellcheck="false" data-ptype="${reqBody.mimeType}" style="width:100%;resize:vertical;display:none" .value="${displayedBodyExample.exampleFormat === 'text' ? displayedBodyExample.exampleValue : JSON.stringify(displayedBodyExample.exampleValue, null, 8)}"></textarea> </div>` : ''} </div> `;
|
|
368
368
|
} else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
|
|
@@ -398,7 +398,7 @@ export default class ApiRequest extends LitElement {
|
|
|
398
398
|
elementId: this.elementId
|
|
399
399
|
};
|
|
400
400
|
}
|
|
401
|
-
return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(
|
|
401
|
+
return html` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${getI18nText('operations.request-body')} ${this.request_body.required ? html`<span class="mono-font" style="color:var(--red)">*</span>` : ''} <span style="font-weight:400;margin-left:5px"> ${this.selectedRequestBodyType}</span> <span style="flex:1"></span> ${reqBodyTypeSelectorHtml} </div> ${this.request_body.description ? html`<div class="m-markdown" style="margin-bottom:12px">${unsafeHTML(toMarkdown(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? html` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
|
|
402
402
|
if (e.target.tagName.toLowerCase() === 'button') {
|
|
403
403
|
this.activeSchemaTab = e.target.dataset.tab;
|
|
404
404
|
}
|
|
@@ -415,7 +415,7 @@ export default class ApiRequest extends LitElement {
|
|
|
415
415
|
// data-ptype="${mimeType}"
|
|
416
416
|
// style="width:100%"
|
|
417
417
|
// >${exampleValue}</textarea>
|
|
418
|
-
// ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(
|
|
418
|
+
// ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(toMarkdown(schema.description))}</span>` : ''}
|
|
419
419
|
// `;
|
|
420
420
|
// }
|
|
421
421
|
|
|
@@ -470,6 +470,12 @@ export default class ApiRequest extends LitElement {
|
|
|
470
470
|
pathParameterMap[el.dataset.pname] = el.value;
|
|
471
471
|
pathUrl = pathUrl.replace(`{${el.dataset.pname}}`, encodeURIComponent(el.value) || '-');
|
|
472
472
|
});
|
|
473
|
+
const missingPathParameterValue = pathParamEls.find(el => !el.value);
|
|
474
|
+
if (missingPathParameterValue) {
|
|
475
|
+
const error = Error(`All path parameters are required and a valid value was not found for the parameter: '${missingPathParameterValue.dataset.pname}'.`);
|
|
476
|
+
error.code = 'MissingPathParameter';
|
|
477
|
+
throw error;
|
|
478
|
+
}
|
|
473
479
|
|
|
474
480
|
// Handle relative serverUrls
|
|
475
481
|
if (!pathUrl.startsWith('http')) {
|
|
@@ -688,15 +694,19 @@ export default class ApiRequest extends LitElement {
|
|
|
688
694
|
};
|
|
689
695
|
}
|
|
690
696
|
computeCurlSyntax(headerOverride) {
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
697
|
+
try {
|
|
698
|
+
const {
|
|
699
|
+
fetchOptions,
|
|
700
|
+
fetchUrl,
|
|
701
|
+
curlParts
|
|
702
|
+
} = this.recomputeFetchOptions();
|
|
703
|
+
const curl = `curl -X ${this.method.toUpperCase()} "${fetchUrl.toString()}"`;
|
|
704
|
+
const headers = headerOverride !== null && headerOverride !== void 0 ? headerOverride : fetchOptions.headers;
|
|
705
|
+
const curlHeaders = [...headers.entries()].reduce((acc, [key, value]) => `${acc} \\\n -H "${key}: ${value}"`, '');
|
|
706
|
+
this.curlSyntax = `${curl}${curlHeaders}${curlParts.data}${curlParts.form}`;
|
|
707
|
+
} catch (error) {
|
|
708
|
+
/* There was an explicit issue and likely it was because the fetch options threw. */
|
|
709
|
+
}
|
|
700
710
|
// We don't need to request and update because we are watch the curlSyntax property in this lit element
|
|
701
711
|
// this.requestUpdate();
|
|
702
712
|
}
|
|
@@ -704,12 +714,26 @@ export default class ApiRequest extends LitElement {
|
|
|
704
714
|
// onExecuteButtonClicked
|
|
705
715
|
async onTryClick() {
|
|
706
716
|
const tryBtnEl = this.querySelectorAll('.btn-execute')[0];
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
717
|
+
let fetchOptions;
|
|
718
|
+
let fetchUrl;
|
|
719
|
+
let path;
|
|
720
|
+
let query;
|
|
721
|
+
try {
|
|
722
|
+
({
|
|
723
|
+
fetchOptions,
|
|
724
|
+
fetchUrl,
|
|
725
|
+
path,
|
|
726
|
+
query
|
|
727
|
+
} = this.recomputeFetchOptions());
|
|
728
|
+
} catch (error) {
|
|
729
|
+
this.responseMessage = error.message;
|
|
730
|
+
this.responseStatus = 'error';
|
|
731
|
+
this.responseUrl = '';
|
|
732
|
+
this.responseHeaders = '';
|
|
733
|
+
this.responseText = error.message;
|
|
734
|
+
this.activeResponseTab = 'response';
|
|
735
|
+
return;
|
|
736
|
+
}
|
|
713
737
|
this.responseIsBlob = false;
|
|
714
738
|
this.respContentDisposition = '';
|
|
715
739
|
if (this.responseBlobUrl) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import { marked } from 'marked';
|
|
3
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
4
3
|
import { schemaInObjectNotation, generateExample, getTypeInfo } from '../utils/schema-utils.js';
|
|
4
|
+
import { toMarkdown } from '../utils/common-utils.js';
|
|
5
5
|
import { getI18nText } from '../languages/index.js';
|
|
6
6
|
import FontStyles from '../styles/font-styles.js';
|
|
7
7
|
import FlexStyles from '../styles/flex-styles.js';
|
|
@@ -128,7 +128,7 @@ export default class ApiResponse extends LitElement {
|
|
|
128
128
|
} else {
|
|
129
129
|
this.selectedMimeType = undefined;
|
|
130
130
|
}
|
|
131
|
-
}}" class="m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}" part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style="margin:8px 4px 0 0;text-transform:capitalize"> ${respStatus} </button>`}`)} </div> ${Object.keys(this.responses).map(status => html` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${unsafeHTML(
|
|
131
|
+
}}" class="m-btn small ${this.selectedStatus === respStatus ? 'primary' : ''}" part="btn--resp ${this.selectedStatus === respStatus ? 'btn-fill--resp' : 'btn-outline--resp'} btn-response-status" style="margin:8px 4px 0 0;text-transform:capitalize"> ${respStatus} </button>`}`)} </div> ${Object.keys(this.responses).map(status => html` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${unsafeHTML(toMarkdown(this.responses[status] && this.responses[status].description || ''))}</span> ${this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0 ? html`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}` : ''} </div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0 ? '' : html` <div class="tab-panel col"> <div class="tab-buttons row" @click="${e => {
|
|
132
132
|
if (e.target.tagName.toLowerCase() === 'button') {
|
|
133
133
|
this.activeSchemaTab = e.target.dataset.tab;
|
|
134
134
|
}
|
|
@@ -140,7 +140,7 @@ export default class ApiResponse extends LitElement {
|
|
|
140
140
|
const typeData = getTypeInfo(v, {
|
|
141
141
|
enableExampleGeneration: true
|
|
142
142
|
});
|
|
143
|
-
return html` <tr> <td style="padding:8px;vertical-align:baseline;min-width:160px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td class="${(typeData === null || typeData === void 0 ? void 0 : typeData.cssType) || ''}" style="padding:4px;vertical-align:baseline;min-width:100px;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.format) || (typeData === null || typeData === void 0 ? void 0 : typeData.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${unsafeHTML(
|
|
143
|
+
return html` <tr> <td style="padding:8px;vertical-align:baseline;min-width:160px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${v.name || ''} </td> <td class="${(typeData === null || typeData === void 0 ? void 0 : typeData.cssType) || ''}" style="padding:4px;vertical-align:baseline;min-width:100px;padding:0 5px;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(typeData === null || typeData === void 0 ? void 0 : typeData.format) || (typeData === null || typeData === void 0 ? void 0 : typeData.type) || ''} </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> <div class="m-markdown-small regular-font">${unsafeHTML(toMarkdown(v.description || ''))}</div> </td> <td style="padding:8px;vertical-align:baseline;border-top:1px solid var(--light-border-color);text-overflow:ellipsis"> ${(_ref = (_typeData$example = typeData === null || typeData === void 0 ? void 0 : typeData.example) !== null && _typeData$example !== void 0 ? _typeData$example : typeData === null || typeData === void 0 ? void 0 : typeData.default) !== null && _ref !== void 0 ? _ref : ''} </td> </tr> `;
|
|
144
144
|
})} </table>`;
|
|
145
145
|
}
|
|
146
146
|
mimeTypeDropdownTemplate(mimeTypes) {
|
|
@@ -159,7 +159,7 @@ export default class ApiResponse extends LitElement {
|
|
|
159
159
|
if (!mimeRespDetails) {
|
|
160
160
|
return html` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
|
|
161
161
|
}
|
|
162
|
-
return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(
|
|
162
|
+
return html` ${mimeRespDetails.examples.length === 1 ? html` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(toMarkdown(mimeRespDetails.examples[0].exampleDescription || ''))} </div>` : ''} <syntax-highlighter class="example-panel generic-tree pad-top-8" mime-type="${mimeRespDetails.examples[0].exampleType}" .content="${mimeRespDetails.examples[0].exampleValue}">` : html` <span class="example-panel generic-tree ${this.renderStyle === 'read' ? 'border pad-8-16' : 'border-top pad-top-8'}"> <select aria-label="response body example" @change="${e => this.onSelectExample(e)}"> ${mimeRespDetails.examples.map(v => html`<option value="${v.exampleId}" ?selected="${v.exampleId === mimeRespDetails.selectedExample}"> ${!v.exampleSummary || v.exampleSummary.length > 80 ? v.exampleId : v.exampleSummary} </option>`)} </select> ${mimeRespDetails.examples.map(v => html` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? html`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? html`<div class="m-markdown-small" style="padding:4px 0"> ${unsafeHTML(toMarkdown(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
|
|
163
163
|
}
|
|
164
164
|
mimeSchemaTemplate(mimeRespDetails) {
|
|
165
165
|
if (!mimeRespDetails) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable indent */
|
|
2
2
|
import { html } from 'lit';
|
|
3
|
-
import {
|
|
3
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
4
4
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
5
5
|
import { isPatternProperty } from '../utils/schema-utils.js';
|
|
6
6
|
import { map } from 'lit/directives/map.js';
|
|
@@ -34,7 +34,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
|
|
|
34
34
|
return undefined;
|
|
35
35
|
}
|
|
36
36
|
const displayLine = [description].filter(v => v).join(' ');
|
|
37
|
-
return html` ${newSchemaLevel >= 0 && key ? html` <tr class="complex-object-display ${data['::type']}" data-obj="${keyLabel}"> <td class="key ${data['::deprecated'] ? 'deprecated' : ''}"> <div style="display:flex;align-items:center"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? html`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${unsafeHTML(
|
|
37
|
+
return html` ${newSchemaLevel >= 0 && key ? html` <tr class="complex-object-display ${data['::type']}" data-obj="${keyLabel}"> <td class="key ${data['::deprecated'] ? 'deprecated' : ''}"> <div style="display:flex;align-items:center"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? html`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : html`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${unsafeHTML(toMarkdown(displayLine))}</td> </tr>` : html`${data['::type'] === 'array' && dataType === 'array' ? html`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? html`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : html`${Object.keys(data).map(dataKey => {
|
|
38
38
|
var _data$dataKey;
|
|
39
39
|
return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? html`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '';
|
|
40
40
|
})}`}`;
|
|
@@ -98,13 +98,13 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
|
|
|
98
98
|
this.requestUpdate();
|
|
99
99
|
}
|
|
100
100
|
};
|
|
101
|
-
const arrayIterator = map(range(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => html` <tr> ${inputFieldKeyLabel.call(this, key.startsWith('::OPTION'), keyLabel, keyDescr, dataType, deprecated, isRequired, schemaTitle, format || type, rowGenerator)} ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(
|
|
101
|
+
const arrayIterator = map(range(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => html` <tr> ${inputFieldKeyLabel.call(this, key.startsWith('::OPTION'), keyLabel, keyDescr, dataType, deprecated, isRequired, schemaTitle, format || type, rowGenerator)} ${dataType === 'array' ? getArrayFormField.call(this, keyLabel, example, defaultValue, format, rowGenerator) : ''} ${dataType !== 'array' ? getPrimitiveFormField.call(this, keyLabel, example, defaultValue, format, options, rowGenerator) : ''} <td> ${description ? html`<div class="param-description">${unsafeHTML(toMarkdown(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? html` <div class="param-constraint"> ${pattern ? html`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? html`<span style="font-weight:700">Constraints: </span>${constraints.join(', ')}<br>` : ''} ${allowedValues === null || allowedValues === void 0 ? void 0 : allowedValues.filter(v => v !== '').map((v, i) => html` ${i > 0 ? '|' : html`<span style="font-weight:700">Allowed: </span>`} ${html` <a part="anchor anchor-param-constraint" data-type="${type === 'array' ? type : 'string'}" data-enum="${v === null || v === void 0 ? void 0 : v.trim()}" @click="${e => {
|
|
102
102
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
|
|
103
103
|
if (inputEl) {
|
|
104
104
|
inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
|
|
105
105
|
}
|
|
106
106
|
this.computeCurlSyntax();
|
|
107
|
-
}}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? html`<tr class="form-parameter-description"> <td> </td> <td colspan="2" style="margin-top:0;padding:0 5px 8px 5px"> <span class="m-markdown-small">${unsafeHTML(
|
|
107
|
+
}}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? html`<tr class="form-parameter-description"> <td> </td> <td colspan="2" style="margin-top:0;padding:0 5px 8px 5px"> <span class="m-markdown-small">${unsafeHTML(toMarkdown(schemaDescription || ''))}</span> ${example ? html`<span> <span style="font-weight:700"> Example: </span> ${type === 'array' ? '[ ' : ''} <a part="anchor anchor-param-example" data-example-type="${type === 'array' ? type : 'string'}" data-example="${Array.isArray(example) && example.join('~|~') || example || ''}" @click="${e => {
|
|
108
108
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
|
|
109
109
|
if (inputEl) {
|
|
110
110
|
inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import {
|
|
2
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
3
3
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
4
4
|
import FontStyles from '../styles/font-styles.js';
|
|
5
5
|
import SchemaStyles from '../styles/schema-styles.js';
|
|
@@ -65,7 +65,7 @@ export default class SchemaTable extends LitElement {
|
|
|
65
65
|
keyLabelMaxCharacterLength,
|
|
66
66
|
typeMaxCharacterLength
|
|
67
67
|
} = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
|
|
68
|
-
return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(
|
|
68
|
+
return html` ${displayLine ? html`<span class="m-markdown" style="padding-bottom:8px"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : ''} <style>.table .key{width:${Math.max(240, (keyLabelMaxCharacterLength || 0) * 6) + 8}px;max-width:Min(400px,75%)}.table .key-type{width:${Math.max(150, (typeMaxCharacterLength || 0) * 6) + 8}px;max-width:25%}</style> <div class="table ${this.interactive ? 'interactive' : ''}"> <div style="border:1px solid var(--light-border-color)"> <div style="display:flex;background-color:var(--bg2);padding:8px 4px;border-bottom:1px solid var(--light-border-color)"> <div class="key" part="schema-key schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg);padding-left:${firstColumnInitialPadding}px"> Field </div> <div class="key-type" part="schema-type schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Type </div> <div class="key-descr" part="schema-description schema-table-header" style="font-family:var(--font-regular);font-weight:700;color:var(--fg)"> Description </div> </div> ${result || ''} </div> </div> `;
|
|
69
69
|
}
|
|
70
70
|
scrollToSchemaComponentByName(componentName) {
|
|
71
71
|
this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
|
|
@@ -163,7 +163,7 @@ export default class SchemaTable extends LitElement {
|
|
|
163
163
|
});
|
|
164
164
|
}
|
|
165
165
|
const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
|
|
166
|
-
const outerResult = html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjType}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${unsafeHTML(
|
|
166
|
+
const outerResult = html` ${newSchemaLevel >= 0 && key ? html` <div class="tr ${newSchemaLevel <= this.schemaExpandLevel ? '' : 'collapsed'} ${data['::type']}" data-obj="${keyLabel}"> <div class="td no-select key ${data['::deprecated'] ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px;cursor:pointer" @click="${e => this.toggleObjectExpand(e, keyLabel)}"> <div style="display:flex;align-items:center"> ${keyLabel || keyDescr ? html`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="xxx-of-key" style="margin-left:-6px">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : html`<span class="key-label" style="display:inline-block;margin-left:-6px">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </div> <div class="td key-type" part="schema-type"> ${displaySchemaLink ? html`<div class="schema-link" style="overflow:hidden;text-overflow:ellipsis" @click="${() => this.scrollToSchemaComponentByName(displaySchemaLink)}"> ${dataType === 'array' ? '[' : ''}<span style="color:var(--secondary-color)">${detailObjType}</span>${dataType === 'array' ? ']' : ''} </div>` : html`<div>${(data['::type'] || '').includes('xxx-of') ? '' : `${dataType === 'array' ? '[' : ''}${detailObjType}${dataType === 'array' ? ']' : ''}`}</div>`} <div class="attributes" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}">${flags['🆁'] || flags['🆆'] || ''}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small">${unsafeHTML(toMarkdown(displayLine))}</span> ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''} </div> </div>` : html` ${data['::type'] === 'array' && dataType === 'array' ? html`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
|
|
167
167
|
return {
|
|
168
168
|
result: outerResult,
|
|
169
169
|
keyLabelMaxCharacterLength: Math.max(innerMaxIndentationLevel, (keyLabel || keyDescr).length),
|
|
@@ -198,7 +198,7 @@ export default class SchemaTable extends LitElement {
|
|
|
198
198
|
keyLabelMaxCharacterLength: newIndentLevel
|
|
199
199
|
};
|
|
200
200
|
}
|
|
201
|
-
const result = html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px"> ${(_keyLabel = keyLabel) !== null && _keyLabel !== void 0 && _keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type" part="schema-type"> <div>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</div> <div class="attributes ${cssType}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">${readOrWriteOnly}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small" style="vertical-align:middle"> ${unsafeHTML(
|
|
201
|
+
const result = html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" part="schema-key" style="padding-left:${leftPadding}px"> ${(_keyLabel = keyLabel) !== null && _keyLabel !== void 0 && _keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>` : key.startsWith('::OPTION') ? html`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : html`${keyLabel ? html`<span class="key-label"> ${keyLabel}</span>` : html`<span class="xxx-of-descr">${schemaTitle}</span>`}`} </div> <div class="td key-type" part="schema-type"> <div>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</div> <div class="attributes ${cssType}" style="font-family:var(--font-mono)" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}">${readOrWriteOnly}</div> </div> <div class="td key-descr" part="schema-description"> <span class="m-markdown-small" style="vertical-align:middle"> ${unsafeHTML(toMarkdown(`${`${schemaTitle || title ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))} </span> ${constraints.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue !== '' ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues.filter(v => v !== null && v !== undefined).join(' ┃ ')}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''} </div> </div> `;
|
|
202
202
|
return {
|
|
203
203
|
result,
|
|
204
204
|
keyLabelMaxCharacterLength: keyLabel.length + newIndentLevel,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import {
|
|
2
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
3
3
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
4
4
|
import { getI18nText } from '../languages/index.js';
|
|
5
5
|
import FontStyles from '../styles/font-styles.js';
|
|
@@ -64,7 +64,7 @@ export default class SchemaTree extends LitElement {
|
|
|
64
64
|
var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
|
|
65
65
|
const title = ((_this$data = this.data) === null || _this$data === void 0 ? void 0 : _this$data['::title']) || ((_this$data2 = this.data) === null || _this$data2 === void 0 ? void 0 : _this$data2['::type']) === 'array' && ((_this$data3 = this.data) === null || _this$data3 === void 0 ? void 0 : (_this$data3$Props = _this$data3['::props']) === null || _this$data3$Props === void 0 ? void 0 : _this$data3$Props['::title']) && `[${(_this$data4 = this.data) === null || _this$data4 === void 0 ? void 0 : (_this$data4$Props = _this$data4['::props']) === null || _this$data4$Props === void 0 ? void 0 : _this$data4$Props['::title']}]`;
|
|
66
66
|
const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
|
|
67
|
-
return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(
|
|
67
|
+
return html` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? html`<span class="m-markdown" style="margin-block-start:0"> ${unsafeHTML(toMarkdown(displayLine))}</span>` : html`<div> </div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? getI18nText('schemas.collapse-desc') : getI18nText('schemas.expand-desc')} </div> </div> ${this.data ? html`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : html`<span class="mono-font" style="color:var(--red)"> ${getI18nText('schemas.schema-missing')} </span>`} </div> `;
|
|
68
68
|
}
|
|
69
69
|
toggleSchemaDescription() {
|
|
70
70
|
this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
|
|
@@ -147,7 +147,7 @@ export default class SchemaTree extends LitElement {
|
|
|
147
147
|
return undefined;
|
|
148
148
|
}
|
|
149
149
|
const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
|
|
150
|
-
return html` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? html`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(
|
|
150
|
+
return html` <div class="tr ${schemaLevel < this.schemaExpandLevel || data['::type'] && data['::type'].startsWith('xxx-of') ? '' : 'collapsed'} ${data['::type'] || 'no-type-info'}"> <div class="td key ${data['::deprecated'] ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? html`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? html`<span class="requiredStar" title="Required"></span>` : ''}: </span>` : ''} ${openBracket} </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${flags['🆁'] && 'Read only attribute' || flags['🆆'] && 'Write only attribute' || ''}"> ${unsafeHTML(toMarkdown(displayLine))} </span> ${this.schemaDescriptionExpanded ? html` ${(_data$Metadata = data['::metadata']) !== null && _data$Metadata !== void 0 && (_data$Metadata$constr = _data$Metadata.constraints) !== null && _data$Metadata$constr !== void 0 && _data$Metadata$constr.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${data['::metadata'].constraints.join(', ')}</div><br>` : ''}` : ''} </div> </div> <div class="inside-bracket-wrapper"> <div class="inside-bracket ${data['::type'] || 'no-type-info'}" style="padding-left:${data['::type'] === 'xxx-of-option' ? 0 : leftPadding}px"> ${Array.isArray(data) && data[0] ? html`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : html` ${Object.keys(data).map(dataKey => {
|
|
151
151
|
var _data$dataKey;
|
|
152
152
|
return !['::metadata', '::title', '::description', '::type', '::link', '::props', '::deprecated', '::array-type', '::dataTypeLabel', '::flags'].includes(dataKey) || (_data$dataKey = data[dataKey]) !== null && _data$dataKey !== void 0 && _data$dataKey['::type'] && !data[dataKey]['::type'].includes('xxx-of') ? html`${this.generateTree(data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], data[dataKey]['::type'], data[dataKey]['::array-type'] || '', data[dataKey]['::flags'], dataKey, data[dataKey]['::title'], data[dataKey]['::description'], newSchemaLevel, newIndentLevel)}` : '';
|
|
153
153
|
})}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : html`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
|
|
@@ -176,7 +176,7 @@ export default class SchemaTree extends LitElement {
|
|
|
176
176
|
}
|
|
177
177
|
const titleString = schemaTitle || title;
|
|
178
178
|
const descriptionString = schemaDescription || description;
|
|
179
|
-
return html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(
|
|
179
|
+
return html` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? html`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:` : key.startsWith('::OPTION') ? html`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? html`<span class="key-label">${keyLabel}:</span>` : ''} <span>${dataType === 'array' ? '[' : ''}<span class="${cssType}">${format || type}</span>${dataType === 'array' ? ']' : ''}</span> </div> <div class="td key-descr"> <span class="m-markdown-small" style="vertical-align:middle" title="${readOrWriteOnly === '🆁' && 'Read only attribute' || readOrWriteOnly === '🆆' && 'Write only attribute' || ''}"> ${unsafeHTML(toMarkdown(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${titleString ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? html` ${constraints.length ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue !== '' ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Allowed: </span>${allowedValues.filter(v => v !== null && v !== undefined).join(' ┃ ')}</div><br>` : ''} ${pattern ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? html`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
|
|
180
180
|
}
|
|
181
181
|
/* eslint-enable indent */
|
|
182
182
|
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { schemaInObjectNotation } from '../utils/schema-utils.js';
|
|
3
3
|
import { html } from 'lit';
|
|
4
4
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
5
|
-
import {
|
|
5
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
6
6
|
import '../components/schema-tree.js';
|
|
7
7
|
import { getI18nText } from '../languages/index.js';
|
|
8
8
|
function componentBodyTemplate(sComponent) {
|
|
@@ -49,7 +49,7 @@ export function getComponentInfo(componentKeyId) {
|
|
|
49
49
|
export default function componentsTemplate() {
|
|
50
50
|
return this.resolvedSpec.components.map(component => {
|
|
51
51
|
const componentInfo = getComponentInfo(component.componentKeyId);
|
|
52
|
-
return html` <div id="cmp--${componentInfo.name.toLowerCase()}" class="regular-font section-gap--focused-mode observe-me" style="padding-bottom:0"> <div class="title tag">${componentInfo.name}</div> <div class="regular-font-size"> ${unsafeHTML(`<div class='m-markdown regular-font'>${
|
|
52
|
+
return html` <div id="cmp--${componentInfo.name.toLowerCase()}" class="regular-font section-gap--focused-mode observe-me" style="padding-bottom:0"> <div class="title tag">${componentInfo.name}</div> <div class="regular-font-size"> ${unsafeHTML(`<div class='m-markdown regular-font'>${toMarkdown(componentInfo.description ? componentInfo.description : '')}</div>`)} </div> </div> <div class="regular-font section-gap--focused-mode" style="padding-top:0"> ${component.subComponents.filter(c => c.expanded).map(sComponent => componentBodyTemplate.call(this, sComponent))} </div> `;
|
|
53
53
|
});
|
|
54
54
|
}
|
|
55
55
|
/* eslint-enable indent */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
3
|
-
import {
|
|
3
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
4
4
|
import '../components/api-request.js';
|
|
5
5
|
import '../components/api-response.js';
|
|
6
6
|
import codeSamplesTemplate from './code-samples-template.js';
|
|
@@ -51,9 +51,9 @@ function endpointBodyTemplate(path) {
|
|
|
51
51
|
return v.finalKeyValue && ((_path$security = path.security) === null || _path$security === void 0 ? void 0 : _path$security.some(ps => ps[v.apiKeyId]));
|
|
52
52
|
}) || [];
|
|
53
53
|
const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate(path.xCodeSamples) : '';
|
|
54
|
-
return html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : '' : html` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method} </span> <span style="display:flex;flex-wrap:wrap" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(
|
|
54
|
+
return html` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? html`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? html`<div class="title">${path.shortSummary}</div>` : '' : html` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method} </span> <span style="display:flex;flex-wrap:wrap" part="label-operation-path">${path.path.split('/').filter(t => t.trim()).map(t => html`<span>/${t}</span>`)}</span> </div>`} ${path.description ? html`<div class="m-markdown"> ${unsafeHTML(toMarkdown(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} </div> <div class="req-resp-container"> <div style="display:flex;flex-direction:column" class="request"> <api-request class="request-panel" style="width:100%" method="${path.method}" , path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" active-schema-tab="${this.defaultSchemaTab}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> </div> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="request response" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" active-schema-tab="${this.defaultSchemaTab}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
|
|
55
55
|
}
|
|
56
56
|
export default function endpointTemplate() {
|
|
57
|
-
return html` <div style="display:flex;justify-content:flex-end;padding-right:1rem;font-size:14px;margin-top:16px"> <span @click="${e => expandCollapseAll.call(this, e, true)}" style="color:var(--primary-color);cursor:pointer">Expand</span> | <span @click="${e => expandCollapseAll.call(this, e, false)}" style="color:var(--primary-color);cursor:pointer">Collapse</span> </div> ${(this.resolvedSpec && this.resolvedSpec.tags || []).map(tag => html` <div class="regular-font method-section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}"> <div class="section-tag-header" @click="${e => toggleTag.call(this, e, tag.elementId)}"> <div id="${tag.elementId}" class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div> </div> <div class="section-tag-body"> <slot name="${tag.elementId}"></slot> ${tag.description ? html` <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px"> ${unsafeHTML(
|
|
57
|
+
return html` <div style="display:flex;justify-content:flex-end;padding-right:1rem;font-size:14px;margin-top:16px"> <span @click="${e => expandCollapseAll.call(this, e, true)}" style="color:var(--primary-color);cursor:pointer">Expand</span> | <span @click="${e => expandCollapseAll.call(this, e, false)}" style="color:var(--primary-color);cursor:pointer">Collapse</span> </div> ${(this.resolvedSpec && this.resolvedSpec.tags || []).map(tag => html` <div class="regular-font method-section-gap section-tag ${tag.expanded ? 'expanded' : 'collapsed'}"> <div class="section-tag-header" @click="${e => toggleTag.call(this, e, tag.elementId)}"> <div id="${tag.elementId}" class="sub-title tag" style="color:var(--primary-color)">${tag.name}</div> </div> <div class="section-tag-body"> <slot name="${tag.elementId}"></slot> ${tag.description ? html` <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px"> ${unsafeHTML(toMarkdown(tag.description || ''))} </div>` : ''} ${tag.paths.filter(v => pathIsInSearch(this.matchPaths, v)).map(path => html` <section id="${path.elementId}" class="m-endpoint regular-font ${path.method} ${path.expanded ? 'expanded' : 'collapsed'}"> ${endpointHeadTemplate.call(this, path)} ${path.expanded ? endpointBodyTemplate.call(this, path) : ''} </section>`)} </div> </div> `)}`;
|
|
58
58
|
}
|
|
59
59
|
/* eslint-enable indent */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
3
|
-
import {
|
|
3
|
+
import { getSanitizedUrl, toMarkdown } from '../utils/common-utils';
|
|
4
4
|
import { pathSecurityTemplate } from './security-scheme-template.js';
|
|
5
5
|
import codeSamplesTemplate from './code-samples-template.js';
|
|
6
6
|
import callbackTemplate from './callback-template.js';
|
|
@@ -13,14 +13,14 @@ export function expandedEndpointBodyTemplate(path, tagName = '') {
|
|
|
13
13
|
// Filter API Keys that are non-empty and are applicable to the the path
|
|
14
14
|
const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
|
|
15
15
|
const codeSampleTabPanel = path.xCodeSamples ? codeSamplesTemplate.call(this, path.xCodeSamples) : '';
|
|
16
|
-
return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''} <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div> </div> ${path.externalDocs ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(
|
|
16
|
+
return html` ${this.renderStyle === 'read' ? html`<div class="divider" part="operation-divider"></div>` : ''} <div class="expanded-endpoint-body observe-me ${path.method}" part="section-operation ${path.elementId}" id="${path.elementId}"> ${this.renderStyle === 'focused' && tagName && tagName !== 'General ⦂' ? html`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? html`<div class="bold-text red-text"> DEPRECATED </div>` : ''} <div style="display:flex;justify-content:space-between"> <div style="flex-grow:1"> <h2>${path.shortSummary || `${path.method.toUpperCase()} ${path.path}`}</h2> <div class='mono-font part="section-operation-url" regular-font-size' style="padding:8px 0;color:var(--fg3)"> ${path.isWebhook ? html`<span style="color:var(--primary-color)"> WEBHOOK </span>` : ''} <span part="label-operation-method" class="regular-font upper method-fg bold-text ${path.method}">${path.method}</span> <span part="label-operation-path">${path.path}</span> </div> </div> ${path.externalDocs ? html`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${unsafeHTML(toMarkdown(path.externalDocs.description || ''))} <a href="${getSanitizedUrl(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${unsafeHTML(toMarkdown(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${pathSecurityTemplate.call(this, path.security)} ${codeSampleTabPanel} <div class="expanded-req-resp-container"> <api-request class="request-panel" method="${path.method}" path="${path.path}" element-id="${path.elementId}" .parameters="${path.parameters}" .request_body="${path.requestBody}" .api_keys="${nonEmptyApiKeys}" .servers="${path.servers}" server-url="${((_path$servers = path.servers) === null || _path$servers === void 0 ? void 0 : (_path$servers$ = _path$servers[0]) === null || _path$servers$ === void 0 ? void 0 : _path$servers$.url) || ((_this$selectedServer = this.selectedServer) === null || _this$selectedServer === void 0 ? void 0 : _this$selectedServer.computedUrl)}" fill-defaults="${!this.hideDefaults}" display-nulls="${!!this.includeNulls}" enable-console="${!this.hideExecution}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-read-only="${this.schemaHideReadOnly}" fetch-credentials="${this.fetchCredentials}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn, btn-fill, btn-outline, btn-try, schema-key, schema-type, schema-description, schema-table-header"> </api-request> ${path.callbacks ? callbackTemplate.call(this, path.callbacks) : ''} <api-response class="response-panel" .responses="${path.responses}" display-nulls="${!!this.includeNulls}" render-style="${this.renderStyle}" schema-style="${this.displaySchemaAsTree ? 'tree' : 'table'}" active-schema-tab="${this.defaultSchemaTab}" schema-expand-level="${this.schemaExpandLevel}" schema-hide-write-only="${this.schemaHideWriteOnly}" selected-status="${Object.keys(path.responses || {})[0] || ''}" @scrollToSchemaComponentByName="${v => this.scrollToSchemaComponentByName(v)}" exportparts="btn--resp, btn-fill--resp, btn-outline--resp, schema-key, schema-type, schema-description, schema-table-header"> </api-response> </div> </div>`;
|
|
17
17
|
}
|
|
18
18
|
export function expandedTagTemplate(tagId, subsectionFullId) {
|
|
19
19
|
const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);
|
|
20
20
|
const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
|
|
21
21
|
return html` <section id="${tag.elementId}" part="section-tag" class="regular-font section-gap--read-mode observe-me" style=""> <div class="title tag" part="label-tag-title">${tag.name}</div> <slot name="${tag.elementId}"></slot> <slot name="${tag.elementId}--subsection--${subsectionId}"> <div class="regular-font-size"> ${unsafeHTML(`
|
|
22
22
|
<div class="m-markdown regular-font">
|
|
23
|
-
${
|
|
23
|
+
${toMarkdown(tag.description || '')}
|
|
24
24
|
</div>`)} </div> </slot> </section>`;
|
|
25
25
|
}
|
|
26
26
|
/* eslint-enable indent */
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
3
|
-
import {
|
|
3
|
+
import { getSanitizedEmail, getSanitizedUrl, toMarkdown } from '../utils/common-utils';
|
|
4
4
|
import { getI18nText } from '../languages/index.js';
|
|
5
5
|
|
|
6
6
|
/* eslint-disable indent */
|
|
7
7
|
export default function overviewTemplate() {
|
|
8
|
-
return html` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? html` <slot name="overview-header"></slot> <slot name="overview"> <div id="api-title" part="label-overview-title" style="font-size:32px" class="section-padding"> ${this.resolvedSpec.info.title} ${!this.resolvedSpec.info.version ? '' : html` <span style="font-size:var(--font-size-small);font-weight:700"> ${this.resolvedSpec.info.version} </span>`} </div> <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px);margin-top:8px" class="section-padding"> ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email ? html`<span>${this.resolvedSpec.info.contact.name || getI18nText('overview.email')}: <a href="mailto:${this.resolvedSpec.info.contact.email}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a> </span>` : ''} ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.url ? html`<span>URL: <a href="${this.resolvedSpec.info.contact.url}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? html`<span>License: ${this.resolvedSpec.info.license.url ? html`<a href="${this.resolvedSpec.info.license.url}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>` : this.resolvedSpec.info.license.name} </span>` : ''} ${this.resolvedSpec.info.termsOfService ? html`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${getI18nText('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? html`${unsafeHTML(`<div class="m-markdown regular-font section-padding">${
|
|
8
|
+
return html` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? html` <slot name="overview-header"></slot> <slot name="overview"> <div id="api-title" part="label-overview-title" style="font-size:32px" class="section-padding"> ${this.resolvedSpec.info.title} ${!this.resolvedSpec.info.version ? '' : html` <span style="font-size:var(--font-size-small);font-weight:700"> ${this.resolvedSpec.info.version} </span>`} </div> <div id="api-info" style="font-size:calc(var(--font-size-regular) - 1px);margin-top:8px" class="section-padding"> ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.email ? html`<span>${this.resolvedSpec.info.contact.name || getI18nText('overview.email')}: <a href="mailto:${getSanitizedEmail(this.resolvedSpec.info.contact.email)}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.email}</a> </span>` : ''} ${this.resolvedSpec.info.contact && this.resolvedSpec.info.contact.url ? html`<span>URL: <a href="${getSanitizedUrl(this.resolvedSpec.info.contact.url)}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? html`<span>License: ${this.resolvedSpec.info.license.url ? html`<a href="${getSanitizedUrl(this.resolvedSpec.info.license.url)}" part="anchor anchor-overview">${this.resolvedSpec.info.license.name}</a>` : this.resolvedSpec.info.license.name} </span>` : ''} ${this.resolvedSpec.info.termsOfService ? html`<span><a href="${getSanitizedUrl(this.resolvedSpec.info.termsOfService)}" part="anchor anchor-overview">${getI18nText('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? html`${unsafeHTML(`<div class="m-markdown regular-font section-padding">${toMarkdown(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> <slot name="overview-footer"></slot> ` : ''} </section> `;
|
|
9
9
|
}
|
|
10
10
|
/* eslint-enable indent */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
3
|
-
import {
|
|
3
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
4
4
|
import base64url from 'base64url';
|
|
5
5
|
import { getI18nText } from '../languages/index.js';
|
|
6
6
|
function onApiKeyChange(apiKeyId, e) {
|
|
@@ -293,7 +293,7 @@ export default function securitySchemeTemplate() {
|
|
|
293
293
|
const providedApiKeys = schemes.filter(v => v.finalKeyValue);
|
|
294
294
|
return html` <section id="auth" part="section-auth" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> <slot name="authentication"> <div class="section-padding"> <slot name="authentication-header"> <div class="sub-title regular-font">${getI18nText('headers.authentication')}</div> </slot> <div class="small-font-size" style="display:flex;align-items:center;min-height:40px"> ${providedApiKeys.length > 0 ? html` <div class="blue-text"> ${providedApiKeys.length} API key applied </div> <div style="flex:1"></div> <button class="m-btn thin-border" part="btn btn-outline" @click="${() => {
|
|
295
295
|
onClearAllApiKeys.call(this);
|
|
296
|
-
}}">CLEAR ALL API KEYS</button>` : html`<div class="red-text">${getI18nText('authentication.no-api-key-applied')}</div>`} </div> ${schemes.length > 0 ? html` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => html` <tr> <td colspan="1" style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center"> <div style="display:flex;justify-content:center"> <span style="font-weight:700">${getTypeDisplayHeader(v)}</span> </div> </div> ${v.description ? html` <div class="m-markdown"> ${unsafeHTML(
|
|
296
|
+
}}">CLEAR ALL API KEYS</button>` : html`<div class="red-text">${getI18nText('authentication.no-api-key-applied')}</div>`} </div> ${schemes.length > 0 ? html` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => html` <tr> <td colspan="1" style="max-width:500px;overflow-wrap:break-word"> <div style="min-height:24px;display:flex;flex-direction:column;justify-content:center;align-items:center"> <div style="display:flex;justify-content:center"> <span style="font-weight:700">${getTypeDisplayHeader(v)}</span> </div> </div> ${v.description ? html` <div class="m-markdown"> ${unsafeHTML(toMarkdown(v.description || ''))} </div>` : ''} </td> <td colspan="3">${renderSecurityScheme.call(this, v)}</td> </tr>`)} </table>` : ''} <slot name="authentication-footer"></slot> </div> </slot> </section> `;
|
|
297
297
|
}
|
|
298
298
|
function getOauthScopeTemplate(rawScopes) {
|
|
299
299
|
const scopes = Array.isArray(rawScopes) ? rawScopes.map(s => s === null || s === void 0 ? void 0 : s.trim()).filter(s => s) : [];
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
|
-
import {
|
|
2
|
+
import { toMarkdown } from '../utils/common-utils';
|
|
3
3
|
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
|
|
4
4
|
import { getI18nText } from '../languages/index.js';
|
|
5
5
|
function onApiServerChange(e, server) {
|
|
@@ -26,7 +26,7 @@ function serverVarsTemplate() {
|
|
|
26
26
|
onApiServerVarChange.call(this, e, this.selectedServer);
|
|
27
27
|
}}"> ${Object.entries(kv[1].enum).map(e => kv[1].default === e[1] ? html` <option selected="selected" label="${e[1]}" value="${e[1]}">` : html` <option label="${e[1]}" value="${e[1]}">`)} </select>` : html` <input type="text" part="textbox textbox-server-var" spellcheck="false" data-var="${kv[0]}" value="${kv[1].default}" @input="${e => {
|
|
28
28
|
onApiServerVarChange.call(this, e, this.selectedServer);
|
|
29
|
-
}}">`} </td> </tr> ${kv[1].description ? html`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${unsafeHTML(
|
|
29
|
+
}}">`} </td> </tr> ${kv[1].description ? html`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${unsafeHTML(toMarkdown(kv[1].description))} </span></td></tr>` : ''} `)} </table> ` : '';
|
|
30
30
|
}
|
|
31
31
|
export default function serverTemplate() {
|
|
32
32
|
var _this$selectedServer2;
|