feat: "disabled" and "read only" ui schema options

JulianCataldo · JulianCataldo · commit 01952e23355f · 2023-11-30T16:30:05.000+01:00
diff --git a/packages/form/src/triage/array-primitive.ts b/packages/form/src/triage/array-primitive.ts
@@ -54,13 +54,17 @@ export const fieldArrayPrimitive = (
 		handleChange(path, enumValue, schemaPathAugmented);
 	};
 
+	const disabled = uiOptions?.['ui:disabled'] || false;
+
 	const options = {
 		label: schema.title,
 		helpText,
 
 		value: dataLevel ?? schema?.default,
 		enum: items.enum,
 
+		disabled,
+
 		// itemsLabel,
 
 		level,
diff --git a/packages/form/src/triage/array.ts b/packages/form/src/triage/array.ts
@@ -11,7 +11,7 @@ export const fieldArray = (
 	dataLevel: unknown,
 	path: Path,
 	uiState: unknown,
-	uiSchema: UiSchema,
+	uiOptions: UiSchema,
 	handleChange: Jsf['_handleChange'],
 	dig: Jsf['_dig'],
 	schemaPath: Path,
@@ -60,7 +60,7 @@ export const fieldArray = (
 				dataLevel[index],
 				[...path, index],
 				uiState,
-				uiSchema?.[index],
+				uiOptions?.[index],
 				schemaPathAugmented,
 				required,
 				level + 1,
@@ -162,7 +162,7 @@ export const fieldArray = (
 	) {
 		itemLabel = schema.items.title;
 	}
-	const arrayLabel = schema.title ?? uiSchema?.['ui:title'];
+	const arrayLabel = schema.title ?? uiOptions?.['ui:title'];
 	const options = {
 		label: arrayLabel,
 
diff --git a/packages/form/src/triage/primitive.ts b/packages/form/src/triage/primitive.ts
@@ -3,11 +3,9 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable max-lines */
 
-import type { JSONSchema7 } from '@jsfe/types';
-
 import type { Jsf } from '../json-schema-form.js';
 
-import type { Widgets, Path, UiSchema } from '@jsfe/types';
+import type { Widgets, Path, UiSchema, JSONSchema7 } from '@jsfe/types';
 import { html } from 'lit';
 
 export const fieldPrimitive = (
@@ -46,6 +44,9 @@ export const fieldPrimitive = (
 		'';
 	const placeholder = uiOptions?.['ui:placeholder'] ?? '';
 
+	const disabled = uiOptions?.['ui:disabled'] || false;
+	const readonly = uiOptions?.['ui:readonly'] || false;
+
 	let baseValue: unknown;
 
 	if (value !== undefined) {
@@ -86,6 +87,8 @@ export const fieldPrimitive = (
 		handleKeydown,
 		id,
 		required,
+		disabled,
+		readonly,
 	};
 
 	if (
diff --git a/packages/shoelace/src/widgets/button-group-boolean.ts b/packages/shoelace/src/widgets/button-group-boolean.ts
@@ -24,10 +24,17 @@ export const buttonGroupBoolean: Widgets['buttonGroupBoolean'] = (
 			);
 		}}
 	>
-		<sl-radio-button value="true"
+		<sl-radio-button
+			value="true"
+			.disabled=${
+				/* NOTE: This is a trick because otherwise we won't see pre-prepopulated value  */
+				options.value === true ? false : options.disabled
+			}
 			>${options.trueLabel ?? 'Yes'}</sl-radio-button
 		>
-		<sl-radio-button value="false"
+		<sl-radio-button
+			value="false"
+			.disabled=${options.value === false ? false : options.disabled}
 			>${options.falseLabel ?? 'No'}</sl-radio-button
 		>
 	</sl-radio-group>
diff --git a/packages/shoelace/src/widgets/button-group.ts b/packages/shoelace/src/widgets/button-group.ts
@@ -29,7 +29,12 @@ export const buttonGroup: Widgets['buttonGroup'] = (options) => html`
 	>
 		${options.enum?.map(
 			(enumVal) =>
-				html`<sl-radio-button value=${String(enumVal)}
+				html`<sl-radio-button
+					.disabled=${
+						/* NOTE: This is a trick because otherwise we won't see pre-prepopulated value  */
+						String(enumVal) === options.value ? false : options.disabled
+					}
+					value=${String(enumVal)}
 					>${enumVal}</sl-radio-button
 				>`,
 		)}
diff --git a/packages/shoelace/src/widgets/checkbox-group.ts b/packages/shoelace/src/widgets/checkbox-group.ts
@@ -41,6 +41,7 @@ export const checkboxGroup: Widgets['checkboxGroup'] = (options) => html`
 
 						options.valueChangedCallback?.(newData);
 					}}
+					.disabled=${options.disabled}
 					>${enumValue}</sl-checkbox
 				>`;
 			})}
diff --git a/packages/shoelace/src/widgets/checkbox.ts b/packages/shoelace/src/widgets/checkbox.ts
@@ -18,6 +18,7 @@ export const checkbox: Widgets['checkbox'] = (options) => html`
 				const { checked: newValue } = event.target as SlCheckbox;
 				options.valueChangedCallback?.(newValue);
 			}}
+			.disabled=${options.disabled}
 		>
 			<label class="widget-checkbox__label">${options.label}</label>
 		</sl-checkbox>
diff --git a/packages/shoelace/src/widgets/color-picker.ts b/packages/shoelace/src/widgets/color-picker.ts
@@ -16,6 +16,7 @@ export const colorPicker: Widgets['colorPicker'] = (options) => html`
 
 				options.valueChangedCallback?.(newValue);
 			}}
+			.disabled=${options.disabled}
 		></sl-color-picker>
 
 		<div class="widget-color-picker__description">${options.helpText}</div>
diff --git a/packages/shoelace/src/widgets/date.ts b/packages/shoelace/src/widgets/date.ts
@@ -28,6 +28,8 @@ export const date: Widgets['date'] = (options) => html`
 				value,
 			);
 		}}
+		.disabled=${options.disabled}
+		.readonly=${options.readonly}
 	>
 	</sl-input>
 `;
diff --git a/packages/shoelace/src/widgets/number.ts b/packages/shoelace/src/widgets/number.ts
@@ -25,4 +25,6 @@ export const number: Widgets['number'] = (options) =>
 				console.log(newValue);
 				options.valueChangedCallback?.(newValue);
 			}}
+			.disabled=${options.disabled}
+			.readonly=${options.readonly}
 		></sl-input>`;
diff --git a/packages/shoelace/src/widgets/radio-group-boolean.ts b/packages/shoelace/src/widgets/radio-group-boolean.ts
@@ -10,6 +10,7 @@ import type { SlRadioGroup } from '@shoelace-style/shoelace';
 export const radioGroupBoolean: Widgets['radioGroupBoolean'] = (
 	options,
 ) => html`
+	<!-- TODO: Disabled state (not supported by Shoelace for this specific field despite the docs?) -->
 	<sl-radio-group
 		class="theme-shoelace widget-radio-group-boolean"
 		size="medium"
@@ -25,7 +26,11 @@ export const radioGroupBoolean: Widgets['radioGroupBoolean'] = (
 			);
 		}}
 	>
-		<sl-radio value="true">${options.trueLabel ?? 'Yes'}</sl-radio>
-		<sl-radio value="false">${options.falseLabel ?? 'No'}</sl-radio>
+		<sl-radio .disabled=${options.disabled} value="true"
+			>${options.trueLabel ?? 'Yes'}</sl-radio
+		>
+		<sl-radio .disabled=${options.disabled} value="false"
+			>${options.falseLabel ?? 'No'}</sl-radio
+		>
 	</sl-radio-group>
 `;
diff --git a/packages/shoelace/src/widgets/radio-group.ts b/packages/shoelace/src/widgets/radio-group.ts
@@ -30,7 +30,9 @@ export const radioGroup: Widgets['radioGroup'] = (options) => html`
 	>
 		${options.enum?.map(
 			(enumVal) =>
-				html`<sl-radio value=${String(enumVal)}>${enumVal}</sl-radio>`,
+				html`<sl-radio .disabled=${options.disabled} value=${String(enumVal)}
+					>${enumVal}</sl-radio
+				>`,
 		)}
 	</sl-radio-group>
 `;
diff --git a/packages/shoelace/src/widgets/range.ts b/packages/shoelace/src/widgets/range.ts
@@ -24,4 +24,5 @@ export const range: Widgets['number'] = (options) =>
 				console.log(newValue);
 				options.valueChangedCallback?.(newValue);
 			}}
+			.disabled=${options.disabled}
 		></sl-range>`;
diff --git a/packages/shoelace/src/widgets/rating.ts b/packages/shoelace/src/widgets/rating.ts
@@ -28,5 +28,7 @@ export const rating: Widgets['number'] = (options) =>
 					console.log(newValue);
 					options.valueChangedCallback?.(newValue);
 				}}
+				.disabled=${options.disabled}
+				.readonly=${options.readonly}
 			></sl-rating>
 		</div>`;
diff --git a/packages/shoelace/src/widgets/select-multiple.ts b/packages/shoelace/src/widgets/select-multiple.ts
@@ -7,13 +7,14 @@ import type { SlSelect, SlSelectEvent } from '@shoelace-style/shoelace';
 
 export const selectMultiple: Widgets['selectMultiple'] = (options) => html`
 	<sl-select
-		class="theme-shoelace widget-select-multi level-${options.level}""
+		class="theme-shoelace widget-select-multi level-${options.level}"
 		part="widget-select-multi"
 		.id=${options.id}
 		.label=${options.label ?? ''}
 		.value=${options.value}
 		multiple
 		clearable
+		.disabled=${options.disabled}
 		.helpText=${options.helpText ?? ''}
 		@sl-change=${(event: SlSelectEvent) => {
 			const { value } = event.target as SlSelect;
diff --git a/packages/shoelace/src/widgets/select.ts b/packages/shoelace/src/widgets/select.ts
@@ -7,8 +7,6 @@ import '@shoelace-style/shoelace/dist/components/select/select.js';
 import '@shoelace-style/shoelace/dist/components/option/option.js';
 import type { SlSelect } from '@shoelace-style/shoelace';
 
-// .label=${options.label}
-// .helpText=${options.helpText}
 export const select: Widgets['select'] = (options) => html`
 	<sl-select
 		value=${ifDefined(options.value)}
@@ -23,6 +21,9 @@ export const select: Widgets['select'] = (options) => html`
 			}
 			options.valueChangedCallback?.(newValue);
 		}}
+		.disabled=${options.disabled}
+		label=${ifDefined(options.label)}
+		.helpText=${options.helpText ?? ''}
 		>${options.enum?.map(
 			(enumValue) =>
 				html` <sl-option .value=${String(enumValue)}>
diff --git a/packages/shoelace/src/widgets/switch.ts b/packages/shoelace/src/widgets/switch.ts
@@ -17,6 +17,7 @@ export const switchh: Widgets['switch'] = (options) => html`
 			const { checked: newValue } = event.target as SlSwitch;
 			options.valueChangedCallback?.(newValue);
 		}}
+		.disabled=${options.disabled}
 		>${options.label}
 		${options.helpText
 			? html`<small> -&nbsp;${options.helpText}</small>`
diff --git a/packages/shoelace/src/widgets/text.ts b/packages/shoelace/src/widgets/text.ts
@@ -24,6 +24,8 @@ export const text: Widgets['text'] = (options) => html`
 			const { value: newValue } = event.target as SlInput;
 			options.valueChangedCallback?.(newValue);
 		}}
+		.disabled=${options.disabled}
+		.readonly=${options.readonly}
 	>
 	</sl-input>
 `;
diff --git a/packages/shoelace/src/widgets/textarea.ts b/packages/shoelace/src/widgets/textarea.ts
@@ -22,6 +22,8 @@ export const textarea: Widgets['textarea'] = (options) => html`
 			const { value: newValue } = event.target as SlTextarea;
 			options.valueChangedCallback?.(newValue);
 		}}
+		.disabled=${options.disabled}
+		.readonly=${options.readonly}
 	>
 	</sl-textarea>
 `;
diff --git a/packages/types/src/ui-schema.ts b/packages/types/src/ui-schema.ts
@@ -5,6 +5,9 @@ export type UiOptions = {
 	'ui:title'?: string;
 	'ui:description'?: string;
 
+	'ui:disabled'?: boolean;
+	'ui:readonly'?: boolean;
+
 	'ui:widget'?:
 		| 'radio'
 		| 'button'

Original file line number	Diff line number	Diff line change
@@ -18,6 +18,7 @@ export const checkbox: Widgets['checkbox'] = (options) => html`
`18`	`18`	`const { checked: newValue } = event.target as SlCheckbox;`
`19`	`19`	`options.valueChangedCallback?.(newValue);`
`20`	`20`	`}}`
	`21`	`+ .disabled=${options.disabled}`
`21`	`22`	`>`
`22`	`23`	`<label class="widget-checkbox__label">${options.label}</label>`
`23`	`24`	`</sl-checkbox>`
Original file line number	Diff line number	Diff line change
@@ -28,6 +28,8 @@ export const date: Widgets['date'] = (options) => html`
`28`	`28`	`value,`
`29`	`29`	`);`
`30`	`30`	`}}`
	`31`	`+ .disabled=${options.disabled}`
	`32`	`+ .readonly=${options.readonly}`
`31`	`33`	`>`
`32`	`34`	`</sl-input>`
`33`	`35`	`;