jsfe icon indicating copy to clipboard operation
jsfe copied to clipboard

feat: Add custom widget handler for `object`

Open pgoforth opened this issue 1 year ago • 0 comments

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>
`;

pgoforth avatar Sep 18 '24 15:09 pgoforth