@pb33f/cowboy-components 0.5.3 → 0.5.5

package/dist/components/model-renderer/schema.d.ts

@@ -1,5 +1,6 @@
 import './description.js';
 import './example.js';
+import { TemplateResult } from "lit";
 import { Schema } from "../../model/schema.js";
 import { HasExamples } from "./clickable-ref.js";
 export declare class RenderedSchemaNodeComponent extends HasExamples {
@@ -12,8 +13,8 @@ export declare class RenderedSchemaNodeComponent extends HasExamples {
     required: string[];
     constructor();
     renderMockRequest(e: CustomEvent): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     toggleNode(id: string): void;
-    renderNoExample(): import("lit-html").TemplateResult<1>;
-    renderObject(key: string, obj: any, required?: string[]): import("lit-html").TemplateResult<1>;
+    renderNoExample(): TemplateResult<1>;
+    renderObject(key: string, obj: any, required?: string[]): TemplateResult<1>;
 }

package/dist/components/model-renderer/schema.js

@@ -276,6 +276,59 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                             }}>${refName}</span></div>`;
                         }
                         else {
+                            //check if the mapKey is 'properties, if so, for each property, re-render
+                            if (mapKey == 'properties') {
+                                // child is an object, so extract the keys and treat them as schemas
+                                const keys = Object.keys(obj[mapKey]);
+                                // for each key, render the schema
+                                const templates = [];
+                                keys.forEach((key) => {
+                                    const child = obj[mapKey][key];
+                                    let sub = html ``;
+                                    if (Object.keys(obj[mapKey]).length > 1) {
+                                        sub = html `
+                                            <div class="object">
+                                                <pb33f-rendered-schema-node .schema="${child}" objectItem
+                                                                            skinny></pb33f-rendered-schema-node>
+                                            </div>`;
+                                    }
+                                    let v = [];
+                                    if (child.type) {
+                                        if (Array.isArray(child.type)) {
+                                            for (let i = 0; i < child.type.length; i++) {
+                                                const item = child.type[i];
+                                                v.push(html `<code>${item}</code>`);
+                                                if (i < child.type.length - 1) {
+                                                    v.push(html `<span>,&nbsp;&nbsp;</span>`);
+                                                }
+                                            }
+                                        }
+                                        else {
+                                            v.push(html `<code>${child.type}</code>`);
+                                        }
+                                    }
+                                    templates.push(html `
+                                        <div class="object">
+                                            <span class="key">${key} ${v}: </span> 
+                                            ${sub}
+                                        </div>`);
+                                });
+                                return html `
+                                    <div class="object expandable">
+                                        <span @click="${() => {
+                                    this.toggleNode(id);
+                                }}" class="expand key">${mapKey}</span>
+                                        <span class="expand" id="${id}-toggle" @click="${() => {
+                                    this.toggleNode(id);
+                                }}">
+                                        <sl-icon class="expand" name="chevron-right"></sl-icon>
+                                    </span>
+                                        <div class="hide mong" id="${id}">
+                                          ${templates}
+                                        </div>
+                                    </div>
+                                    `;
+                            }
                             isObject = true;
                             const child = obj[mapKey];
                             if (child.$ref) {
@@ -291,7 +344,7 @@ let RenderedSchemaNodeComponent = class RenderedSchemaNodeComponent extends HasE
                                     </div>
                                 `;
                             }
-                            if (child.type && !child.type.includes('object')) {
+                            if (child.type && (!child.type.includes('object') || child.type != 'object')) {
                                 // check if obj[key] has any other properties other than a type, if so render
                                 let sub = html ``;
                                 if (Object.keys(obj[mapKey]).length > 1) {

package/dist/components/paginator/paginator.css.js

@@ -21,7 +21,7 @@ export default css `
     }
     
     .no-values {
-        min-height: 550px;
+        //min-height: 550px;
         width: 500px;
         margin: 0 auto;
         padding-top: 50px;

package/dist/components/the-doctor/the-doctor.css.js

@@ -53,7 +53,7 @@ export default css `
 
     sl-split-panel {
         width: 100%;
-       // height: calc(100% - 65px);
+        height: 100%;
         --divider-width: 2px;
     }
 
@@ -188,6 +188,10 @@ export default css `
         width: 100%;
     }
 
+    .tab-group {
+        height: 100%
+    }
+    
     sl-tab-panel.tab-panel::part(base) {
         height: 100%;
         padding-top: 5px;

package/dist/components/the-doctor/the-doctor.d.ts

@@ -74,9 +74,11 @@ export declare class TheDoctor extends LitElement {
     splitPanelExplorer: SlSplitPanel;
     splitPanelRolodex: SlSplitPanel;
     splitPanelInspector: SlSplitPanel;
+    private randomTicker;
     private rulesetPulse;
     explorerVisible: boolean;
     minimapVisible: boolean;
+    minimapIconVisible: boolean;
     explorerBooted: boolean;
     activeURL: string;
     rolodexNeedsReset: boolean;
@@ -161,6 +163,7 @@ export declare class TheDoctor extends LitElement {
     private pendingLine;
     private rolodexDividerPosition;
     constructor(doctorEndpoint?: string);
+    tickRandomly(): void;
     nukeWorkspaceHandler(): void;
     minimapToggled(): void;
     firstUpdated(): void;
@@ -224,6 +227,8 @@ export declare class TheDoctor extends LitElement {
     selectControlTab(event: CustomEvent): void;
     toggleSidebar(): void;
     toggleExplorer(): void;
+    hideMinimapIcon(): void;
+    showMinimapIcon(): void;
     closeExplorer(): void;
     render(): import("lit-html").TemplateResult<1>;
     fetchUrl(event: CustomEvent<ArchiveURLRequestedEvent>): void;

package/dist/components/the-doctor/the-doctor.js

@@ -142,7 +142,9 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.renderedNode = new RenderedNodeComponent();
         this.references = [];
         this.minimapVisible = true;
+        this.minimapIconVisible = true;
         this.nodeLimit = 150;
+        this.randomTicker = 0;
         // extract the doctor endpoint from session storage.
         const sessionEndpoint = sessionStorage.getItem(DoctorEndpoint);
         if (sessionEndpoint) {
@@ -229,6 +231,9 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         });
     }
+    tickRandomly() {
+        this.randomTicker = Math.floor(Math.random() * 9999999);
+    }
     nukeWorkspaceHandler() {
         this.bagManager.resetBags();
         ModelService.resetWorkspace().then(() => {
@@ -266,9 +271,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.whoAmI();
             }
         };
-        // TODO re-enable
         this.bus.connectToBroker(config);
-        //this.startTheDoctor()
     }
     addClickTrack(node) {
         history.pushState({ activeNode: node.idHash }, "", `?view=explore&node=${node.idHash}`);
@@ -1046,6 +1049,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                 }
                 // determine if the score went up or down and toast it!
                 this.problemsOverview.statistics = result;
+                this.tickRandomly(); // tick randomly to refresh docs iframe.
                 // TODO: re-evaluate these toasts, they get annoying, fucking fast.
                 // if (this.problemsOverview.statistics) {
                 //     const newScore = result.statistics.overallScore;
@@ -1674,6 +1678,13 @@ let TheDoctor = class TheDoctor extends LitElement {
                 this.creditTicker.credits = this.session.creditsRemaining;
             }
             this.creditTicker.visible = true;
+            const url = new URL(window.location.href);
+            const urlParam = url.searchParams.get('url');
+            if (urlParam) {
+                //this.urlInput.value = urlParam;
+                this.activeURL = urlParam;
+                this.lintSpec('', urlParam);
+            }
             LintingService.fetchAllHowToFix().then((result) => {
                 if (result) {
                     result.forEach((howToFix) => {
@@ -1741,7 +1752,7 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
         }).catch((e) => {
             this.platformUnavailable(e);
-            console.error("cannot start session");
+            console.error("cannot start session", e);
         });
     }
     fetchRulesetMap() {
@@ -1868,7 +1879,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         const url = new URL(window.location.href);
         const urlParam = url.searchParams.get('url');
         if (urlParam) {
-            this.urlInput.value = urlParam;
+            //this.urlInput.value = urlParam;
             this.activeURL = urlParam;
             this.lintSpec('', urlParam);
             return;
@@ -1986,6 +1997,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         if (this.explorerVisible && this.activeNode) {
             this.explorer.moveToNode(this.activeNode);
         }
+        this.hideMinimapIcon();
         this.explorerBooted = true;
         // check if ths is safari and fire a warning toast!
         const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
@@ -1998,8 +2010,17 @@ let TheDoctor = class TheDoctor extends LitElement {
             });
         }
     }
+    hideMinimapIcon() {
+        console.log('hiding minimap icon');
+        this.minimapIconVisible = false;
+    }
+    showMinimapIcon() {
+        console.log('showing minimap icon');
+        this.minimapIconVisible = true;
+    }
     closeExplorer() {
         this.explorerVisible = false;
+        this.showMinimapIcon();
         setTimeout(() => {
             if (this.pendingLine > 0) {
                 this.editor.editor?.setPosition({ lineNumber: this.pendingLine, column: 1 });
@@ -2136,10 +2157,11 @@ let TheDoctor = class TheDoctor extends LitElement {
                                      class="divider-vert"></sl-icon>
                             <div class="editor" slot="start">
 
-                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist>
+                                <sl-tooltip class="minimap-tip" content="Toggle source mini-map" hoist  style="${!this.minimapIconVisible ? 'display: none' : ''}">  
                                     <sl-icon-button @click="${this.minimapToggled}"
                                                     name="map"
-                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}"></sl-icon-button>
+                                                    class="minimap-toggle ${this.minimapVisible ? 'active' : ''}" 
+                                                    style="${!this.minimapIconVisible ? 'display: none' : ''}"></sl-icon-button>
                                 </sl-tooltip>
 
                                 ${this.detailsDrawer}
@@ -2158,6 +2180,11 @@ let TheDoctor = class TheDoctor extends LitElement {
                                         Ruleset ${rulesetPulsePill}
                                     </sl-tab>
 
+                                    <sl-tab slot="nav" panel="docs" class="tab" id="docs" @click="${this.hideMinimapIcon}">
+                                        API Docs
+                                    </sl-tab>
+                                    
+
                                     <sl-tab-panel name="spec" class="tab-panel">
                                         <div class="main-view">
                                             ${this.statusBar}
@@ -2181,7 +2208,6 @@ let TheDoctor = class TheDoctor extends LitElement {
                                                 </div>
                                             </div>
 
-
                                             <!-- EDITOR -->
                                             <slot name="spec-editor"></slot>
                                             <!-- EDITOR -->
@@ -2197,6 +2223,10 @@ let TheDoctor = class TheDoctor extends LitElement {
                                                   @mouseleave="${this.ungrabExplorer}">${this.explorer}
                                     </sl-tab-panel>
 
+                                    <sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
+                                        <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
+                                    </sl-tab-panel>
+
                                 </sl-tab-group>
                             </div>
                             ${mainPanelView}
@@ -2205,14 +2235,6 @@ let TheDoctor = class TheDoctor extends LitElement {
                 </sl-split-panel>
 
             </div>`;
-        //
-        // docs   <iframe src="/docs.html" width="100%" height="100%"
-        //                                                 style="border: none"></iframe>
-        //    <sl-tab slot="nav" panel="docs" class="tab" id="docs">
-        //                                         Docs
-        //                                     </sl-tab>
-        // <sl-tab-panel name="docs" class="tab-panel">
-        //                                     </sl-tab-panel>
     }
     fetchUrl(event) {
         this.activeURL = event.detail.url;
@@ -2315,6 +2337,9 @@ __decorate([
 __decorate([
     query('#inspector-split-panel')
 ], TheDoctor.prototype, "splitPanelInspector", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "randomTicker", void 0);
 __decorate([
     state()
 ], TheDoctor.prototype, "rulesetPulse", void 0);
@@ -2324,6 +2349,9 @@ __decorate([
 __decorate([
     state()
 ], TheDoctor.prototype, "minimapVisible", void 0);
+__decorate([
+    state()
+], TheDoctor.prototype, "minimapIconVisible", void 0);
 __decorate([
     state()
 ], TheDoctor.prototype, "activeURL", void 0);