@budibase/bbui 3.39.22 → 3.39.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "3.39.22",
+  "version": "3.39.23",
   "license": "MPL-2.0",
   "module": "dist/bbui.mjs",
   "exports": {
@@ -105,5 +105,5 @@
       }
     }
   },
-  "gitHead": "5e71f6c90d0cb25ca4b7841065824284f1e59554"
+  "gitHead": "833e219692f2ec7892cbeaef8aeaa2732d1ccb27"
 }

package/src/Badge/Badge.svelte

@@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
   import "@spectrum-css/label/dist/index-vars.css"
 
-  export let size = "M"
+  export let size: "S" | "M" | "L" = "M"
   export let grey = false
   export let red = false
   export let orange = false
@@ -11,7 +11,17 @@
   export let active = false
   export let inactive = false
   export let hoverable = false
-  export let outlineColor = null
+  export let outlineColor: string | null = null
+  export let backgroundColor: string | null = null
+  export let textColor: string | null = null
+
+  $: customStyles = [
+    outlineColor ? `border: 2px solid ${outlineColor}` : "",
+    backgroundColor ? `background-color: ${backgroundColor}` : "",
+    textColor ? `color: ${textColor}` : "",
+  ]
+    .filter(Boolean)
+    .join("; ")
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -30,7 +40,7 @@
   class:spectrum-Label--seafoam={seafoam}
   class:spectrum-Label--active={active}
   class:spectrum-Label--inactive={inactive}
-  style={outlineColor ? `border: 2px solid ${outlineColor}` : ""}
+  style={customStyles}
 >
   <slot />
 </span>

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

@@ -5,9 +5,11 @@
   import NumberInput from "./NumberInput.svelte"
   import { createEventDispatcher } from "svelte"
   import Icon from "../../../Icon/Icon.svelte"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let value
   export let startDayOfWeek = "Monday"
+  export let calendarLabels = resolveTranslationGroup("calendar")
 
   const dispatch = createEventDispatcher()
   const DaysOfWeek = [
@@ -49,6 +51,10 @@
   $: calendarDate = dayjs(value || dayjs()).startOf("month")
   $: dayHeaders = getDayHeaders(startDayOfWeek)
   $: weekStarts = getWeekStarts(calendarDate, DayIndex[startDayOfWeek])
+  $: monthOptions = MonthsOfYear.map((month, idx) => ({
+    label: getTranslatedMonth(month),
+    value: idx,
+  }))
 
   const getWeekStarts = (monthStart, startDayIndex) => {
     if (!monthStart?.isValid()) {
@@ -74,6 +80,20 @@
     return [...DaysOfWeek.slice(index), ...DaysOfWeek.slice(0, index)]
   }
 
+  const getTranslatedDay = day => {
+    return calendarLabels?.[day.toLowerCase()] ?? day
+  }
+
+  const getTranslatedMonth = month => {
+    return calendarLabels?.[month.toLowerCase()] ?? month
+  }
+
+  const getDateTitle = date => {
+    return `${getTranslatedDay(date.format("dddd"))}, ${getTranslatedMonth(
+      date.format("MMMM")
+    )} ${date.date()}, ${date.year()}`
+  }
+
   const handleCalendarYearChange = e => {
     calendarDate = calendarDate.year(parseInt(e.target.value))
   }
@@ -108,8 +128,8 @@
       <div class="month-selector">
         <Select
           autoWidth
-          placeholder={null}
-          options={MonthsOfYear.map((m, idx) => ({ label: m, value: idx }))}
+          placeholder={calendarLabels?.datePickerPlaceholder}
+          options={monthOptions}
           value={calendarDate.month()}
           on:change={e => (calendarDate = calendarDate.month(e.detail))}
         />
@@ -150,8 +170,11 @@
         <tr>
           {#each dayHeaders as day}
             <th scope="col" class="spectrum-Calendar-tableCell">
-              <abbr class="spectrum-Calendar-dayOfWeek" title={day}>
-                {day[0]}
+              <abbr
+                class="spectrum-Calendar-dayOfWeek"
+                title={getTranslatedDay(day)}
+              >
+                {getTranslatedDay(day)[0]}
               </abbr>
             </th>
           {/each}
@@ -168,7 +191,7 @@
                 aria-disabled="true"
                 aria-selected="false"
                 aria-invalid="false"
-                title={date.format("dddd, MMMM D, YYYY")}
+                title={getDateTitle(date)}
                 on:click={() => handleDateChange(date)}
               >
                 <span

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

@@ -77,6 +77,7 @@
   }
   .spectrum-Datepicker {
     width: 100%;
+    min-width: 104px;
     overflow: hidden;
   }
   .spectrum-Datepicker .spectrum-Textfield {

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

@@ -10,6 +10,7 @@
   import { PopoverAlignment } from "../../../constants"
   import type dayjs from "dayjs"
   import { getLocaleStartDayOfWeek, type Weekday } from "./utils"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let id = null
   export let disabled = false
@@ -26,6 +27,7 @@
   export let align: PopoverAlignment = PopoverAlignment.Left
   const browserStartDayOfWeek = getLocaleStartDayOfWeek()
   export let startDayOfWeek: Weekday | undefined = undefined
+  export let calendarLabels = resolveTranslationGroup("calendar")
 
   let isOpen = false
   let anchor: HTMLElement
@@ -87,6 +89,7 @@
       {enableTime}
       {timeOnly}
       startDayOfWeek={resolvedStartDayOfWeek}
+      {calendarLabels}
       value={parsedValue}
       on:change
     />

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

@@ -5,6 +5,7 @@
   import ActionButton from "../../../ActionButton/ActionButton.svelte"
   import { createEventDispatcher, onMount } from "svelte"
   import { stringifyDate } from "../../../helpers"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let useKeyboardShortcuts = true
   export let ignoreTimezones
@@ -12,6 +13,7 @@
   export let timeOnly
   export let value
   export let startDayOfWeek = "Monday"
+  export let calendarLabels = resolveTranslationGroup("calendar")
 
   const dispatch = createEventDispatcher()
   let calendar
@@ -57,6 +59,7 @@
     <Calendar
       {value}
       {startDayOfWeek}
+      {calendarLabels}
       on:change={e => handleChange(e.detail)}
       bind:this={calendar}
     />
@@ -71,10 +74,12 @@
         size="S"
         on:click={() => dispatch("change", null)}
       >
-        Clear
+        {calendarLabels?.datePickerClear || "Clear"}
       </ActionButton>
       <ActionButton size="S" on:click={setToNow}>
-        {showTime ? "Now" : "Today"}
+        {showTime
+          ? calendarLabels?.datePickerNow || "Now"
+          : calendarLabels?.todayButton || "Today"}
       </ActionButton>
     </div>
   </div>

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

@@ -1,10 +1,12 @@
 <script>
   export let value
-  export let min
-  export let max
+  export let min = undefined
+  export let max = undefined
   export let hideArrows = false
-  export let width
+  export let width = undefined
   export let type = "number"
+  export let disabled = false
+  export let readonly = false
 
   $: style = width ? `width:${width}px;` : ""
 
@@ -18,6 +20,8 @@
   {value}
   {min}
   {max}
+  {disabled}
+  {readonly}
   on:click={selectAll}
   on:change
   on:input

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

@@ -1,21 +1,34 @@
-<script>
+<script lang="ts">
+  import type { Dayjs } from "dayjs"
   import dayjs from "dayjs"
   import NumberInput from "./NumberInput.svelte"
   import { createEventDispatcher } from "svelte"
 
-  export let value
+  export let value: Dayjs | undefined
+  export let disableClearing = false
+  export let disabled = false
+  export let readonly = false
 
-  const dispatch = createEventDispatcher()
+  const dispatch = createEventDispatcher<{ change: Dayjs | undefined }>()
 
   $: displayValue = value?.format("HH:mm")
 
-  const handleChange = e => {
-    if (!e.target.value) {
+  const handleChange = async (e: Event) => {
+    if (disabled || readonly) {
+      return
+    }
+
+    const target = e.target as HTMLInputElement
+    if (!target.value) {
+      if (disableClearing) {
+        target.value = displayValue || "00:00"
+        return
+      }
       dispatch("change", undefined)
       return
     }
 
-    const [hour, minute] = e.target.value.split(":").map(x => parseInt(x))
+    const [hour, minute] = target.value.split(":").map(x => parseInt(x))
     dispatch(
       "change",
       (value || dayjs()).hour(hour).minute(minute).second(0).millisecond(0)
@@ -28,6 +41,8 @@
     hideArrows
     type={"time"}
     value={displayValue}
+    {disabled}
+    {readonly}
     on:input={handleChange}
     on:change={handleChange}
   />

package/src/Form/Core/DateRangePicker.svelte

@@ -6,12 +6,14 @@
   import { parseDate } from "../../helpers"
   import { writable } from "svelte/store"
   import { getLocaleStartDayOfWeek, type Weekday } from "./DatePicker/utils"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let enableTime: boolean | undefined = false
   export let timeOnly: boolean | undefined = false
   export let ignoreTimezones: boolean | undefined = false
   const browserStartDayOfWeek = getLocaleStartDayOfWeek()
   export let startDayOfWeek: Weekday | undefined = undefined
+  export let calendarLabels = resolveTranslationGroup("calendar")
   export let value: string[] | undefined = []
 
   const dispatch = createEventDispatcher()
@@ -77,6 +79,7 @@
     {timeOnly}
     {ignoreTimezones}
     startDayOfWeek={resolvedStartDayOfWeek}
+    {calendarLabels}
   />
   <div class="arrow">
     <Icon name="caret-right" />
@@ -88,6 +91,7 @@
     {timeOnly}
     {ignoreTimezones}
     startDayOfWeek={resolvedStartDayOfWeek}
+    {calendarLabels}
   />
 </div>
 

package/src/Form/Core/TextArea.svelte

@@ -100,6 +100,6 @@
   }
   textarea {
     resize: vertical;
-    min-height: 80px !important;
+    min-height: 38px !important;
   }
 </style>

package/src/Form/DatePicker.svelte

@@ -3,6 +3,7 @@
   import DatePicker from "./Core/DatePicker/DatePicker.svelte"
   import { createEventDispatcher } from "svelte"
   import type { LabelPosition } from "../types"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let value: V | null = null
   export let label = undefined
@@ -16,6 +17,7 @@
   export let appendTo = undefined
   export let ignoreTimezones = false
   export let helpText = undefined
+  export let calendarLabels = resolveTranslationGroup("calendar")
 
   const dispatch = createEventDispatcher()
 
@@ -36,6 +38,7 @@
     {timeOnly}
     {appendTo}
     {ignoreTimezones}
+    {calendarLabels}
     on:change={onChange}
   />
 </Field>

package/src/Form/DateRangePicker.svelte

@@ -2,6 +2,7 @@
   import Field from "./Field.svelte"
   import DateRangePicker from "./Core/DateRangePicker.svelte"
   import { createEventDispatcher } from "svelte"
+  import { resolveTranslationGroup } from "@budibase/shared-core"
 
   export let value = undefined
   export let label = null
@@ -14,6 +15,7 @@
   export let ignoreTimezones = false
   export let enableTime = false
   export let timeOnly = false
+  export let calendarLabels = resolveTranslationGroup("calendar")
 
   const dispatch = createEventDispatcher()
 
@@ -33,6 +35,7 @@
     {ignoreTimezones}
     {enableTime}
     {timeOnly}
+    {calendarLabels}
     on:change={onChange}
   />
 </Field>

package/src/Form/TimeField.svelte

@@ -0,0 +1,190 @@
+<script lang="ts" module>
+  import type { LabelPosition } from "../types"
+
+  export type TimeFieldValue = string | null | undefined
+
+  export interface Props {
+    value?: TimeFieldValue
+    label?: string
+    labelPosition?: LabelPosition
+    disabled?: boolean
+    readonly?: boolean
+    error?: string | undefined | false
+    placeholder?: string | null
+    helpText?: string
+    required?: boolean
+    id?: string
+    name?: string
+    disableClearing?: boolean
+    onchange?: (value: string | undefined) => void
+  }
+</script>
+
+<script lang="ts">
+  import "@spectrum-css/textfield/dist/index-vars.css"
+  import dayjs from "dayjs"
+  import type { Dayjs } from "dayjs"
+  import TimePicker from "./Core/DatePicker/TimePicker.svelte"
+  import Field from "./Field.svelte"
+
+  let {
+    value = $bindable<TimeFieldValue>(undefined),
+    label = undefined,
+    labelPosition = "above",
+    disabled = false,
+    readonly = false,
+    error = undefined,
+    helpText = undefined,
+    required = false,
+    id = undefined,
+    name = undefined,
+    disableClearing = false,
+    onchange,
+  }: Props = $props()
+
+  const FALLBACK_TIME = "00:00"
+
+  const parseValue = (time: TimeFieldValue) => {
+    if (!time) {
+      return undefined
+    }
+
+    const [hour, minute] = time.split(":").map(part => Number(part))
+    if (
+      !Number.isInteger(hour) ||
+      !Number.isInteger(minute) ||
+      hour < 0 ||
+      hour > 23 ||
+      minute < 0 ||
+      minute > 59
+    ) {
+      return undefined
+    }
+
+    return dayjs().hour(hour).minute(minute).second(0).millisecond(0)
+  }
+
+  const handleChange = (event: CustomEvent<Dayjs | undefined>) => {
+    const nextValue = event.detail?.format("HH:mm")
+    if (!nextValue && disableClearing) {
+      return
+    }
+    value = nextValue
+    onchange?.(nextValue)
+  }
+
+  const parsedValue = $derived(parseValue(value))
+  let isFocused = $state(false)
+
+  $effect(() => {
+    if (disableClearing && !value) {
+      value = FALLBACK_TIME
+      onchange?.(value)
+    }
+  })
+</script>
+
+<Field {id} {helpText} {label} {labelPosition} {error} {required}>
+  <div
+    class="time-field spectrum-Textfield"
+    class:is-disabled={disabled}
+    class:is-readonly={readonly}
+    class:is-invalid={!!error}
+    class:is-focused={isFocused}
+    aria-disabled={disabled}
+    onfocusin={() => {
+      isFocused = true
+    }}
+    onfocusout={() => {
+      isFocused = false
+    }}
+  >
+    <TimePicker
+      value={parsedValue}
+      {disableClearing}
+      {disabled}
+      {readonly}
+      on:change={handleChange}
+    />
+    {#if name}
+      <input type="hidden" {name} value={value ?? ""} {disabled} />
+    {/if}
+  </div>
+</Field>
+
+<style>
+  .time-field {
+    display: inline-flex;
+    align-items: center;
+    min-width: 104px;
+    width: fit-content;
+    --spectrum-textfield-padding-bottom: var(--spectrum-textfield-padding-top);
+  }
+
+  .time-field.is-disabled,
+  .time-field.is-readonly {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .time-field :global(.time-picker) {
+    width: 100%;
+  }
+
+  .time-field :global(input[type="time"]) {
+    background-color: var(
+      --spectrum-textfield-m-background-color,
+      var(--spectrum-global-color-gray-50)
+    );
+    border: var(--spectrum-textfield-border-size) solid
+      var(
+        --spectrum-textfield-m-border-color,
+        var(--spectrum-alias-border-color)
+      );
+    border-radius: var(--spectrum-textfield-border-radius);
+    box-sizing: border-box !important;
+    color: var(
+      --spectrum-textfield-m-text-color,
+      var(--spectrum-alias-text-color)
+    );
+    font-family: var(--font-sans);
+    font-size: var(--spectrum-textfield-text-size);
+    font-weight: var(--spectrum-regular-font-weight);
+    height: var(--spectrum-textfield-height);
+    line-height: var(--spectrum-textfield-text-line-height);
+    margin: 0;
+    min-width: 72px;
+    outline: none;
+    padding: var(--spectrum-textfield-padding-top)
+      calc(var(--spectrum-textfield-padding-x) + var(--spacing-xs))
+      var(--spectrum-textfield-padding-bottom) !important;
+    text-indent: var(--spacing-xs);
+    width: 100%;
+  }
+
+  .time-field :global(input[type="time"]:hover),
+  .time-field :global(input[type="time"]:focus) {
+    background-color: var(
+      --spectrum-textfield-m-background-color-hover,
+      var(--spectrum-global-color-gray-50)
+    );
+    border-color: var(
+      --spectrum-textfield-m-border-color-hover,
+      var(--spectrum-alias-border-color-hover)
+    );
+  }
+
+  .time-field :global(input[type="time"]:focus) {
+    border-color: var(
+      --spectrum-textfield-m-border-color-down,
+      var(--spectrum-alias-border-color-mouse-focus)
+    );
+  }
+
+  .time-field.is-invalid :global(input[type="time"]) {
+    border-color: var(
+      --spectrum-textfield-m-border-color-error,
+      var(--spectrum-semantic-negative-color-default)
+    );
+  }
+</style>

package/src/index.ts

@@ -24,6 +24,7 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Stepper } from "./Form/Stepper.svelte"
 export { default as TextArea } from "./Form/TextArea.svelte"
+export { default as TimeField } from "./Form/TimeField.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 
 // Core form components to be used elsewhere (standard components)