Add disabled setting for forms and fields, and force autocolumns in forms to be disabled

packages/standard-components/manifest.json

@@ -1135,6 +1135,12 @@
             "value": "spectrum--large"
           }
         ]
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1185,6 +1191,12 @@
         "type": "text",
         "label": "Placeholder",
         "key": "placeholder"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1207,6 +1219,12 @@
         "type": "text",
         "label": "Placeholder",
         "key": "placeholder"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1230,6 +1248,12 @@
         "label": "Placeholder",
         "key": "placeholder",
         "placeholder": "Choose an option"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1252,6 +1276,12 @@
         "type": "text",
         "label": "Text",
         "key": "text"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1275,6 +1305,12 @@
         "label": "Placeholder",
         "key": "placeholder",
         "placeholder": "Type something..."
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1303,6 +1339,12 @@
         "label": "Show Time",
         "key": "enableTime",
         "defaultValue": true
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1320,6 +1362,12 @@
         "type": "text",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   },
@@ -1337,6 +1385,12 @@
         "type": "text",
         "label": "Label",
         "key": "label"
+      },
+      {
+        "type": "boolean",
+        "label": "Disabled",
+        "key": "disabled",
+        "defaultValue": false
       }
     ]
   }

packages/standard-components/src/forms/AttachmentField.svelte

@@ -5,6 +5,7 @@
 
   export let field
   export let label
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -24,11 +25,21 @@
 <Field
   {label}
   {field}
+  {disabled}
   type="attachment"
   bind:fieldState
   bind:fieldApi
   defaultValue={[]}>
   {#if mounted}
+    <div class:disabled={$fieldState.disabled}>
       <Dropzone bind:files={value} />
+    </div>
   {/if}
 </Field>
+
+<style>
+  div.disabled :global(> *) {
+    background-color: var(--spectrum-global-color-gray-200) !important;
+    pointer-events: none !important;
+  }
+</style>

packages/standard-components/src/forms/BooleanField.svelte

@@ -5,6 +5,7 @@
   export let field
   export let label
   export let text
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -17,6 +18,7 @@
 <Field
   {label}
   {field}
+  {disabled}
   type="boolean"
   bind:fieldState
   bind:fieldApi
@@ -26,6 +28,7 @@
       <label class="spectrum-Checkbox" class:is-invalid={!$fieldState.valid}>
         <input
           checked={$fieldState.value}
+          disabled={$fieldState.disabled}
           on:change={onChange}
           type="checkbox"
           class="spectrum-Checkbox-input"

packages/standard-components/src/forms/DateTimeField.svelte

@@ -9,6 +9,7 @@
   export let label
   export let placeholder
   export let enableTime
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -53,7 +54,7 @@
   }
 </script>
 
-<Field {label} {field} type="datetime" bind:fieldState bind:fieldApi>
+<Field {label} {field} {disabled} type="datetime" bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
       bind:flatpickr
@@ -67,6 +68,7 @@
         id={flatpickrId}
         aria-disabled="false"
         aria-invalid={!$fieldState.valid}
+        class:is-disabled={$fieldState.disabled}
         class:is-invalid={!$fieldState.valid}
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
         class:is-focused={open}
@@ -76,6 +78,7 @@
         <div
           on:click={flatpickr?.open}
           class="spectrum-Textfield spectrum-InputGroup-textfield"
+          class:is-disabled={$fieldState.disabled}
           class:is-invalid={!$fieldState.valid}>
           {#if !$fieldState.valid}
             <svg
@@ -88,6 +91,7 @@
           <input
             data-input
             type="text"
+            disabled={$fieldState.disabled}
             class="spectrum-Textfield-input spectrum-InputGroup-input"
             aria-invalid={!$fieldState.valid}
             {placeholder}
@@ -98,6 +102,7 @@
           type="button"
           class="spectrum-Picker spectrum-InputGroup-button"
           tabindex="-1"
+          disabled={$fieldState.disabled}
           class:is-invalid={!$fieldState.valid}
           on:click={flatpickr?.open}>
           <svg
@@ -120,7 +125,7 @@
   .spectrum-Textfield-input {
     pointer-events: none;
   }
-  .spectrum-Textfield:hover {
+  .spectrum-Textfield:not(.is-disabled):hover {
     cursor: pointer;
   }
   .flatpickr {

packages/standard-components/src/forms/Field.svelte

@@ -10,6 +10,7 @@
   export let fieldSchema
   export let defaultValue
   export let type
+  export let disabled = false
 
   // Get contexts
   const formContext = getContext("form")
@@ -20,7 +21,7 @@
   // Register field with form
   const formApi = formContext?.formApi
   const labelPosition = fieldGroupContext?.labelPosition || "above"
-  const formField = formApi?.registerField(field, defaultValue)
+  const formField = formApi?.registerField(field, defaultValue, disabled)
 
   // Expose field properties to parent component
   fieldState = formField?.fieldState

packages/standard-components/src/forms/Form.svelte

@@ -8,6 +8,7 @@
   export let datasource
   export let theme
   export let size
+  export let disabled = false
 
   const component = getContext("component")
   const context = getContext("context")
@@ -34,11 +35,23 @@
 
   // Form API contains functions to control the form
   const formApi = {
-    registerField: (field, defaultValue = null) => {
+    registerField: (field, defaultValue = null, fieldDisabled = false) => {
       if (!field) {
         return
       }
+
+      // Auto columns are always disabled
+      const isAutoColumn = !!schema?.[field]?.autocolumn
+
       if (fieldMap[field] != null) {
+        // Update disabled property just so that toggling the disabled field
+        // state in the builder makes updates in real time.
+        // We only need this because of optimisations which prevent fully
+        // remounting when settings change.
+        fieldMap[field].fieldState.update(state => {
+          state.disabled = disabled || fieldDisabled || isAutoColumn
+          return state
+        })
         return fieldMap[field]
       }
 
@@ -47,7 +60,11 @@
       const validate = createValidatorFromConstraints(constraints, field, table)
 
       fieldMap[field] = {
-        fieldState: makeFieldState(field, defaultValue),
+        fieldState: makeFieldState(
+          field,
+          defaultValue,
+          disabled || fieldDisabled || isAutoColumn
+        ),
         fieldApi: makeFieldApi(field, defaultValue, validate),
         fieldSchema: schema?.[field] ?? {},
       }
@@ -115,13 +132,14 @@
   }
 
   // Creates observable state data about a specific field
-  const makeFieldState = (field, defaultValue) => {
+  const makeFieldState = (field, defaultValue, fieldDisabled) => {
     return writable({
       field,
       fieldId: `id-${generateID()}`,
       value: initialValues[field] ?? defaultValue,
       error: null,
       valid: true,
+      disabled: fieldDisabled,
     })
   }
 

packages/standard-components/src/forms/LongFormField.svelte

@@ -6,6 +6,7 @@
   export let field
   export let label
   export let placeholder
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -41,12 +42,13 @@
 <Field
   {label}
   {field}
+  {disabled}
   type="longform"
   bind:fieldState
   bind:fieldApi
   defaultValue="">
   {#if mounted}
-    <div>
+    <div class:disabled={$fieldState.disabled}>
       <RichText bind:value {options} />
     </div>
   {/if}
@@ -68,4 +70,12 @@
   div :global(.ql-editor p) {
     word-break: break-all;
   }
+
+  div.disabled {
+    pointer-events: none !important;
+    background-color: rgb(244, 244, 244);
+  }
+  div.disabled :global(.ql-container *) {
+    color: var(--spectrum-alias-text-color-disabled) !important;
+  }
 </style>

packages/standard-components/src/forms/OptionsField.svelte

@@ -5,6 +5,7 @@
   export let field
   export let label
   export let placeholder
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -26,6 +27,7 @@
 <Field
   {field}
   {label}
+  {disabled}
   type="options"
   bind:fieldState
   bind:fieldApi

packages/standard-components/src/forms/Picker.svelte

@@ -20,6 +20,7 @@
   <button
     id={$fieldState.fieldId}
     class="spectrum-Picker"
+    disabled={$fieldState.disabled}
     class:is-invalid={!$fieldState.valid}
     class:is-open={open}
     aria-haspopup="listbox"

packages/standard-components/src/forms/RelationshipField.svelte

@@ -7,6 +7,7 @@
 
   export let field
   export let label
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -65,6 +66,7 @@
 <Field
   {label}
   {field}
+  {disabled}
   type="link"
   bind:fieldState
   bind:fieldApi

packages/standard-components/src/forms/StringField.svelte

@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let type = "text"
+  export let disabled = false
 
   let fieldState
   let fieldApi
@@ -33,11 +34,15 @@
 <Field
   {label}
   {field}
+  {disabled}
   type={type === 'number' ? 'number' : 'string'}
   bind:fieldState
   bind:fieldApi>
   {#if fieldState}
-    <div class="spectrum-Textfield" class:is-invalid={!$fieldState.valid}>
+    <div
+      class="spectrum-Textfield"
+      class:is-invalid={!$fieldState.valid}
+      class:is-disabled={$fieldState.disabled}>
       {#if !$fieldState.valid}
         <svg
           class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
@@ -49,6 +54,7 @@
       <input
         on:keyup={updateValueOnEnter}
         bind:this={input}
+        disabled={$fieldState.disabled}
         id={$fieldState.fieldId}
         value={$fieldState.value || ''}
         placeholder={placeholder || ''}