api-console-assets
Version:
This repo only exists to publish api console components to npm
253 lines (226 loc) • 8.2 kB
HTML
<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form/iron-form.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../marked-element/marked-element.html">
<link rel="import" href="../markdown-styles/markdown-styles.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../arc-icons/arc-icons.html">
<link rel="import" href="../iron-collapse/iron-collapse.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<link rel="import" href="query-parameter-input.html">
<!--
The `raml-request-parameters-form` element is responsible for displaying the form od URI / query
parameters. It is meant to work with the `raml-request-parameters-editor`. See its docs to
learn how to use this element.
### Styling
`<raml-request-parameters-form>` provides the following custom properties and mixins for styling:
Custom property | Description | Default
----------------|-------------|----------
`--raml-request-parameters-form` | Mixin applied to the element | `{}`
`--raml-request-parameters-editor-input-label-color` | Color of the paper input's labels | `rgba(0, 0, 0, 0.48)`
`--inline-documentation-color` | Color of the documentation string below the input field. Note that it will appy also `marked-element` styles to this element | `rgba(0, 0, 0, 0.87)`
`--raml-request-parameters-editor-row` | Mixin applied to each row of the form | `{}`
`--raml-request-parameters-form-optional-toggle-button` | Mixin applied to a "toggle optional parameters" button | `{}`
@group RAML Elements
@element raml-request-parameters-form
@demo demo/index.html
-->
<dom-module id="raml-request-parameters-form">
<template strip-whitespace>
<style include="markdown-styles"></style>
<style>
:host {
display: block;
@apply --raml-request-parameters-form;
--paper-input-container-label: {
color: var(--raml-request-parameters-editor-input-label-color, rgba(0, 0, 0, 0.48));
}
}
.param-value {
@apply --raml-request-parameters-editor-row;
}
.param-value.optional {
display: none;
}
.param-value.required {
}
.param-value.optional.with-optional {
display: block;
}
.param-value .input {
@apply --layout-horizontal;
@apply --layout-flex;
}
.docs {
@apply --arc-font-common-base;
font-size: 13px ;
font-weight: 200;
line-height: 24px;
color: var(--inline-documentation-color, rgba(0, 0, 0, 0.87));
}
.markdown-html * {
font-size: 13px ;
}
.markdown-html p:first-child {
margin-top: 0;
padding-top: 0;
}
.markdown-html p:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
.help-icon {
color: var(--accent-color, rgba(0, 0, 0, 0.74));
transition: opacity 0.2s ease-in-out;
opacity: 0.54;
}
.help-icon:hover {
opacity: 0.74;
}
.value-input {
@apply --layout-horizontal;
@apply --layout-center;
@apply --layout-flex;
}
.value-input.is-array {
@apply --layout-end;
@apply --raml-request-parameters-form-array-paramtere;
}
.optional-toggle-button {
font-size: 13px;
@apply --raml-request-parameters-form-optional-toggle-button;
}
query-parameter-input {
@apply --layout-flex;
margin-bottom: 8px;
}
</style>
<form is="iron-form">
<template is="dom-repeat" items="{{model}}" items-repeater>
<div class$="[[_computeRowClass(item, optionalOpened)]]">
<div class$="value-input [[_computeTypeClass(item.isArray)]]">
<query-parameter-input model="[[item]]" name="[[item.key]]" value="{{item.value}}" required$="[[item.required]]" on-value-changed="_parameterValueChanged"></query-parameter-input>
<template is="dom-if" if="[[item.hasDescription]]">
<span>
<paper-icon-button class="help-icon" suffix icon="arc:help" on-tap="_openDocs"></paper-icon-button>
<paper-tooltip position="left" offset="1" margin-top="1" animation-delay="300">Display documentation</paper-tooltip>
</span>
</template>
</div>
<template is="dom-if" if="[[item.hasDescription]]">
<div class="docs">
<iron-collapse>
<marked-element markdown="[[item.description]]">
<div class="markdown-html markdown-body"></div>
</marked-element>
</iron-collapse>
</div>
</template>
</div>
</template>
</form>
</template>
<script>
Polymer({
is: 'raml-request-parameters-form',
behaviors: [Polymer.IronValidatableBehavior],
properties: {
// A list of parameters to display. It may be URI or query parameters array.
model: Array,
/**
* Set to true to show optional parameters.
*/
optionalOpened: {
type: Boolean,
value: false
},
/**
* The form can display query or URI parameters. When anything change in the form
* it will send a corresponding custom event (`query-parameter-changed` or
* `uri-parameter-changed`). To make this happen set the value of this property to
* either `query` or `uri`.
*/
formType: String
},
_getForm: function() {
return this.$$('form');
},
// Overidden from Polymer.IronValidatableBehavior. Will set the `invalid`
// attribute automatically, which should be used for styling.
_getValidity: function() {
return this._getForm().validate();
},
// Link to the form's serialize function.
serialize: function() {
return this._getForm().serialize();
},
// Opens the documentation for item.
_openDocs: function(e) {
var form = this._getForm();
var template = form.querySelector('[items-repeater]');
var model = template.modelForElement(e.target);
var collapse = form.querySelector('.param-value:nth-child(' + (model.index + 1) +
') iron-collapse');
if (!collapse) {
return;
}
collapse.opened = !collapse.opened;
},
_computeRowClass: function(item, optionalOpened) {
var clazz = 'param-value';
if (item.required) {
clazz += ' required';
} else {
clazz += ' optional';
}
if (optionalOpened) {
clazz += ' with-optional';
}
return clazz;
},
/**
* Toggles visibility of optional parameters.
*/
toggleOptionalParams: function() {
this.optionalOpened = !this.optionalOpened;
},
/**
* When query parameter value changes then it will file the `query-parameter-changed` custom
* event to inform other observers about this event.
*/
_parameterValueChanged: function(e) {
var formType = this.formType;
if (!formType || ['query', 'uri'].indexOf(formType) === -1) {
return;
}
var item = e.model.get('item');
var name = item.name || item.key;
var value = item.value;
this.fire(formType + '-parameter-changed', {
name: name,
value: value
});
},
/**
* Computes array class for the input element.
*/
_computeTypeClass: function(isArray) {
return isArray ? 'is-array' : '';
}
});
</script>
</dom-module>