@budibase/bbui 3.18.1 → 3.18.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.18.1",
+  "version": "3.18.3",
   "license": "MPL-2.0",
   "svelte": "src/index.ts",
   "module": "dist/bbui.mjs",
@@ -106,5 +106,5 @@
       }
     }
   },
-  "gitHead": "cac7191488dabe0144f8f427686875c91cc7a548"
+  "gitHead": "572306dc0decede5567d7b3644f0afa890797638"
 }

package/src/Form/Core/DatePicker/DatePicker.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts" generics="V">
   import "@spectrum-css/calendar/dist/index-vars.css"
   import "@spectrum-css/inputgroup/dist/index-vars.css"
   import "@spectrum-css/textfield/dist/index-vars.css"
@@ -7,26 +7,30 @@
   import DateInput from "./DateInput.svelte"
   import { parseDate } from "../../../helpers"
   import DatePickerPopoverContents from "./DatePickerPopoverContents.svelte"
+  import { PopoverAlignment } from "../../../constants"
+  import type dayjs from "dayjs"
 
   export let id = null
   export let disabled = false
   export let readonly = false
   export let error = null
   export let enableTime = true
-  export let value = undefined
-  export let placeholder = null
+  export let value: V | null = null
+  export let placeholder: string | null = null
   export let timeOnly = false
   export let ignoreTimezones = false
   export let useKeyboardShortcuts = true
-  export let appendTo = null
+  export let appendTo = undefined
   export let api = null
-  export let align = "left"
+  export let align: PopoverAlignment = PopoverAlignment.Left
 
   let isOpen = false
-  let anchor
-  let popover
+  let anchor: HTMLElement
+  let popover: Popover
 
-  $: parsedValue = parseDate(value, { timeOnly, enableTime })
+  $: parsedValue = parseDate(value as string | dayjs.Dayjs | null, {
+    enableTime,
+  })
 
   const onOpen = () => {
     isOpen = true

package/src/Form/Core/Picker.svelte

@@ -152,7 +152,7 @@
       </span>
     {:else}
       <span class="option-extra icon field-icon">
-        <img src={fieldIcon} alt="icon" style="height: 15px; width: auto;" />
+        <img class="icon-dims" src={fieldIcon} alt="icon" />
       </span>
     {/if}
   {/if}
@@ -235,9 +235,9 @@
               <span class="option-extra icon">
                 {#if useOptionIconImage}
                   <img
+                    class="icon-dims"
                     src={getOptionIcon(option, idx)}
                     alt="icon"
-                    style="height: 15px; width: auto;"
                   />
                 {:else}
                   <Icon
@@ -301,6 +301,10 @@
 </Popover>
 
 <style>
+  .icon-dims {
+    height: 15px;
+    width: auto;
+  }
   .spectrum-Picker {
     width: 100%;
     box-shadow: none;

package/src/Form/DatePicker.svelte

@@ -1,24 +1,25 @@
-<script>
+<script lang="ts" generics="V">
   import Field from "./Field.svelte"
   import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
+  import type { LabelPosition } from "../types"
 
-  export let value = undefined
-  export let label = null
-  export let labelPosition = "above"
+  export let value: V | null = null
+  export let label = undefined
+  export let labelPosition: LabelPosition = "above"
   export let disabled = false
   export let readonly = false
-  export let error = null
+  export let error = undefined
   export let enableTime = true
   export let timeOnly = false
-  export let placeholder = null
+  export let placeholder: string | null = null
   export let appendTo = undefined
   export let ignoreTimezones = false
-  export let helpText = null
+  export let helpText = undefined
 
   const dispatch = createEventDispatcher()
 
-  const onChange = e => {
+  const onChange = (e: CustomEvent) => {
     value = e.detail
     dispatch("change", e.detail)
   }