@budibase/bbui 1.3.0 → 1.3.1

package/src/Form/Toggle.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Field from "./Field.svelte"
+  import Switch from "./Core/Switch.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let text = null
+  export let disabled = false
+  export let error = null
+  export let dataCy = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Switch {dataCy} {error} {disabled} {text} {value} on:change={onChange} />
+</Field>

package/src/Icon/Icon.svelte

@@ -0,0 +1,91 @@
+<script context="module">
+  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
+  export let direction = "n"
+  export let name = "Add"
+  export let hidden = false
+  export let size = "M"
+  export let hoverable = false
+  export let disabled = false
+  export let color
+  export let tooltip
+
+  $: rotation = getRotation(direction)
+
+  let showTooltip = false
+
+  const getRotation = direction => {
+    return directions.indexOf(direction) * 45
+  }
+</script>
+
+<div
+  class="icon"
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click={() => (showTooltip = false)}
+>
+  <svg
+    on:click
+    class:hoverable
+    class:disabled
+    class="spectrum-Icon spectrum-Icon--size{size}"
+    focusable="false"
+    aria-hidden={hidden}
+    aria-label={name}
+    style={`transform: rotate(${rotation}deg); ${
+      color ? `color: ${color};` : ""
+    }`}
+  >
+    <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
+  </svg>
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="bottom" text={tooltip} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .icon {
+    position: relative;
+    display: grid;
+    place-items: center;
+  }
+
+  svg.hoverable {
+    pointer-events: all;
+    transition: color var(--spectrum-global-animation-duration-100, 130ms);
+  }
+  svg.hoverable:hover {
+    color: var(--spectrum-alias-icon-color-selected-hover);
+    cursor: pointer;
+  }
+
+  svg.disabled {
+    color: var(--spectrum-global-color-gray-500) !important;
+    pointer-events: none !important;
+  }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: calc(100% + 4px);
+    width: 100vw;
+    max-width: 150px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
+
+  .spectrum-Icon--sizeXS {
+    width: 10px;
+    height: 10px;
+  }
+</style>

package/src/IconPicker/IconPicker.svelte

@@ -0,0 +1,177 @@
+<script>
+  //import { createEventDispatcher } from "svelte"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import clickOutside from "../Actions/click_outside"
+  import { fly } from "svelte/transition"
+  import Icon from "../Icon/Icon.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value
+  export let size = "M"
+  export let alignRight = false
+
+  let open = false
+
+  const dispatch = createEventDispatcher()
+
+  const iconList = [
+    {
+      label: "Icons",
+      icons: [
+        "Apps",
+        "Actions",
+        "ConversionFunnel",
+        "App",
+        "Briefcase",
+        "Money",
+        "ShoppingCart",
+        "Form",
+        "Help",
+        "Monitoring",
+        "Sandbox",
+        "Project",
+        "Organisations",
+        "Magnify",
+        "Launch",
+        "Car",
+        "Camera",
+        "Bug",
+        "Channel",
+        "Calculator",
+        "Calendar",
+        "GraphDonut",
+        "GraphBarHorizontal",
+        "Demographic",
+      ],
+    },
+  ]
+
+  const onChange = value => {
+    dispatch("change", value)
+    open = false
+  }
+</script>
+
+<div class="container">
+  <div class="preview size--{size || 'M'}" on:click={() => (open = true)}>
+    <div
+      class="fill"
+      style={value ? `background: ${value};` : ""}
+      class:placeholder={!value}
+    >
+      <Icon name={value || "UserGroup"} />
+    </div>
+  </div>
+  {#if open}
+    <div
+      use:clickOutside={() => (open = false)}
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:spectrum-Popover--align-right={alignRight}
+    >
+      {#each iconList as icon}
+        <div class="category">
+          <div class="heading">{icon.label}</div>
+          <div class="icons">
+            {#each icon.icons as icon}
+              <div
+                on:click={() => {
+                  onChange(icon)
+                }}
+              >
+                <Icon name={icon} />
+              </div>
+            {/each}
+          </div>
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+  .preview {
+    width: 32px;
+    height: 32px;
+    position: relative;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-400);
+  }
+  .preview:hover {
+    cursor: pointer;
+  }
+  .fill {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: grid;
+    place-items: center;
+  }
+  .size--S {
+    width: 20px;
+    height: 20px;
+  }
+  .size--M {
+    width: 32px;
+    height: 32px;
+  }
+  .size--L {
+    width: 48px;
+    height: 48px;
+  }
+  .spectrum-Popover {
+    width: 210px;
+    z-index: 999;
+    top: 100%;
+    padding: var(--spacing-l) var(--spacing-xl);
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-xl);
+  }
+  .spectrum-Popover--align-right {
+    right: 0;
+  }
+  .icons {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+    gap: var(--spacing-m);
+  }
+  .heading {
+    font-size: var(--font-size-s);
+    font-weight: 600;
+    letter-spacing: 0.14px;
+    flex: 1 1 auto;
+    text-transform: uppercase;
+    grid-column: 1 / 5;
+    margin-bottom: var(--spacing-s);
+  }
+
+  .icon {
+    height: 16px;
+    width: 16px;
+    border-radius: 100%;
+    box-shadow: 0 0 0 1px var(--spectrum-global-color-gray-300);
+    position: relative;
+  }
+  .icon:hover {
+    cursor: pointer;
+    box-shadow: 0 0 2px 2px var(--spectrum-global-color-gray-300);
+  }
+  .custom {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--spacing-m);
+    margin-right: var(--spacing-xs);
+  }
+
+  .spectrum-wrapper {
+    background-color: transparent;
+  }
+</style>

package/src/IconSideNav/IconSideNav.svelte

@@ -0,0 +1,14 @@
+<div class="icon-side-nav">
+  <slot />
+</div>
+
+<style>
+  .icon-side-nav {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    padding: var(--spacing-s);
+    gap: var(--spacing-xs);
+  }
+</style>

package/src/IconSideNav/IconSideNavItem.svelte

@@ -0,0 +1,56 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import { fade } from "svelte/transition"
+
+  export let icon
+  export let active = false
+  export let tooltip
+
+  let showTooltip = false
+</script>
+
+<div
+  class="icon-side-nav-item"
+  class:active
+  on:mouseover={() => (showTooltip = true)}
+  on:focus={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  on:click
+>
+  <Icon name={icon} hoverable />
+  {#if tooltip && showTooltip}
+    <div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
+      <Tooltip textWrapping direction="right" text={tooltip} />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .icon-side-nav-item {
+    width: 36px;
+    height: 36px;
+    display: grid;
+    place-items: center;
+    border-radius: 4px;
+    position: relative;
+    cursor: pointer;
+    transition: background 130ms ease-out;
+  }
+  .icon-side-nav-item:hover :global(svg),
+  .active :global(svg) {
+    color: var(--spectrum-global-color-gray-900);
+  }
+  .active {
+    background: var(--spectrum-global-color-gray-300);
+  }
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: calc(100% - 4px);
+    top: 50%;
+    white-space: nowrap;
+    transform: translateY(-50%);
+    z-index: 1;
+  }
+</style>

package/src/InlineAlert/InlineAlert.svelte

@@ -0,0 +1,56 @@
+<script>
+  import "@spectrum-css/inlinealert/dist/index-vars.css"
+  import Button from "../Button/Button.svelte"
+
+  export let type = "info"
+  export let header = ""
+  export let message = ""
+  export let onConfirm = undefined
+
+  $: icon = selectIcon(type)
+  // if newlines used, convert them to different elements
+  $: split = message.split("\n")
+
+  function selectIcon(alertType) {
+    switch (alertType) {
+      case "error":
+      case "negative":
+        return "Alert"
+      case "success":
+        return "CheckmarkCircle"
+      case "help":
+        return "Help"
+      default:
+        return "Info"
+    }
+  }
+</script>
+
+<div class="spectrum-InLineAlert spectrum-InLineAlert--{type}">
+  <svg
+    class="spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon"
+    focusable="false"
+    aria-hidden="true"
+  >
+    <use xlink:href="#spectrum-icon-18-{icon}" />
+  </svg>
+  <div class="spectrum-InLineAlert-header">{header}</div>
+  {#each split as splitMsg}
+    <div class="spectrum-InLineAlert-content">{splitMsg}</div>
+  {/each}
+  {#if onConfirm}
+    <div class="spectrum-InLineAlert-footer">
+      <Button secondary on:click={onConfirm}>OK</Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spectrum-InLineAlert {
+    --spectrum-semantic-negative-border-color: #e34850;
+    --spectrum-semantic-positive-border-color: #2d9d78;
+    --spectrum-semantic-positive-icon-color: #2d9d78;
+    --spectrum-semantic-negative-icon-color: #e34850;
+    min-width: 100px;
+  }
+</style>

package/src/Label/Label.svelte

@@ -0,0 +1,20 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+
+  export let size = "M"
+  export let tooltip = ""
+</script>
+
+<TooltipWrapper {tooltip} {size}>
+  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+    <slot />
+  </label>
+</TooltipWrapper>
+
+<style>
+  label {
+    padding: 0;
+    white-space: nowrap;
+  }
+</style>

package/src/Layout/Layout.svelte

@@ -0,0 +1,94 @@
+<script>
+  export let horizontal = false
+  export let paddingX = "M"
+  export let paddingY = "M"
+  export let noPadding = false
+  export let gap = "M"
+  export let noGap = false
+  export let alignContent = "normal"
+  export let justifyItems = "stretch"
+</script>
+
+<div
+  style="align-content:{alignContent};justify-items:{justifyItems};"
+  class:horizontal
+  class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
+    paddingY} gap-{!noGap && gap}"
+>
+  <slot />
+</div>
+
+<style>
+  .container {
+    display: grid;
+    grid-template-columns: 1fr;
+    position: relative;
+  }
+  .paddingX-S {
+    padding-left: var(--spacing-s);
+    padding-right: var(--spacing-s);
+  }
+  .paddingX-M {
+    padding-left: var(--spacing-m);
+    padding-right: var(--spacing-m);
+  }
+  .paddingX-L {
+    padding-left: var(--spacing-l);
+    padding-right: var(--spacing-l);
+  }
+  .paddingX-XL {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+  }
+  .paddingX-XXL {
+    padding-left: var(--spectrum-alias-grid-gutter-large);
+    padding-right: var(--spectrum-alias-grid-gutter-large);
+  }
+  .paddingY-S {
+    padding-top: var(--spacing-s);
+    padding-bottom: var(--spacing-s);
+  }
+  .paddingY-M {
+    padding-top: var(--spacing-m);
+    padding-bottom: var(--spacing-m);
+  }
+  .paddingY-L {
+    padding-top: var(--spacing-l);
+    padding-bottom: var(--spacing-l);
+  }
+  .paddingY-XL {
+    padding-top: var(--spacing-xl);
+    padding-bottom: var(--spacing-xl);
+  }
+  .paddingY-XXL {
+    padding-top: var(--spectrum-alias-grid-gutter-large);
+    padding-bottom: var(--spectrum-alias-grid-gutter-large);
+  }
+  .gap-XXS {
+    grid-gap: var(--spacing-xs);
+  }
+  .gap-XS {
+    grid-gap: var(--spacing-s);
+  }
+  .gap-S {
+    grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .gap-M {
+    grid-gap: var(--spectrum-alias-grid-gutter-small);
+  }
+  .gap-L {
+    grid-gap: var(--spectrum-alias-grid-gutter-medium);
+  }
+  .gap-XL {
+    grid-gap: var(--spectrum-alias-grid-gutter-large);
+  }
+  .horizontal.gap-S :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-xsmall);
+  }
+  .horizontal.gap-M :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-small);
+  }
+  .horizontal.gap-L :global(*) + :global(*) {
+    margin-left: var(--spectrum-alias-grid-gutter-medium);
+  }
+</style>

package/src/Layout/Page.svelte

@@ -0,0 +1,32 @@
+<script>
+  export let wide = false
+  export let maxWidth = "80ch"
+  export let noPadding = false
+</script>
+
+<div style="--max-width: {maxWidth}" class:wide class:noPadding>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    max-width: var(--max-width);
+    margin: 0 auto;
+    padding: calc(var(--spacing-xl) * 2);
+    min-height: calc(100% - var(--spacing-xl) * 4);
+  }
+
+  .wide {
+    max-width: none;
+    margin: 0;
+  }
+
+  .noPadding {
+    padding: 0px;
+    margin: 0px;
+  }
+</style>

package/src/Link/Link.svelte

@@ -0,0 +1,24 @@
+<script>
+  import "@spectrum-css/link/dist/index-vars.css"
+
+  export let href = "#"
+  export let size = "M"
+  export let quiet = false
+  export let primary = false
+  export let secondary = false
+  export let overBackground = false
+  export let target
+  export let download
+</script>
+
+<a
+  on:click
+  {href}
+  {target}
+  {download}
+  class:spectrum-Link--primary={primary}
+  class:spectrum-Link--secondary={secondary}
+  class:spectrum-Link--overBackground={overBackground}
+  class:spectrum-Link--quiet={quiet}
+  class="spectrum-Link spectrum-Link--size{size}"><slot /></a
+>

package/src/List/List.svelte

@@ -0,0 +1,28 @@
+<script>
+  import Detail from "../Typography/Detail.svelte"
+
+  export let title = null
+</script>
+
+<div>
+  {#if title}
+    <div class="title">
+      <Detail>{title}</Detail>
+    </div>
+  {/if}
+  <div class="list-items">
+    <slot />
+  </div>
+</div>
+
+<style>
+  .title {
+    margin-bottom: 6px;
+  }
+  .list-items {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+</style>