@budibase/bbui 1.58.13 → 2.0.0

package/src/Form/PickerDropdown.svelte

@@ -0,0 +1,132 @@
+<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 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}
+    {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,95 +1,55 @@
 <script>
-  import Icon from "../Icons/Icon.svelte";
-  import Label from "../Styleguide/Label.svelte";
+  import Field from "./Field.svelte"
+  import Select from "./Core/Select.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  export let value = "";
-  export let name = undefined;
-  export let label = undefined;
-  export let thin = false;
-  export let extraThin = false;
-  export let secondary = false;
-  export let outline = false;
-  export let disabled = false;
-</script>
-
-<style>
-  select {
-    font-family: var(--font-sans);
-    display: block !important;
-    width: 100% !important;
-    border-radius: var(--border-radius-s);
-    border: none;
-    text-align: left;
-    color: var(--ink);
-    font-size: var(--font-size-s);
-    padding: var(--spacing-m) 2rem var(--spacing-m) var(--spacing-m) !important;
-    appearance: none !important;
-    -webkit-appearance: none !important;
-    -moz-appearance: none !important;
-    align-items: center;
-    white-space: pre;
-    outline: none;
-    border: var(--border-transparent);
-    background-color: var(--background);
-  }
-  select.thin {
-    padding: var(--spacing-m);
-    font-size: var(--font-size-xs);
-  }
-  select.extraThin {
-    padding: var(--spacing-s) 2rem var(--spacing-s) var(--spacing-m) !important;
-    font-size: var(--font-size-xs);
-  }
-  select.secondary {
-    background: var(--grey-2);
-  }
-  select.outline {
-    border: var(--border-light-2);
-  }
-  select:focus {
-    border: var(--border-blue);
-  }
-  select:disabled {
-    background: var(--grey-4);
-    color: var(--grey-6);
-  }
+  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 = ""
 
-  .relative {
-    position: relative !important;
-    display: block;
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
 
-  .pointer {
-    right: 0 !important;
-    top: 0 !important;
-    bottom: 0 !important;
-    position: absolute !important;
-    pointer-events: none !important;
-    padding-left: 0.5rem !important;
-    align-items: center !important;
-    display: flex !important;
-    color: var(--ink);
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
   }
-</style>
+</script>
 
-<div>
-  {#if label}
-    <Label extraSmall grey forAttr={name}>{label}</Label>
-  {/if}
-  <div class="relative">
-    <select
-      {name}
-      class:thin
-      class:extraThin
-      class:secondary
-      class:outline
-      {disabled}
-      on:change
-      bind:value>
-      <slot />
-    </select>
-    <div class="pointer">
-      <Icon name="arrowdown" />
-    </div>
-  </div>
-</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

@@ -1,99 +1,24 @@
 <script>
-  import Label from "../Styleguide/Label.svelte"
+  import Field from "./Field.svelte"
+  import Slider from "./Core/Slider.svelte"
+  import { createEventDispatcher } from "svelte"
 
-  export let label
+  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 value
-  export let showValue = false
-  export let showRange = false
-</script>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    align-items: center;
-    gap: var(--spacing-s);
-  }
+  export let disabled = false
+  export let error = null
 
-  span {
-    flex: 0 0 auto;
-    color: var(--grey-5);
-    font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
-    font-weight: 400;
-  }
-
-  input[type="range"] {
-    width: 100%;
-    margin: 0;
-    background-color: transparent;
-    -webkit-appearance: none;
-    flex: 1 1 auto;
-  }
-  input[type="range"]:focus {
-    outline: none;
+  const dispatch = createEventDispatcher()
+  const onChange = e => {
+    value = e.detail
+    dispatch("change", e.detail)
   }
-  input[type="range"]::-webkit-slider-runnable-track {
-    background: var(--grey-4);
-    border-radius: 9px;
-    width: 100%;
-    height: 18px;
-    cursor: pointer;
-    padding: 0 2px;
-  }
-  input[type="range"]::-webkit-slider-thumb {
-    width: 14px;
-    height: 14px;
-    background: white;
-    border-radius: 100%;
-    cursor: pointer;
-    -webkit-appearance: none;
-    border: none;
-    margin-top: 2px;
-  }
-  input[type="range"]::-moz-range-track {
-    background: var(--grey-4);
-    border-radius: 9px;
-    width: 100%;
-    height: 18px;
-    cursor: pointer;
-    padding: 0 2px;
-  }
-  input[type="range"]::-moz-range-thumb {
-    width: 14px;
-    height: 14px;
-    background: white;
-    border-radius: 100%;
-    cursor: pointer;
-    border: none;
-  }
-</style>
+</script>
 
-<div>
-  {#if label}
-    <Label extraSmall grey>
-      {label}
-      {#if showValue && value != null}
-        ({value})
-      {/if}
-    </Label>
-  {/if}
-  <div class="container">
-    {#if showRange && min != null}
-      <span>{min}</span>
-    {/if}
-    <input
-      type="range"
-      bind:value
-      {min}
-      {max}
-      {step} />
-    {#if showRange && max != null}
-      <span>{max}</span>
-    {/if}
-  </div>
-</div>
+<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>