From afffd4d234d551a50d1c1b41977bf8db87242a3d Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 2 Nov 2023 15:37:18 +0000 Subject: [PATCH 01/91] Add initial version of new date picker without time support --- packages/bbui/package.json | 1 + .../bbui/src/Form/Core/BBDatePicker.svelte | 313 ++++++++++++++++++ packages/bbui/src/index.js | 1 + .../pages/builder/portal/apps/index.svelte | 31 ++ yarn.lock | 5 + 5 files changed, 351 insertions(+) create mode 100644 packages/bbui/src/Form/Core/BBDatePicker.svelte diff --git a/packages/bbui/package.json b/packages/bbui/package.json index 78eed2b608..ccc59646b4 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -44,6 +44,7 @@ "@spectrum-css/avatar": "3.0.2", "@spectrum-css/button": "3.0.1", "@spectrum-css/buttongroup": "3.0.2", + "@spectrum-css/calendar": "3.0.2", "@spectrum-css/checkbox": "3.0.2", "@spectrum-css/dialog": "3.0.1", "@spectrum-css/divider": "1.0.3", diff --git a/packages/bbui/src/Form/Core/BBDatePicker.svelte b/packages/bbui/src/Form/Core/BBDatePicker.svelte new file mode 100644 index 0000000000..d159b3dcd6 --- /dev/null +++ b/packages/bbui/src/Form/Core/BBDatePicker.svelte @@ -0,0 +1,313 @@ + + +
+
+ {#if !!error} + + {/if} + +
+ +
+ + +
+
+
+ {activeMonth.format("MMMM YYYY")} +
+ + +
+
+ + + + {#each DaysOfWeek as day} + + {/each} + + + + {#each mondays as monday} + + {#each [0, 1, 2, 3, 4, 5, 6] as dayOffset} + {@const date = monday.add(dayOffset, "days")} + {@const outsideMonth = date.month() !== activeMonth.month()} + + {/each} + + {/each} + + +
+
+ + + diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index cda6b5acbf..407a8c2cec 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -54,6 +54,7 @@ export { default as Notification } from "./Notification/Notification.svelte" export { default as SideNavigation } from "./SideNavigation/Navigation.svelte" export { default as SideNavigationItem } from "./SideNavigation/Item.svelte" export { default as DatePicker } from "./Form/DatePicker.svelte" +export { default as BBDatePicker } from "./Form/Core/BBDatePicker.svelte" export { default as Multiselect } from "./Form/Multiselect.svelte" export { default as Context } from "./context" export { default as Table } from "./Table/Table.svelte" diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 59267f37e7..828e620dba 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -10,6 +10,8 @@ Notification, Body, Search, + DatePicker, + BBDatePicker, } from "@budibase/bbui" import Spinner from "components/common/Spinner.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte" @@ -202,9 +204,38 @@ notifications.error("Error getting init info") } }) + + let foo = "2023-11-14T15:00:00" +
+

Date only

+
+ (foo = e.detail)} + /> +
+

Date time

+
+ (foo = e.detail)} /> +
+

Date time no timezone

+
+ (foo = e.detail)} + /> +
+
+
+
+
+ {#each Object.keys(automationErrors || {}) as appId} Date: Thu, 2 Nov 2023 17:20:36 +0000 Subject: [PATCH 02/91] Add editable month and year picker to calendar --- packages/bbui/src/Actions/click_outside.js | 15 +-- .../bbui/src/Form/Core/BBDatePicker.svelte | 101 ++++++++++++++++-- .../pages/builder/portal/apps/index.svelte | 1 + 3 files changed, 100 insertions(+), 17 deletions(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 1961dca47c..e2cf38953c 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,8 +1,4 @@ -const ignoredClasses = [ - ".flatpickr-calendar", - ".spectrum-Popover", - ".download-js-link", -] +const ignoredClasses = [".flatpickr-calendar", ".download-js-link"] let clickHandlers = [] /** @@ -25,7 +21,14 @@ const handleClick = event => { return } - // Ignore clicks for modals, unless the handler is registered from a modal + // Ignore clicks for popovers, unless the handler is registered from one + const sourceInPopover = handler.anchor.closest(".spectrum-Popover") != null + const clickInPopover = event.target.closest(".spectrum-Popover") != null + if (clickInPopover && !sourceInPopover) { + return + } + + // Ignore clicks for modals, unless the handler is registered from one const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null const clickInModal = event.target.closest(".spectrum-Underlay") != null if (clickInModal && !sourceInModal) { diff --git a/packages/bbui/src/Form/Core/BBDatePicker.svelte b/packages/bbui/src/Form/Core/BBDatePicker.svelte index d159b3dcd6..7163314246 100644 --- a/packages/bbui/src/Form/Core/BBDatePicker.svelte +++ b/packages/bbui/src/Form/Core/BBDatePicker.svelte @@ -6,6 +6,7 @@ import Popover from "../../Popover/Popover.svelte" import dayjs from "dayjs" import { createEventDispatcher } from "svelte" + import Select from "../Select.svelte" export let id = null export let disabled = false @@ -30,22 +31,40 @@ "Saturday", "Sunday", ] + const MonthsOfYear = [ + "January", + "February", + "March", + "April", + "May", + "June", + "July", + "August", + "September", + "October", + "November", + "December", + ] let isOpen = false let anchor let calendar let today = dayjs() - let activeMonth + let calendarDate $: parsedValue = parseValue(value) $: displayValue = getDisplayValue(parsedValue) - $: activeMonth = dayjs(parsedValue || today).startOf("month") - $: mondays = getMondays(activeMonth) + $: calendarDate = dayjs(parsedValue || today).startOf("month") + $: mondays = getMondays(calendarDate) const clearDateOnBackspace = event => { + // Ignore if we're typing a value + if (document.activeElement?.tagName.toLowerCase() === "input") { + return + } if (["Backspace", "Clear", "Delete"].includes(event.key)) { handleChange(null) - calendar.hide() + calendar?.hide() } } @@ -129,6 +148,17 @@ dispatch("change", newValue) } + + const handleYearChange = e => { + let year = parseInt(e.target.value) + if (isNaN(year)) { + year = calendarDate.year() + } else { + year = Math.max(0, Math.min(9999, year)) + } + e.target.value = year + calendarDate = calendarDate.year(year) + }
- {activeMonth.format("MMMM YYYY")} +
+
From 1b5bb8dd044f19bbc15ac765265fd4a9f2b30271 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 2 Nov 2023 18:35:58 +0000 Subject: [PATCH 03/91] Add style improvements to new date picker --- packages/bbui/src/Form/Core/BBDatePicker.svelte | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/bbui/src/Form/Core/BBDatePicker.svelte b/packages/bbui/src/Form/Core/BBDatePicker.svelte index 7163314246..8c99caea36 100644 --- a/packages/bbui/src/Form/Core/BBDatePicker.svelte +++ b/packages/bbui/src/Form/Core/BBDatePicker.svelte @@ -69,6 +69,7 @@ } const onOpen = () => { + calendarDate = dayjs(parsedValue || today).startOf("month") isOpen = true if (useKeyboardShortcuts) { document.addEventListener("keyup", clearDateOnBackspace) @@ -307,13 +308,13 @@ aria-selected="false" aria-invalid="false" title={date.format("dddd, MMMM D, YYYY")} - on:click={outsideMonth ? null : handleChange(date)} + on:click={() => handleChange(date)} > {date.date()} @@ -350,9 +351,6 @@ .spectrum-Calendar { padding: 8px; } - .is-outsideMonth { - pointer-events: none; - } .spectrum-Calendar-title { display: flex; justify-content: center; @@ -362,6 +360,10 @@ .spectrum-Calendar-header button { border-radius: 4px; } + .spectrum-Calendar-date.is-outsideMonth { + visibility: visible; + color: var(--spectrum-global-color-gray-400); + } .month-selector :global(.spectrum-Picker), .year-selector { @@ -377,6 +379,7 @@ font-family: var(--font-sans); } .month-selector :global(.spectrum-Picker:hover), + .month-selector :global(.spectrum-Picker.is-open), .year-selector:hover { background: var(--spectrum-global-color-gray-200); } From f078039aa4d7c962d67948ddaace7b7cf2bb17b9 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 2 Nov 2023 20:34:40 +0000 Subject: [PATCH 04/91] Add time field and sanitise all typeable fields to prevent errors and improve experience --- .../bbui/src/Form/Core/BBDatePicker.svelte | 144 +++++++++++++++--- 1 file changed, 121 insertions(+), 23 deletions(-) diff --git a/packages/bbui/src/Form/Core/BBDatePicker.svelte b/packages/bbui/src/Form/Core/BBDatePicker.svelte index 8c99caea36..92dbb7f18e 100644 --- a/packages/bbui/src/Form/Core/BBDatePicker.svelte +++ b/packages/bbui/src/Form/Core/BBDatePicker.svelte @@ -7,6 +7,8 @@ import dayjs from "dayjs" import { createEventDispatcher } from "svelte" import Select from "../Select.svelte" + import Icon from "../../Icon/Icon.svelte" + import ActionButton from "../../ActionButton/ActionButton.svelte" export let id = null export let disabled = false @@ -150,16 +152,50 @@ dispatch("change", newValue) } - const handleYearChange = e => { - let year = parseInt(e.target.value) - if (isNaN(year)) { - year = calendarDate.year() - } else { - year = Math.max(0, Math.min(9999, year)) - } - e.target.value = year - calendarDate = calendarDate.year(year) + const handleMinuteChange = e => { + handleChange(parsedValue.minute(parseInt(e.target.value))) } + + const handleHourChange = e => { + handleChange(parsedValue.hour(parseInt(e.target.value))) + } + + const handleDateChange = date => { + // Select this date at midnight if no current date + if (!parsedValue) { + handleChange(date) + } + // Otherwise persist selected time + else { + handleChange( + parsedValue.year(date.year()).month(date.month()).date(date.date()) + ) + } + } + + const handleCalendarYearChange = e => { + calendarDate = calendarDate.year(parseInt(e.target.value)) + } + + const cleanNumber = ({ max, pad, fallback }) => { + return e => { + if (e.target.value) { + const value = parseInt(e.target.value) + if (isNaN(value)) { + e.target.value = fallback + } else { + e.target.value = Math.min(max, value).toString().padStart(pad, "0") + } + } else { + e.target.value = fallback + } + } + } + + // Sanitization utils + const cleanYear = cleanNumber({ max: 9999, pad: 0, fallback: today.year() }) + const cleanHour = cleanNumber({ max: 23, pad: 2, fallback: "00" }) + const cleanMinute = cleanNumber({ max: 59, pad: 2, fallback: "00" })
+ {#if parsedValue && enableTime} +
+ + : + +
+ {/if} From de0f87fa324e4bf80c94cac5026f4dbd64f4a470 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 09:34:54 +0000 Subject: [PATCH 05/91] Break new datetime picker into granular components --- .../bbui/src/Form/Core/BBDatePicker.svelte | 493 ------------------ .../Form/Core/DateTimePicker/Calendar.svelte | 206 ++++++++ .../Core/DateTimePicker/DateTimeField.svelte | 98 ++++ .../Core/DateTimePicker/DateTimePicker.svelte | 170 ++++++ .../Core/DateTimePicker/TimePicker.svelte | 65 +++ .../src/Form/Core/DateTimePicker/utils.js | 14 + packages/bbui/src/index.js | 2 +- .../pages/builder/portal/apps/index.svelte | 16 +- 8 files changed, 566 insertions(+), 498 deletions(-) delete mode 100644 packages/bbui/src/Form/Core/BBDatePicker.svelte create mode 100644 packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte create mode 100644 packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte create mode 100644 packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte create mode 100644 packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte create mode 100644 packages/bbui/src/Form/Core/DateTimePicker/utils.js diff --git a/packages/bbui/src/Form/Core/BBDatePicker.svelte b/packages/bbui/src/Form/Core/BBDatePicker.svelte deleted file mode 100644 index 92dbb7f18e..0000000000 --- a/packages/bbui/src/Form/Core/BBDatePicker.svelte +++ /dev/null @@ -1,493 +0,0 @@ - - -
-
- {#if !!error} - - {/if} - -
- -
- - -
-
-
-
- -
- - -
-
- - - - {#each DaysOfWeek as day} - - {/each} - - - - {#each mondays as monday} - - {#each [0, 1, 2, 3, 4, 5, 6] as dayOffset} - {@const date = monday.add(dayOffset, "days")} - {@const outsideMonth = date.month() !== calendarDate.month()} - - {/each} - - {/each} - - -
-
- {#if parsedValue && enableTime} -
- - : - -
- {/if} - - - diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte new file mode 100644 index 0000000000..f943a63254 --- /dev/null +++ b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte @@ -0,0 +1,206 @@ + + +
+
+
+
+ +
+ + +
+
+ + + + {#each DaysOfWeek as day} + + {/each} + + + + {#each mondays as monday} + + {#each [0, 1, 2, 3, 4, 5, 6] as dayOffset} + {@const date = monday.add(dayOffset, "days")} + {@const outsideMonth = date.month() !== calendarDate.month()} + + {/each} + + {/each} + + +
+
+ + diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte new file mode 100644 index 0000000000..cf7d141109 --- /dev/null +++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte @@ -0,0 +1,98 @@ + + +
+
+ {#if !!error} + + {/if} + +
+ +
+ + diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte new file mode 100644 index 0000000000..a0e51a38fb --- /dev/null +++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte @@ -0,0 +1,170 @@ + + + + + + {#if isOpen} +
+ {#if showCalendar} + + {/if} + {#if showCalendar && showTime} +
+ {/if} + {#if showTime} + + {/if} +
+ {/if} + + + diff --git a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte new file mode 100644 index 0000000000..60e1f313dc --- /dev/null +++ b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte @@ -0,0 +1,65 @@ + + +
+ + : + +
+ + diff --git a/packages/bbui/src/Form/Core/DateTimePicker/utils.js b/packages/bbui/src/Form/Core/DateTimePicker/utils.js new file mode 100644 index 0000000000..953c3eb6c0 --- /dev/null +++ b/packages/bbui/src/Form/Core/DateTimePicker/utils.js @@ -0,0 +1,14 @@ +export const cleanInput = ({ max, pad, fallback }) => { + return e => { + if (e.target.value) { + const value = parseInt(e.target.value) + if (isNaN(value)) { + e.target.value = fallback + } else { + e.target.value = Math.min(max, value).toString().padStart(pad, "0") + } + } else { + e.target.value = fallback + } + } +} diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 407a8c2cec..689cde05d7 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -54,7 +54,7 @@ export { default as Notification } from "./Notification/Notification.svelte" export { default as SideNavigation } from "./SideNavigation/Navigation.svelte" export { default as SideNavigationItem } from "./SideNavigation/Item.svelte" export { default as DatePicker } from "./Form/DatePicker.svelte" -export { default as BBDatePicker } from "./Form/Core/BBDatePicker.svelte" +export { default as DateTimePicker } from "./Form/Core/DateTimePicker/DateTimePicker.svelte" export { default as Multiselect } from "./Form/Multiselect.svelte" export { default as Context } from "./context" export { default as Table } from "./Table/Table.svelte" diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 5fca9fb189..dbe4b9626d 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -11,7 +11,7 @@ Body, Search, DatePicker, - BBDatePicker, + DateTimePicker, } from "@budibase/bbui" import Spinner from "components/common/Spinner.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte" @@ -212,7 +212,7 @@

Date only

- (foo = e.detail)} @@ -220,17 +220,25 @@

Date time

- (foo = e.detail)} /> + (foo = e.detail)} + />

Date time no timezone

- (foo = e.detail)} />
+

Time only

+
+ (foo = e.detail)} /> +



From a6bda4fce7aacf66a8f0d0712964615ce56d1cfd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 09:35:24 +0000 Subject: [PATCH 06/91] Remove unused props --- .../bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte index a0e51a38fb..87fbe9f70b 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte @@ -14,8 +14,6 @@ export let placeholder = null export let timeOnly = false export let ignoreTimezones = false - export let range = false - export let flatpickr export let useKeyboardShortcuts = true const dispatch = createEventDispatcher() From 819df964bc59db0ae2ec026a44153a6efd917e08 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 11:18:03 +0000 Subject: [PATCH 07/91] Fix style issues in client apps and remove extraneous dependencies --- packages/bbui/package.json | 2 +- .../Form/Core/DateTimePicker/Calendar.svelte | 16 ++++++- .../Core/DateTimePicker/DateTimeField.svelte | 12 +++--- .../Core/DateTimePicker/DateTimePicker.svelte | 3 ++ packages/client/package.json | 9 +--- yarn.lock | 42 +++---------------- 6 files changed, 30 insertions(+), 54 deletions(-) diff --git a/packages/bbui/package.json b/packages/bbui/package.json index ccc59646b4..3601af74e9 100644 --- a/packages/bbui/package.json +++ b/packages/bbui/package.json @@ -44,7 +44,7 @@ "@spectrum-css/avatar": "3.0.2", "@spectrum-css/button": "3.0.1", "@spectrum-css/buttongroup": "3.0.2", - "@spectrum-css/calendar": "3.0.2", + "@spectrum-css/calendar": "3.2.7", "@spectrum-css/checkbox": "3.0.2", "@spectrum-css/dialog": "3.0.1", "@spectrum-css/divider": "1.0.3", diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte index f943a63254..f8386fe6da 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte @@ -1,5 +1,4 @@ + + + + diff --git a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte index 60e1f313dc..a062c4ce0b 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte @@ -1,6 +1,7 @@
- : - @@ -45,7 +46,6 @@ diff --git a/packages/client/src/components/app/forms/NewDateTimeField.svelte b/packages/client/src/components/app/forms/NewDateTimeField.svelte new file mode 100644 index 0000000000..6bcd20d250 --- /dev/null +++ b/packages/client/src/components/app/forms/NewDateTimeField.svelte @@ -0,0 +1,53 @@ + + + + {#if fieldState} + + {/if} + From 96bc6fc789521b536e6a128da7a1f1acdb81452f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 17:05:27 +0000 Subject: [PATCH 09/91] Add better support for time only date strings --- .../Form/Core/DateTimePicker/DateTimePicker.svelte | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte index b04ae3cdb6..3ae2571166 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte @@ -56,8 +56,17 @@ } const parseValue = value => { - // Sanity check that we have a valid value - const parsedDate = dayjs(value) + let parsedDate + + // Attempt to parse as a time-only string if required + if (typeof value === "string" && timeOnly) { + parsedDate = dayjs(`0-${value}`) + } + + // Attempt to parse as normal if required + if (!parsedDate?.isValid()) { + parsedDate = dayjs(value) + } if (!parsedDate?.isValid()) { return null } From 93630b36e2a57b83d197c65d816d42eed849f2e1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 17:07:31 +0000 Subject: [PATCH 10/91] Fix small inconsistency when picker is open for multiple minutes --- packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte | 2 +- packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte index d48afa1f35..ae32190e2e 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte @@ -34,7 +34,7 @@ const now = dayjs() let calendarDate - $: calendarDate = dayjs(value || now).startOf("month") + $: calendarDate = dayjs(value || dayjs()).startOf("month") $: mondays = getMondays(calendarDate) const getMondays = monthStart => { diff --git a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte index a062c4ce0b..adf2a5e87a 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte @@ -6,9 +6,7 @@ export let value export let onChange - const now = dayjs() - - $: displayValue = value || now + $: displayValue = value || dayjs() const handleHourChange = e => { onChange(displayValue.hour(parseInt(e.target.value))) From e758582822f474aa7e2c3112fd34a8f022952b00 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 19:26:43 +0000 Subject: [PATCH 11/91] Add cross browser style improvements for datepicker --- .../Form/Core/DateTimePicker/Calendar.svelte | 13 ++++++++++--- .../Core/DateTimePicker/DateTimePicker.svelte | 18 ++++++++++++++---- .../Core/DateTimePicker/NumberInput.svelte | 1 + 3 files changed, 25 insertions(+), 7 deletions(-) diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte index ae32190e2e..6491ba94ab 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte @@ -61,6 +61,10 @@ onChange(base.year(date.year()).month(date.month()).date(date.date())) } + export const setDate = date => { + calendarDate = date + } + const cleanYear = cleanInput({ max: 9999, pad: 0, fallback: now.year() }) @@ -85,6 +89,7 @@ value={calendarDate.year()} min={0} max={9999} + width={64} on:change={handleCalendarYearChange} on:input={cleanYear} /> @@ -173,6 +178,9 @@ .spectrum-Calendar { width: auto; } + .spectrum-Calendar-header { + width: auto; + } .spectrum-Calendar-title { display: flex; justify-content: flex-start; @@ -196,12 +204,11 @@ background: var(--spectrum-global-color-blue-400); } .spectrum-Calendar tr { + box-sizing: content-box; height: 40px; } .spectrum-Calendar-tableCell { - height: 32px; - width: 32px; - padding: 4px; + box-sizing: content-box; } .spectrum-Calendar-nextMonth, .spectrum-Calendar-prevMonth { diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte index 3ae2571166..cccfea612c 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte @@ -25,6 +25,7 @@ let isOpen = false let anchor let popover + let calendar $: parsedValue = parseValue(value) $: showCalendar = !timeOnly @@ -107,6 +108,12 @@ dispatch("change", newValue) } + + const setToNow = () => { + const now = dayjs() + calendar?.setDate(now) + handleChange(now) + } {#if showCalendar} - + {/if}
{#if showTime} @@ -147,7 +158,7 @@ > Clear - handleChange(dayjs())}> + {showTime ? "Now" : "Today"}
@@ -164,7 +175,7 @@ display: flex; justify-content: space-between; align-items: center; - gap: 32px; + gap: 60px; } .footer.spaced { padding-top: 14px; @@ -175,6 +186,5 @@ display: flex; justify-content: flex-end; gap: 6px; - margin-right: 4px; } diff --git a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte index 5b7c6dccce..8d7c72e94e 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte +++ b/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte @@ -34,6 +34,7 @@ font-weight: bold; font-family: var(--font-sans); -webkit-font-smoothing: antialiased; + box-sizing: content-box; } input:focus, input:hover { From 78af50bafe9956793ace3f78c3aa77a9f367879b Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 19:34:12 +0000 Subject: [PATCH 12/91] Use new datepicker except when a range is needed --- .../Calendar.svelte | 0 .../DateInput.svelte} | 0 .../Form/Core/DatePicker/DatePicker.svelte | 10 ++++ .../FlatpickrDatePicker.svelte} | 2 +- .../NumberInput.svelte | 0 .../SpectrumDatePicker.svelte} | 2 +- .../TimePicker.svelte | 0 .../{DateTimePicker => DatePicker}/utils.js | 0 packages/bbui/src/Form/Core/index.js | 2 +- packages/bbui/src/Form/DatePicker.svelte | 2 +- packages/bbui/src/index.js | 2 +- .../new/_components/componentStructure.json | 1 + .../pages/builder/portal/apps/index.svelte | 40 -------------- .../app/forms/NewDateTimeField.svelte | 53 ------------------- 14 files changed, 16 insertions(+), 98 deletions(-) rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/Calendar.svelte (100%) rename packages/bbui/src/Form/Core/{DateTimePicker/DateTimeField.svelte => DatePicker/DateInput.svelte} (100%) create mode 100644 packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte rename packages/bbui/src/Form/Core/{DatePicker.svelte => DatePicker/FlatpickrDatePicker.svelte} (99%) rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/NumberInput.svelte (100%) rename packages/bbui/src/Form/Core/{DateTimePicker/DateTimePicker.svelte => DatePicker/SpectrumDatePicker.svelte} (98%) rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/TimePicker.svelte (100%) rename packages/bbui/src/Form/Core/{DateTimePicker => DatePicker}/utils.js (100%) delete mode 100644 packages/client/src/components/app/forms/NewDateTimeField.svelte diff --git a/packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte similarity index 100% rename from packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte rename to packages/bbui/src/Form/Core/DatePicker/Calendar.svelte diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte b/packages/bbui/src/Form/Core/DatePicker/DateInput.svelte similarity index 100% rename from packages/bbui/src/Form/Core/DateTimePicker/DateTimeField.svelte rename to packages/bbui/src/Form/Core/DatePicker/DateInput.svelte diff --git a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte new file mode 100644 index 0000000000..ec1514718c --- /dev/null +++ b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte @@ -0,0 +1,10 @@ + + + diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte similarity index 99% rename from packages/bbui/src/Form/Core/DatePicker.svelte rename to packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte index 7ce15292be..8d92f7633d 100644 --- a/packages/bbui/src/Form/Core/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte @@ -5,7 +5,7 @@ import "@spectrum-css/textfield/dist/index-vars.css" import "@spectrum-css/picker/dist/index-vars.css" import { createEventDispatcher } from "svelte" - import { uuid } from "../../helpers" + import { uuid } from "../../../helpers" export let id = null export let disabled = false diff --git a/packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte b/packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte similarity index 100% rename from packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte rename to packages/bbui/src/Form/Core/DatePicker/NumberInput.svelte diff --git a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte similarity index 98% rename from packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte rename to packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte index cccfea612c..d01097d357 100644 --- a/packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte @@ -7,7 +7,7 @@ import { createEventDispatcher } from "svelte" import TimePicker from "./TimePicker.svelte" import Calendar from "./Calendar.svelte" - import DateTimeInput from "./DateTimeField.svelte" + import DateTimeInput from "./DateInput.svelte" import ActionButton from "../../../ActionButton/ActionButton.svelte" export let id = null diff --git a/packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte similarity index 100% rename from packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte rename to packages/bbui/src/Form/Core/DatePicker/TimePicker.svelte diff --git a/packages/bbui/src/Form/Core/DateTimePicker/utils.js b/packages/bbui/src/Form/Core/DatePicker/utils.js similarity index 100% rename from packages/bbui/src/Form/Core/DateTimePicker/utils.js rename to packages/bbui/src/Form/Core/DatePicker/utils.js diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js index b0edf52748..4af2507147 100644 --- a/packages/bbui/src/Form/Core/index.js +++ b/packages/bbui/src/Form/Core/index.js @@ -8,7 +8,7 @@ export { default as CoreTextArea } from "./TextArea.svelte" export { default as CoreCombobox } from "./Combobox.svelte" export { default as CoreSwitch } from "./Switch.svelte" export { default as CoreSearch } from "./Search.svelte" -export { default as CoreDatePicker } from "./DatePicker.svelte" +export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte" export { default as CoreDropzone } from "./Dropzone.svelte" export { default as CoreStepper } from "./Stepper.svelte" export { default as CoreRichTextField } from "./RichTextField.svelte" diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte index 04ce8b5467..49a66003fc 100644 --- a/packages/bbui/src/Form/DatePicker.svelte +++ b/packages/bbui/src/Form/DatePicker.svelte @@ -1,6 +1,6 @@ -
-

Date only

-
- (foo = e.detail)} - /> -
-

Date time

-
- (foo = e.detail)} - /> -
-

Date time no timezone

-
- (foo = e.detail)} - /> -
-

Time only

-
- (foo = e.detail)} /> -
-
-
-
- -
- {#each Object.keys(automationErrors || {}) as appId} - import { CoreDatePicker } from "@budibase/bbui" - import Field from "./Field.svelte" - - export let field - export let label - export let placeholder - export let disabled = false - export let enableTime = true - export let timeOnly = false - export let time24hr = false - export let ignoreTimezones = false - export let validation - export let defaultValue - export let onChange - - let fieldState - let fieldApi - - const handleChange = e => { - const changed = fieldApi.setValue(e.detail) - if (onChange && changed) { - onChange({ value: e.detail }) - } - } - - - - {#if fieldState} - - {/if} - From b2352157cdf1cec5b136c766660539649e0a25fe Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 3 Nov 2023 20:27:30 +0000 Subject: [PATCH 13/91] Improve grid integration with new datepicker --- packages/bbui/src/Actions/position_dropdown.js | 6 ++++-- .../src/Form/Core/DatePicker/DatePicker.svelte | 5 +++++ .../Core/DatePicker/SpectrumDatePicker.svelte | 17 ++++++++++++++++- .../src/components/grid/cells/DateCell.svelte | 15 +++++---------- 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/packages/bbui/src/Actions/position_dropdown.js b/packages/bbui/src/Actions/position_dropdown.js index f2018272f6..7c4f7e8a2a 100644 --- a/packages/bbui/src/Actions/position_dropdown.js +++ b/packages/bbui/src/Actions/position_dropdown.js @@ -39,11 +39,13 @@ export default function positionDropdown(element, opts) { styles = customUpdate(anchorBounds, elementBounds, styles) } else { // Determine vertical styles + const topSpace = anchorBounds.top + const bottomSpace = window.innerHeight - anchorBounds.bottom if (align === "right-outside") { styles.top = anchorBounds.top } else if ( - window.innerHeight - anchorBounds.bottom < - (maxHeight || 100) + window.innerHeight - anchorBounds.bottom < (maxHeight || 100) && + topSpace - bottomSpace > 100 ) { styles.top = anchorBounds.top - elementBounds.height - offset styles.maxHeight = maxHeight || 240 diff --git a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte index ec1514718c..a03be24753 100644 --- a/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/DatePicker.svelte @@ -1,10 +1,15 @@ diff --git a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte index d01097d357..97774da51b 100644 --- a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte @@ -4,7 +4,7 @@ import "@spectrum-css/textfield/dist/index-vars.css" import Popover from "../../../Popover/Popover.svelte" import dayjs from "dayjs" - import { createEventDispatcher } from "svelte" + import { createEventDispatcher, onMount } from "svelte" import TimePicker from "./TimePicker.svelte" import Calendar from "./Calendar.svelte" import DateTimeInput from "./DateInput.svelte" @@ -19,6 +19,9 @@ export let timeOnly = false export let ignoreTimezones = false export let useKeyboardShortcuts = true + export let appendTo = null + export let api = null + export let align = "left" const dispatch = createEventDispatcher() @@ -114,6 +117,13 @@ calendar?.setDate(now) handleChange(now) } + + onMount(() => { + api = { + open: () => popover?.show(), + close: () => popover?.hide(), + } + }) {#if isOpen} diff --git a/packages/frontend-core/src/components/grid/cells/DateCell.svelte b/packages/frontend-core/src/components/grid/cells/DateCell.svelte index 53b159ee30..fae75277b4 100644 --- a/packages/frontend-core/src/components/grid/cells/DateCell.svelte +++ b/packages/frontend-core/src/components/grid/cells/DateCell.svelte @@ -10,7 +10,7 @@ export let readonly = false export let api - let flatpickr + let datePickerAPI let isOpen // Adding the 0- will turn a string like 00:00:00 into a valid ISO @@ -41,7 +41,7 @@ // Ensure we close flatpickr when unselected $: { if (!focused) { - flatpickr?.close() + datePickerAPI?.close() } } @@ -52,8 +52,8 @@ onMount(() => { api = { onKeyDown, - focus: () => flatpickr?.open(), - blur: () => flatpickr?.close(), + focus: () => datePickerAPI?.open(), + blur: () => datePickerAPI?.close(), isActive: () => isOpen, } }) @@ -75,12 +75,10 @@ onChange(e.detail)} - appendTo={document.documentElement} enableTime={!dateOnly} {timeOnly} - time24hr ignoreTimezones={schema.ignoreTimezones} - bind:flatpickr + bind:api={datePickerAPI} on:open={() => (isOpen = true)} on:close={() => (isOpen = false)} useKeyboardShortcuts={false} @@ -110,9 +108,6 @@ position: absolute; opacity: 0; } - .picker :global(.flatpickr) { - min-width: 0; - } .picker :global(.spectrum-Textfield-input) { width: 100%; } From f5369e7cddda61fde78e643309d367f24880382e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Apr 2024 10:50:37 +0100 Subject: [PATCH 14/91] Update pro --- packages/pro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/pro b/packages/pro index 3820c0c93a..6b62505be0 160000 --- a/packages/pro +++ b/packages/pro @@ -1 +1 @@ -Subproject commit 3820c0c93a3e448e10a60a9feb5396844b537ca8 +Subproject commit 6b62505be0c0b50a57b4f4980d86541ebdc86428 From 2e4e3eac60f7ed722df649c48d6de0105e91ec01 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Apr 2024 10:59:30 +0100 Subject: [PATCH 15/91] Update styles of selected day --- packages/bbui/src/Form/Core/DatePicker/Calendar.svelte | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte b/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte index 6491ba94ab..75e8e193e6 100644 --- a/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/Calendar.svelte @@ -125,7 +125,6 @@
@@ -194,11 +193,13 @@ visibility: visible; color: var(--spectrum-global-color-gray-400); } - .spectrum-Calendar-date.is-today:before { + .spectrum-Calendar-date.is-today, + .spectrum-Calendar-date.is-today::before { border-color: var(--spectrum-global-color-gray-400); } - .spectrum-Calendar-date.is-today { - border-color: var(--spectrum-global-color-gray-400); + .spectrum-Calendar-date.is-today.is-selected, + .spectrum-Calendar-date.is-today.is-selected::before { + border-color: var(--spectrum-global-color-blue-700); } .spectrum-Calendar-date.is-selected:not(.is-range-selection) { background: var(--spectrum-global-color-blue-400); From d71766b9a4624cf7cd81bfb641281bfff35bac1f Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Apr 2024 11:01:50 +0100 Subject: [PATCH 16/91] Revert clickoutside --- packages/bbui/src/Actions/click_outside.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 305ae65ac8..7873b7fd6c 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -1,4 +1,8 @@ -const ignoredClasses = [".flatpickr-calendar", ".download-js-link"] +const ignoredClasses = [ + ".flatpickr-calendar", + ".spectrum-Popover", + ".download-js-link", +] let clickHandlers = [] /** @@ -21,13 +25,6 @@ const handleClick = event => { return } - // Ignore clicks for popovers, unless the handler is registered from one - const sourceInPopover = handler.anchor.closest(".spectrum-Popover") != null - const clickInPopover = event.target.closest(".spectrum-Popover") != null - if (clickInPopover && !sourceInPopover) { - return - } - // Ignore clicks for modals, unless the handler is registered from one const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null const clickInModal = event.target.closest(".spectrum-Underlay") != null From 24f67617669d90442da2c4f8b2a019c8f4d59cc5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Apr 2024 11:02:10 +0100 Subject: [PATCH 17/91] Revert clickoutside --- packages/bbui/src/Actions/click_outside.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bbui/src/Actions/click_outside.js b/packages/bbui/src/Actions/click_outside.js index 7873b7fd6c..eafca657f3 100644 --- a/packages/bbui/src/Actions/click_outside.js +++ b/packages/bbui/src/Actions/click_outside.js @@ -25,7 +25,7 @@ const handleClick = event => { return } - // Ignore clicks for modals, unless the handler is registered from one + // Ignore clicks for modals, unless the handler is registered from a modal const sourceInModal = handler.anchor.closest(".spectrum-Underlay") != null const clickInModal = event.target.closest(".spectrum-Underlay") != null if (clickInModal && !sourceInModal) { From 4673fbeaaac1efd9b63d97b8e35001862c7e9d02 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 2 Apr 2024 11:08:37 +0100 Subject: [PATCH 18/91] Fix overflow --- packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte index 97774da51b..3a96044df4 100644 --- a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte +++ b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte @@ -185,6 +185,7 @@ diff --git a/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte deleted file mode 100644 index ac163de3bb..0000000000 --- a/packages/bbui/src/Form/Core/DatePicker/FlatpickrDatePicker.svelte +++ /dev/null @@ -1,268 +0,0 @@ - - -{#key redrawOptions} - -
- - -
- -
- -
- -{/key} -{#if open} - -
-{/if} - - diff --git a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte deleted file mode 100644 index bd9fb8269e..0000000000 --- a/packages/bbui/src/Form/Core/DatePicker/SpectrumDatePicker.svelte +++ /dev/null @@ -1,183 +0,0 @@ - - - - - - {#if isOpen} -
- {#if showCalendar} - - {/if} -
- {#if showTime} - - {/if} -
- handleChange(null)} - > - Clear - - - {showTime ? "Now" : "Today"} - -
-
-
- {/if} - - - diff --git a/packages/bbui/src/Form/Core/DateRangePicker.svelte b/packages/bbui/src/Form/Core/DateRangePicker.svelte new file mode 100644 index 0000000000..9084942ba7 --- /dev/null +++ b/packages/bbui/src/Form/Core/DateRangePicker.svelte @@ -0,0 +1,69 @@ + + +
+ (fromDate = e.detail)} + enableTime={false} + /> +
+ +
+ (toDate = e.detail)} + enableTime={false} + /> +
+ + diff --git a/packages/bbui/src/Form/Core/index.js b/packages/bbui/src/Form/Core/index.js index 4af2507147..533a1956c5 100644 --- a/packages/bbui/src/Form/Core/index.js +++ b/packages/bbui/src/Form/Core/index.js @@ -9,6 +9,7 @@ export { default as CoreCombobox } from "./Combobox.svelte" export { default as CoreSwitch } from "./Switch.svelte" export { default as CoreSearch } from "./Search.svelte" export { default as CoreDatePicker } from "./DatePicker/DatePicker.svelte" +export { default as CoreDateRangePicker } from "./DateRangePicker.svelte" export { default as CoreDropzone } from "./Dropzone.svelte" export { default as CoreStepper } from "./Stepper.svelte" export { default as CoreRichTextField } from "./RichTextField.svelte" diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte index 5e84947f0a..cf249e5bb8 100644 --- a/packages/bbui/src/Form/DatePicker.svelte +++ b/packages/bbui/src/Form/DatePicker.svelte @@ -15,18 +15,12 @@ export let placeholder = null export let appendTo = undefined export let ignoreTimezones = false - export let range = false export let helpText = null + const dispatch = createEventDispatcher() const onChange = e => { - if (range) { - // Flatpickr cant take two dates and work out what to display, needs to be provided a string. - // Like - "Date1 to Date2". Hence passing in that specifically from the array - value = e?.detail[1] - } else { - value = e.detail - } + value = e.detail dispatch("change", e.detail) } @@ -43,7 +37,6 @@ {time24hr} {appendTo} {ignoreTimezones} - {range} on:change={onChange} /> diff --git a/packages/bbui/src/Form/DateRangePicker.svelte b/packages/bbui/src/Form/DateRangePicker.svelte new file mode 100644 index 0000000000..39c2acb96a --- /dev/null +++ b/packages/bbui/src/Form/DateRangePicker.svelte @@ -0,0 +1,34 @@ + + + + + diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 222e558675..f28e185305 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -3,13 +3,34 @@ import "./bbui.css" // Spectrum icons import "@spectrum-css/icon/dist/index-vars.css" -// Components +// Form components export { default as Input } from "./Form/Input.svelte" export { default as Stepper } from "./Form/Stepper.svelte" export { default as TextArea } from "./Form/TextArea.svelte" export { default as Select } from "./Form/Select.svelte" export { default as Combobox } from "./Form/Combobox.svelte" export { default as Dropzone } from "./Form/Dropzone.svelte" +export { default as DatePicker } from "./Form/DatePicker.svelte" +export { default as DateRangePicker } from "./Form/DateRangePicker.svelte" +export { default as Toggle } from "./Form/Toggle.svelte" +export { default as RadioGroup } from "./Form/RadioGroup.svelte" +export { default as Checkbox } from "./Form/Checkbox.svelte" +export { default as InputDropdown } from "./Form/InputDropdown.svelte" +export { default as PickerDropdown } from "./Form/PickerDropdown.svelte" +export { default as EnvDropdown } from "./Form/EnvDropdown.svelte" +export { default as Multiselect } from "./Form/Multiselect.svelte" +export { default as Search } from "./Form/Search.svelte" +export { default as RichTextField } from "./Form/RichTextField.svelte" +export { default as Slider } from "./Form/Slider.svelte" +export { default as File } from "./Form/File.svelte" + +// Core form components to be used elsewhere (standard components) +export * from "./Form/Core" + +// Fancy form components +export * from "./FancyForm" + +// Components export { default as Drawer } from "./Drawer/Drawer.svelte" export { default as DrawerContent } from "./Drawer/DrawerContent.svelte" export { default as Avatar } from "./Avatar/Avatar.svelte" @@ -21,12 +42,6 @@ export { default as ButtonGroup } from "./ButtonGroup/ButtonGroup.svelte" export { default as ClearButton } from "./ClearButton/ClearButton.svelte" export { default as Icon } from "./Icon/Icon.svelte" export { default as IconAvatar } from "./Icon/IconAvatar.svelte" -export { default as Toggle } from "./Form/Toggle.svelte" -export { default as RadioGroup } from "./Form/RadioGroup.svelte" -export { default as Checkbox } from "./Form/Checkbox.svelte" -export { default as InputDropdown } from "./Form/InputDropdown.svelte" -export { default as PickerDropdown } from "./Form/PickerDropdown.svelte" -export { default as EnvDropdown } from "./Form/EnvDropdown.svelte" export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte" export { default as Popover } from "./Popover/Popover.svelte" export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte" @@ -37,11 +52,6 @@ export { default as Page } from "./Layout/Page.svelte" export { default as Link } from "./Link/Link.svelte" export { default as Tooltip } from "./Tooltip/Tooltip.svelte" export { default as TempTooltip } from "./Tooltip/TempTooltip.svelte" -export { - default as AbsTooltip, - TooltipPosition, - TooltipType, -} from "./Tooltip/AbsTooltip.svelte" export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte" export { default as Menu } from "./Menu/Menu.svelte" export { default as MenuSection } from "./Menu/Section.svelte" @@ -53,9 +63,6 @@ export { default as NotificationDisplay } from "./Notification/NotificationDispl export { default as Notification } from "./Notification/Notification.svelte" export { default as SideNavigation } from "./SideNavigation/Navigation.svelte" export { default as SideNavigationItem } from "./SideNavigation/Item.svelte" -export { default as DatePicker } from "./Form/DatePicker.svelte" -export { default as DateTimePicker } from "./Form/Core/DatePicker/SpectrumDatePicker.svelte" -export { default as Multiselect } from "./Form/Multiselect.svelte" export { default as Context } from "./context" export { default as Table } from "./Table/Table.svelte" export { default as Tabs } from "./Tabs/Tabs.svelte" @@ -65,7 +72,6 @@ export { default as Tag } from "./Tags/Tag.svelte" export { default as TreeView } from "./TreeView/Tree.svelte" export { default as TreeItem } from "./TreeView/Item.svelte" export { default as Divider } from "./Divider/Divider.svelte" -export { default as Search } from "./Form/Search.svelte" export { default as Pagination } from "./Pagination/Pagination.svelte" export { default as Badge } from "./Badge/Badge.svelte" export { default as StatusLight } from "./StatusLight/StatusLight.svelte" @@ -77,15 +83,15 @@ export { default as CopyInput } from "./Input/CopyInput.svelte" export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte" export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte" export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte" -export { default as RichTextField } from "./Form/RichTextField.svelte" export { default as List } from "./List/List.svelte" export { default as ListItem } from "./List/ListItem.svelte" export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte" export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte" -export { default as Slider } from "./Form/Slider.svelte" export { default as Accordion } from "./Accordion/Accordion.svelte" -export { default as File } from "./Form/File.svelte" export { default as OptionSelectDnD } from "./OptionSelectDnD/OptionSelectDnD.svelte" +export { default as AbsTooltip } from "./Tooltip/AbsTooltip.svelte" +export { TooltipPosition, TooltipType } from "./Tooltip/AbsTooltip.svelte" + // Renderers export { default as BoldRenderer } from "./Table/BoldRenderer.svelte" export { default as CodeRenderer } from "./Table/CodeRenderer.svelte" @@ -97,9 +103,6 @@ export { default as Heading } from "./Typography/Heading.svelte" export { default as Detail } from "./Typography/Detail.svelte" export { default as Code } from "./Typography/Code.svelte" -// Core form components to be used elsewhere (standard components) -export * from "./Form/Core" - // Actions export { default as autoResizeTextArea } from "./Actions/autoresize_textarea" export { default as positionDropdown } from "./Actions/position_dropdown" @@ -111,6 +114,3 @@ export { banner, BANNER_TYPES } from "./Stores/banner" // Helpers export * as Helpers from "./helpers" - -// Fancy form components -export * from "./FancyForm" diff --git a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte index bbf28b2fe8..212243aa76 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/backups/index.svelte @@ -1,7 +1,7 @@ @@ -207,7 +207,7 @@ View plans
- {:else if !backupData?.length && !loading && !filterOpt && !startDate} + {:else if !backupData?.length && !loading && !filterOpt && !date}
BackupsDefault @@ -236,19 +236,19 @@ bind:value={filterOpt} />
- { - startDate = e.detail?.[0] - endDate = e.detail?.[1] + date = e.detail }} + enableTime={false} />
- +
diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte deleted file mode 100644 index 5c710ad766..0000000000 --- a/packages/client/src/components/app/DateRangePicker.svelte +++ /dev/null @@ -1,79 +0,0 @@ - - -
- Date: Mon, 15 Apr 2024 13:46:49 +0100 Subject: [PATCH 33/91] Revert "Revert "adds sidepanel open and close actions, and gives the user the option to disable click-outside closure of sidepanel"" --- packages/bbui/src/Layout/Page.svelte | 10 +++++----- packages/client/manifest.json | 16 +++++++++++++++- packages/client/src/components/app/Layout.svelte | 5 ++++- .../client/src/components/app/SidePanel.svelte | 14 ++++++++++++++ packages/client/src/stores/sidePanel.js | 9 +++++++++ 5 files changed, 47 insertions(+), 7 deletions(-) diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte index 2169a12459..62dd9cc909 100644 --- a/packages/bbui/src/Layout/Page.svelte +++ b/packages/bbui/src/Layout/Page.svelte @@ -7,11 +7,11 @@ export let narrower = false export let noPadding = false - let sidePanelVisble = false + let sidePanelVisible = false setContext("side-panel", { - open: () => (sidePanelVisble = true), - close: () => (sidePanelVisble = false), + open: () => (sidePanelVisible = true), + close: () => (sidePanelVisible = false), }) @@ -24,9 +24,9 @@
{ - sidePanelVisble = false + sidePanelVisible = false }} > diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 40abc7a9a0..c9e28e202b 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6723,7 +6723,21 @@ "illegalChildren": ["section", "sidepanel"], "showEmptyState": false, "draggable": false, - "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action." + "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.", + "sendEvents": true, + "settings": [ + { + "type": "boolean", + "key": "clickOutsideToClose", + "label": "Click outside to close", + "defaultValue": true + }, + { + "type": "event", + "key": "onSidePanelClose", + "label": "On side panel close" + } + ] }, "rowexplorer": { "block": true, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 8508e943ff..bae2bd0faf 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -73,7 +73,10 @@ $context.device.width, $context.device.height ) - $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open + $: autoCloseSidePanel = + !$builderStore.inBuilder && + $sidePanelStore.open && + $sidePanelStore.clickOutsideToClose $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 825b401bb8..624617ad69 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,6 +5,9 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") + export let sidePanelClose + export let clickOutsideToClose + // Automatically show and hide the side panel when inside the builder. // For some unknown reason, svelte reactivity breaks if we reference the // reactive variable "open" inside the following expression, or if we define @@ -26,6 +29,10 @@ } } + $: { + sidePanelStore.actions.setSidepanelState(clickOutsideToClose) + } + // Derive visibility $: open = $sidePanelStore.contentId === $component.id @@ -40,6 +47,12 @@ } } + const handleSidePanelClose = async () => { + if (sidePanelClose) { + await sidePanelClose() + } + } + const showInSidePanel = (el, visible) => { const update = visible => { const target = document.getElementById("side-panel-container") @@ -51,6 +64,7 @@ } else { if (target.contains(node)) { target.removeChild(node) + handleSidePanelClose() } } } diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js index 3b3b9f5f4d..df66eca01c 100644 --- a/packages/client/src/stores/sidePanel.js +++ b/packages/client/src/stores/sidePanel.js @@ -3,6 +3,7 @@ import { writable, derived } from "svelte/store" export const createSidePanelStore = () => { const initialState = { contentId: null, + clickOutsideToClose: true, } const store = writable(initialState) const derivedStore = derived(store, $store => { @@ -32,11 +33,19 @@ export const createSidePanelStore = () => { }, 50) } + const setSidepanelState = bool => { + clearTimeout(timeout) + store.update(state => { + state.clickOutsideToClose = bool + return state + }) + } return { subscribe: derivedStore.subscribe, actions: { open, close, + setSidepanelState, }, } } From ad10679115b22f07e055a21e96d4ff2ee4aa0a75 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Wed, 17 Apr 2024 16:27:23 +0100 Subject: [PATCH 34/91] saving progress based on review reccomendations --- packages/client/manifest.json | 11 +++++------ packages/client/src/components/app/Layout.svelte | 2 +- packages/client/src/components/app/SidePanel.svelte | 4 ++-- packages/client/src/stores/sidePanel.js | 9 ++++----- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index c9e28e202b..cb85768adc 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -6724,18 +6724,17 @@ "showEmptyState": false, "draggable": false, "info": "Side panels are hidden by default. They will only be revealed when triggered by the 'Open Side Panel' action.", - "sendEvents": true, "settings": [ { "type": "boolean", - "key": "clickOutsideToClose", - "label": "Click outside to close", - "defaultValue": true + "key": "ignoreClicksOutside", + "label": "Ignore clicks outside", + "defaultValue": false }, { "type": "event", - "key": "onSidePanelClose", - "label": "On side panel close" + "key": "onClose", + "label": "On close" } ] }, diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index bae2bd0faf..617658c754 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -76,7 +76,7 @@ $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open && - $sidePanelStore.clickOutsideToClose + $sidePanelStore.ignoreClicksOutside $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 624617ad69..8b0b395649 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -6,7 +6,7 @@ getContext("sdk") export let sidePanelClose - export let clickOutsideToClose + export let ignoreClicksOutside // Automatically show and hide the side panel when inside the builder. // For some unknown reason, svelte reactivity breaks if we reference the @@ -30,7 +30,7 @@ } $: { - sidePanelStore.actions.setSidepanelState(clickOutsideToClose) + sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) } // Derive visibility diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js index df66eca01c..b25914c484 100644 --- a/packages/client/src/stores/sidePanel.js +++ b/packages/client/src/stores/sidePanel.js @@ -3,7 +3,7 @@ import { writable, derived } from "svelte/store" export const createSidePanelStore = () => { const initialState = { contentId: null, - clickOutsideToClose: true, + ignoreClicksOutside: true, } const store = writable(initialState) const derivedStore = derived(store, $store => { @@ -33,10 +33,9 @@ export const createSidePanelStore = () => { }, 50) } - const setSidepanelState = bool => { - clearTimeout(timeout) + const setIgnoreClicksOutside = bool => { store.update(state => { - state.clickOutsideToClose = bool + state.ignoreClicksOutside = bool return state }) } @@ -45,7 +44,7 @@ export const createSidePanelStore = () => { actions: { open, close, - setSidepanelState, + setIgnoreClicksOutside, }, } } From 6c38d32549a79f04ea00f10e21c84f2c540796ff Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 18 Apr 2024 10:08:48 +0100 Subject: [PATCH 35/91] reinstates actions running when sidepanel closes --- packages/client/src/components/app/SidePanel.svelte | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 8b0b395649..827ed2ab95 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -5,7 +5,7 @@ const { styleable, sidePanelStore, builderStore, dndIsDragging } = getContext("sdk") - export let sidePanelClose + export let onClose export let ignoreClicksOutside // Automatically show and hide the side panel when inside the builder. @@ -48,8 +48,8 @@ } const handleSidePanelClose = async () => { - if (sidePanelClose) { - await sidePanelClose() + if (onClose) { + await onClose() } } From 088c210de85e260c946d2b105687cd155c16d298 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Thu, 18 Apr 2024 12:11:45 +0100 Subject: [PATCH 36/91] sets ignoreClickOutside to each side panel --- packages/client/src/components/app/Layout.svelte | 2 +- packages/client/src/components/app/SidePanel.svelte | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 617658c754..bfbac8f4f1 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -76,7 +76,7 @@ $: autoCloseSidePanel = !$builderStore.inBuilder && $sidePanelStore.open && - $sidePanelStore.ignoreClicksOutside + !$sidePanelStore.ignoreClicksOutside $: screenId = $builderStore.inBuilder ? `${$builderStore.screen?._id}-screen` : "screen" diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte index 827ed2ab95..bff5a78837 100644 --- a/packages/client/src/components/app/SidePanel.svelte +++ b/packages/client/src/components/app/SidePanel.svelte @@ -29,9 +29,9 @@ } } - $: { - sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) - } + // $: { + + // } // Derive visibility $: open = $sidePanelStore.contentId === $component.id @@ -43,6 +43,7 @@ let renderKey = null $: { if (open) { + sidePanelStore.actions.setIgnoreClicksOutside(ignoreClicksOutside) renderKey = Math.random() } } From 80a6afd54f03a6dfb37a1b3f0cce763fcace349f Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 10:41:39 +0100 Subject: [PATCH 37/91] closes side panel when navigating away regardless of ignoreClicksOutside --- packages/client/src/components/app/Layout.svelte | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index bfbac8f4f1..dccb061254 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -284,7 +284,9 @@ url={navItem.url} subLinks={navItem.subLinks} internalLink={navItem.internalLink} - on:clickLink={() => (mobileOpen = false)} + on:clickLink={(() => (mobileOpen = false), + console.log("287"), + sidePanelStore.actions.close)} leftNav={navigation === "Left"} {mobile} {navStateStore} From 237bc707581900f3f9bbcfff597d88d90a344454 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 10:58:25 +0100 Subject: [PATCH 38/91] removes console.log() --- packages/client/src/components/app/Layout.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index dccb061254..363a464143 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -285,7 +285,6 @@ subLinks={navItem.subLinks} internalLink={navItem.internalLink} on:clickLink={(() => (mobileOpen = false), - console.log("287"), sidePanelStore.actions.close)} leftNav={navigation === "Left"} {mobile} From 11702538cbda4c8716f205ab1be43efae5e04994 Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 12:08:05 +0100 Subject: [PATCH 39/91] pulls inline code into separate handleClickLink function to deal with closing side panel when navigating away --- packages/client/src/components/app/Layout.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/client/src/components/app/Layout.svelte b/packages/client/src/components/app/Layout.svelte index 363a464143..eb1e0022cc 100644 --- a/packages/client/src/components/app/Layout.svelte +++ b/packages/client/src/components/app/Layout.svelte @@ -194,6 +194,11 @@ } return url } + + const handleClickLink = () => { + mobileOpen = false + sidePanelStore.actions.close() + } @@ -284,8 +289,7 @@ url={navItem.url} subLinks={navItem.subLinks} internalLink={navItem.internalLink} - on:clickLink={(() => (mobileOpen = false), - sidePanelStore.actions.close)} + on:clickLink={handleClickLink} leftNav={navigation === "Left"} {mobile} {navStateStore} From 4c0d3ed5f38781a5db5e024993b3e7de7e6692ad Mon Sep 17 00:00:00 2001 From: mikesealey Date: Fri, 19 Apr 2024 14:45:57 +0100 Subject: [PATCH 40/91] runs the closeSidePanel function when navigating away using a button-action --- packages/client/src/utils/buttonActions.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index d883ee1b55..4ab7490ae7 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -240,6 +240,7 @@ const triggerAutomationHandler = async action => { const navigationHandler = action => { const { url, peek, externalNewTab } = action.parameters routeStore.actions.navigate(url, peek, externalNewTab) + closeSidePanelHandler() } const queryExecutionHandler = async action => { From 129f2c5bb965e6c5387c6a550dc97dd6d1342139 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 23 Apr 2024 11:52:10 +0100 Subject: [PATCH 41/91] Remove 24 hour time setting from datetime fields --- packages/client/manifest.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index 40abc7a9a0..a7d4b57f1a 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -3869,12 +3869,6 @@ "key": "timeOnly", "defaultValue": false }, - { - "type": "boolean", - "label": "24-hour time", - "key": "time24hr", - "defaultValue": false - }, { "type": "boolean", "label": "Ignore time zones", From 2e46287b7e77f3ac059a31d05b5bc0e4716f3df5 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 23 Apr 2024 11:52:24 +0100 Subject: [PATCH 42/91] Remove testing code --- .../[componentId]/new/_components/componentStructure.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json index 494b2736d7..03e22acd4d 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/new/_components/componentStructure.json @@ -68,7 +68,6 @@ "jsonfield", "relationshipfield", "datetimefield", - "newdatetimefield", "multifieldselect", "s3upload", "codescanner", From 4f1220dd26bf2e246c7316923092e4086e24e4aa Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 23 Apr 2024 11:54:44 +0100 Subject: [PATCH 43/91] Restore client date range picker component --- .../src/components/app/DateRangePicker.svelte | 76 +++++++++++++++++++ packages/client/src/components/app/index.js | 1 + 2 files changed, 77 insertions(+) create mode 100644 packages/client/src/components/app/DateRangePicker.svelte diff --git a/packages/client/src/components/app/DateRangePicker.svelte b/packages/client/src/components/app/DateRangePicker.svelte new file mode 100644 index 0000000000..8131f3bd89 --- /dev/null +++ b/packages/client/src/components/app/DateRangePicker.svelte @@ -0,0 +1,76 @@ + + +
+