@budibase/bbui 3.3.6 → 3.4.0

package/src/Form/Core/TextField.svelte

@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount, tick } from "svelte"
 
   export let value = null
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let id = null
   export let readonly = false
   export let updateOnChange = true
   export let quiet = false
-  export let align
+  export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus = false
-  export let autocomplete = null
+  export let autocomplete: boolean | undefined
 
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: any
   let focus = false
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly || disabled) {
       return
     }
@@ -37,7 +37,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly || disabled) {
       return
     }
@@ -45,14 +45,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange || disabled) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const updateValueOnEnter = event => {
+  const updateValueOnEnter = (event: any) => {
     if (readonly || disabled) {
       return
     }
@@ -61,13 +61,20 @@
     }
   }
 
-  const getInputMode = type => {
+  const getInputMode = (type: any) => {
     if (type === "bigint") {
       return "numeric"
     }
     return type === "number" ? "decimal" : "text"
   }
 
+  $: autocompleteValue =
+    typeof autocomplete === "boolean"
+      ? autocomplete
+        ? "on"
+        : "off"
+      : undefined
+
   onMount(async () => {
     if (disabled) return
     focus = autofocus
@@ -104,7 +111,7 @@
     class="spectrum-Textfield-input"
     style={align ? `text-align: ${align};` : ""}
     inputmode={getInputMode(type)}
-    {autocomplete}
+    autocomplete={autocompleteValue}
   />
 </div>
 

package/src/Form/Field.svelte

@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/fieldlabel/dist/index-vars.css"
   import FieldLabel from "./FieldLabel.svelte"
   import Icon from "../Icon/Icon.svelte"
 
-  export let id = null
-  export let label = null
-  export let labelPosition = "above"
-  export let error = null
-  export let helpText = null
-  export let tooltip = ""
+  export let id: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let tooltip: string | undefined = undefined
 </script>
 
 <div class="spectrum-Form-item" class:above={labelPosition === "above"}>

package/src/Form/Input.svelte

@@ -1,24 +1,24 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextField from "./Core/TextField.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
+  export let value: any = undefined
+  export let label: string | undefined = undefined
   export let labelPosition = "above"
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let type = "text"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error: string | undefined = undefined
   export let updateOnChange = true
   export let quiet = false
-  export let autofocus
-  export let autocomplete
-  export let helpText = null
+  export let autofocus: boolean | undefined = undefined
+  export let autocomplete: boolean | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -27,7 +27,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextField
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}

package/src/Form/Select.svelte

@@ -1,44 +1,54 @@
-<script>
+<script lang="ts" context="module">
+  type O = any
+  type V = any
+</script>
+
+<script lang="ts">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
+  import { PopoverAlignment } from "../constants"
 
-  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 getOptionSubtitle = option => option?.subtitle
-  export let getOptionIcon = option => option?.icon
-  export let getOptionColour = option => option?.colour
+  export let value: V | undefined = undefined
+  export let label: string | undefined = undefined
+  export let disabled: boolean = false
+  export let readonly: boolean = false
+  export let labelPosition: string = "above"
+  export let error: string | undefined = undefined
+  export let placeholder: string | boolean = "Choose an option"
+  export let options: O[] = []
+  export let getOptionLabel = (option: O, _index?: number) =>
+    extractProperty(option, "label")
+  export let getOptionValue = (option: O, _index?: number) =>
+    extractProperty(option, "value")
+  export let getOptionSubtitle = (option: O, _index?: number) =>
+    option?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) => option?.icon
+  export let getOptionColour = (option: O, _index?: number) => option?.colour
   export let useOptionIconImage = false
-  export let isOptionEnabled = undefined
-  export let quiet = false
-  export let autoWidth = false
-  export let sort = false
-  export let tooltip = ""
-  export let autocomplete = false
-  export let customPopoverHeight = undefined
-  export let align = undefined
-  export let footer = null
-  export let tag = null
-  export let helpText = null
-  export let compare = undefined
+  export let isOptionEnabled:
+    | ((_option: O, _index?: number) => boolean)
+    | undefined = undefined
+  export let quiet: boolean = false
+  export let autoWidth: boolean = false
+  export let sort: boolean = false
+  export let tooltip: string | undefined = undefined
+  export let autocomplete: boolean = false
+  export let customPopoverHeight: string | undefined = undefined
+  export let align: PopoverAlignment | undefined = PopoverAlignment.Left
+  export let footer: string | undefined = undefined
+  export let helpText: string | undefined = undefined
+  export let compare: any = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<any>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
 
-  const extractProperty = (value, property) => {
+  const extractProperty = (value: any, property: any) => {
     if (value && typeof value === "object") {
       return value[property]
     }
@@ -49,7 +59,6 @@
 <Field {helpText} {label} {labelPosition} {error} {tooltip}>
   <Select
     {quiet}
-    {error}
     {disabled}
     {readonly}
     {value}
@@ -68,7 +77,6 @@
     {isOptionEnabled}
     {autocomplete}
     {customPopoverHeight}
-    {tag}
     {compare}
     {onOptionMouseenter}
     {onOptionMouseleave}

package/src/Icon/Icon.svelte

@@ -1,13 +1,10 @@
 <script lang="ts">
-  import {
-    default as AbsTooltip,
-    TooltipPosition,
-    TooltipType,
-  } from "../Tooltip/AbsTooltip.svelte"
+  import AbsTooltip from "../Tooltip/AbsTooltip.svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
   export let name: string = "Add"
+  export let size: "XS" | "S" | "M" | "L" | "XL" = "M"
   export let hidden: boolean = false
-  export let size = "M"
   export let hoverable: boolean = false
   export let disabled: boolean = false
   export let color: string | undefined = undefined
@@ -81,17 +78,6 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
-
-  .tooltip {
-    position: absolute;
-    pointer-events: none;
-    left: 50%;
-    bottom: calc(100% + 4px);
-    transform: translateX(-50%);
-    text-align: center;
-    z-index: 1;
-  }
-
   .spectrum-Icon--sizeXS {
     width: var(--spectrum-global-dimension-size-150);
     height: var(--spectrum-global-dimension-size-150);

package/src/Link/Link.svelte

@@ -9,8 +9,8 @@
   export let primary = false
   export let secondary = false
   export let overBackground = false
-  export let target
-  export let download
+  export let target = undefined
+  export let download = undefined
   export let disabled = false
   export let tooltip = null
 

package/src/Popover/Popover.svelte

@@ -1,6 +1,12 @@
+<script context="module" lang="ts">
+  export interface PopoverAPI {
+    show: () => void
+    hide: () => void
+  }
+</script>
+
 <script lang="ts">
   import "@spectrum-css/popover/dist/index-vars.css"
-  // @ts-expect-error no types for the version of svelte-portal we're on.
   import Portal from "svelte-portal"
   import { createEventDispatcher, getContext, onDestroy } from "svelte"
   import positionDropdown, {
@@ -10,12 +16,10 @@
   import { fly } from "svelte/transition"
   import Context from "../context"
   import type { KeyboardEventHandler } from "svelte/elements"
-
-  const dispatch = createEventDispatcher<{ open: void; close: void }>()
+  import { PopoverAlignment } from "../constants"
 
   export let anchor: HTMLElement
-  export let align: "left" | "right" | "left-outside" | "right-outside" =
-    "right"
+  export let align: PopoverAlignment = PopoverAlignment.Right
   export let portalTarget: string | undefined = undefined
   export let minWidth: number | undefined = undefined
   export let maxWidth: number | undefined = undefined
@@ -26,19 +30,24 @@
   export let offset = 4
   export let customHeight: string | undefined = undefined
   export let animate = true
-  export let customZindex: string | undefined = undefined
-  export let handlePostionUpdate: UpdateHandler | undefined = undefined
+  export let customZIndex: number | undefined = undefined
+  export let handlePositionUpdate: UpdateHandler | undefined = undefined
   export let showPopover = true
   export let clickOutsideOverride = false
   export let resizable = true
   export let wrap = false
 
+  const dispatch = createEventDispatcher<{ open: void; close: void }>()
   const animationDuration = 260
 
   let timeout: ReturnType<typeof setTimeout>
   let blockPointerEvents = false
 
-  $: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
+  // Portal library lacks types, so we have to type this as any even though it's
+  // actually a string
+  $: target = (portalTarget ||
+    getContext(Context.PopoverRoot) ||
+    ".spectrum") as any
   $: {
     // Disable pointer events for the initial part of the animation, because we
     // fly from top to bottom and initially can be positioned under the cursor,
@@ -118,7 +127,7 @@
         minWidth,
         useAnchorWidth,
         offset,
-        customUpdate: handlePostionUpdate,
+        customUpdate: handlePositionUpdate,
         resizable,
         wrap,
       }}
@@ -128,11 +137,11 @@
       }}
       on:keydown={handleEscape}
       class="spectrum-Popover is-open"
-      class:customZindex
+      class:customZIndex
       class:hidden={!showPopover}
       class:blockPointerEvents
       role="presentation"
-      style="height: {customHeight}; --customZindex: {customZindex};"
+      style="height: {customHeight}; --customZIndex: {customZIndex};"
       transition:fly|local={{
         y: -20,
         duration: animate ? animationDuration : 0,
@@ -162,7 +171,7 @@
     opacity: 0;
     pointer-events: none;
   }
-  .customZindex {
-    z-index: var(--customZindex) !important;
+  .customZIndex {
+    z-index: var(--customZIndex) !important;
   }
 </style>

package/src/StatusLight/StatusLight.svelte

@@ -1,25 +1,25 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/statuslight"
 
-  export let size = "M"
-  export let celery = false
-  export let yellow = false
-  export let fuchsia = false
-  export let indigo = false
-  export let seafoam = false
-  export let chartreuse = false
-  export let magenta = false
-  export let purple = false
-  export let neutral = false
-  export let info = false
-  export let positive = false
-  export let notice = false
-  export let negative = false
-  export let disabled = false
-  export let active = false
-  export let color = null
-  export let square = false
-  export let hoverable = false
+  export let size: string = "M"
+  export let celery: boolean = false
+  export let yellow: boolean = false
+  export let fuchsia: boolean = false
+  export let indigo: boolean = false
+  export let seafoam: boolean = false
+  export let chartreuse: boolean = false
+  export let magenta: boolean = false
+  export let purple: boolean = false
+  export let neutral: boolean = false
+  export let info: boolean = false
+  export let positive: boolean = false
+  export let notice: boolean = false
+  export let negative: boolean = false
+  export let disabled: boolean = false
+  export let active: boolean = false
+  export let color: string | undefined = undefined
+  export let square: boolean = false
+  export let hoverable: boolean = false
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->

package/src/Tooltip/AbsTooltip.svelte

@@ -1,38 +1,24 @@
-<script context="module">
-  export const TooltipPosition = {
-    Top: "top",
-    Right: "right",
-    Bottom: "bottom",
-    Left: "left",
-  }
-  export const TooltipType = {
-    Default: "default",
-    Info: "info",
-    Positive: "positive",
-    Negative: "negative",
-  }
-</script>
-
-<script>
+<script lang="ts">
   import Portal from "svelte-portal"
   import { fade } from "svelte/transition"
   import "@spectrum-css/tooltip/dist/index-vars.css"
   import { onDestroy } from "svelte"
+  import { TooltipPosition, TooltipType } from "../constants"
 
-  export let position = TooltipPosition.Top
-  export let type = TooltipType.Default
-  export let text = ""
-  export let fixed = false
-  export let color = ""
-  export let noWrap = false
+  export let position: TooltipPosition = TooltipPosition.Top
+  export let type: TooltipType = TooltipType.Default
+  export let text: string = ""
+  export let fixed: boolean = false
+  export let color: string | undefined = undefined
+  export let noWrap: boolean = false
 
-  let wrapper
+  let wrapper: HTMLElement | undefined
   let hovered = false
-  let left
-  let top
+  let left: number | undefined
+  let top: number | undefined
   let visible = false
-  let timeout
-  let interval
+  let timeout: ReturnType<typeof setTimeout> | undefined
+  let interval: ReturnType<typeof setInterval> | undefined
 
   $: {
     if (hovered || fixed) {
@@ -49,8 +35,8 @@
   const updateTooltipPosition = () => {
     const node = wrapper?.children?.[0]
     if (!node) {
-      left = null
-      top = null
+      left = undefined
+      top = undefined
       return
     }
     const bounds = node.getBoundingClientRect()

package/src/constants.ts

@@ -0,0 +1,23 @@
+export enum PopoverAlignment {
+  Left = "left",
+  Right = "right",
+  LeftOutside = "left-outside",
+  RightOutside = "right-outside",
+  Center = "center",
+  RightContextMenu = "right-context-menu",
+  LeftContextMenu = "left-context-menu",
+}
+
+export enum TooltipPosition {
+  Top = "top",
+  Right = "right",
+  Bottom = "bottom",
+  Left = "left",
+}
+
+export enum TooltipType {
+  Default = "default",
+  Info = "info",
+  Positive = "positive",
+  Negative = "negative",
+}

package/src/index.ts

@@ -1,8 +1,9 @@
 import "./bbui.css"
-
-// Spectrum icons
 import "@spectrum-css/icon/dist/index-vars.css"
 
+// Constants
+export * from "./constants"
+
 // Form components
 export { default as Input } from "./Form/Input.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
@@ -45,7 +46,7 @@ export { default as ClearButton } from "./ClearButton/ClearButton.svelte"
 export { default as Icon } from "./Icon/Icon.svelte"
 export { default as IconAvatar } from "./Icon/IconAvatar.svelte"
 export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
-export { default as Popover } from "./Popover/Popover.svelte"
+export { default as Popover, type PopoverAPI } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
 export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
 export { default as Label } from "./Label/Label.svelte"
@@ -92,7 +93,6 @@ export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
 export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
 export { default as Accordion } from "./Accordion/Accordion.svelte"
 export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte"
-export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"

package/src/Popover/Popover.svench

@@ -1,120 +0,0 @@
-<script>
-  import { View } from "svench";
-  import Popover from "./Popover.svelte";
-  import Button from "../Button/Button.svelte";
-  import TextButton from "../Button/TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-  import Input from "../Form/Input.svelte";
-  import Select from "../Form/Select.svelte";
-
-  let anchorRight;
-  let anchorLeft;
-  let dropdownRight;
-  let dropdownLeft;
-
-  const options = ["Column 1", "Column 2", "Super cool column"];
-  const option1s = ["Is", "Is not", "Contains" , "Does not contain"];
-
-</script>
-
-<style>
-  .button-group {
-    margin-top: var(--spacing-l);
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--spacing-s);
-  }
-
-  h6 {
-    font-size: var(--font-size-m);
-    margin: 0 0 var(--spacing-l) 0;
-    font-weight: 600;
-  }
-
-  .input-group-column {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-s);
-  }
-
-  .input-group-row {
-    display: grid;
-    grid-template-columns: [boolean-start] 60px [boolean-end property-start] 120px [property-end opererator-start] 110px [operator-end value-start] auto [value-end menu-start] 32px [menu-end];
-    gap: var(--spacing-s);
-    margin-bottom: var(--spacing-l);
-    align-items: center;
-  }
-
-  p {
-    margin:0;
-    font-size: var(--font-size-xs);
-  }
-</style>
-
-<View name="Simple popover">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      <Icon name="view" />
-      Add View
-    </Button>
-  </div>
-  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <h6>Add New View</h6>
-    <Input thin placeholder="Enter your name" />
-    <div class="button-group">
-      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
-      <Button primary on:click={() => alert('Clicked!')}>Add New View</Button>
-    </div>
-  </Popover>
-</View>
-
-<View name="Stacked columns">
-  <div bind:this={anchorRight}>
-    <Button text on:click={dropdownRight.show}>
-      <Icon name="addrow" />
-      Add Row
-    </Button>
-  </div>
-  <Popover bind:this={dropdownRight} anchor={anchorRight}>
-    <h6>Add New Row</h6>
-    <div class="input-group-column">
-      <Input thin placeholder="Enter your string" />
-      <Input thin placeholder="Enter your string" />
-      <Input thin placeholder="Enter your string" />
-    </div>
-    <div class="button-group">
-      <Button secondary on:click={() => alert('Clicked!')}>Cancel</Button>
-      <Button primary on:click={() => alert('Clicked!')}>Add New Row</Button>
-    </div>
-  </Popover>
-</View>
-
-<View name="Multiple inputs in a row">
-  <div bind:this={anchorLeft}>
-    <Button text on:click={dropdownLeft.show}>
-      <Icon name="filter" />
-      Add Filter
-    </Button>
-  </div>
-  <Popover bind:this={dropdownLeft} anchor={anchorLeft} align="left">
-    <h6>Add New Filter</h6>
-    <div class="input-group-row">
-      <p>Where</p>
-      <Select secondary thin name="Test">
-        {#each options as option}
-          <option value={option}>{option}</option>
-        {/each}
-      </Select>
-      <Select secondary thin name="Test">
-        {#each option1s as option1}
-          <option value={option1}>{option1}</option>
-        {/each}
-      </Select>
-      <Input thin placeholder="Enter your name" />
-      <Button text on:click={() => alert('Clicked!')}>
-         <Icon name="close" />
-      </Button>
-    </div>
-    <Button text on:click={() => alert('Clicked!')}>Add Filter</Button>
-  </Popover>
-</View>