+ "content": "<script lang=\"ts\" setup>\nimport type { CalendarRootEmits, CalendarRootProps, DateValue } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { LayoutTypes } from \".\"\nimport { getLocalTimeZone, today } from \"@internationalized/date\"\nimport { createReusableTemplate, reactiveOmit, useVModel } from \"@vueuse/core\"\nimport { CalendarRoot, useDateFormatter, useForwardPropsEmits } from \"reka-ui\"\nimport { createYear, createYearRange, toDate } from \"reka-ui/date\"\nimport { cn } from \"@/lib/utils\"\nimport { NativeSelect, NativeSelectOption } from \"@/registry/new-york-v4/ui/native-select\"\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from \".\"\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes[\"class\"], layout?: LayoutTypes, yearRange?: DateValue[] }>(), {\n modelValue: undefined,\n layout: undefined,\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"layout\", \"placeholder\")\n\nconst placeholder = useVModel(props, \"placeholder\", emits, {\n passive: true,\n defaultValue: props.defaultPlaceholder ?? today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst formatter = useDateFormatter(props.locale ?? \"en\")\n\nconst yearRange = computed(() => {\n return props.yearRange ?? createYearRange({\n start: (toRaw(props.placeholder) ?? props.defaultPlaceholder ?? today(getLocalTimeZone()))\n .cycle(\"year\", -100),\n\n end: today(getLocalTimeZone()),\n })\n})\n\nconst [DefineMonthTemplate, ReuseMonthTemplate] = createReusableTemplate<{ date: DateValue }>()\nconst [DefineYearTemplate, ReuseYearTemplate] = createReusableTemplate<{ date: DateValue }>()\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n <DefineMonthTemplate v-slot=\"{ date }\">\n <div class=\"**:data-[slot=native-select-icon]:right-1\">\n <div class=\"relative\">\n <div class=\"absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none\">\n {{ formatter.custom(toDate(date), { month: 'short' }) }}\n </div>\n <NativeSelect\n class=\"text-xs h-8 pr-6 pl-2 text-transparent relative\"\n @change=\"(e: Event) => {\n placeholder = placeholder.set({\n month: Number((e?.target as any)?.value),\n })\n }\"\n >\n <NativeSelectOption v-for=\"(month) in createYear({ dateObj: date })\" :key=\"month.toString()\" :value=\"month.month\" :selected=\"date.month === month.month\">\n {{ formatter.custom(toDate(month), { month: 'short' }) }}\n </NativeSelectOption>\n </NativeSelect>\n </div>\n </div>\n </DefineMonthTemplate>\n\n <DefineYearTemplate v-slot=\"{ date }\">\n <div class=\"**:data-[slot=native-select-icon]:right-1\">\n <div class=\"relative\">\n <div class=\"absolute inset-0 flex h-full items-center text-sm pl-2 pointer-events-none\">\n {{ formatter.custom(toDate(date), { year: 'numeric' }) }}\n </div>\n <NativeSelect\n class=\"text-xs h-8 pr-6 pl-2 text-transparent relative\"\n @change=\"(e: Event) => {\n placeholder = placeholder.set({\n year: Number((e?.target as any)?.value),\n })\n }\"\n >\n <NativeSelectOption v-for=\"(year) in yearRange\" :key=\"year.toString()\" :value=\"year.year\" :selected=\"date.year === year.year\">\n {{ formatter.custom(toDate(year), { year: 'numeric' }) }}\n </NativeSelectOption>\n </NativeSelect>\n </div>\n </div>\n </DefineYearTemplate>\n\n <CalendarRoot\n v-slot=\"{ grid, weekDays, date }\"\n v-bind=\"forwarded\"\n v-model:placeholder=\"placeholder\"\n data-slot=\"calendar\"\n :class=\"cn('p-3', props.class)\"\n >\n <CalendarHeader class=\"pt-0\">\n <nav class=\"flex items-center gap-1 absolute top-0 inset-x-0 justify-between\">\n <CalendarPrevButton>\n <slot name=\"calendar-prev-icon\" />\n </CalendarPrevButton>\n <CalendarNextButton>\n <slot name=\"calendar-next-icon\" />\n </CalendarNextButton>\n </nav>\n\n <slot name=\"calendar-heading\" :date=\"date\" :month=\"ReuseMonthTemplate\" :year=\"ReuseYearTemplate\">\n <template v-if=\"layout === 'month-and-year'\">\n <div class=\"flex items-center justify-center gap-1\">\n <ReuseMonthTemplate :date=\"date\" />\n <ReuseYearTemplate :date=\"date\" />\n </div>\n </template>\n <template v-else-if=\"layout === 'month-only'\">\n <div class=\"flex items-center justify-center gap-1\">\n <ReuseMonthTemplate :date=\"date\" />\n {{ formatter.custom(toDate(date), { year: 'numeric' }) }}\n </div>\n </template>\n <template v-else-if=\"layout === 'year-only'\">\n <div class=\"flex items-center justify-center gap-1\">\n {{ formatter.custom(toDate(date), { month: 'short' }) }}\n <ReuseYearTemplate :date=\"date\" />\n </div>\n </template>\n <template v-else>\n <CalendarHeading />\n </template>\n </slot>\n </CalendarHeader>\n\n <div class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n <CalendarGridHead>\n <CalendarGridRow>\n <CalendarHeadCell\n v-for=\"day in weekDays\" :key=\"day\"\n >\n {{ day }}\n </CalendarHeadCell>\n </CalendarGridRow>\n </CalendarGridHead>\n <CalendarGridBody>\n <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n <CalendarCell\n v-for=\"weekDate in weekDates\"\n :key=\"weekDate.toString()\"\n :date=\"weekDate\"\n >\n <CalendarCellTrigger\n :day=\"weekDate\"\n :month=\"month.value\"\n />\n </CalendarCell>\n </CalendarGridRow>\n </CalendarGridBody>\n </CalendarGrid>\n </div>\n </CalendarRoot>\n</template>\n",
0 commit comments