@pb33f/cowboy-components 0.2.1 → 0.2.2

package/dist/components/model-renderer/rendered-node.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/model-renderer/rendered-node.css.js

@@ -0,0 +1,96 @@
+import { css } from "lit";
+export default css `
+    
+    h3 {
+        padding-top: 5px;
+        margin: 0;
+        font-size: 1.2rem;
+    }
+    
+    .node-path {
+        font-size: 0.7rem;
+        word-wrap: break-word;
+    }
+    
+    sl-badge::part(base) {
+       border-radius: 0;
+        background-color: var(--background-color);
+        border: 1px solid var(--secondary-color);
+        color: var(--secondary-color);
+    }
+
+        
+    .prop {
+        font-size: 0.8rem;
+        padding: 5px 5px 5px 10px;
+        border: 1px solid var(--secondary-color);
+    }
+    
+    .prop-key {
+        display: inline-block;
+        min-width: 80px;
+        text-align: right;
+    }
+    
+    .empty-node {
+        font-size: 0.8rem;
+        color: var(--primary-color);
+    }
+
+    .empty-node:hover {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+
+    .empty-node:active {
+        cursor: pointer;
+        text-decoration: underline;
+        color: var(--error-color);
+    }
+    
+    .property {
+        border: 1px solid var(--secondary-color);
+        width: 100%;
+        font-size: 0.8rem;
+        margin-top: 5px;
+    }
+    
+    
+    table {
+        border: 1px solid var(--secondary-color);
+        width: 100%;
+        font-size: 0.8rem;
+        margin-top: 5px;
+    }
+    
+    
+    
+    .nested-props {
+        margin-left: 20px;
+    }
+    
+    td {
+       // border: 1px dashed var(--secondary-color);
+    }
+    
+    td.key {
+        width: 5%;
+        text-align: right;
+        padding-right: 5px;
+    }
+    
+    .required {
+        display: inline-block;
+        padding: 1px;
+        color: var(--warn-200);
+        border: 1px solid var(--warn-200);
+        font-size: 0.6rem;
+    }
+
+   
+    
+    hr {
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+`;

package/dist/components/model-renderer/rendered-node.d.ts

@@ -0,0 +1,8 @@
+import { LitElement } from "lit";
+import { Node } from "../visualizer/visualizer.js";
+import './rendered-property.js';
+export declare class RenderedNodeComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    node: Node;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/model-renderer/rendered-node.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import renderedNodeCss from "./rendered-node.css.js";
+import './rendered-property.js';
+import sharedCss from "../../css/shared.css.js";
+let RenderedNodeComponent = class RenderedNodeComponent extends LitElement {
+    //buildProps(obj: any, required: string[] = []) {
+    // return html``
+    //
+    //
+    //
+    // const props: Map<string, any> = new Map<string, any>();
+    // for (const key in obj) {
+    //     if (obj.hasOwnProperty(key)) {
+    //         const element = obj[key];
+    //         props.set(key, element);
+    //     }
+    // }
+    // let requiredProps: string[] = []
+    // if (props.get('required')) {
+    //     requiredProps = props.get('required')
+    // }
+    // requiredProps.push(...required)
+    // console.log(requiredProps);
+    // return html`
+    //
+    //         <table>
+    //
+    //         ${Array.from(props).map(([key, value]) => {
+    //
+    //             if (!isNaN(key as any) && !isNaN(parseFloat(key as any))) {
+    //                 key = "-"
+    //             }
+    //
+    //             if (typeof value === 'object' && !Array.isArray(value)) {
+    //
+    //                 let required = false;
+    //                 if (requiredProps.includes(key)){
+    //                     required = true;
+    //                     const idx = requiredProps.indexOf(key);
+    //                     requiredProps.splice(idx, 1);
+    //                 }
+    //
+    //                 return html`
+    //                     <tr>
+    //
+    //                         <td colspan="2"> ${key} ${required? html`<span class="required">required</span>`: requiredProps}
+    //                             <div class="nested-props">${this.buildProps(value, requiredProps)}</div></td>
+    //                     </tr>`;
+    //             }
+    //
+    //             if (typeof value === 'object' && Array.isArray(value)) {
+    //                 if (key === 'required') {
+    //                     return html``;
+    //                 }
+    //                 return html`
+    //                     <tr>
+    //                         <td colspan="2"> ${key} []
+    //                             <div class="nested-props">${this.buildProps(value)}</div>
+    //                         </td>
+    //                     </tr>`;
+    //             }
+    //
+    //             if (key.startsWith('$ref')) {
+    //                 value = "REF()"
+    //             }
+    //
+    //
+    //             return html`
+    //                 <tr>
+    //                     <td class="key">${key}${key!='-'? ':':''}</td>
+    //                     <td>${value}</td>
+    //                 </tr>
+    //             `;
+    //     })}
+    //         </table>
+    //
+    // `
+    // }
+    render() {
+        if (!this.node) {
+            return html `
+                <div class="rendered-node">
+                    No Node
+                </div>
+            `;
+        }
+        console.log(this.node);
+        let renderedNode = html `<pb33f-rendered-property .value="${this.node.instance}" class="proppy"></pb33f-rendered-property>`;
+        if (!this.node.instance || Object.keys(this.node.instance).length === 0) {
+            renderedNode = html `<span class="empty-node">Defined on line [${this.node.line}]</span>`;
+        }
+        return html `
+            <div class="rendered-node">
+                <sl-badge>${this.node.type}</sl-badge>
+                <h3>${this.node.label}</h3>
+                <span class="node-path">$.<pb33f-render-json-path path="${this.node.id}"></pb33f-render-json-path></span>
+                <hr/>
+                ${renderedNode}
+            </div>
+        `;
+    }
+};
+RenderedNodeComponent.styles = [sharedCss, renderedNodeCss];
+__decorate([
+    property()
+], RenderedNodeComponent.prototype, "node", void 0);
+RenderedNodeComponent = __decorate([
+    customElement('pb33f-rendered-node')
+], RenderedNodeComponent);
+export { RenderedNodeComponent };

package/dist/components/model-renderer/rendered-property.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/model-renderer/rendered-property.css.js

@@ -0,0 +1,118 @@
+import { css } from "lit";
+export default css `
+    
+    .property {
+        border-left: 1px dashed var(--secondary-color);
+       
+        font-size: 0.8rem;
+        //padding-top: 10px;
+        padding-left: 10px;
+        //padding-bottom: 10px;
+        
+        //margin-bottom: 30px;
+    }
+    
+    .property-start {
+        
+    }
+
+    .property-end {
+
+    }
+
+    .inline-property {
+        font-size: 0.8rem;
+        margin-bottom: 5px;
+        margin-top: 5px;
+    }
+
+    .inline-ref {
+        font-size: 0.8rem;
+        margin-top: 10px;
+        margin-bottom: 10px;
+    }
+    
+    .reflink {
+        color: var(--terminal-text);
+    }
+
+    .poly-reflink {
+        color: var(--warn-color);
+    }
+    
+    
+    sl-icon.reflink, sl-icon.poly-reflink {
+        font-size: 1.3rem;
+        vertical-align: sub;
+    }
+    
+    .inline-ref:hover {
+        text-decoration: underline;
+        cursor: pointer;
+     }
+    .inline-ref:active {
+        text-decoration: underline;
+        cursor: pointer;
+        color: var(--error-color);
+    }
+    
+    .type {
+        display: inline-block;
+        padding: 1px;
+        color: var(--secondary-color);
+        //border: 1px solid var(--secondary-color);
+        font-size: 0.8rem;
+        margin-bottom: 5px;
+    }
+    .nested {
+        padding-left: 15px;
+       margin-top: 5px;
+    }
+    
+    .nested-inline {
+        display: inline-block;
+        text-align: center;
+    }
+    
+    .object-node {
+        margin-bottom: 5px;
+        margin-top: 5px;
+    }
+
+    .required {
+        display: inline-block;
+        padding: 1px;
+        color: var(--primary-color);
+       
+        font-size: 0.7rem;
+    }
+
+    .ref {
+        display: inline-block;
+        padding: 1px;
+        color: var(--primary-color);
+        border: 1px dashed var(--primary-color);
+        font-size: 0.7rem;
+    }
+
+    .label {
+        font-family: var(--font-stack-bold), monospace;
+    }
+    
+    .prop-key {
+        color: var(--font-color-sub1)
+    }
+
+    .prop-type {
+        color: var(--primary-color);
+       font-family: var(--font-stack-bold), monospace;  
+    }
+    
+    .summary {
+        color: red;
+        border: 1px dashed var(--font-color-sub2);
+        padding: 5px;
+    }
+
+
+`;

package/dist/components/model-renderer/rendered-property.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class RenderedPropertyComponent extends LitElement {
+    static styles: import("lit").CSSResult[];
+    requiredProps: string[];
+    propType: string[];
+    value: any;
+    open: boolean;
+    polyParent: boolean;
+    ignoreProps: string[];
+    depth: number;
+    constructor();
+    toggleOpen(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/model-renderer/rendered-property.js

@@ -0,0 +1,204 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, property } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import renderedPropertyCss from "./rendered-property.css.js";
+let RenderedPropertyComponent = class RenderedPropertyComponent extends LitElement {
+    constructor() {
+        super();
+        this.ignoreProps = ['required', 'example', 'examples', 'type'];
+        this.depth = 0;
+        this.polyParent = false;
+    }
+    toggleOpen() {
+        this.open = !this.open;
+    }
+    render() {
+        if (!this.value || Object.keys(this.value).length === 0) {
+            return html ``;
+        }
+        const props = new Map();
+        for (const key in this.value) {
+            if (this.value.hasOwnProperty(key)) {
+                const element = this.value[key];
+                props.set(key, element);
+            }
+        }
+        let requiredProps = [];
+        if (props.get('required')) {
+            const rp = props.get('required');
+            if (typeof rp == 'boolean') {
+                requiredProps = ['true'];
+            }
+            else {
+                requiredProps = rp;
+            }
+        }
+        if (Array.isArray(this.requiredProps) && this.requiredProps.length > 0) {
+            requiredProps.push(...this.requiredProps);
+        }
+        let hasType = false;
+        if (this.value.hasOwnProperty('type')) {
+            hasType = true;
+        }
+        let typeDef = html ``;
+        if (this.depth == 0 && hasType) {
+            if (Array.isArray(this.value['type'])) {
+                typeDef = html `
+                    <div>
+                        <span class="label">type:</span> ${Array.from(this.value['type']).map((type, i) => {
+                    return html `<span class="type">${type}</span> ${i + 1 < this.value['type'].length ? ', ' : ''}`;
+                })}
+                    </div>`;
+            }
+            else {
+                typeDef = html `
+                    <div>
+                        <span class="label">type:</span> <span class="type">${this.value['type']}</span>
+                    </div>`;
+            }
+        }
+        const propArr = Array.from(props);
+        return html `
+
+            <div class="property">
+                ${typeDef}
+
+                ${propArr.map(([key, value], i) => {
+            let isNumKey = false;
+            if (!isNaN(key) && !isNaN(parseFloat(key))) {
+                key = `[${i}]`;
+                isNumKey = true;
+            }
+            let isPoly = false;
+            if (key == 'oneOf' || key == 'anyOf' || key == 'allOf' || this.polyParent) {
+                isPoly = true;
+            }
+            if (typeof value === 'object' && !Array.isArray(value)) {
+                if (this.ignoreProps.includes(key)) {
+                    return html ``;
+                }
+                let required = false;
+                if (requiredProps?.includes(key)) {
+                    required = true;
+                    const idx = requiredProps.indexOf(key);
+                    requiredProps.splice(idx, 1);
+                }
+                let propType = [];
+                let propTypeRendered = html ``;
+                if (value.hasOwnProperty('type')) {
+                    propType = value['type'];
+                    if (Array.isArray(propType) && propType.length > 0) {
+                        propTypeRendered = html `${propType.length > 0 ? propType.map((type) => {
+                            return html `<span class="type">${type}</span>`;
+                        }) : html ``}`;
+                    }
+                    else {
+                        propTypeRendered = html `<span class="type">${propType}</span>`;
+                    }
+                }
+                let nested = html `
+                            <div class="nested">
+                                <pb33f-rendered-property .value="${value}"
+                                                         .requiredProps="${requiredProps}"
+                                                         .depth="${this.depth + 1}"
+                                                         ?polyParent="${isPoly}"></pb33f-rendered-property>
+                            </div>`;
+                let isRef = false;
+                // let isRefRendered = html``
+                if (value.hasOwnProperty('$ref')) {
+                    isRef = true;
+                    const ref = value['$ref'];
+                    const segs = ref.split('/');
+                    const refName = segs[segs.length - 1];
+                    // isRefRendered = html`<span class="ref">refy</span>:`
+                    nested = html `
+                                <div class="nested${isNumKey ? '-inline' : ''}">
+                                    <sl-icon name="link"
+                                             class="${this.polyParent ? 'poly-reflink' : 'reflink'}"></sl-icon>
+                                    <span class="inline-ref ${this.polyParent ? 'poly-reflink' : 'reflink'}">${refName}</span>
+                                </div>`;
+                }
+                return html `
+                            <div class="object-node">
+                                <span class="${(propType.length > 0 || isRef) ? 'prop-type' : 'prop-key'}">${key}</span>:
+                                ${propTypeRendered}
+                                ${required ? html `<span class="required">*required</span>` : ''}
+                                ${nested}
+                            </div>
+                        `;
+            }
+            if (typeof value === 'object' && Array.isArray(value)) {
+                if (this.ignoreProps.includes(key)) {
+                    return html ``;
+                }
+                let nested = html `
+                            <div class="nested">
+                                <pb33f-rendered-property .value="${value}"
+                                                         .requiredProps="${this.requiredProps}"
+                                                         .depth="${this.depth + 1}"
+                                                         ?polyParent="${isPoly}"></pb33f-rendered-property>
+                            </div>`;
+                if (value.length == 0) {
+                    nested = html `<span class="nested-inline">[empty]</span>`;
+                }
+                return html `
+                            <div>
+                                <span class="${(value.length == 0) ? 'prop-type' : 'prop-key'}">${key}</span>:
+                                ${nested}
+                            </div>
+                            </div>`;
+            }
+            let renderedProp = html `<span class="prop-type">${key}</span>: ${value}`;
+            if (key.startsWith('$ref')) {
+                const segs = value.split('/');
+                value = segs[segs.length - 1];
+                renderedProp = html `reference: <div class="nested-inline"><sl-icon name="link" class="reflink"></sl-icon>
+                            <span class="inline-ref reflink">${value}</span></div>`;
+            }
+            if (key == 'description' || key == 'summary') {
+                renderedProp = html `<div class="summary">${value}</div>`;
+            }
+            if (this.ignoreProps.includes(key)) {
+                return html ``;
+            }
+            const op = html `<div class="inline-property">${renderedProp}</div>`;
+            if (this.depth > 0) {
+                this.depth--;
+            }
+            return op;
+        })}
+            </div>
+
+
+
+        `;
+    }
+};
+RenderedPropertyComponent.styles = [renderedPropertyCss];
+__decorate([
+    property()
+], RenderedPropertyComponent.prototype, "requiredProps", void 0);
+__decorate([
+    property()
+], RenderedPropertyComponent.prototype, "propType", void 0);
+__decorate([
+    property()
+], RenderedPropertyComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], RenderedPropertyComponent.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean })
+], RenderedPropertyComponent.prototype, "polyParent", void 0);
+__decorate([
+    property({ type: Number })
+], RenderedPropertyComponent.prototype, "depth", void 0);
+RenderedPropertyComponent = __decorate([
+    customElement('pb33f-rendered-property')
+], RenderedPropertyComponent);
+export { RenderedPropertyComponent };

package/dist/components/model-tree/tree-item.d.ts

@@ -0,0 +1,10 @@
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { TemplateResult } from "lit";
+import { Node } from "../visualizer/visualizer";
+import { SlTreeItem } from "@shoelace-style/shoelace";
+export declare class ModelTreeItem extends SlTreeItem {
+    node: Node;
+    results: TemplateResult[];
+    constructor(node: Node, results: TemplateResult[]);
+    render(): TemplateResult<1>;
+}

package/dist/components/model-tree/tree-item.js

@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { customElement, property } from "lit/decorators.js";
+import { html } from "lit";
+import { SlTreeItem } from "@shoelace-style/shoelace";
+let ModelTreeItem = class ModelTreeItem extends SlTreeItem {
+    constructor(node, results) {
+        super();
+        this.node = node;
+        this.results = results;
+    }
+    render() {
+        return html `
+            <sl-tree-item expanded>
+                <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
+                <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>
+                ${this.node.label} (${this.node.nodePath})
+                ${this.results}
+            </sl-tree-item>
+        `;
+    }
+};
+__decorate([
+    property()
+], ModelTreeItem.prototype, "node", void 0);
+__decorate([
+    property()
+], ModelTreeItem.prototype, "results", void 0);
+ModelTreeItem = __decorate([
+    customElement("pb33f-model-treeitem")
+], ModelTreeItem);
+export { ModelTreeItem };

package/dist/components/model-tree/tree.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/model-tree/tree.css.js

@@ -0,0 +1,20 @@
+import { css } from "lit";
+export default css `
+
+    sl-tree {
+        --indent-guide-width: 1px;
+        --indent-guide-color: var(--secondary-color);
+        --indent-guide-style: dashed;
+        
+        
+    }
+    sl-tree-item {
+            
+    }
+    
+    
+    sl-tree-item::part(expand-button) {
+        rotate: none;
+    }
+    
+`;

package/dist/components/model-tree/tree.d.ts

@@ -0,0 +1,16 @@
+import '@shoelace-style/shoelace/dist/components/tree/tree.js';
+import '@shoelace-style/shoelace/dist/components/tree-item/tree-item.js';
+import { LitElement, TemplateResult } from "lit";
+import { Node } from "../visualizer/visualizer.js";
+import { SlTreeItem } from "@shoelace-style/shoelace";
+export declare class ModelTree extends LitElement {
+    static styles: import("lit").CSSResult[];
+    node: Node;
+    nodeClicked(nodeHashId: string): void;
+    explorerClicked(nodeHashId: string): void;
+    collapse(evt: Event, node: Node): void;
+    expanded(evt: Event, node: Node): void;
+    buildTree(node: Node, depth: number): TemplateResult;
+    nodesSelected(treeItems: SlTreeItem[]): void;
+    render(): TemplateResult<1>;
+}