From 5c36d70a0116624acadc20865a7bba6f76d46d1d Mon Sep 17 00:00:00 2001
From: Mel O'Hagan <mel@budibase.com>
Date: Wed, 1 Nov 2023 14:56:28 +0000
Subject: [PATCH] Pickers readonly prop

---
 .../bbui/src/Form/Core/CheckboxGroup.svelte   |  6 +++++
 packages/bbui/src/Form/Core/RadioGroup.svelte |  6 +++++
 packages/client/manifest.json                 | 22 +++++++++++++++++++
 .../app/forms/MultiFieldSelect.svelte         |  3 +++
 .../components/app/forms/OptionsField.svelte  |  3 +++
 5 files changed, 40 insertions(+)

diff --git a/packages/bbui/src/Form/Core/CheckboxGroup.svelte b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
index 2b8a1e438a..faf37f3ad8 100644
--- a/packages/bbui/src/Form/Core/CheckboxGroup.svelte
+++ b/packages/bbui/src/Form/Core/CheckboxGroup.svelte
@@ -8,6 +8,7 @@
   export let options = []
   export let error = null
   export let disabled = false
+  export let readonly = false
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
 
@@ -40,6 +41,11 @@
         >
           <input
             on:change={onChange}
+            on:click={e => {
+              if (readonly) {
+                e.preventDefault()
+              }
+            }}
             type="checkbox"
             class="spectrum-Checkbox-input"
             value={optionValue}
diff --git a/packages/bbui/src/Form/Core/RadioGroup.svelte b/packages/bbui/src/Form/Core/RadioGroup.svelte
index f7afc10bbc..fc99fafd40 100644
--- a/packages/bbui/src/Form/Core/RadioGroup.svelte
+++ b/packages/bbui/src/Form/Core/RadioGroup.svelte
@@ -8,6 +8,7 @@
   export let options = []
   export let error = null
   export let disabled = false
+  export let readonly = false
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionTitle = option => option
@@ -43,6 +44,11 @@
       >
         <input
           on:change={onChange}
+          on:click={e => {
+            if (readonly) {
+              e.preventDefault()
+            }
+          }}
           bind:group={value}
           value={getOptionValue(option)}
           type="radio"
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 6e175c44de..90c897139c 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -3071,6 +3071,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "select",
         "label": "Options source",
@@ -3196,6 +3207,17 @@
         "key": "disabled",
         "defaultValue": false
       },
+      {
+        "type": "boolean",
+        "label": "Read only",
+        "key": "readonly",
+        "defaultValue": false,
+        "dependsOn": {
+          "setting": "disabled",
+          "value": true,
+          "invert": true
+        }
+      },
       {
         "type": "select",
         "label": "Type",
diff --git a/packages/client/src/components/app/forms/MultiFieldSelect.svelte b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
index 88e1ec5a8e..cb4879f86e 100644
--- a/packages/client/src/components/app/forms/MultiFieldSelect.svelte
+++ b/packages/client/src/components/app/forms/MultiFieldSelect.svelte
@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let validation
   export let defaultValue
   export let optionsSource = "schema"
@@ -71,6 +72,7 @@
         getOptionValue={flatOptions ? x => x : x => x.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         on:change={handleChange}
         {placeholder}
         {options}
@@ -81,6 +83,7 @@
         value={fieldState.value || []}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {direction}
diff --git a/packages/client/src/components/app/forms/OptionsField.svelte b/packages/client/src/components/app/forms/OptionsField.svelte
index 3c229c0509..c01827471a 100644
--- a/packages/client/src/components/app/forms/OptionsField.svelte
+++ b/packages/client/src/components/app/forms/OptionsField.svelte
@@ -6,6 +6,7 @@
   export let label
   export let placeholder
   export let disabled = false
+  export let readonly = false
   export let optionsType = "select"
   export let validation
   export let defaultValue
@@ -58,6 +59,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {placeholder}
@@ -72,6 +74,7 @@
         value={fieldState.value}
         id={fieldState.fieldId}
         disabled={fieldState.disabled}
+        {readonly}
         error={fieldState.error}
         {options}
         {direction}