From c58a70800240818b1e00b6f1d6125a86973aa948 Mon Sep 17 00:00:00 2001
From: Sadegh Barati <sadeghbaratiwork@gmail.com>
Date: Thu, 30 Nov 2023 18:54:56 +0330
Subject: [PATCH] fix: `calendar` transition glitch

---
 .../registry/default/ui/calendar/Calendar.vue |  2 +-
 .../new-york/ui/calendar/Calendar.vue         | 93 ++++++++++++++++++-
 2 files changed, 93 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index c349efa0..4e8c6727 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -68,7 +68,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute top-3 flex justify-between w-full px-4">
+    <div class="absolute flex justify-between w-full px-4 top-3">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
         <ChevronLeft class="w-4 h-4" />
       </button>
diff --git a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
index 10543957..285c1770 100644
--- a/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue
@@ -67,7 +67,7 @@ onMounted(async () => {
 
 <template>
   <div class="relative">
-    <div class="absolute top-3 flex justify-between w-full px-4">
+    <div class="absolute flex justify-between w-full px-4 top-3">
       <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
         <ChevronLeftIcon class="w-4 h-4" />
       </button>
@@ -133,4 +133,95 @@ onMounted(async () => {
 .calendar .vc-highlight-content-light {
   @apply bg-accent text-accent-foreground;
 }
+:root {
+	--vc-slide-translate: 22px;
+	--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,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-enter-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-enter-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-enter-active,
+.calendar .vc-slide-down-leave-active,
+.calendar .vc-slide-fade-enter-active,
+.calendar .vc-slide-fade-leave-active {
+	transition:
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing);
+	transition:
+		transform var(--vc-slide-duration) var(--vc-slide-timing),
+		opacity var(--vc-slide-duration) var(--vc-slide-timing),
+		-webkit-transform var(--vc-slide-duration) var(--vc-slide-timing);
+	-webkit-backface-visibility: hidden;
+	backface-visibility: hidden;
+	pointer-events: none;
+}
+
+.calendar .vc-none-leave-active,
+.calendar .vc-fade-leave-active,
+.calendar .vc-slide-left-leave-active,
+.calendar .vc-slide-right-leave-active,
+.calendar .vc-slide-up-leave-active,
+.calendar .vc-slide-down-leave-active {
+	position: absolute !important;
+	width: 100%;
+}
+
+.calendar .vc-none-enter-from,
+.calendar .vc-none-leave-to,
+.calendar .vc-fade-enter-from,
+.calendar .vc-fade-leave-to,
+.calendar .vc-slide-left-enter-from,
+.calendar .vc-slide-left-leave-to,
+.calendar .vc-slide-right-enter-from,
+.calendar .vc-slide-right-leave-to,
+.calendar .vc-slide-up-enter-from,
+.calendar .vc-slide-up-leave-to,
+.calendar .vc-slide-down-enter-from,
+.calendar .vc-slide-down-leave-to,
+.calendar .vc-slide-fade-enter-from,
+.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,
+.calendar .vc-slide-fade-leave-to.direction-left {
+	-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,
+.calendar .vc-slide-fade-leave-to.direction-right {
+	-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,
+.calendar .vc-slide-fade-leave-to.direction-top {
+	-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,
+.calendar .vc-slide-fade-leave-to.direction-bottom {
+	-webkit-transform: translateY(calc(-1 * var(--vc-slide-translate)));
+	transform: translateY(calc(-1 * var(--vc-slide-translate)));
+}
 </style>