@budibase/bbui 2.3.19 → 2.3.21-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.3.19",
+  "version": "2.3.21-alpha.0",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/string-templates": "^2.3.19",
+    "@budibase/string-templates": "2.3.21-alpha.0",
     "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
@@ -89,5 +89,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "dfb412df1e5ae11e6d0772a83d4add7c4ee7d1d2"
+  "gitHead": "e07c36dd8ca5d1fcfcf18961457dc539016535ca"
 }

package/src/ActionButton/ActionButton.svelte

@@ -1,6 +1,9 @@
 <script>
   import "@spectrum-css/actionbutton/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
   const dispatch = createEventDispatcher()
 
   export let quiet = false
@@ -13,6 +16,9 @@
   export let active = false
   export let fullWidth = false
   export let noPadding = false
+  export let tooltip = ""
+
+  let showTooltip = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -35,42 +41,54 @@
   }
 </script>
 
-<button
-  use:longPress
-  class:spectrum-ActionButton--quiet={quiet}
-  class:spectrum-ActionButton--emphasized={emphasized}
-  class:is-selected={selected}
-  class:noPadding
-  class:fullWidth
-  class="spectrum-ActionButton spectrum-ActionButton--size{size}"
-  class:active
-  {disabled}
-  on:longPress
-  on:click|preventDefault
+<span
+  class="btn-wrap"
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:focus={() => (showTooltip = true)}
 >
-  {#if longPressable}
-    <svg
-      class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
-      focusable="false"
-      aria-hidden="true"
-    >
-      <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
-    </svg>
-  {/if}
-  {#if icon}
-    <svg
-      class="spectrum-Icon spectrum-Icon--size{size}"
-      focusable="false"
-      aria-hidden="true"
-      aria-label={icon}
-    >
-      <use xlink:href="#spectrum-icon-18-{icon}" />
-    </svg>
-  {/if}
-  {#if $$slots}
-    <span class="spectrum-ActionButton-label"><slot /></span>
-  {/if}
-</button>
+  <button
+    use:longPress
+    class:spectrum-ActionButton--quiet={quiet}
+    class:spectrum-ActionButton--emphasized={emphasized}
+    class:is-selected={selected}
+    class:noPadding
+    class:fullWidth
+    class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+    class:active
+    {disabled}
+    on:longPress
+    on:click|preventDefault
+  >
+    {#if longPressable}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-CornerTriangle100" />
+      </svg>
+    {/if}
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--size{size}"
+        focusable="false"
+        aria-hidden="true"
+        aria-label={icon}
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    {#if $$slots}
+      <span class="spectrum-ActionButton-label"><slot /></span>
+    {/if}
+    {#if tooltip && showTooltip}
+      <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+        <Tooltip textWrapping direction="bottom" text={tooltip} />
+      </div>
+    {/if}
+  </button>
+</span>
 
 <style>
   .fullWidth {
@@ -98,4 +116,14 @@
   .is-selected:not(.emphasized) .spectrum-Icon {
     color: var(--spectrum-global-color-gray-900);
   }
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: calc(100% + 4px);
+    width: 100vw;
+    max-width: 150px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
 </style>

package/src/Form/Core/Multiselect.svelte

@@ -14,6 +14,9 @@
   export let autocomplete = false
   export let sort = false
   export let autoWidth = false
+  export let fetchTerm = null
+  export let useFetch = false
+  export let customPopoverHeight
 
   const dispatch = createEventDispatcher()
 
@@ -83,10 +86,13 @@
   {options}
   isPlaceholder={!value?.length}
   {autocomplete}
+  bind:fetchTerm
+  {useFetch}
   {isOptionSelected}
   {getOptionLabel}
   {getOptionValue}
   onSelectOption={toggleOption}
   {sort}
   {autoWidth}
+  {customPopoverHeight}
 />

package/src/Form/Core/Picker.svelte

@@ -24,6 +24,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let open = false
   export let readonly = false
@@ -31,6 +32,11 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let fetchTerm = null
+  export let useFetch = false
+  export let customPopoverHeight
+  export let align = "left"
+  export let footer = null
 
   const dispatch = createEventDispatcher()
 
@@ -71,7 +77,7 @@
   }
 
   const getFilteredOptions = (options, term, getLabel) => {
-    if (autocomplete && term) {
+    if (autocomplete && term && !fetchTerm) {
       const lowerCaseTerm = term.toLowerCase()
       return options.filter(option => {
         return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
@@ -130,12 +136,13 @@
 
 <Popover
   anchor={button}
-  align="left"
+  align={align || "left"}
   bind:this={popover}
   {open}
   on:close={() => (open = false)}
   useAnchorWidth={!autoWidth}
   maxWidth={autoWidth ? 400 : null}
+  customHeight={customPopoverHeight}
 >
   <div
     class="popover-content"
@@ -144,8 +151,9 @@
   >
     {#if autocomplete}
       <Search
-        value={searchTerm}
-        on:change={event => (searchTerm = event.detail)}
+        value={useFetch ? fetchTerm : searchTerm}
+        on:change={event =>
+          useFetch ? (fetchTerm = event.detail) : (searchTerm = event.detail)}
         {disabled}
         placeholder="Search"
       />
@@ -183,7 +191,16 @@
           >
             {#if getOptionIcon(option, idx)}
               <span class="option-extra icon">
-                <Icon size="S" name={getOptionIcon(option, idx)} />
+                {#if useOptionIconImage}
+                  <img
+                    src={getOptionIcon(option, idx)}
+                    alt="icon"
+                    width="15"
+                    height="15"
+                  />
+                {:else}
+                  <Icon size="S" name={getOptionIcon(option, idx)} />
+                {/if}
               </span>
             {/if}
             {#if getOptionColour(option, idx)}
@@ -205,6 +222,12 @@
         {/each}
       {/if}
     </ul>
+
+    {#if footer}
+      <div class="footer">
+        {footer}
+      </div>
+    {/if}
   </div>
 </Popover>
 
@@ -247,7 +270,7 @@
   }
   .popover-content.auto-width .spectrum-Menu-itemLabel {
     white-space: nowrap;
-    overflow: hidden;
+    overflow: none;
     text-overflow: ellipsis;
   }
   .popover-content:not(.auto-width) .spectrum-Menu-itemLabel {
@@ -281,4 +304,11 @@
   .popover-content :global(.spectrum-Search .spectrum-Textfield-icon) {
     top: 9px;
   }
+
+  .footer {
+    padding: 4px 12px 12px 12px;
+    font-style: italic;
+    max-width: 170px;
+    font-size: 12px;
+  }
 </style>

package/src/Form/Core/Select.svelte

@@ -11,6 +11,7 @@
   export let getOptionLabel = option => option
   export let getOptionValue = option => option
   export let getOptionIcon = () => null
+  export let useOptionIconImage = false
   export let getOptionColour = () => null
   export let isOptionEnabled
   export let readonly = false
@@ -18,6 +19,8 @@
   export let autoWidth = false
   export let autocomplete = false
   export let sort = false
+  export let align
+  export let footer = null
 
   const dispatch = createEventDispatcher()
 
@@ -41,7 +44,7 @@
   const getFieldText = (value, options, placeholder) => {
     // Always use placeholder if no value
     if (value == null || value === "") {
-      return placeholder || "Choose an option"
+      return placeholder !== false ? "Choose an option" : ""
     }
 
     return getFieldAttribute(getOptionLabel, value, options)
@@ -66,15 +69,18 @@
   {fieldColour}
   {options}
   {autoWidth}
+  {align}
+  {footer}
   {getOptionLabel}
   {getOptionValue}
   {getOptionIcon}
+  {useOptionIconImage}
   {getOptionColour}
   {isOptionEnabled}
   {autocomplete}
   {sort}
   isPlaceholder={value == null || value === ""}
-  placeholderOption={placeholder}
+  placeholderOption={placeholder === false ? null : placeholder}
   isOptionSelected={option => option === value}
   onSelectOption={selectOption}
 />

package/src/Form/Multiselect.svelte

@@ -15,6 +15,11 @@
   export let getOptionValue = option => option
   export let sort = false
   export let autoWidth = false
+  export let autocomplete = false
+  export let fetchTerm = null
+  export let useFetch = false
+  export let customPopoverHeight
+
   const dispatch = createEventDispatcher()
   const onChange = e => {
     value = e.detail
@@ -34,6 +39,10 @@
     {getOptionLabel}
     {getOptionValue}
     {autoWidth}
+    {autocomplete}
+    {customPopoverHeight}
+    bind:fetchTerm
+    {useFetch}
     on:change={onChange}
     on:click
   />

package/src/Form/Select.svelte

@@ -14,12 +14,17 @@
   export let getOptionLabel = option => extractProperty(option, "label")
   export let getOptionValue = option => extractProperty(option, "value")
   export let getOptionIcon = option => option?.icon
+  export let useOptionIconImage = false
   export let getOptionColour = option => option?.colour
   export let isOptionEnabled
   export let quiet = false
   export let autoWidth = false
   export let sort = false
   export let tooltip = ""
+  export let autocomplete = false
+  export let customPopoverHeight
+  export let align
+  export let footer = null
 
   const dispatch = createEventDispatcher()
   const onChange = e => {
@@ -46,11 +51,16 @@
     {placeholder}
     {autoWidth}
     {sort}
+    {align}
+    {footer}
     {getOptionLabel}
     {getOptionValue}
     {getOptionIcon}
     {getOptionColour}
+    {useOptionIconImage}
     {isOptionEnabled}
+    {autocomplete}
+    {customPopoverHeight}
     on:change={onChange}
     on:click
   />

package/src/Icon/Icon.svelte

@@ -67,6 +67,9 @@
     color: var(--spectrum-alias-icon-color-selected-hover) !important;
     cursor: pointer;
   }
+  svg.hoverable:active {
+    color: var(--spectrum-global-color-blue-400) !important;
+  }
 
   svg.disabled {
     color: var(--spectrum-global-color-gray-500) !important;

package/src/InlineAlert/InlineAlert.svelte

@@ -57,5 +57,7 @@
     --spectrum-semantic-negative-icon-color: #e34850;
     min-width: 100px;
     margin: 0;
+    border-color: var(--spectrum-global-color-gray-400);
+    border-width: 1px;
   }
 </style>

package/src/Label/Label.svelte

@@ -21,7 +21,7 @@
   label {
     padding: 0;
     white-space: nowrap;
-    color: var(--spectrum-global-color-gray-600);
+    color: var(--spectrum-global-color-gray-700);
   }
 
   .muted {

package/src/Modal/Modal.svelte

@@ -1,7 +1,7 @@
 <script>
   import "@spectrum-css/modal/dist/index-vars.css"
   import "@spectrum-css/underlay/dist/index-vars.css"
-  import { createEventDispatcher, setContext, tick } from "svelte"
+  import { createEventDispatcher, setContext, tick, onMount } from "svelte"
   import { fade, fly } from "svelte/transition"
   import Portal from "svelte-portal"
   import Context from "../context"
@@ -62,9 +62,14 @@
   }
 
   setContext(Context.Modal, { show, hide, cancel })
-</script>
 
-<svelte:window on:keydown={handleKey} />
+  onMount(() => {
+    document.addEventListener("keydown", handleKey)
+    return () => {
+      document.removeEventListener("keydown", handleKey)
+    }
+  })
+</script>
 
 {#if inline}
   {#if visible}

package/src/Popover/Popover.svelte

@@ -18,6 +18,7 @@
   export let useAnchorWidth = false
   export let dismissible = true
   export let offset = 5
+  export let customHeight
 
   $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
 
@@ -74,6 +75,7 @@
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
       role="presentation"
+      style="height: {customHeight}"
       transition:fly|local={{ y: -20, duration: 200 }}
     >
       <slot />

package/src/helpers.js

@@ -104,6 +104,9 @@ export const deepSet = (obj, key, value) => {
  * @param obj the object to clone
  */
 export const cloneDeep = obj => {
+  if (!obj) {
+    return obj
+  }
   return JSON.parse(JSON.stringify(obj))
 }