@budibase/bbui 1.0.0 → 1.0.1

package/src/Modal/QuizModal.svelte

@@ -0,0 +1,54 @@
+<script>
+  import ModalContent from "./ModalContent.svelte"
+  import Input from "../Form/Input.svelte"
+
+  let modal
+  let answer
+  let error
+
+  export function show() {
+    modal.show()
+  }
+  export function hide() {
+    modal.hide
+  }
+
+  function resetState() {
+    answer = undefined
+    error = undefined
+  }
+
+  async function answerQuiz() {
+    const correct = answer === "8"
+    error = !correct
+    return correct
+  }
+</script>
+
+<ModalContent
+  title="Quick Maths"
+  bind:this={modal}
+  confirmText="Submit"
+  onConfirm={answerQuiz}
+  on:show={resetState}
+>
+  {#if error}
+    <p class="error">Wrong answer! Try again.</p>
+  {/if}
+  <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,20 @@
+<script>
+  export let type = "info"
+  export let icon = "Info"
+  export let message = ""
+</script>
+
+<div class="spectrum-Toast spectrum-Toast--{type}">
+  {#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">
+    <div class="spectrum-Toast-content">{message || ""}</div>
+  </div>
+</div>

package/src/Notification/NotificationDisplay.svelte

@@ -0,0 +1,36 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { flip } from "svelte/animate"
+  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 } (id)}
+      <div animate:flip transition:fly={{ y: -30 }}>
+        <Notification {type} {icon} {message} />
+      </div>
+    {/each}
+  </div>
+</Portal>
+
+<style>
+  .notifications {
+    position: fixed;
+    top: 20px;
+    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

@@ -0,0 +1,52 @@
+<script>
+  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"
+
+  const dispatch = createEventDispatcher()
+
+  export let anchor
+  export let align = "right"
+  export let portalTarget
+
+  export const show = () => {
+    dispatch("open")
+    open = true
+  }
+
+  export const hide = () => {
+    dispatch("close")
+    open = false
+  }
+
+  let open = null
+
+  function handleEscape(e) {
+    if (open && e.key === "Escape") {
+      hide()
+    }
+  }
+</script>
+
+{#if open}
+  <Portal target={portalTarget}>
+    <div
+      tabindex="0"
+      use:positionDropdown={{ anchor, align }}
+      use:clickOutside={hide}
+      on:keydown={handleEscape}
+      class="spectrum-Popover is-open"
+      role="presentation"
+    >
+      <slot />
+    </div>
+  </Portal>
+{/if}
+
+<style>
+  .spectrum-Popover {
+    min-width: var(--spectrum-global-dimension-size-2000) !important;
+  }
+</style>

package/src/Popover/Popover.svench

@@ -0,0 +1,121 @@
+<script>
+  import { View } from "svench";
+  import Popover from "./Popover.svelte";
+  import Button from "../Button/Button.svelte";
+  import TextButton from "../Button/TextButton.svelte";
+  import Icon from "../Icons/Icon.svelte";
+  import Input from "../Form/Input.svelte";
+  import Select from "../Form/Select.svelte";
+
+  let anchorRight;
+  let anchorLeft;
+  let dropdownRight;
+  let dropdownLeft;
+
+  const options = ["Column 1", "Column 2", "Super cool column"];
+  const option1s = ["Is", "Is not", "Contains" , "Does not contain"];
+
+</script>
+
+<style>
+  .button-group {
+    margin-top: var(--spacing-l);
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--spacing-s);
+  }
+
+  h6 {
+    font-size: var(--font-size-m);
+    margin: 0 0 var(--spacing-l) 0;
+    font-weight: 600;
+    font-family: var(--font-sans);
+  }
+
+  .input-group-column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-s);
+  }
+
+  .input-group-row {
+    display: grid;
+    grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];
+    gap: var(--spacing-s);
+    margin-bottom: var(--spacing-l);
+    align-items: center;
+  }
+
+  p {
+    margin:0;
+    font-size: var(--font-size-xs);
+  }
+</style>
+
+<View name="Simple popover">
+  <div bind:this={anchorLeft}>
+    <Button text on:click={dropdownLeft.show}>
+      <Icon name="view" />
+      Add View
+    </Button>
+  </div>
+  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
+    <h6>Add New View</h6>
+    <Input thin placeholder="Enter your name" />
+    <div class="button-group">
+      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
+      <Button primary on:click={() => alert('Clicked!')}>Add New View</Button>
+    </div>
+  </Popover>
+</View>
+
+<View name="Stacked columns">
+  <div bind:this={anchorRight}>
+    <Button text on:click={dropdownRight.show}>
+      <Icon name="addrow" />
+      Add Row
+    </Button>
+  </div>
+  <Popover bind:this={dropdownRight} anchor={anchorRight}>
+    <h6>Add New Row</h6>
+    <div class="input-group-column">
+      <Input thin placeholder="Enter your string" />
+      <Input thin placeholder="Enter your string" />
+      <Input thin placeholder="Enter your string" />
+    </div>
+    <div class="button-group">
+      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
+      <Button primary on:click={() => alert('Clicked!')}>Add New Row</Button>
+    </div>
+  </Popover>
+</View>
+
+<View name="Multiple inputs in a row">
+  <div bind:this={anchorLeft}>
+    <Button text on:click={dropdownLeft.show}>
+      <Icon name="filter" />
+      Add Filter
+    </Button>
+  </div>
+  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
+    <h6>Add New Filter</h6>
+    <div class="input-group-row">
+      <p>Where</p>
+      <Select secondary thin name="Test">
+        {#each options as option}
+          <option value={option}>{option}</option>
+        {/each}
+      </Select>
+      <Select secondary thin name="Test">
+        {#each option1s as option1}
+          <option value={option1}>{option1}</option>
+        {/each}
+      </Select>
+      <Input thin placeholder="Enter your name" />
+      <Button text on:click={() => alert('Clicked!')}>
+         <Icon name="close" />
+      </Button>
+    </div>
+    <Button text on:click={() => alert('Clicked!')}>Add Filter</Button>
+  </Popover>
+</View>

package/src/ProgressBar/ProgressBar.svelte

@@ -0,0 +1,54 @@
+<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 size = "M"
+
+  const progress = tweened(0, {
+    duration: duration,
+    easing: easing,
+  })
+
+  $: if (value) $progress = value
+</script>
+
+<div
+  class:spectrum-ProgressBar--indeterminate={!value}
+  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}px;` : ""}
+>
+  {#if $$slots}
+    <div
+      class="spectrum-FieldLabel spectrum-ProgressBar-label spectrum-FieldLabel--size{size}"
+    >
+      <slot />
+    </div>
+  {/if}
+  {#if value}
+    <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"
+      style={value ? `width: ${$progress}%` : ""}
+    />
+  </div>
+  <div class="spectrum-ProgressBar-label" hidden="" />
+</div>

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,45 @@
+<script>
+  import { getContext } from "svelte"
+  const multilevel = getContext("sidenav-type")
+  export let href = ""
+  export let external = false
+  export let heading = ""
+  export let icon = ""
+  export let selected = false
+  export let disabled = false
+</script>
+
+<li
+  class="spectrum-SideNav-item"
+  class:is-selected={selected}
+  class:is-disabled={disabled}
+  on:click
+>
+  {#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 />
+  </a>
+  {#if multilevel && $$slots.subnav}
+    <ul class="spectrum-SideNav">
+      <slot name="subnav" />
+    </ul>
+  {/if}
+</li>

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,41 @@
+<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
+</script>
+
+<div
+  class="spectrum-StatusLight spectrum-StatusLight--size{size}"
+  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}
+>
+  <slot />
+</div>

package/src/Stores/Notifications.svench.svx

@@ -0,0 +1,78 @@
+<script>
+    import { flip } from 'svelte/animate';
+    import { fly } from "svelte/transition"
+    import { View } from "svench";
+    import { notifications } from "./notifications";
+
+    export let themes = {
+        danger: "#E26D69",
+        success: "#84C991",
+        warning: "#f0ad4e",
+        info: "#5bc0de",
+        default: "#aaaaaa",
+    }
+</script>
+
+## Notification Store
+
+This custom can be used to display toast messages. It has 5 different methods: `send`, `danger`, `warning`, `success`, `info`.
+
+
+<View name="danger">
+  <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>
+</View>
+<View name="success">
+  <button on:click={() => notifications.success('This is a success!')}>Success</button>
+</View>
+<View name="info">
+  <button on:click={() => notifications.info('This is an info toast!')}>Info</button>
+</View>
+  
+<div class="notifications">
+    {#each $notifications as notification (notification.id)}
+        <div
+        animate:flip
+        class="toast"
+        style="background: {themes[notification.type]};"
+        transition:fly={{ y: -30 }}>
+        <div class="content">{notification.message}</div>
+        {#if notification.icon}<i class={notification.icon} />{/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+    .notifications {
+        position: fixed;
+        top: 10px;
+        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;
+    }
+
+    .toast {
+        flex: 0 0 auto;
+        margin-bottom: 10px;
+        border-radius: var(--border-radius-s);
+        /* The toasts now support being auto sized, so this static width could be removed */
+        width: 40vw;
+    }
+
+    .content {
+        padding: 10px;
+        display: block;
+        color: white;
+        font-weight: 500;
+    }
+</style>
+  

package/src/Stores/notifications.js

@@ -0,0 +1,56 @@
+import { writable } from "svelte/store"
+
+const NOTIFICATION_TIMEOUT = 3000
+
+export const createNotificationStore = () => {
+  const timeoutIds = new Set()
+  const _notifications = writable([], () => {
+    return () => {
+      // clear all the timers
+      timeoutIds.forEach(timeoutId => {
+        clearTimeout(timeoutId)
+      })
+      _notifications.set([])
+    }
+  })
+  let block = false
+
+  const blockNotifications = (timeout = 1000) => {
+    block = true
+    setTimeout(() => (block = false), timeout)
+  }
+
+  const send = (message, type = "default", icon = "") => {
+    if (block) {
+      return
+    }
+    let _id = id()
+    _notifications.update(state => {
+      return [...state, { id: _id, type, message, icon }]
+    })
+    const timeoutId = setTimeout(() => {
+      _notifications.update(state => {
+        return state.filter(({ id }) => id !== _id)
+      })
+    }, NOTIFICATION_TIMEOUT)
+    timeoutIds.add(timeoutId)
+  }
+
+  const { subscribe } = _notifications
+
+  return {
+    subscribe,
+    send,
+    info: msg => send(msg, "info", "Info"),
+    error: msg => send(msg, "error", "Alert"),
+    warning: msg => send(msg, "warning", "Alert"),
+    success: msg => send(msg, "success", "CheckmarkCircle"),
+    blockNotifications,
+  }
+}
+
+function id() {
+  return "_" + Math.random().toString(36).substr(2, 9)
+}
+
+export const notifications = createNotificationStore()