@budibase/bbui 1.3.0 → 1.3.1

package/src/Form/Core/InputDropdown.svelte

@@ -0,0 +1,228 @@
+<script>
+  import "@spectrum-css/inputgroup/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"
+
+  export let inputValue
+  export let dropdownValue
+  export let id = null
+  export let inputType = "text"
+  export let placeholder = "Choose an option or type"
+  export let disabled = false
+  export let readonly = false
+  export let updateOnChange = true
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  export let isOptionSelected = () => false
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  let focus = false
+
+  $: fieldText = getFieldText(dropdownValue, options, placeholder)
+
+  const getFieldText = (dropdownValue, options, placeholder) => {
+    // Always use placeholder if no value
+    if (dropdownValue == null || dropdownValue === "") {
+      return placeholder || "Choose an option or type"
+    }
+
+    // Wait for options to load if there is a value but no options
+    if (!options?.length) {
+      return ""
+    }
+
+    // Render the label if the selected option is found, otherwise raw value
+    const selected = options.find(
+      option => getOptionValue(option) === dropdownValue
+    )
+    return selected ? getOptionLabel(selected) : dropdownValue
+  }
+
+  const updateValue = newValue => {
+    if (readonly) {
+      return
+    }
+    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)
+    }
+  }
+
+  const onClick = () => {
+    dispatch("click")
+    if (readonly) {
+      return
+    }
+    open = true
+  }
+
+  const onPick = newValue => {
+    dispatch("pick", newValue)
+    open = false
+  }
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+</script>
+
+<div
+  class="spectrum-InputGroup"
+  class:is-invalid={!!error}
+  class:is-disabled={disabled}
+>
+  <div
+    class="spectrum-Textfield spectrum-InputGroup-textfield"
+    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
+      {id}
+      on:click
+      on:blur
+      on:focus
+      on:input
+      on:keyup
+      on:blur={onBlur}
+      on:focus={onFocus}
+      on:input={onInput}
+      on:keyup={updateValueOnEnter}
+      value={inputValue || ""}
+      placeholder={placeholder || ""}
+      {disabled}
+      {readonly}
+      {inputType}
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+    />
+  </div>
+  <div style="width: 30%">
+    <button
+      {id}
+      class="spectrum-Picker spectrum-Picker--sizeM override-borders"
+      {disabled}
+      class:is-open={open}
+      aria-haspopup="listbox"
+      on:mousedown={onClick}
+    >
+      <span class="spectrum-Picker-label">
+        <div>
+          {fieldText}
+        </div></span
+      >
+      <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
+        use:clickOutside={() => (open = false)}
+        transition:fly|local={{ y: -20, duration: 200 }}
+        class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
+      >
+        <ul class="spectrum-Menu" role="listbox">
+          {#each options as option, idx}
+            <li
+              class="spectrum-Menu-item"
+              class:is-selected={isOptionSelected(getOptionValue(option, idx))}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => onPick(getOptionValue(option, idx))}
+            >
+              <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>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .spectrum-InputGroup {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .spectrum-InputGroup-input {
+    border-right-width: 1px;
+  }
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  .spectrum-Textfield-input {
+    width: 0;
+  }
+
+  .override-borders {
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+  }
+  .spectrum-Popover {
+    max-height: 240px;
+    z-index: 999;
+    top: 100%;
+  }
+</style>

package/src/Form/Core/Multiselect.svelte

@@ -0,0 +1,90 @@
+<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
+  export let autoWidth = 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 (Array.isArray(value) && value.length > 0) {
+      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 (Array.isArray(value) && value.length > 0) {
+      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}
+  {autoWidth}
+/>

package/src/Form/Core/Picker.svelte

@@ -0,0 +1,259 @@
+<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-extra">
+        <Icon name={fieldIcon} />
+      </span>
+    {/if}
+    {#if fieldColour}
+      <span class="option-extra">
+        <StatusLight square color={fieldColour} />
+      </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}
+    <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-extra">
+                  <Icon name={getOptionIcon(option, idx)} />
+                </span>
+              {/if}
+              {#if getOptionColour(option, idx)}
+                <span class="option-extra">
+                  <StatusLight square color={getOptionColour(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>
+            </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.auto-width {
+    margin-right: var(--spacing-xs);
+  }
+  .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;
+  }
+  .auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
+
+  /* Icon and colour alignment */
+  .spectrum-Menu-checkmark {
+    align-self: center;
+    margin-top: 0;
+  }
+  .option-extra {
+    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>