@advanced-rest-client/multipart-payload-editor NPM

multipart-payload-editor

An AMF powered multipart payload editor for the HTTP request editor.

<multipart-payload-editor></multipart-payload-editor>

Version compatibility

This version only works with AMF model version 2 (AMF parser >= 4.0.0). For compatibility with previous model version use 3.x.x version of the component.

Usage

Installation

npm install --save @advanced-rest-client/multipart-payload-editor

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/multipart-payload-editor/multipart-payload-editor.js';
    </script>
  </head>
  <body>
    <multipart-payload-editor></multipart-payload-editor>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@api-components/multipart-payload-editor/multipart-payload-editor.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <multipart-payload-editor
      .model="${this.modelValue}"
      @value-changed="${this._handleValue}"
      @model-changed="${this._handleModel}"></multipart-payload-editor>
    `;
  }

  _handleValue(e) {
    this.headersValue = e.detail.value;
  }

  _handleModel(e) {
    this.modelValue = e.detail.value;
  }
}
customElements.define('sample-element', SampleElement);

Generating view model from AMF model

When you have API model generated by AMF parser you can use api-view-model-transformer element to produce view model for the editor. This element produces common model for query parametrs, URI parameters, body, and headers.

<api-view-model-transformer @view-model-changed="${this._viewModelChanged}"></api-view-model-transformer>
<multipart-payload-editor></multipart-payload-editor>

<script>
{
  const api = await generateApiModel();
  const endpoint = '/api-endpoint';
  const operation = 'GET';
  const payloadModelArray = getOperationPayloadFromModel(api, endpoint, operation); // some abstract method
  const transformer = document.querySelector('api-view-model-transformer');
  transformer.api = api; // This is required to compute ld+json keys!
  const viewModel = transformer.computeViewModel(headersModelArray);
  document.querySelector('multipart-payload-editor').model = viewModel;
}
</script>

Development

git clone https://github.com/advanced-rest-client/multipart-payload-editor
cd multipart-payload-editor
npm install

Running the demo locally

npm start

Running the tests

npm test

API components

This components is a part of API components ecosystem

web-components polymer multipart body payload editor

@advanced-rest-client/arc-icons @advanced-rest-client/arc-marked @advanced-rest-client/clipboard-copy @advanced-rest-client/markdown-styles @advanced-rest-client/multipart-payload-transformer @advanced-rest-client/prism-highlight @anypoint-web-components/anypoint-button @anypoint-web-components/anypoint-input @anypoint-web-components/anypoint-switch @anypoint-web-components/validatable-mixin @api-components/api-form-mixin @api-components/api-property-form-item @api-components/api-view-model-transformer @polymer/iron-form @polymer/paper-toast @polymer/prism-element lit-element lit-html prismjs

@everything-registry/sub-chunk-30 @infinitebrahmanuniverse/nolb-_adv @api-components/api-body-editor

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago