webgme · romancow · May 30, 2024 · May 30, 2024 · May 30, 2024
diff --git a/src/lib/UISchema.ts b/src/lib/UISchema.ts
@@ -13,6 +13,7 @@ namespace UISchema {
   export type Options = {
     collapse?: UISchema.Options.Collapse
     ignoreEmpty?: boolean
+    readonly?: boolean
   };
 
   export namespace Options {

diff --git a/src/lib/controls/AnyOfControl.svelte b/src/lib/controls/AnyOfControl.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
-  import type UISchema from "$lib/UISchema";
+  import UISchema from "$lib/UISchema";
   import deepEquals from "fast-deep-equal";
   import { isObjectSchema, omit, getLabel, isEmpty } from "$lib/utilities";
   import Paper, { Title, Content } from "@smui/paper";
@@ -22,6 +22,7 @@
   let selected: JSONSchema7 | null = null;
   let selectedProps: string[] | undefined;
 
+  $: uiOptions = UISchema.Options.get(uischema);
   $: updateSchemas(anyOf);
   $: resetSelected(schemas);
   $: resetData(selected, type);
@@ -89,6 +90,7 @@
       class="control-anyof-select"
       label={title}
       required={isRequired}
+      disabled={$uiOptions.readonly}
       menu$class="control-anyof-menu"
       menu$portal
       bind:value={selected}

diff --git a/src/lib/controls/ArrayControl.svelte b/src/lib/controls/ArrayControl.svelte
@@ -142,15 +142,22 @@
   <Panel bind:open variant="unelevated"  disabled={!enabled}  class={hasRequired ? "has-required" : undefined}>
     <Header>
       {#if !hasRequired}
-        <IconButton type="button" toggle bind:pressed={enabled} size="button" on:click={stop}>
+        <IconButton
+          type="button"
+          toggle
+          disabled={$uiOptions.readonly}
+          bind:pressed={enabled}
+          size="button"
+          on:click={stop}
+        >
           <Icon class="material-icons" on>check_box</Icon>
           <Icon class="material-icons">check_box_outline_blank</Icon>
         </IconButton>
       {/if}
       <span class="control-array-title">{title ?? ""}</span>
       <svelte:fragment slot="description">{description ?? ""}</svelte:fragment>
       <div slot="icon">
-        {#if canAddItem}
+        {#if canAddItem && !$uiOptions.readonly}
           <IconButton type="button" class="material-icons" on:click={headerAddItem} size="button">add</IconButton>
         {/if}
         <IconButton type="button" toggle pressed={open} size="button">
@@ -172,34 +179,36 @@
                   force
                 />
               </div>
-              <div class="control-array-item-actions">
-                <IconButton
-                  type="button"
-                  on:click={() => moveItemUp(index)}
-                  class="material-icons"
-                  size="button"
-                  disabled={!canMoveItemUp(index)}
-                >keyboard_arrow_up</IconButton>
-                <!-- {#if canRemoveItem(index)}
-                  <Fab mini on:click={() => removeItem(index)}>
-                    <Icon class="material-icons">delete</Icon>
-                  </Fab>
-                {/if} -->
-                <IconButton
-                  type="button"
-                  on:click={() => removeItem(index)}
-                  class="material-icons"
-                  size="button"
-                  disabled={!canRemoveItem(index)}
-                >delete</IconButton>
-                <IconButton
-                  type="button"
-                  on:click={() => moveItemDown(index)}
-                  class="material-icons"
-                  size="button"
-                  disabled={!canMoveItemDown(index)}
-                >keyboard_arrow_down</IconButton>
-              </div>
+              {#if !$uiOptions.readonly}
+                <div class="control-array-item-actions">
+                  <IconButton
+                    type="button"
+                    on:click={() => moveItemUp(index)}
+                    class="material-icons"
+                    size="button"
+                    disabled={!canMoveItemUp(index)}
+                  >keyboard_arrow_up</IconButton>
+                  <!-- {#if canRemoveItem(index)}
+                    <Fab mini on:click={() => removeItem(index)}>
+                      <Icon class="material-icons">delete</Icon>
+                    </Fab>
+                  {/if} -->
+                  <IconButton
+                    type="button"
+                    on:click={() => removeItem(index)}
+                    class="material-icons"
+                    size="button"
+                    disabled={!canRemoveItem(index)}
+                  >delete</IconButton>
+                  <IconButton
+                    type="button"
+                    on:click={() => moveItemDown(index)}
+                    class="material-icons"
+                    size="button"
+                    disabled={!canMoveItemDown(index)}
+                  >keyboard_arrow_down</IconButton>
+                </div>
+              {/if}
             </li>
           {/each}
         {/if}

diff --git a/src/lib/controls/BooleanControl.svelte b/src/lib/controls/BooleanControl.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
+  import UISchema from "$lib/UISchema";
   import FormField from "@smui/form-field";
   import Checkbox from "@smui/checkbox";
   import HelperText from "@smui/textfield/helper-text";
 
   export let data: boolean | undefined = $$props.default;
+  export let uischema: UISchema = {};
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
   export let force: boolean = false;
 
   let checked: boolean = data ?? false;
 
+  $: uiOptions = UISchema.Options.get(uischema);
   $: updateData(checked);
   $: updateChecked(data);
 
@@ -31,7 +34,7 @@
 
 <div class="jsonschema-form-control control-boolean">
   <FormField>
-    <Checkbox bind:checked />
+    <Checkbox bind:checked disabled={$uiOptions.readonly} />
     <span slot="label">{title}</span>
   </FormField>
   {#if description}

diff --git a/src/lib/controls/ConstControl.svelte b/src/lib/controls/ConstControl.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
+  import UISchema from "$lib/UISchema";
   import FormField from "@smui/form-field";
   import Checkbox from "@smui/checkbox";
   import HelperText from "@smui/textfield/helper-text";
   import { getLabel } from "$lib/utilities";
 
   export let data: any;
+  export let uischema: UISchema = {};
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
   export let isRequired: boolean | undefined = undefined;
   export let force: boolean = false;
 
   let checked: boolean = (data != null);
 
+  $: uiOptions = UISchema.Options.get(uischema);
+  $: disabled = isRequired || $uiOptions.readonly;
   $: value = $$restProps.const
   $: updateData(checked, value);
   $: updateChecked(data);
@@ -35,7 +39,7 @@
 {#if !force}
   <div class="jsonschema-form-control control-const">
     <FormField>
-      <Checkbox bind:checked disabled={isRequired} />
+      <Checkbox bind:checked {disabled} />
       <span slot="label">{ getLabel({ title, ...$$restProps }, "") }</span>
     </FormField>
     {#if description}

diff --git a/src/lib/controls/IntegerControl.svelte b/src/lib/controls/IntegerControl.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import UISchema from "$lib/UISchema";
   import Textfield from "@smui/textfield";
   import HelperText from "@smui/textfield/helper-text";
   import Select, { Option } from "@smui/select";
 
   export let data: number | undefined = $$props.default;
+  export let uischema: UISchema = {};
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
   export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
   let value = data ?? NaN;
   let enumValues: number[] | undefined = undefined;
 
+  $: uiOptions = UISchema.Options.get(uischema);
   $: updateData(value);
   $: updateValue(data);
   $: enumValues = $$props.enum;
@@ -37,7 +40,13 @@
 
 <div class="jsonschema-form-control control-integer">
   {#if enumValues?.length}
-    <Select variant="outlined" bind:value label={title} required={isRequired} menu$portal>
+    <Select
+      variant="outlined"
+      bind:value label={title}
+      required={isRequired}
+      disabled={$uiOptions.readonly}
+      menu$portal
+    >
       {#if !force}
         <Option value={NaN}/>
       {/if}
@@ -58,6 +67,7 @@
       input$max={maximum}
       input$step={multipleOf}
       required={isRequired}
+      disabled={$uiOptions.readonly}
     >
       <svelte:fragment slot="helper">
         {#if description}

diff --git a/src/lib/controls/NumberControl.svelte b/src/lib/controls/NumberControl.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import UISchema from "$lib/UISchema";
   import Textfield from "@smui/textfield";
   import HelperText from "@smui/textfield/helper-text";
   import Select, { Option } from "@smui/select";
 
   export let data: number | undefined = $$props.default;
+  export let uischema: UISchema = {};
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
   export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
   let value = data ?? NaN;
   let enumValues: number[] | undefined = undefined;
 
+  $: uiOptions = UISchema.Options.get(uischema);
   $: updateData(value);
   $: updateValue(data);
   $: enumValues = $$props.enum;
@@ -37,7 +40,14 @@
 
 <div class="jsonschema-form-control control-number">
   {#if enumValues?.length}
-    <Select variant="outlined" bind:value label={title} required={isRequired} menu$portal>
+    <Select
+      variant="outlined"
+      bind:value
+      label={title}
+      required={isRequired}
+      disabled={$uiOptions.readonly}
+      menu$portal
+    >
       {#if !force}
         <Option value={NaN}/>
       {/if}
@@ -58,6 +68,7 @@
       input$max={maximum}
       input$step={multipleOf ?? "any"}
       required={isRequired}
+      disabled={$uiOptions.readonly}
     >
       <svelte:fragment slot="helper">
         {#if description}

diff --git a/src/lib/controls/ObjectControl.svelte b/src/lib/controls/ObjectControl.svelte
@@ -63,7 +63,14 @@
   >
     <Header>
       {#if !isRequired && !ignoreEmpty}
-        <IconButton type="button" toggle bind:pressed={enabled} size="button" on:click={stop}>
+        <IconButton 
+          type="button"
+          toggle
+          disabled={$uiOptions.readonly}
+          bind:pressed={enabled}
+          size="button"
+          on:click={stop}
+        >
           <Icon class="material-icons" on>check_box</Icon>
           <Icon class="material-icons">check_box_outline_blank</Icon>
         </IconButton>

diff --git a/src/lib/controls/StringControl.svelte b/src/lib/controls/StringControl.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import UISchema from "$lib/UISchema";
   import Textfield from "@smui/textfield";
   import HelperText from "@smui/textfield/helper-text";
   import Select, { Option } from "@smui/select";
 
   export let data: string | undefined = $$props.default;
+  export let uischema: UISchema = {};
   export let title: string | undefined = undefined;
   export let description: string | undefined = undefined;
   export let format: string | undefined = undefined;
@@ -16,6 +18,7 @@
   let value: string = data ?? "";
   let enumValues: string[] | undefined = undefined;
 
+  $: uiOptions = UISchema.Options.get(uischema);
   $: updateData(value);
   $: updateValue(data);
   $: enumValues = $$props.enum;
@@ -39,7 +42,14 @@
 
 <div class="jsonschema-form-control control-string">
   {#if enumValues?.length}
-    <Select  variant="outlined" bind:value label={title} required={isRequired} menu$portal>
+    <Select 
+      variant="outlined"
+      bind:value
+      label={title}
+      required={isRequired}
+      menu$portal
+      disabled={$uiOptions.readonly}
+    >
       {#if !force}
         <Option value={null}/>
       {/if}
@@ -60,6 +70,7 @@
       input$maxlength={maxLength}
       input$pattern={pattern}
       required={isRequired}
+      disabled={$uiOptions.readonly}
     >
       <svelte:fragment slot="helper">
         {#if description}