@rotki/ui-library 2.10.0 → 2.11.0

package/dist/components/accordions/accordion/RuiAccordion.vue.d.ts

@@ -7,11 +7,11 @@ export interface AccordionProps {
 }
 declare var __VLS_1: {
     open: boolean;
-}, __VLS_7: {};
+}, __VLS_8: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;

package/dist/components/alerts/RuiAlert.vue.d.ts

@@ -9,11 +9,11 @@ export interface Props {
     actionText?: string;
     closeable?: boolean;
 }
-declare var __VLS_5: {}, __VLS_7: {};
+declare var __VLS_6: {}, __VLS_8: {};
 type __VLS_Slots = {} & {
-    title?: (props: typeof __VLS_5) => any;
+    title?: (props: typeof __VLS_6) => any;
 } & {
-    default?: (props: typeof __VLS_7) => any;
+    default?: (props: typeof __VLS_8) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     close: () => any;

package/dist/components/buttons/button/RuiButton.vue.d.ts

@@ -14,10 +14,12 @@ export interface Props<T = undefined> {
     modelValue?: T;
     hideFocusIndicator?: boolean;
 }
-declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Props<T> & {
+declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
         "onUpdate:model-value"?: ((value?: T | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
@@ -33,6 +35,8 @@ declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typ
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/components/buttons/button-group/RuiButtonGroup.vue.d.ts

@@ -10,10 +10,12 @@ export interface Props<T = undefined> {
     modelValue?: T | T[];
     disabled?: boolean;
 }
-declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Props<T> & {
+declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<Props<T> & {
         "onUpdate:modelValue"?: ((modelValue?: T | T[] | undefined) => any) | undefined;
-    }> & import("vue").PublicProps;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {};
@@ -23,6 +25,8 @@ declare const __VLS_export: <T = undefined>(__VLS_props: NonNullable<Awaited<typ
 };
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/components/calendar/state.js

@@ -1,4 +1,4 @@
-const CalendarStateSymbol = Symbol.for("rui:calendar");
+const CalendarStateSymbol = /* @__PURE__ */ Symbol.for("rui:calendar");
 function getDaysOfWeek(locale = "en-US", format = "narrow") {
   const daysOfWeek = [];
   for (let i = 0; i < 7; i++) {

package/dist/components/calendar/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"names":[],"mappings":"AAEO,MAAM,sBAAsD,OAAO,IAAI,cAAc;AAiBrF,SAAS,cAAc,SAA+B,SAAS,SAA6B,UAAoB;AACrH,QAAM,aAAuB,CAAA;AAC7B,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,UAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;AACpC,UAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAA,CAAQ,EAAE,OAAO,IAAI;AAChF,eAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,mBAAmB,SAA+B,SAAmB;AACnF,QAAM,aAAuB,CAAA;AAC7B,WAAS,QAAQ,GAAG,QAAQ,IAAI,SAAS;AACvC,UAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;AACpC,UAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAA,CAAS,EAAE,OAAO,IAAI;AACjF,eAAW,KAAK,SAAS;AAAA,EAC3B;AACA,SAAO;AACT;"}
+{"version":3,"file":"state.js","sources":["../../../src/components/calendar/state.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey, Ref } from 'vue';\n\nexport const CalendarStateSymbol: InjectionKey<RuiCalendarState> = Symbol.for('rui:calendar');\n\nexport interface RuiCalendarState {\n  viewMonth: Ref<number>;\n  viewYear: Ref<number>;\n  selectedDate: Ref<Date | undefined>;\n  maxDate: ComputedRef<Date | undefined>;\n  minDate: ComputedRef<Date | undefined>;\n  isDark: ComputedRef<boolean>;\n  allowEmpty: boolean;\n}\n\nexport interface MonthYearSelection {\n  month: number;\n  year: number;\n}\n\nexport function getDaysOfWeek(locale: Intl.LocalesArgument = 'en-US', format: 'narrow' | 'short' = 'narrow'): string[] {\n  const daysOfWeek: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    const date = new Date(2021, 0, 3 + i); // Jan 3, 2021 was a Sunday\n    const dayName = new Intl.DateTimeFormat(locale, { weekday: format }).format(date);\n    daysOfWeek.push(format === 'narrow' ? dayName : dayName.charAt(0));\n  }\n  return daysOfWeek;\n}\n\nexport function getShortMonthNames(locale: Intl.LocalesArgument = 'en-US'): string[] {\n  const monthNames: string[] = [];\n  for (let month = 0; month < 12; month++) {\n    const date = new Date(2021, month, 1);\n    const monthName = new Intl.DateTimeFormat(locale, { month: 'short' }).format(date);\n    monthNames.push(monthName);\n  }\n  return monthNames;\n}\n"],"names":[],"mappings":"AAEO,MAAM,sBAAsD,uBAAO,IAAI,cAAc;AAiBrF,SAAS,cAAc,SAA+B,SAAS,SAA6B,UAAoB;AACrH,QAAM,aAAuB,CAAA;AAC7B,WAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,UAAM,OAAO,IAAI,KAAK,MAAM,GAAG,IAAI,CAAC;AACpC,UAAM,UAAU,IAAI,KAAK,eAAe,QAAQ,EAAE,SAAS,OAAA,CAAQ,EAAE,OAAO,IAAI;AAChF,eAAW,KAAK,WAAW,WAAW,UAAU,QAAQ,OAAO,CAAC,CAAC;AAAA,EACnE;AACA,SAAO;AACT;AAEO,SAAS,mBAAmB,SAA+B,SAAmB;AACnF,QAAM,aAAuB,CAAA;AAC7B,WAAS,QAAQ,GAAG,QAAQ,IAAI,SAAS;AACvC,UAAM,OAAO,IAAI,KAAK,MAAM,OAAO,CAAC;AACpC,UAAM,YAAY,IAAI,KAAK,eAAe,QAAQ,EAAE,OAAO,QAAA,CAAS,EAAE,OAAO,IAAI;AACjF,eAAW,KAAK,SAAS;AAAA,EAC3B;AACA,SAAO;AACT;"}

package/dist/components/cards/RuiCard.vue.d.ts

@@ -7,21 +7,21 @@ export interface Props {
     noPadding?: boolean;
     contentClass?: string;
 }
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_10: {}, __VLS_13: {}, __VLS_16: {}, __VLS_18: {}, __VLS_20: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_20: {}, __VLS_22: {};
 type __VLS_Slots = {} & {
     image?: (props: typeof __VLS_1) => any;
 } & {
     'custom-header'?: (props: typeof __VLS_3) => any;
 } & {
-    prepend?: (props: typeof __VLS_10) => any;
+    prepend?: (props: typeof __VLS_12) => any;
 } & {
-    header?: (props: typeof __VLS_13) => any;
+    header?: (props: typeof __VLS_15) => any;
 } & {
-    subheader?: (props: typeof __VLS_16) => any;
+    subheader?: (props: typeof __VLS_18) => any;
 } & {
-    default?: (props: typeof __VLS_18) => any;
+    default?: (props: typeof __VLS_20) => any;
 } & {
-    footer?: (props: typeof __VLS_20) => any;
+    footer?: (props: typeof __VLS_22) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     dense: boolean;

package/dist/components/date-time-picker/RuiDateTimePicker.vue.d.ts

@@ -1,4 +1,3 @@
-import type { TimeAccuracy } from '../../consts/time-accuracy.js';
 type DateFormat = 'year-first' | 'month-first' | 'day-first';
 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;
@@ -7,7 +6,7 @@ export interface RuiDateTimePickerProps {
     maxDate?: Date | number | 'now';
     format?: DateFormat;
     type?: DateTimeModelType;
-    accuracy?: TimeAccuracy;
+    accuracy?: 'minute' | 'second' | 'millisecond';
     disabled?: boolean;
     allowEmpty?: boolean;
     readonly?: boolean;
@@ -34,7 +33,7 @@ declare const props: Readonly<{}> & {
     readonly maxDate: number | Date | "now" | undefined;
     readonly minDate: number | Date | undefined;
     readonly format: DateFormat;
-    readonly accuracy: TimeAccuracy;
+    readonly accuracy: "minute" | "second" | "millisecond";
     readonly errorMessages: string | string[];
     readonly successMessages: string | string[];
     readonly required: boolean;
@@ -72,7 +71,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     maxDate: Date | number | "now";
     minDate: Date | number;
     allowEmpty: boolean;
-    accuracy: TimeAccuracy;
+    accuracy: "minute" | "second" | "millisecond";
     format: DateFormat;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/date-time-picker/RuiDateTimePicker.vue2.js

@@ -1,25 +1,22 @@
 import { getRootAttrs, getNonRootAttrs } from "../../utils/helpers.js";
-import { defineComponent, mergeModels, useCssVars, unref, computed, useModel, ref, watch, onMounted, createBlock, openBlock, mergeProps, isRef, withCtx, createVNode, renderSlot, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, withModifiers, nextTick } from "vue";
+import { defineComponent, mergeModels, useCssVars, unref, computed, useModel, ref, createBlock, openBlock, mergeProps, isRef, withCtx, createVNode, renderSlot, createElementVNode, createElementBlock, createCommentVNode, normalizeClass, createTextVNode, toDisplayString, withModifiers, nextTick } from "vue";
 import { logicOr, logicAnd } from "@vueuse/math";
-import dayjs from "dayjs";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
 import _sfc_main$1 from "./RuiDateTimePickerMenu.vue.js";
+import { useDateTimeSelection } from "./use-date-time-selection.js";
 import { useInputHandler } from "./use-input-handler.js";
 import { useKeyboardHandler } from "./use-keyboard-handler.js";
-import { guessTimezone, includeSeconds, includeMilliseconds } from "./utils.js";
 import RuiIcon from "../icons/RuiIcon.vue.js";
 import RuiMenu from "../overlays/menu/RuiMenu.vue.js";
-import { useRuiI8n } from "../../composables/use-rui-i18n.js";
-import { RUI_I18N_KEYS } from "../../i18n/keys.js";
-import { useFocusWithin, useFocus, isDefined, watchIgnorable } from "@vueuse/core";
+import { useFocusWithin, useFocus, isDefined } from "@vueuse/core";
 import { get, set } from "@vueuse/shared";
 const _hoisted_1 = ["data-error", "tabindex"];
 const _hoisted_2 = {
   key: 0,
+  "data-id": "required-indicator",
   class: "text-rui-error"
 };
 const _hoisted_3 = ["disabled", "value", "placeholder", "readonly", "aria-invalid"];
-const MILLISECONDS = 1e3;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiDateTimePicker",
@@ -50,7 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "a9f07354": unref(labelWithQuote)
+      "a01b5b3e": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const props = __props;
@@ -61,17 +58,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     const isOpen = ref(false);
     const cursorPosition = ref(0);
-    const internalErrorMessages = ref([]);
-    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 currentValue = ref();
-    const now = ref(dayjs.tz(void 0, guessTimezone()));
     const textInput = ref();
     const activator = ref();
     const menuWrapperRef = ref();
@@ -79,36 +66,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { focused: activatorFocusedWithin } = useFocusWithin(activator);
     const { focused: menuWrapperFocusedWithin } = useFocusWithin(menuWrapperRef);
     const { focused: searchInputFocused } = useFocus(textInput);
-    const { setValue, update, getCurrent } = useInputHandler({
-      DD: selectedDay,
-      MM: selectedMonth,
-      YYYY: selectedYear,
-      HH: selectedHour,
-      mm: selectedMinute,
-      ss: selectedSecond,
-      SSS: selectedMillisecond
-    }, currentValue);
-    const minAllowedDate = computed(() => {
-      if (props.minDate === void 0) {
-        return new Date(1970, 0, 1);
-      }
-      if (props.type === "epoch" && typeof props.minDate === "number") {
-        return new Date(props.minDate * MILLISECONDS);
-      }
-      return new Date(props.minDate);
-    });
-    const maxAllowedDate = computed(() => {
-      if (props.maxDate === void 0) {
-        return void 0;
-      }
-      if (props.maxDate === "now") {
-        return get(now).toDate();
-      }
-      if (props.type === "epoch" && typeof props.maxDate === "number") {
-        return new Date(props.maxDate * MILLISECONDS);
-      }
-      return new Date(props.maxDate);
+    const {
+      clear: clearSelection,
+      getDateTime,
+      internalErrorMessages,
+      maxAllowedDate,
+      minAllowedDate,
+      segmentData,
+      selectedDate,
+      selectedDay,
+      selectedHour,
+      selectedMillisecond,
+      selectedMinute,
+      selectedMonth,
+      selectedSecond,
+      selectedTime,
+      selectedTimezone,
+      selectedYear,
+      setNow,
+      valueSet
+    } = useDateTimeSelection({
+      accuracy: props.accuracy,
+      allowEmpty: props.allowEmpty,
+      maxDate: props.maxDate,
+      minDate: props.minDate,
+      modelValue,
+      type: props.type
     });
+    const { setValue, getCurrent } = useInputHandler(segmentData, currentValue);
     const dateFormat = computed(() => {
       const dateFormat2 = props.format;
       const format = baseFormats[dateFormat2];
@@ -121,72 +106,34 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const {
       getCurrentSegment,
+      handleBlur,
       handleClick,
       handleFocus,
       handleInput,
       handleInputSelection,
       handleKeyDown,
+      handleMouseDown,
       handlePaste,
       setSegment
     } = useKeyboardHandler({
+      accuracy: props.accuracy,
       currentValue,
       cursorPosition,
+      dateFormat,
       disabled: props.disabled,
-      getDateTime,
       getCurrent,
+      getDateTime,
       readonly: props.readonly,
-      dateFormat,
       setValue,
-      textInput,
-      accuracy: props.accuracy
+      textInput
     });
-    const { t } = useRuiI8n();
     function handleInputClick(event) {
+      handleClick(event);
       if (!get(isOpen)) {
         set(isOpen, true);
       }
-      handleClick(event);
     }
     const anyFocused = logicOr(activatorFocusedWithin, menuWrapperFocusedWithin);
-    const selectedDate = computed({
-      set(value) {
-        set(selectedYear, value?.getFullYear());
-        set(selectedMonth, value ? value.getMonth() + 1 : void 0);
-        set(selectedDay, value?.getDate());
-      },
-      get() {
-        if (!(isDefined(selectedYear) && isDefined(selectedMonth) && isDefined(selectedDay))) {
-          return void 0;
-        }
-        const date = /* @__PURE__ */ new Date();
-        date.setFullYear(get(selectedYear));
-        date.setMonth(get(selectedMonth) - 1);
-        date.setDate(get(selectedDay));
-        return date;
-      }
-    });
-    const selectedTime = computed({
-      set(value) {
-        set(selectedHour, value?.getHours());
-        set(selectedMinute, value?.getMinutes());
-        set(selectedSecond, value?.getSeconds());
-        set(selectedMillisecond, value?.getMilliseconds());
-      },
-      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;
-      }
-    });
-    const valueSet = computed(() => isDefined(selectedDate) && isDefined(selectedTime));
     const labelWithQuote = computed(() => {
       if (!props.label)
         return '"\\200B"';
@@ -255,17 +202,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       });
     }
     function clear(segmentType) {
-      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);
+        clearSelection();
         set(currentValue, void 0);
-        set(modelValue, void 0);
         return;
       }
     }
@@ -275,137 +214,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         event.stopPropagation();
       }
     }
-    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 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(props.accuracy) ? date.second() : 0);
-      set(selectedMillisecond, includeMilliseconds(props.accuracy) ? date.millisecond() : 0);
-      nextTick(() => {
-        updateModelValue();
-      });
-    }
-    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 = props.maxDate === "now" ? nowError : maxError;
-        set(internalErrorMessages, [...get(internalErrorMessages), errorMessage]);
-        return false;
-      }
-      return true;
-    }
-    function emitUpdate(updatedModel) {
-      const typeMap = {
-        "date": () => updatedModel.toDate(),
-        "epoch-ms": () => updatedModel.valueOf(),
-        "epoch": () => updatedModel.valueOf() / MILLISECONDS
-      };
-      set(modelValue, typeMap[props.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(props.accuracy) ? time.getSeconds() : 0).millisecond(includeMilliseconds(props.accuracy) ? time.getMilliseconds() : 0);
-        if (!isDateValid(updatedModel)) {
-          return;
-        }
-        emitUpdate(updatedModel);
-      }
-    }
-    const { ignoreUpdates } = watchIgnorable([selectedDate, selectedTime], ([selectedDate2, selectedTime2], [prevSelectedDate, prevSelectedTime]) => {
-      const currentTimezone = get(selectedTimezone);
-      const newSelectedDate = dayjs.tz(selectedDate2, currentTimezone);
-      const oldSelectedDate = dayjs.tz(prevSelectedDate, currentTimezone);
-      const newSelectedTime = dayjs.tz(selectedTime2, currentTimezone);
-      const oldSelectedTime = dayjs.tz(prevSelectedTime, currentTimezone);
-      if (newSelectedDate.isSame(oldSelectedDate) && newSelectedTime.isSame(oldSelectedTime)) {
-        return;
-      }
-      set(now, dayjs());
-      updateModelValue();
-    });
-    function updateInternalModel(value) {
-      ignoreUpdates(() => {
-        const updatedValue = props.type === "epoch" && typeof value === "number" ? value * MILLISECONDS : value;
-        const date = dayjs.tz(updatedValue, get(selectedTimezone));
-        isDateValid(date);
-        update(date, props.accuracy);
-      });
-    }
-    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 (!props.allowEmpty) {
-        setNow();
-      }
-    });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(RuiMenu, mergeProps({
         modelValue: unref(isOpen),
-        "onUpdate:modelValue": _cache[19] || (_cache[19] = ($event) => isRef(isOpen) ? isOpen.value = $event : null),
+        "onUpdate:modelValue": _cache[21] || (_cache[21] = ($event) => isRef(isOpen) ? isOpen.value = $event : null),
         class: _ctx.$style.wrapper,
         dense: __props.dense,
         hint: __props.hint,
@@ -418,7 +230,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         popper: {
           placement: "bottom-start"
         },
-        "full-width": ""
+        "full-width": "",
+        "disable-auto-focus": ""
       }, {
         ...("getRootAttrs" in _ctx ? _ctx.getRootAttrs : unref(getRootAttrs))(_ctx.$attrs)
       }), {
@@ -450,11 +263,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               "data-id": "activator",
               "data-error": hasError ? "" : void 0,
               tabindex: __props.disabled || props.readonly ? -1 : 0,
-              onClick: _cache[8] || (_cache[8] = ($event) => setInputFocus())
+              onClick: _cache[10] || (_cache[10] = ($event) => setInputFocus())
             }
           ), [
             unref(isOutlined) && (unref(searchInputFocused) || open || unref(valueSet)) ? (openBlock(), createElementBlock("span", {
               key: 0,
+              "data-id": "label",
               class: normalizeClass([
                 _ctx.$style.label,
                 {
@@ -488,12 +302,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 placeholder: unref(dateFormat),
                 readonly: __props.readonly,
                 "aria-invalid": hasError,
-                onFocus: _cache[0] || (_cache[0] = ($event) => unref(handleFocus)()),
-                onSelect: _cache[1] || (_cache[1] = ($event) => unref(handleInputSelection)($event)),
-                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => handleInputClick($event), ["stop"])),
-                onKeydown: _cache[3] || (_cache[3] = ($event) => unref(handleKeyDown)($event)),
-                onPaste: _cache[4] || (_cache[4] = ($event) => unref(handlePaste)($event)),
-                onInput: _cache[5] || (_cache[5] = ($event) => unref(handleInput)($event))
+                onMousedown: _cache[0] || (_cache[0] = ($event) => unref(handleMouseDown)($event)),
+                onFocus: _cache[1] || (_cache[1] = ($event) => unref(handleFocus)()),
+                onBlur: _cache[2] || (_cache[2] = ($event) => unref(handleBlur)()),
+                onSelect: _cache[3] || (_cache[3] = ($event) => unref(handleInputSelection)($event)),
+                onClick: _cache[4] || (_cache[4] = withModifiers(($event) => handleInputClick($event), ["stop"])),
+                onKeydown: _cache[5] || (_cache[5] = ($event) => unref(handleKeyDown)($event)),
+                onPaste: _cache[6] || (_cache[6] = ($event) => unref(handlePaste)($event)),
+                onInput: _cache[7] || (_cache[7] = ($event) => unref(handleInput)($event))
               }, null, 40, _hoisted_3)
             ], 2),
             __props.allowEmpty && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton, {
@@ -507,7 +323,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               class: normalizeClass(["group-hover:!visible", [_ctx.$style.clear, unref(anyFocused) && "!visible", {
                 "mr-2": !__props.dense
               }]]),
-              onClick: _cache[6] || (_cache[6] = withModifiers(($event) => clear(), ["stop", "prevent"]))
+              onClick: _cache[8] || (_cache[8] = withModifiers(($event) => clear(), ["stop", "prevent"]))
             }, {
               default: withCtx(() => [
                 createVNode(RuiIcon, {
@@ -519,7 +335,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, 8, ["class"])) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass([_ctx.$style.icon__wrapper, _ctx.$style.icon__append]),
-              onClick: _cache[7] || (_cache[7] = ($event) => arrowClicked($event))
+              "data-id": "append",
+              onClick: _cache[9] || (_cache[9] = ($event) => arrowClicked($event))
             }, [
               createVNode(RuiIcon, {
                 class: normalizeClass([_ctx.$style.icon, { "rotate-180": open }]),
@@ -542,27 +359,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ref_key: "menuWrapperRef",
             ref: menuWrapperRef,
             "selected-date": unref(selectedDate),
-            "onUpdate:selectedDate": _cache[9] || (_cache[9] = ($event) => isRef(selectedDate) ? selectedDate.value = $event : null),
+            "onUpdate:selectedDate": _cache[11] || (_cache[11] = ($event) => isRef(selectedDate) ? selectedDate.value = $event : null),
             "selected-time": unref(selectedTime),
-            "onUpdate:selectedTime": _cache[10] || (_cache[10] = ($event) => isRef(selectedTime) ? selectedTime.value = $event : null),
+            "onUpdate:selectedTime": _cache[12] || (_cache[12] = ($event) => isRef(selectedTime) ? selectedTime.value = $event : null),
             "selected-hour": unref(selectedHour),
-            "onUpdate:selectedHour": _cache[11] || (_cache[11] = ($event) => isRef(selectedHour) ? selectedHour.value = $event : null),
+            "onUpdate:selectedHour": _cache[13] || (_cache[13] = ($event) => isRef(selectedHour) ? selectedHour.value = $event : null),
             "selected-minute": unref(selectedMinute),
-            "onUpdate:selectedMinute": _cache[12] || (_cache[12] = ($event) => isRef(selectedMinute) ? selectedMinute.value = $event : null),
+            "onUpdate:selectedMinute": _cache[14] || (_cache[14] = ($event) => isRef(selectedMinute) ? selectedMinute.value = $event : null),
             "selected-second": unref(selectedSecond),
-            "onUpdate:selectedSecond": _cache[13] || (_cache[13] = ($event) => isRef(selectedSecond) ? selectedSecond.value = $event : null),
+            "onUpdate:selectedSecond": _cache[15] || (_cache[15] = ($event) => isRef(selectedSecond) ? selectedSecond.value = $event : null),
             "selected-millisecond": unref(selectedMillisecond),
-            "onUpdate:selectedMillisecond": _cache[14] || (_cache[14] = ($event) => isRef(selectedMillisecond) ? selectedMillisecond.value = $event : null),
+            "onUpdate:selectedMillisecond": _cache[16] || (_cache[16] = ($event) => isRef(selectedMillisecond) ? selectedMillisecond.value = $event : null),
             "time-selection": unref(timeSelection),
-            "onUpdate:timeSelection": _cache[15] || (_cache[15] = ($event) => isRef(timeSelection) ? timeSelection.value = $event : null),
+            "onUpdate:timeSelection": _cache[17] || (_cache[17] = ($event) => isRef(timeSelection) ? timeSelection.value = $event : null),
             "selected-timezone": unref(selectedTimezone),
-            "onUpdate:selectedTimezone": _cache[16] || (_cache[16] = ($event) => isRef(selectedTimezone) ? selectedTimezone.value = $event : null),
+            "onUpdate:selectedTimezone": _cache[18] || (_cache[18] = ($event) => isRef(selectedTimezone) ? selectedTimezone.value = $event : null),
             "calendar-menu-open": unref(calendarMenuOpen),
-            "onUpdate:calendarMenuOpen": _cache[17] || (_cache[17] = ($event) => isRef(calendarMenuOpen) ? calendarMenuOpen.value = $event : null),
+            "onUpdate:calendarMenuOpen": _cache[19] || (_cache[19] = ($event) => isRef(calendarMenuOpen) ? calendarMenuOpen.value = $event : null),
             accuracy: __props.accuracy,
             "max-date": unref(maxAllowedDate),
             "min-date": unref(minAllowedDate),
-            onSetNow: _cache[18] || (_cache[18] = ($event) => setNow())
+            onSetNow: _cache[20] || (_cache[20] = ($event) => unref(setNow)())
           }, {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "menu-content")