@budibase/bbui 2.8.3-alpha.2 → 2.8.4

package/package.json

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

package/src/Button/Button.svelte

@@ -16,6 +16,8 @@
   export let tooltip = undefined
   export let newStyles = true
   export let id
+
+  let showTooltip = false
 </script>
 
 <button
@@ -33,6 +35,9 @@
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   on:click|preventDefault
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
 >
   {#if icon}
     <svg
@@ -47,7 +52,19 @@
   {#if $$slots}
     <span class="spectrum-Button-label"><slot /></span>
   {/if}
-  {#if tooltip}
+  {#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}
+  {#if showTooltip && tooltip}
     <div class="tooltip">
       <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
     </div>
@@ -58,6 +75,7 @@
   button {
     position: relative;
   }
+
   .spectrum-Button-label {
     white-space: nowrap;
     overflow: hidden;
@@ -75,13 +93,11 @@
     text-align: center;
     transform: translateX(-50%);
     left: 50%;
-    top: 100%;
-    opacity: 0;
-    transition: opacity 130ms ease-out;
-    pointer-events: none;
+    top: calc(100% - 3px);
   }
-  button:hover .tooltip {
-    opacity: 1;
+  .tooltip-icon {
+    padding-left: var(--spacing-m);
+    line-height: 0;
   }
   .spectrum-Button--primary.new-styles {
     background: var(--spectrum-global-color-gray-800);

package/src/FancyForm/FancyButtonRadio.svelte

@@ -15,6 +15,8 @@
 
   const dispatch = createEventDispatcher()
 
+  $: placeholder = !value
+
   const extractProperty = (value, property) => {
     if (value && typeof value === "object") {
       return value[property]

package/src/Form/Core/EnvDropdown.svelte

@@ -150,7 +150,7 @@
           </div>
         {:else if variables.length}
           <div style="max-height: 100px">
-            {#each variables as variable}
+            {#each variables as variable, idx}
               <li
                 class="spectrum-Menu-item"
                 role="option"

package/src/Form/Core/TextField.svelte

@@ -62,13 +62,6 @@
     }
   }
 
-  const getInputMode = type => {
-    if (type === "bigint") {
-      return "numeric"
-    }
-    return type === "number" ? "decimal" : "text"
-  }
-
   onMount(() => {
     focus = autofocus
     if (focus) field.focus()
@@ -110,7 +103,7 @@
     {type}
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align};` : ""}
-    inputmode={getInputMode(type)}
+    inputmode={type === "number" ? "decimal" : "text"}
     {autocomplete}
   />
 </div>

package/src/Link/Link.svelte

@@ -1,7 +1,6 @@
 <script>
   import "@spectrum-css/link/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
-  import Tooltip from "../Tooltip/Tooltip.svelte"
 
   export let href = "#"
   export let size = "M"
@@ -11,61 +10,18 @@
   export let overBackground = false
   export let target
   export let download
-  export let disabled = false
-  export let tooltip = null
 
   const dispatch = createEventDispatcher()
-
-  const onClick = e => {
-    if (!disabled) {
-      dispatch("click")
-      e.stopPropagation()
-    }
-  }
 </script>
 
 <a
-  on:click={onClick}
+  on:click={e => dispatch("click") && e.stopPropagation()}
   {href}
   {target}
   {download}
-  class:disabled
   class:spectrum-Link--primary={primary}
   class:spectrum-Link--secondary={secondary}
   class:spectrum-Link--overBackground={overBackground}
   class:spectrum-Link--quiet={quiet}
-  class="spectrum-Link spectrum-Link--size{size}"
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
 >
-  <slot />
-  {#if tooltip}
-    <div class="tooltip">
-      <Tooltip textWrapping direction="bottom" text={tooltip} />
-    </div>
-  {/if}
-</a>
-
-<style>
-  a {
-    position: relative;
-  }
-  a.disabled {
-    color: var(--spectrum-global-color-gray-500);
-  }
-  a.disabled:hover {
-    text-decoration: none;
-    cursor: default;
-  }
-  .tooltip {
-    position: absolute;
-    left: 50%;
-    top: 100%;
-    transform: translateX(-50%);
-    opacity: 0;
-    transition: 130ms ease-out;
-    pointer-events: none;
-    z-index: 100;
-  }
-  a:hover .tooltip {
-    opacity: 1;
-  }
-</style>

package/src/Modal/ModalContent.svelte

@@ -1,7 +1,3 @@
-<script context="module">
-  export const keepOpen = Symbol("keepOpen")
-</script>
-
 <script>
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
@@ -34,7 +30,7 @@
 
   async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
+    if (!secondaryAction || (await secondaryAction(e)) !== false) {
       hide()
     }
     loading = false
@@ -42,7 +38,7 @@
 
   async function confirm() {
     loading = true
-    if (!onConfirm || (await onConfirm()) !== keepOpen) {
+    if (!onConfirm || (await onConfirm()) !== false) {
       hide()
     }
     loading = false
@@ -50,7 +46,7 @@
 
   async function close() {
     loading = true
-    if (!onCancel || (await onCancel()) !== keepOpen) {
+    if (!onCancel || (await onCancel()) !== false) {
       cancel()
     }
     loading = false

package/src/Popover/Popover.svelte

@@ -90,6 +90,6 @@
   .spectrum-Popover {
     min-width: var(--spectrum-global-dimension-size-2000);
     border-color: var(--spectrum-global-color-gray-300);
-    overflow: visible;
+    overflow: auto;
   }
 </style>

package/src/Table/CellRenderer.svelte

@@ -29,6 +29,7 @@
   $: type = getType(schema)
   $: customRenderer = customRenderers?.find(x => x.column === schema?.name)
   $: renderer = customRenderer?.component ?? typeMap[type] ?? StringRenderer
+  $: width = schema?.width || "150px"
   $: cellValue = getCellValue(value, schema.template)
 
   const getType = schema => {

package/src/Table/Table.svelte

@@ -379,7 +379,7 @@
           </div>
         {/if}
         {#if sortedRows?.length}
-          {#each sortedRows as row}
+          {#each sortedRows as row, idx}
             <div class="spectrum-Table-row" class:clickable={allowClickRows}>
               {#if showEditColumn}
                 <div

package/src/index.js

@@ -42,7 +42,7 @@ export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
 export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
-export { default as ModalContent, keepOpen } from "./Modal/ModalContent.svelte"
+export { default as ModalContent } from "./Modal/ModalContent.svelte"
 export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"
 export { default as Notification } from "./Notification/Notification.svelte"
 export { default as SideNavigation } from "./SideNavigation/Navigation.svelte"