@budibase/bbui 3.5.3 → 3.7.0

package/src/Form/Multiselect.svelte

@@ -1,29 +1,31 @@
-<script>
+<script lang="ts" generics="Option">
   import { createEventDispatcher } from "svelte"
   import Multiselect from "./Core/Multiselect.svelte"
   import Field from "./Field.svelte"
 
-  export let value = []
-  export let label = null
+  export let value: string[] | string = []
+  export let label: string | undefined = undefined
   export let disabled = false
   export let readonly = false
   export let labelPosition = "above"
-  export let error = null
-  export let placeholder = null
-  export let options = []
-  export let getOptionLabel = option => option
-  export let getOptionValue = option => option
+  export let error: string | undefined = undefined
+  export let placeholder: string | undefined = undefined
+  export let options: Option[] = []
+  export let getOptionLabel = (option: Option) => option
+  export let getOptionValue = (option: Option) => option
   export let sort = false
   export let autoWidth = false
   export let autocomplete = false
-  export let searchTerm = null
-  export let customPopoverHeight
-  export let helpText = null
+  export let searchTerm: string | undefined = undefined
+  export let customPopoverHeight: string | undefined = undefined
+  export let helpText: string | undefined = undefined
   export let onOptionMouseenter = () => {}
   export let onOptionMouseleave = () => {}
 
+  $: arrayValue = value && !Array.isArray(value) ? [value] : (value as string[])
+
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: any) => {
     value = e.detail
     dispatch("change", e.detail)
   }
@@ -31,10 +33,9 @@
 
 <Field {helpText} {label} {labelPosition} {error}>
   <Multiselect
-    {error}
     {disabled}
     {readonly}
-    {value}
+    bind:value={arrayValue}
     {options}
     {placeholder}
     {sort}

package/src/Form/Select.svelte

@@ -1,9 +1,4 @@
-<script lang="ts" context="module">
-  type O = any
-  type V = any
-</script>
-
-<script lang="ts">
+<script lang="ts" generics="O extends any,V">
   import Field from "./Field.svelte"
   import Select from "./Core/Select.svelte"
   import { createEventDispatcher } from "svelte"
@@ -22,9 +17,11 @@
   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
+    (option as any)?.subtitle
+  export let getOptionIcon = (option: O, _index?: number) =>
+    (option as any)?.icon
+  export let getOptionColour = (option: O, _index?: number) =>
+    (option as any)?.colour
   export let useOptionIconImage = false
   export let isOptionEnabled:
     | ((_option: O, _index?: number) => boolean)

package/src/Form/Toggle.svelte

@@ -3,10 +3,10 @@
   import Switch from "./Core/Switch.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
-  export let text = null
+  export let text = undefined
   export let disabled = false
   export let error = null
   export let helpText = null

package/src/List/ListItem.svelte

@@ -89,7 +89,7 @@
   /* Selection is only meant for standalone list items (non stacked) so we just set a fixed border radius */
   .list-item.selected {
     background-color: var(--spectrum-global-color-blue-100);
-    border-color: var(--spectrum-global-color-blue-100);
+    border: none;
   }
   .list-item.selected:after {
     content: "";
@@ -100,7 +100,7 @@
     pointer-events: none;
     top: 0;
     left: 0;
-    border-radius: 4px;
+    border-radius: inherit;
     box-sizing: border-box;
     z-index: 1;
     opacity: 0.5;

package/src/Markdown/MarkdownViewer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import SpectrumMDE from "./SpectrumMDE.svelte"
 
-  export let value: string | null = null
-  export let height: string | null = null
+  export let value: string | undefined = undefined
+  export let height: string | undefined = undefined
 
   let mde: any
 
@@ -40,6 +40,7 @@
     border: none;
     background: transparent;
     padding: 0;
+    color: inherit;
   }
   .markdown-viewer :global(.EasyMDEContainer) {
     background: transparent;

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/bbui.css

@@ -11,6 +11,16 @@
   --bb-forest-green: #053835;
   --bb-beige: #f6efea;
 
+  /* Custom spectrum additions */
+  --spectrum-global-color-static-red-1200: #740000;
+  --spectrum-global-color-static-orange-1200: #612300;
+  --spectrum-global-color-static-yellow-1200: #483300;
+  --spectrum-global-color-static-green-1200: #053f27;
+  --spectrum-global-color-static-seafoam-1200: #123c3a;
+  --spectrum-global-color-static-blue-1200: #003571;
+  --spectrum-global-color-static-indigo-1200: #262986;
+  --spectrum-global-color-static-magenta-1200: #700037;
+
   --grey-1: #fafafa;
   --grey-2: #f5f5f5;
   --grey-3: #eeeeee;

package/src/context.d.ts

@@ -0,0 +1,10 @@
+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"
+export const PopoverRoot = "bbui-popover-root"

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

@@ -0,0 +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
+}