@budibase/bbui 1.0.62 → 1.0.66-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.62",
+  "version": "1.0.66-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -83,5 +83,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "3a42c4c564adda86acd559e4937ec77224e6873f"
+  "gitHead": "59a2e0c10892551d07b947b8b919d883e0303f2b"
 }

package/src/Button/Button.svelte

@@ -17,61 +17,55 @@
   let showTooltip = false
 </script>
 
-<div class:container={!!tooltip}>
-  <button
-    class:spectrum-Button--cta={cta}
-    class:spectrum-Button--primary={primary}
-    class:spectrum-Button--secondary={secondary}
-    class:spectrum-Button--warning={warning}
-    class:spectrum-Button--overBackground={overBackground}
-    class:spectrum-Button--quiet={quiet}
-    class:active
-    class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
-    {disabled}
-    on:click|preventDefault
-    on:mouseover={() => (showTooltip = true)}
-    on:mouseleave={() => (showTooltip = false)}
-  >
-    {#if icon}
+<button
+  class:spectrum-Button--cta={cta}
+  class:spectrum-Button--primary={primary}
+  class:spectrum-Button--secondary={secondary}
+  class:spectrum-Button--warning={warning}
+  class:spectrum-Button--overBackground={overBackground}
+  class:spectrum-Button--quiet={quiet}
+  class:active
+  class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
+  {disabled}
+  on:click|preventDefault
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
+      focusable="false"
+      aria-hidden="true"
+      aria-label={icon}
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  {#if $$slots}
+    <span class="spectrum-Button-label"><slot /></span>
+  {/if}
+  {#if !disabled && tooltip}
+    <div class="tooltip-icon">
       <svg
         class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
         focusable="false"
         aria-hidden="true"
-        aria-label={icon}
+        aria-label="Info"
       >
-        <use xlink:href="#spectrum-icon-18-{icon}" />
+        <use xlink:href="#spectrum-icon-18-InfoOutline" />
       </svg>
-    {/if}
-    {#if $$slots}
-      <span class="spectrum-Button-label"><slot /></span>
-    {/if}
-    {#if !disabled && tooltip}
-      <div class="tooltip-icon">
-        <svg
-          class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
-          focusable="false"
-          aria-hidden="true"
-          aria-label="Info"
-        >
-          <use xlink:href="#spectrum-icon-18-InfoOutline" />
-        </svg>
-      </div>
-    {/if}
-  </button>
+    </div>
+  {/if}
   {#if showTooltip && tooltip}
-    <div class="position">
-      <div class="tooltip">
-        <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
-      </div>
+    <div class="tooltip">
+      <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
     </div>
   {/if}
-</div>
+</button>
 
 <style>
-  .container {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
+  button {
+    position: relative;
   }
   .spectrum-Button-label {
     white-space: nowrap;
@@ -89,12 +83,8 @@
     width: 160px;
     text-align: center;
     transform: translateX(-50%);
-    top: -5px;
-  }
-  .position {
-    position: relative;
-    width: 0;
-    height: 0;
+    left: 50%;
+    top: calc(100% - 3px);
   }
   .tooltip-icon {
     padding-left: var(--spacing-m);

package/src/Drawer/Drawer.svelte

@@ -44,6 +44,11 @@
 {/if}
 
 <style>
+  .buttons {
+    display: flex;
+    gap: var(--spacing-m);
+  }
+
   .drawer {
     position: absolute;
     bottom: 0;
@@ -74,4 +79,12 @@
     align-items: flex-start;
     gap: var(--spacing-xs);
   }
+
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>

package/src/Table/Table.svelte

@@ -3,8 +3,7 @@
   import "@spectrum-css/table/dist/index-vars.css"
   import CellRenderer from "./CellRenderer.svelte"
   import SelectEditRenderer from "./SelectEditRenderer.svelte"
-  import { cloneDeep } from "lodash"
-  import { deepGet } from "../helpers"
+  import { cloneDeep, deepGet } from "../helpers"
 
   /**
    * The expected schema is our normal couch schemas for our tables.

package/src/helpers.js

@@ -98,3 +98,11 @@ export const deepSet = (obj, key, value) => {
   }
   obj[split[split.length - 1]] = value
 }
+
+/**
+ * Deeply clones an object. Functions are not supported.
+ * @param obj the object to clone
+ */
+export const cloneDeep = obj => {
+  return JSON.parse(JSON.stringify(obj))
+}