@budibase/bbui 3.20.14 → 3.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.20.14",
+  "version": "3.21.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "722993643f9b1df9b424e04b8e4bc2a8705b3849"
+  "gitHead": "89497e01938534167c4ffbe74cdd4090e3e7c3a5"
 }

package/src/Form/Core/Checkbox.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
+  import { Icon } from "@budibase/bbui"
   import "@spectrum-css/checkbox/dist/index-vars.css"
   import "@spectrum-css/fieldgroup/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
   import type { ChangeEventHandler } from "svelte/elements"
-  import { Icon } from "@budibase/bbui"
 
   export let value = false
   export let id: string | undefined = undefined
@@ -22,8 +22,9 @@
 </script>
 
 <label
-  class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
-  class:checked={value || indeterminate}
+  class="spectrum-Checkbox {sizeClass}"
+  class:spectrum-Checkbox--emphasized={!disabled}
+  class:is-disabled={disabled}
   class:readonly
 >
   <input

package/src/Markdown/SpectrumMDE.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import EasyMDE from "easymde"
+  import type EasyMDE from "easymde"
   import "easymde/dist/easymde.min.css"
-  import { onMount } from "svelte"
+  import { onDestroy, onMount } from "svelte"
 
   export let height: string | null = null
   export let scroll: boolean = true
@@ -13,8 +13,9 @@
 
   let element: HTMLTextAreaElement | undefined = undefined
 
-  onMount(() => {
+  onMount(async () => {
     height = height || "200px"
+    const { default: EasyMDE } = await import("easymde")
     mde = new EasyMDE({
       element,
       spellChecker: false,
@@ -24,11 +25,10 @@
       minHeight: scroll ? undefined : height,
       ...easyMDEOptions,
     })
+  })
 
-    // Revert the editor when we unmount
-    return () => {
-      mde?.toTextArea()
-    }
+  onDestroy(() => {
+    mde?.toTextArea()
   })
 
   $: styleString = getStyleString(fullScreenOffset)

package/src/Table/SelectEditRenderer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Checkbox from "../Form/Checkbox.svelte"
   import ActionButton from "../ActionButton/ActionButton.svelte"
+  import Checkbox from "../Form/Checkbox.svelte"
 
   export let selected: boolean | undefined
   export let onEdit: (_e: Event) => void
@@ -11,7 +11,7 @@
 
 <div>
   {#if allowSelectRows && data.__selectable !== false}
-    <Checkbox value={selected} />
+    <Checkbox value={selected} disabled={data.__disabled} />
   {/if}
   {#if allowEditRows}
     <ActionButton size="S" on:click={onEdit}>Edit</ActionButton>

package/src/Table/Table.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from "svelte"
   import "@spectrum-css/table/dist/index-vars.css"
-  import CellRenderer from "./CellRenderer.svelte"
-  import SelectEditRenderer from "./SelectEditRenderer.svelte"
-  import { cloneDeep, deepGet } from "../helpers"
-  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import { createEventDispatcher, onMount } from "svelte"
   import Checkbox from "../Form/Checkbox.svelte"
+  import { cloneDeep, deepGet } from "../helpers"
   import Icon from "../Icon/Icon.svelte"
+  import ProgressCircle from "../ProgressCircle/ProgressCircle.svelte"
+  import CellRenderer from "./CellRenderer.svelte"
+  import SelectEditRenderer from "./SelectEditRenderer.svelte"
 
   /**
    /**
@@ -199,6 +199,9 @@
   }
 
   const sortBy = (fieldSchema: Record<string, any>): void => {
+    if (disableSorting) {
+      return
+    }
     if (fieldSchema.sortable === false) {
       return
     }