@antify/ui 3.3.1 → 3.3.2

package/dist/components/calendar/AntDatePicker.vue

@@ -24,10 +24,20 @@ const props = withDefaults(defineProps<{
   showWeekend?: boolean;
   showTodayButton?: boolean;
   skeleton?: boolean;
+  /**
+   * To highlight specific days with a custom color e.g. legal holidays
+   * date have the following format: yyyy-mm-dd
+   */
+  specialDays?: {
+    name: string | null;
+    date: string;
+    color: string;
+  }[];
 }>(), {
   showWeekend: false,
   showTodayButton: true,
   skeleton: false,
+  specialDays: () => [],
 });
 defineEmits([
   'select',
@@ -68,6 +78,8 @@ const matrix = computed(() => {
         isCurrentMonth,
         isWeekend: weekdayIndex === 5 || weekdayIndex === 6,
         isToday: date === format(Date.now(), 'yyyy-MM-dd') && isCurrentMonth,
+        isSpecialDay: !!props.specialDays.find(specialDay => specialDay.date === date),
+        specialDayColor: props.specialDays.find(specialDay => specialDay.date === date)?.color,
       };
 
       currentDate = addDays(currentDate, 1);
@@ -102,6 +114,12 @@ const weekDays = computed(() => {
     ];
 });
 
+const getColorNumber = (color: string) => {
+  const match = color.match(/(\d+)/);
+
+  return match ? parseInt(match[0], 10) : null;
+};
+
 watch(() => props.modelValue, (val) => {
   const date = new Date(val);
   currentMonthIndex.value = date.getMonth();
@@ -156,7 +174,15 @@ watch(() => props.modelValue, (val) => {
                 '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'),
+                '!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())"
             >

package/dist/components/calendar/__stories/AntDatePicker.stories.js

@@ -7,6 +7,7 @@ module.exports = exports.Docs = void 0;
 var _AntDatePicker = _interopRequireDefault(require("../AntDatePicker.vue"));
 var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"));
 var _vue = require("vue");
+var _dateFns = require("date-fns");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Components/Date Picker",
@@ -53,5 +54,11 @@ const Docs = exports.Docs = {
         </div>
       </div>`
   }),
-  args: {}
+  args: {
+    specialDays: [{
+      name: "Special Day",
+      date: (0, _dateFns.format)((0, _dateFns.addDays)(/* @__PURE__ */new Date(), 1), "yyyy-MM-dd"),
+      color: "success-300"
+    }]
+  }
 };

package/dist/components/calendar/__stories/AntDatePicker.stories.mjs

@@ -3,6 +3,10 @@ import AntDateSwitcher from "../AntDateSwitcher.vue";
 import {
   ref
 } from "vue";
+import {
+  addDays,
+  format
+} from "date-fns";
 const meta = {
   title: "Components/Date Picker",
   component: AntCalendar,
@@ -48,5 +52,13 @@ export const Docs = {
         </div>
       </div>`
   }),
-  args: {}
+  args: {
+    specialDays: [
+      {
+        name: "Special Day",
+        date: format(addDays(/* @__PURE__ */ new Date(), 1), "yyyy-MM-dd"),
+        color: "success-300"
+      }
+    ]
+  }
 };

package/package.json

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