@budibase/bbui 1.58.12 → 2.0.0

package/package.json

@@ -1,39 +1,33 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.58.12",
+  "version": "2.0.0",
+  "license": "MPL-2.0",
   "svelte": "src/index.js",
-  "module": "dist/index.mjs",
-  "main": "dist/index.js",
+  "module": "dist/bbui.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/bbui.es.js"
+    },
+    "./package.json": "./package.json",
+    "./spectrum-icons-rollup.js": "./src/spectrum-icons-rollup.js",
+    "./spectrum-icons-vite.js": "./src/spectrum-icons-vite.js"
+  },
   "scripts": {
-    "start": "sirv public",
-    "build": "rollup --config",
-    "dev": "rollup --config --watch",
-    "prepublishOnly": "npm run build",
-    "svench:rollup": "cross-env SVENCH=1 rollup -cw",
-    "svench:nollup": "cross-env SVENCH=1 nollup",
-    "svench:nollup:dev:help": "echo 'this script is used to dev Svench itself'",
-    "svench:nollup:dev": "yarn svench:nollup  --watch ../svench/src --watch ../svench/themes --watch ../svench/*.js",
-    "svench": "npm run --silent svench:nollup",
-    "build:svench": "cross-env SVENCH=1 rollup -c",
-    "test": "echo TODO"
+    "build": "rollup -c"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^16.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "cross-env": "^7.0.2",
     "nollup": "^0.14.1",
-    "rollup": "^2.34.0",
-    "rollup-plugin-copy": "^3.3.0",
-    "rollup-plugin-delete": "^1.2.0",
-    "rollup-plugin-hot": "^0.1.1",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-postcss-hot": "^0.0.5",
-    "rollup-plugin-svelte-hot": "^0.11.0",
-    "semantic-release": "^17.0.8",
-    "svelte": "^3.29.0",
-    "svench": "^0.0.10-7"
+    "postcss": "^8.2.9",
+    "rollup": "^2.45.2",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-svelte": "^7.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "svelte": "^3.38.2"
   },
   "keywords": [
     "svelte"
@@ -43,11 +37,53 @@
     "dist"
   ],
   "dependencies": {
-    "markdown-it": "^12.0.2",
-    "quill": "^1.3.7",
-    "sirv-cli": "^0.4.6",
-    "svelte-flatpickr": "^2.4.0",
-    "svelte-portal": "^1.0.0",
-    "turndown": "^7.0.0"
-  }
+    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^2.0.0",
+    "@spectrum-css/actionbutton": "^1.0.1",
+    "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/avatar": "^3.0.2",
+    "@spectrum-css/button": "^3.0.1",
+    "@spectrum-css/buttongroup": "^3.0.2",
+    "@spectrum-css/checkbox": "^3.0.2",
+    "@spectrum-css/dialog": "^3.0.1",
+    "@spectrum-css/divider": "^1.0.3",
+    "@spectrum-css/dropzone": "^3.0.2",
+    "@spectrum-css/fieldgroup": "^3.0.2",
+    "@spectrum-css/fieldlabel": "^3.0.1",
+    "@spectrum-css/icon": "^3.0.1",
+    "@spectrum-css/illustratedmessage": "^3.0.2",
+    "@spectrum-css/inlinealert": "^2.0.1",
+    "@spectrum-css/inputgroup": "^3.0.2",
+    "@spectrum-css/label": "^2.0.10",
+    "@spectrum-css/link": "^3.1.1",
+    "@spectrum-css/menu": "^3.0.1",
+    "@spectrum-css/modal": "^3.0.1",
+    "@spectrum-css/pagination": "^3.0.3",
+    "@spectrum-css/picker": "^1.0.1",
+    "@spectrum-css/popover": "^3.0.1",
+    "@spectrum-css/progressbar": "^1.0.2",
+    "@spectrum-css/progresscircle": "^1.0.2",
+    "@spectrum-css/radio": "^3.0.2",
+    "@spectrum-css/search": "^3.0.2",
+    "@spectrum-css/sidenav": "^3.0.2",
+    "@spectrum-css/slider": "3.0.1",
+    "@spectrum-css/statuslight": "^3.0.2",
+    "@spectrum-css/stepper": "^3.0.3",
+    "@spectrum-css/switch": "^1.0.2",
+    "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/tabs": "^3.2.12",
+    "@spectrum-css/tags": "^3.0.2",
+    "@spectrum-css/textfield": "^3.0.1",
+    "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/tooltip": "^3.0.3",
+    "@spectrum-css/treeview": "^3.0.2",
+    "@spectrum-css/typography": "^3.0.1",
+    "@spectrum-css/underlay": "^2.0.9",
+    "@spectrum-css/vars": "^3.0.1",
+    "dayjs": "^1.10.4",
+    "easymde": "^2.16.1",
+    "svelte-flatpickr": "^3.2.3",
+    "svelte-portal": "^1.0.0"
+  },
+  "gitHead": "d332e035d8e3416e82db5f1153a15fcf69b05f94"
 }

package/src/ActionButton/ActionButton.svelte

@@ -0,0 +1,102 @@
+<script>
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  const dispatch = createEventDispatcher()
+
+  export let quiet = false
+  export let emphasized = false
+  export let selected = false
+  export let longPressable = false
+  export let disabled = false
+  export let icon = ""
+  export let dataCy = null
+  export let size = "M"
+  export let active = false
+  export let fullWidth = false
+  export let noPadding = false
+
+  function longPress(element) {
+    if (!longPressable) return
+    let timer
+
+    const listener = () => {
+      timer = setTimeout(() => {
+        dispatch("longpress")
+      }, 700)
+    }
+
+    element.addEventListener("pointerdown", listener)
+
+    return {
+      destroy() {
+        clearTimeout(timer)
+        element.removeEventListener("pointerdown", longPress)
+      },
+    }
+  }
+</script>
+
+<button
+  data-cy={dataCy}
+  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}
+</button>
+
+<style>
+  .fullWidth {
+    width: 100%;
+  }
+  .active,
+  .active svg {
+    color: var(--spectrum-global-color-blue-600);
+  }
+  :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
+    margin-left: 0;
+    transition: color ease-out 130ms;
+  }
+  .is-selected:not(.spectrum-ActionButton--emphasized) {
+    background: var(--spectrum-global-color-gray-300);
+  }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
+  .spectrum-ActionButton--quiet {
+    padding: 0 8px;
+  }
+  .is-selected:not(.emphasized) .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

package/src/ActionGroup/ActionGroup.svelte

@@ -0,0 +1,26 @@
+<script>
+  import "@spectrum-css/actiongroup/dist/index-vars.css"
+  export let vertical = false
+  export let justified = false
+  export let quiet = false
+  export let compact = false
+
+  // Attaches a spectrum-ActionGroup-item class to buttons inside the div
+  function group(element) {
+    const buttons = Array.from(element.getElementsByTagName("button"))
+    buttons.forEach(button => {
+      button.classList.add("spectrum-ActionGroup-item")
+    })
+  }
+</script>
+
+<div
+  use:group
+  class:spectrum-ActionGroup--vertical={vertical}
+  class:spectrum-ActionGroup--justified={justified}
+  class:spectrum-ActionGroup--quiet={quiet}
+  class:spectrum-ActionGroup--compact={compact}
+  class="spectrum-ActionGroup"
+>
+  <slot />
+</div>

package/src/ActionMenu/ActionMenu.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { setContext } from "svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import Menu from "../Menu/Menu.svelte"
+
+  export let disabled = false
+  export let align = "left"
+  export let portalTarget
+  export let dataCy
+
+  let anchor
+  let dropdown
+
+  // This is needed because display: contents is considered "invisible".
+  // It should only ever be an action button, so should be fine.
+  function getAnchor(node) {
+    anchor = node.firstChild
+  }
+
+  export const hide = () => {
+    dropdown.hide()
+  }
+  export const show = () => {
+    dropdown.show()
+  }
+
+  const openMenu = event => {
+    if (!disabled) {
+      event.stopPropagation()
+      show()
+    }
+  }
+
+  setContext("actionMenu", { show, hide })
+</script>
+
+<div use:getAnchor on:click={openMenu}>
+  <slot name="control" />
+</div>
+<Popover bind:this={dropdown} {anchor} {align} {portalTarget} {dataCy}>
+  <Menu>
+    <slot />
+  </Menu>
+</Popover>

package/src/Actions/autoresize_textarea.js

@@ -1,14 +1,14 @@
 function resize({ target }) {
-    target.style.height = "1px";
-    target.style.height = (+target.scrollHeight) + "px";
+  target.style.height = "1px"
+  target.style.height = +target.scrollHeight + "px"
 }
 
 export default function text_area_resize(el) {
-    resize({ target: el });
-    el.style.overflow = 'hidden';
-    el.addEventListener('input', resize);
+  resize({ target: el })
+  el.style.overflow = "hidden"
+  el.addEventListener("input", resize)
 
-    return {
-        destroy: () => el.removeEventListener('input', resize)
-    }
-}
+  return {
+    destroy: () => el.removeEventListener("input", resize),
+  }
+}

package/src/Actions/click_outside.js

@@ -1,18 +1,18 @@
 export default function clickOutside(element, callbackFunction) {
   function onClick(event) {
     if (!element.contains(event.target)) {
-      callbackFunction();
+      callbackFunction()
     }
   }
 
-  document.body.addEventListener("click", onClick, true);
+  document.body.addEventListener("mousedown", onClick, true)
 
   return {
     update(newCallbackFunction) {
-      callbackFunction = newCallbackFunction;
+      callbackFunction = newCallbackFunction
     },
     destroy() {
-      document.body.removeEventListener("click", onClick, true);
+      document.body.removeEventListener("mousedown", onClick, true)
     },
-  };
+  }
 }

package/src/Actions/position_dropdown.js

@@ -1,7 +1,7 @@
-export default function positionDropdown(element, { anchor, align }) {
-  let positionSide = "top";
-  let maxHeight = 0;
-  let dimensions = getDimensions(anchor);
+export default function positionDropdown(element, { anchor, align, maxWidth }) {
+  let positionSide = "top"
+  let maxHeight = 0
+  let dimensions = getDimensions(anchor)
 
   function getDimensions() {
     const {
@@ -9,20 +9,20 @@ export default function positionDropdown(element, { anchor, align }) {
       top: spaceAbove,
       left,
       width,
-    } = anchor.getBoundingClientRect();
-    const spaceBelow = window.innerHeight - bottom;
-    const containerRect = element.getBoundingClientRect();
+    } = anchor.getBoundingClientRect()
+    const spaceBelow = window.innerHeight - bottom
+    const containerRect = element.getBoundingClientRect()
 
-    let y;
+    let y
 
     if (spaceAbove > spaceBelow) {
-      positionSide = "bottom";
-      maxHeight = spaceAbove - 20;
-      y = window.innerHeight - spaceAbove;
+      positionSide = "bottom"
+      maxHeight = spaceAbove - 20
+      y = window.innerHeight - spaceAbove + 5
     } else {
-      positionSide = "top";
-      y = bottom;
-      maxHeight = spaceBelow - 20;
+      positionSide = "top"
+      y = bottom + 5
+      maxHeight = spaceBelow - 20
     }
 
     return {
@@ -30,37 +30,46 @@ export default function positionDropdown(element, { anchor, align }) {
       left,
       width,
       containerWidth: containerRect.width,
-    };
+    }
   }
 
   function calcLeftPosition() {
-    return align === "right"
-      ? dimensions.left + dimensions.width - dimensions.containerWidth
-      : dimensions.left;
-  }
+    let left
 
-  element.style.position = "absolute";
-  element.style.zIndex = "9999"
-  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`;
-
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (let entry of entries) {
-      dimensions = getDimensions();
-      element.style[positionSide] = `${dimensions[positionSide]}px`;
-      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`;
+    if (align == "right") {
+      left = dimensions.left + dimensions.width - dimensions.containerWidth
+    } else if (align == "right-side") {
+      left = dimensions.left + dimensions.width
+    } else {
+      left = dimensions.left
     }
-  });
 
-  resizeObserver.observe(anchor);
-  resizeObserver.observe(element);
+    return left
+  }
 
+  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`
+
+  const resizeObserver = new ResizeObserver(entries => {
+    entries.forEach(() => {
+      dimensions = getDimensions()
+      element.style[positionSide] = `${dimensions[positionSide]}px`
+      element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
+    })
+  })
+  resizeObserver.observe(anchor)
+  resizeObserver.observe(element)
   return {
     destroy() {
-      resizeObserver.disconnect();
+      resizeObserver.disconnect()
     },
-  };
+  }
 }

package/src/Avatar/Avatar.svelte

@@ -0,0 +1,62 @@
+<script>
+  import "@spectrum-css/avatar/dist/index-vars.css"
+  let sizes = new Map([
+    ["XXS", "--spectrum-alias-avatar-size-50"],
+    ["XS", "--spectrum-alias-avatar-size-75"],
+    ["S", "--spectrum-alias-avatar-size-200"],
+    ["M", "--spectrum-alias-avatar-size-400"],
+    ["L", "--spectrum-alias-avatar-size-500"],
+    ["XL", "--spectrum-alias-avatar-size-600"],
+    ["XXL", "--spectrum-alias-avatar-size-700"],
+  ])
+  export let size = "M"
+  export let url = ""
+  export let disabled = false
+  export let initials = "JD"
+
+  const DefaultColor = "#3aab87"
+
+  $: color = getColor(initials)
+
+  const getColor = initials => {
+    if (!initials?.length) {
+      return DefaultColor
+    }
+    const code = initials[0].toLowerCase().charCodeAt(0)
+    const hue = ((code % 26) / 26) * 360
+    return `hsl(${hue}, 50%, 50%)`
+  }
+</script>
+
+{#if url}
+  <img
+    class:is-disabled={disabled}
+    class="spectrum-Avatar"
+    src={url}
+    alt="Avatar"
+    style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
+  />
+{:else}
+  <div
+    class="spectrum-Avatar"
+    class:is-disabled={disabled}
+    style="width: var({sizes.get(size)}); height: var({sizes.get(
+      size
+    )}); font-size: calc(var({sizes.get(size)}) / 2); background: {color};"
+  >
+    {initials || ""}
+  </div>
+{/if}
+
+<style>
+  div {
+    color: white;
+    display: grid;
+    place-items: center;
+    font-weight: 600;
+    border-radius: 50%;
+    overflow: hidden;
+    user-select: none;
+    text-transform: uppercase;
+  }
+</style>

package/src/Badge/Badge.svelte

@@ -0,0 +1,29 @@
+<script>
+  import "@spectrum-css/label/dist/index-vars.css"
+
+  export let size = "M"
+  export let grey = false
+  export let red = false
+  export let orange = false
+  export let yellow = false
+  export let seafoam = false
+  export let green = false
+  export let active = false
+  export let inactive = false
+</script>
+
+<span
+  class="spectrum-Label"
+  class:spectrum-Label--small={size === "S"}
+  class:spectrum-Label--large={size === "L"}
+  class:spectrum-Label--grey={grey}
+  class:spectrum-Label--red={red}
+  class:spectrum-Label--green={green}
+  class:spectrum-Label--orange={orange}
+  class:spectrum-Label--yellow={yellow}
+  class:spectrum-Label--seafoam={seafoam}
+  class:spectrum-Label--active={active}
+  class:spectrum-Label--inactive={inactive}
+>
+  <slot />
+</span>

package/src/Banner/Banner.svelte

@@ -0,0 +1,72 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+
+  let dispatch = createEventDispatcher()
+
+  export let type = "info"
+  export let icon = "Info"
+  export let size = "S"
+  export let extraButtonText
+  export let extraButtonAction
+  export let showCloseButton = true
+
+  let show = true
+
+  function clear() {
+    show = false
+    dispatch("change")
+  }
+</script>
+
+{#if show}
+  <div class="spectrum-Toast spectrum-Toast--{type}">
+    <svg
+      class="spectrum-Icon spectrum-Icon--size{size} spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+    <div class="spectrum-Toast-body">
+      <div class="spectrum-Toast-content">
+        <slot />
+      </div>
+      {#if extraButtonText && extraButtonAction}
+        <button
+          class="spectrum-Button spectrum-Button--sizeM spectrum-Button--overBackground spectrum-Button--quiet"
+          on:click={extraButtonAction}
+        >
+          <span class="spectrum-Button-label">{extraButtonText}</span>
+        </button>
+      {/if}
+    </div>
+    {#if showCloseButton}
+      <div class="spectrum-Toast-buttons">
+        <button
+          class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
+          on:click={clear}
+        >
+          <div class="spectrum-ClearButton-fill">
+            <svg
+              class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Cross100" />
+            </svg>
+          </div>
+        </button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+    width: 100%;
+  }
+  .spectrum-Button {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+  }
+</style>

package/src/Banner/BannerDisplay.svelte

@@ -0,0 +1,41 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { banner } from "../Stores/banner"
+  import Banner from "./Banner.svelte"
+  import { fly } from "svelte/transition"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+</script>
+
+<Portal target=".banner-container">
+  <div class="banner">
+    {#each $banner.messages as message}
+      <div transition:fly={{ y: -30 }}>
+        <Banner
+          type={message.type}
+          extraButtonText={message.extraButtonText}
+          extraButtonAction={message.extraButtonAction}
+          on:change={() => {
+            if (message.onChange) {
+              message.onChange()
+            }
+          }}
+          showCloseButton={typeof message.showCloseButton === "boolean"
+            ? message.showCloseButton
+            : true}
+        >
+          <TooltipWrapper tooltip={message.tooltip} disabled={false}>
+            {message.message}
+          </TooltipWrapper>
+        </Banner>
+      </div>
+    {/each}
+  </div>
+</Portal>
+
+<style>
+  .banner {
+    pointer-events: none;
+    width: 100%;
+  }
+</style>