@budibase/bbui 1.1.0 → 1.1.3

package/src/Form/Core/Multiselect.svelte

@@ -0,0 +1,88 @@
+<script>
+  import Picker from "./Picker.svelte"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = []
+  export let id = null
+  export let placeholder = null
+  export let disabled = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let readonly = false
+  export let autocomplete = false
+  export let sort = false
+
+  const dispatch = createEventDispatcher()
+  $: selectedLookupMap = getSelectedLookupMap(value)
+  $: optionLookupMap = getOptionLookupMap(options)
+  $: fieldText = getFieldText(value, optionLookupMap, placeholder)
+  $: isOptionSelected = optionValue => selectedLookupMap[optionValue] === true
+  $: toggleOption = makeToggleOption(selectedLookupMap, value)
+
+  const getFieldText = (value, map, placeholder) => {
+    if (value?.length) {
+      if (!map) {
+        return ""
+      }
+      const vals = value.map(option => map[option] || option).join(", ")
+      return `(${value.length}) ${vals}`
+    } else {
+      return placeholder || "Choose some options"
+    }
+  }
+
+  const getSelectedLookupMap = value => {
+    let map = {}
+    if (value?.length) {
+      value.forEach(option => {
+        if (option) {
+          map[option] = true
+        }
+      })
+    }
+    return map
+  }
+
+  const getOptionLookupMap = options => {
+    let map = null
+    if (options?.length) {
+      map = {}
+      options.forEach((option, idx) => {
+        const optionValue = getOptionValue(option, idx)
+        if (optionValue != null) {
+          map[optionValue] = getOptionLabel(option, idx) || ""
+        }
+      })
+    }
+    return map
+  }
+
+  const makeToggleOption = (map, value) => {
+    return optionValue => {
+      if (map[optionValue]) {
+        const filtered = value.filter(option => option !== optionValue)
+        dispatch("change", filtered)
+      } else {
+        dispatch("change", [...value, optionValue])
+      }
+    }
+  }
+</script>
+
+<Picker
+  {id}
+  {error}
+  {disabled}
+  {readonly}
+  {fieldText}
+  {options}
+  isPlaceholder={!value?.length}
+  {autocomplete}
+  {isOptionSelected}
+  {getOptionLabel}
+  {getOptionValue}
+  onSelectOption={toggleOption}
+  {sort}
+/>

package/src/Form/Core/Picker.svelte

@@ -0,0 +1,256 @@
+<script>
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import "@spectrum-css/popover/dist/index-vars.css"
+  import "@spectrum-css/menu/dist/index-vars.css"
+  import { fly } from "svelte/transition"
+  import { createEventDispatcher } from "svelte"
+  import clickOutside from "../../Actions/click_outside"
+  import Search from "./Search.svelte"
+  import Icon from "../../Icon/Icon.svelte"
+  import StatusLight from "../../StatusLight/StatusLight.svelte"
+
+  export let id = null
+  export let disabled = false
+  export let error = null
+  export let fieldText = ""
+  export let fieldIcon = ""
+  export let fieldColour = ""
+  export let isPlaceholder = false
+  export let placeholderOption = null
+  export let options = []
+  export let isOptionSelected = () => false
+  export let onSelectOption = () => {}
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+  export let getOptionIcon = () => null
+  export let getOptionColour = () => null
+  export let open = false
+  export let readonly = false
+  export let quiet = false
+  export let autoWidth = false
+  export let autocomplete = false
+  export let sort = false
+
+  const dispatch = createEventDispatcher()
+  let searchTerm = null
+
+  $: sortedOptions = getSortedOptions(options, getOptionLabel, sort)
+  $: filteredOptions = getFilteredOptions(
+    sortedOptions,
+    searchTerm,
+    getOptionLabel
+  )
+
+  const onClick = () => {
+    dispatch("click")
+    if (readonly) {
+      return
+    }
+    searchTerm = null
+    open = !open
+  }
+
+  const getSortedOptions = (options, getLabel, sort) => {
+    if (!options?.length || !Array.isArray(options)) {
+      return []
+    }
+    if (!sort) {
+      return options
+    }
+    return options.sort((a, b) => {
+      const labelA = getLabel(a)
+      const labelB = getLabel(b)
+      return labelA > labelB ? 1 : -1
+    })
+  }
+
+  const getFilteredOptions = (options, term, getLabel) => {
+    if (autocomplete && term) {
+      const lowerCaseTerm = term.toLowerCase()
+      return options.filter(option => {
+        return `${getLabel(option)}`.toLowerCase().includes(lowerCaseTerm)
+      })
+    }
+    return options
+  }
+</script>
+
+<div use:clickOutside={() => (open = false)}>
+  <button
+    {id}
+    class="spectrum-Picker spectrum-Picker--sizeM"
+    class:spectrum-Picker--quiet={quiet}
+    {disabled}
+    class:is-invalid={!!error}
+    class:is-open={open}
+    aria-haspopup="listbox"
+    on:mousedown={onClick}
+  >
+    {#if fieldIcon}
+      <span class="option-icon">
+        <Icon name={fieldIcon} />
+      </span>
+    {/if}
+    <span
+      class="spectrum-Picker-label"
+      class:is-placeholder={isPlaceholder}
+      class:auto-width={autoWidth}
+    >
+      {fieldText}
+    </span>
+    {#if error}
+      <svg
+        class="spectrum-Icon spectrum-Icon--sizeM spectrum-Picker-validationIcon"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Folder"
+      >
+        <use xlink:href="#spectrum-icon-18-Alert" />
+      </svg>
+    {/if}
+    {#if fieldColour}
+      <span class="option-colour">
+        <StatusLight size="L" color={fieldColour} />
+      </span>
+    {/if}
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </button>
+  {#if open}
+    <div
+      transition:fly|local={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      class:auto-width={autoWidth}
+    >
+      {#if autocomplete}
+        <Search
+          value={searchTerm}
+          on:change={event => (searchTerm = event.detail)}
+          {disabled}
+          placeholder="Search"
+        />
+      {/if}
+      <ul class="spectrum-Menu" role="listbox">
+        {#if placeholderOption}
+          <li
+            class="spectrum-Menu-item placeholder"
+            class:is-selected={isPlaceholder}
+            role="option"
+            aria-selected="true"
+            tabindex="0"
+            on:click={() => onSelectOption(null)}
+          >
+            <span class="spectrum-Menu-itemLabel">{placeholderOption}</span>
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </li>
+        {/if}
+        {#if filteredOptions.length}
+          {#each filteredOptions as option, idx}
+            <li
+              class="spectrum-Menu-item"
+              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => onSelectOption(getOptionValue(option, idx))}
+            >
+              {#if getOptionIcon(option, idx)}
+                <span class="option-icon">
+                  <Icon name={getOptionIcon(option, idx)} />
+                </span>
+              {/if}
+              <span class="spectrum-Menu-itemLabel">
+                {getOptionLabel(option, idx)}
+              </span>
+              <svg
+                class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Menu-checkmark spectrum-Menu-itemIcon"
+                focusable="false"
+                aria-hidden="true"
+              >
+                <use xlink:href="#spectrum-css-icon-Checkmark100" />
+              </svg>
+              {#if getOptionColour(option, idx)}
+                <span class="option-colour">
+                  <StatusLight size="L" color={getOptionColour(option, idx)} />
+                </span>
+              {/if}
+            </li>
+          {/each}
+        {/if}
+      </ul>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .spectrum-Popover {
+    max-height: 240px;
+    z-index: 999;
+    top: 100%;
+  }
+  .spectrum-Popover:not(.auto-width) {
+    width: 100%;
+  }
+  .spectrum-Popover.auto-width :global(.spectrum-Menu-itemLabel) {
+    white-space: nowrap;
+  }
+  .spectrum-Picker {
+    width: 100%;
+    box-shadow: none;
+  }
+  .spectrum-Picker-label:not(.auto-width) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 0;
+  }
+  .placeholder {
+    font-style: italic;
+  }
+  .spectrum-Picker-label.auto-width.is-placeholder {
+    padding-right: 2px;
+  }
+
+  /* Icon and colour alignment */
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
+  }
+  .option-colour {
+    padding-left: 8px;
+  }
+  .option-icon {
+    padding-right: 8px;
+  }
+
+  .spectrum-Popover :global(.spectrum-Search) {
+    margin-top: -1px;
+    margin-left: -1px;
+    width: calc(100% + 2px);
+  }
+  .spectrum-Popover :global(.spectrum-Search input) {
+    height: auto;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-top: var(--spectrum-global-dimension-size-100);
+    padding-bottom: var(--spectrum-global-dimension-size-100);
+  }
+  .spectrum-Popover :global(.spectrum-Search .spectrum-ClearButton) {
+    right: 1px;
+    top: 2px;
+  }
+  .spectrum-Popover :global(.spectrum-Search .spectrum-Textfield-icon) {
+    top: 9px;
+  }
+</style>

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/RichTextField.svelte

@@ -0,0 +1,42 @@
+<script>
+  import MarkdownEditor from "../../Markdown/MarkdownEditor.svelte"
+
+  export let value = ""
+  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
+</script>
+
+<div class:error>
+  <MarkdownEditor
+    {value}
+    {placeholder}
+    {height}
+    {id}
+    {fullScreenOffset}
+    {disabled}
+    {easyMDEOptions}
+    on:change
+  />
+</div>
+
+<style>
+  .error :global(.EasyMDEContainer .editor-toolbar) {
+    border-top-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .CodeMirror) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-left-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+  .error :global(.EasyMDEContainer .editor-preview-side) {
+    border-bottom-color: var(--spectrum-semantic-negative-color-default);
+    border-right-color: var(--spectrum-semantic-negative-color-default);
+  }
+</style>

package/src/Form/Core/Search.svelte

@@ -0,0 +1,105 @@
+<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
+  export let quiet = false
+  export let inputRef
+
+  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:spectrum-Textfield--quiet={quiet}
+    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"
+      bind:this={inputRef}
+    />
+  </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,76 @@
+<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 getOptionColour = () => 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 = 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) => {
+    // Always use placeholder if no value
+    if (value == null || value === "") {
+      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}
+  {getOptionLabel}
+  {getOptionValue}
+  {getOptionIcon}
+  {getOptionColour}
+  {autocomplete}
+  {sort}
+  isPlaceholder={value == null || value === ""}
+  placeholderOption={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>