70 lines
2.3 KiB
TypeScript
70 lines
2.3 KiB
TypeScript
import { html, domtools, cssManager } from '@design.estate/dees-element';
|
|
import type { DeesForm } from './dees-form.js';
|
|
|
|
export const demoFunc = () => html`
|
|
<style>
|
|
.demoContainer {
|
|
max-width: 400px;
|
|
margin: 24px auto;
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
|
|
box-shadow: 0px 1px 3px #00000030;
|
|
}
|
|
</style>
|
|
<div class="demoContainer">
|
|
<dees-form
|
|
style="display: block; margin:auto; max-width: 500px; padding: 20px"
|
|
@formData=${async (eventArg) => {
|
|
const form: DeesForm = eventArg.currentTarget;
|
|
form.setStatus('pending', 'authenticating...');
|
|
await domtools.plugins.smartdelay.delayFor(1000);
|
|
form.setStatus('success', 'authenticated!');
|
|
}}
|
|
>
|
|
<dees-input-dropdown
|
|
.label=${'title'}
|
|
.options=${[
|
|
{ option: 'option 1', key: 'option1' },
|
|
{ option: 'option 2', key: 'option2' },
|
|
{ option: 'option 3', key: 'option3' },
|
|
]}
|
|
></dees-input-dropdown>
|
|
<dees-input-multiselect
|
|
.label=${'title'}
|
|
.options=${[
|
|
{ option: 'option 1', key: 'option1' },
|
|
{ option: 'option 2', key: 'option2' },
|
|
{ option: 'option 3', key: 'option3' },
|
|
]}></dees-input-multiselect>
|
|
<dees-input-typelist
|
|
.label=${'a type list'}
|
|
></dees-input-typelist>
|
|
<dees-input-text .required="${true}" key="hello1" label="a text" .description=${`
|
|
This is an awesome description.
|
|
`}></dees-input-text>
|
|
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
|
|
<dees-input-text
|
|
.required="${true}"
|
|
key="hello3"
|
|
label="a password"
|
|
isPasswordBool
|
|
></dees-input-text>
|
|
<dees-input-checkbox
|
|
.required="${true}"
|
|
key="hello3"
|
|
label="another text"
|
|
></dees-input-checkbox>
|
|
<dees-input-iban></dees-input-iban>
|
|
<dees-input-multitoggle
|
|
.label=${'multi select'}
|
|
.options=${['option 1', 'option 2', 'option 3']}
|
|
.selectedOption=${'option 1'}
|
|
></dees-input-multitoggle>
|
|
<dees-input-fileupload
|
|
.label=${'attachments'}
|
|
></dees-input-fileupload>
|
|
<dees-form-submit>Submit</dees-form-submit>
|
|
</dees-form>
|
|
</div>
|
|
`;
|