@api-client/ui 0.0.14 → 0.0.17

package/src/elements/project/ProjectNavigation.styles.ts

@@ -1,25 +1,23 @@
-import { css } from "lit";
-import navStyles from '../navigation/AppNavigation.styles.js';
+import { css } from 'lit'
+import navStyles from '../navigation/internals/AppNavigation.styles.js'
 
 export default [
   navStyles,
   css`
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: calc(100% - 56px);
+    .empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: calc(100% - 56px);
 
-    color: var(--md-sys-color-on-surface-variant);
-    font-family: var(--md-sys-typescale-label-large-font-family-name);
-    font-style: var(--md-sys-typescale-label-large-font-family-style);
-    font-weight: var(--md-sys-typescale-label-large-font-weight);
-    font-size: var(--md-sys-typescale-label-large-font-size);
-    letter-spacing: var(--md-sys-typescale-label-large-tracking);
-    line-height: var(--md-sys-typescale-label-large-height);
-    text-transform: var(--md-sys-typescale-label-large-text-transform);
-    text-decoration: var(--md-sys-typescale-label-large-text-decoration);
-  }
-  `
-];
+      color: var(--md-sys-color-on-surface-variant);
+
+      font-family: var(--md-sys-typescale-label-large-font);
+      font-weight: var(--md-sys-typescale-label-large-weight);
+      font-size: var(--md-sys-typescale-label-large-size);
+      letter-spacing: var(--md-sys-typescale-label-large-tracking);
+      line-height: var(--md-sys-typescale-label-large-height);
+    }
+  `,
+]

package/src/elements/project/ProjectNavigation.ts

@@ -1,164 +1,164 @@
-/* eslint-disable no-continue */
-/* eslint-disable class-methods-use-this */
-import { html, TemplateResult, PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
-import { 
-  HttpProject, ProjectFolder, ProjectRequest, ProjectFolderKind, ProjectRequestKind, 
-  Environment, EnvironmentKind,
-} from '@api-client/core/build/browser.js';
-import { Events } from '../../events/Events.js';
-import AppNavigation from '../navigation/AppNavigationElement.js';
+import { html, TemplateResult, PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+import {
+  HttpProject,
+  ProjectFolder,
+  ProjectRequest,
+  ProjectFolderKind,
+  ProjectRequestKind,
+  Environment,
+  EnvironmentKind,
+} from '@api-client/core/browser.js'
+import { Events } from '../../events/Events.js'
+import AppNavigation from '../navigation/internals/AppNavigationElement.js'
 
 export default class ProjectNavigation extends AppNavigation {
   /**
    * The instance of the project to create the navigation for.
    */
-  @property({ type: Object }) project?: HttpProject;
+  @property({ type: Object }) accessor project: HttpProject | undefined
 
   /**
    * Computed value. Returns true when the project has any items to render in the view.
    */
   get hasItems(): boolean {
-    const { project } = this;
+    const { project } = this
     if (!project) {
-      return false;
+      return false
     }
     // the HttpProject doesn't do any computations when folder is not set. It's just a copy of the source array.
-    const folders = project.listFolders();
-    const requests = project.listRequests();
-    const environments = project.listEnvironments();
-    return !!folders.length || !!requests.length || !!environments.length;
+    const folders = project.listFolders()
+    const requests = project.listRequests()
+    const environments = project.listEnvironments()
+    return !!folders.length || !!requests.length || !!environments.length
   }
 
   constructor() {
-    super();
-    this.noVisualSelection = true;
+    super()
+    this.noVisualSelection = true
   }
 
   override connectedCallback(): void {
-    super.connectedCallback();
-    this.setAttribute('aria-label', 'HTTP project');
+    super.connectedCallback()
+    this.setAttribute('aria-label', 'HTTP project')
   }
 
   protected override willUpdate(cp: PropertyValues<this>): void {
     if (cp.has('project') && this.project) {
-      this.label = this.project.info.renderLabel;
+      this.label = this.project.info.renderLabel
     }
-    super.willUpdate(cp);
+    super.willUpdate(cp)
   }
 
-  protected override _setupDataTransfer(item: HTMLLIElement, dt: DataTransfer): void {
-    const { project } = this;
+  protected override setupDataTransfer(item: HTMLLIElement, dt: DataTransfer): void {
+    const { project } = this
     if (!project) {
-      return;
+      return
     }
-    super._setupDataTransfer(item, dt);
-    dt.setData('text/httpproject', project.key);
+    super.setupDataTransfer(item, dt)
+    dt.setData('text/httpproject', project.key)
   }
 
-  protected override _commitName(key: string, kind: string, name: string): void {
-    const { project } = this;
+  protected override commitName(key: string, kind: string, name: string): void {
+    const { project } = this
     if (!project) {
-      return;
+      return
     }
     if (!name) {
-      return;
+      return
     }
     if (kind === ProjectFolderKind) {
-      const object = project.findFolder(key);
+      const object = project.findFolder(key)
       if (!object) {
-        throw new Error(`Invalid state. Folder not found.`);
+        throw new Error(`Invalid state. Folder not found.`)
       }
-      object.info.name = name;
+      object.info.name = name
     } else if (kind === ProjectRequestKind) {
-      const object = project.findRequest(key);
+      const object = project.findRequest(key)
       if (!object) {
-        throw new Error(`Invalid state. Request not found.`);
+        throw new Error(`Invalid state. Request not found.`)
       }
-      object.info.name = name;
+      object.info.name = name
     } else if (kind === EnvironmentKind) {
-      const object = project.findEnvironment(key);
+      const object = project.findEnvironment(key)
       if (!object) {
-        throw new Error(`Invalid state. Environment not found.`);
+        throw new Error(`Invalid state. Environment not found.`)
       }
-      object.info.name = name;
+      object.info.name = name
     } else {
-      throw new Error(`Invalid state. Unknown kind.`);
+      throw new Error(`Invalid state. Unknown kind.`)
     }
-    this.edited = undefined;
-    Events.HttpProject.changed(this);
-    Events.HttpProject.State.nameChanged(key, kind, this);
+    this.edited = undefined
+    Events.HttpProject.changed(this)
+    Events.HttpProject.State.nameChanged(key, kind, this)
   }
 
   override render(): TemplateResult | string {
-    const { project } = this;
+    const { project } = this
     if (!project) {
-      return html``;
+      return html``
     }
     if (!this.hasItems) {
-      return this._emptyStateTemplate();
+      return this._emptyStateTemplate()
     }
-    const content = this._renderParentChildrenTemplate(project);
-    return html`
-    ${this.renderLabel()}
-    ${this._outerListTemplate(content) }
-    `;
+    const content = this._renderParentChildrenTemplate(project)
+    return html` ${this.renderLabel()} ${this.renderOuterList(content)} `
   }
 
   protected _renderParentChildrenTemplate(parent: HttpProject | ProjectFolder): TemplateResult | string {
-    const { key } = parent;
-    const folders = parent.listFolders();
-    const requests = parent.listRequests();
-    const environments = parent.listEnvironments();
-    const isProject = parent.getProject() === undefined;
-    const isEmpty = !folders.length && !environments.length && !requests.length;
+    const { key } = parent
+    const folders = parent.listFolders()
+    const requests = parent.listRequests()
+    const environments = parent.listEnvironments()
+    const isProject = parent.getProject() === undefined
+    const isEmpty = !folders.length && !environments.length && !requests.length
     if (isEmpty) {
-      return html`<p class="list-item-content empty" aria-disabled="true">Empty folder</p>`;
+      return html`<p class="list-item-content empty" aria-disabled="true">Empty folder</p>`
     }
     return html`
-    ${folders.map(f => this.renderFolder(f, isProject ? undefined : key))}
-    ${environments.map(r => this.renderEnvironment(r, isProject ? undefined : key))}
-    ${requests.map(r => this.renderRequest(r, isProject ? undefined : key))}
-    `;
+      ${folders.map((f) => this.renderFolder(f, isProject ? undefined : key))}
+      ${environments.map((r) => this.renderEnvironment(r, isProject ? undefined : key))}
+      ${requests.map((r) => this.renderRequest(r, isProject ? undefined : key))}
+    `
   }
 
   protected _emptyStateTemplate(): TemplateResult | string {
     return html`
-    ${this.renderLabel()}
-    <div class="empty-state">
-      <p>This project has no items.</p>
-      <p>Right-click on this panel to add a request.</p>
-    </div>
-    `;
+      ${this.renderLabel()}
+      <div class="empty-state">
+        <p>This project has no items.</p>
+        <p>Right-click on this panel to add a request.</p>
+      </div>
+    `
   }
 
   protected renderFolder(folder: ProjectFolder, parentKey?: string): TemplateResult | string {
-    const content = this._renderParentChildrenTemplate(folder);
-    const name = folder.info.name || 'Unnamed folder';
-    const { kind, key } = folder;
-    return this._parentListItemTemplate(key, kind, name, content, {
+    const content = this._renderParentChildrenTemplate(folder)
+    const name = folder.info.name || 'Unnamed folder'
+    const { kind, key } = folder
+    return this.renderParentListItem(key, kind, name, content, {
       parent: parentKey,
       parentIcon: 'folderFilled',
-    });
+    })
   }
 
   protected renderRequest(request: ProjectRequest, parentKey?: string): TemplateResult | string {
-    const name = request.info.name || 'Unnamed request';
-    const { key, kind } = request;
-    const content = this._itemContentTemplate('request', name);
-    return this._listItemTemplate(key, kind, name, content, {
+    const name = request.info.name || 'Unnamed request'
+    const { key, kind } = request
+    const content = this.renderItemContent('request', name)
+    return this.renderListItem(key, kind, name, content, {
       parent: parentKey,
       draggable: true,
-    });
+    })
   }
 
   protected renderEnvironment(environment: Environment, parentKey?: string): TemplateResult | string {
-    const name = environment.info.name || 'Unnamed environment';
-    const { key, kind } = environment;
-    const content = this._itemContentTemplate('environment', name);
-    return this._listItemTemplate(key, kind, name, content, {
+    const name = environment.info.name || 'Unnamed environment'
+    const { key, kind } = environment
+    const content = this.renderItemContent('environment', name)
+    return this.renderListItem(key, kind, name, content, {
       parent: parentKey,
       draggable: true,
-    });
+    })
   }
 }

package/src/elements/project/ProjectRunReport.styles.ts

@@ -1,8 +1,8 @@
-import { css } from "lit";
-import { StatusStyles } from '../http/HttpStatus.js';
-import badge from '../../styles/m3/badge.module.js';
-import httpLabelColors from '../http/HttpLabelColors.js';
-import HttpLabelStyles from '../http/HttpLabelStyles.js';
+import { css } from 'lit'
+import { StatusStyles } from '../http/HttpStatus.js'
+import badge from '../../styles/m3/badge.module.js'
+import httpLabelColors from '../http/HttpLabelColors.js'
+import HttpLabelStyles from '../http/HttpLabelStyles.js'
 
 export default [
   StatusStyles,
@@ -10,138 +10,130 @@ export default [
   HttpLabelStyles,
   httpLabelColors,
   css`
-  :host {
-    display: block;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 12px;
-  }
-
-  .header > :not(:last-child) {
-    margin-right: 12px;
-  }
-
-  .list-content {
-    display: block;
-    flex: 1;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .list-contents {
-    overflow: hidden;
-  }
-
-  .secondary {
-    font-size: .875rem;
-    color: var(--secondary-text-color);
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .status-code {
-    margin-right: 8px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .request-title-dropdown {
-    max-width: 220px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    direction: rtl;
-    text-align: left;
-  }
-
-  .history-label {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .view-toggle {
-    margin-left: auto;
-  }
-
-  .summary-header {
-    font-family: var(--md-sys-typescale-body-large-font-family-name);
-    font-style: var(--md-sys-typescale-body-large-font-family-style);
-    font-weight: var(--md-sys-typescale-body-large-font-weight);
-    font-size: var(--md-sys-typescale-body-large-font-size);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking);
-    line-height: var(--md-sys-typescale-body-large-height);
-    text-transform: var(--md-sys-typescale-body-large-text-transform);
-    text-decoration: var(--md-sys-typescale-body-large-text-decoration);
-    margin-bottom: 40px;
-  }
-
-  table {
-    border-collapse: collapse;
-    width: 100%;
-    font-family: var(--md-sys-typescale-body-large-font-family-name);
-    font-style: var(--md-sys-typescale-body-large-font-family-style);
-    font-weight: var(--md-sys-typescale-body-large-font-weight);
-    font-size: var(--md-sys-typescale-body-large-font-size);
-    letter-spacing: var(--md-sys-typescale-body-large-tracking);
-    line-height: var(--md-sys-typescale-body-large-height);
-    text-transform: var(--md-sys-typescale-body-large-text-transform);
-    text-decoration: var(--md-sys-typescale-body-large-text-decoration);
-  }
-
-  table td {
-    vertical-align: text-bottom;
-    padding: 20px;
-  }
-
-  table th {
-    border-bottom: 1px var(--md-sys-color-outline-variant) solid;
-    padding: 20px;
-  }
-
-  table .request {
-    text-align: left;
-  }
-
-  table .status {
-    text-align: right;
-    width: 120px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  table .time,
-  table .assertions {
-    text-align: right;
-    width: 80px;
-  }
-
-  .execution-table:not(:last-child) {
-    margin-bottom: 40px;
-  }
-
-  table caption {
-    font-family: var(--md-sys-typescale-title-large-font-family-name);
-    font-style: var(--md-sys-typescale-title-large-font-family-style);
-    font-weight: var(--md-sys-typescale-title-large-font-weight);
-    font-size: var(--md-sys-typescale-title-large-font-size);
-    letter-spacing: var(--md-sys-typescale-title-large-tracking);
-    line-height: var(--md-sys-typescale-title-large-height);
-    text-transform: var(--md-sys-typescale-title-large-text-transform);
-    text-decoration: var(--md-sys-typescale-title-large-text-decoration);
-  }
-
-  .link {
-    cursor: pointer;
-    text-decoration: underline;
-  }
-  `
-];
+    :host {
+      display: block;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    .header > :not(:last-child) {
+      margin-right: 12px;
+    }
+
+    .list-content {
+      display: block;
+      flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .list-contents {
+      overflow: hidden;
+    }
+
+    .secondary {
+      font-size: 0.875rem;
+      color: var(--secondary-text-color);
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    .status-code {
+      margin-right: 8px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .request-title-dropdown {
+      max-width: 220px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      direction: rtl;
+      text-align: left;
+    }
+
+    .history-label {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .view-toggle {
+      margin-left: auto;
+    }
+
+    .summary-header {
+      font-family: var(--md-sys-typescale-body-large-font);
+      font-weight: var(--md-sys-typescale-body-large-weight);
+      font-size: var(--md-sys-typescale-body-large-size);
+      letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      line-height: var(--md-sys-typescale-body-large-height);
+
+      margin-bottom: 40px;
+    }
+
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      font-family: var(--md-sys-typescale-body-large-font);
+      font-weight: var(--md-sys-typescale-body-large-weight);
+      font-size: var(--md-sys-typescale-body-large-size);
+      letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      line-height: var(--md-sys-typescale-body-large-height);
+    }
+
+    table td {
+      vertical-align: text-bottom;
+      padding: 20px;
+    }
+
+    table th {
+      border-bottom: 1px var(--md-sys-color-outline-variant) solid;
+      padding: 20px;
+    }
+
+    table .request {
+      text-align: left;
+    }
+
+    table .status {
+      text-align: right;
+      width: 120px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    table .time,
+    table .assertions {
+      text-align: right;
+      width: 80px;
+    }
+
+    .execution-table:not(:last-child) {
+      margin-bottom: 40px;
+    }
+
+    table caption {
+      font-family: var(--md-sys-typescale-title-large-font);
+      font-weight: var(--md-sys-typescale-title-large-weight);
+      font-size: var(--md-sys-typescale-title-large-size);
+      letter-spacing: var(--md-sys-typescale-title-large-tracking);
+      line-height: var(--md-sys-typescale-title-large-height);
+    }
+
+    .link {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+  `,
+]