@budibase/bbui 2.12.12 → 2.13.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.12.12",
+  "version": "2.13.2",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -36,8 +36,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.12.12",
-    "@budibase/string-templates": "2.12.12",
+    "@budibase/shared-core": "2.13.2",
+    "@budibase/string-templates": "2.13.2",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "2129bb1e573773ad660e68f95c353bd58cbbe997"
+  "gitHead": "06a7f67e1f9d52ae3e4cf981468d45d107e3c6de"
 }

package/src/Form/Core/Checkbox.svelte

@@ -8,6 +8,7 @@
   export let id = null
   export let text = null
   export let disabled = false
+  export let readonly = false
   export let size
   export let indeterminate = false
 
@@ -24,6 +25,7 @@
   class:is-invalid={!!error}
   class:checked={value}
   class:is-indeterminate={indeterminate}
+  class:readonly
 >
   <input
     checked={value}
@@ -68,4 +70,7 @@
   .spectrum-Checkbox-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

package/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
 
@@ -34,6 +35,7 @@
         title={getOptionLabel(option)}
         class="spectrum-Checkbox spectrum-FieldGroup-item"
         class:is-invalid={!!error}
+        class:readonly
       >
         <label
           class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
@@ -66,4 +68,7 @@
   .spectrum-Checkbox-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

package/src/Form/Core/DatePicker.svelte

@@ -9,6 +9,7 @@
 
   export let id = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let enableTime = true
   export let value = null
@@ -186,7 +187,7 @@
   >
     <div
       id={flatpickrId}
-      class:is-disabled={disabled}
+      class:is-disabled={disabled || readonly}
       class:is-invalid={!!error}
       class="flatpickr spectrum-InputGroup spectrum-Datepicker"
       class:is-focused={open}
@@ -211,6 +212,7 @@
         {/if}
         <input
           {disabled}
+          {readonly}
           data-input
           type="text"
           class="spectrum-Textfield-input spectrum-InputGroup-input"

package/src/Form/Core/Dropzone.svelte

@@ -386,7 +386,7 @@
   }
   .compact .placeholder,
   .compact img {
-    margin: 10px 16px;
+    margin: 8px 16px;
   }
   .compact img {
     height: 90px;
@@ -456,6 +456,12 @@
     color: var(--red);
   }
 
+  .spectrum-Dropzone {
+    height: 220px;
+  }
+  .compact .spectrum-Dropzone {
+    height: 40px;
+  }
   .spectrum-Dropzone.disabled {
     pointer-events: none;
     background-color: var(--spectrum-global-color-gray-200);
@@ -463,10 +469,6 @@
   .disabled .spectrum-Heading--sizeL {
     color: var(--spectrum-alias-text-color-disabled);
   }
-  .compact .spectrum-Dropzone {
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
   .compact .spectrum-IllustratedMessage-description {
     margin: 0;
   }
@@ -477,7 +479,6 @@
     flex-wrap: wrap;
     justify-content: center;
   }
-
   .tag {
     margin-top: 8px;
   }

package/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
@@ -40,6 +41,7 @@
         title={getOptionTitle(option)}
         class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
         class:is-invalid={!!error}
+        class:readonly
       >
         <input
           on:change={onChange}
@@ -62,4 +64,7 @@
   .spectrum-Radio-input {
     opacity: 0;
   }
+  .readonly {
+    pointer-events: none;
+  }
 </style>

package/src/Form/Core/RichTextField.svelte

@@ -4,6 +4,7 @@
   export let value = ""
   export let placeholder = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let height = null
   export let id = null
@@ -20,6 +21,7 @@
     {fullScreenOffset}
     {disabled}
     {easyMDEOptions}
+    {readonly}
     on:change
   />
 </div>

package/src/Form/Core/TextArea.svelte

@@ -5,6 +5,7 @@
   export let value = ""
   export let placeholder = null
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let id = null
   export let height = null
@@ -61,6 +62,7 @@
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align}` : ""}
     {disabled}
+    {readonly}
     {id}
     on:focus={() => (focus = true)}
     on:blur={onChange}

package/src/Form/DatePicker.svelte

@@ -7,6 +7,7 @@
   export let label = null
   export let labelPosition = "above"
   export let disabled = false
+  export let readonly = false
   export let error = null
   export let enableTime = true
   export let timeOnly = false
@@ -33,6 +34,7 @@
   <DatePicker
     {error}
     {disabled}
+    {readonly}
     {value}
     {placeholder}
     {enableTime}

package/src/Markdown/MarkdownEditor.svelte

@@ -8,6 +8,7 @@
   export let id = null
   export let fullScreenOffset = 0
   export let disabled = false
+  export let readonly = false
   export let easyMDEOptions
 
   const dispatch = createEventDispatcher()
@@ -19,6 +20,9 @@
   // control
   $: checkValue(value)
   $: mde?.codemirror.on("change", debouncedUpdate)
+  $: if (readonly || disabled) {
+    mde?.togglePreview()
+  }
 
   const checkValue = val => {
     if (mde && val !== latestValue) {
@@ -54,6 +58,7 @@
     easyMDEOptions={{
       initialValue: value,
       placeholder,
+      toolbar: disabled || readonly ? false : undefined,
       ...easyMDEOptions,
     }}
   />

package/src/bbui.css

@@ -2,6 +2,15 @@
   --background: #ffffff;
   --ink: #000000;
 
+  /* Brand colours */
+  --bb-coral: #FF4E4E;
+  --bb-coral-light: #F97777;
+  --bb-indigo: #6E56FF;
+  --bb-indigo-light: #9F8FFF;
+  --bb-lime: #ECFFB5;
+  --bb-forest-green: #053835;
+  --bb-beige: #F6EFEA;
+
   --grey-1: #fafafa;
   --grey-2: #f5f5f5;
   --grey-3: #eeeeee;