feat(nc-gui): calendar type tab animation

packages/nc-gui/components/smartsheet/toolbar/CalendarMode.vue

@@ -2,8 +2,13 @@
 
 import { useCalendarViewStoreOrThrow } from "#imports";
 
-const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year') => {
+const highlightStyle = ref({ left: '0px' });
+
+
+const setActiveCalendarMode = (mode: 'day' | 'week' | 'month' | 'year', event: MouseEvent) => {
   changeCalendarView(mode);
+  const tabElement = event.target as HTMLElement;
+  highlightStyle.value.left = `${tabElement.offsetLeft}px`;
 };
 
 const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow()
@@ -11,47 +16,32 @@ const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow()
 </script>
 
 <template>
-  <div class="flex flex-row p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab">
-    <div
-        :class="{ active: activeCalendarView === 'day' }"
-        class="tab"
-        @click="setActiveCalendarMode('day')"
-    >
-      <div class="tab-title nc-tab">{{ $t('objects.day') }}</div>
-    </div>
-    <div
-        :class="{ active: activeCalendarView === 'week' }"
-        class="tab"
-        @click="setActiveCalendarMode('week')"
-    >
-      <div class="tab-title nc-tab">{{ $t('objects.week') }}</div>
-    </div>
-    <div
-        :class="{ active: activeCalendarView === 'month' }"
-        class="tab"
-        @click="setActiveCalendarMode('month')"
-    >
-      <div class="tab-title nc-tab">{{ $t('objects.month') }}</div>
-    </div>
-    <div
-        :class="{ active: activeCalendarView === 'year' }"
-        class="tab"
-        @click="setActiveCalendarMode('year')"
+  <div class="flex flex-row relative p-1 mx-3 mt-3 mb-3 bg-gray-100 rounded-lg gap-x-0.5 nc-calendar-mode-tab">
+    <div class="highlight" :style="highlightStyle"></div>
+    <div v-for="mode in ['day', 'week', 'month', 'year']" :key="mode"
+         :class="{ active: activeCalendarView === mode }"
+         class="tab"
+         @click="setActiveCalendarMode(mode, $event)"
     >
-      <div class="tab-title nc-tab">{{ $t('objects.year') }}</div>
-    </div>
+    <div class="tab-title nc-tab">{{ $t(`objects.${mode}`) }}</div>
+  </div>
   </div>
 
 </template>
 
 <style lang="scss" scoped>
 
+.highlight {
+  @apply absolute h-7.5 w-20 shadow bg-white rounded-lg transition-all duration-300;
+  z-index: 0;
+}
+
 .tab {
-  @apply flex flex-row items-center h-7.5 w-20 justify-center px-2 py-1 bg-gray-100 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
+  @apply flex items-center h-7.5 w-20 z-10 justify-center px-2 py-1 rounded-lg gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none;
 }
 
 .tab .tab-title {
-  @apply min-w-0;
+  @apply min-w-0 pointer-events-none;
   word-break: 'keep-all';
   white-space: 'nowrap';
   display: 'inline';
@@ -59,11 +49,12 @@ const { changeCalendarView, activeCalendarView } = useCalendarViewStoreOrThrow()
 }
 
 .active {
-  @apply bg-white shadow text-black;
+  @apply text-black bg-transparent;
 }
 
 .nc-calendar-mode-tab {
-  @apply -ml-120;
+  @apply -ml-120 relative;
 }
 
+
 </style>