@skhemata/skhemata-form
Version:
Skhemata Form Web Component. This web component can be used as base web component when working with forms and inputs.
125 lines (113 loc) • 4.64 kB
HTML
<html lang="en-GB">
<head>
<meta charset="utf-8">
<style>
body {
background: #fafafa;
}
div.form{
padding: 3rem;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
</head>
<body>
<div id="demo"></div>
<script type="module">
import { html, render } from 'lit-html';
import '../dist/skhemata-form.js';
const handleSubmit = (e) => {
console.log(`The value of skhemata-form-textbox is ${document.getElementById('txt').value}`)
console.log('submitting:')
console.log(e.detail.data)
console.log(document.getElementById('form').data)
};
const repeatedFields = [
{
type: 'toggle',
attributes: {
name: "toggle",
description: "sample toggle",
onText: "ON",
offText:"OFF",
label: 'Toggle',
required: true
}
},
{
type: 'checkbox',
attributes: {
name: "check",
description: "sample checkbox",
onText: "ON",
offText:"OFF",
label: 'Checkbox',
required: true
}
},
{
type: 'dropdown',
attributes: {
name: "dropdown",
description: "sample text",
label: 'dropdown',
required: true,
},
content: '<option value="hello">Hello</option><option value="goodbye">Goodbye</option>'
},
{
type: 'dropdown',
attributes: {
name: "dropdown",
description: "Do not show this dropdown",
label: 'Do not show',
},
hide: true,
content: '<option value="hello">Hello</option><option value="goodbye">Goodbye</option>'
}
];
const api = {
url: 'https://coral.thrinacia.com/api/service/restv1',
base: 'https://coral.thrinacia.com/api'
};
const campaignId = 2;
const date = new Date();
const today = date.toISOString().split('T')[0]
const rowData = [
{toggle: 1, check: 1, dropdown: 'hello'}
];
render(
html`
<div class="form">
<skhemata-form id="form" @submit=${handleSubmit} @change=${(e) => console.log(e.detail.data)} horizontal>
<skhemata-form-textbox class="column" name="myinput" label="Hello World"></skhemata-form-textbox>
<skhemata-form-textbox class="column" name="email" label="Email" type="email" required></skhemata-form-textbox>
<skhemata-form-textbox class="column" name="password" label="Password" type="password" required></skhemata-form-textbox>
<skhemata-form-textbox class="column" label="Test" required minlength=10 name="input2" id="txt"></skhemata-form-textbox>
<skhemata-form-textbox class="column" label="Search" required minlength=10 name="searchinput" type="search"></skhemata-form-textbox>
<skhemata-form-textarea class="column" label="Area"></skhemata-form-textarea>
<skhemata-form-textbox class="column" label="Div" name="divinput"></skhemata-form-textbox>
<skhemata-form-quill class="column" label="Quill Editor" name="quill" .api=${api} campaignId=${campaignId}></skhemata-form-quill>
<skhemata-form-dropdown label="Dropdown" name="dropdown" placeholder="" required description="This is a dropdown">
<option value="hello">Hello</option>
<option value="goodbye">Goodbye</option>
</skhemata-form-dropdown>
<skhemata-form-checkbox label="checkbox" name="check" description="sample Check" required >Sample checkbox</skhemata-form-checkbox>
<skhemata-form-repeat label="repeater" name="repeat" description="Sample Repeat" .repeatedFields=${repeatedFields} rowName="repeat-row" addRowButtonText="Add a new row" removeRowButtonText="remove row" rowLimit="3" .rowData=${rowData}>
</skhemata-form-repeat>
<skhemata-form-date-picker label="date picker" name="date-picker" description="sample date picker" value=${today}>
</skhemata-form-date-picker>
<skhemata-form-toggle label="toggle" name="toggle" onText="ON" offText="OFF" required >Sample toggle</skhemata-form-toggle>
<skhemata-form-autocomplete label="Auto Complete" name="autocomplete" api=${JSON.stringify({url : 'https://coral.thrinacia.com/api/service/restv1/'})} maplabel="name" mapvalue="id"></skhemata-form-autocomplete>
<skhemata-form-button type="submit" title="Submit">Submit</skhemata-form-button>
</skhemata-form>
<skhemata-form id="form">
</skhmata-form>
<div>
`,
document.querySelector('#demo')
);
</script>
</body>
</html>