@budibase/bbui 3.6.0 → 3.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "fcc8291c1f2968ee7fd17bd47ee6ca19181a14a7"
+  "gitHead": "701aef170adfb9552bb88b97a0231e31e6054f64"
 }

package/src/Form/Core/EnvDropdown.svelte

@@ -1,36 +1,36 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher, onMount } from "svelte"
   import clickOutside from "../../Actions/click_outside"
   import Divider from "../../Divider/Divider.svelte"
+  import type { EnvDropdownType } from "../../types"
 
-  export let value = null
-  export let placeholder = null
-  export let type = "text"
-  export let disabled = false
-  export let id = null
-  export let readonly = false
-  export let updateOnChange = true
-  export let align
-  export let autofocus = false
+  export let value: string | number | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let type: EnvDropdownType = "text"
+  export let disabled: boolean = false
+  export let id: string | undefined = undefined
+  export let readonly: boolean = false
+  export let updateOnChange: boolean = true
+  export let align: string | undefined = undefined
+  export let autofocus: boolean = false
   export let variables
-  export let showModal
+  export let showModal: () => void
   export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let handleUpgradePanel: () => void
   const dispatch = createEventDispatcher()
 
-  let field
+  let field: HTMLInputElement
   let focus = false
   let iconFocused = false
   let open = false
 
-  //eslint-disable-next-line
-  const STRIP_NAME_REGEX = /(\w+?)(?=\ })/g
+  const STRIP_NAME_REGEX = /{{\s*env\.([^\s]+)\s*}}/g
 
   // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
-  $: hbsValue = String(value)?.match(STRIP_NAME_REGEX) || []
+  $: hbsValue = (String(value) && STRIP_NAME_REGEX.exec(String(value))) || []
 
-  const updateValue = newValue => {
+  const updateValue = (newValue: any) => {
     if (readonly) {
       return
     }
@@ -48,7 +48,7 @@
     focus = true
   }
 
-  const onBlur = event => {
+  const onBlur = (event: any) => {
     if (readonly) {
       return
     }
@@ -56,14 +56,14 @@
     updateValue(event.target.value)
   }
 
-  const onInput = event => {
+  const onInput = (event: any) => {
     if (readonly || !updateOnChange) {
       return
     }
     updateValue(event.target.value)
   }
 
-  const handleOutsideClick = event => {
+  const handleOutsideClick = (event: Event) => {
     if (open) {
       event.stopPropagation()
       open = false
@@ -73,7 +73,7 @@
     }
   }
 
-  const handleVarSelect = variable => {
+  const handleVarSelect = (variable: string) => {
     open = false
     focus = false
     iconFocused = false
@@ -121,10 +121,10 @@
 
     <input
       bind:this={field}
-      disabled={hbsValue.length || disabled}
+      disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
-      value={hbsValue.length ? `{{ ${hbsValue[0]} }}` : value}
+      value={(hbsValue.length ? `{{ ${hbsValue[1]} }}` : value) ?? ""}
       placeholder={placeholder || ""}
       on:click
       on:blur

package/src/Form/Core/TextField.svelte

@@ -13,7 +13,7 @@
   export let quiet = false
   export let align: "left" | "right" | "center" | undefined = undefined
   export let autofocus: boolean | null = false
-  export let autocomplete: boolean | undefined
+  export let autocomplete: boolean | string | undefined
 
   const dispatch = createEventDispatcher()
 

package/src/Form/EnvDropdown.svelte

@@ -1,26 +1,26 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import EnvDropdown from "./Core/EnvDropdown.svelte"
   import { createEventDispatcher } from "svelte"
+  import type { EnvDropdownType } from "../types"
 
-  export let value = null
-  export let label = null
-  export let labelPosition = "above"
-  export let placeholder = null
-  export let type = "text"
+  export let value: string | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: string = "above"
+  export let placeholder: string | undefined = undefined
+  export let type: EnvDropdownType = "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 variables
-  export let showModal
-  export let helpText = null
-  export let environmentVariablesEnabled
-  export let handleUpgradePanel
+  export let autofocus: boolean = false
+  export let variables: { name: string }[] = []
+  export let showModal: () => void
+  export let helpText: string | undefined = undefined
+  export let environmentVariablesEnabled: boolean = false
+  export let handleUpgradePanel: () => void = () => {}
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -29,13 +29,11 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <EnvDropdown
     {updateOnChange}
-    {error}
     {disabled}
     {readonly}
     {value}
     {placeholder}
     {type}
-    {quiet}
     {autofocus}
     {variables}
     {showModal}

package/src/Form/Input.svelte

@@ -14,7 +14,7 @@
   export let updateOnChange = true
   export let quiet = false
   export let autofocus: boolean | undefined = undefined
-  export let autocomplete: boolean | undefined = undefined
+  export let autocomplete: boolean | string | undefined = undefined
   export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()

package/src/Menu/Item.svelte

@@ -3,7 +3,7 @@
   import Icon from "../Icon/Icon.svelte"
 
   const dispatch = createEventDispatcher()
-  const actionMenu = getContext("actionMenu") as { hideAll: () => void }
+  const actionMenu = getContext("actionMenu")
 
   export let icon: string | undefined = undefined
   export let disabled: boolean | undefined = undefined

package/src/context.d.ts

@@ -1,7 +1,9 @@
 import { ActionMenu } from "./types"
+import { ModalContext } from "./types"
 
 declare module "svelte" {
   export function getContext(key: "actionMenu"): ActionMenu | undefined
+  export function getContext(key: "bbui-modal"): ModalContext
 }
 
 export const Modal = "bbui-modal"

package/src/index.ts

@@ -111,3 +111,5 @@ export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"
+
+export type * from "./types"

package/src/types/actionMenu.ts

@@ -1,3 +1,4 @@
 export interface ActionMenu {
   hide: () => void
+  hideAll: () => void
 }

package/src/types/envDropdown.ts

@@ -0,0 +1 @@
+export type EnvDropdownType = "text" | "number" | "password" | "port"

package/src/types/index.ts

@@ -0,0 +1,3 @@
+export * from "./actionMenu"
+export * from "./envDropdown"
+export * from "./modalContext"

package/src/types/modalContext.ts

@@ -0,0 +1,3 @@
+export interface ModalContext {
+  hide: () => void
+}