design-system-next 2.16.3 → 2.17.4

package/src/components/date-picker/reusable-calendar/use-reusable-calendar.ts

@@ -0,0 +1,366 @@
+import { computed, ref, watch } from 'vue';
+import { toRefs } from 'vue';
+import dayjs from 'dayjs';
+
+import type { SetupContext } from 'vue';
+import type { ReusableCalendarEmitTypes, ReusableCalendarPropTypes } from './reusable-calendar';
+
+export const useReusableCalendar = (
+  props: ReusableCalendarPropTypes, 
+  emit: SetupContext<ReusableCalendarEmitTypes>['emit']
+) => {
+  // Extract reactive props
+  const { 
+    mode, 
+  } = toRefs(props);
+
+  // Internal state
+  const currentTab = ref<string>('tab-calendar');
+  const calendarTabPageData = ref({
+    selectedMonth: props.selectedMonth ?? dayjs().month(),
+    selectedYear: props.selectedYear ?? dayjs().year(),
+    calendarDays: [] as Array<{ date: Date; inactive: boolean }>,
+  });
+
+  const yearTabPageData = ref({
+    currentPage: 0,
+    itemsPerPage: 12,
+    yearsArray: Array.from(
+      { length: props.minMaxYear.max - props.minMaxYear.min + 1 },
+      (_, index) => props.minMaxYear.min + index,
+    ).filter((year) => year <= props.minMaxYear.max && year >= props.minMaxYear.min),
+  });
+
+  // Computed properties
+  const showMonthInput = computed(() => mode.value === 'full' || mode.value === 'month-year');
+  const showDateInput = computed(() => mode.value === 'full');
+  const showYearInput = computed(() => mode.value === 'full' || mode.value === 'month-year' || mode.value === 'year-only');
+
+  const calendarDays = computed(() => calendarTabPageData.value.calendarDays);
+  const selectedMonthComputed = computed(() => calendarTabPageData.value.selectedMonth);
+  const selectedYearComputed = computed(() => calendarTabPageData.value.selectedYear);
+  const selectedDayComputed = computed(() => props.modelValue ? dayjs(props.modelValue, props.format).date() : 0);
+
+  // Calendar navigation computed properties
+  const calendarTabIsMinMonth = computed(() =>
+    dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .isSame(dayjs().year(props.minMaxYear.min).month(0), 'month'),
+  );
+
+  const calendarTabIsMaxMonth = computed(() =>
+    dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .isSame(dayjs().year(props.minMaxYear.max).month(11), 'month'),
+  );
+
+  const yearTabIsPreviousButtonDisabled = computed(() => {
+    return yearTabPageData.value.currentPage === 0;
+  });
+
+  const yearTabIsNextButtonDisabled = computed(() => {
+    return (
+      (yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage >=
+      yearTabPageData.value.yearsArray.length
+    );
+  });
+
+  // Calendar update function
+  const calendarTabUpdateCalendar = () => {
+    const firstDay = dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .startOf('month')
+      .day();
+
+    const lastDate = dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .endOf('month')
+      .date();
+
+    const prevMonthDays = firstDay;
+    const totalDays = prevMonthDays + lastDate;
+    const nextMonthDays = totalDays % 7 === 0 ? 0 : 7 - (totalDays % 7);
+
+    const calendar = [];
+
+    // Previous month days
+    for (let index = prevMonthDays; index > 0; index--) {
+      const date = dayjs()
+        .year(calendarTabPageData.value.selectedYear)
+        .month(calendarTabPageData.value.selectedMonth)
+        .date(-index + 1);
+
+      calendar.push({ date, inactive: true });
+    }
+
+    // Current month days
+    for (let index = 1; index <= lastDate; index++) {
+      const date = dayjs()
+        .year(calendarTabPageData.value.selectedYear)
+        .month(calendarTabPageData.value.selectedMonth)
+        .date(index);
+
+      calendar.push({ date, inactive: false });
+    }
+
+    // Next month days
+    for (let index = 1; index <= nextMonthDays; index++) {
+      const date = dayjs()
+        .year(calendarTabPageData.value.selectedYear)
+        .month(calendarTabPageData.value.selectedMonth + 1)
+        .date(index);
+
+      calendar.push({ date, inactive: true });
+    }
+
+    calendarTabPageData.value.calendarDays = calendar.map((day) => ({ ...day, date: day.date.toDate() }));
+    goBackToCalendarTab();
+  };
+
+  const goBackToCalendarTab = () => {
+    if(props.mode === 'full' && currentTab.value !== 'tab-calendar') {      
+      currentTab.value = 'tab-calendar';
+    }
+  }
+
+  // Navigation functions
+  const calendarTabPrevMonth = () => {
+    if (calendarTabIsMinMonth.value) return;
+
+    const newDate = dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .subtract(1, 'month');
+
+    calendarTabPageData.value.selectedMonth = newDate.month();
+    calendarTabPageData.value.selectedYear = newDate.year();
+
+    calendarTabUpdateCalendar();
+  };
+
+  const calendarTabNextMonth = () => {
+    if (calendarTabIsMaxMonth.value) return;
+
+    const newDate = dayjs()
+      .year(calendarTabPageData.value.selectedYear)
+      .month(calendarTabPageData.value.selectedMonth)
+      .add(1, 'month');
+
+    calendarTabPageData.value.selectedMonth = newDate.month();
+    calendarTabPageData.value.selectedYear = newDate.year();
+
+    calendarTabUpdateCalendar();
+  };
+
+  const yearTabGoToPreviousPage = () => {
+    if (yearTabPageData.value.currentPage > 0) {
+      yearTabPageData.value.currentPage--;
+    }
+  };
+
+  const yearTabGoToNextPage = () => {
+    if (
+      (yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage <
+      yearTabPageData.value.yearsArray.length
+    ) {
+      yearTabPageData.value.currentPage++;
+    }
+  };
+
+  // Tab functions
+  const getTabClasses = (tab: string) => {
+    return {
+      'spr-cursor-pointer': true,
+      'spr-background-color-pressed !spr-shadow-button': currentTab.value === tab,
+    };
+  };
+
+  const handleTabClick = (tab: string) => {    
+    if (currentTab.value === tab && props.mode === 'full') {
+      currentTab.value = 'tab-calendar';
+    } else {
+      currentTab.value = tab;
+    }
+  };
+
+  // Month list for display
+  const monthsList = ref(
+    Array.from({ length: 12 }, (_, i) => ({
+      text: dayjs().month(i).format('MMM'),
+      fullText: dayjs().month(i).format('MMMM'),
+      monthValue: i,
+    })),
+  );
+
+  const getMonthObject = (field: string, value: string | number) => {
+    return monthsList.value.find(
+      (_month: { text: string; fullText: string; monthValue: number }) =>
+        _month[field as keyof typeof _month].toString().toLowerCase() === value.toString().toLowerCase(),
+    );
+  };
+
+  // Event handlers
+  const handleCalendarDateUpdate = (day: { date: Date; inactive: boolean }) => {
+    const selectedDate = dayjs(day.date);
+    
+    // Update internal state
+    calendarTabPageData.value.selectedMonth = day.date.getMonth();
+    calendarTabPageData.value.selectedYear = day.date.getFullYear();
+    
+    // Update calendar display
+    calendarTabUpdateCalendar();
+    
+    // Emit events
+    emit('update:month', day.date.getMonth());
+    emit('update:year', day.date.getFullYear());
+    emit('update:day', day.date.getDate());
+    emit('update:modelValue', selectedDate.format(props.format));
+  };
+
+  const handleCalendarMonthUpdate = (month: number) => {
+    calendarTabPageData.value.selectedMonth = month;
+    emit('update:month', month);
+  };
+
+  const handleCalendarYearUpdate = (year: number) => {
+    calendarTabPageData.value.selectedYear = year;
+    emit('update:year', year);
+  };
+
+  const handleMonthTabMonthUpdate = (month: number) => {
+    calendarTabPageData.value.selectedMonth = month;
+    calendarTabUpdateCalendar();
+    emit('update:month', month);
+  };
+
+  const handleYearTabYearUpdate = (year: number) => {
+    calendarTabPageData.value.selectedYear = year;
+    calendarTabUpdateCalendar();
+    emit('update:year', year);
+  };
+
+  const handleYearTabCurrentPageUpdate = (page: number) => {
+    yearTabPageData.value.currentPage = page;
+  };
+
+  // Wrapper functions for event handlers
+  const handleCalendarDateUpdateWrapper = (day: { date: Date; inactive: boolean }) => {
+    handleCalendarDateUpdate(day);
+  };
+
+  const handleCalendarMonthUpdateWrapper = (month: number) => {
+    handleCalendarMonthUpdate(month);
+  };
+
+  const handleCalendarYearUpdateWrapper = (year: number) => {
+    handleCalendarYearUpdate(year);
+  };
+
+  const handleMonthTabMonthUpdateWrapper = (month: number) => {
+    handleMonthTabMonthUpdate(month);
+  };
+
+  const handleYearTabYearUpdateWrapper = (year: number) => {
+    handleYearTabYearUpdate(year);
+  };
+
+  const handleYearTabCurrentPageUpdateWrapper = (page: number) => {
+    handleYearTabCurrentPageUpdate(page);
+  };
+
+  // Initialize based on mode
+  const getInitialTab = () => {
+    switch (props.mode) {
+      case 'month-year':
+        return 'tab-months';
+      case 'year-only':
+        return 'tab-years';
+      default:
+        return 'tab-calendar';
+    }
+  };
+
+  // Initialize component
+  currentTab.value = getInitialTab();
+  calendarTabUpdateCalendar();
+
+  // Watch for prop changes
+  watch(() => props.modelValue, (newValue) => {
+    if (newValue) {
+      const parsedDate = dayjs(newValue, props.format);
+      if (parsedDate.isValid()) {
+        calendarTabPageData.value.selectedMonth = parsedDate.month();
+        calendarTabPageData.value.selectedYear = parsedDate.year();
+        calendarTabUpdateCalendar();
+      }
+    }
+  });
+
+  watch(() => props.selectedMonth, (newMonth) => {
+    if (newMonth !== undefined) {
+      calendarTabPageData.value.selectedMonth = newMonth;
+      calendarTabUpdateCalendar();
+    }
+  });
+
+  watch(() => props.selectedYear, (newYear) => {
+    if (newYear !== undefined) {
+      calendarTabPageData.value.selectedYear = newYear;
+      calendarTabUpdateCalendar();
+    }
+  });
+
+  watch(() => props.mode, () => {
+    currentTab.value = getInitialTab();
+  });
+
+  watch(() => props.minMaxYear, () => {
+    yearTabPageData.value.yearsArray = Array.from(
+      { length: props.minMaxYear.max - props.minMaxYear.min + 1 },
+      (_, index) => props.minMaxYear.min + index,
+    ).filter((year) => year <= props.minMaxYear.max && year >= props.minMaxYear.min);
+    
+    yearTabPageData.value.currentPage = 0;
+  }, { deep: true });
+
+  return {
+    // State
+    currentTab,
+    calendarTabPageData,
+    yearTabPageData,
+    
+    // Computed properties
+    showMonthInput,
+    showDateInput,
+    showYearInput,
+    calendarDays,
+    selectedMonthComputed,
+    selectedYearComputed,
+    selectedDayComputed,
+    calendarTabIsMinMonth,
+    calendarTabIsMaxMonth,
+    yearTabIsPreviousButtonDisabled,
+    yearTabIsNextButtonDisabled,
+    
+    // Functions
+    getTabClasses,
+    handleTabClick,
+    getMonthObject,
+    calendarTabPrevMonth,
+    calendarTabNextMonth,
+    yearTabGoToPreviousPage,
+    yearTabGoToNextPage,
+    
+    // Event handlers
+    handleCalendarDateUpdateWrapper,
+    handleCalendarMonthUpdateWrapper,
+    handleCalendarYearUpdateWrapper,
+    handleMonthTabMonthUpdateWrapper,
+    handleYearTabYearUpdateWrapper,
+    handleYearTabCurrentPageUpdateWrapper,
+  };
+};

package/src/components/date-picker/tabs/DatePickerCalendarTab.vue

@@ -0,0 +1,321 @@
+<template>
+  <div class="spr-grid spr-grid-cols-7">
+    <div
+      v-for="(dayOfWeek, dayOfWeekIndex) in daysOfWeek"
+      :key="dayOfWeekIndex"
+      class="spr-py-1 spr-text-center spr-font-semibold"
+    >
+      {{ dayOfWeek.text }}
+    </div>
+
+    <template v-for="day in calendarDays" :key="day.date">
+      <div
+        v-if="minMaxYear.min <= day.date.getFullYear() && minMaxYear.max >= day.date.getFullYear()"
+        :class="[
+          'spr-relative spr-box-border spr-flex spr-h-[40px] spr-items-center spr-justify-center spr-p-2',
+          'spr-transition spr-duration-150 spr-ease-in-out',
+          {
+            // Rest Days
+            'spr-background-color-disabled': isRestDay(day),
+
+            // Today Indicator - only apply brand color if not selected
+            'spr-text-color-brand-base': isTodayIndicator(day) && !isSelectedDate(day),
+
+            // Active Month Dates - only apply if not selected and not today
+            'spr-text-color-strong':
+              isActiveMonthDates(day) &&
+              !isSelectedDate(day) &&
+              !isTodayIndicator(day),
+
+            // Inactive Month Dates (Past/Future)
+            'spr-text-color-disabled': isInactiveMonthDates(day),
+
+            // Selected Date
+            'spr-background-color-brand-base active:spr-background-color-brand-pressed spr-text-color-inverted-strong spr-cursor-pointer !spr-text-white-50 active:spr-scale-95':
+              isSelectedDate(day),
+
+            // Unselected Date
+            'hover:spr-background-color-hover spr-border-color-weak active:spr-background-color-pressed spr-cursor-pointer spr-border spr-border-solid active:spr-scale-95':
+              isUnSelectedDate(day),
+
+            // Disabled Dates
+            'spr-cursor-not-allowed spr-opacity-30': isDateDisabled(day),
+          },
+        ]"
+        @click="!isDateDisabled(day) ? handleDateClick(day) : null"
+      >
+        <span>{{ day.date.getDate() }}</span>
+        <div
+          v-if="isTodayIndicator(day)"
+          class="spr-background-color-brand-base spr-absolute spr-bottom-1 spr-m-auto spr-h-1 spr-w-1 spr-rounded-full"
+        ></div>
+      </div>
+      <div v-else></div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import dayjs from 'dayjs';
+import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
+import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
+import type { TabComponentProps, CalendarTabEmits, RestDayType, DisabledDatesType } from '../date-picker';
+
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isSameOrBefore);
+
+interface Props extends TabComponentProps {
+  calendarDays: Array<{ date: Date; inactive: boolean }>;
+  restDays: RestDayType[];
+  disabledDates?: DisabledDatesType;
+  selectedDate?: Date;
+  selectedMonth: number;
+  selectedDay?: number;
+}
+
+type Emits = CalendarTabEmits;
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const daysOfWeek = computed(() =>
+  Array.from({ length: 7 }, (_, i) => ({
+    text: dayjs().day(i).format('dd'),
+    fullText: dayjs().day(i).format('dddd'),
+    dayValue: i,
+  }))
+);
+
+const currentDate = computed(() => dayjs());
+
+const isRestDay = (day: { date: Date; inactive: boolean }) => {
+  const restDaysValue = props.restDays.map((restDay) => {
+    return daysOfWeek.value.find((d) => d.text.toLowerCase() === restDay.toLowerCase())?.dayValue;
+  });
+
+  if (isSelectedDate(day)) {
+    return false;
+  }
+
+  if (restDaysValue.includes(day.date.getDay())) {
+    return true;
+  }
+
+  return false;
+};
+
+const isTodayIndicator = (day: { date: Date }) => {
+  if (day.date.toDateString() === currentDate.value.format('ddd MMM DD YYYY')) {
+    return true;
+  }
+
+  return false;
+};
+
+const isActiveMonthDates = (day: { date: Date; inactive: boolean }) => {
+  if (!day.inactive && !isDateDisabled(day)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isInactiveMonthDates = (day: { date: Date; inactive: boolean }) => {
+  if (day.inactive && !isDateDisabled(day)) {
+    return true;
+  }
+
+  return false;
+};
+
+const isSelectedDate = (day: { date: Date; inactive: boolean }) => {
+  if (isDateDisabled(day)) {
+    return false;
+  }
+
+  // Check if day, month, and year are selected (full mode)
+  if (props.selectedDay && props.selectedMonth !== undefined && props.selectedYear) {
+    return (
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth &&
+      day.date.getFullYear() === props.selectedYear &&
+      !day.inactive
+    );
+  }
+
+  // Check if day and month are selected, but not year
+  if (props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return day.date.getDate() === props.selectedDay && day.date.getMonth() === props.selectedMonth && !day.inactive;
+  }
+
+  // Check if only day is selected
+  if (props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return day.date.getDate() === props.selectedDay && !day.inactive;
+  }
+
+
+  return false;
+};
+
+const isUnSelectedDate = (day: { date: Date }) => {
+  if (isDateDisabled(day)) {
+    return false;
+  }
+
+  // If no selection at all, all dates are unselected
+  if (!props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return true;
+  }
+
+  // If only month is selected, all dates are unselected
+  if (!props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return true;
+  }
+
+  // If day, month, and year are selected, check if this date matches
+  if (props.selectedDay && props.selectedMonth !== undefined && props.selectedYear) {
+    return !(
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth &&
+      day.date.getFullYear() === props.selectedYear
+    );
+  }
+
+  // If day and month are selected, check if this date matches
+  if (props.selectedDay && props.selectedMonth !== undefined && !props.selectedYear) {
+    return !(
+      day.date.getDate() === props.selectedDay &&
+      day.date.getMonth() === props.selectedMonth
+    );
+  }
+
+  // If only day is selected, check if this date matches
+  if (props.selectedDay && !props.selectedMonth && !props.selectedYear) {
+    return day.date.getDate() !== props.selectedDay;
+  }
+
+  return true;
+};
+
+const isDateDisabled = (day: { date: Date }) => {
+  if (
+    isDateDisabledFromTo(day) ||
+    isDateDisabledPastDate(day) ||
+    isDateDisabledFutureDate(day) ||
+    isDateDisabledSelectedDates(day) ||
+    isDateDisabledWeekends(day) ||
+    isDateDisabledWeekdays(day) ||
+    isDateDisabledSelectedDays(day)
+  ) {
+    return true;
+  }
+
+  return false;
+};
+
+const isDateDisabledFromTo = (day: { date: Date }) => {
+  if (props.disabledDates?.from && props.disabledDates?.to) {
+    const disabledFrom = dayjs(props.disabledDates.from, 'MM-DD-YYYY').startOf('day');
+    const disabledTo = dayjs(props.disabledDates.to, 'MM-DD-YYYY').endOf('day');
+
+    const dayDate = dayjs(day.date);
+
+    return dayDate.isSameOrAfter(disabledFrom, 'day') && dayDate.isSameOrBefore(disabledTo, 'day');
+  }
+
+  return false;
+};
+
+const isDateDisabledPastDate = (day: { date: Date }) => {
+  if (props.disabledDates?.pastDates) {
+    const dayDate = dayjs(day.date);
+
+    if (typeof props.disabledDates.pastDates === 'boolean') {
+      return dayDate.isBefore(currentDate.value.startOf('day'));
+    } else {
+      const selectedDate = dayjs(props.disabledDates.pastDates);
+
+      return dayDate.isBefore(dayjs(selectedDate, 'MM-DD-YYYY').startOf('day'));
+    }
+  }
+
+  return false;
+};
+
+const isDateDisabledFutureDate = (day: { date: Date }) => {
+  if (props.disabledDates?.futureDates) {
+    const dayDate = dayjs(day.date);
+
+    if (typeof props.disabledDates.futureDates === 'boolean') {
+      return dayDate.isAfter(currentDate.value.endOf('day'));
+    } else {
+      const selectedDate = dayjs(props.disabledDates.futureDates);
+
+      return dayDate.isAfter(dayjs(selectedDate, 'MM-DD-YYYY').endOf('day'));
+    }
+  }
+
+  return false;
+};
+
+const isDateDisabledSelectedDates = (day: { date: Date }) => {
+  if (props.disabledDates?.selectedDates && props.disabledDates.selectedDates.length > 0) {
+    const dayDate = dayjs(day.date);
+
+    props.disabledDates.selectedDates.forEach((_date) => {
+      if (!dayjs(_date).isValid()) {
+        console.error(`Error: disabledDates Props - Selected Dates - Invalid date format: "${_date}"`);
+      }
+    });
+
+    return props.disabledDates.selectedDates.some((date) => dayDate.isSame(dayjs(date, 'MM-DD-YYYY'), 'day'));
+  }
+
+  return false;
+};
+
+const isDateDisabledWeekends = (day: { date: Date }) => {
+  if (props.disabledDates?.weekends) {
+    const dayDate = dayjs(day.date);
+
+    return dayDate.day() === 0 || dayDate.day() === 6;
+  }
+
+  return false;
+};
+
+const isDateDisabledWeekdays = (day: { date: Date }) => {
+  if (props.disabledDates?.weekdays) {
+    const dayDate = dayjs(day.date);
+
+    return dayDate.day() > 0 && dayDate.day() < 6;
+  }
+
+  return false;
+};
+
+const isDateDisabledSelectedDays = (day: { date: Date }) => {
+  if (props.disabledDates?.selectedDays) {
+    const dayDate = dayjs(day.date);
+
+    return props.disabledDates.selectedDays.some((day) => {
+      const foundDay = daysOfWeek.value.find((d) => d.text.toLowerCase() === day.toLowerCase());
+
+      if (!foundDay) {
+        console.error(`Error: disabledDates Props - Selected Days - Invalid day: "${day}"`);
+      }
+
+      return foundDay ? dayDate.day() === daysOfWeek.value.indexOf(foundDay) : false;
+    });
+  }
+
+  return false;
+};
+
+const handleDateClick = (day: { date: Date; inactive: boolean }) => {
+  emit('update:date', day);
+  emit('update:month', day.date.getMonth());
+  emit('update:year', day.date.getFullYear());
+};
+</script>