openapi-explorer 2.2.702 → 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 +6 -6
- 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 +6 -6
- 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
|
@@ -3,12 +3,12 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var _marked = require("marked");
|
|
7
6
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
7
|
var _keyed = require("lit/directives/keyed.js");
|
|
9
8
|
var _xmlButPrettier = _interopRequireDefault(require("xml-but-prettier"));
|
|
10
9
|
var _index = require("../languages/index.js");
|
|
11
10
|
var _schemaUtils = require("../utils/schema-utils.js");
|
|
11
|
+
var _commonUtils = require("../utils/common-utils");
|
|
12
12
|
require("./schema-tree.js");
|
|
13
13
|
var _requestFormTable = _interopRequireDefault(require("./request-form-table.js"));
|
|
14
14
|
require("./tag-input.js");
|
|
@@ -233,7 +233,7 @@ class ApiRequest extends _lit.LitElement {
|
|
|
233
233
|
this.computeCurlSyntax();
|
|
234
234
|
}}"> ${paramSchema.allowedValues.map(allowedValue => (0, _lit.html)` <option value="${allowedValue}" ?selected="${allowedValue === this.storedParamValues[param.name]}"> ${allowedValue === null ? '-' : allowedValue} </option>`)} </select>` || (0, _lit.html)` <input type="${paramSchema.format === 'password' ? 'password' : 'text'}" spellcheck="false" style="width:100%;margin-top:1rem;margin-bottom:1rem" @input="${() => {
|
|
235
235
|
this.computeCurlSyntax();
|
|
236
|
-
}}" 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' ? (0, _lit.html)` <td colspan="2" style="vertical-align:top"> ${param.description ? (0, _lit.html)` <div class="param-description" style="margin-top:1rem"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
236
|
+
}}" 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' ? (0, _lit.html)` <td colspan="2" style="vertical-align:top"> ${param.description ? (0, _lit.html)` <div class="param-description" style="margin-top:1rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(param.description))} </div>` : ''} ${paramSchema.constraints.length || displayAllowedValuesHints || paramSchema.pattern ? (0, _lit.html)` <div class="param-constraint" style="margin-top:1rem"> ${paramSchema.constraints.length ? (0, _lit.html)`<span style="font-weight:700">Constraints: </span>${paramSchema.constraints.join(', ')}<br>` : ''} ${paramSchema.pattern ? (0, _lit.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) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.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 => {
|
|
237
237
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${param.name}"]`);
|
|
238
238
|
if (inputEl) {
|
|
239
239
|
inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
|
|
@@ -257,7 +257,7 @@ class ApiRequest extends _lit.LitElement {
|
|
|
257
257
|
renderLongFormatExamples(exampleList, paramType, paramName) {
|
|
258
258
|
return (0, _lit.html)` <ul style="margin-block-start:.25em"> ${exampleList.map(example => {
|
|
259
259
|
var _example$exampleSumma, _example$exampleDescr;
|
|
260
|
-
return (0, _lit.html)` <li> ${this.renderExample(example, paramType, paramName)} ${((_example$exampleSumma = example.exampleSummary) === null || _example$exampleSumma === void 0 ? void 0 : _example$exampleSumma.length) > 0 ? (0, _lit.html)`<span>(${example.exampleSummary})</span>` : ''} ${((_example$exampleDescr = example.exampleDescription) === null || _example$exampleDescr === void 0 ? void 0 : _example$exampleDescr.length) > 0 ? (0, _lit.html)`<p>${(0, _unsafeHtml.unsafeHTML)((0,
|
|
260
|
+
return (0, _lit.html)` <li> ${this.renderExample(example, paramType, paramName)} ${((_example$exampleSumma = example.exampleSummary) === null || _example$exampleSumma === void 0 ? void 0 : _example$exampleSumma.length) > 0 ? (0, _lit.html)`<span>(${example.exampleSummary})</span>` : ''} ${((_example$exampleDescr = example.exampleDescription) === null || _example$exampleDescr === void 0 ? void 0 : _example$exampleDescr.length) > 0 ? (0, _lit.html)`<p>${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(example.exampleDescription))}</p>` : ''} </li>`;
|
|
261
261
|
})} </ul>`;
|
|
262
262
|
}
|
|
263
263
|
|
|
@@ -367,7 +367,7 @@ class ApiRequest extends _lit.LitElement {
|
|
|
367
367
|
this.selectedRequestBodyExample = reqBodyExamples.length > 0 ? reqBodyExamples[0].exampleId : '';
|
|
368
368
|
}
|
|
369
369
|
const displayedBodyExample = reqBodyExamples.find(v => v.exampleId === this.selectedRequestBodyExample) || reqBodyExamples[0];
|
|
370
|
-
reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.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 => (0, _lit.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 ? (0, _lit.html)` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
370
|
+
reqBodyDefaultHtml = (0, _lit.html)` <div class="example-panel pad-top-8"> ${reqBodyExamples.length === 1 ? '' : (0, _lit.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 => (0, _lit.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 ? (0, _lit.html)` <div class="example" data-default="${displayedBodyExample.exampleId}"> ${displayedBodyExample.exampleSummary && displayedBodyExample.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${displayedBodyExample.exampleSummary} </div>` : ''} ${displayedBodyExample.exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayedBodyExample.exampleDescription || ''))} </div>` : ''} <slot name="${this.elementId}--request-body"> <textarea @input="${() => {
|
|
371
371
|
this.computeCurlSyntax();
|
|
372
372
|
}}" 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> `;
|
|
373
373
|
} else if (this.selectedRequestBodyType.includes('form-urlencoded') || this.selectedRequestBodyType.includes('form-data')) {
|
|
@@ -403,7 +403,7 @@ class ApiRequest extends _lit.LitElement {
|
|
|
403
403
|
elementId: this.elementId
|
|
404
404
|
};
|
|
405
405
|
}
|
|
406
|
-
return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.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 ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
406
|
+
return (0, _lit.html)` <div class="request-body-container" data-selected-request-body-type="${this.selectedRequestBodyType}"> <div class="table-title top-gap row"> ${(0, _index.getI18nText)('operations.request-body')} ${this.request_body.required ? (0, _lit.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 ? (0, _lit.html)`<div class="m-markdown" style="margin-bottom:12px">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(this.request_body.description))}</div>` : ''} ${reqBodySchemaHtml || reqBodyDefaultHtml ? (0, _lit.html)` <div class="tab-panel col" style="border-width:0 0 1px 0"> <div class="tab-buttons row" @click="${e => {
|
|
407
407
|
if (e.target.tagName.toLowerCase() === 'button') {
|
|
408
408
|
this.activeSchemaTab = e.target.dataset.tab;
|
|
409
409
|
}
|
|
@@ -420,7 +420,7 @@ class ApiRequest extends _lit.LitElement {
|
|
|
420
420
|
// data-ptype="${mimeType}"
|
|
421
421
|
// style="width:100%"
|
|
422
422
|
// >${exampleValue}</textarea>
|
|
423
|
-
// ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(
|
|
423
|
+
// ${schema.description ? html`<span class="m-markdown-small">${unsafeHTML(toMarkdown(schema.description))}</span>` : ''}
|
|
424
424
|
// `;
|
|
425
425
|
// }
|
|
426
426
|
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var _marked = require("marked");
|
|
7
6
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
7
|
var _schemaUtils = require("../utils/schema-utils.js");
|
|
8
|
+
var _commonUtils = require("../utils/common-utils.js");
|
|
9
9
|
var _index = require("../languages/index.js");
|
|
10
10
|
var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
|
|
11
11
|
var _flexStyles = _interopRequireDefault(require("../styles/flex-styles.js"));
|
|
@@ -133,7 +133,7 @@ class ApiResponse extends _lit.LitElement {
|
|
|
133
133
|
} else {
|
|
134
134
|
this.selectedMimeType = undefined;
|
|
135
135
|
}
|
|
136
|
-
}}" 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 => (0, _lit.html)` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
136
|
+
}}" 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 => (0, _lit.html)` <div style="display:${status === this.selectedStatus ? 'block' : 'none'}"> <div class="top-gap"> <span class="resp-descr m-markdown">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(this.responses[status] && this.responses[status].description || ''))}</span> ${this.headersForEachRespStatus[status] && this.headersForEachRespStatus[status].length > 0 ? (0, _lit.html)`${this.responseHeaderListTemplate(this.headersForEachRespStatus[status])}` : ''} </div> ${Object.keys(this.mimeResponsesForEachStatus[status]).length === 0 ? '' : (0, _lit.html)` <div class="tab-panel col"> <div class="tab-buttons row" @click="${e => {
|
|
137
137
|
if (e.target.tagName.toLowerCase() === 'button') {
|
|
138
138
|
this.activeSchemaTab = e.target.dataset.tab;
|
|
139
139
|
}
|
|
@@ -145,7 +145,7 @@ class ApiResponse extends _lit.LitElement {
|
|
|
145
145
|
const typeData = (0, _schemaUtils.getTypeInfo)(v, {
|
|
146
146
|
enableExampleGeneration: true
|
|
147
147
|
});
|
|
148
|
-
return (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
148
|
+
return (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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> `;
|
|
149
149
|
})} </table>`;
|
|
150
150
|
}
|
|
151
151
|
mimeTypeDropdownTemplate(mimeTypes) {
|
|
@@ -164,7 +164,7 @@ class ApiResponse extends _lit.LitElement {
|
|
|
164
164
|
if (!mimeRespDetails) {
|
|
165
165
|
return (0, _lit.html)` <pre style="color:var(--red)" class="example-panel border-top"> No example provided </pre> `;
|
|
166
166
|
}
|
|
167
|
-
return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
167
|
+
return (0, _lit.html)` ${mimeRespDetails.examples.length === 1 ? (0, _lit.html)` ${mimeRespDetails.examples[0].exampleSummary && mimeRespDetails.examples[0].exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${mimeRespDetails.examples[0].exampleSummary} </div>` : ''} ${mimeRespDetails.examples[0].exampleDescription ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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}">` : (0, _lit.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 => (0, _lit.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 => (0, _lit.html)` <div class="example" data-example="${v.exampleId}" style="display:${v.exampleId === mimeRespDetails.selectedExample ? 'block' : 'none'}"> ${v.exampleSummary && v.exampleSummary.length > 80 ? (0, _lit.html)`<div style="padding:4px 0"> ${v.exampleSummary} </div>` : ''} ${v.exampleDescription && v.exampleDescription !== v.exampleSummary ? (0, _lit.html)`<div class="m-markdown-small" style="padding:4px 0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(v.exampleDescription || ''))} </div>` : ''} <syntax-highlighter mime-type="${v.exampleType}" .content="${v.exampleValue}"> </div> `)} </span> `} `;
|
|
168
168
|
}
|
|
169
169
|
mimeSchemaTemplate(mimeRespDetails) {
|
|
170
170
|
if (!mimeRespDetails) {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = getRequestFormTable;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var
|
|
6
|
+
var _commonUtils = require("../utils/common-utils");
|
|
7
7
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
8
|
var _schemaUtils = require("../utils/schema-utils.js");
|
|
9
9
|
var _map = require("lit/directives/map.js");
|
|
@@ -39,7 +39,7 @@ function generateFormRows(data, options, dataType = 'object', key = '', descript
|
|
|
39
39
|
return undefined;
|
|
40
40
|
}
|
|
41
41
|
const displayLine = [description].filter(v => v).join(' ');
|
|
42
|
-
return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
42
|
+
return (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="${isOneOfLabel ? 'xxx-of-key' : 'xxx-of-descr'}">${keyDescr}</span>` : isRequired ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block" title="Required">${keyLabel}</span>` : (0, _lit.html)`<span class="key-label" style="display:inline-block">${keyLabel === '::props' ? '' : keyLabel}</span>`} </div> </td> <td> </td> <td class="key-descr m-markdown-small">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</td> </tr>` : (0, _lit.html)`${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<tr><td> ${dataType} </td> </tr>` : ''}`} ${Array.isArray(data) && data[0] ? (0, _lit.html)`${generateFormRows.call(this, data[0], options, 'xxx-of-option', '::ARRAY~OF', '', newSchemaLevel)}` : (0, _lit.html)`${Object.keys(data).map(dataKey => {
|
|
43
43
|
var _data$dataKey;
|
|
44
44
|
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') ? (0, _lit.html)`${generateFormRows.call(this, data[dataKey]['::type'] === 'array' ? data[dataKey]['::props'] : data[dataKey], options, data[dataKey]['::type'], dataKey, data[dataKey]['::description'], newSchemaLevel)}` : '';
|
|
45
45
|
})}`}`;
|
|
@@ -103,13 +103,13 @@ function generatePrimitiveRow(rowData, parentRecursionOptions) {
|
|
|
103
103
|
this.requestUpdate();
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
|
-
const arrayIterator = (0, _map.map)((0, _range.range)(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => (0, _lit.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 ? (0, _lit.html)`<div class="param-description">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
106
|
+
const arrayIterator = (0, _map.map)((0, _range.range)(((_this$duplicatedRowsB = this.duplicatedRowsByKey) === null || _this$duplicatedRowsB === void 0 ? void 0 : _this$duplicatedRowsB[duplicateRowGeneratorKey]) || 1), () => (0, _lit.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 ? (0, _lit.html)`<div class="param-description">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(description))}</div>` : ''} ${defaultValue || constraints || allowedValues || pattern ? (0, _lit.html)` <div class="param-constraint"> ${pattern ? (0, _lit.html)`<span style="font-weight:700">Pattern: </span>${pattern}<br>` : ''} ${constraints.length ? (0, _lit.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) => (0, _lit.html)` ${i > 0 ? '|' : (0, _lit.html)`<span style="font-weight:700">Allowed: </span>`} ${(0, _lit.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 => {
|
|
107
107
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
|
|
108
108
|
if (inputEl) {
|
|
109
109
|
inputEl.value = e.target.dataset.type === 'array' ? [e.target.dataset.enum] : e.target.dataset.enum;
|
|
110
110
|
}
|
|
111
111
|
this.computeCurlSyntax();
|
|
112
|
-
}}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
112
|
+
}}"> ${v === null ? '-' : v} </a>`}`)} </div>` : ''} </td> </tr> ${schemaDescription || example ? (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(schemaDescription || ''))}</span> ${example ? (0, _lit.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 => {
|
|
113
113
|
const inputEl = e.target.closest('table').querySelector(`[data-pname="${keyLabel}"]`);
|
|
114
114
|
if (inputEl) {
|
|
115
115
|
inputEl.value = e.target.dataset.exampleType === 'array' ? e.target.dataset.example.split('~|~') : e.target.dataset.example;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var
|
|
6
|
+
var _commonUtils = require("../utils/common-utils");
|
|
7
7
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
8
|
var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
|
|
9
9
|
var _schemaStyles = _interopRequireDefault(require("../styles/schema-styles.js"));
|
|
@@ -70,7 +70,7 @@ class SchemaTable extends _lit.LitElement {
|
|
|
70
70
|
keyLabelMaxCharacterLength,
|
|
71
71
|
typeMaxCharacterLength
|
|
72
72
|
} = this.data ? this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type']) : {};
|
|
73
|
-
return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
73
|
+
return (0, _lit.html)` ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="padding-bottom:8px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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> `;
|
|
74
74
|
}
|
|
75
75
|
scrollToSchemaComponentByName(componentName) {
|
|
76
76
|
this.dispatchEvent(new CustomEvent('scrollToSchemaComponentByName', {
|
|
@@ -168,7 +168,7 @@ class SchemaTable extends _lit.LitElement {
|
|
|
168
168
|
});
|
|
169
169
|
}
|
|
170
170
|
const displayLine = [title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
|
|
171
|
-
const outerResult = (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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 ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.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 ? (0, _lit.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>` : (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0,
|
|
171
|
+
const outerResult = (0, _lit.html)` ${newSchemaLevel >= 0 && key ? (0, _lit.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 ? (0, _lit.html)`<div class="obj-toggle" data-obj="${keyLabel}">▾</div>` : ''} ${data['::type'] === 'xxx-of-option' || key.startsWith('::OPTION') ? (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" style="display:inline-block;margin-left:-6px" title="Required"> ${keyLabel.substring(0, keyLabel.length - 1)}</span>` : (0, _lit.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 ? (0, _lit.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>` : (0, _lit.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">${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.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 ? (0, _lit.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>` : (0, _lit.html)` ${data['::type'] === 'array' && dataType === 'array' ? (0, _lit.html)`<div class="tr"> <div class="td"> ${dataType} </div> </div>` : ''} `} <div class="object-body"> ${recursiveResult} <div> </div></div>`;
|
|
172
172
|
return {
|
|
173
173
|
result: outerResult,
|
|
174
174
|
keyLabelMaxCharacterLength: Math.max(innerMaxIndentationLevel, (keyLabel || keyDescr).length),
|
|
@@ -203,7 +203,7 @@ class SchemaTable extends _lit.LitElement {
|
|
|
203
203
|
keyLabelMaxCharacterLength: newIndentLevel
|
|
204
204
|
};
|
|
205
205
|
}
|
|
206
|
-
const result = (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.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"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
206
|
+
const result = (0, _lit.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('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : (0, _lit.html)`${keyLabel ? (0, _lit.html)`<span class="key-label"> ${keyLabel}</span>` : (0, _lit.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"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(`${`${schemaTitle || title ? `**${schemaTitle || title}${schemaDescription || description ? ':' : ''}**` : ''} ${schemaDescription || description}` || ''}`))} </span> ${constraints.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue !== '' ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.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 ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''} </div> </div> `;
|
|
207
207
|
return {
|
|
208
208
|
result,
|
|
209
209
|
keyLabelMaxCharacterLength: keyLabel.length + newIndentLevel,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var
|
|
6
|
+
var _commonUtils = require("../utils/common-utils");
|
|
7
7
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
8
|
var _index = require("../languages/index.js");
|
|
9
9
|
var _fontStyles = _interopRequireDefault(require("../styles/font-styles.js"));
|
|
@@ -69,7 +69,7 @@ class SchemaTree extends _lit.LitElement {
|
|
|
69
69
|
var _this$data, _this$data2, _this$data3, _this$data3$Props, _this$data4, _this$data4$Props, _this$data5;
|
|
70
70
|
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']}]`;
|
|
71
71
|
const displayLine = [title, (_this$data5 = this.data) === null || _this$data5 === void 0 ? void 0 : _this$data5['::description']].filter(d => d).join(' - ');
|
|
72
|
-
return (0, _lit.html)` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
72
|
+
return (0, _lit.html)` <div class="tree ${this.interactive ? 'interactive' : ''}"> <div class="toolbar"> ${displayLine ? (0, _lit.html)`<span class="m-markdown" style="margin-block-start:0"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))}</span>` : (0, _lit.html)`<div> </div>`} <div class="toolbar-item" @click="${() => this.toggleSchemaDescription()}"> ${this.schemaDescriptionExpanded ? (0, _index.getI18nText)('schemas.collapse-desc') : (0, _index.getI18nText)('schemas.expand-desc')} </div> </div> ${this.data ? (0, _lit.html)`${this.generateTree(this.data['::type'] === 'array' ? this.data['::props'] : this.data, this.data['::type'], this.data['::array-type'] || '')}` : (0, _lit.html)`<span class="mono-font" style="color:var(--red)"> ${(0, _index.getI18nText)('schemas.schema-missing')} </span>`} </div> `;
|
|
73
73
|
}
|
|
74
74
|
toggleSchemaDescription() {
|
|
75
75
|
this.schemaDescriptionExpanded = !this.schemaDescriptionExpanded;
|
|
@@ -152,7 +152,7 @@ class SchemaTree extends _lit.LitElement {
|
|
|
152
152
|
return undefined;
|
|
153
153
|
}
|
|
154
154
|
const displayLine = [flags['🆁'] || flags['🆆'], title && `**${title}${description ? ':' : ''}**`, description].filter(v => v).join(' ');
|
|
155
|
-
return (0, _lit.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') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.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' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
155
|
+
return (0, _lit.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') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : keyLabel === '::props' || keyLabel === '::ARRAY~OF' ? '' : schemaLevel > 0 ? (0, _lit.html)`<span class="key-label"> ${keyLabel.replace(/\*$/, '')}${keyLabel.endsWith('*') ? (0, _lit.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' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(displayLine))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.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 ? (0, _lit.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] ? (0, _lit.html)`${this.generateTree(data[0], 'xxx-of-option', '', data[0]['::flags'] || {}, '::ARRAY~OF', data[0]['::title'], data[0]['::description'], newSchemaLevel, newIndentLevel)}` : (0, _lit.html)` ${Object.keys(data).map(dataKey => {
|
|
156
156
|
var _data$dataKey;
|
|
157
157
|
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') ? (0, _lit.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)}` : '';
|
|
158
158
|
})}`} </div> ${data['::type'] && data['::type'].includes('xxx-of') ? '' : (0, _lit.html)`<div class="close-bracket"> ${closeBracket} </div>`} </div> `;
|
|
@@ -181,7 +181,7 @@ class SchemaTree extends _lit.LitElement {
|
|
|
181
181
|
}
|
|
182
182
|
const titleString = schemaTitle || title;
|
|
183
183
|
const descriptionString = schemaDescription || description;
|
|
184
|
-
return (0, _lit.html)` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _lit.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' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
184
|
+
return (0, _lit.html)` <div class="tr"> <div class="td key ${deprecated ? 'deprecated' : ''}" style="min-width:${minFieldColWidth}px"> ${keyLabel.endsWith('*') ? (0, _lit.html)`<span class="key-label requiredStar" title="Required">${keyLabel.substring(0, keyLabel.length - 1)}</span>:` : key.startsWith('::OPTION') ? (0, _lit.html)`<span class="key-label xxx-of-key">${keyLabel}</span><span class="xxx-of-descr">${keyDescr}</span>` : schemaLevel > 0 ? (0, _lit.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' || ''}"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(`${readOrWriteOnly && `${readOrWriteOnly} ` || ''}${`${titleString ? `**${titleString}${descriptionString ? ':' : ''}**` : ''} ${descriptionString}` || ''}`))} </span> ${this.schemaDescriptionExpanded ? (0, _lit.html)` ${constraints.length ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Constraints: </span>${constraints.join(', ')}</div><br>` : ''} ${defaultValue !== '' ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Default: </span>${defaultValue}</div><br>` : ''} ${allowedValues ? (0, _lit.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 ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Pattern: </span>${pattern}</div><br>` : ''} ${example ? (0, _lit.html)`<div style="display:inline-block;line-break:anywhere;margin-right:8px"><span class="bold-text">Example: </span>${example}</div><br>` : ''}` : ''} </div> </div> `;
|
|
185
185
|
}
|
|
186
186
|
/* eslint-enable indent */
|
|
187
187
|
|
|
@@ -6,7 +6,7 @@ exports.getComponentInfo = getComponentInfo;
|
|
|
6
6
|
var _schemaUtils = require("../utils/schema-utils.js");
|
|
7
7
|
var _lit = require("lit");
|
|
8
8
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
9
|
-
var
|
|
9
|
+
var _commonUtils = require("../utils/common-utils");
|
|
10
10
|
require("../components/schema-tree.js");
|
|
11
11
|
var _index = require("../languages/index.js");
|
|
12
12
|
/* eslint-disable no-console */
|
|
@@ -55,7 +55,7 @@ function getComponentInfo(componentKeyId) {
|
|
|
55
55
|
function componentsTemplate() {
|
|
56
56
|
return this.resolvedSpec.components.map(component => {
|
|
57
57
|
const componentInfo = getComponentInfo(component.componentKeyId);
|
|
58
|
-
return (0, _lit.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"> ${(0, _unsafeHtml.unsafeHTML)(`<div class='m-markdown regular-font'>${(0,
|
|
58
|
+
return (0, _lit.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"> ${(0, _unsafeHtml.unsafeHTML)(`<div class='m-markdown regular-font'>${(0, _commonUtils.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> `;
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
/* eslint-enable indent */
|
|
@@ -6,26 +6,26 @@ exports.expandCollapseAll = expandCollapseAll;
|
|
|
6
6
|
exports.expandCollapseComponent = expandCollapseComponent;
|
|
7
7
|
var _lit = require("lit");
|
|
8
8
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
9
|
-
var
|
|
9
|
+
var _commonUtils = require("../utils/common-utils");
|
|
10
10
|
require("../components/api-request.js");
|
|
11
11
|
require("../components/api-response.js");
|
|
12
12
|
var _codeSamplesTemplate = _interopRequireDefault(require("./code-samples-template.js"));
|
|
13
13
|
var _callbackTemplate = _interopRequireDefault(require("./callback-template.js"));
|
|
14
14
|
var _securitySchemeTemplate = require("./security-scheme-template.js");
|
|
15
|
-
var
|
|
15
|
+
var _commonUtils2 = require("../utils/common-utils.js");
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
function toggleExpand(path) {
|
|
18
18
|
if (path.expanded) {
|
|
19
19
|
path.expanded = false;
|
|
20
|
-
(0,
|
|
20
|
+
(0, _commonUtils2.replaceState)(null);
|
|
21
21
|
} else {
|
|
22
22
|
path.expanded = true;
|
|
23
23
|
this.emitOperationChangedEvent(path.elementId);
|
|
24
24
|
|
|
25
25
|
// Toggle all the other ones off
|
|
26
26
|
this.resolvedSpec.tags.forEach(t => t.paths.filter(p => p.elementId !== path.elementId).forEach(p => p.expanded = false));
|
|
27
|
-
if (path.elementId !== (0,
|
|
28
|
-
(0,
|
|
27
|
+
if (path.elementId !== (0, _commonUtils2.getCurrentElement)()) {
|
|
28
|
+
(0, _commonUtils2.replaceState)(path.elementId);
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
this.requestUpdate();
|
|
@@ -58,9 +58,9 @@ function endpointBodyTemplate(path) {
|
|
|
58
58
|
return v.finalKeyValue && ((_path$security = path.security) === null || _path$security === void 0 ? void 0 : _path$security.some(ps => ps[v.apiKeyId]));
|
|
59
59
|
}) || [];
|
|
60
60
|
const codeSampleTabPanel = path.xCodeSamples ? (0, _codeSamplesTemplate.default)(path.xCodeSamples) : '';
|
|
61
|
-
return (0, _lit.html)` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? (0, _lit.html)`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? (0, _lit.html)`<div class="title">${path.shortSummary}</div>` : '' : (0, _lit.html)` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.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 => (0, _lit.html)`<span>/${t}</span>`)}</span> </div>`} ${path.description ? (0, _lit.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
61
|
+
return (0, _lit.html)` <div class="endpoint-body ${path.method}"> <div class="summary"> ${this.usePathInNavBar ? path.summary ? (0, _lit.html)`<div class="title">${path.summary}<div></div></div>` : path.shortSummary !== path.description ? (0, _lit.html)`<div class="title">${path.shortSummary}</div>` : '' : (0, _lit.html)` <div class="title mono-font regular-font-size" part="section-operation-url" style="display:flex;flex-wrap:wrap;color:var(--fg3)"> ${path.isWebhook ? (0, _lit.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 => (0, _lit.html)`<span>/${t}</span>`)}</span> </div>`} ${path.description ? (0, _lit.html)`<div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.description))}</div>` : ''} <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.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.default.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>`;
|
|
62
62
|
}
|
|
63
63
|
function endpointTemplate() {
|
|
64
|
-
return (0, _lit.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 => (0, _lit.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 ? (0, _lit.html)` <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
64
|
+
return (0, _lit.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 => (0, _lit.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 ? (0, _lit.html)` <div class="regular-font regular-font-size m-markdown description" style="padding-bottom:12px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(tag.description || ''))} </div>` : ''} ${tag.paths.filter(v => (0, _commonUtils2.pathIsInSearch)(this.matchPaths, v)).map(path => (0, _lit.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> `)}`;
|
|
65
65
|
}
|
|
66
66
|
/* eslint-enable indent */
|
|
@@ -5,7 +5,7 @@ exports.expandedEndpointBodyTemplate = expandedEndpointBodyTemplate;
|
|
|
5
5
|
exports.expandedTagTemplate = expandedTagTemplate;
|
|
6
6
|
var _lit = require("lit");
|
|
7
7
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
|
-
var
|
|
8
|
+
var _commonUtils = require("../utils/common-utils");
|
|
9
9
|
var _securitySchemeTemplate = require("./security-scheme-template.js");
|
|
10
10
|
var _codeSamplesTemplate = _interopRequireDefault(require("./code-samples-template.js"));
|
|
11
11
|
var _callbackTemplate = _interopRequireDefault(require("./callback-template.js"));
|
|
@@ -18,14 +18,14 @@ function expandedEndpointBodyTemplate(path, tagName = '') {
|
|
|
18
18
|
// Filter API Keys that are non-empty and are applicable to the the path
|
|
19
19
|
const nonEmptyApiKeys = this.resolvedSpec.securitySchemes.filter(v => v.finalKeyValue && path.security && path.security.some(ps => ps[v.apiKeyId])) || [];
|
|
20
20
|
const codeSampleTabPanel = path.xCodeSamples ? _codeSamplesTemplate.default.call(this, path.xCodeSamples) : '';
|
|
21
|
-
return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.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 ⦂' ? (0, _lit.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _lit.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 ? (0, _lit.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 ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
21
|
+
return (0, _lit.html)` ${this.renderStyle === 'read' ? (0, _lit.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 ⦂' ? (0, _lit.html)`<h3 class="upper" style="font-weight:700"> ${tagName} </h3>` : ''} ${path.deprecated ? (0, _lit.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 ? (0, _lit.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 ? (0, _lit.html)`<div class="m-markdown" style="margin-top:2rem;margin-bottom:.5rem;max-width:300px"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.externalDocs.description || ''))} <a href="${(0, _commonUtils.getSanitizedUrl)(path.externalDocs.url)}">Navigate to documentation ↗</a> </div>` : ''} </div> <div class="m-markdown" style="margin-right:2rem"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(path.description || ''))}</div> <slot name="${path.elementId}"></slot> <slot name="path-details" data-method="${path.method}" data-path="${path.path}"></slot> ${_securitySchemeTemplate.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.default.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>`;
|
|
22
22
|
}
|
|
23
23
|
function expandedTagTemplate(tagId, subsectionFullId) {
|
|
24
24
|
const tag = (this.resolvedSpec.tags || []).find(t => t.elementId === tagId);
|
|
25
25
|
const subsectionId = subsectionFullId.replace(`${tagId}--`, '');
|
|
26
26
|
return (0, _lit.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"> ${(0, _unsafeHtml.unsafeHTML)(`
|
|
27
27
|
<div class="m-markdown regular-font">
|
|
28
|
-
${(0,
|
|
28
|
+
${(0, _commonUtils.toMarkdown)(tag.description || '')}
|
|
29
29
|
</div>`)} </div> </slot> </section>`;
|
|
30
30
|
}
|
|
31
31
|
/* eslint-enable indent */
|
|
@@ -4,10 +4,10 @@ exports.__esModule = true;
|
|
|
4
4
|
exports.default = overviewTemplate;
|
|
5
5
|
var _lit = require("lit");
|
|
6
6
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
7
|
-
var
|
|
7
|
+
var _commonUtils = require("../utils/common-utils");
|
|
8
8
|
var _index = require("../languages/index.js");
|
|
9
9
|
/* eslint-disable indent */
|
|
10
10
|
function overviewTemplate() {
|
|
11
|
-
return (0, _lit.html)` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? (0, _lit.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 ? '' : (0, _lit.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 ? (0, _lit.html)`<span>${this.resolvedSpec.info.contact.name || (0, _index.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 ? (0, _lit.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 ? (0, _lit.html)`<span>License: ${this.resolvedSpec.info.license.url ? (0, _lit.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 ? (0, _lit.html)`<span><a href="${this.resolvedSpec.info.termsOfService}" part="anchor anchor-overview">${(0, _index.getI18nText)('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? (0, _lit.html)`${(0, _unsafeHtml.unsafeHTML)(`<div class="m-markdown regular-font section-padding">${(0,
|
|
11
|
+
return (0, _lit.html)` <section id="overview" part="section-overview" class="observe-me ${this.renderStyle === 'focused' ? 'section-gap--focused-mode' : 'section-gap'}"> ${this.resolvedSpec && this.resolvedSpec.info ? (0, _lit.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 ? '' : (0, _lit.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 ? (0, _lit.html)`<span>${this.resolvedSpec.info.contact.name || (0, _index.getI18nText)('overview.email')}: <a href="mailto:${(0, _commonUtils.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 ? (0, _lit.html)`<span>URL: <a href="${(0, _commonUtils.getSanitizedUrl)(this.resolvedSpec.info.contact.url)}" part="anchor anchor-overview">${this.resolvedSpec.info.contact.url}</a></span>` : ''} ${this.resolvedSpec.info.license ? (0, _lit.html)`<span>License: ${this.resolvedSpec.info.license.url ? (0, _lit.html)`<a href="${(0, _commonUtils.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 ? (0, _lit.html)`<span><a href="${(0, _commonUtils.getSanitizedUrl)(this.resolvedSpec.info.termsOfService)}" part="anchor anchor-overview">${(0, _index.getI18nText)('overview.terms-of-service')}</a></span>` : ''} </div> </slot> <slot name="overview-body"></slot> <slot name="overview-api-description"> ${this.resolvedSpec.info.description ? (0, _lit.html)`${(0, _unsafeHtml.unsafeHTML)(`<div class="m-markdown regular-font section-padding">${(0, _commonUtils.toMarkdown)(this.resolvedSpec.info.description)}</div>`)}` : ''} </slot> <slot name="overview-footer"></slot> ` : ''} </section> `;
|
|
12
12
|
}
|
|
13
13
|
/* eslint-enable indent */
|
|
@@ -6,7 +6,7 @@ exports.default = securitySchemeTemplate;
|
|
|
6
6
|
exports.pathSecurityTemplate = pathSecurityTemplate;
|
|
7
7
|
var _lit = require("lit");
|
|
8
8
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
9
|
-
var
|
|
9
|
+
var _commonUtils = require("../utils/common-utils");
|
|
10
10
|
var _base64url = _interopRequireDefault(require("base64url"));
|
|
11
11
|
var _index = require("../languages/index.js");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -300,7 +300,7 @@ function securitySchemeTemplate() {
|
|
|
300
300
|
const providedApiKeys = schemes.filter(v => v.finalKeyValue);
|
|
301
301
|
return (0, _lit.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">${(0, _index.getI18nText)('headers.authentication')}</div> </slot> <div class="small-font-size" style="display:flex;align-items:center;min-height:40px"> ${providedApiKeys.length > 0 ? (0, _lit.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="${() => {
|
|
302
302
|
onClearAllApiKeys.call(this);
|
|
303
|
-
}}">CLEAR ALL API KEYS</button>` : (0, _lit.html)`<div class="red-text">${(0, _index.getI18nText)('authentication.no-api-key-applied')}</div>`} </div> ${schemes.length > 0 ? (0, _lit.html)` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => (0, _lit.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 ? (0, _lit.html)` <div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
303
|
+
}}">CLEAR ALL API KEYS</button>` : (0, _lit.html)`<div class="red-text">${(0, _index.getI18nText)('authentication.no-api-key-applied')}</div>`} </div> ${schemes.length > 0 ? (0, _lit.html)` <table role="presentation" class="m-table" style="width:100%"> ${schemes.map(v => (0, _lit.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 ? (0, _lit.html)` <div class="m-markdown"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(v.description || ''))} </div>` : ''} </td> <td colspan="3">${renderSecurityScheme.call(this, v)}</td> </tr>`)} </table>` : ''} <slot name="authentication-footer"></slot> </div> </slot> </section> `;
|
|
304
304
|
}
|
|
305
305
|
function getOauthScopeTemplate(rawScopes) {
|
|
306
306
|
const scopes = Array.isArray(rawScopes) ? rawScopes.map(s => s === null || s === void 0 ? void 0 : s.trim()).filter(s => s) : [];
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = serverTemplate;
|
|
5
5
|
var _lit = require("lit");
|
|
6
|
-
var
|
|
6
|
+
var _commonUtils = require("../utils/common-utils");
|
|
7
7
|
var _unsafeHtml = require("lit/directives/unsafe-html.js");
|
|
8
8
|
var _index = require("../languages/index.js");
|
|
9
9
|
function onApiServerChange(e, server) {
|
|
@@ -30,7 +30,7 @@ function serverVarsTemplate() {
|
|
|
30
30
|
onApiServerVarChange.call(this, e, this.selectedServer);
|
|
31
31
|
}}"> ${Object.entries(kv[1].enum).map(e => kv[1].default === e[1] ? (0, _lit.html)` <option selected="selected" label="${e[1]}" value="${e[1]}">` : (0, _lit.html)` <option label="${e[1]}" value="${e[1]}">`)} </select>` : (0, _lit.html)` <input type="text" part="textbox textbox-server-var" spellcheck="false" data-var="${kv[0]}" value="${kv[1].default}" @input="${e => {
|
|
32
32
|
onApiServerVarChange.call(this, e, this.selectedServer);
|
|
33
|
-
}}">`} </td> </tr> ${kv[1].description ? (0, _lit.html)`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${(0, _unsafeHtml.unsafeHTML)((0,
|
|
33
|
+
}}">`} </td> </tr> ${kv[1].description ? (0, _lit.html)`<tr><td colspan="2" style="border:none"><span class="m-markdown-small"> ${(0, _unsafeHtml.unsafeHTML)((0, _commonUtils.toMarkdown)(kv[1].description))} </span></td></tr>` : ''} `)} </table> ` : '';
|
|
34
34
|
}
|
|
35
35
|
function serverTemplate() {
|
|
36
36
|
var _this$selectedServer2;
|
|
@@ -7,10 +7,14 @@ exports.copyToClipboard = copyToClipboard;
|
|
|
7
7
|
exports.debounce = debounce;
|
|
8
8
|
exports.getBaseUrlFromUrl = getBaseUrlFromUrl;
|
|
9
9
|
exports.getCurrentElement = getCurrentElement;
|
|
10
|
+
exports.getSanitizedEmail = getSanitizedEmail;
|
|
11
|
+
exports.getSanitizedUrl = getSanitizedUrl;
|
|
10
12
|
exports.invalidCharsRegEx = void 0;
|
|
11
13
|
exports.pathIsInSearch = pathIsInSearch;
|
|
12
14
|
exports.replaceState = replaceState;
|
|
13
15
|
exports.sleep = sleep;
|
|
16
|
+
exports.toMarkdown = toMarkdown;
|
|
17
|
+
var _marked = require("marked");
|
|
14
18
|
var _index = require("../languages/index.js");
|
|
15
19
|
/* For Delayed Event Handler Execution */
|
|
16
20
|
function debounce(fn, delay) {
|
|
@@ -143,4 +147,36 @@ function replaceState(rawElementId) {
|
|
|
143
147
|
query.delete('route');
|
|
144
148
|
const newQuery = query.toString().length > 1 ? `${query.toString()}&route=${elementId}` : `route=${elementId}`;
|
|
145
149
|
window.history.replaceState(null, null, `#${currentNavigationHashPart}?${newQuery}`);
|
|
150
|
+
}
|
|
151
|
+
function toMarkdown(markdownStringRaw) {
|
|
152
|
+
const sanitizedMarkdownString = (markdownStringRaw || ''
|
|
153
|
+
// Convert scripts tags to correct markdown format
|
|
154
|
+
).replace(/[<]script[^>]*>/gi, '<div>```').replace(/[<][/]script/gi, '```</div')
|
|
155
|
+
// Remove unnecessary attributes from img tag
|
|
156
|
+
.replace(/onerror=/ig, 'attribute');
|
|
157
|
+
const markdownResult = (0, _marked.marked)(sanitizedMarkdownString || '');
|
|
158
|
+
return markdownResult;
|
|
159
|
+
}
|
|
160
|
+
function getSanitizedUrl(urlString) {
|
|
161
|
+
if (!urlString) {
|
|
162
|
+
return '';
|
|
163
|
+
}
|
|
164
|
+
try {
|
|
165
|
+
// eslint-disable-next-line no-new
|
|
166
|
+
const url = new URL(urlString);
|
|
167
|
+
return url.protocol === 'http' || url.protocol === 'https' ? url : '';
|
|
168
|
+
} catch (error) {
|
|
169
|
+
return '';
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
function getSanitizedEmail(emailRaw) {
|
|
173
|
+
if (!emailRaw) {
|
|
174
|
+
return '';
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// eslint-disable-next-line max-len, no-control-regex
|
|
178
|
+
if (emailRaw.match(/(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9]))\.){3}(?:(2(5[0-5]|[0-4][0-9])|1[0-9][0-9]|[1-9]?[0-9])|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/)) {
|
|
179
|
+
return emailRaw;
|
|
180
|
+
}
|
|
181
|
+
return '';
|
|
146
182
|
}
|