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

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,

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,
 

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 (

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>

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
 				>`,
 		)}

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

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>

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>

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

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

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

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

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

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

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;

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)}>

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

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

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

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'