@budibase/bbui 1.0.0 → 1.0.1

package/src/Form/Field.svelte

@@ -0,0 +1,41 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  import FieldLabel from "./FieldLabel.svelte"
+
+  export let id = null
+  export let label = null
+  export let labelPosition = "above"
+  export let error = null
+</script>
+
+<div class="spectrum-Form-item" class:above={labelPosition === "above"}>
+  {#if label}
+    <FieldLabel forId={id} {label} position={labelPosition} />
+  {/if}
+  <div class="spectrum-Form-itemField">
+    <slot />
+    {#if error}
+      <div class="error">{error}</div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .spectrum-Form-item.above {
+    display: flex;
+    flex-direction: column;
+  }
+  .spectrum-Form-itemField {
+    position: relative;
+    width: 100%;
+  }
+
+  .error {
+    color: var(
+      --spectrum-semantic-negative-color-default,
+      var(--spectrum-global-color-red-500)
+    );
+    font-size: var(--spectrum-global-dimension-font-size-75);
+    margin-top: var(--spectrum-global-dimension-size-75);
+  }
+</style>

package/src/Form/FieldLabel.svelte

@@ -0,0 +1,27 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+
+  export let forId
+  export let label
+  export let position = "above"
+
+  $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
+</script>
+
+<label
+  for={forId}
+  class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+>
+  {label || ""}
+</label>
+
+<style>
+  label {
+    white-space: nowrap;
+  }
+
+  .spectrum-FieldLabel--right,
+  .spectrum-FieldLabel--left {
+    padding-right: var(--spectrum-global-dimension-size-200);
+  }
+</style>

package/src/Form/Input.svelte

@@ -1,50 +1,43 @@
 <script>
-  export let name,
-    label,
-    type,
-    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 TextField from "./Core/TextField.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  label {
-    color: var(--font);
-    margin-bottom: 12px;
-  }
-
-  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;
-  }
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let placeholder = null
+  export let type = "text"
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let updateOnChange = true
+  export let quiet = false
+  export let dataCy
 
-  input::placeholder {
-    color: var(--grey-medium);
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
+</script>
 
-  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}>
+  <TextField
+    {dataCy}
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
+    {type}
+    {quiet}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

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,38 @@
+<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 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}
+    {getOptionLabel}
+    {getOptionValue}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Search.svelte

@@ -0,0 +1,32 @@
+<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
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition}>
+  <Search
+    {updateOnChange}
+    {disabled}
+    {value}
+    {placeholder}
+    on:change={onChange}
+    on:click
+    on:input
+    on:focus
+    on:blur
+  />
+</Field>

package/src/Form/Select.svelte

@@ -1,50 +1,52 @@
 <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 quiet = false
+  export let autoWidth = false
+  export let sort = false
 
-  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}>
+  <Select
+    {quiet}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {options}
+    {placeholder}
+    {autoWidth}
+    {sort}
+    {getOptionLabel}
+    {getOptionValue}
+    {getOptionIcon}
+    on:change={onChange}
+    on:click
+  />
+</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,30 @@
 <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
 
-  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}
+    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,47 @@
+<script context="module">
+  export const directions = ["n", "ne", "e", "se", "s", "sw", "w", "nw"]
+</script>
+
+<script>
+  export let direction = "n"
+  export let name = "Add"
+  export let hidden = false
+  export let size = "M"
+  export let hoverable = false
+  export let disabled = false
+
+  $: rotation = getRotation(direction)
+
+  const getRotation = direction => {
+    return directions.indexOf(direction) * 45
+  }
+</script>
+
+<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)`}
+>
+  <use xlink:href="#spectrum-icon-18-{name}" />
+</svg>
+
+<style>
+  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;
+  }
+</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,67 @@
+<script>
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+  import Tooltip from "../Tooltip/Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let size = "M"
+  export let tooltip = ""
+  export let showTooltip = false
+</script>
+
+{#if tooltip}
+  <div class="container">
+    <label
+      for=""
+      class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}
+    >
+      <slot />
+    </label>
+    <div class="icon-container">
+      <div
+        class="icon"
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+      >
+        <Icon name="InfoOutline" size="S" disabled={true} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  </div>
+{:else}
+  <label for="" class={`spectrum-FieldLabel spectrum-FieldLabel--size${size}`}>
+    <slot />
+  </label>
+{/if}
+
+<style>
+  label {
+    padding: 0;
+    white-space: nowrap;
+  }
+  .container {
+    display: flex;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: 1px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 1;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+</style>