feat: submit button custom text

Via widget API and form element prop./attr.
See #7

Author: JulianCataldo

README.md

@@ -922,7 +922,7 @@ I encourage you to contribute,
 like people did for the [React JSON Schema Form](https://github.com/rjsf-team/react-jsonschema-form) project.  
 Core maintainers are working on the reference implementation, and community can add things of their interest.
 
-If you want to enhance the lib. by supporting for more fields, it's quite easy!  
+If you want to enhance the lib. by bringing support for more fields, it's quite easy!  
 Just take a peek on the [Shoelace package](./packages/shoelace),
 which is the canonical implementation (meaning it's the most complete, API-wise).  
 Then, you are welcome to make a pull request with new features, or bug fixes.

packages/carbon/src/widgets/submit.ts

@@ -7,6 +7,8 @@ import '@carbon/web-components/es/components/button/index.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-carbon widget-submit">
-		<cds-button type="submit" isExpressive size="lg">Submit</cds-button>
+		<cds-button type="submit" isExpressive size="lg"
+			>${options.label ?? 'Submit'}</cds-button
+		>
 	</div>
 `;

packages/form/src/json-schema-form.ts

@@ -52,6 +52,8 @@ export class Jsf extends LitElement {
 
 	@property({ type: Boolean }) public submitButton = true;
 
+	@property({ type: String }) public submitButtonText = 'Submit';
+
 	@state() private _uiState: unknown = {};
 
 	protected _dig(
@@ -127,7 +129,7 @@ export class Jsf extends LitElement {
 				// return flag('allOf');
 			}
 
-			let nodeParsed = node;
+			const nodeParsed = node;
 
 			// if (currentNode.allOf) {
 			// 	node.allOf?.forEach((subSchema) => {
@@ -394,12 +396,15 @@ export class Jsf extends LitElement {
 	}
 
 	#submit = () => {
-		const options = { id: '__submit' };
+		const options: Widgets['submit'] = {
+			id: '__submit_button',
+			label: this.submitButtonLabel,
+		};
 		const error = 'Missing submit widget.';
 		return (
 			this.widgets?.submit?.(options) ??
 			// systemWidgets?.submit?.(options) ??
-			this.widgets?.callout?.({ ...options, message: error }) ??
+			this.widgets?.callout?.({ message: error }) ??
 			error
 		);
 	};

packages/material/src/widgets/submit.ts

@@ -7,6 +7,8 @@ import '@material/web/button/filled-button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-material widget-submit">
-		<md-filled-button type="submit">Submit</md-filled-button>
+		<md-filled-button type="submit"
+			>${options.submitButtonText ?? 'Submit'}</md-filled-button
+		>
 	</div>
 `;

packages/shoelace/src/widgets/submit.ts

@@ -7,6 +7,8 @@ import '@shoelace-style/shoelace/dist/components/button/button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-shoelace widget-submit">
-		<sl-button type="submit" size="large">Submit</sl-button>
+		<sl-button type="submit" size="large"
+			>${options.label ?? 'Submit'}</sl-button
+		>
 	</div>
 `;

packages/spectrum/src/widgets/submit.ts

@@ -7,6 +7,8 @@ import '@spectrum-web-components/button/sp-button.js';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-spectrum widget-submit">
-		<sp-button type="submit" size="large">Submit</sp-button>
+		<sp-button type="submit" size="large"
+			>${options.label ?? 'Submit'}</sp-button
+		>
 	</div>
 `;

packages/system/src/widgets/submit.ts

@@ -5,6 +5,6 @@ import type { Widgets } from '@jsfe/types';
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-system widget-submit">
-		<button type="submit">Submit</button>
+		<button type="submit">${options.label ?? 'Submit'}</button>
 	</div>
 `;

packages/types/src/widgets.ts

@@ -146,5 +146,5 @@ export interface Widgets {
 		type?: 'tip' | 'warning' | 'danger';
 	}>;
 
-	submit?: Widget<undefined>;
+	submit?: Widget<{ id?: string; label?: string }>;
 }

packages/wired/src/widgets/submit.ts

@@ -1,9 +1,9 @@
+import 'wired-elements/lib/wired-button.js';
+
 import { html } from 'lit';
 
 import type { Widgets } from '@jsfe/types';
 
-import 'wired-elements/lib/wired-button.js';
-
 export const submit: Widgets['submit'] = (options) => html`
 	<!--  -->
 	<div id=${options.id} class="theme-wired widget-submit">
@@ -13,7 +13,7 @@ export const submit: Widgets['submit'] = (options) => html`
 			@click=${(event: Event) =>
 				// FIXME: !!!
 				event.target?.dispatchEvent(new Event('submit', { bubbles: true }))}
-			>Submit</wired-button
+			>${options.label ?? 'Submit'}</wired-button
 		>
 	</div>
 `;