@budibase/bbui 2.6.19-alpha.5 → 2.6.19-alpha.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.6.19-alpha.5",
+  "version": "2.6.19-alpha.51",
   "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.19-alpha.5",
-    "@budibase/string-templates": "2.6.19-alpha.5",
+    "@budibase/shared-core": "2.6.19-alpha.51",
+    "@budibase/string-templates": "2.6.19-alpha.51",
     "@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": "b3bfc38916955e81701a0f58c12062cd119cf45c"
+  "nx": {
+    "targets": {
+      "build": {
+        "dependsOn": [
+          {
+            "projects": [
+              "@budibase/string-templates"
+            ],
+            "target": "build"
+          }
+        ]
+      }
+    }
+  },
+  "gitHead": "04fc1505cc0fd9102aeeeed1d3d98e34f470fec2"
 }

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/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/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>