@rotki/ui-library 2.24.0 → 2.25.0

package/dist/components/date-time-picker/use-date-bounds.d.ts

@@ -16,8 +16,9 @@ interface DateBoundsOptions {
 interface DateBoundsReturn {
     minAllowedDate: ComputedRef<Date>;
     maxAllowedDate: ComputedRef<Date | undefined>;
-    internalErrorMessages: Ref<string[]>;
+    internalErrorMessages: Readonly<Ref<string[]>>;
     isDateValid: (date: Dayjs) => boolean;
+    clearErrors: () => void;
 }
 /**
  * The range a picked date has to sit in, and the message explaining a date that

package/dist/components/date-time-picker/use-date-bounds.js

@@ -1,7 +1,7 @@
 import { useRuiI8n } from "../../composables/use-rui-i18n.js";
 import { RUI_I18N_KEYS } from "../../i18n/keys.js";
 import { resolveBound } from "./segment-utils.js";
-import { computed, ref } from "vue";
+import { computed, ref, shallowReadonly } from "vue";
 import { get, set } from "@vueuse/shared";
 import dayjs from "dayjs";
 //#region src/components/date-time-picker/use-date-bounds.ts
@@ -23,10 +23,13 @@ function useDateBounds({ dateFormat, epochSeconds, maxDate, minDate, now }) {
 	function formatBound(bound) {
 		return dayjs(bound).format(get(dateFormat));
 	}
+	function clearErrors() {
+		set(internalErrorMessages, []);
+	}
 	function isDateValid(date) {
 		const min = get(minAllowedDate);
 		const max = get(maxAllowedDate);
-		set(internalErrorMessages, []);
+		clearErrors();
 		if (min && date.isBefore(min)) {
 			const formatted = formatBound(min);
 			const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, { date: formatted }, `Date cannot be before ${formatted}`);
@@ -44,7 +47,8 @@ function useDateBounds({ dateFormat, epochSeconds, maxDate, minDate, now }) {
 		return true;
 	}
 	return {
-		internalErrorMessages,
+		clearErrors,
+		internalErrorMessages: shallowReadonly(internalErrorMessages),
 		isDateValid,
 		maxAllowedDate,
 		minAllowedDate

package/dist/components/date-time-picker/use-date-bounds.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-date-bounds.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-bounds.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { resolveBound } from '@/components/date-time-picker/segment-utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ninterface DateBoundsOptions {\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  /** Whether a numeric bound is stated in whole seconds rather than milliseconds. */\n  epochSeconds: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** The clock a `now` maximum follows, kept current by the caller. */\n  now: Ref<Dayjs>;\n}\n\ninterface DateBoundsReturn {\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  internalErrorMessages: Ref<string[]>;\n  isDateValid: (date: Dayjs) => boolean;\n}\n\n/**\n * The range a picked date has to sit in, and the message explaining a date that\n * does not.\n */\nexport function useDateBounds({\n  dateFormat,\n  epochSeconds,\n  maxDate,\n  minDate,\n  now,\n}: DateBoundsOptions): DateBoundsReturn {\n  const { t } = useRuiI8n();\n\n  const internalErrorMessages = ref<string[]>([]);\n\n  const minAllowedDate = computed<Date>(\n    () => resolveBound(minDate, epochSeconds) ?? new Date(1970, 0, 1),\n  );\n\n  const maxAllowedDate = computed<Date | undefined>(\n    () => (maxDate === 'now' ? get(now).toDate() : resolveBound(maxDate, epochSeconds)),\n  );\n\n  /**\n   * Writes a bound the way the field writes its value. `toLocaleDateString()`\n   * followed the browser locale and ignored the picker's own format, so a\n   * day-first field could report its limit month-first, and it dropped the time\n   * entirely, which left a mid-day bound unable to explain itself.\n   */\n  function formatBound(bound: Date): string {\n    return dayjs(bound).format(get(dateFormat));\n  }\n\n  function isDateValid(date: Dayjs): boolean {\n    const min = get(minAllowedDate);\n    const max = get(maxAllowedDate);\n\n    set(internalErrorMessages, []);\n\n    if (min && date.isBefore(min)) {\n      const formatted = formatBound(min);\n      const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n        date: formatted,\n      }, `Date cannot be before ${formatted}`);\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    if (max && date.isAfter(max)) {\n      const formatted = formatBound(max);\n      const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n      const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: formatted }, `Date cannot be after ${formatted}`);\n      const errorMessage = maxDate === 'now' ? nowError : maxError;\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    return true;\n  }\n\n  return {\n    internalErrorMessages,\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n  };\n}\n"],"mappings":";;;;;;;;;;;AA+BA,SAAgB,cAAc,EAC5B,YACA,cACA,SACA,SACA,OACsC;CACtC,MAAM,EAAE,MAAM,UAAU;CAExB,MAAM,wBAAwB,IAAc,CAAC,CAAC;CAE9C,MAAM,iBAAiB,eACf,aAAa,SAAS,YAAY,KAAK,IAAI,KAAK,MAAM,GAAG,CAAC,CAClE;CAEA,MAAM,iBAAiB,eACd,YAAY,QAAQ,IAAI,GAAG,CAAC,CAAC,OAAO,IAAI,aAAa,SAAS,YAAY,CACnF;;;;;;;CAQA,SAAS,YAAY,OAAqB;EACxC,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC;CAC5C;CAEA,SAAS,YAAY,MAAsB;EACzC,MAAM,MAAM,IAAI,cAAc;EAC9B,MAAM,MAAM,IAAI,cAAc;EAE9B,IAAI,uBAAuB,CAAC,CAAC;EAE7B,IAAI,OAAO,KAAK,SAAS,GAAG,GAAG;GAC7B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,eAAe,EAAE,cAAc,eAAe,eAAe,EACjE,MAAM,UACR,GAAG,yBAAyB,WAAW;GACvC,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,IAAI,OAAO,KAAK,QAAQ,GAAG,GAAG;GAC5B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,2CAA2C;GACzG,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,EAAE,MAAM,UAAU,GAAG,wBAAwB,WAAW;GACtH,MAAM,eAAe,YAAY,QAAQ,WAAW;GACpD,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,OAAO;CACT;CAEA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-date-bounds.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-bounds.ts"],"sourcesContent":["import type { ComputedRef, Ref } from 'vue';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { resolveBound } from '@/components/date-time-picker/segment-utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\n\ninterface DateBoundsOptions {\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  /** Whether a numeric bound is stated in whole seconds rather than milliseconds. */\n  epochSeconds: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** The clock a `now` maximum follows, kept current by the caller. */\n  now: Ref<Dayjs>;\n}\n\ninterface DateBoundsReturn {\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  isDateValid: (date: Dayjs) => boolean;\n  clearErrors: () => void;\n}\n\n/**\n * The range a picked date has to sit in, and the message explaining a date that\n * does not.\n */\nexport function useDateBounds({\n  dateFormat,\n  epochSeconds,\n  maxDate,\n  minDate,\n  now,\n}: DateBoundsOptions): DateBoundsReturn {\n  const { t } = useRuiI8n();\n\n  const internalErrorMessages = ref<string[]>([]);\n\n  const minAllowedDate = computed<Date>(\n    () => resolveBound(minDate, epochSeconds) ?? new Date(1970, 0, 1),\n  );\n\n  const maxAllowedDate = computed<Date | undefined>(\n    () => (maxDate === 'now' ? get(now).toDate() : resolveBound(maxDate, epochSeconds)),\n  );\n\n  /**\n   * Writes a bound the way the field writes its value. `toLocaleDateString()`\n   * followed the browser locale and ignored the picker's own format, so a\n   * day-first field could report its limit month-first, and it dropped the time\n   * entirely, which left a mid-day bound unable to explain itself.\n   */\n  function formatBound(bound: Date): string {\n    return dayjs(bound).format(get(dateFormat));\n  }\n\n  function clearErrors(): void {\n    set(internalErrorMessages, []);\n  }\n\n  function isDateValid(date: Dayjs): boolean {\n    const min = get(minAllowedDate);\n    const max = get(maxAllowedDate);\n\n    clearErrors();\n\n    if (min && date.isBefore(min)) {\n      const formatted = formatBound(min);\n      const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n        date: formatted,\n      }, `Date cannot be before ${formatted}`);\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    if (max && date.isAfter(max)) {\n      const formatted = formatBound(max);\n      const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, 'The selected date cannot be in the future');\n      const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: formatted }, `Date cannot be after ${formatted}`);\n      const errorMessage = maxDate === 'now' ? nowError : maxError;\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    return true;\n  }\n\n  return {\n    clearErrors,\n    internalErrorMessages: shallowReadonly(internalErrorMessages),\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n  };\n}\n"],"mappings":";;;;;;;;;;;AAgCA,SAAgB,cAAc,EAC5B,YACA,cACA,SACA,SACA,OACsC;CACtC,MAAM,EAAE,MAAM,UAAU;CAExB,MAAM,wBAAwB,IAAc,CAAC,CAAC;CAE9C,MAAM,iBAAiB,eACf,aAAa,SAAS,YAAY,KAAK,IAAI,KAAK,MAAM,GAAG,CAAC,CAClE;CAEA,MAAM,iBAAiB,eACd,YAAY,QAAQ,IAAI,GAAG,CAAC,CAAC,OAAO,IAAI,aAAa,SAAS,YAAY,CACnF;;;;;;;CAQA,SAAS,YAAY,OAAqB;EACxC,OAAO,MAAM,KAAK,CAAC,CAAC,OAAO,IAAI,UAAU,CAAC;CAC5C;CAEA,SAAS,cAAoB;EAC3B,IAAI,uBAAuB,CAAC,CAAC;CAC/B;CAEA,SAAS,YAAY,MAAsB;EACzC,MAAM,MAAM,IAAI,cAAc;EAC9B,MAAM,MAAM,IAAI,cAAc;EAE9B,YAAY;EAEZ,IAAI,OAAO,KAAK,SAAS,GAAG,GAAG;GAC7B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,eAAe,EAAE,cAAc,eAAe,eAAe,EACjE,MAAM,UACR,GAAG,yBAAyB,WAAW;GACvC,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,IAAI,OAAO,KAAK,QAAQ,GAAG,GAAG;GAC5B,MAAM,YAAY,YAAY,GAAG;GACjC,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,2CAA2C;GACzG,MAAM,WAAW,EAAE,cAAc,eAAe,cAAc,EAAE,MAAM,UAAU,GAAG,wBAAwB,WAAW;GACtH,MAAM,eAAe,YAAY,QAAQ,WAAW;GACpD,IAAI,uBAAuB,CAAC,GAAG,IAAI,qBAAqB,GAAG,YAAY,CAAC;GACxE,OAAO;EACT;EAEA,OAAO;CACT;CAEA,OAAO;EACL;EACA,uBAAuB,gBAAgB,qBAAqB;EAC5D;EACA;EACA;CACF;AACF"}

package/dist/components/date-time-picker/use-date-time-selection.d.ts

@@ -1,9 +1,9 @@
 import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
-import type { SegmentData } from '../../components/date-time-picker/types.js';
+import type { SegmentData } from './types.js';
 import type { TimeAccuracy } from '../../consts/time-accuracy.js';
 import { type Dayjs } from 'dayjs';
-import { type PartialTimeMode } from '../../components/date-time-picker/partial-time.js';
-import '../../components/date-time-picker/dayjs-setup.js';
+import { type PartialTimeMode } from './partial-time.js';
+import './dayjs-setup.js';
 type DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';
 type ModelValueType<T extends DateTimeModelType> = T extends 'date' ? Date | undefined : T extends 'epoch-ms' ? number | undefined : T extends 'epoch' ? number | undefined : Date | number | undefined;
 interface DateTimeSelectionOptions<T extends DateTimeModelType> {
@@ -22,19 +22,19 @@ interface DateTimeSelectionOptions<T extends DateTimeModelType> {
     partialTime?: PartialTimeMode;
 }
 interface DateTimeSelectionReturn {
-    selectedYear: Ref<number | undefined>;
-    selectedMonth: Ref<number | undefined>;
-    selectedDay: Ref<number | undefined>;
-    selectedHour: Ref<number | undefined>;
-    selectedMinute: Ref<number | undefined>;
-    selectedSecond: Ref<number | undefined>;
-    selectedMillisecond: Ref<number | undefined>;
-    selectedTimezone: Ref<string | undefined>;
+    modelYear: Ref<number | undefined>;
+    modelMonth: Ref<number | undefined>;
+    modelDay: Ref<number | undefined>;
+    modelHour: Ref<number | undefined>;
+    modelMinute: Ref<number | undefined>;
+    modelSecond: Ref<number | undefined>;
+    modelMillisecond: Ref<number | undefined>;
+    modelTimezone: Ref<string | undefined>;
     selectedDate: WritableComputedRef<Date | undefined>;
     selectedTime: WritableComputedRef<Date | undefined>;
     valueSet: ComputedRef<boolean>;
-    internalErrorMessages: Ref<string[]>;
-    now: Ref<Dayjs>;
+    internalErrorMessages: Readonly<Ref<string[]>>;
+    now: Readonly<Ref<Dayjs>>;
     segmentData: SegmentData;
     minAllowedDate: ComputedRef<Date>;
     maxAllowedDate: ComputedRef<Date | undefined>;

package/dist/components/date-time-picker/use-date-time-selection.js

@@ -3,7 +3,7 @@ import { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } f
 import { buildDateTime, clampToBounds } from "./segment-utils.js";
 import { completePartialEntry } from "./partial-time.js";
 import { useDateBounds } from "./use-date-bounds.js";
-import { computed, nextTick, onMounted, ref, watch } from "vue";
+import { computed, nextTick, onMounted, ref, shallowReadonly, watch } from "vue";
 import { isDefined, watchIgnorable } from "@vueuse/core";
 import { get as get$1, set as set$1 } from "@vueuse/shared";
 import dayjs from "dayjs";
@@ -11,16 +11,16 @@ import dayjs from "dayjs";
 var MILLISECONDS = 1e3;
 function useDateTimeSelection(options) {
 	const { accuracy, allowEmpty, dateFormat, maxDate, minDate, modelValue, partialTime, type } = options;
-	const selectedYear = ref();
-	const selectedMonth = ref();
-	const selectedDay = ref();
-	const selectedHour = ref();
-	const selectedMinute = ref();
-	const selectedSecond = ref();
-	const selectedMillisecond = ref();
-	const selectedTimezone = ref(guessTimezone());
+	const modelYear = ref();
+	const modelMonth = ref();
+	const modelDay = ref();
+	const modelHour = ref();
+	const modelMinute = ref();
+	const modelSecond = ref();
+	const modelMillisecond = ref();
+	const modelTimezone = ref(guessTimezone());
 	const now = ref(dayjs.tz(void 0, guessTimezone()));
-	const { internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({
+	const { clearErrors, internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({
 		dateFormat,
 		epochSeconds: type === "epoch",
 		maxDate,
@@ -28,54 +28,54 @@ function useDateTimeSelection(options) {
 		now
 	});
 	const segmentData = {
-		DD: selectedDay,
-		HH: selectedHour,
-		MM: selectedMonth,
-		SSS: selectedMillisecond,
-		YYYY: selectedYear,
-		mm: selectedMinute,
-		ss: selectedSecond
+		DD: modelDay,
+		HH: modelHour,
+		MM: modelMonth,
+		SSS: modelMillisecond,
+		YYYY: modelYear,
+		mm: modelMinute,
+		ss: modelSecond
 	};
 	const selectedDate = computed({
 		get() {
-			if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) return;
+			if (!(isDefined(modelYear) && isDefined(modelMonth) && isDefined(modelDay))) return;
 			const date = /* @__PURE__ */ new Date();
-			date.setFullYear(get$1(selectedYear));
+			date.setFullYear(get$1(modelYear));
 			date.setDate(1);
-			date.setMonth(get$1(selectedMonth) - 1);
-			date.setDate(get$1(selectedDay));
+			date.setMonth(get$1(modelMonth) - 1);
+			date.setDate(get$1(modelDay));
 			return date;
 		},
 		set(value) {
-			set$1(selectedYear, value?.getFullYear());
-			set$1(selectedMonth, value ? value.getMonth() + 1 : void 0);
-			set$1(selectedDay, value?.getDate());
+			set$1(modelYear, value?.getFullYear());
+			set$1(modelMonth, value ? value.getMonth() + 1 : void 0);
+			set$1(modelDay, value?.getDate());
 		}
 	});
 	const selectedTime = computed({
 		get() {
-			if (!(isDefined(selectedHour) && isDefined(selectedMinute))) return;
+			if (!(isDefined(modelHour) && isDefined(modelMinute))) return;
 			const date = /* @__PURE__ */ new Date();
-			date.setHours(get$1(selectedHour), get$1(selectedMinute), get$1(selectedSecond) ?? 0, get$1(selectedMillisecond) ?? 0);
+			date.setHours(get$1(modelHour), get$1(modelMinute), get$1(modelSecond) ?? 0, get$1(modelMillisecond) ?? 0);
 			return date;
 		},
 		set(value) {
-			set$1(selectedHour, value?.getHours());
-			set$1(selectedMinute, value?.getMinutes());
-			set$1(selectedSecond, value?.getSeconds());
-			set$1(selectedMillisecond, value?.getMilliseconds());
+			set$1(modelHour, value?.getHours());
+			set$1(modelMinute, value?.getMinutes());
+			set$1(modelSecond, value?.getSeconds());
+			set$1(modelMillisecond, value?.getMilliseconds());
 		}
 	});
 	const valueSet = computed(() => isDefined(selectedDate) && isDefined(selectedTime));
 	function getDateTime() {
 		return buildDateTime({
-			day: get$1(selectedDay),
-			hour: get$1(selectedHour),
-			millisecond: get$1(selectedMillisecond),
-			minute: get$1(selectedMinute),
-			month: get$1(selectedMonth),
-			second: get$1(selectedSecond),
-			year: get$1(selectedYear)
+			day: get$1(modelDay),
+			hour: get$1(modelHour),
+			millisecond: get$1(modelMillisecond),
+			minute: get$1(modelMinute),
+			month: get$1(modelMonth),
+			second: get$1(modelSecond),
+			year: get$1(modelYear)
 		}, accuracy);
 	}
 	function emitUpdate(updatedModel) {
@@ -85,37 +85,45 @@ function useDateTimeSelection(options) {
 			"epoch-ms": () => updatedModel.valueOf()
 		}[type]());
 	}
+	/**
+	* Writes the segments back to the model.
+	*
+	* The segments are a wall-clock reading, so they are formatted and parsed in
+	* the selected timezone. Mutating a `dayjs.tz()` built from the old value
+	* instead would keep that value's UTC offset, and moving the date across a
+	* DST boundary then shifted the time by an hour.
+	*/
 	function updateModelValue() {
 		if (!isDefined(selectedDate) || !isDefined(selectedTime)) return;
-		const updatedModel = dayjs.tz(formatWallClock(get$1(selectedDate), get$1(selectedTime), accuracy), get$1(selectedTimezone));
+		const updatedModel = dayjs.tz(formatWallClock(get$1(selectedDate), get$1(selectedTime), accuracy), get$1(modelTimezone));
 		if (!isDateValid(updatedModel)) return;
 		emitUpdate(updatedModel);
 	}
 	function clear() {
-		set$1(internalErrorMessages, []);
-		set$1(selectedYear, void 0);
-		set$1(selectedMonth, void 0);
-		set$1(selectedDay, void 0);
-		set$1(selectedHour, void 0);
-		set$1(selectedMinute, void 0);
-		set$1(selectedSecond, void 0);
-		set$1(selectedMillisecond, void 0);
+		clearErrors();
+		set$1(modelYear, void 0);
+		set$1(modelMonth, void 0);
+		set$1(modelDay, void 0);
+		set$1(modelHour, void 0);
+		set$1(modelMinute, void 0);
+		set$1(modelSecond, void 0);
+		set$1(modelMillisecond, void 0);
 		set$1(modelValue, void 0);
 	}
 	function clampToAllowed(date) {
 		return clampToBounds(date, get$1(minAllowedDate), get$1(maxAllowedDate));
 	}
 	function applySegments(date) {
-		set$1(selectedYear, date.year());
-		set$1(selectedMonth, date.month() + 1);
-		set$1(selectedDay, date.date());
-		set$1(selectedHour, date.hour());
-		set$1(selectedMinute, date.minute());
-		set$1(selectedSecond, includeSeconds(accuracy) ? date.second() : 0);
-		set$1(selectedMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);
+		set$1(modelYear, date.year());
+		set$1(modelMonth, date.month() + 1);
+		set$1(modelDay, date.date());
+		set$1(modelHour, date.hour());
+		set$1(modelMinute, date.minute());
+		set$1(modelSecond, includeSeconds(accuracy) ? date.second() : 0);
+		set$1(modelMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);
 	}
 	function setNow() {
-		set$1(internalErrorMessages, []);
+		clearErrors();
 		const date = dayjs();
 		set$1(now, date);
 		applySegments(clampToAllowed(date));
@@ -128,16 +136,16 @@ function useDateTimeSelection(options) {
 	* time survives. Falls back to midnight when no time has been entered yet.
 	*/
 	function setToday() {
-		set$1(internalErrorMessages, []);
+		clearErrors();
 		const date = dayjs();
 		set$1(now, date);
 		applySegments(clampToAllowed(buildDateTime({
 			day: date.date(),
-			hour: get$1(selectedHour) ?? 0,
-			millisecond: get$1(selectedMillisecond) ?? 0,
-			minute: get$1(selectedMinute) ?? 0,
+			hour: get$1(modelHour) ?? 0,
+			millisecond: get$1(modelMillisecond) ?? 0,
+			minute: get$1(modelMinute) ?? 0,
 			month: date.month() + 1,
-			second: get$1(selectedSecond) ?? 0,
+			second: get$1(modelSecond) ?? 0,
 			year: date.year()
 		}, accuracy, date)));
 		nextTick(() => {
@@ -152,16 +160,16 @@ function useDateTimeSelection(options) {
 		const minute = date.minute();
 		const second = includeSeconds(accuracy) ? date.second() : void 0;
 		const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : void 0;
-		if (get$1(selectedYear) !== year) set$1(selectedYear, year);
-		if (get$1(selectedMonth) !== month) set$1(selectedMonth, month);
-		if (get$1(selectedDay) !== day) set$1(selectedDay, day);
-		if (get$1(selectedHour) !== hour) set$1(selectedHour, hour);
-		if (get$1(selectedMinute) !== minute) set$1(selectedMinute, minute);
-		if (get$1(selectedSecond) !== second) set$1(selectedSecond, second);
-		if (get$1(selectedMillisecond) !== millisecond) set$1(selectedMillisecond, millisecond);
+		if (get$1(modelYear) !== year) set$1(modelYear, year);
+		if (get$1(modelMonth) !== month) set$1(modelMonth, month);
+		if (get$1(modelDay) !== day) set$1(modelDay, day);
+		if (get$1(modelHour) !== hour) set$1(modelHour, hour);
+		if (get$1(modelMinute) !== minute) set$1(modelMinute, minute);
+		if (get$1(modelSecond) !== second) set$1(modelSecond, second);
+		if (get$1(modelMillisecond) !== millisecond) set$1(modelMillisecond, millisecond);
 	}
 	const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {
-		const currentTimezone = get$1(selectedTimezone);
+		const currentTimezone = get$1(modelTimezone);
 		const newDate = dayjs.tz(newSelectedDate, currentTimezone);
 		const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);
 		const newTime = dayjs.tz(newSelectedTime, currentTimezone);
@@ -175,18 +183,20 @@ function useDateTimeSelection(options) {
 	* a bare date can become a value. Called when the user is done with the field
 	* rather than on every keystroke, since a segment still being typed is not
 	* yet one they left out. The fill is written back into the field, so the
-	* value it decided on is the one on screen.
+	* value it decided on is the one on screen, and into the model directly:
+	* running on blur and on enter, it would otherwise lose the value to a
+	* consumer that closes the field on that key before the watcher emits.
 	*/
 	function commitPartialTime() {
 		if (partialTime === void 0) return;
 		const target = completePartialEntry({
-			day: get$1(selectedDay),
-			hour: get$1(selectedHour),
-			millisecond: get$1(selectedMillisecond),
-			minute: get$1(selectedMinute),
-			month: get$1(selectedMonth),
-			second: get$1(selectedSecond),
-			year: get$1(selectedYear)
+			day: get$1(modelDay),
+			hour: get$1(modelHour),
+			millisecond: get$1(modelMillisecond),
+			minute: get$1(modelMinute),
+			month: get$1(modelMonth),
+			second: get$1(modelSecond),
+			year: get$1(modelYear)
 		}, {
 			accuracy,
 			maxDate: get$1(maxAllowedDate),
@@ -200,12 +210,12 @@ function useDateTimeSelection(options) {
 	function updateInternalModel(value) {
 		ignoreUpdates(() => {
 			const updatedValue = type === "epoch" && typeof value === "number" ? value * MILLISECONDS : value;
-			const date = dayjs.tz(updatedValue, get$1(selectedTimezone));
+			const date = dayjs.tz(updatedValue, get$1(modelTimezone));
 			isDateValid(date);
 			updateSegments(date);
 		});
 	}
-	watch(selectedTimezone, (newTimezone) => {
+	watch(modelTimezone, (newTimezone) => {
 		if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {
 			set$1(now, dayjs());
 			updateModelValue();
@@ -228,18 +238,18 @@ function useDateTimeSelection(options) {
 		isDateValid,
 		maxAllowedDate,
 		minAllowedDate,
-		now,
+		modelDay,
+		modelHour,
+		modelMillisecond,
+		modelMinute,
+		modelMonth,
+		modelSecond,
+		modelTimezone,
+		modelYear,
+		now: shallowReadonly(now),
 		segmentData,
 		selectedDate,
-		selectedDay,
-		selectedHour,
-		selectedMillisecond,
-		selectedMinute,
-		selectedMonth,
-		selectedSecond,
 		selectedTime,
-		selectedTimezone,
-		selectedYear,
 		setNow,
 		setToday,
 		valueSet

package/dist/components/date-time-picker/use-date-time-selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-date-time-selection.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-time-selection.ts"],"sourcesContent":["import type { ComputedRef, Ref, WritableComputedRef } from 'vue';\nimport type { SegmentData } from '@/components/date-time-picker/types';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { completePartialEntry, type PartialTimeMode } from '@/components/date-time-picker/partial-time';\nimport { buildDateTime, clampToBounds } from '@/components/date-time-picker/segment-utils';\nimport { useDateBounds } from '@/components/date-time-picker/use-date-bounds';\nimport { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport '@/components/date-time-picker/dayjs-setup';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\ninterface DateTimeSelectionOptions<T extends DateTimeModelType> {\n  modelValue: Ref<ModelValueType<T>>;\n  type: T;\n  accuracy: TimeAccuracy;\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  allowEmpty: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** See {@link completePartialEntry}; unset, an incomplete entry is not a value. */\n  partialTime?: PartialTimeMode;\n}\n\ninterface DateTimeSelectionReturn {\n  selectedYear: Ref<number | undefined>;\n  selectedMonth: Ref<number | undefined>;\n  selectedDay: Ref<number | undefined>;\n  selectedHour: Ref<number | undefined>;\n  selectedMinute: Ref<number | undefined>;\n  selectedSecond: Ref<number | undefined>;\n  selectedMillisecond: Ref<number | undefined>;\n  selectedTimezone: Ref<string | undefined>;\n  selectedDate: WritableComputedRef<Date | undefined>;\n  selectedTime: WritableComputedRef<Date | undefined>;\n  valueSet: ComputedRef<boolean>;\n  internalErrorMessages: Ref<string[]>;\n  now: Ref<Dayjs>;\n  segmentData: SegmentData;\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  getDateTime: () => Dayjs;\n  setNow: () => void;\n  setToday: () => void;\n  commitPartialTime: () => void;\n  clear: () => void;\n  isDateValid: (date: Dayjs) => boolean;\n}\n\nconst MILLISECONDS = 1000;\n\nexport function useDateTimeSelection<T extends DateTimeModelType>(\n  options: DateTimeSelectionOptions<T>,\n): DateTimeSelectionReturn {\n  const {\n    accuracy,\n    allowEmpty,\n    dateFormat,\n    maxDate,\n    minDate,\n    modelValue,\n    partialTime,\n    type,\n  } = options;\n\n  const selectedYear = ref<number | undefined>();\n  const selectedMonth = ref<number | undefined>();\n  const selectedDay = ref<number | undefined>();\n\n  const selectedHour = ref<number | undefined>();\n  const selectedMinute = ref<number | undefined>();\n  const selectedSecond = ref<number | undefined>();\n  const selectedMillisecond = ref<number | undefined>();\n  const selectedTimezone = ref<string | undefined>(guessTimezone());\n\n  const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n  const { internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({\n    dateFormat,\n    epochSeconds: type === 'epoch',\n    maxDate,\n    minDate,\n    now,\n  });\n\n  const segmentData: SegmentData = {\n    DD: selectedDay,\n    HH: selectedHour,\n    MM: selectedMonth,\n    SSS: selectedMillisecond,\n    YYYY: selectedYear,\n    mm: selectedMinute,\n    ss: selectedSecond,\n  };\n\n  const selectedDate = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setFullYear(get(selectedYear));\n      // Set day to 1 first to prevent month overflow when today's day > days in target month\n      // e.g., if today is Dec 30 and we set month to Feb, day 30 would overflow to March\n      date.setDate(1);\n      date.setMonth(get(selectedMonth) - 1);\n      date.setDate(get(selectedDay));\n      return date;\n    },\n    set(value?: Date) {\n      set(selectedYear, value?.getFullYear());\n      set(selectedMonth, value ? value.getMonth() + 1 : undefined);\n      set(selectedDay, value?.getDate());\n    },\n  });\n\n  const selectedTime = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setHours(\n        get(selectedHour),\n        get(selectedMinute),\n        get(selectedSecond) ?? 0,\n        get(selectedMillisecond) ?? 0,\n      );\n      return date;\n    },\n    set(value?: Date) {\n      set(selectedHour, value?.getHours());\n      set(selectedMinute, value?.getMinutes());\n      set(selectedSecond, value?.getSeconds());\n      set(selectedMillisecond, value?.getMilliseconds());\n    },\n  });\n\n  const valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\n  function getDateTime(): Dayjs {\n    return buildDateTime({\n      day: get(selectedDay),\n      hour: get(selectedHour),\n      millisecond: get(selectedMillisecond),\n      minute: get(selectedMinute),\n      month: get(selectedMonth),\n      second: get(selectedSecond),\n      year: get(selectedYear),\n    }, accuracy);\n  }\n\n  function emitUpdate(updatedModel: Dayjs): void {\n    const typeMap = {\n      'date': () => updatedModel.toDate(),\n      // an epoch is whole seconds; `millisecond` accuracy would otherwise emit a fraction\n      'epoch': () => Math.floor(updatedModel.valueOf() / MILLISECONDS),\n      'epoch-ms': () => updatedModel.valueOf(),\n    } as const;\n\n    set(modelValue, typeMap[type]() as ModelValueType<T>);\n  }\n\n  function updateModelValue(): void {\n    if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n      return;\n    }\n\n    // The segments are a wall-clock reading, so they are formatted and parsed\n    // in the selected timezone. Mutating a `dayjs.tz()` built from the old\n    // value instead would keep that value's UTC offset, and moving the date\n    // across a DST boundary then shifted the time by an hour.\n    const updatedModel = dayjs.tz(\n      formatWallClock(get(selectedDate), get(selectedTime), accuracy),\n      get(selectedTimezone),\n    );\n\n    if (!isDateValid(updatedModel)) {\n      return;\n    }\n\n    emitUpdate(updatedModel);\n  }\n\n  function clear(): void {\n    set(internalErrorMessages, []);\n    set(selectedYear, undefined);\n    set(selectedMonth, undefined);\n    set(selectedDay, undefined);\n    set(selectedHour, undefined);\n    set(selectedMinute, undefined);\n    set(selectedSecond, undefined);\n    set(selectedMillisecond, undefined);\n    set(modelValue, undefined as ModelValueType<T>);\n  }\n\n  function clampToAllowed(date: Dayjs): Dayjs {\n    return clampToBounds(date, get(minAllowedDate), get(maxAllowedDate));\n  }\n\n  function applySegments(date: Dayjs): void {\n    set(selectedYear, date.year());\n    set(selectedMonth, date.month() + 1);\n    set(selectedDay, date.date());\n    set(selectedHour, date.hour());\n    set(selectedMinute, date.minute());\n    set(selectedSecond, includeSeconds(accuracy) ? date.second() : 0);\n    set(selectedMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);\n  }\n\n  function setNow(): void {\n    set(internalErrorMessages, []);\n\n    const date = dayjs();\n    set(now, date);\n    applySegments(clampToAllowed(date));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  /**\n   * Moves the date part to today and leaves the time part alone, so a picked\n   * time survives. Falls back to midnight when no time has been entered yet.\n   */\n  function setToday(): void {\n    set(internalErrorMessages, []);\n\n    const date = dayjs();\n    set(now, date);\n\n    const target = buildDateTime({\n      day: date.date(),\n      hour: get(selectedHour) ?? 0,\n      millisecond: get(selectedMillisecond) ?? 0,\n      minute: get(selectedMinute) ?? 0,\n      month: date.month() + 1,\n      second: get(selectedSecond) ?? 0,\n      year: date.year(),\n    }, accuracy, date);\n\n    applySegments(clampToAllowed(target));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  function updateSegments(date: Dayjs): void {\n    const year = date.year();\n    const month = date.month() + 1;\n    const day = date.date();\n    const hour = date.hour();\n    const minute = date.minute();\n    const second = includeSeconds(accuracy) ? date.second() : undefined;\n    const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : undefined;\n\n    if (get(selectedYear) !== year)\n      set(selectedYear, year);\n    if (get(selectedMonth) !== month)\n      set(selectedMonth, month);\n    if (get(selectedDay) !== day)\n      set(selectedDay, day);\n    if (get(selectedHour) !== hour)\n      set(selectedHour, hour);\n    if (get(selectedMinute) !== minute)\n      set(selectedMinute, minute);\n    if (get(selectedSecond) !== second)\n      set(selectedSecond, second);\n    if (get(selectedMillisecond) !== millisecond)\n      set(selectedMillisecond, millisecond);\n  }\n\n  const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {\n    const currentTimezone = get(selectedTimezone);\n    const newDate = dayjs.tz(newSelectedDate, currentTimezone);\n    const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);\n    const newTime = dayjs.tz(newSelectedTime, currentTimezone);\n    const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n    if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {\n      return;\n    }\n\n    set(now, dayjs());\n    updateModelValue();\n  });\n\n  /**\n   * Fills in the segments an incomplete entry never reached and commits it, so\n   * a bare date can become a value. Called when the user is done with the field\n   * rather than on every keystroke, since a segment still being typed is not\n   * yet one they left out. The fill is written back into the field, so the\n   * value it decided on is the one on screen.\n   */\n  function commitPartialTime(): void {\n    if (partialTime === undefined)\n      return;\n\n    const target = completePartialEntry({\n      day: get(selectedDay),\n      hour: get(selectedHour),\n      millisecond: get(selectedMillisecond),\n      minute: get(selectedMinute),\n      month: get(selectedMonth),\n      second: get(selectedSecond),\n      year: get(selectedYear),\n    }, {\n      accuracy,\n      maxDate: get(maxAllowedDate),\n      minDate: get(minAllowedDate),\n      mode: partialTime,\n    });\n\n    if (!target)\n      return;\n\n    // The model is written here rather than left to the watcher: this runs on blur and on enter,\n    // and a consumer that closes the field on that key would drop a value the watcher only emits\n    // on the next tick.\n    ignoreUpdates(() => applySegments(target));\n    updateModelValue();\n  }\n\n  function updateInternalModel(value: ModelValueType<T>): void {\n    ignoreUpdates(() => {\n      const updatedValue = type === 'epoch' && typeof value === 'number'\n        ? value * MILLISECONDS\n        : value;\n      const date = dayjs.tz(updatedValue, get(selectedTimezone));\n      isDateValid(date);\n      updateSegments(date);\n    });\n  }\n\n  watch(selectedTimezone, (newTimezone: string | undefined) => {\n    if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n      set(now, dayjs());\n      updateModelValue();\n    }\n  });\n\n  watch(modelValue, (value) => {\n    set(now, dayjs());\n    if (value === undefined) {\n      clear();\n    }\n    else {\n      updateInternalModel(value);\n    }\n  });\n\n  onMounted(() => {\n    if (isDefined(modelValue)) {\n      updateInternalModel(get(modelValue));\n    }\n    else if (!allowEmpty) {\n      setNow();\n    }\n  });\n\n  return {\n    clear,\n    commitPartialTime,\n    getDateTime,\n    internalErrorMessages,\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n    now,\n    segmentData,\n    selectedDate,\n    selectedDay,\n    selectedHour,\n    selectedMillisecond,\n    selectedMinute,\n    selectedMonth,\n    selectedSecond,\n    selectedTime,\n    selectedTimezone,\n    selectedYear,\n    setNow,\n    setToday,\n    valueSet,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-date-time-selection.js","names":[],"sources":["../../../src/components/date-time-picker/use-date-time-selection.ts"],"sourcesContent":["import type { ComputedRef, Ref, WritableComputedRef } from 'vue';\nimport type { SegmentData } from '@/components/date-time-picker/types';\nimport type { TimeAccuracy } from '@/consts/time-accuracy';\nimport dayjs, { type Dayjs } from 'dayjs';\nimport { completePartialEntry, type PartialTimeMode } from '@/components/date-time-picker/partial-time';\nimport { buildDateTime, clampToBounds } from '@/components/date-time-picker/segment-utils';\nimport { useDateBounds } from '@/components/date-time-picker/use-date-bounds';\nimport { formatWallClock, guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport '@/components/date-time-picker/dayjs-setup';\n\ntype DateTimeModelType = 'date' | 'epoch-ms' | 'epoch';\n\ntype ModelValueType<T extends DateTimeModelType> =\n  T extends 'date' ? Date | undefined :\n    T extends 'epoch-ms' ? number | undefined :\n      T extends 'epoch' ? number | undefined :\n        Date | number | undefined;\n\ninterface DateTimeSelectionOptions<T extends DateTimeModelType> {\n  modelValue: Ref<ModelValueType<T>>;\n  type: T;\n  accuracy: TimeAccuracy;\n  minDate: Date | number | undefined;\n  maxDate: Date | number | 'now' | undefined;\n  allowEmpty: boolean;\n  /**\n   * The field's own format, so a bound named in an error message is written the\n   * same way round as the value the user is looking at.\n   */\n  dateFormat: Ref<string>;\n  /** See {@link completePartialEntry}; unset, an incomplete entry is not a value. */\n  partialTime?: PartialTimeMode;\n}\n\ninterface DateTimeSelectionReturn {\n  modelYear: Ref<number | undefined>;\n  modelMonth: Ref<number | undefined>;\n  modelDay: Ref<number | undefined>;\n  modelHour: Ref<number | undefined>;\n  modelMinute: Ref<number | undefined>;\n  modelSecond: Ref<number | undefined>;\n  modelMillisecond: Ref<number | undefined>;\n  modelTimezone: Ref<string | undefined>;\n  selectedDate: WritableComputedRef<Date | undefined>;\n  selectedTime: WritableComputedRef<Date | undefined>;\n  valueSet: ComputedRef<boolean>;\n  internalErrorMessages: Readonly<Ref<string[]>>;\n  now: Readonly<Ref<Dayjs>>;\n  segmentData: SegmentData;\n  minAllowedDate: ComputedRef<Date>;\n  maxAllowedDate: ComputedRef<Date | undefined>;\n  getDateTime: () => Dayjs;\n  setNow: () => void;\n  setToday: () => void;\n  commitPartialTime: () => void;\n  clear: () => void;\n  isDateValid: (date: Dayjs) => boolean;\n}\n\nconst MILLISECONDS = 1000;\n\nexport function useDateTimeSelection<T extends DateTimeModelType>(\n  options: DateTimeSelectionOptions<T>,\n): DateTimeSelectionReturn {\n  const {\n    accuracy,\n    allowEmpty,\n    dateFormat,\n    maxDate,\n    minDate,\n    modelValue,\n    partialTime,\n    type,\n  } = options;\n\n  const modelYear = ref<number | undefined>();\n  const modelMonth = ref<number | undefined>();\n  const modelDay = ref<number | undefined>();\n\n  const modelHour = ref<number | undefined>();\n  const modelMinute = ref<number | undefined>();\n  const modelSecond = ref<number | undefined>();\n  const modelMillisecond = ref<number | undefined>();\n  const modelTimezone = ref<string | undefined>(guessTimezone());\n\n  const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n  const { clearErrors, internalErrorMessages, isDateValid, maxAllowedDate, minAllowedDate } = useDateBounds({\n    dateFormat,\n    epochSeconds: type === 'epoch',\n    maxDate,\n    minDate,\n    now,\n  });\n\n  const segmentData: SegmentData = {\n    DD: modelDay,\n    HH: modelHour,\n    MM: modelMonth,\n    SSS: modelMillisecond,\n    YYYY: modelYear,\n    mm: modelMinute,\n    ss: modelSecond,\n  };\n\n  const selectedDate = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelYear) && isDefined(modelMonth) && isDefined(modelDay))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setFullYear(get(modelYear));\n      // Day 1 first, so a later month with fewer days cannot overflow into the next one\n      date.setDate(1);\n      date.setMonth(get(modelMonth) - 1);\n      date.setDate(get(modelDay));\n      return date;\n    },\n    set(value?: Date) {\n      set(modelYear, value?.getFullYear());\n      set(modelMonth, value ? value.getMonth() + 1 : undefined);\n      set(modelDay, value?.getDate());\n    },\n  });\n\n  const selectedTime = computed<Date | undefined>({\n    get() {\n      if (!(isDefined(modelHour) && isDefined(modelMinute))) {\n        return undefined;\n      }\n      const date = new Date();\n      date.setHours(\n        get(modelHour),\n        get(modelMinute),\n        get(modelSecond) ?? 0,\n        get(modelMillisecond) ?? 0,\n      );\n      return date;\n    },\n    set(value?: Date) {\n      set(modelHour, value?.getHours());\n      set(modelMinute, value?.getMinutes());\n      set(modelSecond, value?.getSeconds());\n      set(modelMillisecond, value?.getMilliseconds());\n    },\n  });\n\n  const valueSet = computed<boolean>(() => isDefined(selectedDate) && isDefined(selectedTime));\n\n  function getDateTime(): Dayjs {\n    return buildDateTime({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, accuracy);\n  }\n\n  function emitUpdate(updatedModel: Dayjs): void {\n    const typeMap = {\n      'date': () => updatedModel.toDate(),\n      // an epoch is whole seconds; `millisecond` accuracy would otherwise emit a fraction\n      'epoch': () => Math.floor(updatedModel.valueOf() / MILLISECONDS),\n      'epoch-ms': () => updatedModel.valueOf(),\n    } as const;\n\n    set(modelValue, typeMap[type]() as ModelValueType<T>);\n  }\n\n  /**\n   * Writes the segments back to the model.\n   *\n   * The segments are a wall-clock reading, so they are formatted and parsed in\n   * the selected timezone. Mutating a `dayjs.tz()` built from the old value\n   * instead would keep that value's UTC offset, and moving the date across a\n   * DST boundary then shifted the time by an hour.\n   */\n  function updateModelValue(): void {\n    if (!isDefined(selectedDate) || !isDefined(selectedTime)) {\n      return;\n    }\n\n    const updatedModel = dayjs.tz(\n      formatWallClock(get(selectedDate), get(selectedTime), accuracy),\n      get(modelTimezone),\n    );\n\n    if (!isDateValid(updatedModel)) {\n      return;\n    }\n\n    emitUpdate(updatedModel);\n  }\n\n  function clear(): void {\n    clearErrors();\n    set(modelYear, undefined);\n    set(modelMonth, undefined);\n    set(modelDay, undefined);\n    set(modelHour, undefined);\n    set(modelMinute, undefined);\n    set(modelSecond, undefined);\n    set(modelMillisecond, undefined);\n    set(modelValue, undefined as ModelValueType<T>);\n  }\n\n  function clampToAllowed(date: Dayjs): Dayjs {\n    return clampToBounds(date, get(minAllowedDate), get(maxAllowedDate));\n  }\n\n  function applySegments(date: Dayjs): void {\n    set(modelYear, date.year());\n    set(modelMonth, date.month() + 1);\n    set(modelDay, date.date());\n    set(modelHour, date.hour());\n    set(modelMinute, date.minute());\n    set(modelSecond, includeSeconds(accuracy) ? date.second() : 0);\n    set(modelMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);\n  }\n\n  function setNow(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n    applySegments(clampToAllowed(date));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  /**\n   * Moves the date part to today and leaves the time part alone, so a picked\n   * time survives. Falls back to midnight when no time has been entered yet.\n   */\n  function setToday(): void {\n    clearErrors();\n\n    const date = dayjs();\n    set(now, date);\n\n    const target = buildDateTime({\n      day: date.date(),\n      hour: get(modelHour) ?? 0,\n      millisecond: get(modelMillisecond) ?? 0,\n      minute: get(modelMinute) ?? 0,\n      month: date.month() + 1,\n      second: get(modelSecond) ?? 0,\n      year: date.year(),\n    }, accuracy, date);\n\n    applySegments(clampToAllowed(target));\n\n    nextTick(() => {\n      updateModelValue();\n    });\n  }\n\n  function updateSegments(date: Dayjs): void {\n    const year = date.year();\n    const month = date.month() + 1;\n    const day = date.date();\n    const hour = date.hour();\n    const minute = date.minute();\n    const second = includeSeconds(accuracy) ? date.second() : undefined;\n    const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : undefined;\n\n    if (get(modelYear) !== year)\n      set(modelYear, year);\n    if (get(modelMonth) !== month)\n      set(modelMonth, month);\n    if (get(modelDay) !== day)\n      set(modelDay, day);\n    if (get(modelHour) !== hour)\n      set(modelHour, hour);\n    if (get(modelMinute) !== minute)\n      set(modelMinute, minute);\n    if (get(modelSecond) !== second)\n      set(modelSecond, second);\n    if (get(modelMillisecond) !== millisecond)\n      set(modelMillisecond, millisecond);\n  }\n\n  const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {\n    const currentTimezone = get(modelTimezone);\n    const newDate = dayjs.tz(newSelectedDate, currentTimezone);\n    const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);\n    const newTime = dayjs.tz(newSelectedTime, currentTimezone);\n    const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);\n\n    if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {\n      return;\n    }\n\n    set(now, dayjs());\n    updateModelValue();\n  });\n\n  /**\n   * Fills in the segments an incomplete entry never reached and commits it, so\n   * a bare date can become a value. Called when the user is done with the field\n   * rather than on every keystroke, since a segment still being typed is not\n   * yet one they left out. The fill is written back into the field, so the\n   * value it decided on is the one on screen, and into the model directly:\n   * running on blur and on enter, it would otherwise lose the value to a\n   * consumer that closes the field on that key before the watcher emits.\n   */\n  function commitPartialTime(): void {\n    if (partialTime === undefined)\n      return;\n\n    const target = completePartialEntry({\n      day: get(modelDay),\n      hour: get(modelHour),\n      millisecond: get(modelMillisecond),\n      minute: get(modelMinute),\n      month: get(modelMonth),\n      second: get(modelSecond),\n      year: get(modelYear),\n    }, {\n      accuracy,\n      maxDate: get(maxAllowedDate),\n      minDate: get(minAllowedDate),\n      mode: partialTime,\n    });\n\n    if (!target)\n      return;\n\n    ignoreUpdates(() => applySegments(target));\n    updateModelValue();\n  }\n\n  function updateInternalModel(value: ModelValueType<T>): void {\n    ignoreUpdates(() => {\n      const updatedValue = type === 'epoch' && typeof value === 'number'\n        ? value * MILLISECONDS\n        : value;\n      const date = dayjs.tz(updatedValue, get(modelTimezone));\n      isDateValid(date);\n      updateSegments(date);\n    });\n  }\n\n  watch(modelTimezone, (newTimezone: string | undefined) => {\n    if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {\n      set(now, dayjs());\n      updateModelValue();\n    }\n  });\n\n  watch(modelValue, (value) => {\n    set(now, dayjs());\n    if (value === undefined) {\n      clear();\n    }\n    else {\n      updateInternalModel(value);\n    }\n  });\n\n  onMounted(() => {\n    if (isDefined(modelValue)) {\n      updateInternalModel(get(modelValue));\n    }\n    else if (!allowEmpty) {\n      setNow();\n    }\n  });\n\n  return {\n    clear,\n    commitPartialTime,\n    getDateTime,\n    internalErrorMessages,\n    isDateValid,\n    maxAllowedDate,\n    minAllowedDate,\n    modelDay,\n    modelHour,\n    modelMillisecond,\n    modelMinute,\n    modelMonth,\n    modelSecond,\n    modelTimezone,\n    modelYear,\n    now: shallowReadonly(now),\n    segmentData,\n    selectedDate,\n    selectedTime,\n    setNow,\n    setToday,\n    valueSet,\n  };\n}\n"],"mappings":"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"}

package/dist/components/date-time-picker/use-input-handler.d.ts

@@ -1,6 +1,6 @@
 import type { Dayjs } from 'dayjs';
 import type { Ref } from 'vue';
-import type { DateTimeSegmentType, SegmentData } from '../../components/date-time-picker/types.js';
+import type { DateTimeSegmentType, SegmentData } from './types.js';
 import type { TimeAccuracy } from '../../consts/time-accuracy.js';
 export declare function useInputHandler(data: SegmentData, currentValue: Ref<number | undefined>): {
     getCurrent: (segment: DateTimeSegmentType) => number | undefined;

package/dist/components/date-time-picker/use-keyboard-handler.d.ts

@@ -1,8 +1,8 @@
 import type { Dayjs } from 'dayjs';
 import type { Ref, ShallowRef } from 'vue';
 import type { TimeAccuracy } from '../../consts/time-accuracy.js';
-import { type Segment } from '../../components/date-time-picker/segment-config.js';
-import { type DateTimeSegmentType } from '../../components/date-time-picker/types.js';
+import { type Segment } from './segment-config.js';
+import { type DateTimeSegmentType } from './types.js';
 interface KeyboardHandlerOptions {
     dateFormat: Ref<string>;
     cursorPosition: Ref<number>;

package/dist/components/date-time-picker/use-keyboard-handler.js

@@ -92,12 +92,15 @@ function useKeyboardHandler(options) {
 			}
 		}
 	}
-	function handleDigitPressed(event, digit) {
-		if (!(event.target instanceof HTMLInputElement)) return;
-		const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);
-		if (!currentSegment || isNaN(parseInt(digit))) return;
-		const segmentType = currentSegment.type;
-		if (!isDateTimeSegmentType(segmentType)) return;
+	/**
+	* Adds a typed digit to the segment under the caret, moving on to the next
+	* segment once this one can hold no more.
+	*
+	* @param segment - the segment the caret sits in
+	* @param segmentType - that segment's type, which states its value range
+	* @param digit - the digit that was typed
+	*/
+	function applyDigit(segment, segmentType, digit) {
 		const config = SEGMENT_CONFIG[segmentType];
 		const combinedStr = `${get$1(currentValue) ?? ""}${digit}`;
 		const combinedValue = parseInt(combinedStr);
@@ -105,10 +108,18 @@ function useKeyboardHandler(options) {
 		const minValue = config.minValue ?? 0;
 		if (combinedValue >= minValue && combinedValue <= config.maxValue) {
 			setValue(segmentType, combinedValue);
-			setCursorPosition(currentSegment);
+			setCursorPosition(segment);
 		} else if (combinedValue < minValue && combinedStr.length < maxLength) set$1(currentValue, combinedValue);
 		if (parseInt(`${combinedStr}0`) > config.maxValue || combinedStr.length >= maxLength) navigateSegments("ArrowRight");
 	}
+	function handleDigitPressed(event, digit) {
+		if (!(event.target instanceof HTMLInputElement)) return;
+		const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);
+		if (!currentSegment || isNaN(parseInt(digit))) return;
+		const segmentType = currentSegment.type;
+		if (!isDateTimeSegmentType(segmentType)) return;
+		applyDigit(currentSegment, segmentType, digit);
+	}
 	function handleKeyboardNavigation(event) {
 		if (event.key === "ArrowUp") changeSegmentValue(true);
 		else if (event.key === "ArrowDown") changeSegmentValue(false);
@@ -129,19 +140,38 @@ function useKeyboardHandler(options) {
 			setCursorPosition(segment);
 		}
 	}
-	function handleKeyDown(event) {
-		if (disabled || readonly) return;
-		const { key } = event;
-		if (event.ctrlKey || event.metaKey || event.altKey) return;
+	/**
+	* Runs the picker's own handling for a key.
+	*
+	* @param event - the keydown being handled
+	* @param key - the key that was pressed
+	* @returns whether the picker handled it, which decides if the browser's own
+	* handling is kept: Tab moves out of the field, Escape closes the menu and
+	* Enter submits the surrounding form.
+	*/
+	function dispatchKey(event, key) {
 		if (key === "ArrowRight" || key === "ArrowLeft") navigateSegments(key);
 		else if (key === "ArrowUp" || key === "ArrowDown") handleKeyboardNavigation(event);
 		else if (key === "Backspace") handleBackspace(event);
 		else if (key === "Delete") onInputDeletePressed(event);
 		else if (/^\d$/.test(key)) handleDigitPressed(event, key);
-		else return;
-		event.preventDefault();
+		else return false;
+		return true;
+	}
+	function handleKeyDown(event) {
+		if (disabled || readonly) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (dispatchKey(event, event.key)) event.preventDefault();
 	}
 	let clickedSegment;
+	/**
+	* Captures the clicked segment on mousedown, which fires before focus.
+	*
+	* The in-progress digit buffer is reset because switching segments must not
+	* carry typed digits over, otherwise a leftover digit from another segment
+	* combines with the next keystroke (type "1" in HH, click mm, type "3" and
+	* mm would become 13 instead of 3).
+	*/
 	function handleMouseDown(event) {
 		if (disabled || readonly || !(event.target instanceof HTMLInputElement)) return;
 		const currentSegment = getCurrentSegment(getClickPosition(event, event.target, true));
@@ -168,6 +198,11 @@ function useKeyboardHandler(options) {
 		const firstSegment = get$1(segmentPositions)[0];
 		if (firstSegment) setCursorPosition(firstSegment);
 	}
+	/**
+	* Restores the selection a click asked for, which opening the menu and the
+	* DOM updates that follow can lose. With no click to restore, focus selects
+	* the first segment, unless the user is already selecting text themselves.
+	*/
 	function handleFocus() {
 		if (clickedSegment) {
 			setCursorPosition(clickedSegment);
@@ -178,6 +213,10 @@ function useKeyboardHandler(options) {
 		if (input && input.selectionStart !== input.selectionEnd) return;
 		selectFirstSegment();
 	}
+	/**
+	* Forgets the cursor position and the clicked segment, so re-focusing on
+	* another segment does not blink through the one left behind.
+	*/
 	function handleBlur() {
 		set$1(cursorPosition, 0);
 		set$1(currentValue, void 0);