@rotki/ui-library 2.9.0 → 2.10.0

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

@@ -13,7 +13,7 @@ type __VLS_Slots = {} & {
 } & {
     default?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const __VLS_base: import("vue").DefineComponent<AccordionProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => any;
 }, string, import("vue").PublicProps, Readonly<AccordionProps> & Readonly<{
     onClick?: (() => any) | undefined;

package/dist/components/accordions/accordion/RuiAccordion.vue.js

@@ -1,11 +1,90 @@
-import _sfc_main from "./RuiAccordion.vue2.js";
-import style0 from "./RuiAccordion.vue3.js";
-import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.js";
-const cssModules = {
-  "$style": style0
-};
-const RuiAccordion = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);
+import { defineComponent, useId, ref, computed, createElementBlock, openBlock, mergeProps, createCommentVNode, unref, normalizeClass, createElementVNode, createVNode, renderSlot, normalizeStyle } from "vue";
+import RuiIcon from "../../icons/RuiIcon.vue.js";
+import { useElementSize } from "@vueuse/core";
+import { get } from "@vueuse/shared";
+const _hoisted_1 = ["data-state"];
+const _hoisted_2 = ["id", "aria-expanded", "aria-controls"];
+const _hoisted_3 = ["id", "aria-labelledby"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiAccordion",
+    inheritAttrs: false
+  },
+  __name: "RuiAccordion",
+  props: {
+    open: { type: Boolean, default: false },
+    eager: { type: Boolean, default: false },
+    headerGrow: { type: Boolean, default: false },
+    headerClass: { default: "" },
+    contentClass: { default: "" }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const triggerId = useId();
+    const contentId = useId();
+    const inner = ref();
+    const { height: innerHeight } = useElementSize(inner);
+    const contentHeight = computed(() => props.open ? `${get(innerHeight)}px` : "0px");
+    function toggle() {
+      emit("click");
+    }
+    function onKeydown(event) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        toggle();
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: "flex flex-col items-start",
+        "data-state": __props.open ? "open" : "closed",
+        "data-accordion": ""
+      }, _ctx.$attrs), [
+        _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: unref(triggerId),
+          class: normalizeClass(["flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded", [__props.headerClass, { "w-full": __props.headerGrow }]]),
+          role: "button",
+          tabindex: "0",
+          "aria-expanded": __props.open,
+          "aria-controls": unref(contentId),
+          "data-accordion-trigger": "",
+          onClick: _cache[0] || (_cache[0] = ($event) => toggle()),
+          onKeydown: _cache[1] || (_cache[1] = ($event) => onKeydown($event))
+        }, [
+          createElementVNode("div", {
+            class: normalizeClass({ grow: __props.headerGrow })
+          }, [
+            renderSlot(_ctx.$slots, "header", { open: __props.open })
+          ], 2),
+          createVNode(RuiIcon, {
+            class: normalizeClass(["text-rui-text-secondary transition-transform", { "-rotate-180": __props.open }]),
+            name: "lu-chevron-down"
+          }, null, 8, ["class"])
+        ], 42, _hoisted_2)) : createCommentVNode("", true),
+        __props.open || __props.eager ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          id: unref(contentId),
+          class: normalizeClass(["grow transition-all overflow-hidden w-full", __props.contentClass]),
+          style: normalizeStyle({ height: unref(contentHeight) }),
+          role: "region",
+          "aria-labelledby": unref(triggerId),
+          "data-accordion-content": ""
+        }, [
+          createElementVNode("div", {
+            ref_key: "inner",
+            ref: inner
+          }, [
+            renderSlot(_ctx.$slots, "default")
+          ], 512)
+        ], 14, _hoisted_3)) : createCommentVNode("", true)
+      ], 16, _hoisted_1);
+    };
+  }
+});
 export {
-  RuiAccordion as default
+  _sfc_main as default
 };
 //# sourceMappingURL=RuiAccordion.vue.js.map

package/dist/components/accordions/accordion/RuiAccordion.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"RuiAccordion.vue.js","sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  headerClass?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<AccordionProps>(), {\n  open: false,\n  eager: false,\n  headerGrow: false,\n  headerClass: '',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  click: [];\n}>();\n\nconst triggerId = useId();\nconst contentId = useId();\n\nconst inner = ref<HTMLDivElement>();\nconst { height: innerHeight } = useElementSize(inner);\n\nconst contentHeight = computed<string>(() => (props.open ? `${get(innerHeight)}px` : '0px'));\n\nfunction toggle(): void {\n  emit('click');\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Enter' || event.key === ' ') {\n    event.preventDefault();\n    toggle();\n  }\n}\n</script>\n\n<template>\n  <div\n    class=\"flex flex-col items-start\"\n    :data-state=\"open ? 'open' : 'closed'\"\n    data-accordion\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      :id=\"triggerId\"\n      class=\"flex gap-2 items-center cursor-pointer outline-none focus-visible:bg-rui-primary/10 rounded\"\n      :class=\"[headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      tabindex=\"0\"\n      :aria-expanded=\"open\"\n      :aria-controls=\"contentId\"\n      data-accordion-trigger\n      @click=\"toggle()\"\n      @keydown=\"onKeydown($event)\"\n    >\n      <div\n        :class=\"{ grow: headerGrow }\"\n      >\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary transition-transform\"\n        :class=\"{ '-rotate-180': open }\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :id=\"contentId\"\n      class=\"grow transition-all overflow-hidden w-full\"\n      :class=\"contentClass\"\n      :style=\"{ height: contentHeight }\"\n      role=\"region\"\n      :aria-labelledby=\"triggerId\"\n      data-accordion-content\n    >\n      <div ref=\"inner\">\n        <slot name=\"default\" />\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$attrs","$slots","_unref","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,QAAQ;AAQd,UAAM,OAAO;AAIb,UAAM,YAAY,MAAA;AAClB,UAAM,YAAY,MAAA;AAElB,UAAM,QAAQ,IAAA;AACd,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;AAEpD,UAAM,gBAAgB,SAAiB,MAAO,MAAM,OAAO,GAAG,IAAI,WAAW,CAAC,OAAO,KAAM;AAE3F,aAAS,SAAe;AACtB,WAAK,OAAO;AAAA,IACd;AAEA,aAAS,UAAU,OAA4B;AAC7C,UAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,cAAM,eAAA;AACN,eAAA;AAAA,MACF;AAAA,IACF;;AAIE,aAAAA,UAAA,GAAAC,mBA+CM,OA/CNC,WA+CM;AAAA,QA9CJ,OAAM;AAAA,QACL,cAAY,QAAA,OAAI,SAAA;AAAA,QACjB,kBAAA;AAAA,MAAA,GACQC,KAAAA,MAAM,GAAA;AAAA,QAGNC,KAAAA,OAAO,uBADfH,mBA0BM,OAAA;AAAA;UAxBH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,+FAA6F,CAC1F,QAAA,yBAAyB,QAAA,WAAA,CAAU,CAAA,CAAA;AAAA,UAC5C,MAAK;AAAA,UACL,UAAS;AAAA,UACR,iBAAe,QAAA;AAAA,UACf,iBAAeD,MAAA,SAAA;AAAA,UAChB,0BAAA;AAAA,UACC,+CAAO;UACP,WAAO,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,UAAU,MAAM;AAAA,QAAA;UAE1BE,mBAOM,OAAA;AAAA,YANH,8BAAe,QAAA,YAAU;AAAA,UAAA;YAE1BC,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI;AAAA,UAAA;UAGfC,YAIEC,SAAA;AAAA,YAHA,OAAKJ,eAAA,CAAC,gDAA8C,EAAA,eAC3B,QAAA,KAAA,CAAI,CAAA;AAAA,YAC7B,MAAK;AAAA,UAAA;;QAID,QAAA,QAAQ,QAAA,sBADhBL,mBAaM,OAAA;AAAA;UAXH,IAAII,MAAA,SAAA;AAAA,UACL,OAAKC,eAAA,CAAC,8CACE,QAAA,YAAY,CAAA;AAAA,UACnB,gCAAiBD,MAAA,aAAA,GAAa;AAAA,UAC/B,MAAK;AAAA,UACJ,mBAAiBA,MAAA,SAAA;AAAA,UAClB,0BAAA;AAAA,QAAA;UAEAE,mBAEM,OAAA;AAAA,qBAFG;AAAA,YAAJ,KAAI;AAAA,UAAA;YACPC,WAAuB,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;"}

package/dist/components/accordions/accordion/RuiAccordion.vue2.js

@@ -1,65 +1,4 @@
-import { defineComponent, useCssVars, unref, ref, createElementBlock, openBlock, mergeProps, createCommentVNode, normalizeClass, createElementVNode, createVNode, renderSlot } from "vue";
-import RuiIcon from "../../icons/RuiIcon.vue.js";
-import { useElementSize } from "@vueuse/core";
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "RuiAccordion",
-    inheritAttrs: false
-  },
-  __name: "RuiAccordion",
-  props: {
-    open: { type: Boolean, default: false },
-    eager: { type: Boolean, default: false },
-    headerGrow: { type: Boolean, default: false },
-    headerClass: { default: "" },
-    contentClass: { default: "" }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    useCssVars((_ctx) => ({
-      "fcb53c98": unref(innerHeight)
-    }));
-    const emit = __emit;
-    function click() {
-      emit("click");
-    }
-    const inner = ref();
-    const { height: innerHeight } = useElementSize(inner);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", mergeProps({
-        class: ["accordion", [_ctx.$style.accordion, { [_ctx.$style.open]: __props.open }]]
-      }, _ctx.$attrs), [
-        _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
-          key: 0,
-          class: normalizeClass(["accordion__header flex gap-2 items-center", [__props.headerClass, { "w-full": __props.headerGrow }]]),
-          role: "button",
-          onClick: _cache[0] || (_cache[0] = ($event) => click())
-        }, [
-          createElementVNode("div", {
-            class: normalizeClass({ grow: __props.headerGrow })
-          }, [
-            renderSlot(_ctx.$slots, "header", { open: __props.open })
-          ], 2),
-          createVNode(RuiIcon, {
-            class: normalizeClass(["text-rui-text-secondary", _ctx.$style.icon]),
-            name: "lu-chevron-down"
-          }, null, 8, ["class"])
-        ], 2)) : createCommentVNode("", true),
-        __props.open || __props.eager ? (openBlock(), createElementBlock("div", {
-          key: 1,
-          class: normalizeClass([[__props.contentClass, _ctx.$style.accordion__content], "accordion__content"])
-        }, [
-          createElementVNode("div", {
-            ref_key: "inner",
-            ref: inner
-          }, [
-            renderSlot(_ctx.$slots, "default")
-          ], 512)
-        ], 2)) : createCommentVNode("", true)
-      ], 16);
-    };
-  }
-});
+import _sfc_main from "./RuiAccordion.vue.js";
 export {
   _sfc_main as default
 };

package/dist/components/accordions/accordion/RuiAccordion.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAccordion.vue2.js","sources":["../../../../src/components/accordions/accordion/RuiAccordion.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport Icon from '@/components/icons/RuiIcon.vue';\n\nexport interface AccordionProps {\n  open?: boolean;\n  eager?: boolean;\n  headerGrow?: boolean;\n  headerClass?: string;\n  contentClass?: string;\n}\n\ndefineOptions({\n  name: 'RuiAccordion',\n  inheritAttrs: false,\n});\n\nwithDefaults(defineProps<AccordionProps>(), {\n  open: false,\n  eager: false,\n  headerGrow: false,\n  headerClass: '',\n  contentClass: '',\n});\n\nconst emit = defineEmits<{\n  (e: 'click'): void;\n}>();\n\nfunction click() {\n  emit('click');\n}\n\nconst inner = ref<HTMLDivElement>();\n\nconst { height: innerHeight } = useElementSize(inner);\n</script>\n\n<template>\n  <div\n    class=\"accordion\"\n    :class=\"[$style.accordion, { [$style.open]: open }]\"\n    v-bind=\"$attrs\"\n  >\n    <div\n      v-if=\"$slots.header\"\n      class=\"accordion__header flex gap-2 items-center\"\n      :class=\"[headerClass, { 'w-full': headerGrow }]\"\n      role=\"button\"\n      @click=\"click()\"\n    >\n      <div\n        :class=\"{ grow: headerGrow }\"\n      >\n        <slot\n          name=\"header\"\n          :open=\"open\"\n        />\n      </div>\n      <Icon\n        class=\"text-rui-text-secondary\"\n        :class=\"$style.icon\"\n        name=\"lu-chevron-down\"\n      />\n    </div>\n    <div\n      v-if=\"open || eager\"\n      :class=\"[contentClass, $style.accordion__content]\"\n      class=\"accordion__content\"\n    >\n      <div\n        ref=\"inner\"\n      >\n        <slot\n          name=\"default\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n.accordion {\n  @apply flex flex-col items-start;\n\n  &.open {\n    .accordion {\n      &__content {\n        height: calc(v-bind(innerHeight) * 1px);\n      }\n    }\n\n    .icon {\n      @apply transform -rotate-180;\n    }\n  }\n\n  &__content {\n    @apply grow transition-all overflow-hidden h-0 w-full;\n  }\n\n  .icon {\n    @apply transition-all;\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_mergeProps","$style","$attrs","$slots","_normalizeClass","_createElementVNode","_renderSlot","_createVNode","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,OAAO;AAIb,aAAS,QAAQ;AACf,WAAK,OAAO;AAAA,IACd;AAEA,UAAM,QAAQ,IAAA;AAEd,UAAM,EAAE,QAAQ,gBAAgB,eAAe,KAAK;;AAIlD,aAAAA,UAAA,GAAAC,mBAuCM,OAvCNC,WAuCM;AAAA,QAtCJ,OAAK,CAAC,aAAW,CACRC,KAAAA,OAAO,WAAS,EAAA,CAAKA,KAAAA,OAAO,IAAI,GAAG,QAAA,KAAA,CAAI,CAAA;AAAA,MAAA,GACxCC,KAAAA,MAAM,GAAA;AAAA,QAGNC,KAAAA,OAAO,uBADfJ,mBAoBM,OAAA;AAAA;UAlBJ,OAAKK,eAAA,CAAC,6CAA2C,CACxC,QAAA,yBAAyB,QAAA,WAAA,CAAU,CAAA,CAAA;AAAA,UAC5C,MAAK;AAAA,UACJ,+CAAO,MAAA;AAAA,QAAK;UAEbC,mBAOM,OAAA;AAAA,YANH,8BAAe,QAAA,YAAU;AAAA,UAAA;YAE1BC,WAGE,KAAA,QAAA,UAAA,EADC,MAAM,QAAA,MAAI;AAAA,UAAA;UAGfC,YAIEC,SAAA;AAAA,YAHA,OAAKJ,eAAA,CAAC,2BACEH,KAAAA,OAAO,IAAI,CAAA;AAAA,YACnB,MAAK;AAAA,UAAA;;QAID,QAAA,QAAQ,QAAA,sBADhBF,mBAYM,OAAA;AAAA;UAVH,wBAAQ,QAAA,cAAcE,YAAO,kBAAkB,GAC1C,oBAAoB,CAAA;AAAA,QAAA;UAE1BI,mBAMM,OAAA;AAAA,qBALA;AAAA,YAAJ,KAAI;AAAA,UAAA;YAEJC,WAEE,KAAA,QAAA,SAAA;AAAA,UAAA;;;;;;"}
+{"version":3,"file":"RuiAccordion.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/calendar/RuiCalendar.vue.js

@@ -67,6 +67,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function selectMonth(selection) {
       set(viewMonth, selection.month);
       set(viewYear, selection.year);
+      if (isDefined(selectedDate)) {
+        const current = get(selectedDate);
+        const currentDay = current.getDate();
+        const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();
+        const adjustedDay = Math.min(currentDay, daysInNewMonth);
+        const newDate = new Date(current);
+        newDate.setFullYear(selection.year);
+        newDate.setDate(1);
+        newDate.setMonth(selection.month);
+        newDate.setDate(adjustedDay);
+        set(selectedDate, newDate);
+      }
     }
     watch([selectedDate], ([date]) => {
       if (!date && !props.allowEmpty)

package/dist/components/calendar/RuiCalendar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendar.vue.js","sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  maxDate: undefined,\n  minDate: undefined,\n  allowEmpty: false,\n  borderless: false,\n});\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref(get(currentDate).getMonth());\nconst viewYear = ref(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => props.maxDate ? new Date(props.maxDate) : undefined),\n  minDate: computed(() => props.minDate ? new Date(props.minDate) : undefined),\n  isDark,\n  allowEmpty: props.allowEmpty,\n} satisfies RuiCalendarState);\n\nfunction moveMonth(delta: number) {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n\n  emit('update:pages', [{ title: get(monthTitle) }]);\n}\n\nfunction move(date: Date | number) {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection) {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n}\n\nwatch([selectedDate], ([date]) => {\n  if (!date && !props.allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div\n    class=\"rui-calendar\"\n    :class=\"{ dark: isDark, bordered: !borderless }\"\n  >\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n.rui-calendar {\n  @apply w-[18.75rem] bg-white overflow-hidden;\n\n  &.bordered {\n    @apply rounded-md shadow-sm border border-rui-grey-200;\n  }\n\n  &.dark {\n    @apply bg-rui-grey-900;\n\n    &.bordered {\n      @apply border-rui-grey-800;\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createVNode"],"mappings":"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"}
+{"version":3,"file":"RuiCalendar.vue.js","sources":["../../../src/components/calendar/RuiCalendar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, provide, ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport { useRotkiTheme } from '@/composables/theme';\nimport RuiCalendarGrid from './RuiCalendarGrid.vue';\nimport RuiCalendarHeader from './RuiCalendarHeader.vue';\n\nexport interface CalendarProps {\n  maxDate?: Date | number;\n  minDate?: Date | number;\n  allowEmpty?: boolean;\n  borderless?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiCalendar',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>({ required: false });\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: false, default: false });\n\nconst props = withDefaults(defineProps<CalendarProps>(), {\n  maxDate: undefined,\n  minDate: undefined,\n  allowEmpty: false,\n  borderless: false,\n});\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref(get(currentDate).getMonth());\nconst viewYear = ref(get(currentDate).getFullYear());\n\nconst { isDark } = useRotkiTheme();\n\nconst monthTitle = computed<string>(() => {\n  const date = new Date(get(viewYear), get(viewMonth));\n  return date.toLocaleString('default', { month: 'long', year: 'numeric' });\n});\n\nprovide(CalendarStateSymbol.valueOf(), {\n  viewMonth,\n  viewYear,\n  selectedDate,\n  maxDate: computed(() => props.maxDate ? new Date(props.maxDate) : undefined),\n  minDate: computed(() => props.minDate ? new Date(props.minDate) : undefined),\n  isDark,\n  allowEmpty: props.allowEmpty,\n} satisfies RuiCalendarState);\n\nfunction moveMonth(delta: number) {\n  let newMonth = get(viewMonth) + delta;\n  let newYear = get(viewYear);\n\n  if (newMonth > 11) {\n    newMonth = 0;\n    newYear++;\n  }\n  else if (newMonth < 0) {\n    newMonth = 11;\n    newYear--;\n  }\n\n  set(viewMonth, newMonth);\n  set(viewYear, newYear);\n\n  emit('update:pages', [{ title: get(monthTitle) }]);\n}\n\nfunction move(date: Date | number) {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection) {\n  set(viewMonth, selection.month);\n  set(viewYear, selection.year);\n\n  // If there's a selected date, update it with the new year/month\n  if (isDefined(selectedDate)) {\n    const current = get(selectedDate);\n    const currentDay = current.getDate();\n    // Handle day overflow (e.g., Jan 31 -> Feb 28) by checking BEFORE setting month\n    const daysInNewMonth = new Date(selection.year, selection.month + 1, 0).getDate();\n    const adjustedDay = Math.min(currentDay, daysInNewMonth);\n\n    const newDate = new Date(current);\n    newDate.setFullYear(selection.year);\n    newDate.setDate(1); // Set to 1st to avoid overflow when changing month\n    newDate.setMonth(selection.month);\n    newDate.setDate(adjustedDay);\n    set(selectedDate, newDate);\n  }\n}\n\nwatch([selectedDate], ([date]) => {\n  if (!date && !props.allowEmpty)\n    return;\n\n  if (date) {\n    set(model, new Date(date));\n\n    if (get(viewMonth) !== date.getMonth()) {\n      set(viewMonth, date.getMonth());\n    }\n\n    if (get(viewYear) !== date.getFullYear()) {\n      set(viewYear, date.getFullYear());\n    }\n  }\n  else {\n    set(model, undefined);\n  }\n});\n\nwatch(model, (newValue) => {\n  if (newValue === undefined) {\n    set(selectedDate, undefined);\n    return;\n  }\n\n  const date = new Date(newValue);\n\n  if (isDefined(selectedDate) && get(selectedDate).getTime() !== date.getTime()) {\n    set(selectedDate, new Date(newValue));\n    set(viewMonth, date.getMonth());\n    set(viewYear, date.getFullYear());\n  }\n});\n\ndefineExpose({\n  move,\n});\n</script>\n\n<template>\n  <div\n    class=\"rui-calendar\"\n    :class=\"{ dark: isDark, bordered: !borderless }\"\n  >\n    <RuiCalendarHeader\n      v-model:menu-open=\"isMenuOpen\"\n      :title=\"monthTitle\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @prev-month=\"moveMonth(-1)\"\n      @next-month=\"moveMonth(1)\"\n      @select-month=\"selectMonth($event)\"\n    />\n\n    <RuiCalendarGrid\n      v-model=\"selectedDate\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\">\n.rui-calendar {\n  @apply w-[18.75rem] bg-white overflow-hidden;\n\n  &.bordered {\n    @apply rounded-md shadow-sm border border-rui-grey-200;\n  }\n\n  &.dark {\n    @apply bg-rui-grey-900;\n\n    &.bordered {\n      @apply border-rui-grey-800;\n    }\n  }\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_normalizeClass","_unref","_createVNode"],"mappings":"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"}

package/dist/components/calendar/RuiCalendarMenu.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./RuiCalendarMenu.vue2.js";
 /* empty css                     */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const RuiCalendarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-649d1d22"]]);
+const RuiCalendarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1a30957"]]);
 export {
   RuiCalendarMenu as default
 };

package/dist/components/calendar/RuiCalendarMenu.vue2.js

@@ -151,7 +151,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function handleNext() {
       if (get(viewMode) === "months") {
         const nextYear = props.viewYear + 1;
-        selectYear(nextYear);
+        emit("select", { month: props.viewMonth, year: nextYear });
       } else {
         const lastYearInRange = get(startYear) + 11;
         set(startYear, lastYearInRange + 1);
@@ -160,7 +160,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function handlePrev() {
       if (get(viewMode) === "months") {
         const previousYear = props.viewYear - 1;
-        selectYear(previousYear);
+        emit("select", { month: props.viewMonth, year: previousYear });
       } else {
         const firstYearInRange = get(startYear);
         set(startYear, firstYearInRange - 12);

package/dist/components/calendar/RuiCalendarMenu.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiCalendarMenu.vue2.js","sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst props = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(props.viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateYearRange() {\n  const start = get(startYear);\n  set(yearRange, Array.from({ length: 12 }, (_, i) => start + i));\n}\n\nfunction calculateTitle() {\n  if (get(viewMode) === 'months') {\n    set(title, props.viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation() {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = props.viewYear + 1;\n    const previousYear = props.viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = props.viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = props.viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(() => props.viewYear, () => {\n  calculateTitle();\n  calculateNavigation();\n  calculateMonthsInRange();\n  calculateYearsInRange();\n});\n\nwatch(() => props.viewMonth, () => {\n  calculateYearsInRange();\n});\n\nfunction toggleSelection() {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number) {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: props.viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number) {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: props.viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext() {\n  if (get(viewMode) === 'months') {\n    const nextYear = props.viewYear + 1;\n    selectYear(nextYear);\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev() {\n  if (get(viewMode) === 'months') {\n    const previousYear = props.viewYear - 1;\n    selectYear(previousYear);\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    placement=\"bottom-start\"\n  >\n    <div class=\"menu-container\">\n      <div class=\"menu-header\">\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"month-grid\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': index === viewMonth && get(monthsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': index === viewMonth && !get(monthsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': index !== viewMonth && get(monthsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(monthsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"year-grid\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': year === viewYear && get(yearsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': year === viewYear && !get(yearsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': year !== viewYear && get(yearsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(yearsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n\n<style scoped>\n.menu-container {\n  @apply w-64 shadow-lg overflow-hidden;\n}\n\n.menu-header {\n  @apply flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200;\n  @apply border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800;\n}\n\n.month-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n\n.year-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n</style>\n"],"names":["_useModel","_createBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers"],"mappings":"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"}
+{"version":3,"file":"RuiCalendarMenu.vue2.js","sources":["../../../src/components/calendar/RuiCalendarMenu.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { ref, watch } from 'vue';\nimport {\n  CalendarStateSymbol,\n  getShortMonthNames,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiMenu from '@/components/overlays/menu/RuiMenu.vue';\nimport RuiButton from '../buttons/button/RuiButton.vue';\n\ndefineOptions({\n  name: 'RuiCalendarMenu',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<boolean>();\n\nconst props = defineProps<{\n  anchorEl: HTMLElement | undefined;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  select: [MonthYearSelection];\n}>();\n\n// Core reactive state - minimal\nconst viewMode = ref<'months' | 'years'>('months');\nconst startYear = ref<number>(props.viewYear - 6);\n\n// Pre-calculated constants\nconst months = getShortMonthNames();\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Pre-calculated arrays for performance - using refs for better control\nconst yearRange = ref<number[]>([]);\nconst monthsInRange = ref<boolean[]>([]);\nconst yearsInRange = ref<boolean[]>([]);\nconst title = ref<string>('');\nconst canGoToNext = ref<boolean>(true);\nconst canGoToPrev = ref<boolean>(true);\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateYearRange() {\n  const start = get(startYear);\n  set(yearRange, Array.from({ length: 12 }, (_, i) => start + i));\n}\n\nfunction calculateTitle() {\n  if (get(viewMode) === 'months') {\n    set(title, props.viewYear.toString());\n  }\n  else {\n    const range = get(yearRange);\n    set(title, `${range[0]} - ${range.at(-1)}`);\n  }\n}\n\nfunction calculateNavigation() {\n  const { maxDate, minDate } = calendarState;\n  const mode = get(viewMode);\n\n  if (mode === 'months') {\n    const nextYear = props.viewYear + 1;\n    const previousYear = props.viewYear - 1;\n\n    set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());\n    set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    const firstYearInRange = get(startYear);\n\n    // Check if we can navigate to the next range of years\n    const nextRangeStart = lastYearInRange + 1;\n    set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());\n\n    // Check if we can navigate to the previous range of years\n    const prevRangeEnd = firstYearInRange - 1;\n    set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());\n  }\n}\n\nfunction calculateMonthsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const currentYear = props.viewYear;\n  const result = new Array(12).fill(true);\n\n  if (isDefined(minDate) || isDefined(maxDate)) {\n    for (let month = 0; month < 12; month++) {\n      const date = new Date(currentYear, month);\n      if (isDefined(maxDate) && date > get(maxDate)) {\n        result[month] = false;\n      }\n      if (isDefined(minDate) && date < get(minDate)) {\n        result[month] = false;\n      }\n    }\n  }\n\n  set(monthsInRange, result);\n}\n\nfunction calculateYearsInRange() {\n  const { minDate, maxDate } = calendarState;\n  const range = get(yearRange);\n  const currentMonth = props.viewMonth;\n\n  if (!isDefined(minDate) && !isDefined(maxDate)) {\n    set(yearsInRange, new Array(range.length).fill(true));\n    return;\n  }\n\n  const result = range.map((year) => {\n    const date = new Date(year, currentMonth);\n    if (isDefined(maxDate) && date > get(maxDate)) {\n      return false;\n    }\n    return !isDefined(minDate) || date >= get(minDate);\n  });\n\n  set(yearsInRange, result);\n}\n\n// Initial calculations\ncalculateYearRange();\ncalculateTitle();\ncalculateNavigation();\ncalculateMonthsInRange();\ncalculateYearsInRange();\n\n// Watchers for recalculation only when needed\nwatch(startYear, () => {\n  calculateYearRange();\n  calculateTitle();\n  calculateNavigation();\n  calculateYearsInRange();\n});\n\nwatch(viewMode, () => {\n  calculateTitle();\n  calculateNavigation();\n});\n\nwatch(() => props.viewYear, () => {\n  calculateTitle();\n  calculateNavigation();\n  calculateMonthsInRange();\n  calculateYearsInRange();\n});\n\nwatch(() => props.viewMonth, () => {\n  calculateYearsInRange();\n});\n\nfunction toggleSelection() {\n  set(viewMode, get(viewMode) === 'months' ? 'years' : 'months');\n}\n\nfunction selectMonth(month: number) {\n  if (!get(monthsInRange)[month])\n    return;\n  emit('select', { month, year: props.viewYear });\n  set(modelValue, false);\n}\n\nfunction selectYear(year: number) {\n  const yearIndex = get(yearRange).indexOf(year);\n  if (yearIndex === -1 || !get(yearsInRange)[yearIndex])\n    return;\n\n  emit('select', { month: props.viewMonth, year });\n  set(viewMode, 'months');\n}\n\nfunction handleNext() {\n  if (get(viewMode) === 'months') {\n    const nextYear = props.viewYear + 1;\n    // Emit directly - navigation is already constrained by canGoToNext\n    emit('select', { month: props.viewMonth, year: nextYear });\n  }\n  else {\n    const lastYearInRange = get(startYear) + 11;\n    set(startYear, lastYearInRange + 1);\n  }\n}\n\nfunction handlePrev() {\n  if (get(viewMode) === 'months') {\n    const previousYear = props.viewYear - 1;\n    // Emit directly - navigation is already constrained by canGoToPrev\n    emit('select', { month: props.viewMonth, year: previousYear });\n  }\n  else {\n    const firstYearInRange = get(startYear);\n    set(startYear, firstYearInRange - 12);\n  }\n}\n</script>\n\n<template>\n  <RuiMenu\n    v-model=\"modelValue\"\n    :anchor-el=\"anchorEl\"\n    placement=\"bottom-start\"\n  >\n    <div class=\"menu-container\">\n      <div class=\"menu-header\">\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToPrev)\"\n          variant=\"text\"\n          @click.stop=\"handlePrev()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-left\"\n            size=\"20\"\n          />\n        </RuiButton>\n\n        <div\n          class=\"flex-1 text-center cursor-pointer\"\n          @click.stop=\"toggleSelection()\"\n        >\n          {{ get(title) }}\n        </div>\n\n        <RuiButton\n          type=\"button\"\n          class=\"nav-button\"\n          icon\n          :disabled=\"!get(canGoToNext)\"\n          variant=\"text\"\n          @click.stop=\"handleNext()\"\n        >\n          <RuiIcon\n            name=\"lu-chevron-right\"\n            size=\"20\"\n          />\n        </RuiButton>\n      </div>\n\n      <div\n        v-if=\"viewMode === 'months'\"\n        class=\"month-grid\"\n      >\n        <button\n          v-for=\"(month, index) in months\"\n          :key=\"index\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': index === viewMonth && get(monthsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': index === viewMonth && !get(monthsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': index !== viewMonth && get(monthsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(monthsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(monthsInRange)[index]\"\n          @click.stop=\"selectMonth(index)\"\n        >\n          {{ month.substring(0, 3) }}\n        </button>\n      </div>\n\n      <div\n        v-else-if=\"viewMode === 'years'\"\n        class=\"year-grid\"\n      >\n        <button\n          v-for=\"(year, index) in yearRange\"\n          :key=\"year\"\n          type=\"button\"\n          class=\"h-9 w-full flex items-center justify-center text-sm font-medium rounded-md transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50\"\n          :class=\"[\n            {\n              'bg-rui-primary text-white hover:bg-rui-primary-darker active:bg-rui-primary-darker dark:bg-rui-primary dark:text-white dark:hover:bg-rui-primary-darker': year === viewYear && get(yearsInRange)[index],\n              'bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400': year === viewYear && !get(yearsInRange)[index],\n              'text-gray-700 bg-transparent hover:bg-gray-100 active:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 dark:active:bg-gray-600': year !== viewYear && get(yearsInRange)[index],\n              'opacity-50 cursor-not-allowed bg-transparent hover:bg-transparent active:bg-transparent dark:hover:bg-transparent dark:active:bg-transparent pointer-events-none text-gray-400 dark:text-gray-600': !get(yearsInRange)[index],\n            },\n          ]\"\n          :disabled=\"!get(yearsInRange)[index]\"\n          @click.stop=\"selectYear(year)\"\n        >\n          {{ year }}\n        </button>\n      </div>\n    </div>\n  </RuiMenu>\n</template>\n\n<style scoped>\n.menu-container {\n  @apply w-64 shadow-lg overflow-hidden;\n}\n\n.menu-header {\n  @apply flex items-center justify-center p-1 font-medium text-gray-800 dark:text-gray-200;\n  @apply border-b border-rui-grey-200 dark:border-rui-grey-800 cursor-pointer hover:bg-rui-grey-100 dark:hover:bg-rui-grey-800;\n}\n\n.month-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n\n.year-grid {\n  @apply grid grid-cols-3 gap-1 p-2;\n}\n</style>\n"],"names":["_useModel","_createBlock","_createElementVNode","_createVNode","_unref","_toDisplayString","_openBlock","_createElementBlock","_Fragment","_renderList","_withModifiers"],"mappings":"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"}

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

@@ -18,6 +18,7 @@ export interface RuiDateTimePickerProps {
     errorMessages?: string | string[];
     successMessages?: string | string[];
     hideDetails?: boolean;
+    required?: boolean;
 }
 type __VLS_Props = RuiDateTimePickerProps;
 declare const props: Readonly<{}> & {
@@ -36,10 +37,12 @@ declare const props: Readonly<{}> & {
     readonly accuracy: TimeAccuracy;
     readonly errorMessages: string | string[];
     readonly successMessages: string | string[];
+    readonly required: boolean;
 } & {
     readonly disabled: boolean;
     readonly dense: boolean;
     readonly readonly: boolean;
+    readonly required: boolean;
     readonly hideDetails: boolean;
     readonly allowEmpty: boolean;
 };
@@ -64,6 +67,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     errorMessages: string | string[];
     successMessages: string | string[];
     hint: string;
+    required: boolean;
     hideDetails: boolean;
     maxDate: Date | number | "now";
     minDate: Date | number;

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

@@ -1,5 +1,5 @@
 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, toDisplayString, withModifiers, nextTick } from "vue";
+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 { logicOr, logicAnd } from "@vueuse/math";
 import dayjs from "dayjs";
 import RuiButton from "../buttons/button/RuiButton.vue.js";
@@ -13,8 +13,12 @@ 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 { get, set } from "@vueuse/shared";
-const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = ["disabled", "value", "placeholder", "readonly"];
+const _hoisted_1 = ["data-error", "tabindex"];
+const _hoisted_2 = {
+  key: 0,
+  class: "text-rui-error"
+};
+const _hoisted_3 = ["disabled", "value", "placeholder", "readonly", "aria-invalid"];
 const MILLISECONDS = 1e3;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -37,7 +41,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     hint: { default: void 0 },
     errorMessages: { default: () => [] },
     successMessages: { default: () => [] },
-    hideDetails: { type: Boolean, default: false }
+    hideDetails: { type: Boolean, default: false },
+    required: { type: Boolean, default: false }
   }, {
     "modelValue": { required: true },
     "modelModifiers": {}
@@ -45,7 +50,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   emits: ["update:modelValue"],
   setup(__props) {
     useCssVars((_ctx) => ({
-      "v60b4ee20": unref(labelWithQuote)
+      "a9f07354": unref(labelWithQuote)
     }));
     const modelValue = useModel(__props, "modelValue");
     const props = __props;
@@ -185,7 +190,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const labelWithQuote = computed(() => {
       if (!props.label)
         return '"\\200B"';
-      return `'  ${props.label}  '`;
+      const asterisk = props.required ? "﹡" : "";
+      return `'  ${props.label}${asterisk}  '`;
     });
     const isOutlined = computed(() => props.variant === "outlined");
     const formattedDisplay = computed(() => {
@@ -442,6 +448,7 @@ 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())
             }
@@ -455,7 +462,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "pr-2": !unref(valueSet) && !open && unref(isOutlined)
                 }
               ])
-            }, toDisplayString(__props.label), 3)) : createCommentVNode("", true),
+            }, [
+              createTextVNode(toDisplayString(__props.label) + " ", 1),
+              props.required ? (openBlock(), createElementBlock("span", _hoisted_2, " ﹡ ")) : createCommentVNode("", true)
+            ], 2)) : createCommentVNode("", true),
             createElementVNode("span", {
               class: normalizeClass([_ctx.$style.icon__wrapper, _ctx.$style.icon__prepend])
             }, [
@@ -477,13 +487,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 type: "text",
                 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))
-              }, null, 40, _hoisted_2)
+              }, null, 40, _hoisted_3)
             ], 2),
             __props.allowEmpty && unref(valueSet) && !__props.disabled ? (openBlock(), createBlock(RuiButton, {
               key: 1,