Have ideas to improve npm?Join in the discussion! »

    This package has been deprecated

    Author message:

    Use @api-components/api-url instead

    @api-components/api-url-params-editor
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.0 • Public • Published

    Published on NPM

    Build Status

    <api-url-params-editor>

    An element to render query / URI parameters form from AMF data model.

    It also allows to create custom query parameters list, outside schema definition, when allowCustom property is set.

    It uses api-url-data-model to transform AMF model to the view model recognized by this element.

    The main task of the element is to produce / update view model for both query / URI parameters so it can be used by the URL editor to create final request URL value.

    <api-url-params-editor
      querymodel="..."
      pathmodel="..."
    ></api-url-params-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 @api-components/api-url-params-editor
    

    In an html file

    <html>
      <head>
        <script type="module">
          import '@api-components/api-url-params-editor/api-url-params-editor.js';
        </script> 
      </head>
      <body>
        <api-url-params-editor></api-url-params-editor>
        <script>
        {
          const editor = document.querySelector('api-url-params-editor');
          editor.onurivalue = (e) {
            console.log('URI values', e.detail.value);
          };
          editor.onqueryvalue = (e) {
            console.log('Query values', e.detail.value);
          };
        }
        </script> 
      </body>
    </html>

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@api-components/api-url-params-editor/api-url-params-editor.js';
     
    class SampleElement extends PolymerElement {
      render() {
        return html`
        <api-url-params-editor
          .queryModel="${this.queryModel}"
          .pathModel="${this.pathModel}"
          @queryvalue-changed="${this._queryValueChanged}"
          @urivalue-changed="${this._uriValueChanged}"
          @urimodel-changed="${this._pathModelChangeHandler}"
          @querymodel-changed="${this._queryModelChangeHandler}"></api-url-params-editor>
        `;
      }
     
      _queryValueChanged(e) {
        this.queryValues = e.detail.value;
      }
     
      _uriValueChanged(e) {
        this.uriValues = e.detail.value;
      }
     
      _pathModelChangeHandler(e) {
        this.pathViewModel = e.detail.value;
      }
     
      _queryModelChangeHandler(e) {
        this.queryViewModel = e.detail.value;
      }
    }
    customElements.define('sample-element', SampleElement);

    Passing AMF data model

    The component does not directly interact with AMF model. It uses a view model generated by api-url-data-model. This element parses API spec to produce basic information about currently selected endpoint like path variables model, query parameters model, and base URI.

    Your UI has to provide a way to select an endpoint. You can use api-navigation element which renders API structure in a nav bar and dispatches selection event.

    In an html file

    <api-url-editor></api-url-editor>
    <api-url-params-editor></api-url-params-editor>
    <api-url-data-model></<api-url-data-model>
     
    <script type="module">
    import '@api-components/api-url-editor/api-url-editor.js';
    import '@api-components/api-url-params-editor/api-url-params-editor.js';
    import '@api-components/api-url-data-model/api-url-data-model.js';
     
    {
      const api = await generateApiModel();
      const selectedEndpoint = 'amf://id#63'; // some ID from the AMF model for endpoint / operation
     
      const model = document.querySelector('api-url-data-model');
      model.amf = api; // This is required to compute ld+json keys!
      model.selected = selectedEndpoint;
     
      const urlEditor = document.querySelector('api-url-editor');
      urlEditor.baseUri = model.apiBaseUri;
      urlEditor.endpointPath = model.endpointPath;
      urlEditor.queryModel = model.queryModel;
      urlEditor.pathModel = model.pathModel;
     
      const editor = document.querySelector('api-url-params-editor');
      urlEditor.queryModel = model.queryModel;
      urlEditor.uriModel = model.pathModel;
      urlEditor.onquerymodel = (e) => {
        urlEditor.queryModel = e.detail.value;
      };
      urlEditor.onurimodel = (e) => {
        urlEditor.pathModel = e.detail.value;
      };
    }
    </script> 

    Development

    git clone https://github.com/advanced-rest-client/api-url-params-editor
    cd api-url-params-editor
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test

    Install

    npm i @api-components/api-url-params-editor

    DownloadsWeekly Downloads

    12

    Version

    4.1.0

    License

    Apache-2.0

    Unpacked Size

    115 kB

    Total Files

    18

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar