@api-viewer/docs/lib/base.js

API documentation viewer for Web Components

import { html, LitElement } from 'lit';
import { until } from 'lit/directives/until.js';
import { emptyDataWarning, getCustomElements, getElementData, getPublicFields, getPublicMethods, hasCustomElements, ManifestMixin } from '@api-viewer/common/lib/index.js';
import { parse } from './utils/markdown.js';
import './layout.js';
async function renderDocs(jsonFetched, onSelect, only, selected) {
    const manifest = await jsonFetched;
    if (!hasCustomElements(manifest)) {
        return emptyDataWarning;
    }
    const elements = getCustomElements(manifest, only);
    const data = getElementData(manifest, elements, selected);
    const props = getPublicFields(data.members);
    const methods = getPublicMethods(data.members);
    return html `
    <header part="header">
      <div part="header-title">&lt;${data.name}&gt;</div>
      <nav>
        <label part="select-label">
          <select
            @change=${onSelect}
            .value=${selected || ''}
            ?hidden=${elements.length === 1}
            part="select"
          >
            ${elements.map((tag) => html `<option value=${tag.name}>${tag.name}</option>`)}
          </select>
        </label>
      </nav>
    </header>
    <div ?hidden=${data.description === ''} part="docs-description">
      ${parse(data.description)}
    </div>
    <api-docs-layout
      .name=${data.name}
      .props=${props}
      .attrs=${data.attributes ?? []}
      .methods=${methods}
      .events=${data.events ?? []}
      .slots=${data.slots ?? []}
      .cssParts=${data.cssParts ?? []}
      .cssProps=${data.cssProperties ?? []}
      part="docs-container"
    ></api-docs-layout>
  `;
}
export class ApiDocsBase extends ManifestMixin(LitElement) {
    render() {
        return html `${until(renderDocs(this.jsonFetched, this._onSelect, this.only, this.selected))}`;
    }
    _onSelect(e) {
        this.selected = e.target.value;
    }
}
//# sourceMappingURL=base.js.map