@budibase/bbui 1.0.0 → 1.0.1

package/src/Form/Core/RadioGroup.svelte

@@ -0,0 +1,47 @@
+<script>
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import "@spectrum-css/radio/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let direction = "vertical"
+  export let value = null
+  export let options = []
+  export let error = null
+  export let disabled = false
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => dispatch("change", e.target.value)
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+  {#if options && Array.isArray(options)}
+    {#each options as option}
+      <div
+        title={getOptionLabel(option)}
+        class="spectrum-Radio spectrum-FieldGroup-item spectrum-Radio--emphasized"
+        class:is-invalid={!!error}
+      >
+        <input
+          on:change={onChange}
+          bind:group={value}
+          value={getOptionValue(option)}
+          type="radio"
+          class="spectrum-Radio-input"
+          {disabled}
+        />
+        <span class="spectrum-Radio-button" />
+        <label for="" class="spectrum-Radio-label">
+          {getOptionLabel(option)}
+        </label>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .spectrum-Radio-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/Search.svelte

@@ -0,0 +1,101 @@
+<script>
+  import "@spectrum-css/search/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let placeholder = null
+  export let disabled = false
+  export let id = null
+  export let updateOnChange = true
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  const updateValue = value => {
+    dispatch("change", value)
+  }
+
+  const onFocus = () => {
+    focus = true
+  }
+
+  const onBlur = event => {
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const onInput = event => {
+    if (!updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+</script>
+
+<div class="spectrum-Search" class:is-disabled={disabled}>
+  <div
+    class="spectrum-Textfield"
+    class:is-focused={focus}
+    class:is-disabled={disabled}
+  >
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-icon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Magnify" />
+    </svg>
+    <input
+      {disabled}
+      {id}
+      value={value || ""}
+      placeholder={placeholder || ""}
+      on:click
+      on:blur
+      on:focus
+      on:input
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input={onInput}
+      on:keyup={updateValueOnEnter}
+      type="search"
+      class="spectrum-Textfield-input spectrum-Search-input"
+      autocomplete="off"
+    />
+  </div>
+  <button
+    on:click={() => updateValue("")}
+    type="reset"
+    class="spectrum-ClearButton spectrum-Search-clearButton"
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Cross75"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Cross75" />
+    </svg>
+  </button>
+</div>
+
+<style>
+  .spectrum-Search,
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  .spectrum-Search-input {
+    padding-right: 24px;
+  }
+  .is-disabled {
+    pointer-events: none;
+  }
+  .spectrum-Search-clearButton {
+    position: absolute;
+  }
+</style>

package/src/Form/Core/Select.svelte

@@ -0,0 +1,81 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import Picker from "./Picker.svelte"
+
+  export let value = null
+  export let id = null
+  export let placeholder = "Choose an option"
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let getOptionIcon = () => null
+  export let readonly = false
+  export let quiet = false
+  export let autoWidth = false
+  export let autocomplete = false
+  export let sort = false
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  $: fieldText = getFieldText(value, options, placeholder)
+  $: fieldIcon = getFieldIcon(value, options, placeholder)
+
+  const getFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
+    }
+
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+
+    // Render the label if the selected option is found, otherwise raw value
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionLabel(options[index], index) : value
+  }
+
+  const getFieldIcon = (value, options) => {
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+    const index = options.findIndex(
+      (option, idx) => getOptionValue(option, idx) === value
+    )
+    return index !== -1 ? getOptionIcon(options[index], index) : null
+  }
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+</script>
+
+<Picker
+  on:click
+  bind:open
+  {quiet}
+  {id}
+  {error}
+  {disabled}
+  {readonly}
+  {fieldText}
+  {options}
+  {autoWidth}
+  {getOptionLabel}
+  {getOptionValue}
+  {getOptionIcon}
+  {fieldIcon}
+  {autocomplete}
+  {sort}
+  isPlaceholder={value == null || value === ""}
+  placeholderOption={placeholder}
+  isOptionSelected={option => option === value}
+  onSelectOption={selectOption}
+/>

package/src/Form/Core/Stepper.svelte

@@ -0,0 +1,172 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import "@spectrum-css/actionbutton/dist/index-vars.css"
+  import "@spectrum-css/stepper/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export let readonly = false
+  export let updateOnChange = true
+  export let quiet = false
+  export let min
+  export let max
+  export let step
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  // We need to keep the field value bound to a different variable in order
+  // to properly handle erroneous values. If we don't do this then it is
+  // possible for the field to show stale text which does not represent the
+  // real value. The reactive statement is to ensure that external changes to
+  // the value prop are reflected.
+  let fieldValue = value
+  $: fieldValue = value
+
+  // Ensure step is always a numeric value defaulting to 1
+  $: step = step == null || isNaN(step) ? 1 : step
+
+  const updateValue = value => {
+    if (readonly) {
+      return
+    }
+    const float = parseFloat(value)
+    value = isNaN(float) ? null : float
+    if (value != null) {
+      if (min != null && value < min) {
+        value = min
+      } else if (max != null && value > max) {
+        value = max
+      }
+    }
+    dispatch("change", value)
+    fieldValue = value
+  }
+
+  const onFocus = () => {
+    if (readonly) {
+      return
+    }
+    focus = true
+  }
+
+  const onBlur = event => {
+    if (readonly) {
+      return
+    }
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const onInput = event => {
+    if (readonly || !updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (readonly) {
+      return
+    }
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+
+  const stepUp = () => {
+    if (value == null || isNaN(value)) {
+      updateValue(step)
+    } else {
+      updateValue(value + step)
+    }
+  }
+
+  const stepDown = () => {
+    if (value == null || isNaN(value)) {
+      updateValue(step)
+    } else {
+      updateValue(value - step)
+    }
+  }
+</script>
+
+<div
+  class="spectrum-Stepper"
+  class:spectrum-Stepper--quiet={quiet}
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+
+  <div class="spectrum-Textfield spectrum-Stepper-textfield">
+    <input
+      {disabled}
+      {readonly}
+      {id}
+      bind:value={fieldValue}
+      placeholder={placeholder || ""}
+      type="number"
+      class="spectrum-Textfield-input spectrum-Stepper-input"
+      on:click
+      on:blur
+      on:focus
+      on:input
+      on:keyup
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input={onInput}
+      on:keyup={updateValueOnEnter}
+    />
+  </div>
+  <span class="spectrum-Stepper-buttons">
+    <button
+      class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepUp"
+      tabindex="-1"
+      on:click={stepUp}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronUp75"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron75" />
+      </svg>
+    </button>
+    <button
+      class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-Stepper-stepDown"
+      tabindex="-1"
+      on:click={stepDown}
+    >
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronDown75"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron75" />
+      </svg>
+    </button>
+  </span>
+</div>
+
+<style>
+  .spectrum-Stepper {
+    width: 100%;
+  }
+  .spectrum-Stepper::before {
+    display: none;
+  }
+</style>

package/src/Form/Core/Switch.svelte

@@ -0,0 +1,35 @@
+<script>
+  import "@spectrum-css/switch/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let id = null
+  export let text = null
+  export let disabled = false
+  export let dataCy = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+</script>
+
+<div class="spectrum-Switch spectrum-Switch--emphasized">
+  <input
+    data-cy={dataCy}
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    {id}
+    type="checkbox"
+    class="spectrum-Switch-input"
+  />
+  <span class="spectrum-Switch-switch" />
+  <label class="spectrum-Switch-label" for={id}>{text}</label>
+</div>
+
+<style>
+  .spectrum-Switch-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/TextArea.svelte

@@ -0,0 +1,60 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = ""
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export const getCaretPosition = () => ({
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+  })
+
+  let focus = false
+  let textarea
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+    focus = false
+  }
+</script>
+
+<div
+  class="spectrum-Textfield spectrum-Textfield--multiline"
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM
+      spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+  <!-- prettier-ignore -->
+  <textarea
+    bind:this={textarea}
+    placeholder={placeholder || ""}
+    class="spectrum-Textfield-input"
+    {disabled}
+    {id}
+    on:focus={() => (focus = true)}
+    on:blur={onChange}
+  >{value || ""}</textarea>
+</div>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  textarea {
+    resize: vertical;
+    min-height: 80px !important;
+  }
+</style>

package/src/Form/Core/TextField.svelte

@@ -0,0 +1,104 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let placeholder = null
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let id = null
+  export let readonly = false
+  export let updateOnChange = true
+  export let quiet = false
+  export let dataCy
+
+  const dispatch = createEventDispatcher()
+  let focus = false
+
+  const updateValue = newValue => {
+    if (readonly) {
+      return
+    }
+    if (type === "number") {
+      const float = parseFloat(newValue)
+      newValue = isNaN(float) ? null : float
+    }
+    dispatch("change", newValue)
+  }
+
+  const onFocus = () => {
+    if (readonly) {
+      return
+    }
+    focus = true
+  }
+
+  const onBlur = event => {
+    if (readonly) {
+      return
+    }
+    focus = false
+    updateValue(event.target.value)
+  }
+
+  const onInput = event => {
+    if (readonly || !updateOnChange) {
+      return
+    }
+    updateValue(event.target.value)
+  }
+
+  const updateValueOnEnter = event => {
+    if (readonly) {
+      return
+    }
+    if (event.key === "Enter") {
+      updateValue(event.target.value)
+    }
+  }
+</script>
+
+<div
+  class="spectrum-Textfield"
+  class:spectrum-Textfield--quiet={quiet}
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+  class:is-focused={focus}
+>
+  {#if error}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-icon-18-Alert" />
+    </svg>
+  {/if}
+  <input
+    {disabled}
+    {readonly}
+    {id}
+    data-cy={dataCy}
+    value={value || ""}
+    placeholder={placeholder || ""}
+    on:click
+    on:blur
+    on:focus
+    on:input
+    on:keyup
+    on:blur={onBlur}
+    on:focus={onFocus}
+    on:input={onInput}
+    on:keyup={updateValueOnEnter}
+    {type}
+    inputmode={type === "number" ? "decimal" : "text"}
+    class="spectrum-Textfield-input"
+  />
+</div>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+</style>

package/src/Form/Core/index.js

@@ -0,0 +1,12 @@
+export { default as CoreTextField } from "./TextField.svelte"
+export { default as CoreSelect } from "./Select.svelte"
+export { default as CoreMultiselect } from "./Multiselect.svelte"
+export { default as CoreCheckbox } from "./Checkbox.svelte"
+export { default as CoreRadioGroup } from "./RadioGroup.svelte"
+export { default as CoreTextArea } from "./TextArea.svelte"
+export { default as CoreCombobox } from "./Combobox.svelte"
+export { default as CoreSwitch } from "./Switch.svelte"
+export { default as CoreSearch } from "./Search.svelte"
+export { default as CoreDatePicker } from "./DatePicker.svelte"
+export { default as CoreDropzone } from "./Dropzone.svelte"
+export { default as CoreStepper } from "./Stepper.svelte"

package/src/Form/DatePicker.svelte

@@ -0,0 +1,33 @@
+<script>
+  import Field from "./Field.svelte"
+  import DatePicker from "./Core/DatePicker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = null
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let enableTime = true
+  export let placeholder = null
+  export let appendTo = undefined
+
+  const dispatch = createEventDispatcher()
+
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <DatePicker
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {enableTime}
+    {appendTo}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Dropzone.svelte

@@ -0,0 +1,34 @@
+<script>
+  import Field from "./Field.svelte"
+  import CoreDropzone from "./Core/Dropzone.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let error = null
+  export let fileSizeLimit = undefined
+  export let processFiles = undefined
+  export let handleFileTooLarge = undefined
+  export let gallery = true
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <CoreDropzone
+    {error}
+    {disabled}
+    {value}
+    {fileSizeLimit}
+    {processFiles}
+    {handleFileTooLarge}
+    {gallery}
+    on:change={onChange}
+  />
+</Field>