@antify/ui 3.3.0 → 3.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/calendar/AntDatePicker.vue +27 -1
  2. package/dist/components/calendar/__stories/AntDatePicker.stories.js +8 -1
  3. package/dist/components/calendar/__stories/AntDatePicker.stories.mjs +13 -1
  4. package/dist/index.css +1 -1
  5. package/package.json +1 -1
package/dist/components/calendar/AntDatePicker.vue CHANGED
@@ -24,10 +24,20 @@ const props = withDefaults(defineProps<{
24
24
  showWeekend?: boolean;
25
25
  showTodayButton?: boolean;
26
26
  skeleton?: boolean;
27
+ /**
28
+ * To highlight specific days with a custom color e.g. legal holidays
29
+ * date have the following format: yyyy-mm-dd
30
+ */
31
+ specialDays?: {
32
+ name: string | null;
33
+ date: string;
34
+ color: string;
35
+ }[];
27
36
  }>(), {
28
37
  showWeekend: false,
29
38
  showTodayButton: true,
30
39
  skeleton: false,
40
+ specialDays: () => [],
31
41
  });
32
42
  defineEmits([
33
43
  'select',
@@ -68,6 +78,8 @@ const matrix = computed(() => {
68
78
  isCurrentMonth,
69
79
  isWeekend: weekdayIndex === 5 || weekdayIndex === 6,
70
80
  isToday: date === format(Date.now(), 'yyyy-MM-dd') && isCurrentMonth,
81
+ isSpecialDay: !!props.specialDays.find(specialDay => specialDay.date === date),
82
+ specialDayColor: props.specialDays.find(specialDay => specialDay.date === date)?.color,
71
83
  };
72
84
 
73
85
  currentDate = addDays(currentDate, 1);
@@ -102,6 +114,12 @@ const weekDays = computed(() => {
102
114
  ];
103
115
  });
104
116
 
117
+ const getColorNumber = (color: string) => {
118
+ const match = color.match(/(\d+)/);
119
+
120
+ return match ? parseInt(match[0], 10) : null;
121
+ };
122
+
105
123
  watch(() => props.modelValue, (val) => {
106
124
  const date = new Date(val);
107
125
  currentMonthIndex.value = date.getMonth();
@@ -156,7 +174,15 @@ watch(() => props.modelValue, (val) => {
156
174
  'text-for-white-bg-font': day.isCurrentMonth,
157
175
  'outline outline-primary-500': day.isToday,
158
176
  'hover:bg-base-200 hover:text-base-200-font': day.date !== format(modelValue, 'yyyy-MM-dd'),
159
- 'bg-primary-500 text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
177
+ '!bg-primary-500 !text-primary-500-font hover:bg-primary-300 hover:text-primary-300-font': day.date === format(modelValue, 'yyyy-MM-dd'),
178
+ }"
179
+ :style="{
180
+ backgroundColor: day.isSpecialDay ? `var(--color-${day.specialDayColor})` : 'none',
181
+ color: day.isSpecialDay
182
+ ? getColorNumber(day.specialDayColor) < 500
183
+ ? 'var(--color-for-white-bg-font)'
184
+ : '#fff'
185
+ : 'none'
160
186
  }"
161
187
  @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
162
188
  >
package/dist/components/calendar/__stories/AntDatePicker.stories.js CHANGED
@@ -7,6 +7,7 @@ module.exports = exports.Docs = void 0;
7
7
  var _AntDatePicker = _interopRequireDefault(require("../AntDatePicker.vue"));
8
8
  var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"));
9
9
  var _vue = require("vue");
10
+ var _dateFns = require("date-fns");
10
11
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
12
  const meta = {
12
13
  title: "Components/Date Picker",
@@ -53,5 +54,11 @@ const Docs = exports.Docs = {
53
54
  </div>
54
55
  </div>`
55
56
  }),
56
- args: {}
57
+ args: {
58
+ specialDays: [{
59
+ name: "Special Day",
60
+ date: (0, _dateFns.format)((0, _dateFns.addDays)(/* @__PURE__ */new Date(), 1), "yyyy-MM-dd"),
61
+ color: "success-300"
62
+ }]
63
+ }
57
64
  };
package/dist/components/calendar/__stories/AntDatePicker.stories.mjs CHANGED
@@ -3,6 +3,10 @@ import AntDateSwitcher from "../AntDateSwitcher.vue";
3
3
  import {
4
4
  ref
5
5
  } from "vue";
6
+ import {
7
+ addDays,
8
+ format
9
+ } from "date-fns";
6
10
  const meta = {
7
11
  title: "Components/Date Picker",
8
12
  component: AntCalendar,
@@ -48,5 +52,13 @@ export const Docs = {
48
52
  </div>
49
53
  </div>`
50
54
  }),
51
- args: {}
55
+ args: {
56
+ specialDays: [
57
+ {
58
+ name: "Special Day",
59
+ date: format(addDays(/* @__PURE__ */ new Date(), 1), "yyyy-MM-dd"),
60
+ color: "success-300"
61
+ }
62
+ ]
63
+ }
52
64
  };
package/dist/index.css CHANGED
@@ -1 +1 @@
1
- @import "tailwindcss";@theme inline{--color-base-50:var(--color-slate-50);--color-base-100:var(--color-slate-100);--color-base-200:var(--color-slate-200);--color-base-300:var(--color-slate-300);--color-base-400:var(--color-slate-400);--color-base-500:var(--color-slate-500);--color-base-600:var(--color-slate-600);--color-base-700:var(--color-slate-700);--color-base-800:var(--color-slate-800);--color-base-900:var(--color-slate-900);--color-base-950:var(--color-slate-950);--color-primary-50:var(--color-sky-50);--color-primary-100:var(--color-sky-100);--color-primary-200:var(--color-sky-200);--color-primary-300:var(--color-sky-300);--color-primary-400:var(--color-sky-400);--color-primary-500:var(--color-sky-500);--color-primary-600:var(--color-sky-600);--color-primary-700:var(--color-sky-700);--color-primary-800:var(--color-sky-800);--color-primary-900:var(--color-sky-900);--color-primary-950:var(--color-sky-950);--color-secondary-50:var(--color-lime-50);--color-secondary-100:var(--color-lime-100);--color-secondary-200:var(--color-lime-200);--color-secondary-300:var(--color-lime-300);--color-secondary-400:var(--color-lime-400);--color-secondary-500:var(--color-lime-500);--color-secondary-600:var(--color-lime-600);--color-secondary-700:var(--color-lime-700);--color-secondary-800:var(--color-lime-800);--color-secondary-900:var(--color-lime-900);--color-secondary-950:var(--color-lime-950);--color-info-50:var(--color-blue-50);--color-info-100:var(--color-blue-100);--color-info-200:var(--color-blue-200);--color-info-300:var(--color-blue-300);--color-info-400:var(--color-blue-400);--color-info-500:var(--color-blue-500);--color-info-600:var(--color-blue-600);--color-info-700:var(--color-blue-700);--color-info-800:var(--color-blue-800);--color-info-900:var(--color-blue-900);--color-info-950:var(--color-blue-950);--color-success-50:var(--color-green-50);--color-success-100:var(--color-green-100);--color-success-200:var(--color-green-200);--color-success-300:var(--color-green-300);--color-success-400:var(--color-green-400);--color-success-500:var(--color-green-500);--color-success-600:var(--color-green-600);--color-success-700:var(--color-green-700);--color-success-800:var(--color-green-800);--color-success-900:var(--color-green-900);--color-success-950:var(--color-green-950);--color-warning-50:var(--color-yellow-50);--color-warning-100:var(--color-yellow-100);--color-warning-200:var(--color-yellow-200);--color-warning-300:var(--color-yellow-300);--color-warning-400:var(--color-yellow-400);--color-warning-500:var(--color-yellow-500);--color-warning-600:var(--color-yellow-600);--color-warning-700:var(--color-yellow-700);--color-warning-800:var(--color-yellow-800);--color-warning-900:var(--color-yellow-900);--color-warning-950:var(--color-yellow-950);--color-danger-50:var(--color-red-50);--color-danger-100:var(--color-red-100);--color-danger-200:var(--color-red-200);--color-danger-300:var(--color-red-300);--color-danger-400:var(--color-red-400);--color-danger-500:var(--color-red-500);--color-danger-600:var(--color-red-600);--color-danger-700:var(--color-red-700);--color-danger-800:var(--color-red-800);--color-danger-900:var(--color-red-900);--color-danger-950:var(--color-red-950);--color-for-white-bg-font:var(--color-base-600);--color-for-black-bg-font:var(--color-base-100);--color-base-50-font:var(--color-base-600);--color-base-100-font:var(--color-base-600);--color-base-200-font:var(--color-base-600);--color-base-300-font:var(--color-base-600);--color-base-400-font:var(--color-base-600);--color-base-500-font:var(--color-base-100);--color-base-600-font:var(--color-base-100);--color-base-700-font:var(--color-base-100);--color-base-800-font:var(--color-base-100);--color-base-900-font:var(--color-base-100);--color-base-950-font:var(--color-base-100);--color-primary-50-font:var(--color-base-600);--color-primary-100-font:var(--color-base-600);--color-primary-200-font:var(--color-base-600);--color-primary-300-font:var(--color-base-600);--color-primary-400-font:var(--color-base-600);--color-primary-500-font:var(--color-base-100);--color-primary-600-font:var(--color-base-100);--color-primary-700-font:var(--color-base-100);--color-primary-800-font:var(--color-base-100);--color-primary-900-font:var(--color-base-100);--color-primary-950-font:var(--color-base-100);--color-secondary-50-font:var(--color-base-600);--color-secondary-100-font:var(--color-base-600);--color-secondary-200-font:var(--color-base-600);--color-secondary-300-font:var(--color-base-600);--color-secondary-400-font:var(--color-base-600);--color-secondary-500-font:var(--color-base-100);--color-secondary-600-font:var(--color-base-100);--color-secondary-700-font:var(--color-base-100);--color-secondary-800-font:var(--color-base-100);--color-secondary-900-font:var(--color-base-100);--color-secondary-950-font:var(--color-base-100);--color-success-50-font:var(--color-base-600);--color-success-100-font:var(--color-base-600);--color-success-200-font:var(--color-base-600);--color-success-300-font:var(--color-base-600);--color-success-400-font:var(--color-base-600);--color-success-500-font:var(--color-base-100);--color-success-600-font:var(--color-base-100);--color-success-700-font:var(--color-base-100);--color-success-800-font:var(--color-base-100);--color-success-900-font:var(--color-base-100);--color-success-950-font:var(--color-base-100);--color-info-50-font:var(--color-base-600);--color-info-100-font:var(--color-base-600);--color-info-200-font:var(--color-base-600);--color-info-300-font:var(--color-base-600);--color-info-400-font:var(--color-base-600);--color-info-500-font:var(--color-base-100);--color-info-600-font:var(--color-base-100);--color-info-700-font:var(--color-base-100);--color-info-800-font:var(--color-base-100);--color-info-900-font:var(--color-base-100);--color-info-950-font:var(--color-base-100);--color-warning-50-font:var(--color-base-600);--color-warning-100-font:var(--color-base-600);--color-warning-200-font:var(--color-base-600);--color-warning-300-font:var(--color-base-600);--color-warning-400-font:var(--color-base-600);--color-warning-500-font:var(--color-base-100);--color-warning-600-font:var(--color-base-100);--color-warning-700-font:var(--color-base-100);--color-warning-800-font:var(--color-base-100);--color-warning-900-font:var(--color-base-100);--color-warning-950-font:var(--color-base-100);--color-danger-50-font:var(--color-base-600);--color-danger-100-font:var(--color-base-600);--color-danger-200-font:var(--color-base-600);--color-danger-300-font:var(--color-base-600);--color-danger-400-font:var(--color-base-600);--color-danger-500-font:var(--color-base-100);--color-danger-600-font:var(--color-base-100);--color-danger-700-font:var(--color-base-100);--color-danger-800-font:var(--color-base-100);--color-danger-900-font:var(--color-base-100);--color-danger-950-font:var(--color-base-100);--text-2xs:0.625rem;--text-2xs--line-height:0.75rem;--animate-skeleton:skeleton 2s ease-out infinite;@keyframes skeleton{0%,to{background-color:var(--color-base-300)}50%{background-color:var(--color-base-100)}}}::-webkit-scrollbar{@apply w-3 h-3 bg-transparent}::-webkit-scrollbar-track{@apply bg-transparent}::-webkit-scrollbar-corner{@apply bg-transparent}::-webkit-scrollbar-thumb{@apply bg-base-200 rounded-full border-3 border-transparent cursor-pointer bg-clip-content}::-webkit-scrollbar-thumb:hover{@apply bg-base-300 border-l-1 border-t-1}
1
+ @import "tailwindcss";@theme inline{--color-base-50:var(--color-slate-50);--color-base-100:var(--color-slate-100);--color-base-200:var(--color-slate-200);--color-base-300:var(--color-slate-300);--color-base-400:var(--color-slate-400);--color-base-500:var(--color-slate-500);--color-base-600:var(--color-slate-600);--color-base-700:var(--color-slate-700);--color-base-800:var(--color-slate-800);--color-base-900:var(--color-slate-900);--color-base-950:var(--color-slate-950);--color-primary-50:var(--color-sky-50);--color-primary-100:var(--color-sky-100);--color-primary-200:var(--color-sky-200);--color-primary-300:var(--color-sky-300);--color-primary-400:var(--color-sky-400);--color-primary-500:var(--color-sky-500);--color-primary-600:var(--color-sky-600);--color-primary-700:var(--color-sky-700);--color-primary-800:var(--color-sky-800);--color-primary-900:var(--color-sky-900);--color-primary-950:var(--color-sky-950);--color-secondary-50:var(--color-lime-50);--color-secondary-100:var(--color-lime-100);--color-secondary-200:var(--color-lime-200);--color-secondary-300:var(--color-lime-300);--color-secondary-400:var(--color-lime-400);--color-secondary-500:var(--color-lime-500);--color-secondary-600:var(--color-lime-600);--color-secondary-700:var(--color-lime-700);--color-secondary-800:var(--color-lime-800);--color-secondary-900:var(--color-lime-900);--color-secondary-950:var(--color-lime-950);--color-info-50:var(--color-blue-50);--color-info-100:var(--color-blue-100);--color-info-200:var(--color-blue-200);--color-info-300:var(--color-blue-300);--color-info-400:var(--color-blue-400);--color-info-500:var(--color-blue-500);--color-info-600:var(--color-blue-600);--color-info-700:var(--color-blue-700);--color-info-800:var(--color-blue-800);--color-info-900:var(--color-blue-900);--color-info-950:var(--color-blue-950);--color-success-50:var(--color-green-50);--color-success-100:var(--color-green-100);--color-success-200:var(--color-green-200);--color-success-300:var(--color-green-300);--color-success-400:var(--color-green-400);--color-success-500:var(--color-green-500);--color-success-600:var(--color-green-600);--color-success-700:var(--color-green-700);--color-success-800:var(--color-green-800);--color-success-900:var(--color-green-900);--color-success-950:var(--color-green-950);--color-warning-50:var(--color-yellow-50);--color-warning-100:var(--color-yellow-100);--color-warning-200:var(--color-yellow-200);--color-warning-300:var(--color-yellow-300);--color-warning-400:var(--color-yellow-400);--color-warning-500:var(--color-yellow-500);--color-warning-600:var(--color-yellow-600);--color-warning-700:var(--color-yellow-700);--color-warning-800:var(--color-yellow-800);--color-warning-900:var(--color-yellow-900);--color-warning-950:var(--color-yellow-950);--color-danger-50:var(--color-red-50);--color-danger-100:var(--color-red-100);--color-danger-200:var(--color-red-200);--color-danger-300:var(--color-red-300);--color-danger-400:var(--color-red-400);--color-danger-500:var(--color-red-500);--color-danger-600:var(--color-red-600);--color-danger-700:var(--color-red-700);--color-danger-800:var(--color-red-800);--color-danger-900:var(--color-red-900);--color-danger-950:var(--color-red-950);--color-for-white-bg-font:var(--color-base-600);--color-for-black-bg-font:var(--color-base-100);--color-base-50-font:var(--color-base-600);--color-base-100-font:var(--color-base-600);--color-base-200-font:var(--color-base-600);--color-base-300-font:var(--color-base-600);--color-base-400-font:var(--color-base-600);--color-base-500-font:var(--color-base-100);--color-base-600-font:var(--color-base-100);--color-base-700-font:var(--color-base-100);--color-base-800-font:var(--color-base-100);--color-base-900-font:var(--color-base-100);--color-base-950-font:var(--color-base-100);--color-primary-50-font:var(--color-base-600);--color-primary-100-font:var(--color-base-600);--color-primary-200-font:var(--color-base-600);--color-primary-300-font:var(--color-base-600);--color-primary-400-font:var(--color-base-600);--color-primary-500-font:var(--color-base-100);--color-primary-600-font:var(--color-base-100);--color-primary-700-font:var(--color-base-100);--color-primary-800-font:var(--color-base-100);--color-primary-900-font:var(--color-base-100);--color-primary-950-font:var(--color-base-100);--color-secondary-50-font:var(--color-base-600);--color-secondary-100-font:var(--color-base-600);--color-secondary-200-font:var(--color-base-600);--color-secondary-300-font:var(--color-base-600);--color-secondary-400-font:var(--color-base-600);--color-secondary-500-font:var(--color-base-100);--color-secondary-600-font:var(--color-base-100);--color-secondary-700-font:var(--color-base-100);--color-secondary-800-font:var(--color-base-100);--color-secondary-900-font:var(--color-base-100);--color-secondary-950-font:var(--color-base-100);--color-success-50-font:var(--color-base-600);--color-success-100-font:var(--color-base-600);--color-success-200-font:var(--color-base-600);--color-success-300-font:var(--color-base-600);--color-success-400-font:var(--color-base-600);--color-success-500-font:var(--color-base-100);--color-success-600-font:var(--color-base-100);--color-success-700-font:var(--color-base-100);--color-success-800-font:var(--color-base-100);--color-success-900-font:var(--color-base-100);--color-success-950-font:var(--color-base-100);--color-info-50-font:var(--color-base-600);--color-info-100-font:var(--color-base-600);--color-info-200-font:var(--color-base-600);--color-info-300-font:var(--color-base-600);--color-info-400-font:var(--color-base-600);--color-info-500-font:var(--color-base-100);--color-info-600-font:var(--color-base-100);--color-info-700-font:var(--color-base-100);--color-info-800-font:var(--color-base-100);--color-info-900-font:var(--color-base-100);--color-info-950-font:var(--color-base-100);--color-warning-50-font:var(--color-base-600);--color-warning-100-font:var(--color-base-600);--color-warning-200-font:var(--color-base-600);--color-warning-300-font:var(--color-base-600);--color-warning-400-font:var(--color-base-600);--color-warning-500-font:var(--color-base-100);--color-warning-600-font:var(--color-base-100);--color-warning-700-font:var(--color-base-100);--color-warning-800-font:var(--color-base-100);--color-warning-900-font:var(--color-base-100);--color-warning-950-font:var(--color-base-100);--color-danger-50-font:var(--color-base-600);--color-danger-100-font:var(--color-base-600);--color-danger-200-font:var(--color-base-600);--color-danger-300-font:var(--color-base-600);--color-danger-400-font:var(--color-base-600);--color-danger-500-font:var(--color-base-100);--color-danger-600-font:var(--color-base-100);--color-danger-700-font:var(--color-base-100);--color-danger-800-font:var(--color-base-100);--color-danger-900-font:var(--color-base-100);--color-danger-950-font:var(--color-base-100);--text-2xs:0.625rem;--text-2xs--line-height:0.75rem;--animate-skeleton:skeleton 2s ease-out infinite;@keyframes skeleton{0%,to{background-color:var(--color-base-300)}50%{background-color:var(--color-base-100)}}}::-webkit-scrollbar{@apply w-3 h-3 bg-base-100}::-webkit-scrollbar-track{@apply bg-base-100}::-webkit-scrollbar-corner{@apply bg-base-100}::-webkit-scrollbar-thumb{@apply bg-base-300 rounded-full border-3 border-transparent cursor-pointer bg-clip-content}::-webkit-scrollbar-thumb:hover{@apply bg-base-400}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@antify/ui",
3
- "version": "3.3.0",
3
+ "version": "3.3.2",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "exports": {