@advanced-rest-client/form-data-editor

<窗体-数据编辑器>

用于编辑数据(x-www-form-urlencoded)的元素.

该元素会生成允许输入形式数据值的窗体.

它可能用于 AMF 移动 json/ld 模型通过 api-view-model- transfer 变相器 将AMF模型转换为数据视图模型.

<form-data-editor value="grant_type=authorization_code&code=SplxlOBeZQQYbYS6WxSbIA&redirect_uri=https%3A%2F%2Fclient%2Eexample%2Ecom%2Fcb" allowcustom allowdisableparams allowhideoptional></form-data-editor>

使用量

安装

npm install --save @advanced-rest-client/form-data-editor

在 html 文件内

<html>
  <head>
    <script type="module">
      import '@advanced-rest-client/form-data-editor/form-data-editor.js';
    </script>
  </head>
  <body>
    <form-data-editor allowcustom allowdisableparams></form-data-editor>
    <script>
    {
      const editor = document.querySelector('api-url-params-editor');
      editor.onchange = (e) {
        console.log('Payload value', e.target.value); // or e.detail.value
      };
      editor.onmodel = (e) {
        console.log('View model', e.target.model); // or e.detail.value
      };
    }
    </script>
  </body>
</html>

在一个LitElement中

import { LitElement, html } from 'lit-element';
import '@advanced-rest-client/form-data-editor/form-data-editor.js';

class SampleElement extends PolymerElement {
  render() {
    return html`
    <form-data-editor
      .value="${this.payloadValues}"
      .model="${this.viewModel}"
      @value-changed="${this._valueHandler}"
      @model-changed="${this._modelHandler}"></form-data-editor>
    `;
  }

  _valueHandler(e) {
    this.payloadValues = e.detail.value;
  }

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

行为控制

允许可拆页

当设定时, 它会为每个项目设置一个复选框, 允许禁用此项目 . 本项目在视图和生成的数据模式中,但在生成值时被忽略.

允许海关

当设定时会使"添加参数"按钮并允许创建新的形式值. 强制单独使用.

允许隐藏可选

何时 item.required 模型属性没有设定, 此值被设定, 然后隐藏所有可选项目( 未按要求标记) 并制作一个复选框来渲染视图中的隐藏项目.

<form-data-editor allowhideoptional></form-data-editor>
<script>
{
  document.querySelector('form-data-editor').model = [
    {
      name: 'param1',
      value: 'value1',
      required: true
    },
    {
      name: 'param2',
      value: 'value2',
      required: false
    }
  ];
}
</script>

此编辑器只制作 param1 参数和隐藏 param2 窗体项目. 用户可以随时渲染隐藏的项目.

从AMF 模型生成视图模型

您可以通过 AMF parser 生成的模型生成视图模型 api-view-model-transformer 键. 此元素生成查询参数,URI参数,正体,和头等的通用模型.

<api-view-model-transformer></api-view-model-transformer>
<form-data-editor></form-data-editor>

<script>
{
  const api = await generateApiModel();
  const endpoint = '/api-endpoint';
  const operation = 'GET';
  const bodyParametersModelArray = getOperationRequestBodyFromModel(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(bodyParametersModelArray);
  document.querySelector('form-data-editor').model = viewModel;
}
</script>

发展

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

本地运行演示

npm start

运行测试

npm test

API 组件

此组件是 API 生态系统组成部分