@rotki/ui-library 2.8.1 → 2.8.2

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

@@ -0,0 +1,149 @@
+import { defineComponent, mergeModels, useModel, inject, ref, watch, createElementBlock, openBlock, createElementVNode, Fragment, renderList, unref, toDisplayString, withModifiers, normalizeClass } from "vue";
+import { get, isDefined, set } from "@vueuse/core";
+import { CalendarStateSymbol, getDaysOfWeek } from "./state.js";
+const _hoisted_1 = { class: "calendar-grid" };
+const _hoisted_2 = { class: "calendar-weekdays" };
+const _hoisted_3 = { class: "calendar-days" };
+const _hoisted_4 = ["data-id", "disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiCalendarGrid",
+    inheritAttrs: false
+  },
+  __name: "RuiCalendarGrid",
+  props: /* @__PURE__ */ mergeModels({
+    viewMonth: {},
+    viewYear: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const model = useModel(__props, "modelValue");
+    const props = __props;
+    const calendarState = inject(CalendarStateSymbol);
+    function createDateKey(date) {
+      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`;
+    }
+    const daysOfWeek = getDaysOfWeek();
+    const today = /* @__PURE__ */ new Date();
+    const todayKey = createDateKey(today);
+    const calendarDays = ref([]);
+    function createDayData(date, isCurrentMonth, modelValue, maxDateValue, minDateValue) {
+      const key = createDateKey(date);
+      return {
+        date,
+        isCurrentMonth,
+        isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),
+        isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,
+        isToday: key === todayKey,
+        key,
+        dayNumber: date.getDate()
+      };
+    }
+    function calculateCalendarDays() {
+      const firstDayOfMonth = new Date(props.viewYear, props.viewMonth, 1);
+      const lastDayOfMonth = new Date(props.viewYear, props.viewMonth + 1, 0);
+      const daysInMonth = lastDayOfMonth.getDate();
+      const startingDayOfWeek = firstDayOfMonth.getDay();
+      const { maxDate, minDate } = calendarState;
+      const modelValue = get(model);
+      const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;
+      const minDateValue = isDefined(minDate) ? get(minDate) : null;
+      const result = [];
+      if (startingDayOfWeek > 0) {
+        const prevMonthLastDay = new Date(props.viewYear, props.viewMonth, 0).getDate();
+        for (let i = startingDayOfWeek - 1; i >= 0; i--) {
+          const date = new Date(props.viewYear, props.viewMonth - 1, prevMonthLastDay - i, 12, 0, 0, 0);
+          result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));
+        }
+      }
+      for (let i = 1; i <= daysInMonth; i++) {
+        const date = new Date(props.viewYear, props.viewMonth, i, 12, 0, 0, 0);
+        result.push(createDayData(date, true, modelValue, maxDateValue, minDateValue));
+      }
+      const totalDaysSoFar = result.length;
+      const daysToAdd = 42 - totalDaysSoFar;
+      for (let i = 1; i <= daysToAdd; i++) {
+        const date = new Date(props.viewYear, props.viewMonth + 1, i, 12, 0, 0, 0);
+        result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));
+      }
+      set(calendarDays, result);
+    }
+    function isDateInRangeCheck(date, maxDateValue, minDateValue) {
+      if (maxDateValue && date > maxDateValue)
+        return false;
+      if (minDateValue && date < minDateValue)
+        return false;
+      return true;
+    }
+    function isDateSelectedCheck(date, modelValue) {
+      return date.getFullYear() === modelValue.getFullYear() && date.getMonth() === modelValue.getMonth() && date.getDate() === modelValue.getDate();
+    }
+    calculateCalendarDays();
+    watch([() => props.viewMonth, () => props.viewYear], () => {
+      calculateCalendarDays();
+    });
+    watch(model, () => {
+      calculateCalendarDays();
+    });
+    watch([() => calendarState.maxDate, () => calendarState.minDate], () => {
+      calculateCalendarDays();
+    }, { deep: true });
+    function selectDate(dayData) {
+      if (!dayData.isInRange)
+        return;
+      let updateModel;
+      if (dayData.isSelected && calendarState.allowEmpty) {
+        updateModel = void 0;
+      } else if (isDefined(model)) {
+        const modelValue = get(model);
+        const newDate = new Date(dayData.date);
+        newDate.setHours(modelValue.getHours());
+        newDate.setMinutes(modelValue.getMinutes());
+        newDate.setSeconds(modelValue.getSeconds());
+        updateModel = newDate;
+      } else {
+        updateModel = new Date(dayData.date);
+      }
+      set(model, updateModel);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(daysOfWeek), (day) => {
+            return openBlock(), createElementBlock("span", {
+              key: day,
+              class: "weekday-label"
+            }, toDisplayString(day), 1);
+          }), 128))
+        ]),
+        createElementVNode("div", _hoisted_3, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(get)(calendarDays.value), (dayData) => {
+            return openBlock(), createElementBlock("button", {
+              key: dayData.key,
+              type: "button",
+              "data-id": dayData.key,
+              class: normalizeClass(["h-9 w-full flex items-center justify-center text-sm rounded-full mx-auto max-w-[2.25rem] transition-colors duration-150 ease-in-out border-none outline-none cursor-pointer focus:ring-2 focus:ring-rui-primary focus:ring-opacity-50", [
+                {
+                  "bg-rui-primary text-white hover:bg-rui-primary/90 dark:hover:bg-rui-primary/90": dayData.isSelected,
+                  "text-gray-400 dark:text-gray-600": !dayData.isCurrentMonth && !dayData.isSelected,
+                  "text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700": dayData.isCurrentMonth && !dayData.isSelected && dayData.isInRange,
+                  "opacity-50 cursor-not-allowed hover:bg-transparent": !dayData.isInRange,
+                  "today-indicator": dayData.isToday && !dayData.isSelected
+                }
+              ]]),
+              disabled: !dayData.isInRange,
+              onClick: withModifiers(($event) => selectDate(dayData), ["stop"])
+            }, toDisplayString(dayData.dayNumber), 11, _hoisted_4);
+          }), 128))
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiCalendarGrid.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarGrid.vue2.js","sources":["../../../src/components/calendar/RuiCalendarGrid.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { inject, ref, watch } from 'vue';\nimport { CalendarStateSymbol, getDaysOfWeek, type RuiCalendarState } from '@/components/calendar/state';\n\ndefineOptions({\n  name: 'RuiCalendarGrid',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>();\n\nconst props = defineProps<{\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\n// Helper functions to reduce duplication\nfunction createDateKey(date: Date): string {\n  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;\n}\n\n// Pre-calculated constants\nconst daysOfWeek = getDaysOfWeek();\nconst today = new Date();\nconst todayKey = createDateKey(today);\n\n// Pre-calculated arrays for performance - using refs for better control\nconst calendarDays = ref<Array<{\n  date: Date;\n  isCurrentMonth: boolean;\n  isInRange: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n  dayNumber: number;\n}>>([]);\n\nfunction createDayData(date: Date, isCurrentMonth: boolean, modelValue: Date | null | undefined, maxDateValue: Date | null, minDateValue: Date | null) {\n  const key = createDateKey(date);\n  return {\n    date,\n    isCurrentMonth,\n    isInRange: isDateInRangeCheck(date, maxDateValue, minDateValue),\n    isSelected: modelValue ? isDateSelectedCheck(date, modelValue) : false,\n    isToday: key === todayKey,\n    key,\n    dayNumber: date.getDate(),\n  };\n}\n\n// Pre-calculation functions using VueUse get/set\nfunction calculateCalendarDays() {\n  const firstDayOfMonth = new Date(props.viewYear, props.viewMonth, 1);\n  const lastDayOfMonth = new Date(props.viewYear, props.viewMonth + 1, 0);\n  const daysInMonth = lastDayOfMonth.getDate();\n  const startingDayOfWeek = firstDayOfMonth.getDay();\n\n  const { maxDate, minDate } = calendarState;\n  const modelValue = get(model);\n  const maxDateValue = isDefined(maxDate) ? get(maxDate) : null;\n  const minDateValue = isDefined(minDate) ? get(minDate) : null;\n\n  const result = [];\n\n  // Previous month days\n  if (startingDayOfWeek > 0) {\n    const prevMonthLastDay = new Date(props.viewYear, props.viewMonth, 0).getDate();\n    for (let i = startingDayOfWeek - 1; i >= 0; i--) {\n      const date = new Date(props.viewYear, props.viewMonth - 1, prevMonthLastDay - i, 12, 0, 0, 0);\n      result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n    }\n  }\n\n  // Current month days\n  for (let i = 1; i <= daysInMonth; i++) {\n    const date = new Date(props.viewYear, props.viewMonth, i, 12, 0, 0, 0);\n    result.push(createDayData(date, true, modelValue, maxDateValue, minDateValue));\n  }\n\n  // Next month days\n  const totalDaysSoFar = result.length;\n  const daysToAdd = 42 - totalDaysSoFar;\n  for (let i = 1; i <= daysToAdd; i++) {\n    const date = new Date(props.viewYear, props.viewMonth + 1, i, 12, 0, 0, 0);\n    result.push(createDayData(date, false, modelValue, maxDateValue, minDateValue));\n  }\n\n  set(calendarDays, result);\n}\n\nfunction isDateInRangeCheck(date: Date, maxDateValue: Date | null, minDateValue: Date | null): boolean {\n  if (maxDateValue && date > maxDateValue)\n    return false;\n  if (minDateValue && date < minDateValue)\n    return false;\n  return true;\n}\n\nfunction isDateSelectedCheck(date: Date, modelValue: Date): boolean {\n  return date.getFullYear() === modelValue.getFullYear()\n    && date.getMonth() === modelValue.getMonth()\n    && date.getDate() === modelValue.getDate();\n}\n\n// Initial calculation\ncalculateCalendarDays();\n\n// Watchers for recalculation only when needed\nwatch([() => props.viewMonth, () => props.viewYear], () => {\n  calculateCalendarDays();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n});\n\nwatch([() => calendarState.maxDate, () => calendarState.minDate], () => {\n  calculateCalendarDays();\n}, { deep: true });\n\nfunction selectDate(dayData: { date: Date; isInRange: boolean; isSelected: boolean }) {\n  if (!dayData.isInRange)\n    return;\n\n  let updateModel: Date | undefined;\n\n  if (dayData.isSelected && calendarState.allowEmpty) {\n    updateModel = undefined;\n  }\n  else if (isDefined(model)) {\n    const modelValue = get(model);\n    const newDate = new Date(dayData.date);\n    newDate.setHours(modelValue.getHours());\n    newDate.setMinutes(modelValue.getMinutes());\n    newDate.setSeconds(modelValue.getSeconds());\n    updateModel = newDate;\n  }\n  else {\n    updateModel = new Date(dayData.date);\n  }\n  set(model, updateModel);\n}\n</script>\n\n<template>\n  <div class=\"calendar-grid\">\n    <div class=\"calendar-weekdays\">\n      <span\n        v-for=\"day in daysOfWeek\"\n        :key=\"day\"\n        class=\"weekday-label\"\n      >\n        {{ day }}\n      </span>\n    </div>\n\n    <div class=\"calendar-days\">\n      <button\n        v-for=\"dayData in get(calendarDays)\"\n        :key=\"dayData.key\"\n        type=\"button\"\n        :data-id=\"dayData.key\"\n        class=\"h-9 w-full flex items-center justify-center text-sm rounded-full mx-auto max-w-[2.25rem] 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/90 dark:hover:bg-rui-primary/90': dayData.isSelected,\n            'text-gray-400 dark:text-gray-600': !dayData.isCurrentMonth && !dayData.isSelected,\n            'text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700': dayData.isCurrentMonth && !dayData.isSelected && dayData.isInRange,\n            'opacity-50 cursor-not-allowed hover:bg-transparent': !dayData.isInRange,\n            'today-indicator': dayData.isToday && !dayData.isSelected,\n          },\n        ]\"\n        :disabled=\"!dayData.isInRange\"\n        @click.stop=\"selectDate(dayData)\"\n      >\n        {{ dayData.dayNumber }}\n      </button>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.calendar-grid {\n  @apply w-full p-2 pt-0;\n}\n\n.calendar-weekdays {\n  @apply grid grid-cols-7 pb-2;\n}\n\n.weekday-label {\n  @apply py-2 text-xs font-medium text-center text-gray-500 dark:text-gray-400;\n}\n\n.calendar-days {\n  @apply grid grid-cols-7 gap-0.5;\n}\n\n.today-indicator {\n  @apply relative;\n\n  &:after {\n    content: '';\n    @apply absolute size-1 rounded-full bottom-1 left-1/2 transform -translate-x-1/2 bg-rui-primary;\n  }\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_createElementVNode","_Fragment","_renderList","_unref","_withModifiers","_toDisplayString"],"mappings":"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"}

package/dist/components/calendar/RuiCalendarHeader.vue.d.ts

@@ -1,4 +1,4 @@
-import { type MonthYearSelection } from '../../components/calendar/state';
+import { type MonthYearSelection } from '../../components/calendar/state.js';
 type __VLS_Props = {
     title: string;
     viewMonth: number;

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

@@ -0,0 +1,8 @@
+import _sfc_main from "./RuiCalendarHeader.vue2.js";
+/* empty css                       */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const RuiCalendarHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b6256f59"]]);
+export {
+  RuiCalendarHeader as default
+};
+//# sourceMappingURL=RuiCalendarHeader.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarHeader.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,112 @@
+import { defineComponent, mergeModels, useModel, ref, inject, computed, createElementBlock, openBlock, createVNode, createElementVNode, withModifiers, withCtx, createTextVNode, toDisplayString } from "vue";
+import { isDefined, get, set } from "@vueuse/core";
+import RuiButton from "../buttons/button/RuiButton.vue.js";
+import { CalendarStateSymbol } from "./state.js";
+import RuiIcon from "../icons/RuiIcon.vue.js";
+import RuiCalendarMenu from "./RuiCalendarMenu.vue.js";
+const _hoisted_1 = { class: "calendar-header" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiCalendarHeader",
+    inheritAttrs: false
+  },
+  __name: "RuiCalendarHeader",
+  props: /* @__PURE__ */ mergeModels({
+    title: {},
+    viewMonth: {},
+    viewYear: {}
+  }, {
+    "menu-open": { type: Boolean, ...{ required: true } },
+    "menu-openModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["prev-month", "next-month", "select-month"], ["update:menu-open"]),
+  setup(__props, { emit: __emit }) {
+    const isMenuOpen = useModel(__props, "menu-open");
+    const props = __props;
+    const emit = __emit;
+    const anchorEl = ref();
+    const calendarState = inject(CalendarStateSymbol);
+    const canGoToNext = computed(() => {
+      const { maxDate } = calendarState;
+      if (!isDefined(maxDate)) {
+        return true;
+      }
+      const date = new Date(props.viewYear, props.viewMonth);
+      return date.getTime() < get(maxDate).getTime();
+    });
+    const canGoToPrev = computed(() => {
+      const { minDate } = calendarState;
+      if (!isDefined(minDate)) {
+        return true;
+      }
+      const date = new Date(props.viewYear, props.viewMonth);
+      return date.getTime() > get(minDate).getTime();
+    });
+    function handleTitleClick(e) {
+      set(anchorEl, e.currentTarget ?? void 0);
+      set(isMenuOpen, true);
+    }
+    function handleDateSelection(selection) {
+      emit("select-month", selection);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(RuiButton, {
+          type: "button",
+          class: "nav-button",
+          icon: "",
+          disabled: !canGoToPrev.value,
+          variant: "text",
+          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => emit("prev-month"), ["stop"]))
+        }, {
+          default: withCtx(() => [
+            createVNode(RuiIcon, {
+              name: "lu-chevron-left",
+              size: "20"
+            })
+          ]),
+          _: 1
+        }, 8, ["disabled"]),
+        createElementVNode("h3", {
+          class: "header-title",
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => handleTitleClick($event), ["stop"]))
+        }, [
+          createTextVNode(toDisplayString(__props.title) + " ", 1),
+          createVNode(RuiIcon, {
+            name: "lu-chevron-down",
+            size: "16",
+            class: "ml-1"
+          })
+        ]),
+        createVNode(RuiCalendarMenu, {
+          modelValue: isMenuOpen.value,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isMenuOpen.value = $event),
+          "anchor-el": anchorEl.value,
+          "view-month": __props.viewMonth,
+          "view-year": __props.viewYear,
+          onSelect: _cache[3] || (_cache[3] = ($event) => handleDateSelection($event))
+        }, null, 8, ["modelValue", "anchor-el", "view-month", "view-year"]),
+        createVNode(RuiButton, {
+          type: "button",
+          class: "nav-button",
+          variant: "text",
+          icon: "",
+          disabled: !canGoToNext.value,
+          onClick: _cache[4] || (_cache[4] = withModifiers(($event) => emit("next-month"), ["stop"]))
+        }, {
+          default: withCtx(() => [
+            createVNode(RuiIcon, {
+              name: "lu-chevron-right",
+              size: "20"
+            })
+          ]),
+          _: 1
+        }, 8, ["disabled"])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiCalendarHeader.vue2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarHeader.vue2.js","sources":["../../../src/components/calendar/RuiCalendarHeader.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { get, isDefined, set } from '@vueuse/core';\nimport { computed, inject, ref } from 'vue';\nimport RuiButton from '@/components/buttons/button/RuiButton.vue';\nimport { CalendarStateSymbol, type MonthYearSelection, type RuiCalendarState } from '@/components/calendar/state';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport RuiCalendarMenu from './RuiCalendarMenu.vue';\n\ndefineOptions({\n  name: 'RuiCalendarHeader',\n  inheritAttrs: false,\n});\n\nconst isMenuOpen = defineModel<boolean>('menu-open', { required: true });\n\nconst props = defineProps<{\n  title: string;\n  viewMonth: number;\n  viewYear: number;\n}>();\n\nconst emit = defineEmits<{\n  'prev-month': [];\n  'next-month': [];\n  'select-month': [MonthYearSelection];\n}>();\n\nconst anchorEl = ref<HTMLElement>();\n\nconst calendarState = inject<RuiCalendarState>(CalendarStateSymbol) as RuiCalendarState;\n\nconst canGoToNext = computed<boolean>(() => {\n  const { maxDate } = calendarState;\n  if (!isDefined(maxDate)) {\n    return true;\n  }\n\n  const date = new Date(props.viewYear, props.viewMonth);\n  return date.getTime() < get(maxDate).getTime();\n});\n\nconst canGoToPrev = computed<boolean>(() => {\n  const { minDate } = calendarState;\n  if (!isDefined(minDate)) {\n    return true;\n  }\n\n  const date = new Date(props.viewYear, props.viewMonth);\n  return date.getTime() > get(minDate).getTime();\n});\n\nfunction handleTitleClick(e: Event) {\n  set(anchorEl, e.currentTarget as HTMLElement ?? undefined);\n  set(isMenuOpen, true);\n}\n\nfunction handleDateSelection(selection: MonthYearSelection) {\n  emit('select-month', selection);\n}\n</script>\n\n<template>\n  <div class=\"calendar-header\">\n    <RuiButton\n      type=\"button\"\n      class=\"nav-button\"\n      icon\n      :disabled=\"!canGoToPrev\"\n      variant=\"text\"\n      @click.stop=\"emit('prev-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-left\"\n        size=\"20\"\n      />\n    </RuiButton>\n\n    <h3\n      class=\"header-title\"\n      @click.stop=\"handleTitleClick($event)\"\n    >\n      {{ title }}\n      <RuiIcon\n        name=\"lu-chevron-down\"\n        size=\"16\"\n        class=\"ml-1\"\n      />\n    </h3>\n\n    <RuiCalendarMenu\n      v-model=\"isMenuOpen\"\n      :anchor-el=\"anchorEl\"\n      :view-month=\"viewMonth\"\n      :view-year=\"viewYear\"\n      @select=\"handleDateSelection($event)\"\n    />\n\n    <RuiButton\n      type=\"button\"\n      class=\"nav-button\"\n      variant=\"text\"\n      icon\n      :disabled=\"!canGoToNext\"\n      @click.stop=\"emit('next-month')\"\n    >\n      <RuiIcon\n        name=\"lu-chevron-right\"\n        size=\"20\"\n      />\n    </RuiButton>\n  </div>\n</template>\n\n<style scoped>\n.calendar-header {\n  @apply flex items-center justify-between px-4 py-3;\n}\n\n.header-title {\n  @apply font-medium text-gray-800 dark:text-gray-200 flex items-center cursor-pointer pl-8;\n}\n\n.nav-button {\n  @apply p-1 rounded-full text-gray-500 hover:text-rui-primary hover:bg-gray-100;\n  @apply dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-rui-primary;\n}\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_createVNode","_createElementVNode","_withModifiers","_createTextVNode","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAaA,UAAM,aAAaA,kBAAqB,WAA+B;AAEvE,UAAM,QAAQ;AAMd,UAAM,OAAO;AAMb,UAAM,WAAW,IAAA;AAEjB,UAAM,gBAAgB,OAAyB,mBAAmB;AAElE,UAAM,cAAc,SAAkB,MAAM;AAC1C,YAAM,EAAE,YAAY;AACpB,UAAI,CAAC,UAAU,OAAO,GAAG;AACvB,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,IAAI,KAAK,MAAM,UAAU,MAAM,SAAS;AACrD,aAAO,KAAK,QAAA,IAAY,IAAI,OAAO,EAAE,QAAA;AAAA,IACvC,CAAC;AAED,UAAM,cAAc,SAAkB,MAAM;AAC1C,YAAM,EAAE,YAAY;AACpB,UAAI,CAAC,UAAU,OAAO,GAAG;AACvB,eAAO;AAAA,MACT;AAEA,YAAM,OAAO,IAAI,KAAK,MAAM,UAAU,MAAM,SAAS;AACrD,aAAO,KAAK,QAAA,IAAY,IAAI,OAAO,EAAE,QAAA;AAAA,IACvC,CAAC;AAED,aAAS,iBAAiB,GAAU;AAClC,UAAI,UAAU,EAAE,iBAAgC,MAAS;AACzD,UAAI,YAAY,IAAI;AAAA,IACtB;AAEA,aAAS,oBAAoB,WAA+B;AAC1D,WAAK,gBAAgB,SAAS;AAAA,IAChC;;AAIE,aAAAC,UAAA,GAAAC,mBAgDM,OAhDN,YAgDM;AAAA,QA/CJC,YAYY,WAAA;AAAA,UAXV,MAAK;AAAA,UACL,OAAM;AAAA,UACN,MAAA;AAAA,UACC,WAAW,YAAA;AAAA,UACZ,SAAQ;AAAA,UACP,6DAAY,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;2BAEjB,MAGE;AAAA,YAHFA,YAGE,SAAA;AAAA,cAFA,MAAK;AAAA,cACL,MAAK;AAAA,YAAA;;;;QAITC,mBAUK,MAAA;AAAA,UATH,OAAM;AAAA,UACL,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAAC,cAAA,CAAA,WAAO,iBAAiB,MAAM,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;UAEjCC,gBAAAC,gBAAA,QAAA,KAAK,IAAG,KACX,CAAA;AAAA,UAAAJ,YAIE,SAAA;AAAA,YAHA,MAAK;AAAA,YACL,MAAK;AAAA,YACL,OAAM;AAAA,UAAA;;QAIVA,YAME,iBAAA;AAAA,sBALS,WAAA;AAAA,uEAAA,WAAU,QAAA;AAAA,UAClB,aAAW,SAAA;AAAA,UACX,cAAY,QAAA;AAAA,UACZ,aAAW,QAAA;AAAA,UACX,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,oBAAoB,MAAM;AAAA,QAAA;QAGrCA,YAYY,WAAA;AAAA,UAXV,MAAK;AAAA,UACL,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,MAAA;AAAA,UACC,WAAW,YAAA;AAAA,UACX,6DAAY,KAAI,YAAA,GAAA,CAAA,MAAA,CAAA;AAAA,QAAA;2BAEjB,MAGE;AAAA,YAHFA,YAGE,SAAA;AAAA,cAFA,MAAK;AAAA,cACL,MAAK;AAAA,YAAA;;;;;;;;"}

package/dist/components/calendar/RuiCalendarMenu.vue.d.ts

@@ -1,4 +1,4 @@
-import { type MonthYearSelection } from '../../components/calendar/state';
+import { type MonthYearSelection } from '../../components/calendar/state.js';
 type __VLS_Props = {
     anchorEl: HTMLElement | undefined;
     viewMonth: number;

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

@@ -0,0 +1,8 @@
+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"]]);
+export {
+  RuiCalendarMenu as default
+};
+//# sourceMappingURL=RuiCalendarMenu.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiCalendarMenu.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

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

@@ -0,0 +1,261 @@
+import { defineComponent, mergeModels, useModel, ref, inject, watch, createBlock, openBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, createVNode, withModifiers, unref, toDisplayString, Fragment, renderList, normalizeClass } from "vue";
+import { get, set, isDefined } from "@vueuse/core";
+import { getShortMonthNames, CalendarStateSymbol } from "./state.js";
+import RuiIcon from "../icons/RuiIcon.vue.js";
+import RuiMenu from "../overlays/menu/RuiMenu.vue.js";
+import RuiButton from "../buttons/button/RuiButton.vue.js";
+const _hoisted_1 = { class: "menu-container" };
+const _hoisted_2 = { class: "menu-header" };
+const _hoisted_3 = {
+  key: 0,
+  class: "month-grid"
+};
+const _hoisted_4 = ["disabled", "onClick"];
+const _hoisted_5 = {
+  key: 1,
+  class: "year-grid"
+};
+const _hoisted_6 = ["disabled", "onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "RuiCalendarMenu",
+    inheritAttrs: false
+  },
+  __name: "RuiCalendarMenu",
+  props: /* @__PURE__ */ mergeModels({
+    anchorEl: {},
+    viewMonth: {},
+    viewYear: {}
+  }, {
+    "modelValue": { type: Boolean },
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["select"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    const modelValue = useModel(__props, "modelValue");
+    const props = __props;
+    const emit = __emit;
+    const viewMode = ref("months");
+    const startYear = ref(props.viewYear - 6);
+    const months = getShortMonthNames();
+    const calendarState = inject(CalendarStateSymbol);
+    const yearRange = ref([]);
+    const monthsInRange = ref([]);
+    const yearsInRange = ref([]);
+    const title = ref("");
+    const canGoToNext = ref(true);
+    const canGoToPrev = ref(true);
+    function calculateYearRange() {
+      const start = get(startYear);
+      set(yearRange, Array.from({ length: 12 }, (_, i) => start + i));
+    }
+    function calculateTitle() {
+      if (get(viewMode) === "months") {
+        set(title, props.viewYear.toString());
+      } else {
+        const range = get(yearRange);
+        set(title, `${range[0]} - ${range.at(-1)}`);
+      }
+    }
+    function calculateNavigation() {
+      const { maxDate, minDate } = calendarState;
+      const mode = get(viewMode);
+      if (mode === "months") {
+        const nextYear = props.viewYear + 1;
+        const previousYear = props.viewYear - 1;
+        set(canGoToNext, !isDefined(maxDate) || nextYear <= get(maxDate).getFullYear());
+        set(canGoToPrev, !isDefined(minDate) || previousYear >= get(minDate).getFullYear());
+      } else {
+        const lastYearInRange = get(startYear) + 11;
+        const firstYearInRange = get(startYear);
+        const nextRangeStart = lastYearInRange + 1;
+        set(canGoToNext, !isDefined(maxDate) || nextRangeStart <= get(maxDate).getFullYear());
+        const prevRangeEnd = firstYearInRange - 1;
+        set(canGoToPrev, !isDefined(minDate) || prevRangeEnd >= get(minDate).getFullYear());
+      }
+    }
+    function calculateMonthsInRange() {
+      const { minDate, maxDate } = calendarState;
+      const currentYear = props.viewYear;
+      const result = new Array(12).fill(true);
+      if (isDefined(minDate) || isDefined(maxDate)) {
+        for (let month = 0; month < 12; month++) {
+          const date = new Date(currentYear, month);
+          if (isDefined(maxDate) && date > get(maxDate)) {
+            result[month] = false;
+          }
+          if (isDefined(minDate) && date < get(minDate)) {
+            result[month] = false;
+          }
+        }
+      }
+      set(monthsInRange, result);
+    }
+    function calculateYearsInRange() {
+      const { minDate, maxDate } = calendarState;
+      const range = get(yearRange);
+      const currentMonth = props.viewMonth;
+      if (!isDefined(minDate) && !isDefined(maxDate)) {
+        set(yearsInRange, new Array(range.length).fill(true));
+        return;
+      }
+      const result = range.map((year) => {
+        const date = new Date(year, currentMonth);
+        if (isDefined(maxDate) && date > get(maxDate)) {
+          return false;
+        }
+        return !isDefined(minDate) || date >= get(minDate);
+      });
+      set(yearsInRange, result);
+    }
+    calculateYearRange();
+    calculateTitle();
+    calculateNavigation();
+    calculateMonthsInRange();
+    calculateYearsInRange();
+    watch(startYear, () => {
+      calculateYearRange();
+      calculateTitle();
+      calculateNavigation();
+      calculateYearsInRange();
+    });
+    watch(viewMode, () => {
+      calculateTitle();
+      calculateNavigation();
+    });
+    watch(() => props.viewYear, () => {
+      calculateTitle();
+      calculateNavigation();
+      calculateMonthsInRange();
+      calculateYearsInRange();
+    });
+    watch(() => props.viewMonth, () => {
+      calculateYearsInRange();
+    });
+    function toggleSelection() {
+      set(viewMode, get(viewMode) === "months" ? "years" : "months");
+    }
+    function selectMonth(month) {
+      if (!get(monthsInRange)[month])
+        return;
+      emit("select", { month, year: props.viewYear });
+      set(modelValue, false);
+    }
+    function selectYear(year) {
+      const yearIndex = get(yearRange).indexOf(year);
+      if (yearIndex === -1 || !get(yearsInRange)[yearIndex])
+        return;
+      emit("select", { month: props.viewMonth, year });
+      set(viewMode, "months");
+    }
+    function handleNext() {
+      if (get(viewMode) === "months") {
+        const nextYear = props.viewYear + 1;
+        selectYear(nextYear);
+      } else {
+        const lastYearInRange = get(startYear) + 11;
+        set(startYear, lastYearInRange + 1);
+      }
+    }
+    function handlePrev() {
+      if (get(viewMode) === "months") {
+        const previousYear = props.viewYear - 1;
+        selectYear(previousYear);
+      } else {
+        const firstYearInRange = get(startYear);
+        set(startYear, firstYearInRange - 12);
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(RuiMenu, {
+        modelValue: modelValue.value,
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modelValue.value = $event),
+        "anchor-el": __props.anchorEl,
+        placement: "bottom-start"
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            createElementVNode("div", _hoisted_2, [
+              createVNode(RuiButton, {
+                type: "button",
+                class: "nav-button",
+                icon: "",
+                disabled: !unref(get)(canGoToPrev.value),
+                variant: "text",
+                onClick: _cache[0] || (_cache[0] = withModifiers(($event) => handlePrev(), ["stop"]))
+              }, {
+                default: withCtx(() => [
+                  createVNode(RuiIcon, {
+                    name: "lu-chevron-left",
+                    size: "20"
+                  })
+                ]),
+                _: 1
+              }, 8, ["disabled"]),
+              createElementVNode("div", {
+                class: "flex-1 text-center cursor-pointer",
+                onClick: _cache[1] || (_cache[1] = withModifiers(($event) => toggleSelection(), ["stop"]))
+              }, toDisplayString(unref(get)(title.value)), 1),
+              createVNode(RuiButton, {
+                type: "button",
+                class: "nav-button",
+                icon: "",
+                disabled: !unref(get)(canGoToNext.value),
+                variant: "text",
+                onClick: _cache[2] || (_cache[2] = withModifiers(($event) => handleNext(), ["stop"]))
+              }, {
+                default: withCtx(() => [
+                  createVNode(RuiIcon, {
+                    name: "lu-chevron-right",
+                    size: "20"
+                  })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ]),
+            viewMode.value === "months" ? (openBlock(), createElementBlock("div", _hoisted_3, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(months), (month, index) => {
+                return openBlock(), createElementBlock("button", {
+                  key: index,
+                  type: "button",
+                  class: normalizeClass(["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", [
+                    {
+                      "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 === __props.viewMonth && unref(get)(monthsInRange.value)[index],
+                      "bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400": index === __props.viewMonth && !unref(get)(monthsInRange.value)[index],
+                      "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 !== __props.viewMonth && unref(get)(monthsInRange.value)[index],
+                      "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": !unref(get)(monthsInRange.value)[index]
+                    }
+                  ]]),
+                  disabled: !unref(get)(monthsInRange.value)[index],
+                  onClick: withModifiers(($event) => selectMonth(index), ["stop"])
+                }, toDisplayString(month.substring(0, 3)), 11, _hoisted_4);
+              }), 128))
+            ])) : viewMode.value === "years" ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(yearRange.value, (year, index) => {
+                return openBlock(), createElementBlock("button", {
+                  key: year,
+                  type: "button",
+                  class: normalizeClass(["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", [
+                    {
+                      "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 === __props.viewYear && unref(get)(yearsInRange.value)[index],
+                      "bg-gray-300 text-gray-500 dark:bg-gray-600 dark:text-gray-400": year === __props.viewYear && !unref(get)(yearsInRange.value)[index],
+                      "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 !== __props.viewYear && unref(get)(yearsInRange.value)[index],
+                      "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": !unref(get)(yearsInRange.value)[index]
+                    }
+                  ]]),
+                  disabled: !unref(get)(yearsInRange.value)[index],
+                  onClick: withModifiers(($event) => selectYear(year), ["stop"])
+                }, toDisplayString(year), 11, _hoisted_6);
+              }), 128))
+            ])) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 1
+      }, 8, ["modelValue", "anchor-el"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=RuiCalendarMenu.vue2.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,aAAaA,8BAAqB;AAExC,UAAM,QAAQ;AAMd,UAAM,OAAO;AAKb,UAAM,WAAW,IAAwB,QAAQ;AACjD,UAAM,YAAY,IAAY,MAAM,WAAW,CAAC;AAGhD,UAAM,SAAS,mBAAA;AACf,UAAM,gBAAgB,OAAyB,mBAAmB;AAGlE,UAAM,YAAY,IAAc,EAAE;AAClC,UAAM,gBAAgB,IAAe,EAAE;AACvC,UAAM,eAAe,IAAe,EAAE;AACtC,UAAM,QAAQ,IAAY,EAAE;AAC5B,UAAM,cAAc,IAAa,IAAI;AACrC,UAAM,cAAc,IAAa,IAAI;AAGrC,aAAS,qBAAqB;AAC5B,YAAM,QAAQ,IAAI,SAAS;AAC3B,UAAI,WAAW,MAAM,KAAK,EAAE,QAAQ,GAAA,GAAM,CAAC,GAAG,MAAM,QAAQ,CAAC,CAAC;AAAA,IAChE;AAEA,aAAS,iBAAiB;AACxB,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,YAAI,OAAO,MAAM,SAAS,SAAA,CAAU;AAAA,MACtC,OACK;AACH,cAAM,QAAQ,IAAI,SAAS;AAC3B,YAAI,OAAO,GAAG,MAAM,CAAC,CAAC,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE;AAAA,MAC5C;AAAA,IACF;AAEA,aAAS,sBAAsB;AAC7B,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,OAAO,IAAI,QAAQ;AAEzB,UAAI,SAAS,UAAU;AACrB,cAAM,WAAW,MAAM,WAAW;AAClC,cAAM,eAAe,MAAM,WAAW;AAEtC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,YAAY,IAAI,OAAO,EAAE,aAAa;AAC9E,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,gBAAgB,IAAI,OAAO,EAAE,aAAa;AAAA,MACpF,OACK;AACH,cAAM,kBAAkB,IAAI,SAAS,IAAI;AACzC,cAAM,mBAAmB,IAAI,SAAS;AAGtC,cAAM,iBAAiB,kBAAkB;AACzC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,kBAAkB,IAAI,OAAO,EAAE,aAAa;AAGpF,cAAM,eAAe,mBAAmB;AACxC,YAAI,aAAa,CAAC,UAAU,OAAO,KAAK,gBAAgB,IAAI,OAAO,EAAE,aAAa;AAAA,MACpF;AAAA,IACF;AAEA,aAAS,yBAAyB;AAChC,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,cAAc,MAAM;AAC1B,YAAM,SAAS,IAAI,MAAM,EAAE,EAAE,KAAK,IAAI;AAEtC,UAAI,UAAU,OAAO,KAAK,UAAU,OAAO,GAAG;AAC5C,iBAAS,QAAQ,GAAG,QAAQ,IAAI,SAAS;AACvC,gBAAM,OAAO,IAAI,KAAK,aAAa,KAAK;AACxC,cAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,mBAAO,KAAK,IAAI;AAAA,UAClB;AACA,cAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,mBAAO,KAAK,IAAI;AAAA,UAClB;AAAA,QACF;AAAA,MACF;AAEA,UAAI,eAAe,MAAM;AAAA,IAC3B;AAEA,aAAS,wBAAwB;AAC/B,YAAM,EAAE,SAAS,QAAA,IAAY;AAC7B,YAAM,QAAQ,IAAI,SAAS;AAC3B,YAAM,eAAe,MAAM;AAE3B,UAAI,CAAC,UAAU,OAAO,KAAK,CAAC,UAAU,OAAO,GAAG;AAC9C,YAAI,cAAc,IAAI,MAAM,MAAM,MAAM,EAAE,KAAK,IAAI,CAAC;AACpD;AAAA,MACF;AAEA,YAAM,SAAS,MAAM,IAAI,CAAC,SAAS;AACjC,cAAM,OAAO,IAAI,KAAK,MAAM,YAAY;AACxC,YAAI,UAAU,OAAO,KAAK,OAAO,IAAI,OAAO,GAAG;AAC7C,iBAAO;AAAA,QACT;AACA,eAAO,CAAC,UAAU,OAAO,KAAK,QAAQ,IAAI,OAAO;AAAA,MACnD,CAAC;AAED,UAAI,cAAc,MAAM;AAAA,IAC1B;AAGA,uBAAA;AACA,mBAAA;AACA,wBAAA;AACA,2BAAA;AACA,0BAAA;AAGA,UAAM,WAAW,MAAM;AACrB,yBAAA;AACA,qBAAA;AACA,0BAAA;AACA,4BAAA;AAAA,IACF,CAAC;AAED,UAAM,UAAU,MAAM;AACpB,qBAAA;AACA,0BAAA;AAAA,IACF,CAAC;AAED,UAAM,MAAM,MAAM,UAAU,MAAM;AAChC,qBAAA;AACA,0BAAA;AACA,6BAAA;AACA,4BAAA;AAAA,IACF,CAAC;AAED,UAAM,MAAM,MAAM,WAAW,MAAM;AACjC,4BAAA;AAAA,IACF,CAAC;AAED,aAAS,kBAAkB;AACzB,UAAI,UAAU,IAAI,QAAQ,MAAM,WAAW,UAAU,QAAQ;AAAA,IAC/D;AAEA,aAAS,YAAY,OAAe;AAClC,UAAI,CAAC,IAAI,aAAa,EAAE,KAAK;AAC3B;AACF,WAAK,UAAU,EAAE,OAAO,MAAM,MAAM,UAAU;AAC9C,UAAI,YAAY,KAAK;AAAA,IACvB;AAEA,aAAS,WAAW,MAAc;AAChC,YAAM,YAAY,IAAI,SAAS,EAAE,QAAQ,IAAI;AAC7C,UAAI,cAAc,MAAM,CAAC,IAAI,YAAY,EAAE,SAAS;AAClD;AAEF,WAAK,UAAU,EAAE,OAAO,MAAM,WAAW,MAAM;AAC/C,UAAI,UAAU,QAAQ;AAAA,IACxB;AAEA,aAAS,aAAa;AACpB,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,cAAM,WAAW,MAAM,WAAW;AAClC,mBAAW,QAAQ;AAAA,MACrB,OACK;AACH,cAAM,kBAAkB,IAAI,SAAS,IAAI;AACzC,YAAI,WAAW,kBAAkB,CAAC;AAAA,MACpC;AAAA,IACF;AAEA,aAAS,aAAa;AACpB,UAAI,IAAI,QAAQ,MAAM,UAAU;AAC9B,cAAM,eAAe,MAAM,WAAW;AACtC,mBAAW,YAAY;AAAA,MACzB,OACK;AACH,cAAM,mBAAmB,IAAI,SAAS;AACtC,YAAI,WAAW,mBAAmB,EAAE;AAAA,MACtC;AAAA,IACF;;0BAIEC,YA2FU,SAAA;AAAA,oBA1FC,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QAClB,aAAW,QAAA;AAAA,QACZ,WAAU;AAAA,MAAA;yBAEV,MAqFM;AAAA,UArFNC,mBAqFM,OArFN,YAqFM;AAAA,YApFJA,mBAmCM,OAnCN,YAmCM;AAAA,cAlCJC,YAYY,WAAA;AAAA,gBAXV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,MAAA;AAAA,gBACC,UAAQ,CAAGC,MAAA,GAAA,EAAI,YAAA,KAAW;AAAA,gBAC3B,SAAQ;AAAA,gBACP,6DAAY,cAAU,CAAA,MAAA,CAAA;AAAA,cAAA;iCAEvB,MAGE;AAAA,kBAHFD,YAGE,SAAA;AAAA,oBAFA,MAAK;AAAA,oBACL,MAAK;AAAA,kBAAA;;;;cAITD,mBAKM,OAAA;AAAA,gBAJJ,OAAM;AAAA,gBACL,6DAAY,mBAAe,CAAA,MAAA,CAAA;AAAA,cAAA,GAEzBG,gBAAAD,MAAA,GAAA,EAAI,MAAA,KAAK,CAAA,GAAA,CAAA;AAAA,cAGdD,YAYY,WAAA;AAAA,gBAXV,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,MAAA;AAAA,gBACC,UAAQ,CAAGC,MAAA,GAAA,EAAI,YAAA,KAAW;AAAA,gBAC3B,SAAQ;AAAA,gBACP,6DAAY,cAAU,CAAA,MAAA,CAAA;AAAA,cAAA;iCAEvB,MAGE;AAAA,kBAHFD,YAGE,SAAA;AAAA,oBAFA,MAAK;AAAA,oBACL,MAAK;AAAA,kBAAA;;;;;YAMH,SAAA,UAAQ,YADhBG,aAAAC,mBAsBM,OAtBN,YAsBM;AAAA,eAlBJD,UAAA,IAAA,GAAAC,mBAiBSC,UAAA,MAAAC,WAhBkBL,MAAA,MAAA,GAAM,CAAvB,OAAO,UAAK;oCADtBG,mBAiBS,UAAA;AAAA,kBAfN,KAAK;AAAA,kBACN,MAAK;AAAA,kBACL,uBAAM,2NAAyN;AAAA;sBAC9B,2JAAA,UAAU,QAAA,aAAaH,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,sBAAkF,iEAAA,UAAU,QAAA,aAAS,CAAKA,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,sBAAwJ,uIAAA,UAAU,QAAA,aAAaA,WAAI,cAAA,KAAa,EAAE,KAAK;AAAA,4NAAuNA,MAAA,GAAA,EAAI,cAAA,KAAa,EAAE,KAAK;AAAA,oBAAA;AAAA;kBAQvyB,UAAQ,CAAGA,MAAA,GAAA,EAAI,cAAA,KAAa,EAAE,KAAK;AAAA,kBACnC,SAAKM,cAAA,CAAA,WAAO,YAAY,KAAK,GAAA,CAAA,MAAA,CAAA;AAAA,gBAAA,GAE3BL,gBAAA,MAAM,UAAS,GAAA,CAAA,CAAA,GAAA,IAAA,UAAA;AAAA;kBAKT,SAAA,UAAQ,WADrBC,UAAA,GAAAC,mBAsBM,OAtBN,YAsBM;AAAA,eAlBJD,UAAA,IAAA,GAAAC,mBAiBSC,UAAA,MAAAC,WAhBiB,UAAA,OAAS,CAAzB,MAAM,UAAK;oCADrBF,mBAiBS,UAAA;AAAA,kBAfN,KAAK;AAAA,kBACN,MAAK;AAAA,kBACL,uBAAM,2NAAyN;AAAA;sBAC9B,2JAAA,SAAS,QAAA,YAAYH,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,sBAAkF,iEAAA,SAAS,QAAA,YAAQ,CAAKA,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,sBAAwJ,uIAAA,SAAS,QAAA,YAAYA,WAAI,aAAA,KAAY,EAAE,KAAK;AAAA,4NAAuNA,MAAA,GAAA,EAAI,aAAA,KAAY,EAAE,KAAK;AAAA,oBAAA;AAAA;kBAQ7xB,UAAQ,CAAGA,MAAA,GAAA,EAAI,aAAA,KAAY,EAAE,KAAK;AAAA,kBAClC,SAAKM,cAAA,CAAA,WAAO,WAAW,IAAI,GAAA,CAAA,MAAA,CAAA;AAAA,gBAAA,mBAEzB,IAAI,GAAA,IAAA,UAAA;AAAA;;;;;;;;;"}