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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "2.2.12-alpha.5",
+  "version": "2.2.12-alpha.51",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,8 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "1.2.1",
-    "@budibase/string-templates": "2.2.12-alpha.5",
+    "@budibase/string-templates": "2.2.12-alpha.51",
+    "@spectrum-css/accordion": "3.0.24",
     "@spectrum-css/actionbutton": "1.0.1",
     "@spectrum-css/actiongroup": "1.0.1",
     "@spectrum-css/avatar": "3.0.2",
@@ -88,5 +89,5 @@
   "resolutions": {
     "loader-utils": "1.4.1"
   },
-  "gitHead": "1641ca6eacbaa560598d76801c2d4af1c3301f54"
+  "gitHead": "70bd5e3f4b13b1a5f41f1309f3944cbeca51535e"
 }

package/src/Accordion/Accordion.svelte

@@ -0,0 +1,58 @@
+<script>
+  import "@spectrum-css/accordion"
+
+  export let itemName
+  export let initialOpen
+  export let header
+
+  let isOpen
+
+  function getOpenClass(isOpen) {
+    if (isOpen === undefined) {
+      isOpen = initialOpen
+    }
+    return isOpen ? "is-open" : ""
+  }
+</script>
+
+<div class="spectrum-Accordion" role={itemName}>
+  <div class="spectrum-Accordion-item {getOpenClass(isOpen)}">
+    <h3 class="spectrum-Accordion-itemHeading">
+      <button
+        class="spectrum-Accordion-itemHeader"
+        type="button"
+        on:click={() => (isOpen = !isOpen)}
+      >
+        {header}
+      </button>
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Accordion-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    </h3>
+    <div class="spectrum-Accordion-itemContent" role={itemName}>
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .spectrum-Accordion {
+    margin-left: -20px;
+  }
+  .spectrum-Accordion-item {
+    border: none;
+  }
+  .spectrum-Accordion-itemContent {
+    width: 97%;
+    padding-left: 30px;
+  }
+  .spectrum-Accordion-itemHeader {
+    text-transform: none;
+    font-weight: bold;
+    font-size: 0.875rem;
+  }
+</style>

package/src/ActionButton/ActionButton.svelte

@@ -88,6 +88,7 @@
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-700);
   }
   .noPadding {
     padding: 0;

package/src/Actions/click_outside.js

@@ -1,11 +1,11 @@
-const ignoredClasses = [".flatpickr-calendar", ".modal-container"]
+const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
 let clickHandlers = []
 
 /**
  * Handle a body click event
  */
 const handleClick = event => {
-  // Ignore click if needed
+  // Ignore click if this is an ignored class
   for (let className of ignoredClasses) {
     if (event.target.closest(className)) {
       return
@@ -14,9 +14,18 @@ const handleClick = event => {
 
   // Process handlers
   clickHandlers.forEach(handler => {
-    if (!handler.element.contains(event.target)) {
-      handler.callback?.(event)
+    if (handler.element.contains(event.target)) {
+      return
+    }
+
+    // Ignore clicks for modals, unless the handler is registered from a modal
+    const sourceInModal = handler.anchor.closest(".spectrum-Modal") != null
+    const clickInModal = event.target.closest(".spectrum-Modal") != null
+    if (clickInModal && !sourceInModal) {
+      return
     }
+
+    handler.callback?.(event)
   })
 }
 document.documentElement.addEventListener("click", handleClick, true)
@@ -24,10 +33,10 @@ document.documentElement.addEventListener("click", handleClick, true)
 /**
  * Adds or updates a click handler
  */
-const updateHandler = (id, element, callback) => {
+const updateHandler = (id, element, anchor, callback) => {
   let existingHandler = clickHandlers.find(x => x.id === id)
   if (!existingHandler) {
-    clickHandlers.push({ id, element, callback })
+    clickHandlers.push({ id, element, anchor, callback })
   } else {
     existingHandler.callback = callback
   }
@@ -42,12 +51,22 @@ const removeHandler = id => {
 
 /**
  * Svelte action to apply a click outside handler for a certain element
+ * opts.anchor is an optional param specifying the real root source of the
+ * component being observed. This is required for things like popovers, where
+ * the element using the clickoutside action is the popover, but the popover is
+ * rendered at the root of the DOM somewhere, whereas the popover anchor is the
+ * element we actually want to consider when determining the source component.
  */
-export default (element, callback) => {
+export default (element, opts) => {
   const id = Math.random()
-  updateHandler(id, element, callback)
+  const update = newOpts => {
+    const callback = newOpts?.callback || newOpts
+    const anchor = newOpts?.anchor || element
+    updateHandler(id, element, anchor, callback)
+  }
+  update(opts)
   return {
-    update: newCallback => updateHandler(id, element, newCallback),
+    update,
     destroy: () => removeHandler(id),
   }
 }

package/src/Actions/position_dropdown.js

@@ -1,75 +1,82 @@
-export default function positionDropdown(element, { anchor, align, maxWidth }) {
-  let positionSide = "top"
-  let maxHeight = 0
-  let dimensions = getDimensions(anchor)
-
-  function getDimensions() {
-    const {
-      bottom,
-      top: spaceAbove,
-      left,
-      width,
-    } = anchor.getBoundingClientRect()
-    const spaceBelow = window.innerHeight - bottom
-    const containerRect = element.getBoundingClientRect()
+export default function positionDropdown(
+  element,
+  { anchor, align, maxWidth, useAnchorWidth }
+) {
+  const update = () => {
+    if (!anchor) {
+      return
+    }
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }
 
-    let y
+    let popoverLeftPad = 20
 
-    if (spaceAbove > spaceBelow) {
-      positionSide = "bottom"
-      maxHeight = spaceAbove - 20
-      y = window.innerHeight - spaceAbove + 5
+    // Determine vertical styles
+    if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - 5
     } else {
-      positionSide = "top"
-      y = bottom + 5
-      maxHeight = spaceBelow - 20
+      styles.top = anchorBounds.bottom + 5
+      styles.maxHeight = window.innerHeight - anchorBounds.bottom - 20
     }
 
-    return {
-      [positionSide]: y,
-      left,
-      width,
-      containerWidth: containerRect.width,
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
     }
-  }
-
-  function calcLeftPosition() {
-    let left
-
-    if (align == "right") {
-      left = dimensions.left + dimensions.width - dimensions.containerWidth
-    } else if (align == "right-side") {
-      left = dimensions.left + dimensions.width
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      let left =
+        anchorBounds.left + anchorBounds.width / 2 - elementBounds.width
+      // Accommodate margin on popover: 1.25rem; ~20px
+      if (left + elementBounds.width + popoverLeftPad > window.innerWidth) {
+        left -= 20
+      }
+      styles.left = left
+    } else if (align === "right-side") {
+      styles.left = anchorBounds.left + anchorBounds.width
     } else {
-      left = dimensions.left
+      styles.left = anchorBounds.left
     }
 
-    return left
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
   }
 
+  // Apply initial styles which don't need to change
   element.style.position = "absolute"
   element.style.zIndex = "9999"
-  if (maxWidth) {
-    element.style.maxWidth = `${maxWidth}px`
-  }
-  element.style.minWidth = `${dimensions.width}px`
-  element.style.maxHeight = `${maxHeight.toFixed(0)}px`
-  element.style.transformOrigin = `center ${positionSide}`
-  element.style[positionSide] = `${dimensions[positionSide]}px`
-  element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
 
+  // Observe both anchor and element and resize the popover as appropriate
   const resizeObserver = new ResizeObserver(entries => {
-    entries.forEach(() => {
-      dimensions = getDimensions()
-      element.style[positionSide] = `${dimensions[positionSide]}px`
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
-    })
+    entries.forEach(update)
   })
-  resizeObserver.observe(anchor)
+  if (anchor) {
+    resizeObserver.observe(anchor)
+  }
   resizeObserver.observe(element)
+  resizeObserver.observe(document.body)
+
+  document.addEventListener("scroll", update, true)
+
   return {
     destroy() {
       resizeObserver.disconnect()
+      document.removeEventListener("scroll", update, true)
     },
   }
 }

package/src/Avatar/Avatar.svelte

@@ -58,5 +58,6 @@
     overflow: hidden;
     user-select: none;
     text-transform: uppercase;
+    flex-shrink: 0;
   }
 </style>

package/src/Button/Button.svelte

@@ -14,12 +14,14 @@
   export let active = false
   export let tooltip = undefined
   export let dataCy
-  export let newStyles = false
+  export let newStyles = true
+  export let id
 
   let showTooltip = false
 </script>
 
 <button
+  {id}
   class:spectrum-Button--cta={cta}
   class:spectrum-Button--primary={primary}
   class:spectrum-Button--secondary={secondary}
@@ -28,6 +30,7 @@
   class:spectrum-Button--quiet={quiet}
   class:new-styles={newStyles}
   class:active
+  class:disabled
   class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
   {disabled}
   data-cy={dataCy}
@@ -108,7 +111,10 @@
     border-color: transparent;
     color: var(--spectrum-global-color-gray-900);
   }
-  .spectrum-Button--secondary.new-styles:hover {
+  .spectrum-Button--secondary.new-styles:not(.disabled):hover {
     background: var(--spectrum-global-color-gray-300);
   }
+  .spectrum-Button--secondary.new-styles.disabled {
+    color: var(--spectrum-global-color-gray-500);
+  }
 </style>

package/src/Drawer/DrawerContent.svelte

@@ -34,7 +34,6 @@
     display: none;
   }
   .main {
-    font-family: var(--font-sans);
     padding: var(--spacing-xl);
   }
   .main :global(textarea) {

package/src/FancyForm/FancyButton.svelte

@@ -0,0 +1,30 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import FancyField from "./FancyField.svelte"
+
+  export let icon
+  export let disabled
+</script>
+
+<FancyField on:click clickable {disabled}>
+  {#if icon}
+    {#if icon.includes("/")}
+      <img src={icon} alt="button" />
+    {:else}
+      <Icon name={icon} />
+    {/if}
+  {/if}
+  <slot name="icon" />
+  <div>
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  img {
+    width: 22px;
+  }
+  div {
+    font-size: var(--font-size-l);
+  }
+</style>

package/src/FancyForm/FancyButtonRadio.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import ActionButton from "../ActionButton/ActionButton.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  $: placeholder = !value
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} autoHeight>
+  {#if label}
+    <FancyFieldLabel placeholder={false}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="options">
+    {#each options as option}
+      <ActionButton
+        selected={getOptionValue(option) === value}
+        on:click={() => onChange(getOptionValue(option))}
+      >
+        {getOptionLabel(option)}
+      </ActionButton>
+    {/each}
+  </div>
+</FancyField>
+
+<style>
+  .options {
+    margin-top: 34px;
+    margin-bottom: 14px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+  }
+  .options :global(.spectrum-ActionButton) {
+    font-size: 15px;
+    line-height: 17px;
+    height: auto;
+    padding: 6px 10px;
+  }
+</style>

package/src/FancyForm/FancyCheckbox.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Checkbox from "../Form/Core/Checkbox.svelte"
+
+  export let value
+  export let text
+  export let disabled = false
+  export let error = null
+  export let validate = null
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = () => {
+    const newValue = !value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} clickable on:click={onChange}>
+  <span>
+    <Checkbox {disabled} {value} />
+  </span>
+  <div class="text">
+    {#if text}
+      {text}
+    {/if}
+    <slot />
+  </div>
+</FancyField>
+
+<style>
+  span {
+    pointer-events: none;
+  }
+  .text {
+    font-size: 15px;
+    line-height: 17px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+  .text > :global(*) {
+    font-size: inherit !important;
+  }
+</style>

package/src/FancyForm/FancyField.svelte

@@ -0,0 +1,126 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
+
+  export let disabled = false
+  export let error = null
+  export let focused = false
+  export let clickable = false
+  export let validate
+  export let value
+  export let ref
+  export let autoHeight
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="fancy-field"
+  class:error
+  class:disabled
+  class:focused
+  class:clickable
+  class:auto-height={autoHeight}
+>
+  <div class="content" on:click>
+    <div class="field">
+      <slot />
+    </div>
+    {#if error}
+      <div class="error-icon">
+        <Icon name="Alert" />
+      </div>
+    {/if}
+  </div>
+  {#if error}
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fancy-field {
+    max-width: 400px;
+    background: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 130ms ease-out, background 130ms ease-out,
+      background 130ms ease-out;
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .fancy-field:hover {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .fancy-field.clickable:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .fancy-field.focused {
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+  .fancy-field.error {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .fancy-field.disabled {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-400);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    pointer-events: none;
+  }
+  .content {
+    position: relative;
+    height: 64px;
+    padding: 0 16px;
+  }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
+  .content,
+  .field {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+  .field {
+    flex: 1 1 auto;
+  }
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+  .error-icon {
+    flex: 0 0 auto;
+  }
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+</style>

package/src/FancyForm/FancyFieldLabel.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    line-height: 15px;
+    font-weight: 500;
+    position: absolute;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out,
+      transform 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>