@budibase/bbui 2.7.35 → 2.7.36-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.7.35",
+  "version": "2.7.36-alpha.2",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,8 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/shared-core": "2.7.35",
-    "@budibase/string-templates": "2.7.35",
+    "@budibase/shared-core": "2.7.36-alpha.2",
+    "@budibase/string-templates": "2.7.36-alpha.2",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "6db1d089ee2d2df8caf513cf2cb4b22f167b91f1"
+  "gitHead": "9e73358c0b5d945e052a08f6a9277a4d263eec01"
 }

package/src/FancyForm/FancyCheckbox.svelte

@@ -8,6 +8,8 @@
   export let disabled = false
   export let error = null
   export let validate = null
+  export let indeterminate = false
+  export let compact = false
 
   const dispatch = createEventDispatcher()
 
@@ -21,11 +23,19 @@
   }
 </script>
 
-<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
+<FancyField
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  {compact}
+  clickable
+  on:click={onChange}
+>
   <span>
-    <Checkbox {disabled} {value} />
+    <Checkbox {disabled} {value} {indeterminate} />
   </span>
-  <div class="text">
+  <div class="text" class:compact>
     {#if text}
       {text}
     {/if}
@@ -47,6 +57,10 @@
     line-clamp: 2;
     -webkit-box-orient: vertical;
   }
+  .text.compact {
+    font-size: 13px;
+    line-height: 15px;
+  }
   .text > :global(*) {
     font-size: inherit !important;
   }

package/src/FancyForm/FancyCheckboxGroup.svelte

@@ -0,0 +1,69 @@
+<script>
+  import FancyCheckbox from "./FancyCheckbox.svelte"
+  import FancyForm from "./FancyForm.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let options = []
+  export let selected = []
+  export let showSelectAll = true
+  export let selectAllText = "Select all"
+
+  let selectedBooleans = reset()
+  const dispatch = createEventDispatcher()
+
+  $: updateSelected(selectedBooleans)
+  $: allSelected = selected?.length === options.length
+  $: noneSelected = !selected?.length
+
+  function reset() {
+    return Array(options.length).fill(true)
+  }
+
+  function updateSelected(selectedArr) {
+    const array = []
+    for (let [i, isSelected] of Object.entries(selectedArr)) {
+      if (isSelected) {
+        array.push(options[i])
+      }
+    }
+    selected = array
+    dispatch("change", selected)
+  }
+
+  function toggleSelectAll() {
+    if (allSelected === true) {
+      selectedBooleans = []
+    } else {
+      selectedBooleans = reset()
+    }
+    dispatch("change", selected)
+  }
+</script>
+
+{#if options && Array.isArray(options)}
+  <div class="checkbox-group" class:has-select-all={showSelectAll}>
+    <FancyForm on:change>
+      {#if showSelectAll}
+        <FancyCheckbox
+          bind:value={allSelected}
+          on:change={toggleSelectAll}
+          text={selectAllText}
+          indeterminate={!allSelected && !noneSelected}
+          compact
+        />
+      {/if}
+      {#each options as option, i}
+        <FancyCheckbox bind:value={selectedBooleans[i]} text={option} compact />
+      {/each}
+    </FancyForm>
+  </div>
+{/if}
+
+<style>
+  .checkbox-group.has-select-all :global(.fancy-field:first-of-type) {
+    background: var(--spectrum-global-color-gray-100);
+  }
+  .checkbox-group.has-select-all :global(.fancy-field:first-of-type:hover) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+</style>

package/src/FancyForm/FancyField.svelte

@@ -11,6 +11,7 @@
   export let value
   export let ref
   export let autoHeight
+  export let compact = false
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -42,6 +43,7 @@
   class:disabled
   class:focused
   class:clickable
+  class:compact
   class:auto-height={autoHeight}
 >
   <div class="content" on:click>
@@ -61,7 +63,6 @@
 
 <style>
   .fancy-field {
-    max-width: 400px;
     background: var(--spectrum-global-color-gray-75);
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 4px;
@@ -69,6 +70,12 @@
     transition: border-color 130ms ease-out, background 130ms ease-out,
       background 130ms ease-out;
     color: var(--spectrum-global-color-gray-800);
+    --padding: 16px;
+    --height: 64px;
+  }
+  .fancy-field.compact {
+    --padding: 8px;
+    --height: 36px;
   }
   .fancy-field:hover {
     border-color: var(--spectrum-global-color-gray-400);
@@ -91,8 +98,8 @@
   }
   .content {
     position: relative;
-    height: 64px;
-    padding: 0 16px;
+    height: var(--height);
+    padding: 0 var(--padding);
   }
   .fancy-field.auto-height .content {
     height: auto;
@@ -103,7 +110,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: 16px;
+    gap: var(--padding);
   }
   .field {
     flex: 1 1 auto;

package/src/FancyForm/index.js

@@ -4,4 +4,5 @@ export { default as FancySelect } from "./FancySelect.svelte"
 export { default as FancyButton } from "./FancyButton.svelte"
 export { default as FancyForm } from "./FancyForm.svelte"
 export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"
+export { default as FancyCheckboxGroup } from "./FancyCheckboxGroup.svelte"
 export { default as ErrorMessage } from "./ErrorMessage.svelte"

package/src/Form/Core/Checkbox.svelte

@@ -9,6 +9,7 @@
   export let text = null
   export let disabled = false
   export let size
+  export let indeterminate = false
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -22,6 +23,7 @@
   class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
   class:is-invalid={!!error}
   class:checked={value}
+  class:is-indeterminate={indeterminate}
 >
   <input
     checked={value}

package/src/Modal/Modal.svelte

@@ -8,6 +8,7 @@
 
   export let fixed = false
   export let inline = false
+  export let disableCancel = false
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -38,7 +39,7 @@
   }
 
   export function cancel() {
-    if (!visible) {
+    if (!visible || disableCancel) {
       return
     }
     dispatch("cancel")