README
<api-headers-form>
HTTP headers editor using forms.
The component works as a stand-alone editor that allows to define headers for HTTP request but also works with generated AMF model from API spec file via api-view-model-transformer element.
Form headers editor provides convenient and accessible way of defining HTTP request headers for any HTTP tool.
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-headers-form
# optionally for processing AMF model
npm install --save @api-components/api-view-model-transformer
In an html file
<html>
<head>
<script type="module">
import '@api-components/api-headers-form/api-headers-form.js';
</script>
</head>
<body>
<api-headers-form allowdisableparams allowcustom allowhideoptional></api-headers-form>
<script>
{
document.querySelector('api-headers-form').onvalue = (e) {
console.log('Headers value', e.target.value);
};
}
</script>
</body>
</html>
In a LitElement
import { LitElement, html } from 'lit-element';
import '@api-components/api-headers-form/api-headers-form.js';
class SampleElement extends PolymerElement {
render() {
return html`
<api-headers-form
allowdisableparams
allowcustom
allowhideoptional
@value-changed="${this._handleValue}"></api-headers-form>
`;
}
_handleValue(e) {
this.headersValue = e.target.value;
}
}
customElements.define('sample-element', SampleElement);
Behaviour controls
allowDisableParams
When set it renders a checkbox next to each for item that allows to disable item. The item is in the view and in generated data mode but is ignored when producing the value.
allowCustom
When set is renders "add header" button and allows to create new headers. Mandatory for stand-alone use.
allowHideOptional
When item.required model property is not set and this value is set then it hides all optional items (not marked as required)
and renders a checkbox to render hidden items in the view.
<api-headers-form allowhideoptional></api-headers-form>
<script>
{
document.querySelector('api-headers-form').model = [
{
name: 'content-type',
value: 'application/json',
required: true
},
{
name: 'user-token',
value: '',
required: false
}
];
}
</script>
This editor renders only content-type header and hides user-token form value.
The user can render hidden items at any time.
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>
<api-headers-form></api-headers-form>
<script>
{
const api = await generateApiModel();
const endpoint = '/api-endpoint';
const operation = 'GET';
const headersModelArray = getOperationHeadersFromModel(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('api-headers-form').model = viewModel;
}
</script>
The headersModelArray property is the value of http://a.ml/vocabularies/http#header shape of AMF model.
It can be accessed via supportedOperation > expects shapes.
Development
git clone https://github.com/advanced-rest-client/api-headers-form
cd api-headers-form
npm install
Running the demo locally
npm start
Running the tests
npm test