@budibase/bbui 1.1.0 → 1.1.3

package/src/Form/Multiselect.svelte

@@ -0,0 +1,39 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import Multiselect from "./Core/Multiselect.svelte"
+  import Field from "./Field.svelte"
+
+  export let value = []
+  export let label = null
+  export let disabled = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let sort = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Multiselect
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {options}
+    {placeholder}
+    {sort}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+    on:click
+  />
+</Field>

package/src/Form/RadioGroup.svelte

@@ -0,0 +1,40 @@
+<script>
+  import Field from "./Field.svelte"
+  import RadioGroup from "./Core/RadioGroup.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let disabled = false
+  export let labelPosition = "above"
+  export let error = null
+  export let options = []
+  export let direction = "vertical"
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <RadioGroup
+    {error}
+    {disabled}
+    {value}
+    {options}
+    {direction}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/RichTextField.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Field from "./Field.svelte"
+  import RichTextField from "./Core/RichTextField.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let height = null
+  export let id = null
+  export let fullScreenOffset = null
+  export let easyMDEOptions = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <RichTextField
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {easyMDEOptions}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Search.svelte

@@ -0,0 +1,36 @@
+<script>
+  import Field from "./Field.svelte"
+  import Search from "./Core/Search.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let updateOnChange = true
+  export let quiet = false
+  export let inputRef
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition}>
+  <Search
+    {updateOnChange}
+    {disabled}
+    {value}
+    {placeholder}
+    {quiet}
+    bind:inputRef
+    on:change={onChange}
+    on:click
+    on:input
+    on:focus
+    on:blur
+  />
+</Field>

package/src/Form/Select.svelte

@@ -1,50 +1,55 @@
 <script>
-  export let name,
-    label,
-    type,
-    placeholder,
-    validator = () => {};
-</script>
+  import Field from "./Field.svelte"
+  import Select from "./Core/Select.svelte"
+  import { createEventDispatcher } from "svelte"
 
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.17;
-  }
+  export let value = null
+  export let label = undefined
+  export let disabled = false
+  export let readonly = false
+  export let labelPosition = "above"
+  export let error = null
+  export let placeholder = "Choose an option"
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+  export let getOptionIcon = option => option?.icon
+  export let getOptionColour = option => option?.colour
+  export let quiet = false
+  export let autoWidth = false
+  export let sort = false
+  export let tooltip = ""
 
-  label {
-    color: var(--font);
-    margin-bottom: 12px;
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 
-  input {
-    box-sizing: border-box;
-    color: var(--font);
-    font-size: 18px;
-    border-radius: 3px;
-    border: solid 1px var(--grey-medium);
-    padding: 20px;
-    margin: 0;
-    background-color: white;
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
   }
+</script>
 
-  input::placeholder {
-    color: var(--grey-medium);
-  }
-
-  input:focus {
-    box-shadow: 0 4px 16px 0 rgba(57, 60, 68, 0.08);
-  }
-
-  input:disabled {
-    background: var(--grey-medium);
-  }
-</style>
-
-<div class="container">
-  <label for={name}>{label}</label>
-  <input on:change on:input use:validator {type} {name} {placeholder} />
-</div>
+<Field {label} {labelPosition} {error} {tooltip}>
+  <Select
+    {quiet}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {options}
+    {placeholder}
+    {autoWidth}
+    {sort}
+    {getOptionLabel}
+    {getOptionValue}
+    {getOptionIcon}
+    {getOptionColour}
+    on:change={onChange}
+    on:click
+  />
+</Field>

package/src/Form/Slider.svelte

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

package/src/Form/Stepper.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Field from "./Field.svelte"
+  import Stepper from "./Core/Stepper.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let updateOnChange = true
+  export let quiet = false
+  export let min = null
+  export let max = null
+  export let step = 1
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <Stepper
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
+    {quiet}
+    {min}
+    {max}
+    {step}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

package/src/Form/TextArea.svelte

@@ -1,49 +1,34 @@
 <script>
-  import { text_area_resize } from "../actions/autoresize_textarea.js";
-  export let name,
-    label,
-    value,
-    placeholder,
-    validator = () => {};
-</script>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    font-size: 18px;
-    font-weight: 500;
-    line-height: 1.17;
-  }
+  import Field from "./Field.svelte"
+  import TextArea from "./Core/TextArea.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  label {
-    color: var(--font);
-    margin-bottom: 12px;
-  }
-
-  textarea {
-    color: var(--font);
-    font-size: 18px;
-    border-radius: 3px;
-    border: solid 1px var(--grey-medium);
-    padding: 20px;
-    margin: 0;
-  }
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let getCaretPosition = null
+  export let height = null
+  export let minHeight = null
 
-  textarea::placeholder {
-    color: var(--grey-dark);
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
+</script>
 
-  textarea:focus {
-    box-shadow: 0 4px 16px 0 rgba(57, 60, 68, 0.08);
-  }
-
-  textarea:disabled {
-    background: var(--grey-medium);
-  }
-</style>
-
-<div class="container">
-  <label for={name}>{label}</label>
-  <textarea bind:value {placeholder} {name} use:text_area_resize />
-</div>
+<Field {label} {labelPosition} {error}>
+  <TextArea
+    bind:getCaretPosition
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {height}
+    {minHeight}
+    on:change={onChange}
+  />
+</Field>

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,86 @@
+<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;
+  }
+</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>