@budibase/bbui 2.7.36-alpha.2 → 2.7.36

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.7.36-alpha.2",
+  "version": "2.7.36",
   "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.36-alpha.2",
-    "@budibase/string-templates": "2.7.36-alpha.2",
+    "@budibase/shared-core": "2.7.36",
+    "@budibase/string-templates": "2.7.36",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -104,5 +104,5 @@
       }
     }
   },
-  "gitHead": "9e73358c0b5d945e052a08f6a9277a4d263eec01"
+  "gitHead": "66929c1a9739fa64aae8cbb1b9af50919d9a306d"
 }

package/src/FancyForm/FancyCheckbox.svelte

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

package/src/FancyForm/FancyField.svelte

@@ -11,7 +11,6 @@
   export let value
   export let ref
   export let autoHeight
-  export let compact = false
 
   const formContext = getContext("fancy-form")
   const id = Math.random()
@@ -43,7 +42,6 @@
   class:disabled
   class:focused
   class:clickable
-  class:compact
   class:auto-height={autoHeight}
 >
   <div class="content" on:click>
@@ -63,6 +61,7 @@
 
 <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;
@@ -70,12 +69,6 @@
     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);
@@ -98,8 +91,8 @@
   }
   .content {
     position: relative;
-    height: var(--height);
-    padding: 0 var(--padding);
+    height: 64px;
+    padding: 0 16px;
   }
   .fancy-field.auto-height .content {
     height: auto;
@@ -110,7 +103,7 @@
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    gap: var(--padding);
+    gap: 16px;
   }
   .field {
     flex: 1 1 auto;

package/src/FancyForm/index.js

@@ -4,5 +4,4 @@ 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,7 +9,6 @@
   export let text = null
   export let disabled = false
   export let size
-  export let indeterminate = false
 
   const dispatch = createEventDispatcher()
   const onChange = event => {
@@ -23,7 +22,6 @@
   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,7 +8,6 @@
 
   export let fixed = false
   export let inline = false
-  export let disableCancel = false
 
   const dispatch = createEventDispatcher()
   let visible = fixed || inline
@@ -39,7 +38,7 @@
   }
 
   export function cancel() {
-    if (!visible || disableCancel) {
+    if (!visible) {
       return
     }
     dispatch("cancel")

package/src/FancyForm/FancyCheckboxGroup.svelte

@@ -1,69 +0,0 @@
-<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>