@antify/ui 3.1.27 → 3.2.3

package/dist/components/calendar/AntDatePicker.vue

@@ -0,0 +1,162 @@
+<script lang="ts" setup>
+import {
+  getMonth,
+  format,
+  addDays,
+  subDays,
+} from 'date-fns';
+import {
+  computed,
+  defineEmits, ref, watch,
+} from 'vue';
+import AntDateSwitcher from './AntDateSwitcher.vue';
+import AntButton from '../AntButton.vue';
+
+const props = withDefaults(defineProps<{
+  /**
+   * The date which should be visible when the date picker is opened
+   * as timestamp.
+   */
+  modelValue: number;
+  showWeekend?: boolean;
+  showTodayButton?: boolean;
+}>(), {
+  showWeekend: false,
+  showTodayButton: true,
+});
+const emit = defineEmits([
+  'select',
+  'update:modelValue',
+]);
+
+const COUNT_ROWS = 6;
+const COUNT_COLUMNS = 7;
+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.
+   */
+  const firstDateOfMonth = new Date(currentYear.value, currentMonthIndex.value, 1);
+  const _matrix = Array.from({
+    length: COUNT_ROWS,
+  }, () => Array(COUNT_COLUMNS).fill(null));
+
+  // Emit on which weekday the first day of the month is.
+  const weekdayIndexOfFirstDay = (firstDateOfMonth.getDay() - 1); // 0 is Monday, 6 is Sunday
+
+  // Subtract the gap from the currentDate
+  let currentDate = subDays(firstDateOfMonth, weekdayIndexOfFirstDay);
+
+  for (let weekIndex = 0; weekIndex < _matrix.length; weekIndex++) {
+    for (let weekdayIndex = 0; weekdayIndex < COUNT_COLUMNS; weekdayIndex++) {
+      const date = format(currentDate, 'yyyy-MM-dd');
+      const isCurrentMonth = getMonth(currentDate) === currentMonthIndex.value;
+
+      _matrix[weekIndex][weekdayIndex] = {
+        date,
+        label: format(currentDate, 'd'),
+        month: getMonth(currentDate),
+        isCurrentMonth,
+        isWeekend: weekdayIndex === 5 || weekdayIndex === 6,
+        isToday: date === format(Date.now(), 'yyyy-MM-dd') && isCurrentMonth,
+      };
+
+      currentDate = addDays(currentDate, 1);
+    }
+  }
+
+  if (props.showWeekend) {
+    return _matrix;
+  }
+
+  // Filter out weekends
+  return _matrix.map(week => week.filter(day => !day.isWeekend));
+});
+const weekDays = computed(() => {
+  // TODO:: Add translation support
+  return props.showWeekend
+    ? [
+      'M',
+      'D',
+      'M',
+      'D',
+      'F',
+      'S',
+      'S',
+    ]
+    : [
+      'M',
+      'D',
+      'M',
+      'D',
+      'F',
+    ];
+});
+
+watch(() => props.modelValue, (val) => {
+  const date = new Date(val);
+  currentMonthIndex.value = date.getMonth();
+  currentYear.value = date.getFullYear();
+});
+</script>
+
+<template>
+  <div>
+    <AntDateSwitcher
+      v-model:month="currentMonthIndex"
+      v-model:year="currentYear"
+    />
+
+    <div
+      class="grid gap-1 p-px"
+      :class="{
+        'grid-cols-7': showWeekend,
+        'grid-cols-5': !showWeekend,
+      }"
+    >
+      <div
+        v-for="day in weekDays"
+        :key="day"
+        class="text-for-white-bg-font text-center p-2"
+      >
+        {{ day }}
+      </div>
+
+      <template
+        v-for="week in matrix"
+        :key="week"
+      >
+        <div
+          v-for="day in week"
+          :key="day.date"
+          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'),
+          }"
+          @click="() => $emit('update:modelValue', new Date(day.date).getTime())"
+        >
+          {{ day.label }}
+        </div>
+      </template>
+    </div>
+
+    <div
+      v-if="showTodayButton"
+      class="flex items-center justify-center p-2"
+    >
+      <AntButton
+        @click="() => $emit('update:modelValue', Date.now())"
+      >
+        Heute
+      </AntButton>
+    </div>
+  </div>
+</template>

package/dist/components/calendar/AntDateSwitcher.vue

@@ -0,0 +1,148 @@
+<script lang="ts" setup>
+import AntButton from '../AntButton.vue';
+import {
+  faChevronLeft,
+  faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  Grouped,
+} from '../../enums';
+import AntDropdown from '../AntDropdown.vue';
+import {
+  nextTick,
+  ref, watch,
+} from 'vue';
+import AntMonthPicker from './AntMonthPicker.vue';
+import AntYearPicker from './AntYearPicker.vue';
+
+const props = defineProps<{
+  /**
+   * Selected month index (0-11).
+   */
+  month: number;
+  year: number;
+}>();
+const emit = defineEmits([
+  'update:month',
+  'update:year',
+]);
+// TODO:: add translation support
+const options = [
+  'Januar',
+  'Februar',
+  'März',
+  'April',
+  'Mai',
+  'Juni',
+  'Juli',
+  'August',
+  'September',
+  'Oktober',
+  'November',
+  'Dezember',
+];
+const showMonthDropdown = ref(false);
+const showYearDropdown = ref(false);
+const currentYear = new Date().getFullYear();
+const yearPickerRef = ref<InstanceType<typeof AntYearPicker> | null>(null);
+
+watch(showYearDropdown, (val) => {
+  if (val) {
+    setTimeout(() => {
+      yearPickerRef.value?.scrollToYear();
+    }, 50);
+  }
+});
+
+function onSelectYear(year: number) {
+  showYearDropdown.value = false;
+  emit('update:year', year);
+}
+
+function onClickPrevious() {
+  if (props.month === 0) {
+    emit('update:month', 11);
+    nextTick(() => {
+      emit('update:year', props.year - 1);
+    });
+  } else {
+    emit('update:month', props.month - 1);
+  }
+}
+
+function onClickNext() {
+  if (props.month === 11) {
+    emit('update:month', 0);
+    nextTick(() => {
+      emit('update:year', props.year + 1);
+    });
+  } else {
+    emit('update:month', props.month + 1);
+  }
+}
+</script>
+
+<template>
+  <div class="flex">
+    <AntButton
+      :icon-left="faChevronLeft"
+      :grouped="Grouped.left"
+      @click="onClickPrevious"
+    />
+    <AntDropdown
+      v-model:show-dropdown="showMonthDropdown"
+      expanded
+      class="-ml-px"
+    >
+      <AntButton
+        :grouped="Grouped.center"
+        expanded
+        @click="showMonthDropdown = !showMonthDropdown"
+      >
+        {{ options[month] }}
+      </AntButton>
+
+      <template #content>
+        <AntMonthPicker
+          :value="month"
+          :highlight-current-month="year === currentYear"
+          @select="(m) => { emit('update:month', m); showMonthDropdown = false; }"
+        />
+      </template>
+    </AntDropdown>
+
+    <AntDropdown
+      v-model:show-dropdown="showYearDropdown"
+      :content-padding="false"
+      expanded
+      class="-ml-px"
+    >
+      <AntButton
+        :grouped="Grouped.center"
+        expanded
+        @click="showYearDropdown = !showYearDropdown"
+      >
+        {{ year }}
+      </AntButton>
+
+      <template #content>
+        <AntYearPicker
+          ref="yearPickerRef"
+          :value="year"
+          :highlight-current-month="year === currentYear"
+          @select="onSelectYear"
+        />
+      </template>
+    </AntDropdown>
+
+    <div
+      class="-ml-px"
+    >
+      <AntButton
+        :icon-left="faChevronRight"
+        :grouped="Grouped.right"
+        @click="onClickNext"
+      />
+    </div>
+  </div>
+</template>

package/dist/components/calendar/AntMonthPicker.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+withDefaults(
+  defineProps<{
+    /**
+     * Selected month index (0-11).
+     */
+    value: number;
+    highlightCurrentMonth?: boolean;
+  }>(),
+  {
+    highlightCurrentMonth: true,
+  },
+);
+defineEmits([
+  'select',
+]);
+
+const months = [
+  'Januar',
+  'Februar',
+  'März',
+  'April',
+  'Mai',
+  'Juni',
+  'Juli',
+  'August',
+  'September',
+  'Oktober',
+  'November',
+  'Dezember',
+];
+const currentMonthIndex = new Date().getMonth();
+</script>
+
+<template>
+  <div class="grid grid-cols-3 gap-2">
+    <div
+      v-for="(month, index) in months"
+      :key="index"
+      class="p-2 text-center text-for-white-bg-font cursor-pointer rounded-md transition-colors"
+      :class="{
+        'outline outline-primary-500': highlightCurrentMonth && index === currentMonthIndex,
+        'bg-primary-500 text-info-500-font hover:bg-primary-300 hover:text-info-300-font': index === value,
+        'hover:bg-base-200 hover:text-base-200-font': index !== value,
+      }"
+      @click="$emit('select', index)"
+    >
+      {{ month }}
+    </div>
+  </div>
+</template>

package/dist/components/calendar/AntYearPicker.vue

@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import {
+  onMounted, ref,
+} from 'vue';
+import AntButton from '../AntButton.vue';
+
+const props = defineProps<{
+  value: number;
+}>();
+defineEmits([
+  'select',
+]);
+
+const currentYear = new Date().getFullYear();
+const years = Array.from({
+  length: 41,
+}, (_, i) => currentYear + 20 - i);
+const yearListRef = ref<HTMLDivElement | null>(null);
+
+/**
+ * Scroll to the selected year.
+ */
+function scrollToYear() {
+  const currentYearElement = yearListRef.value?.querySelector(`[data-year="${props.value}"]`);
+
+  currentYearElement?.scrollIntoView({
+    block: 'center',
+  });
+}
+
+onMounted(scrollToYear);
+
+defineExpose({
+  scrollToYear,
+});
+</script>
+
+<template>
+  <div class="flex flex-col">
+    <div
+      ref="yearListRef"
+      class="h-64 overflow-y-auto flex flex-col gap-2 p-2 border-b border-base-300"
+    >
+      <div
+        v-for="year in years"
+        :key="year"
+        :data-year="year"
+        class="p-2 text-center text-for-white-bg-font cursor-pointer rounded-md transition-colors"
+        :class="{
+          'bg-primary-500 text-info-500-font hover:bg-primary-300 hover:text-info-300-font': year === value,
+          'hover:bg-base-200 hover:text-base-200-font': year !== value,
+          'outline outline-primary-500': year === currentYear,
+        }"
+        @click="$emit('select', year)"
+      >
+        {{ year }}
+      </div>
+    </div>
+
+    <div class="p-2 flex justify-center">
+      <AntButton
+        expanded
+        @click="$emit('select', currentYear)"
+      >
+        {{ currentYear }}
+      </AntButton>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+import AntCalendar from '../AntDatePicker.vue';
+import { type Meta, type StoryObj } from '@storybook/vue3';
+declare const meta: Meta<typeof AntCalendar>;
+export default meta;
+type Story = StoryObj<typeof AntCalendar>;
+export declare const Docs: Story;

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

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Docs = void 0;
+var _AntDatePicker = _interopRequireDefault(require("../AntDatePicker.vue"));
+var _AntDateSwitcher = _interopRequireDefault(require("../AntDateSwitcher.vue"));
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/DatePicker",
+  component: _AntDatePicker.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  subcomponents: {
+    AntDateSwitcher: _AntDateSwitcher.default
+  },
+  argTypes: {
+    onSelect: {
+      action: "select"
+    }
+  }
+};
+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">
+          <AntCalendar
+            v-bind="args"
+            v-model="value"
+          />
+        </div>
+      </div>`
+  }),
+  args: {}
+};

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

@@ -0,0 +1,52 @@
+import AntCalendar from "../AntDatePicker.vue";
+import AntDateSwitcher from "../AntDateSwitcher.vue";
+import {
+  ref
+} from "vue";
+const meta = {
+  title: "Components/DatePicker",
+  component: AntCalendar,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  subcomponents: {
+    AntDateSwitcher
+  },
+  argTypes: {
+    onSelect: {
+      action: "select"
+    }
+  }
+};
+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">
+          <AntCalendar
+            v-bind="args"
+            v-model="value"
+          />
+        </div>
+      </div>`
+  }),
+  args: {}
+};

package/dist/components/index.d.ts

@@ -38,6 +38,7 @@ import AntAccordionItem from './AntAccordionItem.vue';
 import AntAlert from './AntAlert.vue';
 import AntCard from './AntCard.vue';
 import AntContent from './AntContent.vue';
+import AntDatePicker from './calendar/AntDatePicker.vue';
 import AntDropdown from './AntDropdown.vue';
 import AntIcon from './AntIcon.vue';
 import AntKeycap from './AntKeycap.vue';
@@ -52,4 +53,4 @@ import AntTag from './AntTag.vue';
 import AntToast from './AntToast.vue';
 import AntToaster from './AntToaster.vue';
 import AntTooltip from './AntTooltip.vue';
-export { AntButton, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };
+export { AntButton, AntDatePicker, AntDialog, AntField, AntFormGroup, AntFormGroupLabel, AntBaseInput, AntSelectMenu, AntInputDescription, AntInputLabel, AntInputLimiter, AntCheckbox, AntCheckboxGroup, AntDateInput, AntNumberInput, AntPasswordInput, AntRadio, AntRadioGroup, AntRangeSlider, AntSearch, AntSelect, AntSwitch, AntSwitcher, AntTagInput, AntTextarea, AntTextInput, AntUnitInput, AntImageInput, AntNavLeftLayout, AntNavbar, AntNavbarItem, AntTable, AntTabs, AntTransitionCollapseHeight, AntAccordion, AntAccordionItem, AntAlert, AntCard, AntContent, AntDropdown, AntIcon, AntKeycap, AntListGroup, AntListGroupItem, AntModal, AntPagination, AntPopover, AntSkeleton, AntSpinner, AntTag, AntToast, AntToaster, AntTooltip, AntColorInput, AntMultiSelect, };

package/dist/components/index.js

@@ -69,6 +69,12 @@ Object.defineProperty(exports, "AntDateInput", {
     return _AntDateInput.default;
   }
 });
+Object.defineProperty(exports, "AntDatePicker", {
+  enumerable: true,
+  get: function () {
+    return _AntDatePicker.default;
+  }
+});
 Object.defineProperty(exports, "AntDialog", {
   enumerable: true,
   get: function () {
@@ -367,6 +373,7 @@ var _AntAccordionItem = _interopRequireDefault(require("./AntAccordionItem.vue")
 var _AntAlert = _interopRequireDefault(require("./AntAlert.vue"));
 var _AntCard = _interopRequireDefault(require("./AntCard.vue"));
 var _AntContent = _interopRequireDefault(require("./AntContent.vue"));
+var _AntDatePicker = _interopRequireDefault(require("./calendar/AntDatePicker.vue"));
 var _AntDropdown = _interopRequireDefault(require("./AntDropdown.vue"));
 var _AntIcon = _interopRequireDefault(require("./AntIcon.vue"));
 var _AntKeycap = _interopRequireDefault(require("./AntKeycap.vue"));

package/dist/components/index.mjs

@@ -38,6 +38,7 @@ import AntAccordionItem from "./AntAccordionItem.vue";
 import AntAlert from "./AntAlert.vue";
 import AntCard from "./AntCard.vue";
 import AntContent from "./AntContent.vue";
+import AntDatePicker from "./calendar/AntDatePicker.vue";
 import AntDropdown from "./AntDropdown.vue";
 import AntIcon from "./AntIcon.vue";
 import AntKeycap from "./AntKeycap.vue";
@@ -54,6 +55,7 @@ import AntToaster from "./AntToaster.vue";
 import AntTooltip from "./AntTooltip.vue";
 export {
   AntButton,
+  AntDatePicker,
   AntDialog,
   AntField,
   AntFormGroup,

package/package.json

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