@api-client/ui 0.0.17 → 0.1.1

package/src/elements/schema-design/AssociationFormElement.ts

@@ -1,155 +0,0 @@
-import { css, CSSResult, html, PropertyValues, TemplateResult } from 'lit'
-import { property, state } from 'lit/decorators.js'
-import { live } from 'lit/directives/live.js'
-import ApiElement from '../ApiElement.js'
-import EditorCommon from './CommonStyles.js'
-import { EventUtils } from '@api-client/core/browser.js'
-import { type DataNamespace, type DataAssociation } from '@api-client/core/legacy.js'
-import theme from '../theme.js'
-import typography from '../../styles/m3/typography.module.js'
-import type Input from '../../md/input/Input.js'
-import type CheckboxElement from '../../md/checkbox/internals/CheckboxElement.js'
-import '../../md/checkbox/ui-checkbox.js'
-import '../../md/text-field/ui-text-field.js'
-import '../../md/divider/ui-divider.js'
-import '../../md/icon-button/ui-icon-button.js'
-import '../../md/icons/ui-icon.js'
-
-export default class AssociationFormElement extends ApiElement {
-  static override get styles(): CSSResult[] {
-    return [
-      theme,
-      EditorCommon,
-      typography,
-      css`
-        :host {
-          display: block;
-        }
-      `,
-    ]
-  }
-
-  /**
-   * The key of the association to edit.
-   * @attribute
-   */
-  @property({ type: String, reflect: true }) accessor key: string | undefined
-
-  /**
-   * The read data namespace.
-   */
-  @property({ type: Object }) accessor root: DataNamespace | undefined
-
-  /**
-   * The computed entity when the key or root change.
-   */
-  @state() protected accessor _association: DataAssociation | undefined
-
-  override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('key')) {
-      this._computeAssociation()
-    }
-  }
-
-  /**
-   * Computes the view value for the association.
-   * This should be called before the update is complete so this won't trigger another update.
-   */
-  protected _computeAssociation(): void {
-    const { root, key } = this
-    if (!root || !key) {
-      this._association = undefined
-      return
-    }
-    this._association = root.definitions.associations.find((i) => i.key === key)
-  }
-
-  protected _infoChangeHandler(e: Event): void {
-    const { _association } = this
-    if (!_association) {
-      return
-    }
-    const node = e.target as Input
-    const { name, value } = node
-    if (!['name', 'description', 'displayName'].includes(name as string)) {
-      return
-    }
-    if (name === 'name' && !value) {
-      return
-    }
-    _association.info[name as 'name' | 'description' | 'displayName'] = value
-    this.notifyChange()
-    this.requestUpdate()
-  }
-
-  protected _checkedHandler(e: Event): void {
-    const { _association } = this
-    if (!_association) {
-      return
-    }
-    const input = e.target as CheckboxElement
-    const name = input.name as 'multiple' | 'required'
-    const { checked } = input
-    if (_association[name] === checked) {
-      return
-    }
-    _association[name] = checked
-    this.notifyChange()
-    this.requestUpdate()
-  }
-
-  protected override render(): TemplateResult {
-    const { _association: item } = this
-    if (!item) {
-      return html``
-    }
-    const { info, multiple = false, required = false } = item
-    return html`
-      <form name="data-association" @submit="${EventUtils.cancelEvent}" data-key="${item.key}">
-        <ui-text-field
-          class="input"
-          name="name"
-          .value="${live(info.name || '')}"
-          label="Association name"
-          required
-          @change="${this._infoChangeHandler}"
-        ></ui-text-field>
-        <ui-text-field
-          class="input"
-          name="displayName"
-          .value="${live(info.displayName || '')}"
-          label="Display name (optional)"
-          @change="${this._infoChangeHandler}"
-        ></ui-text-field>
-        <ui-text-field
-          class="input"
-          name="description"
-          .value="${live(info.description || '')}"
-          label="Association description (optional)"
-          @change="${this._infoChangeHandler}"
-        ></ui-text-field>
-
-        <div class="checkbox-group">
-          <label class="label-large">
-            <ui-checkbox
-              name="required"
-              .checked="${required}"
-              title="Whether the association is required in the schema"
-              @change="${this._checkedHandler}"
-            ></ui-checkbox>
-            Required
-          </label>
-          <label class="label-large">
-            <ui-checkbox
-              name="multiple"
-              .checked="${multiple}"
-              title="When set it declares this association as an array. Multiple instances of the value are permitted."
-              @change="${this._checkedHandler}"
-            ></ui-checkbox>
-            Multiple
-          </label>
-        </div>
-      </form>
-    `
-  }
-}

package/src/elements/schema-design/CommonStyles.ts

@@ -1,62 +0,0 @@
-import { css } from 'lit'
-
-export default css`
-  .input {
-    padding: 12px 16px;
-    /* margin: 28px 20px;
-  width: auto; */
-    display: block;
-  }
-
-  .value-list {
-    margin: 0;
-    padding: 0px 16px 0px 32px;
-  }
-
-  .value-list > li {
-    display: flex;
-    align-items: center;
-  }
-
-  .value-list > li > .value {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .dropdown {
-    position: relative;
-    z-index: 5;
-  }
-
-  .dropdown > ui-text-field {
-    width: 100%;
-    cursor: default;
-  }
-
-  .checkbox-group {
-    margin: 0 20px;
-  }
-
-  .checkbox-group > label {
-    display: block;
-  }
-
-  .editor-separator {
-    margin: 28px 20px;
-    background-color: var(--divider-color);
-    height: 1px;
-  }
-
-  .editor-title {
-    margin: 1.2rem 16px;
-    display: flex;
-    align-items: center;
-    height: 48px;
-  }
-
-  .title-icon {
-    margin-left: auto;
-  }
-`

package/src/elements/schema-design/DataEntityEditorElement.ts

@@ -1,376 +0,0 @@
-import { css, CSSResult, html, PropertyValues, TemplateResult } from 'lit'
-import { property, query, state } from 'lit/decorators.js'
-import { DataEntityKind } from '@api-client/core/browser.js'
-import { DataNamespace } from '@api-client/core/legacy.js'
-import ApiElement from '../ApiElement.js'
-import theme from '../theme.js'
-import schemaCommon from './schemaCommon.js'
-import EditorCommon from './CommonStyles.js'
-import MarkdownStyles from '../highlight/MarkdownStyles.js'
-import typography from '../../styles/m3/typography.module.js'
-import type DataSchemaDocument from './DataSchemaDocument.js'
-import type RadioElement from '../../md/radio/internals/RadioElement.js'
-import type CheckboxElement from '../../md/checkbox/internals/CheckboxElement.js'
-import '../../md/icons/ui-icon.js'
-import '../../md/icon-button/ui-icon-button.js'
-import '../../md/checkbox/ui-checkbox.js'
-import '../../md/radio/ui-radio.js'
-import '../../elements/highlight/marked-highlight.js'
-import './data-association-form.js'
-import './data-property-form.js'
-import './data-entity-form.js'
-import './data-schema-document.js'
-
-/**
- * The DataEntity editor UI and logic.
- *
- * @fires change - When the entity has changed and the parent element / app should update the value in the store.
- * @fires namechange - When a name of the data entity has changed.
- *    This triggers a render in the navigation. This is fired after the `change` event.
- */
-export default class DataEntityEditorElement extends ApiElement {
-  static override get styles(): CSSResult[] {
-    return [
-      theme,
-      schemaCommon,
-      MarkdownStyles,
-      EditorCommon,
-      typography,
-      css`
-        :host {
-          display: block;
-          height: 100%;
-        }
-
-        .container {
-          display: flex;
-          flex-direction: row;
-          height: inherit;
-          flex: 1;
-        }
-
-        .structure {
-          flex: 8;
-          overflow: hidden;
-        }
-
-        .editor {
-          flex: 4;
-          background-color: var(--md-sys-color-surface);
-          border-radius: var(--md-sys-shape-corner-small);
-          box-shadow: var(--md-sys-elevation-1);
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
-          /* for the box shadow */
-          margin: 4px;
-        }
-
-        .editor-form {
-          overflow: auto;
-        }
-
-        .mime-options {
-          box-sizing: border-box;
-          display: flex;
-          align-items: center;
-        }
-
-        .schema-card {
-          margin: 20px 20px 20px 0px;
-        }
-      `,
-    ]
-  }
-
-  /**
-   * The read data namespace.
-   */
-  @property({ type: Object }) accessor root: DataNamespace | undefined
-
-  /**
-   * The selected entity.
-   */
-  @property({ type: String }) accessor selected: string | undefined
-
-  /**
-   * The key of the selected property being edited.
-   */
-  @property({ type: String }) accessor selectedProperty: string | undefined
-
-  /**
-   * The key of the selected association being edited.
-   */
-  @property({ type: String }) accessor selectedAssociation: string | undefined
-
-  @state() protected accessor _highlightEntityDropZone: boolean | undefined
-
-  @state() protected accessor _schemaExample: string | number | boolean | null | undefined
-
-  @state() protected accessor _schemaMime: string
-
-  @state() protected accessor _schemaMock: boolean | undefined
-
-  protected _schemaOpened?: boolean
-
-  @query('data-schema-document') protected accessor _schemaDoc!: DataSchemaDocument
-
-  constructor() {
-    super()
-    this._schemaMime = 'application/json'
-    this._schemaMock = true
-    this.addEventListener('dragenter', this._dragEnterHandler.bind(this))
-    this.addEventListener('dragleave', this._dragLeaveHandler.bind(this))
-  }
-
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    super.willUpdate(cp)
-    if (cp.has('selected')) {
-      this._computeExampleSchemaIfNeeded()
-    }
-  }
-
-  override notifyChange(): void {
-    super.notifyChange()
-    if (this._highlightEntityDropZone) {
-      this._highlightEntityDropZone = false
-    }
-  }
-
-  protected _dragEnterHandler(e: DragEvent): void {
-    const { dataTransfer: dt } = e
-    if (!dt) {
-      return
-    }
-    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {
-      return
-    }
-    this._highlightEntityDropZone = true
-    this.selectedProperty = undefined
-    this.selectedAssociation = undefined
-  }
-
-  protected _dragLeaveHandler(e: DragEvent): void {
-    const { dataTransfer: dt } = e
-    if (!dt) {
-      return
-    }
-    if (![...dt.types].includes(DataEntityKind.toLowerCase())) {
-      return
-    }
-    this._highlightEntityDropZone = false
-  }
-
-  protected _propertyChangeHandler(): void {
-    this.notifyChange()
-    const { _schemaDoc } = this
-    if (_schemaDoc) {
-      _schemaDoc.requestUpdate()
-    }
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _entityChangeHandler(): void {
-    this.notifyChange()
-    const { _schemaDoc } = this
-    if (_schemaDoc) {
-      _schemaDoc.requestUpdate()
-    }
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _schemaEntityChangeHandler(): void {
-    this.notifyChange()
-    this.requestUpdate()
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _schemaEntityEditHandler(e: CustomEvent): void {
-    const { type, key } = e.detail
-    if (type === 'property') {
-      this.selectedProperty = key
-      this.selectedAssociation = undefined
-    } else if (type === 'association') {
-      this.selectedProperty = undefined
-      this.selectedAssociation = key
-    }
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _entityNameHandler(): void {
-    // just retarget
-    this.dispatchEvent(new Event('namechange'))
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _cancelEditor(): void {
-    this.selectedProperty = undefined
-    this.selectedAssociation = undefined
-  }
-
-  protected _computeExampleSchema(): void {
-    const { selected, root } = this
-    const entity = root?.definitions.entities.find((i) => i.key === selected)
-    if (!entity) {
-      this._schemaExample = undefined
-      return
-    }
-    this._schemaExample = entity.toExample(this._schemaMime, {
-      renderMocked: this._schemaMock,
-      renderExamples: true,
-      renderOptional: true,
-    })
-  }
-
-  protected _computeExampleSchemaIfNeeded(): void {
-    if (this._schemaOpened) {
-      this._computeExampleSchema()
-    }
-  }
-
-  protected _schemaOpenHandler(e: Event): void {
-    const details = e.target as HTMLDetailsElement
-    this._schemaOpened = details.open
-    if (details.open) {
-      this._computeExampleSchema()
-    }
-  }
-
-  protected _schemaMimeHandler(e: Event): void {
-    const button = e.target as RadioElement
-    if (!button.checked) {
-      return
-    }
-    this._schemaMime = button.value as string
-    this._computeExampleSchemaIfNeeded()
-  }
-
-  protected _mockSchemaValuesHandler(e: Event): void {
-    const input = e.target as CheckboxElement
-    const { checked } = input
-    this._schemaMock = checked
-    this._computeExampleSchema()
-  }
-
-  protected override render(): TemplateResult {
-    return html` <div class="container">${this._structureTemplate()} ${this._editorTemplate()}</div> `
-  }
-
-  protected _structureTemplate(): TemplateResult {
-    return html`
-      <div class="structure">
-        <data-schema-document
-          .root="${this.root}"
-          .key="${this.selected}"
-          .selectedProperty="${this.selectedProperty || this.selectedAssociation}"
-          ?associationDropZone="${this._highlightEntityDropZone}"
-          editable
-          @change="${this._schemaEntityChangeHandler}"
-          @edit="${this._schemaEntityEditHandler}"
-        ></data-schema-document>
-        ${this.renderSchema()}
-      </div>
-    `
-  }
-
-  protected _editorTemplate(): TemplateResult {
-    const { selectedProperty, selectedAssociation } = this
-    let content: TemplateResult
-    if (selectedProperty) {
-      content = this._propertyEditorTemplate(selectedProperty)
-    } else if (selectedAssociation) {
-      content = this._associationEditorTemplate(selectedAssociation)
-    } else {
-      content = this.renderEntityEditor()
-    }
-    return html` <div class="editor">${content}</div> `
-  }
-
-  protected _propertyEditorTemplate(id: string): TemplateResult {
-    return html`
-      <div class="editor-title title-large">
-        Data Property
-        <ui-icon-button class="title-icon" title="Close this editor" @click="${this._cancelEditor}">
-          <ui-icon icon="close"></ui-icon>
-        </ui-icon-button>
-      </div>
-      <data-property-form
-        .root="${this.root}"
-        .key="${id}"
-        @change="${this._propertyChangeHandler}"
-        class="editor-form"
-      ></data-property-form>
-    `
-  }
-
-  protected _associationEditorTemplate(id: string): TemplateResult {
-    return html`
-      <div class="editor-title title-large">
-        Data Association
-        <ui-icon-button class="title-icon" title="Close this editor" @click="${this._cancelEditor}">
-          <ui-icon icon="close"></ui-icon>
-        </ui-icon-button>
-      </div>
-      <data-association-form
-        .root="${this.root}"
-        .key="${id}"
-        @change="${this._propertyChangeHandler}"
-        class="editor-form"
-      ></data-association-form>
-    `
-  }
-
-  protected renderEntityEditor(): TemplateResult {
-    return html`
-      <div class="editor-title title-large">Data Entity</div>
-      <data-entity-form
-        .root="${this.root}"
-        .key="${this.selected}"
-        ?parentDropZone="${this._highlightEntityDropZone}"
-        @change="${this._entityChangeHandler}"
-        @namechange="${this._entityNameHandler}"
-        class="editor-form"
-      ></data-entity-form>
-    `
-  }
-
-  protected renderSchema(): TemplateResult {
-    return html` <details class="schema-card" @toggle="${this._schemaOpenHandler}">
-      <summary class="title-medium">Example</summary>
-      <div class="example-content">
-        <div class="mime-options">
-          <span id="mimeLabel" class="label-large">Mime type:</span>
-          <label class="label-large">
-            <ui-radio
-              name="mimeValue"
-              value="application/json"
-              .checked="${this._schemaMime === 'application/json'}"
-              @change="${this._schemaMimeHandler}"
-              aria-describedby="mimeLabel"
-            ></ui-radio>
-            application/json
-          </label>
-          <label class="label-large">
-            <ui-radio
-              name="mimeValue"
-              value="application/xml"
-              .checked="${this._schemaMime === 'application/xml'}"
-              @change="${this._schemaMimeHandler}"
-              aria-describedby="mimeLabel"
-            ></ui-radio>
-            application/xml
-          </label>
-          <label class="label-large">
-            <ui-checkbox
-              .checked="${this._schemaMock}"
-              @change="${this._mockSchemaValuesHandler}"
-              title="Generates random values when examples are not defined."
-            ></ui-checkbox>
-            Mock values
-          </label>
-        </div>
-        <pre class="code-value text-selectable"><code>${this._schemaExample}</code></pre>
-      </div>
-    </details>`
-  }
-}