@api-modeling/modeling-project-ui v1.0.0

modeling-project-ui

Components to render UI related to projects selection for the API modeling initiative.

Installation

npm i @api-modeling/modeling-project-ui --save

Usage

In an html file

<script type="module">
  import '@api-modeling/modeling-project-ui/welcome-screen.js';
</script>

<welcome-screen open recent></modeling-icon>

In a LitElement

import { LitElement, html, svg } from 'lit-element';
import '@api-modeling/modeling-project-ui/welcome-screen.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <welcome-screen open recent @new="${this._newHandler}" @open="${this._openHandler}">
      ${this._recentTemplate()}
    </modeling-icon>
    `;
  }

  _recentTemplate() {
    return this.recentProjects.slice(0, 4).map((project) => html`
    <anypoint-item slot="recent" ?compatibility="${this.compatibility}">
      <anypoint-item-body twoline>
        <div>${project.name}</div>
        <div secondary><relative-date date="${project.modified}"></relative-date></div>
      </anypoint-item-body>
    </anypoint-item>
    `);
  }

  _newHandler() {
    console.log('requested to create a new project');
  }

  _openHandler() {
    console.log('requested to open existing project');
  }
}
customElements.define('sample-element', SampleElement);

Development

git clone https://github.com/api-modeling/modeling-icons
cd modeling-icons
npm install

Running the demo locally

npm start

Running the tests

npm test