@budibase/bbui 2.6.22 → 2.6.24-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.6.22",
+  "version": "2.6.24-alpha.0",
   "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.6.22",
-    "@budibase/string-templates": "^2.6.22",
+    "@budibase/shared-core": "2.6.24-alpha.0",
+    "@budibase/string-templates": "2.6.24-alpha.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -90,5 +90,19 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "6937bcd24a7338ccb9e392f5cb4131a5be4b4b24"
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          {
+            "projects": [
+              "@budibase/string-templates"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
+  },
+  "gitHead": "71a9558d12c55e7d9ef87b82995c62497662acf8"
 }

package/src/ActionButton/ActionButton.svelte

@@ -102,7 +102,9 @@
     margin-left: 0;
     transition: color ease-out 130ms;
   }
-  .is-selected:not(.spectrum-ActionButton--emphasized):not(.spectrum-ActionButton--quiet) {
+  .is-selected:not(.spectrum-ActionButton--emphasized):not(
+      .spectrum-ActionButton--quiet
+    ) {
     background: var(--spectrum-global-color-gray-300);
     border-color: var(--spectrum-global-color-gray-500);
   }

package/src/Actions/position_dropdown.js

@@ -56,6 +56,8 @@ export default function positionDropdown(element, opts) {
       styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
     } else if (align === "right-outside") {
       styles.left = anchorBounds.right + offset
+    } else if (align === "left-outside") {
+      styles.left = anchorBounds.left - elementBounds.width - offset
     } else {
       styles.left = anchorBounds.left
     }

package/src/Avatar/Avatar.svelte

@@ -13,10 +13,12 @@
   export let url = ""
   export let disabled = false
   export let initials = "JD"
+  export let color = null
 
   const DefaultColor = "#3aab87"
 
-  $: color = getColor(initials)
+  $: avatarColor = color || getColor(initials)
+  $: style = getStyle(size, avatarColor)
 
   const getColor = initials => {
     if (!initials?.length) {
@@ -26,6 +28,12 @@
     const hue = ((code % 26) / 26) * 360
     return `hsl(${hue}, 50%, 50%)`
   }
+
+  const getStyle = (sizeKey, color) => {
+    const size = `var(${sizes.get(sizeKey)})`
+    const fontSize = `calc(${size} / 2)`
+    return `width:${size}; height:${size}; font-size:${fontSize}; background:${color};`
+  }
 </script>
 
 {#if url}
@@ -37,13 +45,7 @@
     style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
   />
 {:else}
-  <div
-    class="spectrum-Avatar"
-    class:is-disabled={disabled}
-    style="width: var({sizes.get(size)}); height: var({sizes.get(
-      size
-    )}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
-  >
+  <div class="spectrum-Avatar" class:is-disabled={disabled} {style}>
     {initials || ""}
   </div>
 {/if}

package/src/Button/Button.svelte

@@ -2,6 +2,7 @@
   import "@spectrum-css/button/dist/index-vars.css"
   import Tooltip from "../Tooltip/Tooltip.svelte"
 
+  export let type
   export let disabled = false
   export let size = "M"
   export let cta = false
@@ -21,6 +22,7 @@
 
 <button
   {id}
+  {type}
   class:spectrum-Button--cta={cta}
   class:spectrum-Button--primary={primary}
   class:spectrum-Button--secondary={secondary}
@@ -73,6 +75,7 @@
   button {
     position: relative;
   }
+
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;

package/src/Drawer/Drawer.svelte

@@ -3,11 +3,13 @@
   import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
   import Heading from "../Typography/Heading.svelte"
+  import { setContext } from "svelte"
 
   export let title
   export let fillWidth
   export let left = "314px"
   export let width = "calc(100% - 626px)"
+  export let headless = false
 
   let visible = false
 
@@ -25,6 +27,11 @@
     visible = false
   }
 
+  setContext("drawer-actions", {
+    hide,
+    show,
+  })
+
   const easeInOutQuad = x => {
     return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
   }
@@ -47,27 +54,34 @@
     <section
       class:fillWidth
       class="drawer"
+      class:headless
       transition:slide|local
       style={`width: ${width}; left: ${left};`}
     >
-      <header>
-        <div class="text">
-          <Heading size="XS">{title}</Heading>
-          <Body size="S">
-            <slot name="description" />
-          </Body>
-        </div>
-        <div class="buttons">
-          <Button secondary quiet on:click={hide}>Cancel</Button>
-          <slot name="buttons" />
-        </div>
-      </header>
+      {#if !headless}
+        <header>
+          <div class="text">
+            <Heading size="XS">{title}</Heading>
+            <Body size="S">
+              <slot name="description" />
+            </Body>
+          </div>
+          <div class="buttons">
+            <Button secondary quiet on:click={hide}>Cancel</Button>
+            <slot name="buttons" />
+          </div>
+        </header>
+      {/if}
       <slot name="body" />
     </section>
   </Portal>
 {/if}
 
 <style>
+  .drawer.headless :global(.drawer-contents) {
+    height: calc(40vh + 75px);
+  }
+
   .buttons {
     display: flex;
     gap: var(--spacing-m);

package/src/FancyForm/ErrorMessage.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { slide } from "svelte/transition"
+
+  export let error = null
+</script>
+
+<div transition:slide|local={{ duration: 130 }} class="error-message">
+  {error}
+</div>
+
+<style>
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+</style>

package/src/FancyForm/FancyField.svelte

@@ -1,7 +1,7 @@
 <script>
   import Icon from "../Icon/Icon.svelte"
   import { getContext, onMount } from "svelte"
-  import { slide } from "svelte/transition"
+  import ErrorMessage from "./ErrorMessage.svelte"
 
   export let disabled = false
   export let error = null
@@ -55,9 +55,7 @@
     {/if}
   </div>
   {#if error}
-    <div transition:slide|local={{ duration: 130 }} class="error-message">
-      {error}
-    </div>
+    <ErrorMessage {error} />
   {/if}
 </div>
 
@@ -110,13 +108,6 @@
   .field {
     flex: 1 1 auto;
   }
-  .error-message {
-    background: var(--spectrum-global-color-red-400);
-    color: white;
-    font-size: 14px;
-    padding: 6px 16px;
-    font-weight: 500;
-  }
   .error-icon {
     flex: 0 0 auto;
   }

package/src/FancyForm/index.js

@@ -4,3 +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 ErrorMessage } from "./ErrorMessage.svelte"

package/src/Form/Core/DatePicker.svelte

@@ -18,10 +18,14 @@
   export let ignoreTimezones = false
   export let time24hr = false
   export let range = false
+  export let flatpickr
+  export let useKeyboardShortcuts = true
+
   const dispatch = createEventDispatcher()
   const flatpickrId = `${uuid()}-wrapper`
+
   let open = false
-  let flatpickr, flatpickrOptions
+  let flatpickrOptions
 
   // Another classic flatpickr issue. Errors were randomly being thrown due to
   // flatpickr internal code. Making sure that "destroy" is a valid function
@@ -59,6 +63,8 @@
         dispatch("change", timestamp.toISOString())
       }
     },
+    onOpen: () => dispatch("open"),
+    onClose: () => dispatch("close"),
   }
 
   $: redrawOptions = {
@@ -113,12 +119,16 @@
 
   const onOpen = () => {
     open = true
-    document.addEventListener("keyup", clearDateOnBackspace)
+    if (useKeyboardShortcuts) {
+      document.addEventListener("keyup", clearDateOnBackspace)
+    }
   }
 
   const onClose = () => {
     open = false
-    document.removeEventListener("keyup", clearDateOnBackspace)
+    if (useKeyboardShortcuts) {
+      document.removeEventListener("keyup", clearDateOnBackspace)
+    }
 
     // Manually blur all input fields since flatpickr creates a second
     // duplicate input field.

package/src/Form/Core/Dropzone.svelte

@@ -165,7 +165,7 @@
           {/if}
           {#if !disabled}
             <div class="delete-button" on:click={removeFile}>
-              <Icon name="Close" />
+              <Icon name="Delete" />
             </div>
           {/if}
         </div>
@@ -209,7 +209,7 @@
             {/if}
             {#if !disabled}
               <div class="delete-button" on:click={removeFile}>
-                <Icon name="Close" />
+                <Icon name="Delete" />
               </div>
             {/if}
           </div>

package/src/Tabs/Tabs.svelte

@@ -12,6 +12,7 @@
   export let emphasized = false
   export let onTop = false
   export let size = "M"
+  export let beforeSwitch = null
 
   let thisSelected = undefined
 
@@ -28,9 +29,18 @@
       thisSelected = selected
       dispatch("select", thisSelected)
     } else if ($tab.title !== thisSelected) {
-      thisSelected = $tab.title
-      selected = $tab.title
-      dispatch("select", thisSelected)
+      if (typeof beforeSwitch == "function") {
+        const proceed = beforeSwitch($tab.title)
+        if (proceed) {
+          thisSelected = $tab.title
+          selected = $tab.title
+          dispatch("select", thisSelected)
+        }
+      } else {
+        thisSelected = $tab.title
+        selected = $tab.title
+        dispatch("select", thisSelected)
+      }
     }
     if ($tab.title !== thisSelected) {
       tab.update(state => {

package/src/Tooltip/Tooltip.svelte

@@ -31,4 +31,12 @@
   .spectrum-Tooltip-tip {
     border-top-color: var(--spectrum-global-color-gray-500);
   }
+  .spectrum-Tooltip {
+    max-width: 280px;
+  }
+  .spectrum-Tooltip-label {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>