@budibase/bbui 1.4.1 → 1.4.2

package/src/Form/Input.svelte

@@ -1,50 +1,45 @@
 <script>
-  export let name,
-    label,
-    type,
-    placeholder,
-    validator = () => {};
-</script>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    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
+  export let autofocus
 
-  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}
+    {autofocus}
+    on:change={onChange}
+    on:click
+    on:input
+    on:blur
+    on:focus
+    on:keyup
+  />
+</Field>

package/src/Form/InputDropdown.svelte

@@ -0,0 +1,55 @@
+<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 dataCy
+  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
+    {dataCy}
+    {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,40 @@
+<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
+  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}
+    on:change={onChange}
+    on:click
+  />
+</Field>

package/src/Form/PickerDropdown.svelte

@@ -0,0 +1,134 @@
+<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 updateOnChange = true
+  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 dataCy
+  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}
+    {dataCy}
+    {updateOnChange}
+    {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
+  />
+</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

@@ -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>