@budibase/bbui 1.3.0 → 1.3.3

package/package.json

@@ -1,35 +1,33 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.3.0",
+  "version": "1.3.3",
+  "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": "cross-env SVENCH=1 rollup -cw",
-    "svench:nollup": "cross-env SVENCH=1 nollup --hot --port 42421 --virtual-write public --watch src --watch '.svench/*' --watch node_modules/svench/tmp --config",
-    "svench:nollup:dev": "yarn svench:nollup --watch ../svench/src --watch ../svench/*.js",
-    "build:svench": "cross-env SVENCH=1 rollup -c",
-    "test": "echo TODO"
+    "build": "rollup -c"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "11.0.2",
-    "@rollup/plugin-node-resolve": "^6.0.0",
+    "@rollup/plugin-commonjs": "^16.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
     "cross-env": "^7.0.2",
-    "nollup": "rixo/nollup#next",
-    "rehype-add-classes": "^1.0.0",
-    "rollup": "^2.10.9",
-    "rollup-plugin-delete": "^1.2.0",
-    "rollup-plugin-hot": "^0.0.25",
-    "rollup-plugin-postcss-hot": "^0.0.5",
-    "rollup-plugin-svelte-hot": "^0.8.0",
-    "semantic-release": "^17.0.8",
-    "svelte": "^3.22.0",
-    "svench": "^0.0.9-10"
+    "nollup": "^0.14.1",
+    "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"
@@ -39,6 +37,53 @@
     "dist"
   ],
   "dependencies": {
-    "sirv-cli": "^0.4.6"
-  }
+    "@adobe/spectrum-css-workflow-icons": "^1.2.1",
+    "@budibase/string-templates": "^1.3.3",
+    "@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": "6f8f76a76420f70ed3f365909daa6b3427eac46f"
 }

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/ClickOutside.svench.svx

@@ -0,0 +1,30 @@
+<script>
+  import { View } from "svench";
+  import Multiselect from "../Form/Multiselect.svelte";
+  import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icons/Icon.svelte";
+
+   const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
+
+  let anchorLeft;
+  let dropdownLeft;
+</script>
+
+### Click Outside Action
+
+This action can be used to listen for when you want to call a function whenever a user clicks outside of the element it is applied toString.
+
+
+```html
+<script>
+  import { clickOutside } from '@budibase/bbui'
+  const someFunction = () => {
+    // Some logic to close a dropdown or stop the user from doing something without saving?
+  }
+</script>
+
+<button use:clickOutside={someFunction} class="multiselect" bind:this={anchor}>
+  Clicking this opens the
+</button>
+```

package/src/Actions/PositionDropdown.svench.svx

@@ -0,0 +1,81 @@
+<script>
+  import { View } from "svench";
+  import Multiselect from "../Form/Multiselect.svelte";
+  import DropdownMenu from "../DropdownMenu/DropdownMenu.svelte";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icons/Icon.svelte";
+
+   const options = ["Red", "Blue", "Yellow", "Green", "Pink", "Very long color name to show text wrapping"];
+
+  let anchorLeft;
+  let dropdownLeft;
+</script>
+
+### Position Dropdown Action
+
+This action positions an element close to it's anchor, either above or below it, depending on the amount of space that exists. There's also an option to align the dropdown to the right instead of the left of the anchor. An example of how to use it follows:
+
+```html
+<script>
+  let visible = false;
+  let anchor;
+  let align = 'right';
+</script>
+
+<button on:click={() => visible = !visible} class="multiselect" bind:this={anchor}>
+  Clicking this opens the
+</button>
+
+{#if visible}
+  <Portal>
+    <div use:positionDropdown={{anchor, align}}>
+        Some content here.
+    </div>
+  </Portal>
+{/if}
+```
+
+Here are some components that currently use this action:
+
+<View name="Multiselect Example">
+  <Multiselect name="Test" label="Colours" placeholder="Choose some colours">
+    {#each options as option}
+      <option value={option}>{option}</option>
+    {/each}
+  </Multiselect>
+</View>
+
+<View name="Dropdown on close event example">
+  <div bind:this={anchorLeft}>
+    <Button primary on:click={dropdownLeft.show}>
+      Field Name
+      <Icon name="arrowdown" />
+    </Button>
+  </div>
+  <DropdownMenu
+    on:close={() => alert('Closed!')}
+    bind:this={dropdownLeft}
+    width="175px"
+    borderColor="#d1d1d1ff"
+    anchor={anchorLeft}
+    align="left">
+    <ul>
+      <li>
+        <Icon name="edit" />
+        Edit
+      </li>
+      <li>
+        <Icon name="delete" />
+        Delete
+      </li>
+      <li>
+        <Icon name="sortascending" />
+        Sort A - Z
+      </li>
+      <li>
+        <Icon name="sortdescending" />
+        Sort Z - A
+      </li>
+    </ul>
+  </DropdownMenu>
+</View>

package/src/Actions/autoresize_textarea.js

@@ -0,0 +1,14 @@
+function resize({ target }) {
+  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)
+
+  return {
+    destroy: () => el.removeEventListener("input", resize),
+  }
+}

package/src/Actions/click_outside.js

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

package/src/Actions/position_dropdown.js

@@ -0,0 +1,66 @@
+export default function positionDropdown(element, { anchor, align }) {
+  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()
+
+    let y
+
+    if (spaceAbove > spaceBelow) {
+      positionSide = "bottom"
+      maxHeight = spaceAbove - 20
+      y = window.innerHeight - spaceAbove + 5
+    } else {
+      positionSide = "top"
+      y = bottom + 5
+      maxHeight = spaceBelow - 20
+    }
+
+    return {
+      [positionSide]: y,
+      left,
+      width,
+      containerWidth: containerRect.width,
+    }
+  }
+
+  function calcLeftPosition() {
+    return align === "right"
+      ? dimensions.left + dimensions.width - dimensions.containerWidth
+      : dimensions.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 => {
+    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()
+    },
+  }
+}

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>