@budibase/bbui 3.4.23 → 3.5.0

package/package.json

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

package/src/Form/Core/TextArea.svelte

@@ -1,14 +1,14 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/textfield/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
   export let value = ""
-  export let placeholder = null
+  export let placeholder: string | undefined = undefined
   export let disabled = false
   export let readonly = false
-  export let id = null
-  export let height = null
-  export let minHeight = null
+  export let id: string | undefined = undefined
+  export let height: string | number | undefined = undefined
+  export let minHeight: string | number | undefined = undefined
   export const getCaretPosition = () => ({
     start: textarea.selectionStart,
     end: textarea.selectionEnd,
@@ -16,18 +16,21 @@
   export let align = null
 
   let focus = false
-  let textarea
+  let textarea: any
   const dispatch = createEventDispatcher()
-  const onChange = event => {
+  const onChange = (event: any) => {
     dispatch("change", event.target.value)
     focus = false
   }
 
-  const getStyleString = (attribute, value) => {
+  const getStyleString = (
+    attribute: string,
+    value: string | number | undefined
+  ) => {
     if (!attribute || value == null) {
       return ""
     }
-    if (isNaN(value)) {
+    if (typeof value === "number" && isNaN(value)) {
       return `${attribute}:${value};`
     }
     return `${attribute}:${value}px;`

package/src/Form/TextArea.svelte

@@ -1,21 +1,21 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import TextArea from "./Core/TextArea.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
-  export let label = null
-  export let labelPosition = "above"
-  export let placeholder = null
+  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 disabled = false
-  export let error = null
-  export let getCaretPosition = null
-  export let height = null
-  export let minHeight = null
-  export let helpText = null
+  export let error: string | undefined = undefined
+  export let getCaretPosition: any = undefined
+  export let height: string | number | undefined = undefined
+  export let minHeight: string | number | 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)
   }
@@ -24,7 +24,6 @@
 <Field {helpText} {label} {labelPosition} {error}>
   <TextArea
     bind:getCaretPosition
-    {error}
     {disabled}
     {value}
     {placeholder}

package/src/InlineAlert/InlineAlert.svelte

@@ -1,6 +1,7 @@
 <script>
   import "@spectrum-css/inlinealert/dist/index-vars.css"
   import Button from "../Button/Button.svelte"
+  import Icon from "../Icon/Icon.svelte"
 
   export let type = "info"
   export let header = ""
@@ -8,6 +9,8 @@
   export let onConfirm = undefined
   export let buttonText = ""
   export let cta = false
+  export let link = ""
+  export let linkText = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
@@ -49,6 +52,19 @@
       >
     </div>
   {/if}
+  {#if link && linkText}
+    <div id="docs-link">
+      <a
+        href={link}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="docs-link"
+      >
+        {linkText}
+        <Icon name="LinkOut" size="XS" />
+      </a>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -64,4 +80,21 @@
     margin: 0;
     border-width: 1px;
   }
+
+  a {
+    color: white;
+  }
+
+  #docs-link {
+    padding-top: 10px;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+
+  #docs-link > * {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
 </style>

package/src/Tabs/Tab.svelte

@@ -4,7 +4,7 @@
 
   export let title
   export let icon = ""
-  export let id
+  export let id = undefined
   export let href = "#"
   export let link = false
 

package/src/Tags/Tag.svelte

@@ -8,11 +8,13 @@
   export let invalid: boolean = false
   export let disabled: boolean = false
   export let closable: boolean = false
+  export let emphasized: boolean = false
 </script>
 
 <div
   class:is-invalid={invalid}
   class:is-disabled={disabled}
+  class:is-emphasized={emphasized}
   class="spectrum-Tags-item"
   role="listitem"
 >
@@ -40,4 +42,9 @@
     margin-bottom: 0;
     margin-top: 0;
   }
+
+  .is-emphasized {
+    border-color: var(--spectrum-global-color-blue-700);
+    color: var(--spectrum-global-color-blue-700);
+  }
 </style>