reka-ui
Version:
Vue port for Radix UI Primitives.
1 lines • 16.1 kB
Source Map (JSON)
{"version":3,"file":"CalendarRoot.cjs","sources":["../../src/Calendar/CalendarRoot.vue"],"sourcesContent":["<script lang=\"ts\">\nimport { type DateValue, isEqualDay, isSameDay } from '@internationalized/date'\n\nimport type { Ref } from 'vue'\nimport type { PrimitiveProps } from '@/Primitive'\nimport { type Formatter, createContext, useDirection, useLocale } from '@/shared'\n\nimport { useCalendar, useCalendarState } from './useCalendar'\nimport { getDefaultDate, handleCalendarInitialFocus } from '@/shared/date'\nimport type { Grid, Matcher, WeekDayFormat } from '@/date'\nimport type { Direction } from '@/shared/types'\n\ntype CalendarRootContext = {\n locale: Ref<string>\n modelValue: Ref<DateValue | DateValue[] | undefined>\n placeholder: Ref<DateValue>\n pagedNavigation: Ref<boolean>\n preventDeselect: Ref<boolean>\n grid: Ref< Grid<DateValue>[]>\n weekDays: Ref<string[]>\n weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>\n weekdayFormat: Ref<WeekDayFormat>\n fixedWeeks: Ref<boolean>\n multiple: Ref<boolean>\n numberOfMonths: Ref<number>\n disabled: Ref<boolean>\n readonly: Ref<boolean>\n initialFocus: Ref<boolean>\n onDateChange: (date: DateValue) => void\n onPlaceholderChange: (date: DateValue) => void\n fullCalendarLabel: Ref<string>\n parentElement: Ref<HTMLElement | undefined>\n headingValue: Ref<string>\n isInvalid: Ref<boolean>\n isDateDisabled: Matcher\n isDateSelected: Matcher\n isDateUnavailable?: Matcher\n isOutsideVisibleView: (date: DateValue) => boolean\n prevPage: (prevPageFunc?: (date: DateValue) => DateValue) => void\n nextPage: (nextPageFunc?: (date: DateValue) => DateValue) => void\n isNextButtonDisabled: (nextPageFunc?: (date: DateValue) => DateValue) => boolean\n isPrevButtonDisabled: (prevPageFunc?: (date: DateValue) => DateValue) => boolean\n formatter: Formatter\n dir: Ref<Direction>\n}\n\ninterface BaseCalendarRootProps extends PrimitiveProps {\n /** The default value for the calendar */\n defaultValue?: DateValue\n /** The default placeholder date */\n defaultPlaceholder?: DateValue\n /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */\n placeholder?: DateValue\n /** This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month */\n pagedNavigation?: boolean\n /** Whether or not to prevent the user from deselecting a date without selecting another date first */\n preventDeselect?: boolean\n /** The day of the week to start the calendar on */\n weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6\n /** The format to use for the weekday strings provided via the weekdays slot prop */\n weekdayFormat?: WeekDayFormat\n /** The accessible label for the calendar */\n calendarLabel?: string\n /** Whether or not to always display 6 weeks in the calendar */\n fixedWeeks?: boolean\n /** The maximum date that can be selected */\n maxValue?: DateValue\n /** The minimum date that can be selected */\n minValue?: DateValue\n /** The locale to use for formatting dates */\n locale?: string\n /** The number of months to display at once */\n numberOfMonths?: number\n /** Whether or not the calendar is disabled */\n disabled?: boolean\n /** Whether or not the calendar is readonly */\n readonly?: boolean\n /** If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted */\n initialFocus?: boolean\n /** A function that returns whether or not a date is disabled */\n isDateDisabled?: Matcher\n /** A function that returns whether or not a date is unavailable */\n isDateUnavailable?: Matcher\n /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */\n dir?: Direction\n /** A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component. */\n nextPage?: (placeholder: DateValue) => DateValue\n /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */\n prevPage?: (placeholder: DateValue) => DateValue\n}\n\nexport interface MultipleCalendarRootProps extends BaseCalendarRootProps {\n /** The controlled checked state of the calendar. Can be bound as `v-model`. */\n modelValue?: DateValue[] | undefined\n /** Whether or not multiple dates can be selected */\n multiple: true\n}\n\nexport interface SingleCalendarRootProps extends BaseCalendarRootProps {\n /** The controlled checked state of the calendar. Can be bound as `v-model`. */\n modelValue?: DateValue | undefined\n /** Whether or not multiple dates can be selected */\n multiple?: false\n}\n\nexport type CalendarRootProps = MultipleCalendarRootProps | SingleCalendarRootProps\n\nexport type CalendarRootEmits = {\n /** Event handler called whenever the model value changes */\n 'update:modelValue': [date: DateValue | undefined]\n /** Event handler called whenever the placeholder value changes */\n 'update:placeholder': [date: DateValue]\n}\n\nexport const [injectCalendarRootContext, provideCalendarRootContext]\n = createContext<CalendarRootContext>('CalendarRoot')\n</script>\n\n<script setup lang=\"ts\">\nimport { onMounted, toRefs, watch } from 'vue'\nimport { Primitive, usePrimitiveElement } from '@/Primitive'\nimport { useVModel } from '@vueuse/core'\n\nconst props = withDefaults(defineProps<CalendarRootProps>(), {\n defaultValue: undefined,\n as: 'div',\n pagedNavigation: false,\n preventDeselect: false,\n weekStartsOn: 0,\n weekdayFormat: 'narrow',\n fixedWeeks: false,\n multiple: false,\n numberOfMonths: 1,\n disabled: false,\n readonly: false,\n initialFocus: false,\n placeholder: undefined,\n isDateDisabled: undefined,\n isDateUnavailable: undefined,\n})\nconst emits = defineEmits<CalendarRootEmits>()\ndefineSlots<{\n default: (props: {\n /** The current date of the placeholder */\n date: DateValue\n /** The grid of dates */\n grid: Grid<DateValue>[]\n /** The days of the week */\n weekDays: string[]\n /** The start of the week */\n weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6\n /** The calendar locale */\n locale: string\n /** Whether or not to always display 6 weeks in the calendar */\n fixedWeeks: boolean\n /** The current date of the calendar */\n modelValue: DateValue | undefined\n }) => any\n}>()\n\nconst {\n disabled,\n readonly,\n initialFocus,\n pagedNavigation,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n multiple,\n minValue,\n maxValue,\n numberOfMonths,\n preventDeselect,\n isDateDisabled: propsIsDateDisabled,\n isDateUnavailable: propsIsDateUnavailable,\n calendarLabel,\n defaultValue,\n nextPage: propsNextPage,\n prevPage: propsPrevPage,\n dir: propDir,\n locale: propLocale,\n} = toRefs(props)\n\nconst { primitiveElement, currentElement: parentElement }\n = usePrimitiveElement()\nconst locale = useLocale(propLocale)\nconst dir = useDirection(propDir)\n\nconst modelValue = useVModel(props, 'modelValue', emits, {\n defaultValue: defaultValue.value,\n passive: (props.modelValue === undefined) as false,\n}) as Ref<DateValue | DateValue[] | undefined>\n\nconst defaultDate = getDefaultDate({\n defaultPlaceholder: props.placeholder,\n defaultValue: modelValue.value,\n locale: props.locale,\n})\n\nconst placeholder = useVModel(props, 'placeholder', emits, {\n defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),\n passive: (props.placeholder === undefined) as false,\n}) as Ref<DateValue>\n\nfunction onPlaceholderChange(value: DateValue) {\n placeholder.value = value.copy()\n}\n\nconst {\n fullCalendarLabel,\n headingValue,\n isDateDisabled,\n isDateUnavailable,\n isNextButtonDisabled,\n isPrevButtonDisabled,\n weekdays,\n isOutsideVisibleView,\n nextPage,\n prevPage,\n formatter,\n grid,\n} = useCalendar({\n locale,\n placeholder,\n weekStartsOn,\n fixedWeeks,\n numberOfMonths,\n minValue,\n maxValue,\n disabled,\n weekdayFormat,\n pagedNavigation,\n isDateDisabled: propsIsDateDisabled.value,\n isDateUnavailable: propsIsDateUnavailable.value,\n calendarLabel,\n nextPage: propsNextPage,\n prevPage: propsPrevPage,\n})\n\nconst {\n isInvalid,\n isDateSelected,\n} = useCalendarState({\n date: modelValue,\n isDateDisabled,\n isDateUnavailable,\n})\n\nwatch(modelValue, (_modelValue) => {\n if (Array.isArray(_modelValue) && _modelValue.length) {\n const lastValue = _modelValue[_modelValue.length - 1]\n if (lastValue && !isEqualDay(placeholder.value, lastValue))\n onPlaceholderChange(lastValue)\n }\n else if (!Array.isArray(_modelValue) && _modelValue && !isEqualDay(placeholder.value, _modelValue)) {\n onPlaceholderChange(_modelValue)\n }\n})\n\nfunction onDateChange(value: DateValue) {\n if (!multiple.value) {\n if (!modelValue.value) {\n modelValue.value = value.copy()\n return\n }\n\n if (!preventDeselect.value && isEqualDay(modelValue.value as DateValue, value)) {\n placeholder.value = value.copy()\n modelValue.value = undefined\n }\n else { modelValue.value = value.copy() }\n }\n else if (!modelValue.value) {\n modelValue.value = [value.copy()]\n }\n else if (Array.isArray(modelValue.value)) {\n const index = modelValue.value.findIndex(date => isSameDay(date, value))\n if (index === -1) {\n modelValue.value = [...modelValue.value, value]\n }\n else if (!preventDeselect.value) {\n const next = modelValue.value.filter(date => !isSameDay(date, value))\n if (!next.length) {\n placeholder.value = value.copy()\n modelValue.value = undefined\n return\n }\n modelValue.value = next.map(date => date.copy())\n }\n }\n}\n\nonMounted(() => {\n if (initialFocus.value)\n handleCalendarInitialFocus(parentElement.value)\n})\n\nprovideCalendarRootContext({\n isDateUnavailable,\n dir,\n isDateDisabled,\n locale,\n formatter,\n modelValue,\n placeholder,\n disabled,\n initialFocus,\n pagedNavigation,\n grid,\n weekDays: weekdays,\n weekStartsOn,\n weekdayFormat,\n fixedWeeks,\n multiple,\n numberOfMonths,\n readonly,\n preventDeselect,\n fullCalendarLabel,\n headingValue,\n isInvalid,\n isDateSelected,\n isNextButtonDisabled,\n isPrevButtonDisabled,\n isOutsideVisibleView,\n nextPage,\n prevPage,\n parentElement,\n onPlaceholderChange,\n onDateChange,\n})\n</script>\n\n<template>\n <Primitive\n ref=\"primitiveElement\"\n :as=\"as\"\n :as-child=\"asChild\"\n role=\"application\"\n :aria-label=\"fullCalendarLabel\"\n :data-readonly=\"readonly ? '' : undefined\"\n :data-disabled=\"disabled ? '' : undefined\"\n :data-invalid=\"isInvalid ? '' : undefined\"\n :dir=\"dir\"\n >\n <slot\n :date=\"placeholder\"\n :grid=\"grid\"\n :week-days=\"weekdays\"\n :week-starts-on=\"weekStartsOn\"\n :locale=\"locale\"\n :fixed-weeks=\"fixedWeeks\"\n :model-value=\"modelValue\"\n />\n <div\n style=\"border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 1px;\"\n >\n <div\n role=\"heading\"\n aria-level=\"2\"\n >\n {{ fullCalendarLabel }}\n </div>\n </div>\n </Primitive>\n</template>\n"],"names":["createContext","toRefs","usePrimitiveElement","useLocale","useDirection","useVModel","getDefaultDate","useCalendar","useCalendarState","watch","isEqualDay","isSameDay","date","onMounted","handleCalendarInitialFocus"],"mappings":"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"}