@budibase/bbui 0.0.1

package/src/Form/Core/Select.svelte

@@ -0,0 +1,90 @@
+<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 useOptionIconImage = false
+  export let getOptionColour = () => null
+  export let isOptionEnabled
+  export let readonly = false
+  export let quiet = false
+  export let autoWidth = false
+  export let autocomplete = false
+  export let sort = false
+  export let align
+  export let footer = null
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+
+  $: fieldText = getFieldText(value, options, placeholder)
+  $: fieldIcon = getFieldAttribute(getOptionIcon, value, options)
+  $: fieldColour = getFieldAttribute(getOptionColour, value, options)
+
+  const getFieldAttribute = (getAttribute, 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 ? getAttribute(options[index], index) : null
+  }
+
+  const getFieldText = (value, options, placeholder) => {
+    if (value == null || value === "") {
+      // Explicit false means use no placeholder and allow an empty fields
+      if (placeholder === false) {
+        return ""
+      }
+      // Otherwise we use the placeholder if possible
+      return placeholder || "Choose an option"
+    }
+
+    return getFieldAttribute(getOptionLabel, value, options)
+  }
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+</script>
+
+<Picker
+  on:click
+  bind:open
+  {quiet}
+  {id}
+  {error}
+  {disabled}
+  {readonly}
+  {fieldText}
+  {fieldIcon}
+  {fieldColour}
+  {options}
+  {autoWidth}
+  {align}
+  {footer}
+  {getOptionLabel}
+  {getOptionValue}
+  {getOptionIcon}
+  {useOptionIconImage}
+  {getOptionColour}
+  {isOptionEnabled}
+  {autocomplete}
+  {sort}
+  isPlaceholder={value == null || value === ""}
+  placeholderOption={placeholder === false ? null : placeholder}
+  isOptionSelected={option => option === value}
+  onSelectOption={selectOption}
+/>

package/src/Form/Core/Slider.svelte

@@ -0,0 +1,86 @@
+<script>
+  import "@spectrum-css/slider/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let id = null
+  export let disabled = false
+  export let min = 0
+  export let max = 100
+  export let step = 1
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+  }
+</script>
+
+<div>
+  <input
+    type="range"
+    {min}
+    {max}
+    {step}
+    {value}
+    {disabled}
+    {id}
+    on:change={onChange}
+  />
+</div>
+
+<style>
+  div {
+    display: grid;
+    place-items: center;
+  }
+
+  input {
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+  }
+  input:focus {
+    outline: none;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+    margin-top: -7px;
+  }
+  input[type="range"]::-moz-range-thumb {
+    border: 2px solid var(--spectrum-global-color-gray-700);
+    height: 12px;
+    width: 12px;
+    border-radius: 50%;
+    background: var(--background);
+    cursor: pointer;
+    transition: background 130ms ease-out;
+  }
+
+  input[type="range"]::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
+  input[type="range"]::-moz-range-track {
+    width: 100%;
+    height: 2px;
+    cursor: pointer;
+    background: var(--spectrum-global-color-gray-300);
+    border-radius: 2px;
+  }
+</style>

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
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+</script>
+
+<div class="spectrum-Switch spectrum-Switch--emphasized">
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    {id}
+    type="checkbox"
+    class="spectrum-Switch-input"
+  />
+  <span class="spectrum-Switch-switch" />
+  {#if text}
+    <label class="spectrum-Switch-label" for={id}>{text}</label>
+  {/if}
+</div>
+
+<style>
+  .spectrum-Switch-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/TextArea.svelte

@@ -0,0 +1,78 @@
+<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 let height = null
+  export let minHeight = null
+  export const getCaretPosition = () => ({
+    start: textarea.selectionStart,
+    end: textarea.selectionEnd,
+  })
+  export let align = null
+
+  let focus = false
+  let textarea
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.value)
+    focus = false
+  }
+
+  const getStyleString = (attribute, value) => {
+    if (!attribute || value == null) {
+      return ""
+    }
+    if (isNaN(value)) {
+      return `${attribute}:${value};`
+    }
+    return `${attribute}:${value}px;`
+  }
+
+  $: heightString = getStyleString("height", height)
+  $: minHeightString = getStyleString("min-height", minHeight)
+</script>
+
+<div
+  style={`${heightString}${minHeightString}`}
+  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"
+    style={align ? `text-align: ${align}` : ""}
+    {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,115 @@
+<script>
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import { createEventDispatcher, onMount } 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 align
+  export let autofocus = false
+  export let autocomplete = null
+
+  const dispatch = createEventDispatcher()
+
+  let field
+  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)
+    }
+  }
+
+  onMount(() => {
+    focus = autofocus
+    if (focus) field.focus()
+  })
+</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
+    bind:this={field}
+    {disabled}
+    {readonly}
+    {id}
+    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}
+    class="spectrum-Textfield-input"
+    style={align ? `text-align: ${align};` : ""}
+    inputmode={type === "number" ? "decimal" : "text"}
+    {autocomplete}
+  />
+</div>
+
+<style>
+  .spectrum-Textfield {
+    width: 100%;
+  }
+</style>

package/src/Form/Core/index.js

@@ -0,0 +1,16 @@
+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 CoreCheckboxGroup } from "./CheckboxGroup.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"
+export { default as CoreRichTextField } from "./RichTextField.svelte"
+export { default as CoreSlider } from "./Slider.svelte"
+export { default as CoreFile } from "./File.svelte"

package/src/Form/DatePicker.svelte

@@ -0,0 +1,46 @@
+<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 timeOnly = false
+  export let time24hr = false
+  export let placeholder = null
+  export let appendTo = undefined
+  export let ignoreTimezones = false
+  export let range = false
+  const dispatch = createEventDispatcher()
+
+  const onChange = e => {
+    if (range) {
+      // Flatpickr cant take two dates and work out what to display, needs to be provided a string.
+      // Like - "Date1 to Date2". Hence passing in that specifically from the array
+      value = e?.detail[1]
+    } else {
+      value = e.detail
+    }
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <DatePicker
+    {error}
+    {disabled}
+    {value}
+    {placeholder}
+    {enableTime}
+    {timeOnly}
+    {time24hr}
+    {appendTo}
+    {ignoreTimezones}
+    {range}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Dropzone.svelte

@@ -0,0 +1,44 @@
+<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 deleteAttachments = undefined
+  export let handleFileTooLarge = undefined
+  export let handleTooManyFiles = undefined
+  export let gallery = true
+  export let fileTags = []
+  export let maximum = undefined
+  export let compact = false
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <CoreDropzone
+    {error}
+    {disabled}
+    {value}
+    {fileSizeLimit}
+    {processFiles}
+    {deleteAttachments}
+    {handleFileTooLarge}
+    {handleTooManyFiles}
+    {gallery}
+    {fileTags}
+    {maximum}
+    {compact}
+    on:change={onChange}
+  />
+</Field>