@umbra.ui/core 0.1.0

package/src/components/pickers/DatePicker/DatePicker.vue

@@ -0,0 +1,660 @@
+<script setup lang="ts">
+import { ChevronRightIcon, CalendarDaysIcon } from "@umbra-ui/icons";
+// - Imports
+import { ref, watch, onMounted, nextTick, computed, onUnmounted } from "vue";
+import {
+  offset,
+  flip,
+  shift,
+  size,
+  computePosition,
+  hide,
+  autoUpdate,
+} from "@floating-ui/vue";
+import "./theme.css";
+// - Interfaces
+interface Month {
+  title: string;
+  days: Day[];
+}
+interface Day {
+  key: number;
+  day: number;
+  inCurrentMonth: boolean;
+  year: number;
+  month: number;
+  date: Date;
+}
+// - Props
+export interface Props {
+  date: Date;
+}
+const props = withDefaults(defineProps<Props>(), {
+  date: () => new Date(),
+});
+// - Emits
+const emits = defineEmits(["update:date"]);
+// - State Management
+const weekdays = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"];
+const days = ref<Day[]>([]);
+const showAlldays = ref<boolean>(false);
+const months = ref<Month[]>([]);
+const selectedDate = ref<Date>(props.date);
+// - Computed Properties
+watch(
+  () => props.date,
+  (newValue) => {
+    selectedDate.value = newValue;
+  }
+);
+const dateString = computed(() => {
+  return new Intl.DateTimeFormat("en-US", {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  }).format(selectedDate.value);
+});
+
+const yearString = computed(() => {
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+  }).format(selectedDate.value);
+});
+// - Element References
+const showPopover = ref<boolean>(false);
+const button = ref<HTMLElement | null>(null);
+const picker = ref<HTMLElement | null>(null);
+const container = ref<HTMLElement | null>(null);
+const overlay = ref<HTMLElement | null>(null);
+
+// - Position tracking
+let cleanupAutoUpdate: (() => void) | null = null;
+
+// - Lifecycle
+onMounted(async () => {
+  setupCompactCalendar();
+});
+
+onUnmounted(() => {
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+});
+
+// - Calendar Setup Toggling
+const setupCompactCalendar = () => {
+  months.value = [];
+  // set up days for compact calendar
+  days.value = generateMonth(new Date(props.date)).days;
+};
+const setupFullCalendar = async () => {
+  allowScroll.value = false;
+  days.value = [];
+
+  // set up months with the next 5 months
+  for (let i = 0; i < 4; i++) {
+    months.value.push(
+      generateMonth(
+        new Date(props.date.getFullYear(), props.date.getMonth() + i, 1)
+      )
+    );
+  }
+
+  // set up months with the previous five months
+  for (let i = 0; i < 4; i++) {
+    fetchPreviousMonth();
+  }
+
+  // scroll back to the month in the compact calendar
+  await nextTick();
+  if (scrollview.value) {
+    scrollview.value.scrollTop = 470;
+  }
+
+  // allow the month labels to show when the user scrolls
+  setTimeout(() => {
+    allowScroll.value = true;
+  }, 200);
+};
+const toggleCalendar = async () => {
+  showAlldays.value = !showAlldays.value;
+
+  if (showAlldays.value) {
+    setupFullCalendar();
+  } else {
+    setupCompactCalendar();
+  }
+};
+// - Date Calculations
+const fetchNextMonth = () => {
+  const month = months.value[months.value.length - 1];
+  const day = month.days[Math.floor(month.days.length / 2)];
+  const date = new Date(day.year, day.month, day.day);
+  date.setMonth(date.getMonth() + 1);
+  months.value.push(generateMonth(date));
+};
+const fetchPreviousMonth = () => {
+  const month = months.value[0];
+  const day = month.days[Math.floor(month.days.length / 2)];
+  const date = new Date(day.year, day.month, day.day);
+  date.setMonth(date.getMonth() - 1);
+  months.value.unshift(generateMonth(date));
+};
+function generateMonth(date: Date): Month {
+  const firstDayOfMonth = new Date(date.getFullYear(), date.getMonth(), 1);
+  const daysInMonth = new Date(
+    date.getFullYear(),
+    date.getMonth() + 1,
+    0
+  ).getDate();
+
+  // Calculate the offset based on the day of the week (0 = Sunday, 1 = Monday, ..., 6 = Saturday)
+  let startDay = firstDayOfMonth.getDay(); // Adjusted startDay calculation
+
+  // If the startDay is 0 (Sunday), set it to 7 for consistency
+  startDay = startDay === 0 ? 7 : startDay;
+
+  const generatedDays: Day[] = [];
+
+  const year = date.getFullYear();
+  const month = date.getMonth();
+
+  for (let i = 1; i <= daysInMonth; i++) {
+    const currentDate = new Date(year, month, i);
+
+    let inCurrentMonth = true;
+    generatedDays.push({
+      key: i, // Key starts from 1
+      day: i,
+      inCurrentMonth,
+      year,
+      month,
+      date: currentDate, // Set the newly added date field
+    });
+  }
+
+  // Fill in days from the previous month if needed to complete the week
+  const previousMonthLastDay = new Date(year, month, 0).getDate();
+  const previousMonthDaysNeeded = startDay - 1;
+  for (
+    let i = previousMonthLastDay - previousMonthDaysNeeded + 1;
+    i <= previousMonthLastDay;
+    i++
+  ) {
+    const currentDate = new Date(year, month - 1, i); // Calculate date for the previous month
+    generatedDays.unshift({
+      key: i,
+      day: i,
+      inCurrentMonth: false,
+      year: month === 0 ? year - 1 : year,
+      month: month === 0 ? 11 : month - 1,
+      date: currentDate, // Set the newly added date field
+    });
+  }
+
+  // Fill in days from the next month if needed to complete the grid
+  const remainingDays = 35 - generatedDays.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    const nextMonthDate = new Date(year, month + 1, i); // Calculate date for the next month
+    generatedDays.push({
+      key: i,
+      day: i,
+      inCurrentMonth: false,
+      year: month === 11 ? year + 1 : year,
+      month: month === 11 ? 0 : month + 1,
+      date: nextMonthDate, // Set the newly added date field
+    });
+  }
+
+  const monthTitle = new Intl.DateTimeFormat("en-US", {
+    month: "long",
+    year: "numeric",
+  }).format(date);
+  return {
+    title: monthTitle,
+    days: generatedDays,
+  };
+}
+
+// - Handle Day Cell Appearance
+function drawBorderTop(day: Day): boolean {
+  if (day.inCurrentMonth && day.day <= 7) {
+    return true;
+  }
+  return false;
+}
+function drawBorderLeft(day: Day, index: number): boolean {
+  if (index === 0) {
+    return false;
+  }
+  if (day.inCurrentMonth && day.day === 1) {
+    return true;
+  }
+  return false;
+}
+function setMarginTopOffset(month: Month, index: number): boolean {
+  if (index === 0) {
+    return false;
+  }
+  if (month.days[0].inCurrentMonth) {
+    return false;
+  }
+  return true;
+}
+
+// - Date Selection
+function isDaySelected(day: Day): boolean {
+  return selectedDate.value.getTime() === day.date.getTime();
+}
+
+function select(date: Date) {
+  selectedDate.value = date;
+  emits("update:date", date);
+}
+
+// - Handle Scrolling
+const scrollview = ref<HTMLElement | null>(null);
+const fetchInProgress = ref<boolean>(false);
+const allowScroll = ref<boolean>(false);
+const isScrolling = ref<boolean>(false);
+let scrollTimeout: NodeJS.Timeout | undefined;
+const handleScroll = () => {
+  // Set isScrolling to true when scrolling starts
+  if (allowScroll.value) {
+    isScrolling.value = true;
+  }
+
+  // Clear the timeout if it exists
+  if (scrollTimeout !== undefined) {
+    clearTimeout(scrollTimeout);
+  }
+
+  // Set a timeout to reset isScrolling after a short delay (e.g., 200ms)
+  scrollTimeout = setTimeout(() => {
+    isScrolling.value = false;
+  }, 400); // Adjust the delay as needed
+
+  if (!scrollview.value) return;
+
+  const percentage =
+    (scrollview.value.scrollTop /
+      (scrollview.value.scrollHeight - scrollview.value.clientHeight)) *
+    100;
+  if (percentage <= 25 && !fetchInProgress.value) {
+    fetchInProgress.value = true;
+    fetchPreviousMonth();
+    fetchInProgress.value = false;
+  }
+  // fetch more data to show if the user has scrolled more than 75% down
+  else if (percentage > 75 && !fetchInProgress.value) {
+    fetchInProgress.value = true;
+    fetchNextMonth();
+    fetchInProgress.value = false;
+  }
+};
+
+// - Popover Management
+const togglePopover = () => {
+  showPopover.value = !showPopover.value;
+  if (showPopover.value) {
+    nextTick(() => {
+      updatePopoverPosition();
+    });
+  } else {
+    // revert back to the small calendar
+    showAlldays.value = false;
+    setupCompactCalendar();
+
+    // Clean up auto-update
+    if (cleanupAutoUpdate) {
+      cleanupAutoUpdate();
+      cleanupAutoUpdate = null;
+    }
+  }
+};
+
+const updatePopoverPosition = async () => {
+  if (!button.value || !picker.value) return;
+
+  // Wait for the DOM to be updated
+  await nextTick();
+
+  // Clean up any existing auto-update
+  if (cleanupAutoUpdate) {
+    cleanupAutoUpdate();
+  }
+
+  // Set up auto-update to track position changes
+  cleanupAutoUpdate = autoUpdate(button.value, picker.value, () => {
+    computePosition(button.value!, picker.value!, {
+      placement: "bottom-start",
+      middleware: [
+        offset(4), // px between anchor and popover
+        flip(), // switch side of space becomes too narrow
+        shift(),
+        size({
+          padding: 20,
+          apply({
+            availableWidth,
+            availableHeight,
+            elements,
+          }: {
+            availableWidth: number;
+            availableHeight: number;
+            elements: {
+              floating: {
+                style: {
+                  maxWidth: string;
+                  maxHeight: string;
+                };
+              };
+            };
+          }) {
+            // Change styles, e.g.
+            Object.assign(elements.floating.style, {
+              maxWidth: `${availableWidth}px`,
+              maxHeight: `${availableHeight}px`,
+            });
+          },
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (picker.value) {
+        Object.assign(picker.value.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      }
+    });
+  });
+};
+
+const handleOverlayClick = () => {
+  togglePopover();
+};
+</script>
+
+<template>
+  <div :class="$style.container" ref="container">
+    <div
+      :class="[
+        $style.button,
+        showPopover ? $style.button_selected : $style.button_normal,
+      ]"
+      @click="togglePopover"
+      ref="button"
+    >
+      <CalendarDaysIcon :size="16" />
+      <p :class="['callout', $style.button_label]">{{ dateString }}</p>
+      <p :class="['callout', $style.button_sublabel]">{{ yearString }}</p>
+    </div>
+
+    <!-- Teleport the overlay and picker to body -->
+    <Teleport to="body">
+      <div
+        v-if="showPopover"
+        :class="$style.overlay"
+        ref="overlay"
+        @click="handleOverlayClick"
+      ></div>
+      <div v-if="showPopover" :class="$style.picker" ref="picker">
+        <div :class="$style.weekdays">
+          <p v-for="weekday in weekdays" :key="weekday">{{ weekday }}</p>
+        </div>
+        <div v-if="!showAlldays" :class="[$style.days]">
+          <p
+            v-for="day in days"
+            :key="`compact-${day.year}-${day.month}-${day.day}`"
+            :class="[
+              'callout',
+              $style.day,
+              isDaySelected(day) ? $style.day_selected : '',
+            ]"
+            :style="{ opacity: day.inCurrentMonth ? 1 : 0.5 }"
+            @click="select(day.date)"
+          >
+            {{ day.day }}
+          </p>
+          <ChevronRightIcon
+            :class="[$style.day, $style.more_dates_button]"
+            @click="toggleCalendar"
+          />
+        </div>
+        <div
+          v-else
+          :class="$style.months"
+          ref="scrollview"
+          @scroll="handleScroll"
+        >
+          <div
+            v-for="(month, index) in months"
+            :key="month.title"
+            :class="[
+              $style.month,
+              setMarginTopOffset(month, index) ? $style.margin_top_offset : '',
+            ]"
+          >
+            <div
+              :class="$style.month_days"
+              :style="{ opacity: isScrolling ? 0.15 : 1 }"
+            >
+              <p
+                v-for="(day, index) in month.days"
+                :key="`full-${day.year}-${day.month}-${day.day}`"
+                :class="[
+                  'callout',
+                  $style.day,
+                  drawBorderTop(day) ? $style.border_top : '',
+                  drawBorderLeft(day, index) ? $style.border_left : '',
+                  isDaySelected(day) ? $style.day_selected : '',
+                ]"
+                :style="{
+                  opacity: day.inCurrentMonth ? 1 : 0,
+                  pointerEvents: day.inCurrentMonth ? 'auto' : 'none',
+                  zIndex: day.inCurrentMonth ? 1 : 0,
+                }"
+                @click="select(day.date)"
+              >
+                {{ day.day }}
+              </p>
+            </div>
+            <div
+              :class="$style.month_header"
+              :style="{ opacity: isScrolling ? 1 : 0 }"
+            >
+              <p class="headline">{{ month.title }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<style module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.235rem;
+  align-items: start;
+}
+.button {
+  padding-top: 0.588rem;
+  padding-bottom: 0.588rem;
+  border-radius: 0.353rem;
+  cursor: default;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  gap: 0.588rem;
+  transition: padding-left 0.3s, padding-right 0.3s, background-color 0.3s,
+    box-shadow 0.3s;
+}
+.button_normal {
+  background-color: var(--picker-button-bg);
+  border: var(--picker-button-border);
+}
+.button_normal:hover {
+  background-color: var(--picker-button-hover-bg);
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  box-shadow: 0px 1px 0px 0px var(--picker-button-hover-shadow),
+    inset 0px 1px 0px 0px var(--picker-button-hover-inset-shadow);
+  border: var(--picker-button-hover-border);
+}
+.button_selected {
+  background-color: var(--picker-button-selected-bg);
+  padding-left: 0.588rem;
+  padding-right: 0.588rem;
+  border: var(--picker-button-hover-border);
+}
+.button_label {
+  font-weight: 700 !important;
+  font-variation-settings: "wght" 700 !important;
+}
+.button_sublabel {
+  opacity: 0.5;
+}
+.picker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: var(--picker-picker-bg);
+  border-radius: 0.353rem;
+  overflow: hidden;
+  box-shadow: 0px 1px 0px 0px var(--picker-picker-shadow),
+    inset 0px 1px 0px 0px var(--picker-picker-inset-shadow);
+  border: var(--picker-picker-border);
+  z-index: 1000;
+}
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  align-items: center;
+  padding-left: 0.294rem;
+  padding-right: 0.294rem;
+  min-height: 2rem;
+  background-color: var(--picker-bg-subtle);
+  border-bottom: 1px solid var(--picker-border-light);
+}
+.weekdays p {
+  opacity: var(--datepicker-weekdays-opacity);
+  font-size: 0.765rem;
+  min-width: 2.588rem;
+  text-align: center;
+  color: var(--picker-text-secondary);
+}
+.days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  align-items: center;
+  max-height: 32rem;
+  overflow: auto;
+  color: var(--picker-text-primary);
+}
+
+.days :nth-last-child(2) {
+  display: none;
+}
+
+.months {
+  display: flex;
+  flex-direction: column;
+  max-height: 32rem;
+  overflow: auto;
+}
+.months::-webkit-scrollbar {
+  display: none;
+}
+.month {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-template-areas: "content";
+}
+.month_header {
+  padding-left: 0.706rem;
+  padding-right: 0.706rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  grid-area: content;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.3s ease;
+  user-select: none;
+  cursor: default;
+  pointer-events: none;
+  color: var(--picker-text-primary);
+}
+
+.month_days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+  align-items: center;
+  max-height: 32rem;
+  overflow: auto;
+  grid-area: content;
+  transition: opacity 0.3s ease;
+  color: var(--picker-text-primary);
+}
+
+.day {
+  min-width: 2.588rem;
+  height: 2rem;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  user-select: none;
+  cursor: default;
+  border-radius: 0.235rem;
+  padding: 0.294rem;
+}
+.day:hover {
+  background-color: var(--picker-bg-hover);
+}
+.day_selected {
+  background-color: var(--datepicker-day-selected-bg);
+  border-radius: 999px;
+  border: 1px solid var(--datepicker-day-selected-border);
+}
+.day_selected:hover {
+  background-color: var(--datepicker-day-selected-bg);
+}
+.border_top {
+  border-top: 1px solid var(--picker-border-light);
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+}
+.border_left {
+  border-left: 1px solid var(--picker-border-light);
+  border-bottom-left-radius: 0;
+}
+.margin_top_offset {
+  margin-top: -2rem;
+}
+
+.more_dates_button {
+  width: 2.588rem;
+  height: 2rem;
+  padding: 0.471rem;
+  background-color: var(--picker-selection-bar-bg);
+}
+.more_dates_button:hover {
+  background-color: var(--picker-bg-hover);
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--picker-overlay-bg);
+  opacity: 0;
+  z-index: 999;
+}
+</style>