feat(Calendar): pass calendar instance instead of creating it with cr…

…eateCalendar
unovue · Mar 4, 2025 · 98438ab · 98438ab
1 parent 288c9d1
commit 98438ab
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 11 deletions.
diff --git a/packages/core/src/Calendar/CalendarRoot.vue b/packages/core/src/Calendar/CalendarRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type DateValue, isEqualDay, isSameDay } from '@internationalized/date'
+import { type Calendar, type DateValue, GregorianCalendar, isEqualDay, isSameDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -85,6 +85,7 @@ interface BaseCalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
+  calendar?: Calendar
 }
 
 export interface MultipleCalendarRootProps extends BaseCalendarRootProps {
@@ -135,6 +136,7 @@ const props = withDefaults(defineProps<CalendarRootProps>(), {
   placeholder: undefined,
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<CalendarRootEmits>()
 defineSlots<{
@@ -193,6 +195,7 @@ const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
   defaultValue: modelValue.value,
   locale: props.locale,
+  calendar: props.calendar,
 })
 
 const placeholder = useVModel(props, 'placeholder', emits, {

diff --git a/packages/core/src/DateField/DateFieldRoot.vue b/packages/core/src/DateField/DateFieldRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { DateValue } from '@internationalized/date'
+import { type Calendar, type DateValue, GregorianCalendar } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -63,6 +63,7 @@ export interface DateFieldRootProps extends PrimitiveProps, FormFieldProps {
   id?: string
   /** The reading direction of the date field when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
   dir?: Direction
+  calendar?: Calendar
 }
 
 export type DateFieldRootEmits = {
@@ -92,6 +93,7 @@ const props = withDefaults(defineProps<DateFieldRootProps>(), {
   readonly: false,
   placeholder: undefined,
   isDateUnavailable: undefined,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<DateFieldRootEmits>()
 defineSlots<{
@@ -128,6 +130,7 @@ const defaultDate = getDefaultDate({
   granularity: granularity.value,
   defaultValue: modelValue.value,
   locale: props.locale,
+  calendar: props.calendar,
 })
 
 const placeholder = useVModel(props, 'placeholder', emits, {

diff --git a/packages/core/src/DatePicker/DatePickerRoot.vue b/packages/core/src/DatePicker/DatePickerRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { DateValue } from '@internationalized/date'
+import { type DateValue, GregorianCalendar } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import { computed, ref, toRefs, watch } from 'vue'
@@ -77,6 +77,7 @@ const props = withDefaults(defineProps<DatePickerRootProps>(), {
   locale: 'en',
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>()
 const {
@@ -117,6 +118,7 @@ const defaultDate = computed(() => getDefaultDate({
   granularity: props.granularity,
   defaultValue: modelValue.value,
   locale: props.locale,
+  calendar: props.calendar,
 }))
 
 const placeholder = useVModel(props, 'placeholder', emits, {

diff --git a/packages/core/src/DateRangeField/DateRangeFieldRoot.vue b/packages/core/src/DateRangeField/DateRangeFieldRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { DateValue } from '@internationalized/date'
+import { type Calendar, type DateValue, GregorianCalendar } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -77,6 +77,7 @@ export interface DateRangeFieldRootProps extends PrimitiveProps, FormFieldProps
   id?: string
   /** The reading direction of the date field when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
   dir?: Direction
+  calendar?: Calendar
 }
 
 export type DateRangeFieldRootEmits = {
@@ -106,6 +107,7 @@ const props = withDefaults(defineProps<DateRangeFieldRootProps>(), {
   readonly: false,
   placeholder: undefined,
   isDateUnavailable: undefined,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<DateRangeFieldRootEmits>()
 const { disabled, readonly, isDateUnavailable: propsIsDateUnavailable, dir: propDir, locale: propLocale } = toRefs(props)
@@ -131,6 +133,7 @@ const defaultDate = getDefaultDate({
   granularity: props.granularity,
   defaultValue: modelValue.value?.start,
   locale: props.locale,
+  calendar: props.calendar,
 })
 
 const placeholder = useVModel(props, 'placeholder', emits, {

diff --git a/packages/core/src/DateRangePicker/DateRangePickerRoot.vue b/packages/core/src/DateRangePicker/DateRangePickerRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { DateValue } from '@internationalized/date'
+import { type DateValue, GregorianCalendar } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import { createContext, useDirection } from '@/shared'
@@ -83,6 +83,7 @@ const props = withDefaults(defineProps<DateRangePickerRootProps>(), {
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   allowNonContiguousRanges: false,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<DateRangePickerRootEmits & PopoverRootEmits>()
 const {
@@ -123,6 +124,7 @@ const defaultDate = getDefaultDate({
   granularity: props.granularity,
   defaultValue: modelValue.value?.start,
   locale: props.locale,
+  calendar: props.calendar,
 })
 
 const placeholder = useVModel(props, 'placeholder', emits, {

diff --git a/packages/core/src/RangeCalendar/RangeCalendarRoot.vue b/packages/core/src/RangeCalendar/RangeCalendarRoot.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type DateValue, isEqualDay } from '@internationalized/date'
+import { type Calendar, type DateValue, GregorianCalendar, isEqualDay } from '@internationalized/date'
 
 import type { Ref } from 'vue'
 import type { PrimitiveProps } from '@/Primitive'
@@ -97,6 +97,7 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   nextPage?: (placeholder: DateValue) => DateValue
   /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
   prevPage?: (placeholder: DateValue) => DateValue
+  calendar?: Calendar
 }
 
 export type RangeCalendarRootEmits = {
@@ -133,6 +134,7 @@ const props = withDefaults(defineProps<RangeCalendarRootProps>(), {
   isDateDisabled: undefined,
   isDateUnavailable: undefined,
   allowNonContiguousRanges: false,
+  calendar: () => new GregorianCalendar(),
 })
 const emits = defineEmits<RangeCalendarRootEmits>()
 
@@ -197,6 +199,7 @@ const defaultDate = getDefaultDate({
   defaultPlaceholder: props.placeholder,
   defaultValue: currentModelValue.value.start,
   locale: props.locale,
+  calendar: props.calendar,
 })
 
 const startValue = ref(currentModelValue.value.start) as Ref<DateValue | undefined>

diff --git a/packages/core/src/shared/date/comparators.ts b/packages/core/src/shared/date/comparators.ts
@@ -2,7 +2,7 @@
   * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/utils.ts
 */
 
-import { CalendarDate, CalendarDateTime, DateFormatter, type DateValue, Time, type ZonedDateTime, createCalendar, toCalendar } from '@internationalized/date'
+import { type Calendar, CalendarDate, CalendarDateTime, type DateValue, Time, type ZonedDateTime, toCalendar } from '@internationalized/date'
 
 export type TimeValue = Time | CalendarDateTime | ZonedDateTime
 
@@ -14,6 +14,7 @@ type GetDefaultDateProps = {
   defaultPlaceholder?: DateValue | undefined
   granularity?: Granularity
   locale?: string
+  calendar: Calendar
 }
 
 /**
@@ -27,7 +28,7 @@ type GetDefaultDateProps = {
  *
  */
 export function getDefaultDate(props: GetDefaultDateProps): DateValue {
-  const { defaultValue, defaultPlaceholder, granularity = 'day', locale = 'en' } = props
+  const { defaultValue, defaultPlaceholder, granularity = 'day', calendar } = props
 
   if (Array.isArray(defaultValue) && defaultValue.length)
     return defaultValue.at(-1)!.copy()
@@ -44,9 +45,6 @@ export function getDefaultDate(props: GetDefaultDateProps): DateValue {
   const day = date.getDate()
   const calendarDateTimeGranularities = ['hour', 'minute', 'second']
 
-  const defaultFormatter = new DateFormatter(locale)
-  const calendar = createCalendar(defaultFormatter.resolvedOptions().calendar)
-
   if (calendarDateTimeGranularities.includes(granularity ?? 'day'))
     return toCalendar(new CalendarDateTime(year, month, day, 0, 0, 0), calendar)