@budibase/bbui 0.0.1

package/src/Form/EnvDropdown.svelte

@@ -0,0 +1,50 @@
+<script>
+  import Field from "./Field.svelte"
+  import EnvDropdown from "./Core/EnvDropdown.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  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 autofocus
+  export let variables
+  export let showModal
+  export let environmentVariablesEnabled
+  export let handleUpgradePanel
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <EnvDropdown
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
+    {type}
+    {quiet}
+    {autofocus}
+    {variables}
+    {showModal}
+    {environmentVariablesEnabled}
+    {handleUpgradePanel}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

package/src/Form/Field.svelte

@@ -0,0 +1,42 @@
+<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
+  export let tooltip = ""
+</script>
+
+<div class="spectrum-Form-item" class:above={labelPosition === "above"}>
+  {#if label}
+    <FieldLabel forId={id} {label} position={labelPosition} {tooltip} />
+  {/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,32 @@
+<script>
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
+
+  import "@spectrum-css/fieldlabel/dist/index-vars.css"
+
+  export let forId
+  export let label
+  export let position = "above"
+  export let tooltip = ""
+
+  $: className = position === "above" ? "" : `spectrum-FieldLabel--${position}`
+</script>
+
+<TooltipWrapper {tooltip} size="S">
+  <label
+    for={forId}
+    class={`spectrum-FieldLabel spectrum-FieldLabel--sizeM spectrum-Form-itemLabel ${className}`}
+  >
+    {label || ""}
+  </label>
+</TooltipWrapper>
+
+<style>
+  label {
+    white-space: nowrap;
+  }
+
+  .spectrum-FieldLabel--right,
+  .spectrum-FieldLabel--left {
+    padding-right: var(--spectrum-global-dimension-size-200);
+  }
+</style>

package/src/Form/File.svelte

@@ -0,0 +1,37 @@
+<script>
+  import Field from "./Field.svelte"
+  import { CoreFile } from "./Core"
+  import { createEventDispatcher } from "svelte"
+
+  export let label = null
+  export let labelPosition = "above"
+  export let disabled = false
+  export let allowClear = null
+  export let handleFileTooLarge = () => {}
+  export let previewUrl = null
+  export let extensions = null
+  export let error = null
+  export let title = null
+  export let value = null
+  export let tooltip = null
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error} {tooltip}>
+  <CoreFile
+    {error}
+    {disabled}
+    {allowClear}
+    {title}
+    {value}
+    {previewUrl}
+    {handleFileTooLarge}
+    {extensions}
+    on:change={onChange}
+  />
+</Field>

package/src/Form/Input.svelte

@@ -0,0 +1,45 @@
+<script>
+  import Field from "./Field.svelte"
+  import TextField from "./Core/TextField.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  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 autofocus
+  export let autocomplete
+
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <TextField
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {placeholder}
+    {type}
+    {quiet}
+    {autofocus}
+    {autocomplete}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

package/src/Form/InputDropdown.svelte

@@ -0,0 +1,53 @@
+<script>
+  import Field from "./Field.svelte"
+  import InputDropdown from "./Core/InputDropdown.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let inputValue = null
+  export let dropdownValue = null
+  export let inputType = "text"
+  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 autofocus
+  export let options = []
+
+  const dispatch = createEventDispatcher()
+
+  const onPick = e => {
+    dropdownValue = e.detail
+    dispatch("pick", e.detail)
+  }
+  const onChange = e => {
+    inputValue = e.detail
+    dispatch("change", e.detail)
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <InputDropdown
+    {updateOnChange}
+    {error}
+    {disabled}
+    {readonly}
+    {inputValue}
+    {dropdownValue}
+    {placeholder}
+    {inputType}
+    {quiet}
+    {autofocus}
+    {options}
+    on:change={onChange}
+    on:pick={onPick}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

package/src/Form/Multiselect.svelte

@@ -0,0 +1,49 @@
+<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
+  export let autoWidth = false
+  export let autocomplete = false
+  export let fetchTerm = null
+  export let useFetch = false
+  export let customPopoverHeight
+
+  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}
+    {autoWidth}
+    {autocomplete}
+    {customPopoverHeight}
+    bind:fetchTerm
+    {useFetch}
+    on:change={onChange}
+    on:click
+  />
+</Field>

package/src/Form/PickerDropdown.svelte

@@ -0,0 +1,131 @@
+<script>
+  import Field from "./Field.svelte"
+  import PickerDropdown from "./Core/PickerDropdown.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let primaryValue = null
+  export let secondaryValue = null
+  export let inputType = "text"
+  export let label = null
+  export let labelPosition = "above"
+  export let secondaryPlaceholder = null
+  export let autocomplete
+  export let placeholder = null
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let getSecondaryOptionLabel = option =>
+    extractProperty(option, "label")
+  export let getSecondaryOptionValue = option =>
+    extractProperty(option, "value")
+  export let getSecondaryOptionColour = () => {}
+  export let getSecondaryOptionIcon = () => {}
+  export let quiet = false
+  export let autofocus
+  export let primaryOptions = []
+  export let secondaryOptions = []
+  export let searchTerm
+  export let showClearIcon = true
+
+  let primaryLabel
+  let secondaryLabel
+  const dispatch = createEventDispatcher()
+
+  $: secondaryFieldText = getSecondaryFieldText(
+    secondaryValue,
+    secondaryOptions,
+    secondaryPlaceholder
+  )
+  $: secondaryFieldIcon = getSecondaryFieldAttribute(
+    getSecondaryOptionIcon,
+    secondaryValue,
+    secondaryOptions
+  )
+  $: secondaryFieldColour = getSecondaryFieldAttribute(
+    getSecondaryOptionColour,
+    secondaryValue,
+    secondaryOptions
+  )
+
+  const getSecondaryFieldAttribute = (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) => getSecondaryOptionValue(option, idx) === value
+    )
+
+    return index !== -1 ? getAttribute(options[index], index) : null
+  }
+
+  const getSecondaryFieldText = (value, options, placeholder) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      return placeholder || "Choose an option"
+    }
+
+    return getSecondaryFieldAttribute(getSecondaryOptionLabel, value, options)
+  }
+
+  const onPickPrimary = e => {
+    primaryLabel = e?.detail?.label || null
+    primaryValue = e?.detail?.value || null
+    dispatch("pickprimary", e?.detail?.value || {})
+  }
+
+  const onPickSecondary = e => {
+    secondaryValue = e.detail
+    dispatch("picksecondary", e.detail)
+  }
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const updateSearchTerm = e => {
+    searchTerm = e.detail
+  }
+</script>
+
+<Field {label} {labelPosition} {error}>
+  <PickerDropdown
+    {searchTerm}
+    {autocomplete}
+    {error}
+    {disabled}
+    {readonly}
+    {placeholder}
+    {inputType}
+    {quiet}
+    {autofocus}
+    {primaryOptions}
+    {secondaryOptions}
+    {getSecondaryOptionLabel}
+    {getSecondaryOptionValue}
+    {getSecondaryOptionIcon}
+    {getSecondaryOptionColour}
+    {secondaryFieldText}
+    {secondaryFieldIcon}
+    {secondaryFieldColour}
+    {primaryValue}
+    {secondaryValue}
+    {primaryLabel}
+    {secondaryLabel}
+    {showClearIcon}
+    on:pickprimary={onPickPrimary}
+    on:picksecondary={onPickSecondary}
+    on:search={updateSearchTerm}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+    on:closed
+  />
+</Field>

package/src/Form/RadioGroup.svelte

@@ -0,0 +1,42 @@
+<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")
+  export let getOptionTitle = option => extractProperty(option, "label")
+
+  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}
+    {getOptionTitle}
+    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

@@ -0,0 +1,67 @@
+<script>
+  import Field from "./Field.svelte"
+  import Select from "./Core/Select.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  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 useOptionIconImage = false
+  export let getOptionColour = option => option?.colour
+  export let isOptionEnabled
+  export let quiet = false
+  export let autoWidth = false
+  export let sort = false
+  export let tooltip = ""
+  export let autocomplete = false
+  export let customPopoverHeight
+  export let align
+  export let footer = null
+
+  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} {tooltip}>
+  <Select
+    {quiet}
+    {error}
+    {disabled}
+    {readonly}
+    {value}
+    {options}
+    {placeholder}
+    {autoWidth}
+    {sort}
+    {align}
+    {footer}
+    {getOptionLabel}
+    {getOptionValue}
+    {getOptionIcon}
+    {getOptionColour}
+    {useOptionIconImage}
+    {isOptionEnabled}
+    {autocomplete}
+    {customPopoverHeight}
+    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>