jsfe
jsfe copied to clipboard
feat: Add custom widget handler for `object`
This provides the ability to add a custom widget handler for objects, avoiding the need for polymorphism in the object widget.
schema.json:
{
"title": "Extra Fields",
"description": "An explanation of the fields below. This new container is an atonomous widget, that can have it's own styles, yet contain form fields...like a modal that displays a terms of service.",
"properties": {
"agree": {
"title": "I agree",
"description": "Checking this box indicates you agree to our terms of service.",
"type": "boolean"
}
}
}
uiSchema.json:
{
"ui:widget": "dialog",
"agree": {
"ui:widget": "checkbox"
}
}
Then you assign the custom handler when you are extending your form:
form.ts:
import { Jsf } from '@jsfe/form';
import { dialog } from './dialog';
export class JsfSystem extends Jsf {
public widgets = {
// standard widgets
dialog,
};
}
dialog.ts:
import { nothing, html } from 'lit';
import type { Widgets } from '@jsfe/types';
export const object: Widgets['object'] = (options) => html`
<div
role="dialog"
id=${options.id}
part="object"
>
${options.label ? html`<h2>${options.label}</h2>` : ``}
<!-- -->
${options.helpText
? html`<p>${options.helpText}</p>`
: nothing}
<!-- -->
${options.children}
</div>
`;