http-method-selector

A HTTP method selector. Displays list of radio buttons with common http methods and a dropdown with less common but still valid methods.

It also allows to define own method.

<http-method-selector method="POST" is-payload></http-method-selector>
<http-method-selector-mini method="PUT" is-payload></http-method-selector-mini>

Usage

Installation

npm install --save @advanced-rest-client/http-method-selector

In an html file

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/http-method-selector/http-method-selector.js';
      import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';
    </script>
  </head>
  <body>
    <http-method-selector method="POST"></http-method-selector>
    <http-method-selector-mini method="PUT"></http-method-selector-mini>

    <script>
    {
      document.querySelector('http-method-selector').onmethod = (e) => {
        console.log(e.detail.value); // or e.target.method
      };
      document.querySelector('http-method-selector').onispayload = (e) => {
        if (e.detail.value) {
          console.log('Payload is allowed');
        } else {
          console.log('Payload is not allowed');
        }
      };
    }
    </script>
  </body>
</html>

In a LitElement

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/http-method-selector/http-method-selector.js';
import '@advanced-rest-client/http-method-selector/http-method-selector-mini.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <http-method-selector
      method="POST"
      @method-changed="${this._verbHandler}"
      @ispayload-changed="${this._isPayloadHandler}"></http-method-selector>
    `;
  }

  _verbHandler(e) {
    this.httpMethod = e.target.method;
  }

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

Development

git clone https://github.com/advanced-rest-client/http-method-selector
cd http-method-selector
npm install

Running the demo locally

npm start

Running the tests

npm test