@budibase/bbui 3.8.4 → 3.8.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.8.4",
+  "version": "3.8.6",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -99,5 +99,5 @@
       }
     }
   },
-  "gitHead": "26eae99d75fe3fe7e467e186ee9d40acdc6dff95"
+  "gitHead": "74dd49640111c5d634c8a8417ce4019cdc1a77b0"
 }

package/src/ColorPicker/ColorPicker.svelte

@@ -134,7 +134,7 @@
     return getThemeClassNames(theme)
   }
 
-  const onChange = (value: string | null) => {
+  const onChange = (value: string | undefined) => {
     dispatch("change", value)
     dropdown?.hide()
   }
@@ -243,7 +243,7 @@
             size="S"
             name="Close"
             hoverable
-            on:click={() => onChange(null)}
+            on:click={() => onChange(undefined)}
           />
         </div>
       </div>

package/src/Form/Core/File.svelte

@@ -7,6 +7,7 @@
   const BYTES_IN_MB = 1000000
 
   export let value: File | undefined = undefined
+  export let statusText: string | undefined = undefined
   export let title: string = "Upload file"
   export let disabled: boolean = false
   export let allowClear: boolean | undefined = undefined
@@ -57,7 +58,16 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="field">
-  {#if value}
+  {#if statusText}
+    <div class="file-view status">
+      <div class="filename">{statusText}</div>
+      {#if !disabled || (allowClear === true && disabled)}
+        <div class="delete-button" on:click={clearFile}>
+          <Icon name="Close" size="XS" />
+        </div>
+      {/if}
+    </div>
+  {:else if value}
     <div class="file-view">
       {#if previewUrl}
         <img class="preview" alt="" src={previewUrl} />
@@ -97,6 +107,9 @@
     border-radius: var(--spectrum-global-dimension-size-50);
     padding: 0px var(--spectrum-alias-item-padding-m);
   }
+  .file-view.status {
+    background-color: var(--spectrum-global-color-gray-100);
+  }
   input[type="file"] {
     display: none;
   }

package/src/Form/Core/Switch.svelte

@@ -1,15 +1,16 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/switch/dist/index-vars.css"
   import { createEventDispatcher } from "svelte"
 
-  export let value = false
-  export let id = null
-  export let text = null
-  export let disabled = false
+  export let value: boolean = false
+  export let id: string | null = null
+  export let text: string | null = null
+  export let disabled: boolean = false
 
   const dispatch = createEventDispatcher()
-  const onChange = event => {
-    dispatch("change", event.target.checked)
+  const onChange = (event: Event) => {
+    const target = event.target as HTMLInputElement
+    dispatch("change", target.checked)
   }
 </script>
 

package/src/Form/File.svelte

@@ -13,6 +13,7 @@
   export let error: string | undefined = undefined
   export let title: string | undefined = undefined
   export let value: File | undefined = undefined
+  export let statusText: string | undefined = undefined
   export let tooltip: string | undefined = undefined
   export let helpText: string | undefined = undefined
 
@@ -29,6 +30,7 @@
     {allowClear}
     {title}
     {value}
+    {statusText}
     {previewUrl}
     {handleFileTooLarge}
     {extensions}

package/src/Form/Toggle.svelte

@@ -1,23 +1,29 @@
-<script>
+<script lang="ts">
   import Field from "./Field.svelte"
   import Switch from "./Core/Switch.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = undefined
-  export let label = null
-  export let labelPosition = "above"
-  export let text = undefined
-  export let disabled = false
-  export let error = null
-  export let helpText = null
+  export let value: boolean | null | undefined = undefined
+  export let label: string | undefined = undefined
+  export let labelPosition: "above" = "above"
+  export let text: string | undefined = undefined
+  export let disabled: boolean | undefined = false
+  export let error: string | undefined = undefined
+  export let helpText: string | undefined = undefined
 
   const dispatch = createEventDispatcher()
-  const onChange = e => {
+  const onChange = (e: CustomEvent<boolean>) => {
     value = e.detail
     dispatch("change", e.detail)
   }
 </script>
 
 <Field {helpText} {label} {labelPosition} {error}>
-  <Switch {error} {disabled} {text} {value} on:change={onChange} on:click />
+  <Switch
+    {disabled}
+    {text}
+    value={value ?? undefined}
+    on:change={onChange}
+    on:click
+  />
 </Field>

package/src/helpers.ts

@@ -238,3 +238,21 @@ export const hexToRGBA = (color: string, opacity: number): string => {
   const b = parseInt(color.substring(4, 6), 16)
   return `rgba(${r}, ${g}, ${b}, ${opacity})`
 }
+
+export function rgbToHex(rgbStr: string | undefined): string {
+  if (rgbStr?.startsWith("#")) return rgbStr
+
+  const rgbMatch = rgbStr?.match(
+    /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/
+  )
+  if (!rgbMatch) return rgbStr || "#FFFFFF"
+
+  const r = parseInt(rgbMatch[1])
+  const g = parseInt(rgbMatch[2])
+  const b = parseInt(rgbMatch[3])
+
+  return `#${((1 << 24) | (r << 16) | (g << 8) | b)
+    .toString(16)
+    .slice(1)
+    .toUpperCase()}`
+}