@budibase/bbui 2.2.26 → 2.2.27

package/src/FancyForm/FancyField.svelte

@@ -0,0 +1,126 @@
+<script>
+  import Icon from "../Icon/Icon.svelte"
+  import { getContext, onMount } from "svelte"
+  import { slide } from "svelte/transition"
+
+  export let disabled = false
+  export let error = null
+  export let focused = false
+  export let clickable = false
+  export let validate
+  export let value
+  export let ref
+  export let autoHeight
+
+  const formContext = getContext("fancy-form")
+  const id = Math.random()
+  const API = {
+    validate: () => {
+      if (validate) {
+        error = validate(value)
+      }
+      return !error
+    },
+  }
+
+  onMount(() => {
+    if (formContext) {
+      formContext.registerField(id, API)
+    }
+    return () => {
+      if (formContext) {
+        formContext.unregisterField(id)
+      }
+    }
+  })
+</script>
+
+<div
+  bind:this={ref}
+  class="fancy-field"
+  class:error
+  class:disabled
+  class:focused
+  class:clickable
+  class:auto-height={autoHeight}
+>
+  <div class="content" on:click>
+    <div class="field">
+      <slot />
+    </div>
+    {#if error}
+      <div class="error-icon">
+        <Icon name="Alert" />
+      </div>
+    {/if}
+  </div>
+  {#if error}
+    <div transition:slide|local={{ duration: 130 }} class="error-message">
+      {error}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .fancy-field {
+    max-width: 400px;
+    background: var(--spectrum-global-color-gray-75);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: 4px;
+    box-sizing: border-box;
+    transition: border-color 130ms ease-out, background 130ms ease-out,
+      background 130ms ease-out;
+    color: var(--spectrum-global-color-gray-800);
+  }
+  .fancy-field:hover {
+    border-color: var(--spectrum-global-color-gray-400);
+  }
+  .fancy-field.clickable:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+  .fancy-field.focused {
+    border-color: var(--spectrum-global-color-blue-400);
+  }
+  .fancy-field.error {
+    border-color: var(--spectrum-global-color-red-400);
+  }
+  .fancy-field.disabled {
+    background: var(--spectrum-global-color-gray-200);
+    color: var(--spectrum-global-color-gray-400);
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    pointer-events: none;
+  }
+  .content {
+    position: relative;
+    height: 64px;
+    padding: 0 16px;
+  }
+  .fancy-field.auto-height .content {
+    height: auto;
+  }
+  .content,
+  .field {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 16px;
+  }
+  .field {
+    flex: 1 1 auto;
+  }
+  .error-message {
+    background: var(--spectrum-global-color-red-400);
+    color: white;
+    font-size: 14px;
+    padding: 6px 16px;
+    font-weight: 500;
+  }
+  .error-icon {
+    flex: 0 0 auto;
+  }
+  .error-icon :global(.spectrum-Icon) {
+    fill: var(--spectrum-global-color-red-400);
+  }
+</style>

package/src/FancyForm/FancyFieldLabel.svelte

@@ -0,0 +1,25 @@
+<script>
+  export let placeholder = true
+</script>
+
+<div class:placeholder>
+  <slot />
+</div>
+
+<style>
+  div {
+    font-size: 14px;
+    line-height: 15px;
+    font-weight: 500;
+    position: absolute;
+    top: 10px;
+    color: var(--spectrum-global-color-gray-600);
+    transition: font-size 130ms ease-out, top 130ms ease-out,
+      transform 130ms ease-out;
+  }
+  div.placeholder {
+    top: 50%;
+    font-size: 15px;
+    transform: translateY(-50%);
+  }
+</style>

package/src/FancyForm/FancyForm.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { setContext } from "svelte"
+
+  let fields = {}
+
+  setContext("fancy-form", {
+    registerField: (id, api) => {
+      fields = { ...fields, [id]: api }
+    },
+    unregisterField: id => {
+      delete fields[id]
+      fields = fields
+    },
+  })
+
+  export const validate = () => {
+    let valid = true
+    Object.values(fields).forEach(api => {
+      if (!api.validate()) {
+        valid = false
+      }
+    })
+    return valid
+  }
+</script>
+
+<div class="fancy-form">
+  <slot />
+</div>
+
+<style>
+  .fancy-form :global(.fancy-field:not(:first-of-type)) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .fancy-form :global(.fancy-field:not(:last-of-type)) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+</style>

package/src/FancyForm/FancyInput.svelte

@@ -0,0 +1,77 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+  import { fade } from "svelte/transition"
+
+  export let label
+  export let value
+  export let type = "text"
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let suffix = null
+
+  const dispatch = createEventDispatcher()
+
+  let focused = false
+  $: placeholder = !focused && !value
+
+  const onChange = e => {
+    const newValue = e.target.value
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+  }
+</script>
+
+<FancyField {error} {value} {validate} {disabled} {focused}>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+  <input
+    {disabled}
+    value={value || ""}
+    type={type || "text"}
+    on:input={onChange}
+    on:focus={() => (focused = true)}
+    on:blur={() => (focused = false)}
+    class:placeholder
+  />
+  {#if suffix && !placeholder}
+    <div in:fade|local={{ duration: 130 }} class="suffix">{suffix}</div>
+  {/if}
+</FancyField>
+
+<style>
+  input {
+    width: 100%;
+    transition: transform 130ms ease-out;
+    transform: translateY(9px);
+    background: transparent;
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+    color: var(--spectrum-global-color-gray-900);
+    outline: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  input.placeholder {
+    transform: translateY(0);
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }
+  .suffix {
+    color: var(--spectrum-global-color-gray-600);
+    transform: translateY(9px);
+    font-size: 15px;
+    line-height: 17px;
+    font-family: var(--font-sans);
+  }
+</style>

package/src/FancyForm/FancySelect.svelte

@@ -0,0 +1,147 @@
+<script>
+  import { createEventDispatcher } from "svelte"
+  import FancyField from "./FancyField.svelte"
+  import Icon from "../Icon/Icon.svelte"
+  import Popover from "../Popover/Popover.svelte"
+  import FancyFieldLabel from "./FancyFieldLabel.svelte"
+
+  export let label
+  export let value
+  export let disabled = false
+  export let error = null
+  export let validate = null
+  export let options = []
+  export let getOptionLabel = option => extractProperty(option, "label")
+  export let getOptionValue = option => extractProperty(option, "value")
+
+  const dispatch = createEventDispatcher()
+
+  let open = false
+  let popover
+  let wrapper
+
+  $: placeholder = !value
+  $: selectedLabel = getSelectedLabel(value)
+
+  const extractProperty = (value, property) => {
+    if (value && typeof value === "object") {
+      return value[property]
+    }
+    return value
+  }
+
+  const onChange = newValue => {
+    dispatch("change", newValue)
+    value = newValue
+    if (validate) {
+      error = validate(newValue)
+    }
+    open = false
+  }
+
+  const getSelectedLabel = value => {
+    if (!value || !options?.length) {
+      return ""
+    }
+    const selectedOption = options.find(x => getOptionValue(x) === value)
+    if (!selectedOption) {
+      return value
+    }
+    return getOptionLabel(selectedOption)
+  }
+</script>
+
+<FancyField
+  bind:ref={wrapper}
+  {error}
+  {value}
+  {validate}
+  {disabled}
+  clickable
+  on:click={() => (open = true)}
+>
+  {#if label}
+    <FancyFieldLabel {placeholder}>{label}</FancyFieldLabel>
+  {/if}
+
+  <div class="value" class:placeholder>
+    {selectedLabel || ""}
+  </div>
+
+  <div class="arrow">
+    <Icon name="ChevronDown" />
+  </div>
+</FancyField>
+
+<Popover
+  anchor={wrapper}
+  align="left"
+  portalTarget={document.documentElement}
+  bind:this={popover}
+  {open}
+  on:close={() => (open = false)}
+  useAnchorWidth={true}
+  maxWidth={null}
+>
+  <div class="popover-content">
+    {#if options.length}
+      {#each options as option, idx}
+        <div
+          class="popover-option"
+          tabindex="0"
+          on:click={() => onChange(getOptionValue(option, idx))}
+        >
+          <span class="option-text">
+            {getOptionLabel(option, idx)}
+          </span>
+          {#if value === getOptionValue(option, idx)}
+            <Icon name="Checkmark" />
+          {/if}
+        </div>
+      {/each}
+    {/if}
+  </div>
+</Popover>
+
+<style>
+  .value {
+    display: block;
+    flex: 1 1 auto;
+    font-size: 15px;
+    line-height: 17px;
+    color: var(--spectrum-global-color-gray-900);
+    transition: transform 130ms ease-out, opacity 130ms ease-out;
+    opacity: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+    transform: translateY(9px);
+  }
+  .value.placeholder {
+    transform: translateY(0);
+    opacity: 0;
+    pointer-events: none;
+    margin-top: 0;
+  }
+  .popover-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    padding: 7px 0;
+  }
+  .popover-option {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 7px 16px;
+    transition: background 130ms ease-out;
+    font-size: 15px;
+  }
+  .popover-option:hover {
+    background: var(--spectrum-global-color-gray-200);
+    cursor: pointer;
+  }
+</style>

package/src/FancyForm/index.js

@@ -0,0 +1,6 @@
+export { default as FancyInput } from "./FancyInput.svelte"
+export { default as FancyCheckbox } from "./FancyCheckbox.svelte"
+export { default as FancySelect } from "./FancySelect.svelte"
+export { default as FancyButton } from "./FancyButton.svelte"
+export { default as FancyForm } from "./FancyForm.svelte"
+export { default as FancyButtonRadio } from "./FancyButtonRadio.svelte"

package/src/Form/Core/DatePicker.svelte

@@ -257,7 +257,7 @@
     max-height: 100%;
   }
   :global(.flatpickr-calendar) {
-    font-family: "Source Sans Pro", sans-serif;
+    font-family: var(--font-sans);
   }
   .is-disabled {
     pointer-events: none !important;

package/src/Form/Core/Dropzone.svelte

@@ -15,6 +15,7 @@
   export let value = []
   export let id = null
   export let disabled = false
+  export let compact = false
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
   export let deleteAttachments = null
@@ -239,70 +240,72 @@
           bind:this={fileInput}
           on:change={handleFile}
         />
-        <svg
-          class="spectrum-IllustratedMessage-illustration"
-          width="125"
-          height="60"
-          viewBox="0 0 199 97.7"
-        >
-          <defs>
-            <style>
-              .cls-1,
-              .cls-2 {
-                fill: none;
-                stroke-linecap: round;
-                stroke-linejoin: round;
-              }
-              .cls-1 {
-                stroke-width: 3px;
-              }
-              .cls-2 {
-                stroke-width: 2px;
-              }
-            </style>
-          </defs>
-          <path
-            class="cls-1"
-            d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
-          />
-          <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
-          <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
-          <path
-            class="cls-1"
-            d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
-          />
-          <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
-          <path
-            class="cls-2"
-            d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
-          />
-          <path
-            class="cls-2"
-            d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
-          />
-          <path
-            class="cls-2"
-            d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
-          />
-          <path
-            class="cls-1"
-            d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
-          />
-          <rect
-            class="cls-1"
-            x="1.5"
-            y="34.5"
-            width="58"
-            height="39"
-            rx="2"
-            ry="2"
-          />
-        </svg>
-        <h2
-          class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
-        >
-          Drag and drop your file
-        </h2>
+        {#if !compact}
+          <svg
+            class="spectrum-IllustratedMessage-illustration"
+            width="125"
+            height="60"
+            viewBox="0 0 199 97.7"
+          >
+            <defs>
+              <style>
+                .cls-1,
+                .cls-2 {
+                  fill: none;
+                  stroke-linecap: round;
+                  stroke-linejoin: round;
+                }
+                .cls-1 {
+                  stroke-width: 3px;
+                }
+                .cls-2 {
+                  stroke-width: 2px;
+                }
+              </style>
+            </defs>
+            <path
+              class="cls-1"
+              d="M110.53,85.66,100.26,95.89a1.09,1.09,0,0,1-1.52,0L88.47,85.66"
+            />
+            <line class="cls-1" x1="99.5" y1="95.5" x2="99.5" y2="58.5" />
+            <path class="cls-1" d="M105.5,73.5h19a2,2,0,0,0,2-2v-43" />
+            <path
+              class="cls-1"
+              d="M126.5,22.5h-19a2,2,0,0,1-2-2V1.5h-31a2,2,0,0,0-2,2v68a2,2,0,0,0,2,2h19"
+            />
+            <line class="cls-1" x1="105.5" y1="1.5" x2="126.5" y2="22.5" />
+            <path
+              class="cls-2"
+              d="M47.93,50.49a5,5,0,1,0-4.83-5A4.93,4.93,0,0,0,47.93,50.49Z"
+            />
+            <path
+              class="cls-2"
+              d="M36.6,65.93,42.05,60A2.06,2.06,0,0,1,45,60l12.68,13.2"
+            />
+            <path
+              class="cls-2"
+              d="M3.14,73.23,22.42,53.76a1.65,1.65,0,0,1,2.38,0l19.05,19.7"
+            />
+            <path
+              class="cls-1"
+              d="M139.5,36.5H196A1.49,1.49,0,0,1,197.5,38V72A1.49,1.49,0,0,1,196,73.5H141A1.49,1.49,0,0,1,139.5,72V32A1.49,1.49,0,0,1,141,30.5H154a2.43,2.43,0,0,1,1.67.66l6,5.66"
+            />
+            <rect
+              class="cls-1"
+              x="1.5"
+              y="34.5"
+              width="58"
+              height="39"
+              rx="2"
+              ry="2"
+            />
+          </svg>
+          <h2
+            class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light spectrum-IllustratedMessage-heading"
+          >
+            Drag and drop your file
+          </h2>
+        {/if}
         {#if !disabled}
           <p
             class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
@@ -310,8 +313,10 @@
             <label for={fieldId} class="spectrum-Link">
               Select a file to upload
             </label>
-            <br />
-            from your computer
+            {#if !compact}
+              <br />
+              from your computer
+            {/if}
           </p>
           {#if fileTags.length}
             <Tags>