Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/advanced-rest-client/api-headers-form
⛔️ DEPRECATED This component is being deprecated. Use `api-documentation` instead.
https://github.com/advanced-rest-client/api-headers-form
deprecated obsolete
Last synced: about 1 month ago
JSON representation
⛔️ DEPRECATED This component is being deprecated. Use `api-documentation` instead.
- Host: GitHub
- URL: https://github.com/advanced-rest-client/api-headers-form
- Owner: advanced-rest-client
- Created: 2018-03-09T03:28:03.000Z (almost 7 years ago)
- Default Branch: stage
- Last Pushed: 2023-01-06T02:05:21.000Z (almost 2 years ago)
- Last Synced: 2024-04-14T21:18:37.025Z (8 months ago)
- Topics: deprecated, obsolete
- Language: JavaScript
- Homepage:
- Size: 3.04 MB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/@api-components/api-headers-form)
[](https://travis-ci.org/advanced-rest-client/api-headers-form)
## <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](https://a.ml/) from API spec file via [api-view-model-transformer](https://github.com/advanced-rest-client/api-view-model-transformer) element.
Form headers editor provides convenient and accessible way of defining HTTP request headers for any HTTP tool.
## Deprecation notice
This element is moved to `api-headers` repository and `@api-components/api-headers` package. This element will be deprecated and archived once the migration finish.
## 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
```sh
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
import '@api-components/api-headers-form/api-headers-form.js';
{
document.querySelector('api-headers-form').onvalue = (e) {
console.log('Headers value', e.target.value);
};
}
```
### In a LitElement
```js
import { LitElement, html } from 'lit-element';
import '@api-components/api-headers-form/api-headers-form.js';
class SampleElement extends PolymerElement {
render() {
return html`
`;
}
_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.
```html
{
document.querySelector('api-headers-form').model = [
{
name: 'content-type',
value: 'application/json',
required: true
},
{
name: 'user-token',
value: '',
required: false
}
];
}
```
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.
```html
{
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;
}
```
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
```sh
git clone https://github.com/advanced-rest-client/api-headers-form
cd api-headers-form
npm install
```
### Running the demo locally
```sh
npm start
```
### Running the tests
```sh
npm test
```