@budibase/bbui 3.36.3 → 3.36.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.36.3",
+  "version": "3.36.4",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -103,5 +103,5 @@
       }
     }
   },
-  "gitHead": "6a1af9e82701e0341177e290c6bc695663e2d8e4"
+  "gitHead": "5e383bc443a2e84c6788f6b73f457f4a48e5cb2f"
 }

package/src/Form/Core/Checkbox.svelte

@@ -10,6 +10,7 @@
   export let text: string | undefined = undefined
   export let disabled = false
   export let readonly = false
+  export let quiet = false
   export let size: "S" | "M" | "L" | "XL" = "M"
   export let indeterminate = false
 
@@ -23,12 +24,14 @@
 
 <label
   class="spectrum-Checkbox {sizeClass}"
-  class:spectrum-Checkbox--emphasized={!disabled}
+  class:spectrum-Checkbox--emphasized={!disabled && !quiet}
+  class:is-indeterminate={indeterminate}
   class:is-disabled={disabled}
   class:readonly
 >
   <input
-    checked={value || indeterminate}
+    checked={value}
+    {indeterminate}
     {disabled}
     on:change={onChange}
     type="checkbox"

package/src/TreeView/Item.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
   import { createEventDispatcher, getContext } from "svelte"
   import { writable } from "svelte/store"
+  import Checkbox from "../Form/Core/Checkbox.svelte"
   import Icon from "../Icon/Icon.svelte"
   import type { TreeViewContext } from "./context"
 
   export let selected: boolean = false
+  export let showCheckbox: boolean = false
+  export let indeterminate: boolean = false
   export let disabled: boolean = false
   export let open: boolean = false
   export let href: string | null = null
@@ -18,10 +21,11 @@
     selectable: writable(false),
     quiet: writable(false),
   }
-
+  const selectableStore = treeViewContext.selectable
   const quietStore = treeViewContext.quiet
   const dispatch = createEventDispatcher<{ toggle: boolean; select: boolean }>()
 
+  $: isSelectable = !!$selectableStore
   $: isQuiet = !!$quietStore
   $: if (!hasChildren) {
     open = false
@@ -47,6 +51,10 @@
       dispatch("toggle", open)
     }
   }
+
+  const handleCheckboxChange = (event: CustomEvent<boolean>) => {
+    dispatch("select", event.detail)
+  }
 </script>
 
 <li
@@ -57,10 +65,23 @@
 >
   <a
     on:click
-    class:spectrum-TreeView-itemLink--selectable={!disabled}
+    class:spectrum-TreeView-itemLink--selectable={isSelectable && !disabled}
     class="spectrum-TreeView-itemLink"
     {href}
   >
+    {#if showCheckbox}
+      <span class="checkbox-wrapper">
+        <Checkbox
+          value={selected}
+          {indeterminate}
+          size="S"
+          quiet={isQuiet}
+          {disabled}
+          on:change={handleCheckboxChange}
+        />
+      </span>
+    {/if}
+
     {#if hasChildren}
       <span
         class="spectrum-TreeView-itemIndicator"
@@ -96,6 +117,14 @@
 </li>
 
 <style>
+  .checkbox-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-inline-end: var(--spacing-s);
+    flex-shrink: 0;
+  }
+
   .item-post {
     margin-inline-start: auto;
     padding-inline-end: 8px;
@@ -106,6 +135,11 @@
     margin: 0;
   }
 
+  .checkbox-wrapper :global(.spectrum-Checkbox) {
+    margin: 0;
+    min-height: 0;
+  }
+
   .spectrum-TreeView-itemIndicator :global(i) {
     font-size: 12px;
   }

package/src/TreeView/Tree.svelte

@@ -7,12 +7,15 @@
   export let quiet: boolean = false
   export let standalone: boolean = true
   export let width: string = "250px"
+  export let selectable: boolean = false
 
   const treeViewContext: TreeViewContext = {
+    selectable: writable(selectable),
     quiet: writable(quiet),
   }
   setContext("bbui-treeview", treeViewContext)
 
+  $: treeViewContext.selectable.set(selectable)
   $: treeViewContext.quiet.set(quiet)
 </script>
 

package/src/TreeView/context.ts

@@ -1,5 +1,6 @@
 import type { Writable } from "svelte/store"
 
 export interface TreeViewContext {
+  selectable: Writable<boolean>
   quiet: Writable<boolean>
 }