@antify/ui 3.3.1 → 3.3.3

package/dist/components/AntModal.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import {
-  ref, useSlots, watch,
+  ref,
+  useSlots,
+  onMounted,
 } from 'vue';
 import {
   faXmark,
@@ -9,12 +11,10 @@ import AntButton from './AntButton.vue';
 import AntSkeleton from './AntSkeleton.vue';
 
 const emit = defineEmits([
-  'update:open',
   'close',
 ]);
 const props = withDefaults(defineProps<{
   title: string;
-  open: boolean;
   fullscreen?: boolean;
   padding?: boolean;
   skeleton?: boolean;
@@ -23,31 +23,35 @@ const props = withDefaults(defineProps<{
   padding: false,
   skeleton: false,
 });
-const openModal = ref(props.open);
-const openBackground = ref(props.open);
-
-watch(() => props.open, (val) => {
-  function onKeydown(e: KeyboardEvent) {
-    if (e.key === 'Escape') {
-      closeModal();
-    }
-  }
+const openModal = ref(false);
+const openBackground = ref(false);
 
-  if (val) {
-    openBackground.value = true;
-    setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100);
-    document.addEventListener('keydown', onKeydown);
-  } else {
-    openModal.value = false;
-    setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100);
-    document.removeEventListener('keydown', onKeydown);
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    closeModal();
   }
-});
+}
 
 function closeModal() {
-  emit('update:open', false);
-  emit('close');
+  openModal.value = false;
+
+  setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100);
+  document.removeEventListener('keydown', onKeydown);
+
+  setTimeout(
+    () => {
+      emit('close');
+    },
+    // Wait finishing the close animation
+    400,
+  );
 }
+
+onMounted(() => {
+  openBackground.value = true;
+  setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100);
+  document.addEventListener('keydown', onKeydown);
+});
 </script>
 
 <template>

package/dist/components/__stories/AntModal.stories.js

@@ -28,12 +28,7 @@ const Docs = exports.Docs = {
       AntKeycap: _AntKeycap.default
     },
     setup() {
-      const open = (0, _vue.computed)({
-        // @ts-ignore
-        get: () => args.open,
-        // @ts-ignore
-        set: val => args.open = val
-      });
+      const open = (0, _vue.ref)(false);
       return {
         args,
         open
@@ -60,7 +55,11 @@ const Docs = exports.Docs = {
         </div>
         <AntButton @click="() => open = true" state="primary">Open Modal</AntButton>
 
-        <AntModal v-bind="args" v-model:open="open">
+        <AntModal
+          v-if="open"
+          v-bind="args"
+          @close="open = false"
+        >
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
           sed diam nonumy eirmod tempor invidunt <br/>
           ut labore et dolore magna aliquyam erat, <br/>
@@ -83,15 +82,13 @@ const Docs = exports.Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor",
-    open: false
+    title: "Lorem ipsum dolor"
   }
 };
 const Fullscreen = exports.Fullscreen = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    open: true,
     fullscreen: true
   }
 };

package/dist/components/__stories/AntModal.stories.mjs

@@ -1,7 +1,7 @@
 import AntModal from "../AntModal.vue";
 import AntButton from "../AntButton.vue";
 import {
-  computed
+  ref
 } from "vue";
 import AntKeycap from "../AntKeycap.vue";
 const meta = {
@@ -23,12 +23,7 @@ export const Docs = {
       AntKeycap
     },
     setup() {
-      const open = computed({
-        // @ts-ignore
-        get: () => args.open,
-        // @ts-ignore
-        set: (val) => args.open = val
-      });
+      const open = ref(false);
       return {
         args,
         open
@@ -55,7 +50,11 @@ export const Docs = {
         </div>
         <AntButton @click="() => open = true" state="primary">Open Modal</AntButton>
 
-        <AntModal v-bind="args" v-model:open="open">
+        <AntModal
+          v-if="open"
+          v-bind="args"
+          @close="open = false"
+        >
           Lorem ipsum dolor sit amet, consetetur sadipscing elitr, <br/>
           sed diam nonumy eirmod tempor invidunt <br/>
           ut labore et dolore magna aliquyam erat, <br/>
@@ -78,15 +77,13 @@ export const Docs = {
     `
   }),
   args: {
-    title: "Lorem ipsum dolor",
-    open: false
+    title: "Lorem ipsum dolor"
   }
 };
 export const Fullscreen = {
   render: Docs.render,
   args: {
     ...Docs.args,
-    open: true,
     fullscreen: true
   }
 };

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.3",
   "private": false,
   "type": "module",
   "exports": {