@budibase/bbui 3.20.2 → 3.20.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.20.2",
+  "version": "3.20.3",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "3582592cff6b755c0e6f5cf7d04f32be18d7a9a8"
+  "gitHead": "801ead90230ea40bd93f89daa92e2998310627ea"
 }

package/src/FancyForm/ErrorMessage.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import { slide } from "svelte/transition"
 
-  export let error = null
+  export let error: string | null = null
 </script>
 
 <div transition:slide|local={{ duration: 130 }} class="error-message">

package/src/FancyForm/FancyField.svelte

@@ -1,20 +1,20 @@
-<script>
-  import Icon from "../Icon/Icon.svelte"
+<script lang="ts" generics="V">
   import { getContext, onMount } from "svelte"
+  import Icon from "../Icon/Icon.svelte"
   import ErrorMessage from "./ErrorMessage.svelte"
 
-  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
-  export let compact = false
+  export let disabled: boolean = false
+  export let error: string | null = null
+  export let focused: boolean = false
+  export let clickable: boolean = false
+  export let validate: ((_value: V | undefined) => string | null) | null
+  export let value: V | undefined
+  export let ref: HTMLDivElement | undefined = undefined
+  export let autoHeight: boolean | undefined = undefined
+  export let compact: boolean = false
 
   const formContext = getContext("fancy-form")
-  const id = Math.random()
+  const id = Math.random().toString()
   const API = {
     validate: () => {
       if (validate) {

package/src/FancyForm/FancyInput.svelte

@@ -1,27 +1,29 @@
-<script>
+<script lang="ts">
+  import type { UIEvent } from "@budibase/types"
   import { createEventDispatcher, onMount } from "svelte"
+  import { fade } from "svelte/transition"
   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
-  export let validateOn = "change"
+  export let label: string
+  export let value: string
+  export let type: string = "text"
+  export let disabled: boolean = false
+  export let error: string | null = null
+  export let validate: ((_value: string | undefined) => string | null) | null =
+    null
+  export let suffix: string | null = null
+  export let validateOn: "change" | "blur" = "change"
 
   const dispatch = createEventDispatcher()
 
-  let ref
+  let ref: HTMLInputElement
   let focused = false
   let autofilled = false
 
   $: placeholder = !autofilled && !focused && !value
 
-  const onChange = e => {
+  const onChange = (e: UIEvent) => {
     const newValue = e.target.value
     dispatch("change", newValue)
     value = newValue
@@ -30,7 +32,7 @@
     }
   }
 
-  const onBlur = e => {
+  const onBlur = (e: UIEvent) => {
     focused = false
     const newValue = e.target.value
     dispatch("blur", newValue)

package/src/FancyForm/FancySelect.svelte

@@ -1,34 +1,44 @@
-<script>
+<script lang="ts" generics="O extends Record<string, any> | string">
   import { createEventDispatcher } from "svelte"
-  import FancyField from "./FancyField.svelte"
+  import Picker from "../Form/Core/Picker.svelte"
   import Icon from "../Icon/Icon.svelte"
-  import FancyFieldLabel from "./FancyFieldLabel.svelte"
   import StatusLight from "../StatusLight/StatusLight.svelte"
-  import Picker from "../Form/Core/Picker.svelte"
+  import FancyField from "./FancyField.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 footer = null
-  export let isOptionEnabled = () => true
-  export let getOptionLabel = option => extractProperty(option, "label")
-  export let getOptionValue = option => extractProperty(option, "value")
-  export let getOptionSubtitle = option => extractProperty(option, "subtitle")
-  export let getOptionColour = () => null
+  export let label: string | undefined
+  export let value: string | undefined
+  export let disabled: boolean = false
+  export let error: string | null = null
+  export let validate: ((_value: string | undefined) => string) | null = null
+  export let options: O[] = []
+  export let footer: string | undefined = undefined
+  export let isOptionEnabled = (_option: O) => true
+  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) =>
+    extractProperty(option, "subtitle")
+  export let getOptionColour: (
+    _option: O,
+    _index?: number
+  ) => string | null = () => null
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ change: string | undefined }>()
 
   let open = false
-  let wrapper
+  let wrapper: HTMLDivElement
 
   $: placeholder = !value
   $: selectedLabel = getSelectedLabel(value)
   $: fieldColour = getFieldAttribute(getOptionColour, value, options)
 
-  const getFieldAttribute = (getAttribute, value, options) => {
+  const getFieldAttribute = (
+    getAttribute: (_option: O, _index?: number) => string | null,
+    value: string | undefined,
+    options: O[]
+  ) => {
     // Wait for options to load if there is a value but no options
     if (!options?.length) {
       return ""
@@ -38,14 +48,14 @@
     )
     return index !== -1 ? getAttribute(options[index], index) : null
   }
-  const extractProperty = (value, property) => {
+  const extractProperty = (value: O, property: string): string => {
     if (value && typeof value === "object") {
       return value[property]
     }
     return value
   }
 
-  const onChange = newValue => {
+  const onChange = (newValue: string | undefined) => {
     dispatch("change", newValue)
     value = newValue
     if (validate) {
@@ -54,7 +64,7 @@
     open = false
   }
 
-  const getSelectedLabel = value => {
+  const getSelectedLabel = (value: string | undefined) => {
     if (!value || !options?.length) {
       return ""
     }
@@ -97,9 +107,7 @@
 <div id="picker-wrapper">
   <Picker
     customAnchor={wrapper}
-    onlyPopover={true}
     bind:open
-    {error}
     {disabled}
     {options}
     {footer}
@@ -109,7 +117,7 @@
     {getOptionColour}
     {isOptionEnabled}
     isPlaceholder={value == null || value === ""}
-    placeholderOption={placeholder === false ? null : placeholder}
+    placeholderOption={placeholder === false ? undefined : placeholder}
     onSelectOption={onChange}
     isOptionSelected={option => option === value}
   />

package/src/context.ts

@@ -12,6 +12,10 @@ declare module "svelte" {
       type: string
     }>
   }
+  export function getContext(key: "fancy-form"): {
+    registerField: (id: string, api: { validate: () => boolean }) => void
+    unregisterField: (id: string) => void
+  }
 }
 
 interface Module {