@budibase/bbui 1.58.13 → 2.0.0

package/src/Modal/QuizModal.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
-  import ModalContent from "./ModalContent.svelte";
-  import Input from "../Form/Input.svelte";
+  import ModalContent from "./ModalContent.svelte"
+  import Input from "../Form/Input.svelte"
 
   let modal
   let answer
@@ -26,20 +25,6 @@
   }
 </script>
 
-<style>
-  p {
-    margin: 0;
-    font-family: var(--font-sans);
-    font-size: var(--font-size-s);
-  }
-  p.error {
-    color: #e26d69;
-    background-color: #ffe6e6;
-    padding: 8px;
-    border-radius: 4px;
-  }
-</style>
-
 <ModalContent
   title="Quick Maths"
   bind:this={modal}
@@ -53,3 +38,17 @@
   <p>What is 4 + 4?</p>
   <Input label="Answer" bind:value={answer} />
 </ModalContent>
+
+<style>
+  p {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-size-s);
+  }
+  p.error {
+    color: #e26d69;
+    background-color: #ffe6e6;
+    padding: 8px;
+    border-radius: 4px;
+  }
+</style>

package/src/Notification/Notification.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { ActionButton } from "../"
+
+  import { createEventDispatcher } from "svelte"
+
+  export let type = "info"
+  export let icon = "Info"
+  export let message = ""
+  export let dismissable = false
+  export let actionMessage = null
+  export let action = null
+  export let wide = false
+
+  const dispatch = createEventDispatcher()
+</script>
+
+<div class="spectrum-Toast spectrum-Toast--{type}" class:wide>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Toast-typeIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <div class="spectrum-Toast-body" class:actionBody={!!action}>
+    <div class="spectrum-Toast-content">{message || ""}</div>
+    {#if action}
+      <ActionButton quiet emphasized on:click={action}>
+        <div style="color: white; font-weight: 600;">{actionMessage}</div>
+      </ActionButton>
+    {/if}
+  </div>
+  {#if dismissable}
+    <div class="spectrum-Toast-buttons">
+      <button
+        class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--sizeM"
+        on:click={() => dispatch("dismiss")}
+      >
+        <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>
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+  }
+
+  .wide {
+    width: 100%;
+  }
+
+  .actionBody {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+    align-items: center;
+  }
+</style>

package/src/Notification/NotificationDisplay.svelte

@@ -0,0 +1,43 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { notifications } from "../Stores/notifications"
+  import Notification from "./Notification.svelte"
+  import { fly } from "svelte/transition"
+</script>
+
+<Portal target=".modal-container">
+  <div class="notifications">
+    {#each $notifications as { type, icon, message, id, dismissable, action, wide } (id)}
+      <div transition:fly={{ y: 30 }}>
+        <Notification
+          {type}
+          {icon}
+          {message}
+          {dismissable}
+          {action}
+          {wide}
+          on:dismiss={() => notifications.dismiss(id)}
+        />
+      </div>
+    {/each}
+  </div>
+</Portal>
+
+<style>
+  .notifications {
+    position: fixed;
+    bottom: 40px;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+    padding: 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    pointer-events: none;
+    gap: 10px;
+  }
+</style>

package/src/Pagination/Pagination.svelte

@@ -0,0 +1,57 @@
+<script>
+  import "@spectrum-css/pagination/dist/index-vars.css"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let page
+  export let goToPrevPage
+  export let goToNextPage
+  export let hasPrevPage = true
+  export let hasNextPage = true
+</script>
+
+<nav class="spectrum-Pagination spectrum-Pagination--explicit">
+  <div
+    href="#"
+    class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton"
+    on:click={hasPrevPage ? goToPrevPage : null}
+    class:is-disabled={!hasPrevPage}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronLeft100"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="ChevronLeft"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </div>
+  <span class="spectrum-Body--secondary spectrum-Pagination-counter">
+    Page {page}
+  </span>
+  <div
+    href="#"
+    class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton"
+    on:click={hasNextPage ? goToNextPage : null}
+    class:is-disabled={!hasNextPage}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronRight100"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="ChevronLeft"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </div>
+</nav>
+
+<style>
+  .spectrum-Pagination-counter {
+    margin-left: 0;
+    user-select: none;
+  }
+  .is-disabled:hover {
+    cursor: initial;
+  }
+</style>

package/src/Popover/Popover.svelte

@@ -1,69 +1,79 @@
 <script>
-  import Portal from "svelte-portal";
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import Portal from "svelte-portal"
   import { createEventDispatcher } from "svelte"
-  import positionDropdown from '../Actions/position_dropdown'
-  import clickOutside from '../Actions/click_outside'
+  import positionDropdown from "../Actions/position_dropdown"
+  import clickOutside from "../Actions/click_outside"
+
   const dispatch = createEventDispatcher()
 
   export let anchor
   export let align = "right"
-  let open = null;
+  export let portalTarget
+  export let dataCy
+  export let maxWidth
+
+  export let direction = "bottom"
+  export let showTip = false
+
+  let tipSvg =
+    '<svg xmlns="http://www.w3.org/svg/2000" width="23" height="12" class="spectrum-Popover-tip" > <path class="spectrum-Popover-tip-triangle" d="M 0.7071067811865476 0 L 11.414213562373096 10.707106781186548 L 22.121320343559645 0" /> </svg>'
+
+  $: tooltipClasses = showTip
+    ? `spectrum-Popover--withTip spectrum-Popover--${direction}`
+    : ""
 
   export const show = () => {
+    dispatch("open")
     open = true
-    dispatch("show")
   }
 
   export const hide = () => {
+    dispatch("close")
     open = false
-    dispatch("hide")
   }
 
+  let open = null
+
   function handleEscape(e) {
     if (open && e.key === "Escape") {
       hide()
     }
   }
-
 </script>
 
 {#if open}
-  <Portal>
+  <Portal target={portalTarget}>
     <div
       tabindex="0"
-      class:open
-      use:positionDropdown={{anchor, align}}
+      use:positionDropdown={{ anchor, align, maxWidth }}
       use:clickOutside={hide}
       on:keydown={handleEscape}
-      class="menu-container">
-      <slot/>
+      class={"spectrum-Popover is-open " + (tooltipClasses || "")}
+      role="presentation"
+      data-cy={dataCy}
+    >
+      {#if showTip}
+        {@html tipSvg}
+      {/if}
+
+      <slot />
     </div>
   </Portal>
 {/if}
 
 <style>
-  .menu-container {
-    position: fixed;
+  .spectrum-Popover {
+    min-width: var(--spectrum-global-dimension-size-2000);
+    border-color: var(--spectrum-global-color-gray-300);
+  }
+  .spectrum-Popover.is-open.spectrum-Popover--withTip {
     margin-top: var(--spacing-xs);
-    padding: var(--spacing-xl);
-    outline: none;
-    box-sizing: border-box;
-    opacity: 0;
-    min-width: 400px;
-    z-index: 2;
-    color: var(--ink);
-    height: fit-content !important;
-    border: var(--border-dark);
-    border-radius: var(--border-radius-m);
-    transform: scale(0);
-    transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);
-    overflow-y: auto;
-    background-color: var(--background);
-    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
+    margin-left: var(--spacing-xl);
   }
-
-  .open {
-    transform: scale(1);
-    opacity: 1;
+  :global(.spectrum-Popover--bottom .spectrum-Popover-tip),
+  :global(.spectrum-Popover--top .spectrum-Popover-tip) {
+    left: 90%;
+    margin-left: calc(var(--spectrum-global-dimension-size-150) * -1);
   }
 </style>

package/src/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,67 @@
+<script>
+  import "@spectrum-css/progressbar/dist/index-vars.css"
+  import { tweened } from "svelte/motion"
+  import { cubicOut } from "svelte/easing"
+
+  export let value = false
+  export let easing = cubicOut
+  export let duration = 1000
+  export let width = false
+  export let sideLabel = false
+  export let hidePercentage = true
+  export let color // red, green, default = blue
+
+  export let size = "M"
+
+  const progress = tweened(0, {
+    duration: duration,
+    easing: easing,
+  })
+
+  $: if (value || value === 0) $progress = value
+</script>
+
+<div
+  class:spectrum-ProgressBar--indeterminate={!value && value !== 0}
+  class:spectrum-ProgressBar--sideLabel={sideLabel}
+  class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
+  value={$progress}
+  role="progressbar"
+  aria-valuenow={$progress}
+  aria-valuemin="0"
+  aria-valuemax="100"
+  style={width ? `width: ${width};` : ""}
+>
+  {#if $$slots}
+    <div
+      class="spectrum-FieldLabel spectrum-ProgressBar-label spectrum-FieldLabel--size{size}"
+    >
+      <slot />
+    </div>
+  {/if}
+  {#if !hidePercentage && (value || value === 0)}
+    <div
+      class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
+    >
+      {Math.round($progress)}%
+    </div>
+  {/if}
+  <div class="spectrum-ProgressBar-track">
+    <div
+      class="spectrum-ProgressBar-fill"
+      class:color-green={color === "green"}
+      class:color-red={color === "red"}
+      style={value || value === 0 ? `width: ${$progress}%` : ""}
+    />
+  </div>
+  <div class="spectrum-ProgressBar-label" hidden="" />
+</div>
+
+<style>
+  .color-green {
+    background: #009562;
+  }
+  .color-red {
+    background: #dd2019;
+  }
+</style>

package/src/ProgressCircle/ProgressCircle.svelte

@@ -0,0 +1,62 @@
+<script>
+  import "@spectrum-css/progresscircle/dist/index-vars.css"
+
+  export let size = "M"
+  function convertSize(size) {
+    switch (size) {
+      case "S":
+        return "small"
+      case "L":
+        return "large"
+      default:
+        return
+    }
+  }
+
+  export let value = null
+  export let minValue = 0
+  export let maxValue = 100
+
+  let subMask1Style
+  let subMask2Style
+  $: calculateSubMasks(value)
+
+  function calculateSubMasks(value) {
+    if (value) {
+      let percentage = ((value - minValue) / (maxValue - minValue)) * 100
+      let angle
+      if (percentage > 0 && percentage <= 50) {
+        angle = -180 + (percentage / 50) * 180
+        subMask1Style = `transform: rotate(${angle}deg);`
+        subMask2Style = "transform: rotate(-180deg);"
+      } else if (percentage > 50) {
+        angle = -180 + ((percentage - 50) / 50) * 180
+        subMask1Style = "transform: rotate(0deg);"
+        subMask2Style = `transform: rotate(${angle}deg);`
+      }
+    }
+  }
+
+  export let overBackground
+</script>
+
+<div
+  on:click
+  class:spectrum-ProgressCircle--indeterminate={value == null}
+  class:spectrum-ProgressCircle--overBackground={overBackground}
+  class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
+>
+  <div class="spectrum-ProgressCircle-track" />
+  <div class="spectrum-ProgressCircle-fills">
+    <div class="spectrum-ProgressCircle-fillMask1">
+      <div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
+        <div class="spectrum-ProgressCircle-fill" />
+      </div>
+    </div>
+    <div class="spectrum-ProgressCircle-fillMask2">
+      <div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
+        <div class="spectrum-ProgressCircle-fill" />
+      </div>
+    </div>
+  </div>
+</div>

package/src/SideNavigation/Item.svelte

@@ -0,0 +1,61 @@
+<script>
+  import { getContext } from "svelte"
+  const multilevel = getContext("sidenav-type")
+  import Badge from "../Badge/Badge.svelte"
+  export let href = ""
+  export let external = false
+  export let heading = ""
+  export let icon = ""
+  export let selected = false
+  export let disabled = false
+  export let dataCy
+  export let badge = ""
+</script>
+
+<li
+  class="spectrum-SideNav-item"
+  class:is-selected={selected}
+  class:is-disabled={disabled}
+  on:click
+  data-cy={dataCy}
+>
+  {#if heading}
+    <h2 class="spectrum-SideNav-heading" id="nav-heading-{heading}">
+      {heading}
+    </h2>
+  {/if}
+  <a
+    target={external ? "_blank" : ""}
+    {href}
+    class="spectrum-SideNav-itemLink"
+    aria-current="page"
+  >
+    {#if icon}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-SideNav-itemIcon"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <slot />
+    {#if badge}
+      <div class="badge">
+        <Badge active size="S">{badge}</Badge>
+      </div>
+    {/if}
+  </a>
+
+  {#if multilevel && $$slots.subnav}
+    <ul class="spectrum-SideNav">
+      <slot name="subnav" />
+    </ul>
+  {/if}
+</li>
+
+<style>
+  .badge {
+    margin-left: 10px;
+  }
+</style>

package/src/SideNavigation/Navigation.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { setContext } from "svelte"
+  import "@spectrum-css/sidenav/dist/index-vars.css"
+  export let multilevel = false
+  setContext("sidenav-type", multilevel)
+</script>
+
+<nav>
+  <ul class="spectrum-SideNav" class:spectrum-SideNav--multiLevel={multilevel}>
+    <slot />
+  </ul>
+</nav>

package/src/StatusLight/StatusLight.svelte

@@ -0,0 +1,80 @@
+<script>
+  import "@spectrum-css/statuslight"
+
+  export let size = "M"
+  export let celery = false
+  export let yellow = false
+  export let fuchsia = false
+  export let indigo = false
+  export let seafoam = false
+  export let chartreuse = false
+  export let magenta = false
+  export let purple = false
+  export let neutral = false
+  export let info = false
+  export let positive = false
+  export let notice = false
+  export let negative = false
+  export let disabled = false
+  export let active = false
+  export let color = null
+  export let square = false
+  export let hoverable = false
+</script>
+
+<div
+  on:click
+  class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  class:custom={!!color}
+  class:square
+  class:hoverable
+  style={`--color: ${color};`}
+  class:spectrum-StatusLight--celery={celery}
+  class:spectrum-StatusLight--yellow={yellow}
+  class:spectrum-StatusLight--fuchsia={fuchsia}
+  class:spectrum-StatusLight--indigo={indigo}
+  class:spectrum-StatusLight--seafoam={seafoam}
+  class:spectrum-StatusLight--chartreuse={chartreuse}
+  class:spectrum-StatusLight--magenta={magenta}
+  class:spectrum-StatusLight--purple={purple}
+  class:spectrum-StatusLight--neutral={neutral}
+  class:spectrum-StatusLight--info={info}
+  class:spectrum-StatusLight--positive={positive}
+  class:spectrum-StatusLight--notice={notice}
+  class:spectrum-StatusLight--negative={negative}
+  class:spectrum-StatusLight--disabled={disabled}
+  class:spectrum-StatusLight--active={active}
+  class:withText={!!$$slots.default}
+>
+  <slot />
+</div>
+
+<style>
+  .spectrum-StatusLight {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    --spectrum-statuslight-info-text-gap: 4px;
+    min-height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    transition: color ease-out 130ms;
+  }
+  .spectrum-StatusLight.withText::before {
+    margin-right: 10px;
+  }
+  .custom::before {
+    background: var(--color) !important;
+  }
+  .square::before {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    margin: 0;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

package/src/Stores/Notifications.svench.svx

@@ -19,7 +19,7 @@ This custom can be used to display toast messages. It has 5 different methods: `
 
 
 <View name="danger">
-  <button on:click={() => notifications.danger('This is a danger!')}>Danger</button>
+  <button on:click={() => notifications.error('This is a danger!')}>Danger</button>
 </View>
 <View name="warning">
   <button on:click={() => notifications.warning('This is a warning!')}>Warning</button>

package/src/Stores/banner.js

@@ -0,0 +1,65 @@
+import { writable } from "svelte/store"
+
+export const BANNER_TYPES = {
+  INFO: "info",
+  NEGATIVE: "negative",
+}
+
+export function createBannerStore() {
+  const DEFAULT_CONFIG = {
+    messages: [],
+  }
+
+  const banner = writable(DEFAULT_CONFIG)
+
+  const show = async (
+    // eslint-disable-next-line
+    config = { message, type, extraButtonText, extraButtonAction, onChange }
+  ) => {
+    banner.update(store => {
+      return {
+        ...store,
+        ...config,
+      }
+    })
+  }
+
+  const showStatus = async () => {
+    const config = {
+      message: "Some systems are experiencing issues",
+      type: BANNER_TYPES.NEGATIVE,
+      extraButtonText: "View Status",
+      extraButtonAction: () => window.open("https://status.budibase.com/"),
+    }
+
+    await queue([config])
+  }
+
+  const queue = async entries => {
+    const priority = {
+      [BANNER_TYPES.NEGATIVE]: 0,
+      [BANNER_TYPES.INFO]: 1,
+    }
+    banner.update(store => {
+      const sorted = [...store.messages, ...entries].sort((a, b) => {
+        if (priority[a.type] == priority[b.type]) {
+          return 0
+        }
+        return priority[a.type] < priority[b.type] ? -1 : 1
+      })
+      return {
+        ...store,
+        messages: sorted,
+      }
+    })
+  }
+
+  return {
+    subscribe: banner.subscribe,
+    showStatus,
+    show,
+    queue,
+  }
+}
+
+export const banner = createBannerStore()