@rotki/ui-library 2.9.1 → 2.11.0

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

@@ -0,0 +1,38 @@
+import type { ComputedRef, Ref, WritableComputedRef } from 'vue';
+import type { SegmentData } from '../../components/date-time-picker/types.js';
+import type { TimeAccuracy } from '../../consts/time-accuracy.js';
+import { type Dayjs } from 'dayjs';
+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> {
+    modelValue: Ref<ModelValueType<T>>;
+    type: T;
+    accuracy: TimeAccuracy;
+    minDate: Date | number | undefined;
+    maxDate: Date | number | 'now' | undefined;
+    allowEmpty: boolean;
+}
+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>;
+    selectedDate: WritableComputedRef<Date | undefined>;
+    selectedTime: WritableComputedRef<Date | undefined>;
+    valueSet: ComputedRef<boolean>;
+    internalErrorMessages: Ref<string[]>;
+    now: Ref<Dayjs>;
+    segmentData: SegmentData;
+    minAllowedDate: ComputedRef<Date>;
+    maxAllowedDate: ComputedRef<Date | undefined>;
+    getDateTime: () => Dayjs;
+    setNow: () => void;
+    clear: () => void;
+    isDateValid: (date: Dayjs) => boolean;
+}
+export declare function useDateTimeSelection<T extends DateTimeModelType>(options: DateTimeSelectionOptions<T>): DateTimeSelectionReturn;
+export {};

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

@@ -0,0 +1,286 @@
+import dayjs from "dayjs";
+import { guessTimezone, includeSeconds, includeMilliseconds } from "./utils.js";
+import { useRuiI8n } from "../../composables/use-rui-i18n.js";
+import { RUI_I18N_KEYS } from "../../i18n/keys.js";
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { get, set } from "@vueuse/shared";
+import { isDefined, watchIgnorable } from "@vueuse/core";
+const MILLISECONDS = 1e3;
+function useDateTimeSelection(options) {
+  const {
+    accuracy,
+    allowEmpty,
+    maxDate,
+    minDate,
+    modelValue,
+    type
+  } = options;
+  const { t } = useRuiI8n();
+  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 internalErrorMessages = ref([]);
+  const now = ref(dayjs.tz(void 0, guessTimezone()));
+  const minAllowedDate = computed(() => {
+    if (minDate === void 0) {
+      return new Date(1970, 0, 1);
+    }
+    if (type === "epoch" && typeof minDate === "number") {
+      return new Date(minDate * MILLISECONDS);
+    }
+    return new Date(minDate);
+  });
+  const maxAllowedDate = computed(() => {
+    if (maxDate === void 0) {
+      return void 0;
+    }
+    if (maxDate === "now") {
+      return get(now).toDate();
+    }
+    if (type === "epoch" && typeof maxDate === "number") {
+      return new Date(maxDate * MILLISECONDS);
+    }
+    return new Date(maxDate);
+  });
+  const segmentData = {
+    DD: selectedDay,
+    HH: selectedHour,
+    MM: selectedMonth,
+    SSS: selectedMillisecond,
+    YYYY: selectedYear,
+    mm: selectedMinute,
+    ss: selectedSecond
+  };
+  const selectedDate = computed({
+    get() {
+      if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {
+        return void 0;
+      }
+      const date = /* @__PURE__ */ new Date();
+      date.setFullYear(get(selectedYear));
+      date.setDate(1);
+      date.setMonth(get(selectedMonth) - 1);
+      date.setDate(get(selectedDay));
+      return date;
+    },
+    set(value) {
+      set(selectedYear, value?.getFullYear());
+      set(selectedMonth, value ? value.getMonth() + 1 : void 0);
+      set(selectedDay, value?.getDate());
+    }
+  });
+  const selectedTime = computed({
+    get() {
+      if (!(isDefined(selectedHour) && isDefined(selectedMinute))) {
+        return void 0;
+      }
+      const date = /* @__PURE__ */ new Date();
+      date.setHours(
+        get(selectedHour),
+        get(selectedMinute),
+        get(selectedSecond) ?? 0,
+        get(selectedMillisecond) ?? 0
+      );
+      return date;
+    },
+    set(value) {
+      set(selectedHour, value?.getHours());
+      set(selectedMinute, value?.getMinutes());
+      set(selectedSecond, value?.getSeconds());
+      set(selectedMillisecond, value?.getMilliseconds());
+    }
+  });
+  const valueSet = computed(() => isDefined(selectedDate) && isDefined(selectedTime));
+  function getDateTime() {
+    let dateTime = dayjs();
+    if (isDefined(selectedYear)) {
+      dateTime = dateTime.year(get(selectedYear));
+    }
+    if (isDefined(selectedMonth)) {
+      dateTime = dateTime.month(get(selectedMonth) - 1);
+    }
+    if (isDefined(selectedDay)) {
+      const daysInMonth = dateTime.daysInMonth();
+      const day = Math.min(get(selectedDay), daysInMonth);
+      dateTime = dateTime.date(day);
+    }
+    if (isDefined(selectedHour)) {
+      dateTime = dateTime.hour(get(selectedHour));
+    }
+    if (isDefined(selectedMinute)) {
+      dateTime = dateTime.minute(get(selectedMinute));
+    }
+    if (isDefined(selectedSecond)) {
+      dateTime = dateTime.second(get(selectedSecond));
+    }
+    if (isDefined(selectedMillisecond)) {
+      dateTime = dateTime.millisecond(get(selectedMillisecond));
+    }
+    return dateTime;
+  }
+  function isDateValid(date) {
+    const min = get(minAllowedDate);
+    const max = get(maxAllowedDate);
+    set(internalErrorMessages, []);
+    if (min && date.isBefore(min)) {
+      const errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {
+        date: min.toLocaleDateString()
+      }, `Date cannot be before ${min.toLocaleDateString()}`);
+      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);
+      return false;
+    }
+    if (max && date.isAfter(max)) {
+      const nowError = t(RUI_I18N_KEYS.dateTimePicker.dateInFuture, "The selected date cannot be in the future");
+      const maxError = t(RUI_I18N_KEYS.dateTimePicker.dateAfterMax, { date: max.toLocaleDateString() }, `Date cannot be after ${max.toLocaleDateString()}`);
+      const errorMessage = maxDate === "now" ? nowError : maxError;
+      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);
+      return false;
+    }
+    return true;
+  }
+  function emitUpdate(updatedModel) {
+    const typeMap = {
+      "date": () => updatedModel.toDate(),
+      "epoch": () => updatedModel.valueOf() / MILLISECONDS,
+      "epoch-ms": () => updatedModel.valueOf()
+    };
+    set(modelValue, typeMap[type]());
+  }
+  function updateModelValue() {
+    if (!isDefined(selectedDate) || !isDefined(selectedTime)) {
+      return;
+    }
+    if (!(isDefined(selectedDate) && isDefined(selectedTime))) {
+      set(modelValue, void 0);
+    } else {
+      const date = get(selectedDate);
+      const time = get(selectedTime);
+      const updatedModel = dayjs.tz(isDefined(modelValue) ? get(modelValue) : void 0, get(selectedTimezone)).year(date.getFullYear()).month(date.getMonth()).date(date.getDate()).hour(time.getHours()).minute(time.getMinutes()).second(includeSeconds(accuracy) ? time.getSeconds() : 0).millisecond(includeMilliseconds(accuracy) ? time.getMilliseconds() : 0);
+      if (!isDateValid(updatedModel)) {
+        return;
+      }
+      emitUpdate(updatedModel);
+    }
+  }
+  function clear() {
+    set(internalErrorMessages, []);
+    set(selectedYear, void 0);
+    set(selectedMonth, void 0);
+    set(selectedDay, void 0);
+    set(selectedHour, void 0);
+    set(selectedMinute, void 0);
+    set(selectedSecond, void 0);
+    set(selectedMillisecond, void 0);
+    set(modelValue, void 0);
+  }
+  function setNow() {
+    set(internalErrorMessages, []);
+    const date = dayjs();
+    set(now, date);
+    set(selectedYear, date.year());
+    set(selectedMonth, date.month() + 1);
+    set(selectedDay, date.date());
+    set(selectedHour, date.hour());
+    set(selectedMinute, date.minute());
+    set(selectedSecond, includeSeconds(accuracy) ? date.second() : 0);
+    set(selectedMillisecond, includeMilliseconds(accuracy) ? date.millisecond() : 0);
+    nextTick(() => {
+      updateModelValue();
+    });
+  }
+  function updateSegments(date) {
+    const year = date.year();
+    const month = date.month() + 1;
+    const day = date.date();
+    const hour = date.hour();
+    const minute = date.minute();
+    const second = includeSeconds(accuracy) ? date.second() : void 0;
+    const millisecond = includeMilliseconds(accuracy) ? date.millisecond() : void 0;
+    if (get(selectedYear) !== year)
+      set(selectedYear, year);
+    if (get(selectedMonth) !== month)
+      set(selectedMonth, month);
+    if (get(selectedDay) !== day)
+      set(selectedDay, day);
+    if (get(selectedHour) !== hour)
+      set(selectedHour, hour);
+    if (get(selectedMinute) !== minute)
+      set(selectedMinute, minute);
+    if (get(selectedSecond) !== second)
+      set(selectedSecond, second);
+    if (get(selectedMillisecond) !== millisecond)
+      set(selectedMillisecond, millisecond);
+  }
+  const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([newSelectedDate, newSelectedTime], [prevSelectedDate, prevSelectedTime]) => {
+    const currentTimezone = get(selectedTimezone);
+    const newDate = dayjs.tz(newSelectedDate, currentTimezone);
+    const oldDate = dayjs.tz(prevSelectedDate, currentTimezone);
+    const newTime = dayjs.tz(newSelectedTime, currentTimezone);
+    const oldTime = dayjs.tz(prevSelectedTime, currentTimezone);
+    if (newDate.isSame(oldDate) && newTime.isSame(oldTime)) {
+      return;
+    }
+    set(now, dayjs());
+    updateModelValue();
+  });
+  function updateInternalModel(value) {
+    ignoreUpdates(() => {
+      const updatedValue = type === "epoch" && typeof value === "number" ? value * MILLISECONDS : value;
+      const date = dayjs.tz(updatedValue, get(selectedTimezone));
+      isDateValid(date);
+      updateSegments(date);
+    });
+  }
+  watch(selectedTimezone, (newTimezone) => {
+    if (newTimezone && isDefined(selectedDate) && isDefined(selectedTime)) {
+      set(now, dayjs());
+      updateModelValue();
+    }
+  });
+  watch(modelValue, (value) => {
+    set(now, dayjs());
+    if (value === void 0) {
+      clear();
+    } else {
+      updateInternalModel(value);
+    }
+  });
+  onMounted(() => {
+    if (isDefined(modelValue)) {
+      updateInternalModel(get(modelValue));
+    } else if (!allowEmpty) {
+      setNow();
+    }
+  });
+  return {
+    clear,
+    getDateTime,
+    internalErrorMessages,
+    isDateValid,
+    maxAllowedDate,
+    minAllowedDate,
+    now,
+    segmentData,
+    selectedDate,
+    selectedDay,
+    selectedHour,
+    selectedMillisecond,
+    selectedMinute,
+    selectedMonth,
+    selectedSecond,
+    selectedTime,
+    selectedTimezone,
+    selectedYear,
+    setNow,
+    valueSet
+  };
+}
+export {
+  useDateTimeSelection
+};
+//# sourceMappingURL=use-date-time-selection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-date-time-selection.js","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 { guessTimezone, includeMilliseconds, includeSeconds } from '@/components/date-time-picker/utils';\nimport { useRuiI8n } from '@/composables/use-rui-i18n';\nimport { RUI_I18N_KEYS } from '@/i18n/keys';\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\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  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    maxDate,\n    minDate,\n    modelValue,\n    type,\n  } = options;\n\n  const { t } = useRuiI8n();\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 internalErrorMessages = ref<string[]>([]);\n  const now = ref<Dayjs>(dayjs.tz(undefined, guessTimezone()));\n\n  const minAllowedDate = computed<Date>(() => {\n    if (minDate === undefined) {\n      return new Date(1970, 0, 1);\n    }\n\n    if (type === 'epoch' && typeof minDate === 'number') {\n      return new Date(minDate * MILLISECONDS);\n    }\n\n    return new Date(minDate);\n  });\n\n  const maxAllowedDate = computed<Date | undefined>(() => {\n    if (maxDate === undefined) {\n      return undefined;\n    }\n    if (maxDate === 'now') {\n      return get(now).toDate();\n    }\n    if (type === 'epoch' && typeof maxDate === 'number') {\n      return new Date(maxDate * MILLISECONDS);\n    }\n    return new Date(maxDate);\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    let dateTime = dayjs();\n\n    if (isDefined(selectedYear)) {\n      dateTime = dateTime.year(get(selectedYear));\n    }\n\n    if (isDefined(selectedMonth)) {\n      dateTime = dateTime.month(get(selectedMonth) - 1);\n    }\n\n    if (isDefined(selectedDay)) {\n      const daysInMonth = dateTime.daysInMonth();\n      const day = Math.min(get(selectedDay), daysInMonth);\n      dateTime = dateTime.date(day);\n    }\n\n    if (isDefined(selectedHour)) {\n      dateTime = dateTime.hour(get(selectedHour));\n    }\n\n    if (isDefined(selectedMinute)) {\n      dateTime = dateTime.minute(get(selectedMinute));\n    }\n\n    if (isDefined(selectedSecond)) {\n      dateTime = dateTime.second(get(selectedSecond));\n    }\n\n    if (isDefined(selectedMillisecond)) {\n      dateTime = dateTime.millisecond(get(selectedMillisecond));\n    }\n\n    return dateTime;\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 errorMessage = t(RUI_I18N_KEYS.dateTimePicker.dateBeforeMin, {\n        date: min.toLocaleDateString(),\n      }, `Date cannot be before ${min.toLocaleDateString()}`);\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    if (max && date.isAfter(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: max.toLocaleDateString() }, `Date cannot be after ${max.toLocaleDateString()}`);\n      const errorMessage = maxDate === 'now' ? nowError : maxError;\n      set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);\n      return false;\n    }\n\n    return true;\n  }\n\n  function emitUpdate(updatedModel: Dayjs): void {\n    const typeMap = {\n      'date': () => updatedModel.toDate(),\n      'epoch': () => 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    if (!(isDefined(selectedDate) && isDefined(selectedTime))) {\n      set(modelValue, undefined as ModelValueType<T>);\n    }\n    else {\n      const date = get(selectedDate);\n      const time = get(selectedTime);\n\n      const updatedModel = dayjs.tz(isDefined(modelValue) ? get(modelValue) : undefined, get(selectedTimezone))\n        .year(date.getFullYear())\n        .month(date.getMonth())\n        .date(date.getDate())\n        .hour(time.getHours())\n        .minute(time.getMinutes())\n        .second(includeSeconds(accuracy) ? time.getSeconds() : 0)\n        .millisecond(includeMilliseconds(accuracy) ? time.getMilliseconds() : 0);\n\n      if (!isDateValid(updatedModel)) {\n        return;\n      }\n\n      emitUpdate(updatedModel);\n    }\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 setNow(): void {\n    set(internalErrorMessages, []);\n\n    const date = dayjs();\n    set(now, date);\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    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  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    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    valueSet,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -22,11 +22,13 @@ interface KeyboardHandlerOptions {
 export declare function useKeyboardHandler(options: KeyboardHandlerOptions): {
     clear: (segmentType?: string) => void;
     getCurrentSegment: (position?: number) => Segment | undefined;
+    handleBlur: () => void;
     handleClick: (event: MouseEvent) => void;
     handleFocus: () => void;
     handleInput: (event: Event) => void;
     handleInputSelection: (event: Event) => void;
     handleKeyDown: (event: KeyboardEvent) => void;
+    handleMouseDown: (event: MouseEvent) => void;
     handlePaste: (event: ClipboardEvent) => void;
     setSegment: (segmentType: DateTimeSegmentType) => void;
 };

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

@@ -5,6 +5,24 @@ import { assert } from "../../utils/assert.js";
 import { computed, nextTick } from "vue";
 import { get, set } from "@vueuse/shared";
 import { isDefined } from "@vueuse/core";
+const SEGMENT_METHODS = {
+  DD: "date",
+  HH: "hour",
+  MM: "month",
+  SSS: "millisecond",
+  YYYY: "year",
+  mm: "minute",
+  ss: "second"
+};
+const SEGMENT_CONFIG = {
+  DD: { maxValue: 31, minValue: 1 },
+  HH: { maxValue: 23, minValue: 0 },
+  MM: { maxValue: 12, minValue: 1 },
+  SSS: { maxValue: 999, minValue: 0 },
+  YYYY: { maxValue: 9999, minValue: 1 },
+  mm: { maxValue: 59, minValue: 0 },
+  ss: { maxValue: 59, minValue: 0 }
+};
 function useKeyboardHandler(options) {
   const {
     accuracy,
@@ -81,17 +99,8 @@ function useKeyboardHandler(options) {
     const currentSegment = getCurrentSegment();
     if (!currentSegment)
       return;
-    const segmentMethods = {
-      DD: "date",
-      HH: "hour",
-      MM: "month",
-      mm: "minute",
-      ss: "second",
-      SSS: "millisecond",
-      YYYY: "year"
-    };
     const segmentType = currentSegment.type;
-    const method = segmentMethods[segmentType];
+    const method = SEGMENT_METHODS[segmentType];
     const selectedDate = getDateTime();
     const updatedDate = selectedDate.set(method, selectedDate.get(method) + (increment ? 1 : -1));
     if (updatedDate.year() >= 1970) {
@@ -127,57 +136,41 @@ function useKeyboardHandler(options) {
     }
   }
   function handleDigitPressed(event, digit) {
-    if (!(event.target instanceof HTMLInputElement)) {
+    if (!(event.target instanceof HTMLInputElement))
       return;
-    }
     const position = event.target.selectionStart ?? 0;
     const currentSegment = getCurrentSegment(position);
-    if (!currentSegment)
-      return;
-    const number = parseInt(digit);
-    if (isNaN(number))
+    if (!currentSegment || isNaN(parseInt(digit)))
       return;
-    const segmentConfig = {
-      DD: { maxValue: 31, minValue: 1 },
-      HH: { maxValue: 23, minValue: 0 },
-      MM: { maxValue: 12, minValue: 1 },
-      mm: { maxValue: 59, minValue: 0 },
-      ss: { maxValue: 59, minValue: 0 },
-      SSS: { maxValue: 999, minValue: 0 },
-      YYYY: { maxValue: 9999, minValue: 1 }
-    };
     const segmentType = currentSegment.type;
-    if (isDateTimeSegmentType(segmentType)) {
-      const config = segmentConfig[segmentType];
-      const value = get(currentValue) ?? "";
-      const combinedValue = parseInt(`${value}${digit}`);
-      const nextCombinedValue = parseInt(`${value}${digit}0`);
-      const maxLength = segmentType.length;
-      const minValue = config.minValue ?? 0;
-      if (combinedValue >= minValue && combinedValue <= config.maxValue) {
-        setValue(segmentType, combinedValue);
-        setCursorPosition(currentSegment);
-      }
-      const willExceedMax = nextCombinedValue > config.maxValue;
-      const reachedMaxLength = combinedValue.toString().length >= maxLength;
-      if (willExceedMax || reachedMaxLength) {
-        navigateSegments("ArrowRight");
-      }
+    if (!isDateTimeSegmentType(segmentType))
+      return;
+    const config = SEGMENT_CONFIG[segmentType];
+    const value = get(currentValue) ?? "";
+    const combinedStr = `${value}${digit}`;
+    const combinedValue = parseInt(combinedStr);
+    const maxLength = segmentType.length;
+    const minValue = config.minValue ?? 0;
+    if (combinedValue >= minValue && combinedValue <= config.maxValue) {
+      setValue(segmentType, combinedValue);
+      setCursorPosition(currentSegment);
+    } else if (combinedValue < minValue && combinedStr.length < maxLength) {
+      set(currentValue, combinedValue);
     }
+    const willExceedMax = parseInt(`${combinedStr}0`) > config.maxValue;
+    if (willExceedMax || combinedStr.length >= maxLength)
+      navigateSegments("ArrowRight");
   }
   function handleKeyboardNavigation(event) {
-    if (event.key === "ArrowUp") {
+    if (event.key === "ArrowUp")
       changeSegmentValue(true);
-    } else if (event.key === "ArrowDown") {
+    else if (event.key === "ArrowDown")
       changeSegmentValue(false);
-    }
   }
   function handleBackspace(event) {
-    if (!(event.target instanceof HTMLInputElement)) {
+    if (!(event.target instanceof HTMLInputElement))
       return;
-    }
-    const position = event.target.selectionStart ?? 0;
-    const currentSegment = getCurrentSegment(position);
+    const currentSegment = getCurrentSegment(event.target.selectionStart ?? 0);
     if (!currentSegment)
       return;
     const value = get(currentValue) ?? getCurrent(currentSegment.type) ?? "";
@@ -186,11 +179,9 @@ function useKeyboardHandler(options) {
     setCursorPosition(currentSegment);
   }
   function onInputDeletePressed(event) {
-    if (!(event.target instanceof HTMLInputElement)) {
+    if (!(event.target instanceof HTMLInputElement))
       return;
-    }
-    const selectionStart = event.target.selectionStart ?? 0;
-    const segment = getCurrentSegment(selectionStart);
+    const segment = getCurrentSegment(event.target.selectionStart ?? 0);
     if (segment) {
       clear(segment.type);
       setCursorPosition(segment);
@@ -200,21 +191,19 @@ function useKeyboardHandler(options) {
     if (disabled || readonly)
       return;
     const { key } = event;
-    if (["Tab"].includes(key)) {
+    if (key === "Tab")
       return;
-    }
     event.preventDefault();
-    if (key === "ArrowRight" || key === "ArrowLeft") {
+    if (key === "ArrowRight" || key === "ArrowLeft")
       navigateSegments(key);
-    } else if (key === "ArrowUp" || key === "ArrowDown") {
+    else if (key === "ArrowUp" || key === "ArrowDown")
       handleKeyboardNavigation(event);
-    } else if (key === "Backspace") {
+    else if (key === "Backspace")
       handleBackspace(event);
-    } else if (key === "Delete") {
+    else if (key === "Delete")
       onInputDeletePressed(event);
-    } else if (/^\d$/.test(key)) {
+    else if (/^\d$/.test(key))
       handleDigitPressed(event, key);
-    }
   }
   function getClickPosition(event, input, useCaretPosition) {
     const fallback = input.selectionStart ?? 0;
@@ -223,11 +212,21 @@ function useKeyboardHandler(options) {
       return caretPos.offset;
     return document.caretRangeFromPoint?.(event.clientX, event.clientY)?.startOffset ?? fallback;
   }
+  let clickedSegment;
+  function handleMouseDown(event) {
+    if (disabled || readonly || !(event.target instanceof HTMLInputElement))
+      return;
+    const currentSegment = getCurrentSegment(getClickPosition(event, event.target));
+    if (currentSegment) {
+      clickedSegment = currentSegment;
+    }
+  }
   function handleClick(event) {
     if (disabled || readonly || !(event.target instanceof HTMLInputElement))
       return;
     const currentSegment = getCurrentSegment(getClickPosition(event, event.target));
     if (currentSegment) {
+      clickedSegment = currentSegment;
       set(cursorPosition, currentSegment.end);
       event.target.setSelectionRange(currentSegment.start, currentSegment.end);
     }
@@ -237,6 +236,11 @@ function useKeyboardHandler(options) {
     set(cursorPosition, target.selectionStart ?? 0);
   }
   function handleFocus() {
+    if (clickedSegment) {
+      setCursorPosition(clickedSegment);
+      clickedSegment = void 0;
+      return;
+    }
     const input = get(textInput);
     if (input && input.selectionStart !== input.selectionEnd)
       return;
@@ -244,6 +248,11 @@ function useKeyboardHandler(options) {
     if (firstSegment)
       setCursorPosition(firstSegment);
   }
+  function handleBlur() {
+    set(cursorPosition, 0);
+    set(currentValue, void 0);
+    clickedSegment = void 0;
+  }
   function parseAndSetDateValues(pastedText) {
     try {
       const parsedDate = dayjs(pastedText, get(dateFormat));
@@ -293,11 +302,13 @@ function useKeyboardHandler(options) {
   return {
     clear,
     getCurrentSegment,
+    handleBlur,
     handleClick,
     handleFocus,
     handleInput,
     handleInputSelection,
     handleKeyDown,
+    handleMouseDown,
     handlePaste,
     setSegment
   };