@budibase/bbui 0.0.1

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@budibase/bbui",
+  "description": "A UI solution used in the different Budibase projects.",
+  "version": "0.0.1",
+  "license": "MPL-2.0",
+  "svelte": "src/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": {
+    "build": "rollup -c"
+  },
+  "devDependencies": {
+    "@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": "^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"
+  ],
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@adobe/spectrum-css-workflow-icons": "1.2.1",
+    "@budibase/shared-core": "0.0.1",
+    "@budibase/string-templates": "0.0.1",
+    "@spectrum-css/accordion": "3.0.24",
+    "@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.3.2",
+    "svelte-portal": "^1.0.0"
+  },
+  "resolutions": {
+    "loader-utils": "1.4.1"
+  },
+  "gitHead": "365911a77f6365818fd82fe8e2fe7e2b5d9fc1b3"
+}

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

@@ -0,0 +1,132 @@
+<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
+  export let emphasized = false
+  export let selected = false
+  export let longPressable = false
+  export let disabled = false
+  export let icon = ""
+  export let size = "M"
+  export let active = false
+  export let fullWidth = false
+  export let noPadding = false
+  export let tooltip = ""
+
+  let showTooltip = 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>
+
+<span
+  class="btn-wrap"
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:focus={() => (showTooltip = true)}
+>
+  <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--sizeS"
+        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 {
+    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):not(.spectrum-ActionButton--quiet) {
+    background: var(--spectrum-global-color-gray-300);
+    border-color: var(--spectrum-global-color-gray-500);
+  }
+  .noPadding {
+    padding: 0;
+    min-width: 0;
+  }
+  .spectrum-ActionButton--quiet {
+    padding: 0 8px;
+  }
+  .spectrum-ActionButton--quiet.is-selected {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .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/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,43 @@
+<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
+
+  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}>
+  <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,76 @@
+const ignoredClasses = [".flatpickr-calendar", ".spectrum-Popover"]
+let clickHandlers = []
+
+/**
+ * Handle a body click event
+ */
+const handleClick = event => {
+  // Ignore click if this is an ignored class
+  if (event.target.closest('[data-ignore-click-outside="true"]')) {
+    return
+  }
+  for (let className of ignoredClasses) {
+    if (event.target.closest(className)) {
+      return
+    }
+  }
+
+  // Process handlers
+  clickHandlers.forEach(handler => {
+    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)
+document.documentElement.addEventListener("contextmenu", handleClick, true)
+
+/**
+ * Adds or updates a click handler
+ */
+const updateHandler = (id, element, anchor, callback) => {
+  let existingHandler = clickHandlers.find(x => x.id === id)
+  if (!existingHandler) {
+    clickHandlers.push({ id, element, anchor, callback })
+  } else {
+    existingHandler.callback = callback
+  }
+}
+
+/**
+ * Removes a click handler
+ */
+const removeHandler = id => {
+  clickHandlers = clickHandlers.filter(x => x.id !== 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, opts) => {
+  const id = Math.random()
+  const update = newOpts => {
+    const callback = newOpts?.callback || newOpts
+    const anchor = newOpts?.anchor || element
+    updateHandler(id, element, anchor, callback)
+  }
+  update(opts)
+  return {
+    update,
+    destroy: () => removeHandler(id),
+  }
+}

package/src/Actions/position_dropdown.js

@@ -0,0 +1,116 @@
+export default function positionDropdown(element, opts) {
+  let resizeObserver
+  let latestOpts = opts
+
+  // We need a static reference to this function so that we can properly
+  // clean up the scroll listener.
+  const scrollUpdate = () => {
+    updatePosition(latestOpts)
+  }
+
+  // Updates the position of the dropdown
+  const updatePosition = opts => {
+    const {
+      anchor,
+      align,
+      maxHeight,
+      maxWidth,
+      useAnchorWidth,
+      offset = 5,
+    } = opts
+    if (!anchor) {
+      return
+    }
+
+    // Compute bounds
+    const anchorBounds = anchor.getBoundingClientRect()
+    const elementBounds = element.getBoundingClientRect()
+    let styles = {
+      maxHeight: null,
+      minWidth: null,
+      maxWidth,
+      left: null,
+      top: null,
+    }
+
+    // Determine vertical styles
+    if (align === "right-outside") {
+      styles.top = anchorBounds.top
+    } else if (window.innerHeight - anchorBounds.bottom < 100) {
+      styles.top = anchorBounds.top - elementBounds.height - offset
+      styles.maxHeight = maxHeight || 240
+    } else {
+      styles.top = anchorBounds.bottom + offset
+      styles.maxHeight =
+        maxHeight || window.innerHeight - anchorBounds.bottom - 20
+    }
+
+    // Determine horizontal styles
+    if (!maxWidth && useAnchorWidth) {
+      styles.maxWidth = anchorBounds.width
+    }
+    if (useAnchorWidth) {
+      styles.minWidth = anchorBounds.width
+    }
+    if (align === "right") {
+      styles.left = anchorBounds.left + anchorBounds.width - elementBounds.width
+    } else if (align === "right-outside") {
+      styles.left = anchorBounds.right + offset
+    } else {
+      styles.left = anchorBounds.left
+    }
+
+    // Apply styles
+    Object.entries(styles).forEach(([style, value]) => {
+      if (value) {
+        element.style[style] = `${value.toFixed(0)}px`
+      } else {
+        element.style[style] = null
+      }
+    })
+  }
+
+  // The actual svelte action callback which creates observers on the relevant
+  // DOM elements
+  const update = newOpts => {
+    latestOpts = newOpts
+
+    // Cleanup old state
+    if (resizeObserver) {
+      resizeObserver.disconnect()
+    }
+
+    // Do nothing if no anchor
+    const { anchor } = newOpts
+    if (!anchor) {
+      return
+    }
+
+    // Observe both anchor and element and resize the popover as appropriate
+    resizeObserver = new ResizeObserver(() => updatePosition(newOpts))
+    resizeObserver.observe(anchor)
+    resizeObserver.observe(element)
+    resizeObserver.observe(document.body)
+  }
+
+  // Apply initial styles which don't need to change
+  element.style.position = "absolute"
+  element.style.zIndex = "9999"
+
+  // Set up a scroll listener
+  document.addEventListener("scroll", scrollUpdate, true)
+
+  // Perform initial update
+  update(opts)
+
+  return {
+    update,
+    destroy() {
+      // Cleanup
+      if (resizeObserver) {
+        resizeObserver.disconnect()
+      }
+      document.removeEventListener("scroll", scrollUpdate, true)
+    },
+  }
+}