Skip to content

Commit f2590ff

Browse files
romancowromancow
authored
Merge pull request #33 from webgme/readonly-setting
Add readonly setting
2 parents 9331faa + 8e39d28 commit f2590ff

File tree

9 files changed

+95
-37
lines changed

9 files changed

+95
-37
lines changed

‎src/lib/UISchema.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ namespace UISchema {
1313
export type Options = {
1414
collapse?: UISchema.Options.Collapse
1515
ignoreEmpty?: boolean
16+
readonly?: boolean
1617
};
1718

1819
export namespace Options {

‎src/lib/controls/AnyOfControl.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
3-
import type UISchema from "$lib/UISchema";
3+
import UISchema from "$lib/UISchema";
44
import deepEquals from "fast-deep-equal";
55
import { isObjectSchema, omit, getLabel, isEmpty } from "$lib/utilities";
66
import Paper, { Title, Content } from "@smui/paper";
@@ -22,6 +22,7 @@
2222
let selected: JSONSchema7 | null = null;
2323
let selectedProps: string[] | undefined;
2424
25+
$: uiOptions = UISchema.Options.get(uischema);
2526
$: updateSchemas(anyOf);
2627
$: resetSelected(schemas);
2728
$: resetData(selected, type);
@@ -89,6 +90,7 @@
8990
class="control-anyof-select"
9091
label={title}
9192
required={isRequired}
93+
disabled={$uiOptions.readonly}
9294
menu$class="control-anyof-menu"
9395
menu$portal
9496
bind:value={selected}

‎src/lib/controls/ArrayControl.svelte‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -142,15 +142,22 @@
142142
<Panel bind:open variant="unelevated" disabled={!enabled} class={hasRequired ? "has-required" : undefined}>
143143
<Header>
144144
{#if !hasRequired}
145-
<IconButton type="button" toggle bind:pressed={enabled} size="button" on:click={stop}>
145+
<IconButton
146+
type="button"
147+
toggle
148+
disabled={$uiOptions.readonly}
149+
bind:pressed={enabled}
150+
size="button"
151+
on:click={stop}
152+
>
146153
<Icon class="material-icons" on>check_box</Icon>
147154
<Icon class="material-icons">check_box_outline_blank</Icon>
148155
</IconButton>
149156
{/if}
150157
<span class="control-array-title">{title ?? ""}</span>
151158
<svelte:fragment slot="description">{description ?? ""}</svelte:fragment>
152159
<div slot="icon">
153-
{#if canAddItem}
160+
{#if canAddItem && !$uiOptions.readonly}
154161
<IconButton type="button" class="material-icons" on:click={headerAddItem} size="button">add</IconButton>
155162
{/if}
156163
<IconButton type="button" toggle pressed={open} size="button">
@@ -172,34 +179,36 @@
172179
force
173180
/>
174181
</div>
175-
<div class="control-array-item-actions">
176-
<IconButton
177-
type="button"
178-
on:click={() => moveItemUp(index)}
179-
class="material-icons"
180-
size="button"
181-
disabled={!canMoveItemUp(index)}
182-
>keyboard_arrow_up</IconButton>
183-
<!-- {#if canRemoveItem(index)}
184-
<Fab mini on:click={() => removeItem(index)}>
185-
<Icon class="material-icons">delete</Icon>
186-
</Fab>
187-
{/if} -->
188-
<IconButton
189-
type="button"
190-
on:click={() => removeItem(index)}
191-
class="material-icons"
192-
size="button"
193-
disabled={!canRemoveItem(index)}
194-
>delete</IconButton>
195-
<IconButton
196-
type="button"
197-
on:click={() => moveItemDown(index)}
198-
class="material-icons"
199-
size="button"
200-
disabled={!canMoveItemDown(index)}
201-
>keyboard_arrow_down</IconButton>
202-
</div>
182+
{#if !$uiOptions.readonly}
183+
<div class="control-array-item-actions">
184+
<IconButton
185+
type="button"
186+
on:click={() => moveItemUp(index)}
187+
class="material-icons"
188+
size="button"
189+
disabled={!canMoveItemUp(index)}
190+
>keyboard_arrow_up</IconButton>
191+
<!-- {#if canRemoveItem(index)}
192+
<Fab mini on:click={() => removeItem(index)}>
193+
<Icon class="material-icons">delete</Icon>
194+
</Fab>
195+
{/if} -->
196+
<IconButton
197+
type="button"
198+
on:click={() => removeItem(index)}
199+
class="material-icons"
200+
size="button"
201+
disabled={!canRemoveItem(index)}
202+
>delete</IconButton>
203+
<IconButton
204+
type="button"
205+
on:click={() => moveItemDown(index)}
206+
class="material-icons"
207+
size="button"
208+
disabled={!canMoveItemDown(index)}
209+
>keyboard_arrow_down</IconButton>
210+
</div>
211+
{/if}
203212
</li>
204213
{/each}
205214
{/if}

‎src/lib/controls/BooleanControl.svelte‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
<script lang="ts">
2+
import UISchema from "$lib/UISchema";
23
import FormField from "@smui/form-field";
34
import Checkbox from "@smui/checkbox";
45
import HelperText from "@smui/textfield/helper-text";
56
67
export let data: boolean | undefined = $$props.default;
8+
export let uischema: UISchema = {};
79
export let title: string | undefined = undefined;
810
export let description: string | undefined = undefined;
911
export let force: boolean = false;
1012
1113
let checked: boolean = data ?? false;
1214
15+
$: uiOptions = UISchema.Options.get(uischema);
1316
$: updateData(checked);
1417
$: updateChecked(data);
1518
@@ -31,7 +34,7 @@
3134

3235
<div class="jsonschema-form-control control-boolean">
3336
<FormField>
34-
<Checkbox bind:checked />
37+
<Checkbox bind:checked disabled={$uiOptions.readonly} />
3538
<span slot="label">{title}</span>
3639
</FormField>
3740
{#if description}

‎src/lib/controls/ConstControl.svelte‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
<script lang="ts">
2+
import UISchema from "$lib/UISchema";
23
import FormField from "@smui/form-field";
34
import Checkbox from "@smui/checkbox";
45
import HelperText from "@smui/textfield/helper-text";
56
import { getLabel } from "$lib/utilities";
67
78
export let data: any;
9+
export let uischema: UISchema = {};
810
export let title: string | undefined = undefined;
911
export let description: string | undefined = undefined;
1012
export let isRequired: boolean | undefined = undefined;
1113
export let force: boolean = false;
1214
1315
let checked: boolean = (data != null);
1416
17+
$: uiOptions = UISchema.Options.get(uischema);
18+
$: disabled = isRequired || $uiOptions.readonly;
1519
$: value = $$restProps.const
1620
$: updateData(checked, value);
1721
$: updateChecked(data);
@@ -35,7 +39,7 @@
3539
{#if !force}
3640
<div class="jsonschema-form-control control-const">
3741
<FormField>
38-
<Checkbox bind:checked disabled={isRequired} />
42+
<Checkbox bind:checked {disabled} />
3943
<span slot="label">{ getLabel({ title, ...$$restProps }, "") }</span>
4044
</FormField>
4145
{#if description}

‎src/lib/controls/IntegerControl.svelte‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
2+
import UISchema from "$lib/UISchema";
23
import Textfield from "@smui/textfield";
34
import HelperText from "@smui/textfield/helper-text";
45
import Select, { Option } from "@smui/select";
56
67
export let data: number | undefined = $$props.default;
8+
export let uischema: UISchema = {};
79
export let title: string | undefined = undefined;
810
export let description: string | undefined = undefined;
911
export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
1618
let value = data ?? NaN;
1719
let enumValues: number[] | undefined = undefined;
1820
21+
$: uiOptions = UISchema.Options.get(uischema);
1922
$: updateData(value);
2023
$: updateValue(data);
2124
$: enumValues = $$props.enum;
@@ -37,7 +40,13 @@
3740

3841
<div class="jsonschema-form-control control-integer">
3942
{#if enumValues?.length}
40-
<Select variant="outlined" bind:value label={title} required={isRequired} menu$portal>
43+
<Select
44+
variant="outlined"
45+
bind:value label={title}
46+
required={isRequired}
47+
disabled={$uiOptions.readonly}
48+
menu$portal
49+
>
4150
{#if !force}
4251
<Option value={NaN}/>
4352
{/if}
@@ -58,6 +67,7 @@
5867
input$max={maximum}
5968
input$step={multipleOf}
6069
required={isRequired}
70+
disabled={$uiOptions.readonly}
6171
>
6272
<svelte:fragment slot="helper">
6373
{#if description}

‎src/lib/controls/NumberControl.svelte‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
2+
import UISchema from "$lib/UISchema";
23
import Textfield from "@smui/textfield";
34
import HelperText from "@smui/textfield/helper-text";
45
import Select, { Option } from "@smui/select";
56
67
export let data: number | undefined = $$props.default;
8+
export let uischema: UISchema = {};
79
export let title: string | undefined = undefined;
810
export let description: string | undefined = undefined;
911
export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
1618
let value = data ?? NaN;
1719
let enumValues: number[] | undefined = undefined;
1820
21+
$: uiOptions = UISchema.Options.get(uischema);
1922
$: updateData(value);
2023
$: updateValue(data);
2124
$: enumValues = $$props.enum;
@@ -37,7 +40,14 @@
3740

3841
<div class="jsonschema-form-control control-number">
3942
{#if enumValues?.length}
40-
<Select variant="outlined" bind:value label={title} required={isRequired} menu$portal>
43+
<Select
44+
variant="outlined"
45+
bind:value
46+
label={title}
47+
required={isRequired}
48+
disabled={$uiOptions.readonly}
49+
menu$portal
50+
>
4151
{#if !force}
4252
<Option value={NaN}/>
4353
{/if}
@@ -58,6 +68,7 @@
5868
input$max={maximum}
5969
input$step={multipleOf ?? "any"}
6070
required={isRequired}
71+
disabled={$uiOptions.readonly}
6172
>
6273
<svelte:fragment slot="helper">
6374
{#if description}

‎src/lib/controls/ObjectControl.svelte‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,14 @@
6363
>
6464
<Header>
6565
{#if !isRequired && !ignoreEmpty}
66-
<IconButton type="button" toggle bind:pressed={enabled} size="button" on:click={stop}>
66+
<IconButton
67+
type="button"
68+
toggle
69+
disabled={$uiOptions.readonly}
70+
bind:pressed={enabled}
71+
size="button"
72+
on:click={stop}
73+
>
6774
<Icon class="material-icons" on>check_box</Icon>
6875
<Icon class="material-icons">check_box_outline_blank</Icon>
6976
</IconButton>

‎src/lib/controls/StringControl.svelte‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<script lang="ts">
2+
import UISchema from "$lib/UISchema";
23
import Textfield from "@smui/textfield";
34
import HelperText from "@smui/textfield/helper-text";
45
import Select, { Option } from "@smui/select";
56
67
export let data: string | undefined = $$props.default;
8+
export let uischema: UISchema = {};
79
export let title: string | undefined = undefined;
810
export let description: string | undefined = undefined;
911
export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
1618
let value: string = data ?? "";
1719
let enumValues: string[] | undefined = undefined;
1820
21+
$: uiOptions = UISchema.Options.get(uischema);
1922
$: updateData(value);
2023
$: updateValue(data);
2124
$: enumValues = $$props.enum;
@@ -39,7 +42,14 @@
3942

4043
<div class="jsonschema-form-control control-string">
4144
{#if enumValues?.length}
42-
<Select variant="outlined" bind:value label={title} required={isRequired} menu$portal>
45+
<Select
46+
variant="outlined"
47+
bind:value
48+
label={title}
49+
required={isRequired}
50+
menu$portal
51+
disabled={$uiOptions.readonly}
52+
>
4353
{#if !force}
4454
<Option value={null}/>
4555
{/if}
@@ -60,6 +70,7 @@
6070
input$maxlength={maxLength}
6171
input$pattern={pattern}
6272
required={isRequired}
73+
disabled={$uiOptions.readonly}
6374
>
6475
<svelte:fragment slot="helper">
6576
{#if description}

0 commit comments

Comments
 (0)