@pb33f/cowboy-components 0.5.4 → 0.5.5
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/components/model-renderer/schema.d.ts +4 -3
- package/dist/components/model-renderer/schema.js +54 -1
- package/dist/components/paginator/paginator.css.js +1 -1
- package/dist/components/the-doctor/the-doctor.css.js +5 -1
- package/dist/components/the-doctor/the-doctor.d.ts +5 -0
- package/dist/components/the-doctor/the-doctor.js +34 -11
- package/dist/cowboy-components.umd.cjs +494 -463
- package/dist/model/schema.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import './description.js';
|
|
2
2
|
import './example.js';
|
|
3
|
+
import { TemplateResult } from "lit";
|
|
3
4
|
import { Schema } from "../../model/schema.js";
|
|
4
5
|
import { HasExamples } from "./clickable-ref.js";
|
|
5
6
|
export declare class RenderedSchemaNodeComponent extends HasExamples {
|
|
@@ -12,8 +13,8 @@ export declare class RenderedSchemaNodeComponent extends HasExamples {
|
|
|
12
13
|
required: string[];
|
|
13
14
|
constructor();
|
|
14
15
|
renderMockRequest(e: CustomEvent): void;
|
|
15
|
-
render():
|
|
16
|
+
render(): TemplateResult<1>;
|
|
16
17
|
toggleNode(id: string): void;
|
|
17
|
-
renderNoExample():
|
|
18
|
-
renderObject(key: string, obj: any, required?: string[]):
|
|
18
|
+
renderNoExample(): TemplateResult<1>;
|
|
19
|
+
renderObject(key: string, obj: any, required?: string[]): TemplateResult<1>;
|
|
19
20
|
}
|
|
@@ -276,6 +276,59 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
|
|
|
276
276
|
}}>${refName}</span></div>`;
|
|
277
277
|
}
|
|
278
278
|
else {
|
|
279
|
+
//check if the mapKey is 'properties, if so, for each property, re-render
|
|
280
|
+
if (mapKey == 'properties') {
|
|
281
|
+
// child is an object, so extract the keys and treat them as schemas
|
|
282
|
+
const keys = Object.keys(obj[mapKey]);
|
|
283
|
+
// for each key, render the schema
|
|
284
|
+
const templates = [];
|
|
285
|
+
keys.forEach((key) => {
|
|
286
|
+
const child = obj[mapKey][key];
|
|
287
|
+
let sub = html ``;
|
|
288
|
+
if (Object.keys(obj[mapKey]).length > 1) {
|
|
289
|
+
sub = html `
|
|
290
|
+
<div class="object">
|
|
291
|
+
<pb33f-rendered-schema-node .schema="${child}" objectItem
|
|
292
|
+
skinny></pb33f-rendered-schema-node>
|
|
293
|
+
</div>`;
|
|
294
|
+
}
|
|
295
|
+
let v = [];
|
|
296
|
+
if (child.type) {
|
|
297
|
+
if (Array.isArray(child.type)) {
|
|
298
|
+
for (let i = 0; i < child.type.length; i++) {
|
|
299
|
+
const item = child.type[i];
|
|
300
|
+
v.push(html `<code>${item}</code>`);
|
|
301
|
+
if (i < child.type.length - 1) {
|
|
302
|
+
v.push(html `<span>, </span>`);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
else {
|
|
307
|
+
v.push(html `<code>${child.type}</code>`);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
templates.push(html `
|
|
311
|
+
<div class="object">
|
|
312
|
+
<span class="key">${key} ${v}: </span>
|
|
313
|
+
${sub}
|
|
314
|
+
</div>`);
|
|
315
|
+
});
|
|
316
|
+
return html `
|
|
317
|
+
<div class="object expandable">
|
|
318
|
+
<span @click="${() => {
|
|
319
|
+
this.toggleNode(id);
|
|
320
|
+
}}" class="expand key">${mapKey}</span>
|
|
321
|
+
<span class="expand" id="${id}-toggle" @click="${() => {
|
|
322
|
+
this.toggleNode(id);
|
|
323
|
+
}}">
|
|
324
|
+
<sl-icon class="expand" name="chevron-right"></sl-icon>
|
|
325
|
+
</span>
|
|
326
|
+
<div class="hide mong" id="${id}">
|
|
327
|
+
${templates}
|
|
328
|
+
</div>
|
|
329
|
+
</div>
|
|
330
|
+
`;
|
|
331
|
+
}
|
|
279
332
|
isObject = true;
|
|
280
333
|
const child = obj[mapKey];
|
|
281
334
|
if (child.$ref) {
|
|
@@ -291,7 +344,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
|
|
|
291
344
|
</div>
|
|
292
345
|
`;
|
|
293
346
|
}
|
|
294
|
-
if (child.type && !child.type.includes('object')) {
|
|
347
|
+
if (child.type && (!child.type.includes('object') || child.type != 'object')) {
|
|
295
348
|
// check if obj[key] has any other properties other than a type, if so render
|
|
296
349
|
let sub = html ``;
|
|
297
350
|
if (Object.keys(obj[mapKey]).length > 1) {
|
|
@@ -53,7 +53,7 @@ export default css `
|
|
|
53
53
|
|
|
54
54
|
sl-split-panel {
|
|
55
55
|
width: 100%;
|
|
56
|
-
|
|
56
|
+
height: 100%;
|
|
57
57
|
--divider-width: 2px;
|
|
58
58
|
}
|
|
59
59
|
|
|
@@ -188,6 +188,10 @@ export default css `
|
|
|
188
188
|
width: 100%;
|
|
189
189
|
}
|
|
190
190
|
|
|
191
|
+
.tab-group {
|
|
192
|
+
height: 100%
|
|
193
|
+
}
|
|
194
|
+
|
|
191
195
|
sl-tab-panel.tab-panel::part(base) {
|
|
192
196
|
height: 100%;
|
|
193
197
|
padding-top: 5px;
|
|
@@ -74,9 +74,11 @@ export declare class TheDoctor extends LitElement {
|
|
|
74
74
|
splitPanelExplorer: SlSplitPanel;
|
|
75
75
|
splitPanelRolodex: SlSplitPanel;
|
|
76
76
|
splitPanelInspector: SlSplitPanel;
|
|
77
|
+
private randomTicker;
|
|
77
78
|
private rulesetPulse;
|
|
78
79
|
explorerVisible: boolean;
|
|
79
80
|
minimapVisible: boolean;
|
|
81
|
+
minimapIconVisible: boolean;
|
|
80
82
|
explorerBooted: boolean;
|
|
81
83
|
activeURL: string;
|
|
82
84
|
rolodexNeedsReset: boolean;
|
|
@@ -161,6 +163,7 @@ export declare class TheDoctor extends LitElement {
|
|
|
161
163
|
private pendingLine;
|
|
162
164
|
private rolodexDividerPosition;
|
|
163
165
|
constructor(doctorEndpoint?: string);
|
|
166
|
+
tickRandomly(): void;
|
|
164
167
|
nukeWorkspaceHandler(): void;
|
|
165
168
|
minimapToggled(): void;
|
|
166
169
|
firstUpdated(): void;
|
|
@@ -224,6 +227,8 @@ export declare class TheDoctor extends LitElement {
|
|
|
224
227
|
selectControlTab(event: CustomEvent): void;
|
|
225
228
|
toggleSidebar(): void;
|
|
226
229
|
toggleExplorer(): void;
|
|
230
|
+
hideMinimapIcon(): void;
|
|
231
|
+
showMinimapIcon(): void;
|
|
227
232
|
closeExplorer(): void;
|
|
228
233
|
render(): import("lit-html").TemplateResult<1>;
|
|
229
234
|
fetchUrl(event: CustomEvent<ArchiveURLRequestedEvent>): void;
|
|
@@ -142,7 +142,9 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
142
142
|
this.renderedNode = new RenderedNodeComponent();
|
|
143
143
|
this.references = [];
|
|
144
144
|
this.minimapVisible = true;
|
|
145
|
+
this.minimapIconVisible = true;
|
|
145
146
|
this.nodeLimit = 150;
|
|
147
|
+
this.randomTicker = 0;
|
|
146
148
|
// extract the doctor endpoint from session storage.
|
|
147
149
|
const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
|
|
148
150
|
if (sessionEndpoint) {
|
|
@@ -229,6 +231,9 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
229
231
|
}
|
|
230
232
|
});
|
|
231
233
|
}
|
|
234
|
+
tickRandomly() {
|
|
235
|
+
this.randomTicker = Math.floor(Math.random() * 9999999);
|
|
236
|
+
}
|
|
232
237
|
nukeWorkspaceHandler() {
|
|
233
238
|
this.bagManager.resetBags();
|
|
234
239
|
ModelService.resetWorkspace().then(() => {
|
|
@@ -1044,6 +1049,7 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
1044
1049
|
}
|
|
1045
1050
|
// determine if the score went up or down and toast it!
|
|
1046
1051
|
this.problemsOverview.statistics = result;
|
|
1052
|
+
this.tickRandomly(); // tick randomly to refresh docs iframe.
|
|
1047
1053
|
// TODO: re-evaluate these toasts, they get annoying, fucking fast.
|
|
1048
1054
|
// if (this.problemsOverview.statistics) {
|
|
1049
1055
|
// const newScore = result.statistics.overallScore;
|
|
@@ -1991,6 +1997,7 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
1991
1997
|
if (this.explorerVisible && this.activeNode) {
|
|
1992
1998
|
this.explorer.moveToNode(this.activeNode);
|
|
1993
1999
|
}
|
|
2000
|
+
this.hideMinimapIcon();
|
|
1994
2001
|
this.explorerBooted = true;
|
|
1995
2002
|
// check if ths is safari and fire a warning toast!
|
|
1996
2003
|
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
|
|
@@ -2003,8 +2010,17 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2003
2010
|
});
|
|
2004
2011
|
}
|
|
2005
2012
|
}
|
|
2013
|
+
hideMinimapIcon() {
|
|
2014
|
+
console.log('hiding minimap icon');
|
|
2015
|
+
this.minimapIconVisible = false;
|
|
2016
|
+
}
|
|
2017
|
+
showMinimapIcon() {
|
|
2018
|
+
console.log('showing minimap icon');
|
|
2019
|
+
this.minimapIconVisible = true;
|
|
2020
|
+
}
|
|
2006
2021
|
closeExplorer() {
|
|
2007
2022
|
this.explorerVisible = false;
|
|
2023
|
+
this.showMinimapIcon();
|
|
2008
2024
|
setTimeout(() => {
|
|
2009
2025
|
if (this.pendingLine > 0) {
|
|
2010
2026
|
this.editor.editor?.setPosition({ lineNumber: this.pendingLine, column: 1 });
|
|
@@ -2141,10 +2157,11 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2141
2157
|
class="divider-vert"></sl-icon>
|
|
2142
2158
|
<div class="editor" slot="start">
|
|
2143
2159
|
|
|
2144
|
-
<sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist>
|
|
2160
|
+
<sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist style="${!this.minimapIconVisible ? 'display: none' : ''}">
|
|
2145
2161
|
<sl-icon-button @click="${this.minimapToggled}"
|
|
2146
2162
|
name="map"
|
|
2147
|
-
class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"
|
|
2163
|
+
class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"
|
|
2164
|
+
style="${!this.minimapIconVisible ? 'display: none' : ''}"></sl-icon-button>
|
|
2148
2165
|
</sl-tooltip>
|
|
2149
2166
|
|
|
2150
2167
|
${this.detailsDrawer}
|
|
@@ -2163,6 +2180,11 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2163
2180
|
Ruleset ${rulesetPulsePill}
|
|
2164
2181
|
</sl-tab>
|
|
2165
2182
|
|
|
2183
|
+
<sl-tab slot="nav" panel="docs" class="tab" id="docs" @click="${this.hideMinimapIcon}">
|
|
2184
|
+
API Docs
|
|
2185
|
+
</sl-tab>
|
|
2186
|
+
|
|
2187
|
+
|
|
2166
2188
|
<sl-tab-panel name="spec" class="tab-panel">
|
|
2167
2189
|
<div class="main-view">
|
|
2168
2190
|
${this.statusBar}
|
|
@@ -2186,7 +2208,6 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2186
2208
|
</div>
|
|
2187
2209
|
</div>
|
|
2188
2210
|
|
|
2189
|
-
|
|
2190
2211
|
<!-- EDITOR -->
|
|
2191
2212
|
<slot name="spec-editor"></slot>
|
|
2192
2213
|
<!-- EDITOR -->
|
|
@@ -2202,6 +2223,10 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2202
2223
|
@mouseleave="${this.ungrabExplorer}">${this.explorer}
|
|
2203
2224
|
</sl-tab-panel>
|
|
2204
2225
|
|
|
2226
|
+
<sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
|
|
2227
|
+
<iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
|
|
2228
|
+
</sl-tab-panel>
|
|
2229
|
+
|
|
2205
2230
|
</sl-tab-group>
|
|
2206
2231
|
</div>
|
|
2207
2232
|
${mainPanelView}
|
|
@@ -2210,14 +2235,6 @@ let TheDoctor = class TheDoctor extends LitElement {
|
|
|
2210
2235
|
</sl-split-panel>
|
|
2211
2236
|
|
|
2212
2237
|
</div>`;
|
|
2213
|
-
//
|
|
2214
|
-
// docs <iframe src="/docs.html" width="100%" height="100%"
|
|
2215
|
-
// style="border: none"></iframe>
|
|
2216
|
-
// <sl-tab slot="nav" panel="docs" class="tab" id="docs">
|
|
2217
|
-
// Docs
|
|
2218
|
-
// </sl-tab>
|
|
2219
|
-
// <sl-tab-panel name="docs" class="tab-panel">
|
|
2220
|
-
// </sl-tab-panel>
|
|
2221
2238
|
}
|
|
2222
2239
|
fetchUrl(event) {
|
|
2223
2240
|
this.activeURL = event.detail.url;
|
|
@@ -2320,6 +2337,9 @@ __decorate([
|
|
|
2320
2337
|
__decorate([
|
|
2321
2338
|
query('#inspector-split-panel')
|
|
2322
2339
|
], TheDoctor.prototype, "splitPanelInspector", void 0);
|
|
2340
|
+
__decorate([
|
|
2341
|
+
state()
|
|
2342
|
+
], TheDoctor.prototype, "randomTicker", void 0);
|
|
2323
2343
|
__decorate([
|
|
2324
2344
|
state()
|
|
2325
2345
|
], TheDoctor.prototype, "rulesetPulse", void 0);
|
|
@@ -2329,6 +2349,9 @@ __decorate([
|
|
|
2329
2349
|
__decorate([
|
|
2330
2350
|
state()
|
|
2331
2351
|
], TheDoctor.prototype, "minimapVisible", void 0);
|
|
2352
|
+
__decorate([
|
|
2353
|
+
state()
|
|
2354
|
+
], TheDoctor.prototype, "minimapIconVisible", void 0);
|
|
2332
2355
|
__decorate([
|
|
2333
2356
|
state()
|
|
2334
2357
|
], TheDoctor.prototype, "activeURL", void 0);
|