@antify/ui 4.1.25 → 4.1.26

package/dist/components/calendar/AntDatePicker.vue

@@ -4,6 +4,7 @@ import {
   format,
   addDays,
   subDays,
+  getISOWeek,
 } from 'date-fns';
 import {
   ref,
@@ -13,7 +14,6 @@ import {
   onMounted,
 } from 'vue';
 import AntDateSwitcher from './AntDateSwitcher.vue';
-import AntButton from '../AntButton.vue';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntTooltip from '../AntTooltip.vue';
 
@@ -24,7 +24,7 @@ const props = withDefaults(defineProps<{
    */
   modelValue: number;
   showWeekend?: boolean;
-  showTodayButton?: boolean;
+  showWeekNumbers?: boolean;
   skeleton?: boolean;
   /**
    * To highlight specific days with a custom color e.g. legal holidays
@@ -37,7 +37,7 @@ const props = withDefaults(defineProps<{
   }[];
 }>(), {
   showWeekend: false,
-  showTodayButton: true,
+  showWeekNumbers: false,
   skeleton: false,
   specialDays: () => [],
 });
@@ -53,68 +53,79 @@ const currentMonthIndex = ref(new Date(props.modelValue).getMonth());
 const currentYear = ref(new Date(props.modelValue).getFullYear());
 const matrix = computed(() => {
   /**
-   * The picker always starts with Monday.
-   * So if the first day of the current month is for example a wednesday,
-   * the first two days (Monday and Tuesday) should be from the previous month.
-   * Also, the last days of the matrix should be filled with the next month's days.
-   */
+  * The picker always starts with Monday.
+  * So if the first day of the current month is for example a wednesday,
+  * the first two days (Monday and Tuesday) should be from the previous month.
+  * Also, the last days of the matrix should be filled with the next month's days.
+  */
   const firstDateOfMonth = new Date(currentYear.value, currentMonthIndex.value, 1);
-  const _matrix = Array.from({
-    length: COUNT_ROWS,
-  }, () => Array(COUNT_COLUMNS).fill(null));
+  const _matrix = [];
 
   // Emit on which weekday the first day of the month is.
-  const weekdayIndexOfFirstDay = (firstDateOfMonth.getDay() - 1); // 0 is Monday, 6 is Sunday
+  let weekdayIndexOfFirstDay = firstDateOfMonth.getDay() - 1;
+
+  if (weekdayIndexOfFirstDay === -1) {
+    weekdayIndexOfFirstDay = 6;
+  }
 
   // Subtract the gap from the currentDate
   let currentDate = subDays(firstDateOfMonth, weekdayIndexOfFirstDay);
 
-  for (let weekIndex = 0; weekIndex < _matrix.length; weekIndex++) {
+  for (let weekIndex = 0; weekIndex < COUNT_ROWS; weekIndex++) {
+    const weekDays = [];
+    const weekNumber = getISOWeek(currentDate);
+
     for (let weekdayIndex = 0; weekdayIndex < COUNT_COLUMNS; weekdayIndex++) {
       const date = format(currentDate, 'yyyy-MM-dd');
       const isCurrentMonth = getMonth(currentDate) === currentMonthIndex.value;
 
-      _matrix[weekIndex][weekdayIndex] = {
+      weekDays.push({
         date,
         label: format(currentDate, 'd'),
         month: getMonth(currentDate),
         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,
-      };
+        isSpecialDay: !!props.specialDays.find(sd => sd.date === date),
+        specialDayColor: props.specialDays.find(sd => sd.date === date)?.color,
+      });
 
       currentDate = addDays(currentDate, 1);
     }
-  }
 
-  if (props.showWeekend) {
-    return _matrix;
+    _matrix.push({
+      weekNumber,
+      days: props.showWeekend ? weekDays : weekDays.filter(day => !day.isWeekend),
+    });
   }
 
-  // Filter out weekends
-  return _matrix.map(week => week.filter(day => !day.isWeekend));
+  return _matrix;
 });
 const weekDays = computed(() => {
   // TODO:: Add translation support
-  return props.showWeekend
-    ? [
-      'M',
-      'D',
-      'M',
-      'D',
-      'F',
-      'S',
-      'S',
-    ]
-    : [
-      'M',
-      'D',
-      'M',
-      'D',
-      'F',
+  const days = props.showWeekend ? [
+    'M',
+    'D',
+    'M',
+    'D',
+    'F',
+    'S',
+    'S',
+  ] : [
+    'M',
+    'D',
+    'M',
+    'D',
+    'F',
+  ];
+  if (props.showWeekNumbers) {
+    return [
+      'KW',
+      ...days,
     ];
+  }
+
+  return days;
 });
 
 const getColorNumber = (color: string) => {
@@ -158,34 +169,52 @@ onMounted(() => {
       v-model:month="currentMonthIndex"
       v-model:year="currentYear"
       :skeleton="skeleton"
+      class="pb-1"
     />
 
     <div
-      class="grid gap-1 p-px"
-      :class="{
-        'grid-cols-7': showWeekend,
-        'grid-cols-5': !showWeekend,
+      class="grid gap-1"
+      :style="{
+        gridTemplateColumns: `repeat(${weekDays.length}, minmax(0, 1fr))`
       }"
     >
       <div
         v-for="day in weekDays"
         :key="day"
-        class="text-for-white-bg-font p-2 text-center"
+        class="text-for-white-bg-font text-center flex items-center justify-center"
       >
         <AntSkeleton
           :visible="skeleton"
           rounded
+          class="w-full"
         >
-          {{ day }}
+          <div class="flex items-center justify-center w-full py-2">
+            {{ day }}
+          </div>
         </AntSkeleton>
       </div>
 
       <template
-        v-for="week in matrix"
-        :key="week"
+        v-for="(week, wIndex) in matrix"
+        :key="wIndex"
       >
+        <div
+          v-if="showWeekNumbers"
+          class="flex text-base-500 font-semibold bg-base-100 rounded-md"
+        >
+          <AntSkeleton
+            :visible="skeleton"
+            rounded
+            class="w-full"
+          >
+            <div class="flex items-center justify-center w-full py-2">
+              {{ week.weekNumber }}
+            </div>
+          </AntSkeleton>
+        </div>
+
         <template
-          v-for="day in week"
+          v-for="day in week.days"
           :key="day.date"
         >
           <AntSkeleton
@@ -227,18 +256,5 @@ onMounted(() => {
         </template>
       </template>
     </div>
-
-    <div
-      v-if="showTodayButton"
-      class="flex items-center justify-center p-2"
-    >
-      <AntButton
-        :skeleton="skeleton"
-        data-e2e="today-button"
-        @click="() => $emit('update:modelValue', Date.now())"
-      >
-        Heute
-      </AntButton>
-    </div>
   </div>
 </template>

package/dist/components/calendar/__stories/AntDatePicker.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntCalendar>;
 export default meta;
 type Story = StoryObj<typeof AntCalendar>;
 export declare const Docs: Story;
+export declare const Summary: Story;

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

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+module.exports = exports.Summary = 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");
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Components/Date Picker",
@@ -21,6 +23,14 @@ const meta = {
     AntDateSwitcher: _AntDateSwitcher.default
   },
   argTypes: {
+    modelValue: {
+      control: "number",
+      table: {
+        type: {
+          summary: "number"
+        }
+      }
+    },
     onSelect: {
       action: "select"
     }
@@ -28,37 +38,140 @@ const meta = {
 };
 module.exports = meta;
 const Docs = exports.Docs = {
-  parameters: {
-    chromatic: {
-      // disableSnapshot: false,
-    }
-  },
   render: args => ({
     components: {
       AntCalendar: _AntDatePicker.default
     },
     setup() {
-      const value = (0, _vue.ref)(Date.now());
       return {
-        value,
         args
       };
     },
     template: `
       <div class="p-4">
-        <div class="dashed w-64">
+        <div class="dashed w-72.5">
           <AntCalendar
             v-bind="args"
-            v-model="value"
+            v-model="args.modelValue"
           />
         </div>
       </div>`
   }),
   args: {
+    modelValue: (/* @__PURE__ */new Date()).setHours(0, 0, 0, 0),
     specialDays: [{
       name: "Special Day",
       date: (0, _dateFns.format)((0, _dateFns.addDays)(/* @__PURE__ */new Date(), 1), "yyyy-MM-dd"),
       color: "success-300"
     }]
   }
+};
+const Summary = exports.Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: args => ({
+    components: {
+      AntCalendar: _AntDatePicker.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
+    setup() {
+      const fixedDate = (/* @__PURE__ */new Date("2026-01-01")).getTime();
+      const value = (0, _vue.ref)(fixedDate);
+      return {
+        value,
+        args,
+        fixedDate
+      };
+    },
+    template: `
+      <AntFormGroup class="p-4 flex flex-col gap-4 w-fit">
+        <AntFormGroup>
+          <AntFormGroupLabel>Standard States</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-10">
+            <div class="flex flex-col w-64 gap-2">
+              <span>1. Working days only</span>
+              <AntCalendar v-model="value" :show-weekend="false" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>2. With Weekends</span>
+              <AntCalendar v-model="value" :show-weekend="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>3. With Week Numbers</span>
+              <AntCalendar v-model="value" :show-week-numbers="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>4. Weekends & Week Numbers</span>
+              <AntCalendar v-model="value" :show-weekend="true" :show-week-numbers="true" />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Skeleton States</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-10">
+            <div class="flex flex-col w-64 gap-2">
+              <span>1. Basic Skeleton</span>
+              <AntCalendar :model-value="fixedDate" skeleton />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>2. Skeleton + Weekends</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-weekend="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>3. Skeleton + Week Numbers</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-week-numbers="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>4. Full Skeleton</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-weekend="true" :show-week-numbers="true" />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Special Days</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-4">
+            <div class="flex flex-col gap-2 w-64 col-span-2">
+              <span class="text-center">Calendar with highlights (Jan 2026)</span>
+              <AntCalendar
+                v-model="value"
+                :show-weekend="true"
+                :show-week-numbers="true"
+                :special-days="args.specialDays"
+              />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
+  args: {
+    modelValue: (/* @__PURE__ */new Date("2026-01-01")).getTime(),
+    specialDays: [{
+      name: "New Year Day",
+      date: "2026-01-01",
+      color: "danger-200"
+    }, {
+      name: "Success Event",
+      date: "2026-01-05",
+      color: "success-200"
+    }, {
+      name: "Another Special",
+      date: "2026-01-15",
+      color: "warning-200"
+    }]
+  }
 };

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

@@ -7,6 +7,8 @@ import {
   addDays,
   format
 } from "date-fns";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
   title: "Components/Date Picker",
   component: AntCalendar,
@@ -19,6 +21,14 @@ const meta = {
     AntDateSwitcher
   },
   argTypes: {
+    modelValue: {
+      control: "number",
+      table: {
+        type: {
+          summary: "number"
+        }
+      }
+    },
     onSelect: {
       action: "select"
     }
@@ -26,33 +36,27 @@ const meta = {
 };
 export default meta;
 export const Docs = {
-  parameters: {
-    chromatic: {
-      // disableSnapshot: false,
-    }
-  },
   render: (args) => ({
     components: {
       AntCalendar
     },
     setup() {
-      const value = ref(Date.now());
       return {
-        value,
         args
       };
     },
     template: `
       <div class="p-4">
-        <div class="dashed w-64">
+        <div class="dashed w-72.5">
           <AntCalendar
             v-bind="args"
-            v-model="value"
+            v-model="args.modelValue"
           />
         </div>
       </div>`
   }),
   args: {
+    modelValue: (/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0),
     specialDays: [
       {
         name: "Special Day",
@@ -62,3 +66,116 @@ export const Docs = {
     ]
   }
 };
+export const Summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args) => ({
+    components: {
+      AntCalendar,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
+    setup() {
+      const fixedDate = (/* @__PURE__ */ new Date("2026-01-01")).getTime();
+      const value = ref(fixedDate);
+      return {
+        value,
+        args,
+        fixedDate
+      };
+    },
+    template: `
+      <AntFormGroup class="p-4 flex flex-col gap-4 w-fit">
+        <AntFormGroup>
+          <AntFormGroupLabel>Standard States</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-10">
+            <div class="flex flex-col w-64 gap-2">
+              <span>1. Working days only</span>
+              <AntCalendar v-model="value" :show-weekend="false" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>2. With Weekends</span>
+              <AntCalendar v-model="value" :show-weekend="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>3. With Week Numbers</span>
+              <AntCalendar v-model="value" :show-week-numbers="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>4. Weekends & Week Numbers</span>
+              <AntCalendar v-model="value" :show-weekend="true" :show-week-numbers="true" />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Skeleton States</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-10">
+            <div class="flex flex-col w-64 gap-2">
+              <span>1. Basic Skeleton</span>
+              <AntCalendar :model-value="fixedDate" skeleton />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>2. Skeleton + Weekends</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-weekend="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>3. Skeleton + Week Numbers</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-week-numbers="true" />
+            </div>
+
+            <div class="flex flex-col w-64 gap-2">
+              <span>4. Full Skeleton</span>
+              <AntCalendar :model-value="fixedDate" skeleton :show-weekend="true" :show-week-numbers="true" />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+
+        <AntFormGroup>
+          <AntFormGroupLabel>Special Days</AntFormGroupLabel>
+
+          <AntFormGroup class="grid grid-cols-4 gap-4">
+            <div class="flex flex-col gap-2 w-64 col-span-2">
+              <span class="text-center">Calendar with highlights (Jan 2026)</span>
+              <AntCalendar
+                v-model="value"
+                :show-weekend="true"
+                :show-week-numbers="true"
+                :special-days="args.specialDays"
+              />
+            </div>
+          </AntFormGroup>
+        </AntFormGroup>
+      </AntFormGroup>`
+  }),
+  args: {
+    modelValue: (/* @__PURE__ */ new Date("2026-01-01")).getTime(),
+    specialDays: [
+      {
+        name: "New Year Day",
+        date: "2026-01-01",
+        color: "danger-200"
+      },
+      {
+        name: "Success Event",
+        date: "2026-01-05",
+        color: "success-200"
+      },
+      {
+        name: "Another Special",
+        date: "2026-01-15",
+        color: "warning-200"
+      }
+    ]
+  }
+};

package/package.json

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