@rotki/ui-library 2.12.2 → 2.13.0

package/dist/components/buttons/button-group/RuiButtonGroup.vue2.js

@@ -1,38 +1,32 @@
-import { defineComponent, useSlots, toRefs, computed, useCssModule, openBlock, createElementBlock, mergeProps, unref, Fragment, renderList, createBlock, resolveDynamicComponent, normalizeClass, isVNode } from "vue";
-import { get } from "@vueuse/shared";
+import { defineComponent, useModel, useSlots, useCssModule, computed, Fragment, isVNode, openBlock, createElementBlock, mergeProps, unref, renderList, createBlock, resolveDynamicComponent, normalizeClass, mergeModels } from "vue";
+import { get, set } from "@vueuse/shared";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "RuiButtonGroup",
     inheritAttrs: false
   },
   __name: "RuiButtonGroup",
-  props: {
+  props: /* @__PURE__ */ mergeModels({
     vertical: { type: Boolean, default: false },
-    color: { default: void 0 },
-    activeColor: { default: void 0 },
+    color: {},
+    activeColor: {},
     variant: { default: "default" },
-    size: { default: void 0 },
-    gap: { default: void 0 },
+    size: {},
+    gap: {},
     required: { type: Boolean, default: false },
-    modelValue: { default: void 0 },
     disabled: { type: Boolean, default: false }
-  },
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
   emits: ["update:modelValue"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
+  setup(__props) {
+    const modelValue = useModel(__props, "modelValue");
     const slots = useSlots();
-    const { modelValue, required, disabled, color, variant, size } = toRefs(props);
-    function getChildren(children2) {
-      return children2.flatMap((item) => {
-        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
-          return getChildren(item.children.filter(isVNode));
-        return [item];
-      }).flat();
-    }
+    const css = useCssModule();
+    const colorClass = computed(() => __props.color ? css[__props.color] : void 0);
+    const variantClass = computed(() => __props.variant ? css[__props.variant] : void 0);
     const children = computed(() => {
-      const isDisabled = get(disabled);
-      const rootColor = get(color);
       const selectedValue = get(modelValue);
       const slotContent = slots.default?.() ?? [];
       const children2 = getChildren(slotContent);
@@ -42,15 +36,22 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ...child.props,
           active: activeItem(value ?? i, selectedValue)
         };
-        if (isDisabled)
+        if (__props.disabled)
           child.props.disabled = true;
-        if (rootColor)
-          child.props.color = rootColor;
-        if (child.props.active && props.activeColor)
-          child.props.color = props.activeColor;
+        if (__props.color)
+          child.props.color = __props.color;
+        if (child.props.active && __props.activeColor)
+          child.props.color = __props.activeColor;
         return child;
       });
     });
+    function getChildren(children2) {
+      return children2.flatMap((item) => {
+        if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)
+          return getChildren(item.children.filter(isVNode));
+        return [item];
+      }).flat();
+    }
     function activeItem(id, selected) {
       if (Array.isArray(selected))
         return selected.includes(id);
@@ -58,27 +59,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function onClick(id) {
       const selected = get(modelValue);
-      const mandatory = get(required);
+      const mandatory = __props.required;
       if (Array.isArray(selected)) {
         const index = selected.indexOf(id);
         if (index >= 0) {
-          if (!mandatory || selected.length !== 1)
-            selected.splice(index, 1);
+          if (!mandatory || selected.length !== 1) {
+            set(
+              modelValue,
+              selected.filter((_, i) => i !== index)
+            );
+          } else {
+            set(modelValue, [...selected]);
+          }
         } else {
-          selected.push(id);
+          set(modelValue, [...selected, id]);
         }
-        emit("update:modelValue", selected);
       } else if (mandatory) {
-        emit("update:modelValue", id);
+        set(modelValue, id);
       } else {
-        emit("update:modelValue", activeItem(id, selected) ? void 0 : id);
+        set(modelValue, activeItem(id, selected) ? void 0 : id);
       }
     }
-    const css = useCssModule();
-    const colorClass = computed(() => props.color ? css[props.color] : void 0);
-    const variantClass = computed(
-      () => props.variant ? css[props.variant] : void 0
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", mergeProps({
         class: [
@@ -97,8 +98,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return openBlock(), createBlock(resolveDynamicComponent(child), {
             key: i,
             class: normalizeClass(unref(css).button),
-            size: unref(size),
-            variant: unref(variant),
+            size: __props.size,
+            variant: __props.variant,
             "onUpdate:modelValue": ($event) => onClick($event ?? i)
           }, null, 8, ["class", "size", "variant", "onUpdate:modelValue"]);
         }), 128))

package/dist/components/buttons/button-group/RuiButtonGroup.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiButtonGroup.vue2.js","sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\n\nexport interface Props<T = undefined> {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: 'sm' | 'lg';\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  modelValue?: T | T[];\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(defineProps<Props<T>>(), {\n  vertical: false,\n  color: undefined,\n  activeColor: undefined,\n  variant: 'default',\n  size: undefined,\n  gap: undefined,\n  required: false,\n  modelValue: undefined,\n  disabled: false,\n});\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', modelValue?: T | T[]): void;\n}>();\n\nconst slots = useSlots();\nconst { modelValue, required, disabled, color, variant, size } = toRefs(props);\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiButton only\nfunction getChildren(children: VNode[]): VNode[] {\n  return children.flatMap((item) => {\n    if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n      return getChildren(item.children.filter(isVNode));\n\n    return [item];\n  }).flat();\n}\n\nconst children = computed(() => {\n  // if group is disabled, disable child buttons\n  const isDisabled = get(disabled);\n  const rootColor = get(color);\n  const selectedValue: T | T[] | undefined = get(modelValue);\n\n  const slotContent = slots.default?.() ?? [];\n\n  // When using dynamic content with v-for the slot content is a single fragment\n  // containing the children components.\n  const children = getChildren(slotContent);\n\n  return children.map((child, i) => {\n    // child props are in kebab-case it seems\n    const value = child.props?.['model-value'];\n\n    child.props = {\n      ...child.props,\n      active: activeItem(value ?? i, selectedValue),\n    };\n\n    if (isDisabled)\n      child.props.disabled = true;\n\n    // if given root color, use it\n    if (rootColor)\n      child.props.color = rootColor;\n\n    if (child.props.active && props.activeColor)\n      child.props.color = props.activeColor;\n\n    return child;\n  });\n});\n\nfunction activeItem(id: T, selected?: T | T[]) {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T) {\n  const selected = get(modelValue);\n  const mandatory = get(required);\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (!mandatory || selected.length !== 1)\n        selected.splice(index, 1);\n    }\n    else {\n      selected.push(id);\n    }\n    emit('update:modelValue', selected);\n  }\n  else if (mandatory) {\n    emit('update:modelValue', id);\n  }\n  else {\n    emit('update:modelValue', activeItem(id, selected) ? undefined : id);\n  }\n}\n\nconst css = useCssModule();\nconst colorClass = computed(() => (props.color ? css[props.color] : undefined));\nconst variantClass = computed(() =>\n  props.variant ? css[props.variant] : undefined,\n);\n</script>\n\n<template>\n  <div\n    :class=\"[\n      css.wrapper,\n      colorClass,\n      variantClass,\n      {\n        [css.wrapper__vertical ?? '']: vertical,\n        [css.wrapper__horizontal ?? '']: !vertical,\n        [css.separated ?? '']: !!gap,\n        [css[`separated__${gap}`] ?? '']: !!gap,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"css.button\"\n      :size=\"size\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply inline-flex rounded divide-x divide-rui-grey-400;\n  @apply outline outline-1 outline-transparent outline-offset-[-1px];\n\n  &:not(.separated) {\n    .button {\n      @apply rounded-none;\n    }\n  }\n\n  &__vertical {\n    @apply inline-flex flex-col items-start divide-x-0 divide-y;\n\n    .button {\n      @apply w-full;\n    }\n\n    &:not(.separated) .button {\n      &:first-child {\n        @apply rounded-t;\n      }\n\n      &:last-child {\n        @apply rounded-b;\n      }\n    }\n  }\n\n  &__horizontal {\n    &:not(.separated) .button {\n      &:first-child {\n        @apply rounded-l;\n      }\n\n      &:last-child {\n        @apply rounded-r;\n      }\n    }\n  }\n\n  &.separated {\n    @apply divide-x-0 divide-y-0 outline-0;\n    &__sm {\n      @apply gap-2;\n    }\n\n    &__md {\n      @apply gap-4;\n    }\n\n    &__lg {\n      @apply gap-6;\n    }\n\n    .button {\n      @apply outline-1;\n    }\n  }\n\n  .button {\n    @apply border-0 outline-0;\n\n    &:focus {\n      @apply z-[1];\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply divide-rui-#{$color}-darker;\n\n      &.outlined,\n      &.text {\n        @apply divide-rui-#{$color}/[0.5];\n      }\n\n      &.outlined {\n        @apply outline-rui-#{$color}/[0.5];\n      }\n    }\n  }\n\n  &.outlined {\n    @apply outline-rui-text divide-rui-text;\n  }\n}\n</style>\n"],"names":["children","_openBlock","_createElementBlock","_mergeProps","_unref","$attrs","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_normalizeClass"],"mappings":"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"}
+{"version":3,"file":"RuiButtonGroup.vue2.js","sources":["../../../../src/components/buttons/button-group/RuiButtonGroup.vue"],"sourcesContent":["<script lang=\"ts\" generic=\"T = undefined\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport { Fragment, isVNode } from 'vue';\n\nexport interface Props {\n  vertical?: boolean;\n  color?: ContextColorsType;\n  activeColor?: ContextColorsType;\n  variant?: 'default' | 'outlined' | 'text';\n  size?: 'sm' | 'lg';\n  gap?: 'sm' | 'md' | 'lg';\n  required?: boolean;\n  disabled?: boolean;\n}\n\ndefineOptions({\n  name: 'RuiButtonGroup',\n  inheritAttrs: false,\n});\n\nconst modelValue = defineModel<T | T[]>();\n\nconst {\n  vertical = false,\n  color,\n  activeColor,\n  variant = 'default',\n  size,\n  gap,\n  required = false,\n  disabled = false,\n} = defineProps<Props>();\n\nconst slots = useSlots();\nconst css = useCssModule();\n\nconst colorClass = computed<string | undefined>(() => (color ? css[color] : undefined));\nconst variantClass = computed<string | undefined>(() => (variant ? css[variant] : undefined));\n\nconst children = computed<VNode[]>(() => {\n  // if group is disabled, disable child buttons\n  const selectedValue: T | T[] | undefined = get(modelValue);\n\n  const slotContent = slots.default?.() ?? [];\n\n  // When using dynamic content with v-for the slot content is a single fragment\n  // containing the children components.\n  const children = getChildren(slotContent);\n\n  return children.map((child, i) => {\n    // child props are in kebab-case it seems\n    const value = child.props?.['model-value'];\n\n    child.props = {\n      ...child.props,\n      active: activeItem(value ?? i, selectedValue),\n    };\n\n    if (disabled)\n      child.props.disabled = true;\n\n    // if given root color, use it\n    if (color)\n      child.props.color = color;\n\n    if (child.props.active && activeColor)\n      child.props.color = activeColor;\n\n    return child;\n  });\n});\n\n// When using dynamic content with v-for the slot content can contain fragment,\n// Go through the fragment and always return RuiButton only\nfunction getChildren(children: VNode[]): VNode[] {\n  return children\n    .flatMap((item) => {\n      if (item.type === Fragment && Array.isArray(item.children) && item.children.length > 0)\n        return getChildren(item.children.filter(isVNode));\n\n      return [item];\n    })\n    .flat();\n}\n\nfunction activeItem(id: T, selected?: T | T[]): boolean {\n  if (Array.isArray(selected))\n    return selected.includes(id);\n\n  return selected === id;\n}\n\nfunction onClick(id: T): void {\n  const selected = get(modelValue);\n  const mandatory = required;\n  if (Array.isArray(selected)) {\n    const index = selected.indexOf(id);\n    if (index >= 0) {\n      if (!mandatory || selected.length !== 1) {\n        set(\n          modelValue,\n          selected.filter((_, i) => i !== index),\n        );\n      }\n      else {\n        set(modelValue, [...selected]);\n      }\n    }\n    else {\n      set(modelValue, [...selected, id]);\n    }\n  }\n  else if (mandatory) {\n    set(modelValue, id);\n  }\n  else {\n    set(modelValue, activeItem(id, selected) ? undefined : id);\n  }\n}\n</script>\n\n<template>\n  <div\n    :class=\"[\n      css.wrapper,\n      colorClass,\n      variantClass,\n      {\n        [css.wrapper__vertical ?? '']: vertical,\n        [css.wrapper__horizontal ?? '']: !vertical,\n        [css.separated ?? '']: !!gap,\n        [css[`separated__${gap}`] ?? '']: !!gap,\n      },\n    ]\"\n    v-bind=\"$attrs\"\n  >\n    <Component\n      :is=\"child\"\n      v-for=\"(child, i) in children\"\n      :key=\"i\"\n      :class=\"css.button\"\n      :size=\"size\"\n      :variant=\"variant\"\n      @update:model-value=\"onClick($event ?? i)\"\n    />\n  </div>\n</template>\n\n<style lang=\"scss\" module>\n@use '@/styles/colors.scss' as c;\n\n.wrapper {\n  @apply inline-flex rounded divide-x divide-rui-grey-400;\n  @apply outline outline-1 outline-transparent outline-offset-[-1px];\n\n  &:not(.separated) {\n    .button {\n      @apply rounded-none;\n    }\n  }\n\n  &__vertical {\n    @apply inline-flex flex-col items-start divide-x-0 divide-y;\n\n    .button {\n      @apply w-full;\n    }\n\n    &:not(.separated) .button {\n      &:first-child {\n        @apply rounded-t;\n      }\n\n      &:last-child {\n        @apply rounded-b;\n      }\n    }\n  }\n\n  &__horizontal {\n    &:not(.separated) .button {\n      &:first-child {\n        @apply rounded-l;\n      }\n\n      &:last-child {\n        @apply rounded-r;\n      }\n    }\n  }\n\n  &.separated {\n    @apply divide-x-0 divide-y-0 outline-0;\n    &__sm {\n      @apply gap-2;\n    }\n\n    &__md {\n      @apply gap-4;\n    }\n\n    &__lg {\n      @apply gap-6;\n    }\n\n    .button {\n      @apply outline-1;\n    }\n  }\n\n  .button {\n    @apply border-0 outline-0;\n\n    &:focus {\n      @apply z-[1];\n    }\n  }\n\n  @each $color in c.$context-colors {\n    &.#{$color} {\n      @apply divide-rui-#{$color}-darker;\n\n      &.outlined,\n      &.text {\n        @apply divide-rui-#{$color}/[0.5];\n      }\n\n      &.outlined {\n        @apply outline-rui-#{$color}/[0.5];\n      }\n    }\n  }\n\n  &.outlined {\n    @apply outline-rui-text divide-rui-text;\n  }\n}\n</style>\n"],"names":["_useModel","children","_openBlock","_createElementBlock","_mergeProps","_unref","$attrs","_Fragment","_renderList","_createBlock","_resolveDynamicComponent","_normalizeClass"],"mappings":"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"}

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

@@ -25,11 +25,6 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     "onUpdate:pages"?: ((args_0: {
         title: string;
     }[]) => any) | undefined;
-}>, {
-    maxDate: Date | number;
-    minDate: Date | number;
-    allowEmpty: boolean;
-    borderless: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,8 +11,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   __name: "RuiCalendar",
   props: /* @__PURE__ */ mergeModels({
-    maxDate: { default: void 0 },
-    minDate: { default: void 0 },
+    maxDate: {},
+    minDate: {},
     allowEmpty: { type: Boolean, default: false },
     borderless: { type: Boolean, default: false }
   }, {
@@ -25,7 +25,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { expose: __expose, emit: __emit }) {
     const model = useModel(__props, "modelValue");
     const isMenuOpen = useModel(__props, "menu-open");
-    const props = __props;
     const emit = __emit;
     const currentDate = ref(isDefined(model) ? new Date(get(model)) : /* @__PURE__ */ new Date());
     const selectedDate = ref(isDefined(model) ? new Date(get(model)) : void 0);
@@ -40,10 +39,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       viewMonth,
       viewYear,
       selectedDate,
-      maxDate: computed(() => props.maxDate ? new Date(props.maxDate) : void 0),
-      minDate: computed(() => props.minDate ? new Date(props.minDate) : void 0),
+      maxDate: computed(() => __props.maxDate ? new Date(__props.maxDate) : void 0),
+      minDate: computed(() => __props.minDate ? new Date(__props.minDate) : void 0),
       isDark,
-      allowEmpty: props.allowEmpty
+      allowEmpty: __props.allowEmpty
     });
     function moveMonth(delta) {
       let newMonth = get(viewMonth) + delta;
@@ -81,7 +80,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     watch([selectedDate], ([date]) => {
-      if (!date && !props.allowEmpty)
+      if (!date && !__props.allowEmpty)
         return;
       if (date) {
         set(model, new Date(date));

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  // 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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"}
+{"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 { maxDate, minDate, allowEmpty = false, borderless = false } = defineProps<CalendarProps>();\n\nconst emit = defineEmits<{\n  'update:pages': [{ title: string }[]];\n}>();\n\nconst currentDate = ref<Date>(isDefined(model) ? new Date(get(model)) : new Date());\nconst selectedDate = ref<Date | undefined>(isDefined(model) ? new Date(get(model)) : undefined);\nconst viewMonth = ref<number>(get(currentDate).getMonth());\nconst viewYear = ref<number>(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(() => (maxDate ? new Date(maxDate) : undefined)),\n  minDate: computed(() => (minDate ? new Date(minDate) : undefined)),\n  isDark,\n  allowEmpty,\n} satisfies RuiCalendarState);\n\nfunction moveMonth(delta: number): void {\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): void {\n  const newDate = new Date(date);\n  set(viewMonth, newDate.getMonth());\n  set(viewYear, newDate.getFullYear());\n}\n\nfunction selectMonth(selection: MonthYearSelection): void {\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 && !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/RuiCalendarGrid.vue.js

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

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

@@ -21,7 +21,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   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")}`;
@@ -43,8 +42,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       };
     }
     function calculateCalendarDays() {
-      const firstDayOfMonth = new Date(props.viewYear, props.viewMonth, 1);
-      const lastDayOfMonth = new Date(props.viewYear, props.viewMonth + 1, 0);
+      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;
@@ -53,20 +52,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const minDateValue = isDefined(minDate) ? get(minDate) : null;
       const result = [];
       if (startingDayOfWeek > 0) {
-        const prevMonthLastDay = new Date(props.viewYear, props.viewMonth, 0).getDate();
+        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);
+          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);
+        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);
+        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);
@@ -81,16 +80,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     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;
@@ -109,6 +98,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       set(model, updateModel);
     }
+    calculateCalendarDays();
+    watch([() => __props.viewMonth, () => __props.viewYear], () => {
+      calculateCalendarDays();
+    });
+    watch(model, () => {
+      calculateCalendarDays();
+    });
+    watch(
+      [() => calendarState.maxDate, () => calendarState.minDate],
+      () => {
+        calculateCalendarDays();
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
         createElementVNode("div", _hoisted_2, [

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

@@ -1 +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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"}
+{"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 {\n  CalendarStateSymbol,\n  getDaysOfWeek,\n  type RuiCalendarState,\n} from '@/components/calendar/state';\n\ndefineOptions({\n  name: 'RuiCalendarGrid',\n  inheritAttrs: false,\n});\n\nconst model = defineModel<Date | undefined>();\n\nconst { viewMonth, viewYear } = 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<\n  Array<{\n    date: Date;\n    isCurrentMonth: boolean;\n    isInRange: boolean;\n    isSelected: boolean;\n    isToday: boolean;\n    key: string;\n    dayNumber: number;\n  }>\n>([]);\n\nfunction createDayData(\n  date: Date,\n  isCurrentMonth: boolean,\n  modelValue: Date | null | undefined,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): {\n  date: Date;\n  isCurrentMonth: boolean;\n  isInRange: boolean;\n  isSelected: boolean;\n  isToday: boolean;\n  key: string;\n  dayNumber: number;\n} {\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(): void {\n  const firstDayOfMonth = new Date(viewYear, viewMonth, 1);\n  const lastDayOfMonth = new Date(viewYear, 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(viewYear, viewMonth, 0).getDate();\n    for (let i = startingDayOfWeek - 1; i >= 0; i--) {\n      const date = new Date(viewYear, 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(viewYear, 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(viewYear, 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(\n  date: Date,\n  maxDateValue: Date | null,\n  minDateValue: Date | null,\n): 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 (\n    date.getFullYear() === modelValue.getFullYear() &&\n    date.getMonth() === modelValue.getMonth() &&\n    date.getDate() === modelValue.getDate()\n  );\n}\n\nfunction selectDate(dayData: { date: Date; isInRange: boolean; isSelected: boolean }): void {\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\n// Initial calculation\ncalculateCalendarDays();\n\n// Watchers for recalculation only when needed\nwatch([() => viewMonth, () => viewYear], () => {\n  calculateCalendarDays();\n});\n\nwatch(model, () => {\n  calculateCalendarDays();\n});\n\nwatch(\n  [() => calendarState.maxDate, () => calendarState.minDate],\n  () => {\n    calculateCalendarDays();\n  },\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':\n              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':\n              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.js

@@ -1,7 +1,7 @@
 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"]]);
+const RuiCalendarHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a104415a"]]);
 export {
   RuiCalendarHeader as default
 };

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

@@ -22,7 +22,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   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);
@@ -31,7 +30,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!isDefined(maxDate)) {
         return true;
       }
-      const date = new Date(props.viewYear, props.viewMonth);
+      const date = new Date(__props.viewYear, __props.viewMonth);
       return date.getTime() < get(maxDate).getTime();
     });
     const canGoToPrev = computed(() => {
@@ -39,7 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!isDefined(minDate)) {
         return true;
       }
-      const date = new Date(props.viewYear, props.viewMonth);
+      const date = new Date(__props.viewYear, __props.viewMonth);
       return date.getTime() > get(minDate).getTime();
     });
     function handleTitleClick(e) {

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

@@ -1 +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;;;;;;;;"}
+{"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 {\n  CalendarStateSymbol,\n  type MonthYearSelection,\n  type RuiCalendarState,\n} 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 { viewMonth, viewYear } = 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(viewYear, 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(viewYear, viewMonth);\n  return date.getTime() > get(minDate).getTime();\n});\n\nfunction handleTitleClick(e: Event): void {\n  set(anchorEl, (e.currentTarget as HTMLElement) ?? undefined);\n  set(isMenuOpen, true);\n}\n\nfunction handleDateSelection(selection: MonthYearSelection): void {\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":";;;;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,aAAaA,kBAAqB,WAA+B;AAQvE,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,QAAA,UAAU,QAAA,SAAS;AACzC,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,QAAA,UAAU,QAAA,SAAS;AACzC,aAAO,KAAK,QAAA,IAAY,IAAI,OAAO,EAAE,QAAA;AAAA,IACvC,CAAC;AAED,aAAS,iBAAiB,GAAgB;AACxC,UAAI,UAAW,EAAE,iBAAiC,MAAS;AAC3D,UAAI,YAAY,IAAI;AAAA,IACtB;AAEA,aAAS,oBAAoB,WAAqC;AAChE,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.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-b1a30957"]]);
+const RuiCalendarMenu = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-764fe061"]]);
 export {
   RuiCalendarMenu as default
 };