@antify/ui 4.1.1 → 4.1.2

package/dist/components/calendar/AntDatePicker.vue

@@ -10,10 +10,12 @@ import {
   watch,
   computed,
   defineEmits,
+  onMounted,
 } from 'vue';
 import AntDateSwitcher from './AntDateSwitcher.vue';
 import AntButton from '../AntButton.vue';
 import AntSkeleton from '../AntSkeleton.vue';
+import AntTooltip from '../AntTooltip.vue';
 
 const props = withDefaults(defineProps<{
   /**
@@ -39,9 +41,10 @@ const props = withDefaults(defineProps<{
   skeleton: false,
   specialDays: () => [],
 });
-defineEmits([
+const emit = defineEmits([
   'select',
   'update:modelValue',
+  'changeCurrentVisibleMonth',
 ]);
 
 const COUNT_ROWS = 6;
@@ -125,6 +128,26 @@ watch(() => props.modelValue, (val) => {
   currentMonthIndex.value = date.getMonth();
   currentYear.value = date.getFullYear();
 });
+
+watch(() => [
+  currentMonthIndex.value,
+  currentYear.value,
+], ([
+  currentMonthIndex,
+  currentYear,
+]) => {
+  emit('changeCurrentVisibleMonth', {
+    month: currentMonthIndex,
+    year: currentYear,
+  });
+});
+
+onMounted(() => {
+  emit('changeCurrentVisibleMonth', {
+    month: currentMonthIndex.value,
+    year: currentYear.value,
+  });
+});
 </script>
 
 <template>
@@ -167,27 +190,36 @@ watch(() => props.modelValue, (val) => {
             :visible="skeleton"
             rounded
           >
-            <div
-              class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors"
-              :class="{
-                'text-base-400': !day.isCurrentMonth,
-                'text-for-white-bg-font': day.isCurrentMonth,
-                'outline outline-primary-500': day.isToday,
-                'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
-                '!bg-primary-500 !text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
-              }"
-              :style="{
-                backgroundColor: day.isSpecialDay ? `var(--color-${day.specialDayColor})` : 'none',
-                color: day.isSpecialDay
-                  ? getColorNumber(day.specialDayColor) < 500
-                    ? 'var(--color-for-white-bg-font)'
-                    : '#fff'
-                  : 'none'
-              }"
-              @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
-            >
-              {{ day.label }}
-            </div>
+            <AntTooltip :delay="300">
+              <div
+                class="rounded-md flex items-center justify-center p-2 font-semibold cursor-pointer transition-colors grow"
+                :class="{
+                  'text-base-400': !day.isCurrentMonth,
+                  'text-for-white-bg-font': day.isCurrentMonth,
+                  'outline outline-primary-500': day.isToday,
+                  'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
+                  '!bg-primary-500 !text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
+                }"
+                :style="{
+                  backgroundColor: day.isSpecialDay ? `var(--color-${day.specialDayColor})` : 'none',
+                  color: day.isSpecialDay
+                    ? getColorNumber(day.specialDayColor) < 500
+                      ? 'var(--color-for-white-bg-font)'
+                      : '#fff'
+                    : 'none'
+                }"
+                @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
+              >
+                {{ day.label }}
+              </div>
+
+              <template
+                v-if="day.isSpecialDay && specialDays.find(specialDay => specialDay.date === day.date)?.name"
+                #content
+              >
+                {{ specialDays.find(specialDay => specialDay.date === day.date)?.name }}
+              </template>
+            </AntTooltip>
           </AntSkeleton>
         </template>
       </template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.1",
+  "version": "4.1.2",
   "private": false,
   "type": "module",
   "exports": {