@budibase/bbui 3.9.5 → 3.10.0

package/package.json

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

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

@@ -13,7 +13,7 @@
   export let readonly = false
   export let error = null
   export let enableTime = true
-  export let value = null
+  export let value = undefined
   export let placeholder = null
   export let timeOnly = false
   export let ignoreTimezones = false

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

@@ -7,6 +7,8 @@
   export let type = "number"
 
   $: style = width ? `width:${width}px;` : ""
+
+  const selectAll = event => event.target.select()
 </script>
 
 <input
@@ -16,7 +18,7 @@
   {value}
   {min}
   {max}
-  onclick="this.select()"
+  on:click={selectAll}
   on:change
   on:input
 />

package/src/Form/Core/DateRangePicker.svelte

@@ -1,24 +1,87 @@
-<script>
+<script lang="ts">
+  import dayjs, { type Dayjs } from "dayjs"
+  import { createEventDispatcher } from "svelte"
   import CoreDatePicker from "./DatePicker/DatePicker.svelte"
   import Icon from "../../Icon/Icon.svelte"
+  import { parseDate } from "../../helpers"
+  import { writable } from "svelte/store"
 
-  let fromDate
-  let toDate
+  export let enableTime: boolean | undefined = false
+  export let timeOnly: boolean | undefined = false
+  export let ignoreTimezones: boolean | undefined = false
+  export let value: string[] | undefined = []
+
+  const dispatch = createEventDispatcher()
+  const valueStore = writable<string[]>()
+
+  let fromDate: Dayjs | null
+  let toDate: Dayjs | null
+
+  $: valueStore.set(value || [])
+  $: parseValue($valueStore)
+
+  $: parsedFrom = fromDate ? parseDate(fromDate, { enableTime }) : undefined
+  $: parsedTo = toDate ? parseDate(toDate, { enableTime }) : undefined
+
+  const parseValue = (value: string[]) => {
+    if (!Array.isArray(value) || !value[0] || !value[1]) {
+      fromDate = null
+      toDate = null
+    } else {
+      fromDate = dayjs(value[0])
+      toDate = dayjs(value[1])
+    }
+  }
+
+  const onChangeFrom = (utc: string) => {
+    // Preserve the time if its editable
+    const fromDate = utc
+      ? enableTime
+        ? dayjs(utc)
+        : dayjs(utc).startOf("day")
+      : null
+    if (fromDate && (!toDate || fromDate.isAfter(toDate))) {
+      toDate = !enableTime ? fromDate.endOf("day") : fromDate
+    } else if (!fromDate) {
+      toDate = null
+    }
+
+    dispatch("change", [fromDate, toDate])
+  }
+
+  const onChangeTo = (utc: string) => {
+    // Preserve the time if its editable
+    const toDate = utc
+      ? enableTime
+        ? dayjs(utc)
+        : dayjs(utc).startOf("day")
+      : null
+    if (toDate && (!fromDate || toDate.isBefore(fromDate))) {
+      fromDate = !enableTime ? toDate.startOf("day") : toDate
+    } else if (!toDate) {
+      fromDate = null
+    }
+    dispatch("change", [fromDate, toDate])
+  }
 </script>
 
 <div class="date-range">
   <CoreDatePicker
-    value={fromDate}
-    on:change={e => (fromDate = e.detail)}
-    enableTime={false}
+    value={parsedFrom}
+    on:change={e => onChangeFrom(e.detail)}
+    {enableTime}
+    {timeOnly}
+    {ignoreTimezones}
   />
   <div class="arrow">
     <Icon name="ChevronRight" />
   </div>
   <CoreDatePicker
-    value={toDate}
-    on:change={e => (toDate = e.detail)}
-    enableTime={false}
+    value={parsedTo}
+    on:change={e => onChangeTo(e.detail)}
+    {enableTime}
+    {timeOnly}
+    {ignoreTimezones}
   />
 </div>
 

package/src/Form/DateRangePicker.svelte

@@ -3,7 +3,7 @@
   import DateRangePicker from "./Core/DateRangePicker.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value = null
+  export let value = undefined
   export let label = null
   export let labelPosition = "above"
   export let disabled = false
@@ -12,6 +12,8 @@
   export let helpText = null
   export let appendTo = undefined
   export let ignoreTimezones = false
+  export let enableTime = false
+  export let timeOnly = false
 
   const dispatch = createEventDispatcher()
 
@@ -29,6 +31,8 @@
     {value}
     {appendTo}
     {ignoreTimezones}
+    {enableTime}
+    {timeOnly}
     on:change={onChange}
   />
 </Field>

package/src/Icon/Icon.svelte

@@ -11,7 +11,7 @@
   export let hoverColor: string | undefined = undefined
   export let tooltip: string | undefined = undefined
   export let tooltipPosition: TooltipPosition = TooltipPosition.Bottom
-  export let tooltipType = TooltipType.Default
+  export let tooltipType: TooltipType = TooltipType.Default
   export let tooltipColor: string | undefined = undefined
   export let tooltipWrap: boolean = true
   export let newStyles: boolean = false

package/src/Layout/Layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   export let horizontal: boolean = false
   export let paddingX: "S" | "M" | "L" | "XL" | "XXL" = "M"
-  export let paddingY: "S" | "M" | "L" | "XL" | "XXL" = "M"
+  export let paddingY: "none" | "S" | "M" | "L" | "XL" | "XXL" = "M"
   export let noPadding: boolean = false
   export let gap: "XXS" | "XS" | "S" | "M" | "L" | "XL" = "M"
   export let noGap: boolean = false

package/src/context.d.ts

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

package/src/types/index.ts

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

package/src/types/scrollContext.ts

@@ -0,0 +1,3 @@
+export interface ScrollContext {
+  scrollTo: (bounds: DOMRect) => void
+}