@budibase/bbui 0.0.1

package/src/Form/Core/Checkbox.svelte

@@ -0,0 +1,69 @@
+<script>
+  import "@spectrum-css/checkbox/dist/index-vars.css"
+  import "@spectrum-css/fieldgroup/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+
+  export let value = false
+  export let error = null
+  export let id = null
+  export let text = null
+  export let disabled = false
+  export let size
+
+  const dispatch = createEventDispatcher()
+  const onChange = event => {
+    dispatch("change", event.target.checked)
+  }
+
+  $: sizeClass = `spectrum-Checkbox--size${size || "M"}`
+</script>
+
+<label
+  class="spectrum-Checkbox spectrum-Checkbox--emphasized {sizeClass}"
+  class:is-invalid={!!error}
+  class:checked={value}
+>
+  <input
+    checked={value}
+    {disabled}
+    on:change={onChange}
+    type="checkbox"
+    class="spectrum-Checkbox-input"
+    {id}
+  />
+  <span class="spectrum-Checkbox-box">
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Checkmark100" />
+    </svg>
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-Dash100 spectrum-Checkbox-partialCheckmark"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Dash100" />
+    </svg>
+  </span>
+  {#if text}
+    <span class="spectrum-Checkbox-label">{text}</span>
+  {/if}
+</label>
+
+<style>
+  .spectrum-Checkbox--sizeL .spectrum-Checkbox-checkmark {
+    transform: scale(1.1);
+    left: 55%;
+    top: 55%;
+  }
+  .spectrum-Checkbox--sizeXL .spectrum-Checkbox-checkmark {
+    transform: scale(1.2);
+    left: 60%;
+    top: 60%;
+  }
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/CheckboxGroup.svelte

@@ -0,0 +1,68 @@
+<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 = []
+  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 => {
+    let tempValue = value
+    let isChecked = e.target.checked
+    if (!tempValue.includes(e.target.value) && isChecked) {
+      tempValue.push(e.target.value)
+    }
+    value = tempValue
+    dispatch(
+      "change",
+      tempValue.filter(val => val !== e.target.value || isChecked)
+    )
+  }
+</script>
+
+<div class={`spectrum-FieldGroup spectrum-FieldGroup--${direction}`}>
+  {#if options && Array.isArray(options)}
+    {#each options as option}
+      <div
+        title={getOptionLabel(option)}
+        class="spectrum-Checkbox spectrum-FieldGroup-item"
+        class:is-invalid={!!error}
+      >
+        <label
+          class="spectrum-Checkbox spectrum-Checkbox--sizeM spectrum-FieldGroup-item"
+        >
+          <input
+            on:change={onChange}
+            value={getOptionValue(option)}
+            type="checkbox"
+            class="spectrum-Checkbox-input"
+            {disabled}
+            checked={value.includes(getOptionValue(option))}
+          />
+          <span class="spectrum-Checkbox-box">
+            <svg
+              class="spectrum-Icon spectrum-UIIcon-Checkmark100 spectrum-Checkbox-checkmark"
+              focusable="false"
+              aria-hidden="true"
+            >
+              <use xlink:href="#spectrum-css-icon-Checkmark100" />
+            </svg>
+          </span>
+          <span class="spectrum-Checkbox-label">{getOptionLabel(option)}</span>
+        </label>
+      </div>
+    {/each}
+  {/if}
+</div>
+
+<style>
+  .spectrum-Checkbox-input {
+    opacity: 0;
+  }
+</style>

package/src/Form/Core/Combobox.svelte

@@ -0,0 +1,142 @@
+<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"
+
+  export let value = null
+  export let id = null
+  export let placeholder = "Choose an option or type"
+  export let disabled = false
+  export let readonly = false
+  export let error = null
+  export let options = []
+  export let getOptionLabel = option => option
+  export let getOptionValue = option => option
+
+  const dispatch = createEventDispatcher()
+  let open = false
+  let focus = false
+
+  const selectOption = value => {
+    dispatch("change", value)
+    open = false
+  }
+
+  const onType = e => {
+    const value = e.target.value
+    dispatch("type", value)
+    selectOption(value)
+  }
+
+  const onPick = value => {
+    dispatch("pick", value)
+    selectOption(value)
+  }
+</script>
+
+<div
+  class="spectrum-InputGroup"
+  class:is-focused={open || focus}
+  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={open || focus}
+  >
+    <input
+      {id}
+      type="text"
+      on:focus={() => (focus = true)}
+      on:blur={() => {
+        focus = false
+        dispatch("blur")
+      }}
+      on:change={onType}
+      value={value || ""}
+      placeholder={placeholder || ""}
+      {disabled}
+      {readonly}
+      class="spectrum-Textfield-input spectrum-InputGroup-input"
+    />
+  </div>
+  <button
+    class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+    tabindex="-1"
+    aria-haspopup="true"
+    {disabled}
+    on:click={() => (open = true)}
+  >
+    <svg
+      class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon spectrum-InputGroup-icon"
+      focusable="false"
+      aria-hidden="true"
+    >
+      <use xlink:href="#spectrum-css-icon-Chevron100" />
+    </svg>
+  </button>
+  {#if open}
+    <div class="overlay" on:mousedown|self={() => (open = false)} />
+    <div
+      transition:fly={{ y: -20, duration: 200 }}
+      class="spectrum-Popover spectrum-Popover--bottom is-open"
+    >
+      <ul class="spectrum-Menu" role="listbox">
+        {#if options && Array.isArray(options)}
+          {#each options as option}
+            <li
+              class="spectrum-Menu-item"
+              class:is-selected={getOptionValue(option) === value}
+              role="option"
+              aria-selected="true"
+              tabindex="0"
+              on:click={() => onPick(getOptionValue(option))}
+            >
+              <span class="spectrum-Menu-itemLabel"
+                >{getOptionLabel(option)}</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-InputGroup {
+    min-width: 0;
+    width: 100%;
+  }
+  .spectrum-Textfield {
+    width: 100%;
+  }
+  .spectrum-Textfield-input {
+    width: 0;
+  }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+  }
+  .spectrum-Popover {
+    max-height: 240px;
+    width: 100%;
+    z-index: 999;
+    top: 100%;
+  }
+</style>

package/src/Form/Core/DatePicker.svelte

@@ -0,0 +1,265 @@
+<script>
+  import Flatpickr from "svelte-flatpickr"
+  import "flatpickr/dist/flatpickr.css"
+  import "@spectrum-css/inputgroup/dist/index-vars.css"
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import "@spectrum-css/picker/dist/index-vars.css"
+  import { createEventDispatcher } from "svelte"
+  import { uuid } from "../../helpers"
+
+  export let id = null
+  export let disabled = false
+  export let error = null
+  export let enableTime = true
+  export let value = null
+  export let placeholder = null
+  export let appendTo = undefined
+  export let timeOnly = false
+  export let ignoreTimezones = false
+  export let time24hr = false
+  export let range = false
+  const dispatch = createEventDispatcher()
+  const flatpickrId = `${uuid()}-wrapper`
+  let open = false
+  let flatpickr, flatpickrOptions
+
+  // Another classic flatpickr issue. Errors were randomly being thrown due to
+  // flatpickr internal code. Making sure that "destroy" is a valid function
+  // fixes it. The sooner we remove flatpickr the better.
+  $: {
+    if (flatpickr && !flatpickr.destroy) {
+      flatpickr.destroy = () => {}
+    }
+  }
+
+  const resolveTimeStamp = timestamp => {
+    let maskedDate = new Date(`0-${timestamp}`)
+
+    if (maskedDate instanceof Date && !isNaN(maskedDate.getTime())) {
+      return maskedDate
+    } else {
+      return null
+    }
+  }
+
+  $: flatpickrOptions = {
+    element: `#${flatpickrId}`,
+    enableTime: timeOnly || enableTime || false,
+    noCalendar: timeOnly || false,
+    altInput: true,
+    time_24hr: time24hr || false,
+    altFormat: timeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
+    wrap: true,
+    mode: range ? "range" : "single",
+    appendTo,
+    disableMobile: "true",
+    onReady: () => {
+      let timestamp = resolveTimeStamp(value)
+      if (timeOnly && timestamp) {
+        dispatch("change", timestamp.toISOString())
+      }
+    },
+  }
+
+  $: redrawOptions = {
+    timeOnly,
+    enableTime,
+    time24hr,
+  }
+
+  const handleChange = event => {
+    const [dates] = event.detail
+    const noTimezone = enableTime && !timeOnly && ignoreTimezones
+    let newValue = dates[0]
+    if (newValue) {
+      newValue = newValue.toISOString()
+    }
+    // If time only set date component to 2000-01-01
+    if (timeOnly) {
+      newValue = `2000-01-01T${newValue.split("T")[1]}`
+    }
+
+    // For date-only fields, construct a manual timestamp string without a time
+    // or time zone
+    else if (!enableTime) {
+      const year = dates[0].getFullYear()
+      const month = `${dates[0].getMonth() + 1}`.padStart(2, "0")
+      const day = `${dates[0].getDate()}`.padStart(2, "0")
+      newValue = `${year}-${month}-${day}T00:00:00.000`
+    }
+
+    // For non-timezone-aware fields, create an ISO 8601 timestamp of the exact
+    // time picked, without timezone
+    else if (noTimezone) {
+      const offset = dates[0].getTimezoneOffset() * 60000
+      newValue = new Date(dates[0].getTime() - offset)
+        .toISOString()
+        .slice(0, -1)
+    }
+
+    if (range) {
+      dispatch("change", event.detail)
+    } else {
+      dispatch("change", newValue)
+    }
+  }
+
+  const clearDateOnBackspace = event => {
+    if (["Backspace", "Clear", "Delete"].includes(event.key)) {
+      dispatch("change", "")
+      flatpickr.close()
+    }
+  }
+
+  const onOpen = () => {
+    open = true
+    document.addEventListener("keyup", clearDateOnBackspace)
+  }
+
+  const onClose = () => {
+    open = false
+    document.removeEventListener("keyup", clearDateOnBackspace)
+
+    // Manually blur all input fields since flatpickr creates a second
+    // duplicate input field.
+    // We need to blur both because the focus styling does not get properly
+    // applied.
+    const els = document.querySelectorAll(`#${flatpickrId} input`)
+    els.forEach(el => el.blur())
+  }
+
+  const parseDate = val => {
+    if (!val) {
+      return null
+    }
+    let date
+    let time
+
+    // it is a string like 00:00:00, just time
+    let ts = resolveTimeStamp(val)
+
+    if (timeOnly && ts) {
+      date = ts
+    } else if (val instanceof Date) {
+      // Use real date obj if already parsed
+      date = val
+    } else if (isNaN(val)) {
+      // Treat as date string of some sort
+      date = new Date(val)
+    } else {
+      // Treat as numerical timestamp
+      date = new Date(parseInt(val))
+    }
+
+    time = date.getTime()
+    if (isNaN(time)) {
+      return null
+    }
+
+    // By rounding to the nearest second we avoid locking up in an endless
+    // loop in the builder, caused by potentially enriching {{ now }} to every
+    // millisecond.
+    return new Date(Math.floor(time / 1000) * 1000)
+  }
+</script>
+
+{#key redrawOptions}
+  <Flatpickr
+    bind:flatpickr
+    value={range ? value : parseDate(value)}
+    on:open={onOpen}
+    on:close={onClose}
+    options={flatpickrOptions}
+    on:change={handleChange}
+    element={`#${flatpickrId}`}
+  >
+    <div
+      id={flatpickrId}
+      class:is-disabled={disabled}
+      class:is-invalid={!!error}
+      class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+      class:is-focused={open}
+      aria-readonly="false"
+      aria-required="false"
+      aria-haspopup="true"
+    >
+      <div
+        on:click={flatpickr?.open}
+        class="spectrum-Textfield spectrum-InputGroup-textfield"
+        class:is-disabled={disabled}
+        class:is-invalid={!!error}
+      >
+        {#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
+          {disabled}
+          data-input
+          type="text"
+          class="spectrum-Textfield-input spectrum-InputGroup-input"
+          class:is-disabled={disabled}
+          {placeholder}
+          {id}
+          {value}
+        />
+      </div>
+      <button
+        type="button"
+        class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
+        tabindex="-1"
+        class:is-disabled={disabled}
+        class:is-invalid={!!error}
+        on:click={flatpickr?.open}
+      >
+        <svg
+          class="spectrum-Icon spectrum-Icon--sizeM"
+          focusable="false"
+          aria-hidden="true"
+          aria-label="Calendar"
+        >
+          <use xlink:href="#spectrum-icon-18-Calendar" />
+        </svg>
+      </button>
+    </div>
+  </Flatpickr>
+{/key}
+{#if open}
+  <div class="overlay" on:mousedown|self={flatpickr?.close} />
+{/if}
+
+<style>
+  .spectrum-Textfield-input {
+    pointer-events: none;
+  }
+  .spectrum-Textfield:not(.is-disabled):hover {
+    cursor: pointer;
+  }
+  .flatpickr {
+    width: 100%;
+    overflow: hidden;
+  }
+  .flatpickr .spectrum-Textfield {
+    width: 100%;
+  }
+  .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 999;
+    max-height: 100%;
+  }
+  :global(.flatpickr-calendar) {
+    font-family: var(--font-sans);
+  }
+  .is-disabled {
+    pointer-events: none !important;
+  }
+</style>