@budibase/bbui 2.8.2 → 2.8.3-alpha.0

package/package.json

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

package/src/Button/Button.svelte

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

package/src/FancyForm/FancyButtonRadio.svelte

@@ -15,8 +15,6 @@
 
   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, idx}
+            {#each variables as variable}
               <li
                 class="spectrum-Menu-item"
                 role="option"

package/src/Form/Core/TextField.svelte

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

package/src/Link/Link.svelte

@@ -1,6 +1,7 @@
 <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"
@@ -10,18 +11,61 @@
   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={e => dispatch("click") && e.stopPropagation()}
+  on:click={onClick}
   {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}"><slot /></a
+  class="spectrum-Link spectrum-Link--size{size}"
 >
+  <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,3 +1,7 @@
+<script context="module">
+  export const keepOpen = Symbol("keepOpen")
+</script>
+
 <script>
   import "@spectrum-css/dialog/dist/index-vars.css"
   import { getContext } from "svelte"
@@ -30,7 +34,7 @@
 
   async function secondary(e) {
     loading = true
-    if (!secondaryAction || (await secondaryAction(e)) !== false) {
+    if (!secondaryAction || (await secondaryAction(e)) !== keepOpen) {
       hide()
     }
     loading = false
@@ -38,7 +42,7 @@
 
   async function confirm() {
     loading = true
-    if (!onConfirm || (await onConfirm()) !== false) {
+    if (!onConfirm || (await onConfirm()) !== keepOpen) {
       hide()
     }
     loading = false
@@ -46,7 +50,7 @@
 
   async function close() {
     loading = true
-    if (!onCancel || (await onCancel()) !== false) {
+    if (!onCancel || (await onCancel()) !== keepOpen) {
       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: auto;
+    overflow: visible;
   }
 </style>

package/src/Table/CellRenderer.svelte

@@ -29,7 +29,6 @@
   $: 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, idx}
+          {#each sortedRows as row}
             <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 } from "./Modal/ModalContent.svelte"
+export { default as ModalContent, keepOpen } 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"