@mistio/mist-form
Version:
A Webcomponent that renders a form defined by a JSONSchema & an optional UISchema spec
100 lines (98 loc) • 2.56 kB
HTML
<html lang="en-US">
<body>
<div id="bridgeOfDeath"></div>
<script type="module">
import { html, render } from 'lit-html';
import '../mist-form.js';
const jsonSchema = {
"title": "Bridge of death",
"description": "Must answer me these questions three, 'ere the other side he see.",
"type": "object",
"required": [
"name",
"quest",
"color",
"velocity",
"origin"
],
"properties": {
"name": {
"type": "string",
"title": "What is your name?"
},
"quest": {
"type": "string",
"title": "What is your quest?"
},
"color": {
"type": "string",
"title": "What is your favorite color?"
},
"capital": {
"type": "string",
"title": "What is the capital of Assyria?",
"examples": ["Ashur", "Calah", "Nimrud", "Dur Sharrukin", "Khorsabad", "Nineveh"]
},
"velocity": {
"type": "number",
"title": "What is the air-speed velocity of an unladen swallow?",
"minimum": 2,
"maximum": 40
},
"origin": {
"type": "string",
"title": "Specify the swallow's origin",
"enum": ["Africa", "Europe"]
}
}
};
const uiSchema = {
"quest": {
"ui:widget": "textarea"
},
"color": {
"ui:widget": "color",
"ui:options": {
"style": "width: 190px;"
}
},
"capital": {
"ui:options": {
"style": "min-width: 210px;"
}
},
"velocity": {
"ui:controls": true,
"ui:suffix": "mph",
"ui:options": {
"style": "min-width: 350px;"
}
},
"ui:submit": "Enter"
};
const formData = {
"name": "Sir Lancelot of Camelot",
"quest": "To seek the Holy Grail",
"color": "#0000ff",
"velocity": 24
};
render(
html`
<mist-form method="GET" action="/demo"
.jsonSchema=${jsonSchema} .uiSchema=${uiSchema} .formData=${formData}
@response=${() => {
console.log('on response');
}}
@request=${() => {
console.log('on request');
}}
@error=${() => {
console.log('on error');
}}
</mist-form> `,
document.querySelector('#bridgeOfDeath')
);
</script>
</body>
</html>