Skip to content

Commit 01952e2

Browse files
JulianCataldoJulianCataldo
committed
feat: "disabled" and "read only" ui schema options
1 parent 62f970e commit 01952e2

20 files changed

+61
-15
lines changed

‎packages/form/src/triage/array-primitive.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,17 @@ export const fieldArrayPrimitive = (
5454
handleChange(path, enumValue, schemaPathAugmented);
5555
};
5656

57+
const disabled = uiOptions?.['ui:disabled'] || false;
58+
5759
const options = {
5860
label: schema.title,
5961
helpText,
6062

6163
value: dataLevel ?? schema?.default,
6264
enum: items.enum,
6365

66+
disabled,
67+
6468
// itemsLabel,
6569

6670
level,

‎packages/form/src/triage/array.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const fieldArray = (
1111
dataLevel: unknown,
1212
path: Path,
1313
uiState: unknown,
14-
uiSchema: UiSchema,
14+
uiOptions: UiSchema,
1515
handleChange: Jsf['_handleChange'],
1616
dig: Jsf['_dig'],
1717
schemaPath: Path,
@@ -60,7 +60,7 @@ export const fieldArray = (
6060
dataLevel[index],
6161
[...path, index],
6262
uiState,
63-
uiSchema?.[index],
63+
uiOptions?.[index],
6464
schemaPathAugmented,
6565
required,
6666
level + 1,
@@ -162,7 +162,7 @@ export const fieldArray = (
162162
) {
163163
itemLabel = schema.items.title;
164164
}
165-
const arrayLabel = schema.title ?? uiSchema?.['ui:title'];
165+
const arrayLabel = schema.title ?? uiOptions?.['ui:title'];
166166
const options = {
167167
label: arrayLabel,
168168

‎packages/form/src/triage/primitive.ts

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@
33
/* eslint-disable arrow-body-style */
44
/* eslint-disable max-lines */
55

6-
import type { JSONSchema7 } from '@jsfe/types';
7-
86
import type { Jsf } from '../json-schema-form.js';
97

10-
import type { Widgets, Path, UiSchema } from '@jsfe/types';
8+
import type { Widgets, Path, UiSchema, JSONSchema7 } from '@jsfe/types';
119
import { html } from 'lit';
1210

1311
export const fieldPrimitive = (
@@ -46,6 +44,9 @@ export const fieldPrimitive = (
4644
'';
4745
const placeholder = uiOptions?.['ui:placeholder'] ?? '';
4846

47+
const disabled = uiOptions?.['ui:disabled'] || false;
48+
const readonly = uiOptions?.['ui:readonly'] || false;
49+
4950
let baseValue: unknown;
5051

5152
if (value !== undefined) {
@@ -86,6 +87,8 @@ export const fieldPrimitive = (
8687
handleKeydown,
8788
id,
8889
required,
90+
disabled,
91+
readonly,
8992
};
9093

9194
if (

‎packages/shoelace/src/widgets/button-group-boolean.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,17 @@ export const buttonGroupBoolean: Widgets['buttonGroupBoolean'] = (
2424
);
2525
}}
2626
>
27-
<sl-radio-button value="true"
27+
<sl-radio-button
28+
value="true"
29+
.disabled=${
30+
/* NOTE: This is a trick because otherwise we won't see pre-prepopulated value */
31+
options.value === true ? false : options.disabled
32+
}
2833
>${options.trueLabel ?? 'Yes'}</sl-radio-button
2934
>
30-
<sl-radio-button value="false"
35+
<sl-radio-button
36+
value="false"
37+
.disabled=${options.value === false ? false : options.disabled}
3138
>${options.falseLabel ?? 'No'}</sl-radio-button
3239
>
3340
</sl-radio-group>

‎packages/shoelace/src/widgets/button-group.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,12 @@ export const buttonGroup: Widgets['buttonGroup'] = (options) => html`
2929
>
3030
${options.enum?.map(
3131
(enumVal) =>
32-
html`<sl-radio-button value=${String(enumVal)}
32+
html`<sl-radio-button
33+
.disabled=${
34+
/* NOTE: This is a trick because otherwise we won't see pre-prepopulated value */
35+
String(enumVal) === options.value ? false : options.disabled
36+
}
37+
value=${String(enumVal)}
3338
>${enumVal}</sl-radio-button
3439
>`,
3540
)}

‎packages/shoelace/src/widgets/checkbox-group.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const checkboxGroup: Widgets['checkboxGroup'] = (options) => html`
4141
4242
options.valueChangedCallback?.(newData);
4343
}}
44+
.disabled=${options.disabled}
4445
>${enumValue}</sl-checkbox
4546
>`;
4647
})}

‎packages/shoelace/src/widgets/checkbox.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export const checkbox: Widgets['checkbox'] = (options) => html`
1818
const { checked: newValue } = event.target as SlCheckbox;
1919
options.valueChangedCallback?.(newValue);
2020
}}
21+
.disabled=${options.disabled}
2122
>
2223
<label class="widget-checkbox__label">${options.label}</label>
2324
</sl-checkbox>

‎packages/shoelace/src/widgets/color-picker.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const colorPicker: Widgets['colorPicker'] = (options) => html`
1616
1717
options.valueChangedCallback?.(newValue);
1818
}}
19+
.disabled=${options.disabled}
1920
></sl-color-picker>
2021
2122
<div class="widget-color-picker__description">${options.helpText}</div>

‎packages/shoelace/src/widgets/date.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ export const date: Widgets['date'] = (options) => html`
2828
value,
2929
);
3030
}}
31+
.disabled=${options.disabled}
32+
.readonly=${options.readonly}
3133
>
3234
</sl-input>
3335
`;

‎packages/shoelace/src/widgets/number.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,6 @@ export const number: Widgets['number'] = (options) =>
2525
console.log(newValue);
2626
options.valueChangedCallback?.(newValue);
2727
}}
28+
.disabled=${options.disabled}
29+
.readonly=${options.readonly}
2830
></sl-input>`;

‎packages/shoelace/src/widgets/radio-group-boolean.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import type { SlRadioGroup } from '@shoelace-style/shoelace';
1010
export const radioGroupBoolean: Widgets['radioGroupBoolean'] = (
1111
options,
1212
) => html`
13+
<!-- TODO: Disabled state (not supported by Shoelace for this specific field despite the docs?) -->
1314
<sl-radio-group
1415
class="theme-shoelace widget-radio-group-boolean"
1516
size="medium"
@@ -25,7 +26,11 @@ export const radioGroupBoolean: Widgets['radioGroupBoolean'] = (
2526
);
2627
}}
2728
>
28-
<sl-radio value="true">${options.trueLabel ?? 'Yes'}</sl-radio>
29-
<sl-radio value="false">${options.falseLabel ?? 'No'}</sl-radio>
29+
<sl-radio .disabled=${options.disabled} value="true"
30+
>${options.trueLabel ?? 'Yes'}</sl-radio
31+
>
32+
<sl-radio .disabled=${options.disabled} value="false"
33+
>${options.falseLabel ?? 'No'}</sl-radio
34+
>
3035
</sl-radio-group>
3136
`;

‎packages/shoelace/src/widgets/radio-group.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@ export const radioGroup: Widgets['radioGroup'] = (options) => html`
3030
>
3131
${options.enum?.map(
3232
(enumVal) =>
33-
html`<sl-radio value=${String(enumVal)}>${enumVal}</sl-radio>`,
33+
html`<sl-radio .disabled=${options.disabled} value=${String(enumVal)}
34+
>${enumVal}</sl-radio
35+
>`,
3436
)}
3537
</sl-radio-group>
3638
`;

‎packages/shoelace/src/widgets/range.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,4 +24,5 @@ export const range: Widgets['number'] = (options) =>
2424
console.log(newValue);
2525
options.valueChangedCallback?.(newValue);
2626
}}
27+
.disabled=${options.disabled}
2728
></sl-range>`;

‎packages/shoelace/src/widgets/rating.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,5 +28,7 @@ export const rating: Widgets['number'] = (options) =>
2828
console.log(newValue);
2929
options.valueChangedCallback?.(newValue);
3030
}}
31+
.disabled=${options.disabled}
32+
.readonly=${options.readonly}
3133
></sl-rating>
3234
</div>`;

‎packages/shoelace/src/widgets/select-multiple.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,14 @@ import type { SlSelect, SlSelectEvent } from '@shoelace-style/shoelace';
77

88
export const selectMultiple: Widgets['selectMultiple'] = (options) => html`
99
<sl-select
10-
class="theme-shoelace widget-select-multi level-${options.level}""
10+
class="theme-shoelace widget-select-multi level-${options.level}"
1111
part="widget-select-multi"
1212
.id=${options.id}
1313
.label=${options.label ?? ''}
1414
.value=${options.value}
1515
multiple
1616
clearable
17+
.disabled=${options.disabled}
1718
.helpText=${options.helpText ?? ''}
1819
@sl-change=${(event: SlSelectEvent) => {
1920
const { value } = event.target as SlSelect;

‎packages/shoelace/src/widgets/select.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import '@shoelace-style/shoelace/dist/components/select/select.js';
77
import '@shoelace-style/shoelace/dist/components/option/option.js';
88
import type { SlSelect } from '@shoelace-style/shoelace';
99

10-
// .label=${options.label}
11-
// .helpText=${options.helpText}
1210
export const select: Widgets['select'] = (options) => html`
1311
<sl-select
1412
value=${ifDefined(options.value)}
@@ -23,6 +21,9 @@ export const select: Widgets['select'] = (options) => html`
2321
}
2422
options.valueChangedCallback?.(newValue);
2523
}}
24+
.disabled=${options.disabled}
25+
label=${ifDefined(options.label)}
26+
.helpText=${options.helpText ?? ''}
2627
>${options.enum?.map(
2728
(enumValue) =>
2829
html` <sl-option .value=${String(enumValue)}>

‎packages/shoelace/src/widgets/switch.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const switchh: Widgets['switch'] = (options) => html`
1717
const { checked: newValue } = event.target as SlSwitch;
1818
options.valueChangedCallback?.(newValue);
1919
}}
20+
.disabled=${options.disabled}
2021
>${options.label}
2122
${options.helpText
2223
? html`<small> -&nbsp;${options.helpText}</small>`

‎packages/shoelace/src/widgets/text.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ export const text: Widgets['text'] = (options) => html`
2424
const { value: newValue } = event.target as SlInput;
2525
options.valueChangedCallback?.(newValue);
2626
}}
27+
.disabled=${options.disabled}
28+
.readonly=${options.readonly}
2729
>
2830
</sl-input>
2931
`;

‎packages/shoelace/src/widgets/textarea.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ export const textarea: Widgets['textarea'] = (options) => html`
2222
const { value: newValue } = event.target as SlTextarea;
2323
options.valueChangedCallback?.(newValue);
2424
}}
25+
.disabled=${options.disabled}
26+
.readonly=${options.readonly}
2527
>
2628
</sl-textarea>
2729
`;

‎packages/types/src/ui-schema.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ export type UiOptions = {
55
'ui:title'?: string;
66
'ui:description'?: string;
77

8+
'ui:disabled'?: boolean;
9+
'ui:readonly'?: boolean;
10+
811
'ui:widget'?:
912
| 'radio'
1013
| 'button'

0 commit comments

Comments
 (0)