jsfe icon indicating copy to clipboard operation
jsfe copied to clipboard

Custom submit button

Open marco-gonella opened this issue 1 year ago • 2 comments

Great job with this project! I'm trying to use it with svelte and velte kit and it seems that customizing submit button is not supported yet, this can be a good enhancement to make it more customizable.

marco-gonella avatar Dec 20 '23 15:12 marco-gonella

Hello, and thank you :D Good idea. We might be able to customise the text, button variant or size in a pinch (via the element API), for convenience.

In the meantime, it's possible to:

Disable the submit button, make your own + hook it up with the form. Maybe I would need to expose the <form> DOMElement reference (it's #private for now). E.g. .submitButton=${false}

https://github.com/json-schema-form-element/jsfe/blob/32f9f7dd5034788c0eb82e130481a9c197f538ce/packages/form/src/json-schema-form.ts#L416C12-L416C12


https://github.com/json-schema-form-element/jsfe/blob/32f9f7dd5034788c0eb82e130481a9c197f538ce/packages/form/src/json-schema-form.ts#L53

Or you can override the widget altogether

https://github.com/json-schema-form-element/jsfe/blob/32f9f7dd5034788c0eb82e130481a9c197f538ce/packages/form/src/json-schema-form.ts#L400

This is the Shoelace one:

https://github.com/json-schema-form-element/jsfe/blob/main/packages/shoelace/src/widgets/submit.ts


Please note the widgets API is still pretty crude, it needs a tad of re-work https://github.com/json-schema-form-element/jsfe/issues/6

JulianCataldo avatar Dec 26 '23 17:12 JulianCataldo

Customising the label is now possible.

<json-schema-form
    submitButtonLabel="Submit me!"
></json-schema-form>

Also in Widget['submit']'s options: https://github.com/json-schema-form-element/jsfe/blob/7483287e785ada08c7577c94e6f1f5c2d91e2c1a/packages/types/src/widgets.ts#L149

Available in:

 - @jsfe/carbon => 0.1.5-next.3+7483287
 - @jsfe/form => 0.3.2-next.3+7483287
 - @jsfe/material => 0.2.3-next.3+7483287
 - @jsfe/shoelace => 0.3.2-next.3+7483287
 - @jsfe/spectrum => 0.1.3-next.3+7483287
 - @jsfe/system => 0.2.3-next.3+7483287
 - @jsfe/wired => 0.2.3-next.3+7483287

JulianCataldo avatar Dec 27 '23 23:12 JulianCataldo