fix: month and year popover (#317)

apps/www/src/lib/registry/default/ui/calendar/Calendar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
 import { isVCalendarSlot } from '.'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
@@ -100,11 +100,19 @@ const vCalendarSlots = computed(() => {
       <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope" />
       </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
     </DatePicker>
   </div>
 </template>
 
-<style lang="postcss">
+<style lang="css">
 .calendar {
   @apply p-3 text-center;
 }
@@ -112,7 +120,25 @@ const vCalendarSlots = computed(() => {
   @apply grid gap-4;
 }
 .calendar .vc-title {
-  @apply text-sm font-medium pointer-events-none;
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
 }
 .calendar .vc-pane-header-wrapper {
   @apply hidden;

apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
 import { isVCalendarSlot } from '.'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
@@ -29,7 +29,8 @@ interface SimpleDateParts {
 defineOptions({
   inheritAttrs: false,
 })
-const props = withDefaults(defineProps< {
+
+const props = withDefaults(defineProps<{
   modelValue?: string | number | Date | DatePickerModel
   modelModifiers?: object
   columns?: number
@@ -89,8 +90,8 @@ const vCalendarSlots = computed(() => {
 
     <DatePicker
       ref="datePicker"
-      v-bind="$attrs"
       v-model="modelValue"
+      v-bind="$attrs"
       :model-modifiers="modelModifiers"
       class="calendar"
       trim-weeks
@@ -100,11 +101,19 @@ const vCalendarSlots = computed(() => {
       <template v-for="(_, slot) of vCalendarSlots" #[slot]="scope">
         <slot :name="slot" v-bind="scope" />
       </template>
+
+      <template #nav-prev-button>
+        <ChevronLeft />
+      </template>
+
+      <template #nav-next-button>
+        <ChevronRight />
+      </template>
     </DatePicker>
   </div>
 </template>
 
-<style lang="postcss">
+<style lang="css">
 .calendar {
   @apply p-3 text-center;
 }
@@ -112,7 +121,25 @@ const vCalendarSlots = computed(() => {
   @apply grid gap-4;
 }
 .calendar .vc-title {
-  @apply text-sm font-medium pointer-events-none;
+  @apply text-sm font-medium relative z-20;
+}
+.vc-popover-content-wrapper .vc-popover-content {
+  @apply mt-3 rounded-md max-w-xs border bg-background;
+}
+.vc-popover-content-wrapper .vc-nav-header {
+  @apply flex justify-between items-center p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items {
+  @apply grid grid-cols-4 gap-2 p-2;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item {
+  @apply rounded-md px-2 py-1;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item:hover {
+  @apply text-muted-foreground bg-muted;
+}
+.vc-popover-content-wrapper .vc-nav-items .vc-nav-item.is-active {
+  @apply bg-primary text-primary-foreground;
 }
 .calendar .vc-pane-header-wrapper {
   @apply hidden;
@@ -124,14 +151,14 @@ const vCalendarSlots = computed(() => {
   @apply flex;
 }
 .calendar .vc-weekday {
-    @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
+  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
-  }
+}
-  .calendar .vc-weekday-1 {
+.calendar .vc-weekday-1 {
-    @apply pr-3;
+	@apply pr-3;
-  }
+}
-  .calendar .vc-weekday-7 {
+.calendar .vc-weekday-7 {
-    @apply pl-3;
+	@apply pl-3;
-  }
+}
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
 }
@@ -151,7 +178,7 @@ const vCalendarSlots = computed(() => {
   @apply rounded-md;
 }
 .calendar .vc-day-content  {
-  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-8 w-8 font-normal aria-selected:opacity-100 select-none;
+  @apply text-center text-sm p-0 relative focus-within:relative focus-within:z-20 inline-flex items-center justify-center ring-offset-background hover:transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 hover:bg-accent hover:text-accent-foreground h-9 w-9  font-normal aria-selected:opacity-100 select-none;
 }
 .calendar .vc-day-content:not(.vc-highlight-content-light) {
   @apply rounded-md;
@@ -177,7 +204,6 @@ const vCalendarSlots = computed(() => {
 	--vc-slide-duration: 0.15s;
 	--vc-slide-timing: ease;
 }
-
 .calendar .vc-fade-enter-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-enter-active,
@@ -204,7 +230,6 @@ const vCalendarSlots = computed(() => {
 	backface-visibility: hidden;
 	pointer-events: none;
 }
-
 .calendar .vc-none-leave-active,
 .calendar .vc-fade-leave-active,
 .calendar .vc-slide-left-leave-active,
@@ -214,7 +239,6 @@ const vCalendarSlots = computed(() => {
 	position: absolute !important;
 	width: 100%;
 }
-
 .calendar .vc-none-enter-from,
 .calendar .vc-none-leave-to,
 .calendar .vc-fade-enter-from,
@@ -231,7 +255,6 @@ const vCalendarSlots = computed(() => {
 .calendar .vc-slide-fade-leave-to {
 	opacity: 0;
 }
-
 .calendar .vc-slide-left-enter-from,
 .calendar .vc-slide-right-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-left,
@@ -239,7 +262,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(var(--vc-slide-translate));
 	transform: translateX(var(--vc-slide-translate));
 }
-
 .calendar .vc-slide-right-enter-from,
 .calendar .vc-slide-left-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-right,
@@ -247,7 +269,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateX(calc(-1 * var(--vc-slide-translate)));
 	transform: translateX(calc(-1 * var(--vc-slide-translate)));
 }
-
 .calendar .vc-slide-up-enter-from,
 .calendar .vc-slide-down-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-top,
@@ -255,7 +276,6 @@ const vCalendarSlots = computed(() => {
 	-webkit-transform: translateY(var(--vc-slide-translate));
 	transform: translateY(var(--vc-slide-translate));
 }
-
 .calendar .vc-slide-down-enter-from,
 .calendar .vc-slide-up-leave-to,
 .calendar .vc-slide-fade-enter-from.direction-bottom,