@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/Calendar/CalendarRoot.vue

@@ -0,0 +1,394 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+
+import type { Ref } from "vue";
+import type { Grid, Matcher, WeekDayFormat } from "../../date";
+import type { PrimitiveProps } from "../Primitive";
+
+import type { Formatter } from "../../shared";
+import type { Direction } from "../../shared/types";
+import { isEqualDay, isSameDay } from "@internationalized/date";
+import { createContext, useDirection, useLocale } from "../../shared";
+import { getDefaultDate, handleCalendarInitialFocus } from "../../shared/date";
+import { useCalendar, useCalendarState } from "./useCalendar";
+
+export type MonthNameDateValue = DateValue & { monthName: string };
+
+type CalendarRootContext = {
+  locale: Ref<string>;
+  modelValue: Ref<DateValue | DateValue[] | undefined>;
+  placeholder: Ref<DateValue>;
+  pagedNavigation: Ref<boolean>;
+  preventDeselect: Ref<boolean>;
+  grid: Ref<Grid<DateValue>[]>;
+  weekDays: Ref<string[]>;
+  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+  weekdayFormat: Ref<WeekDayFormat>;
+  fixedWeeks: Ref<boolean>;
+  multiple: Ref<boolean>;
+  numberOfMonths: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  initialFocus: Ref<boolean>;
+  onDateChange: (date: DateValue) => void;
+  onPlaceholderChange: (date: DateValue) => void;
+  fullCalendarLabel: Ref<string>;
+  parentElement: Ref<HTMLElement | undefined>;
+  headingValue: Ref<string>;
+  currentMonth: Ref<string>;
+  currentYear: Ref<string>;
+  isInvalid: Ref<boolean>;
+  isDateDisabled: Matcher;
+  isDateSelected: Matcher;
+  isDateUnavailable?: Matcher;
+  isOutsideVisibleView: (date: DateValue) => boolean;
+  prevPage: (prevPageFunc?: (date: DateValue) => DateValue) => void;
+  nextPage: (nextPageFunc?: (date: DateValue) => DateValue) => void;
+  isNextButtonDisabled: (
+    nextPageFunc?: (date: DateValue) => DateValue,
+  ) => boolean;
+  isPrevButtonDisabled: (
+    prevPageFunc?: (date: DateValue) => DateValue,
+  ) => boolean;
+  formatter: Formatter;
+  dir: Ref<Direction>;
+  disableDaysOutsideCurrentView: Ref<boolean>;
+  minValue: Ref<DateValue | undefined>;
+  maxValue: Ref<DateValue | undefined>;
+  months: Ref<MonthNameDateValue[]>;
+  years: Ref<{ year: number }[]>;
+  monthYearOverlayState: Ref<false | "month" | "year">;
+};
+
+export interface CalendarRootProps extends PrimitiveProps {
+  /** The default value for the calendar */
+  defaultValue?: DateValue;
+  /** The default placeholder date */
+  defaultPlaceholder?: DateValue;
+  /** The placeholder date, which is used to determine what month to display when no date is selected */
+  placeholder?: DateValue;
+  /** This property causes the previous and next buttons to navigate by the number of months displayed at once, rather than one month */
+  pagedNavigation?: boolean;
+  /** Whether or not to prevent the user from deselecting a date without selecting another date first */
+  preventDeselect?: boolean;
+  /** The day of the week to start the calendar on */
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  /** The format to use for the weekday strings provided via the weekdays slot prop */
+  weekdayFormat?: WeekDayFormat;
+  /** The accessible label for the calendar */
+  calendarLabel?: string;
+  /** Whether or not to always display 6 weeks in the calendar */
+  fixedWeeks?: boolean;
+  /** The maximum date that can be selected */
+  maxValue?: DateValue;
+  /** The minimum date that can be selected */
+  minValue?: DateValue;
+  /** The locale to use for formatting dates */
+  locale?: string;
+  /** The number of months to display at once */
+  numberOfMonths?: number;
+  /** Whether the calendar is disabled */
+  disabled?: boolean;
+  /** Whether the calendar is readonly */
+  readonly?: boolean;
+  /** If true, the calendar will focus the selected day, today, or the first day of the month depending on what is visible when the calendar is mounted */
+  initialFocus?: boolean;
+  /** A function that returns whether or not a date is disabled */
+  isDateDisabled?: Matcher;
+  /** A function that returns whether or not a date is unavailable */
+  isDateUnavailable?: Matcher;
+  /** The reading direction of the calendar when applicable. <br> If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode. */
+  dir?: Direction;
+  /** A function that returns the next page of the calendar. It receives the current placeholder as an argument inside the component. */
+  nextPage?: (placeholder: DateValue) => DateValue;
+  /** A function that returns the previous page of the calendar. It receives the current placeholder as an argument inside the component. */
+  prevPage?: (placeholder: DateValue) => DateValue;
+  /** The controlled checked state of the calendar */
+  modelValue?: DateValue | DateValue[] | undefined;
+  /** Whether multiple dates can be selected */
+  multiple?: boolean;
+  /** Whether or not to disable days outside the current view. */
+  disableDaysOutsideCurrentView?: boolean;
+}
+
+export type CalendarRootEmits = {
+  /** Event handler called whenever the model value changes */
+  "update:modelValue": [date: DateValue | undefined];
+  /** Event handler called whenever the placeholder value changes */
+  "update:placeholder": [date: DateValue];
+};
+
+export const [injectCalendarRootContext, provideCalendarRootContext] =
+  createContext<CalendarRootContext>("CalendarRoot");
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import { onMounted, toRefs, watch, ref } from "vue";
+import { Primitive, usePrimitiveElement } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarRootProps>(), {
+  defaultValue: undefined,
+  as: "div",
+  pagedNavigation: false,
+  preventDeselect: false,
+  weekStartsOn: 0,
+  weekdayFormat: "narrow",
+  fixedWeeks: false,
+  multiple: false,
+  numberOfMonths: 1,
+  disabled: false,
+  readonly: false,
+  initialFocus: false,
+  placeholder: undefined,
+  isDateDisabled: undefined,
+  isDateUnavailable: undefined,
+  disableDaysOutsideCurrentView: false,
+});
+const emits = defineEmits<CalendarRootEmits>();
+defineSlots<{
+  default?: (props: {
+    /** The current date of the placeholder */
+    date: DateValue;
+    /** The grid of dates */
+    grid: Grid<DateValue>[];
+    /** The days of the week */
+    weekDays: string[];
+    /** The start of the week */
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** The calendar locale */
+    locale: string;
+    /** Whether or not to always display 6 weeks in the calendar */
+    fixedWeeks: boolean;
+    /** The current date of the calendar */
+    modelValue: DateValue | DateValue[] | undefined;
+  }) => any;
+}>();
+
+const {
+  disabled,
+  readonly,
+  initialFocus,
+  pagedNavigation,
+  weekStartsOn,
+  weekdayFormat,
+  fixedWeeks,
+  multiple,
+  minValue,
+  maxValue,
+  numberOfMonths,
+  preventDeselect,
+  isDateDisabled: propsIsDateDisabled,
+  isDateUnavailable: propsIsDateUnavailable,
+  calendarLabel,
+  defaultValue,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+  dir: propDir,
+  locale: propLocale,
+  disableDaysOutsideCurrentView,
+} = toRefs(props);
+
+const { primitiveElement, currentElement: parentElement } =
+  usePrimitiveElement();
+const locale = useLocale(propLocale);
+const dir = useDirection(propDir);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  defaultValue: defaultValue.value,
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<DateValue | DateValue[] | undefined>;
+
+const monthYearOverlayState = ref<(false | "month" | "year")>(false);
+
+const defaultDate = getDefaultDate({
+  defaultPlaceholder: props.placeholder,
+  defaultValue: modelValue.value,
+  locale: props.locale,
+});
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  defaultValue: props.defaultPlaceholder ?? defaultDate.copy(),
+  passive: (props.placeholder === undefined) as false,
+}) as Ref<DateValue>;
+
+function onPlaceholderChange(value: DateValue) {
+  placeholder.value = value.copy();
+}
+
+const {
+  fullCalendarLabel,
+  headingValue,
+  isDateDisabled,
+  isDateUnavailable,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  weekdays,
+  isOutsideVisibleView,
+  nextPage,
+  prevPage,
+  formatter,
+  grid,
+  currentMonth,
+  currentYear,
+  months,
+  years,
+} = useCalendar({
+  locale,
+  placeholder,
+  weekStartsOn,
+  fixedWeeks,
+  numberOfMonths,
+  minValue,
+  maxValue,
+  disabled,
+  weekdayFormat,
+  pagedNavigation,
+  isDateDisabled: propsIsDateDisabled.value,
+  isDateUnavailable: propsIsDateUnavailable.value,
+  calendarLabel,
+  nextPage: propsNextPage,
+  prevPage: propsPrevPage,
+});
+
+const { isInvalid, isDateSelected } = useCalendarState({
+  date: modelValue,
+  isDateDisabled,
+  isDateUnavailable,
+});
+
+watch(modelValue, (_modelValue) => {
+  if (Array.isArray(_modelValue) && _modelValue.length) {
+    const lastValue = _modelValue[_modelValue.length - 1];
+    if (lastValue && !isEqualDay(placeholder.value, lastValue))
+      onPlaceholderChange(lastValue);
+  } else if (
+    !Array.isArray(_modelValue) &&
+    _modelValue &&
+    !isEqualDay(placeholder.value, _modelValue)
+  ) {
+    onPlaceholderChange(_modelValue);
+  }
+});
+
+function onDateChange(value: DateValue) {
+  if (!multiple.value) {
+    if (!modelValue.value) {
+      modelValue.value = value.copy();
+      return;
+    }
+
+    if (
+      !preventDeselect.value &&
+      isEqualDay(modelValue.value as DateValue, value)
+    ) {
+      placeholder.value = value.copy();
+      modelValue.value = undefined;
+    } else {
+      modelValue.value = value.copy();
+    }
+  } else if (!modelValue.value) {
+    modelValue.value = [value.copy()];
+  } else if (Array.isArray(modelValue.value)) {
+    const index = modelValue.value.findIndex((date) => isSameDay(date, value));
+    if (index === -1) {
+      modelValue.value = [...modelValue.value, value];
+    } else if (!preventDeselect.value) {
+      const next = modelValue.value.filter((date) => !isSameDay(date, value));
+      if (!next.length) {
+        placeholder.value = value.copy();
+        modelValue.value = undefined;
+        return;
+      }
+      modelValue.value = next.map((date) => date.copy());
+    }
+  }
+}
+
+onMounted(() => {
+  if (initialFocus.value) handleCalendarInitialFocus(parentElement.value);
+});
+
+provideCalendarRootContext({
+  isDateUnavailable,
+  dir,
+  isDateDisabled,
+  locale,
+  formatter,
+  modelValue,
+  placeholder,
+  disabled,
+  initialFocus,
+  pagedNavigation,
+  grid,
+  weekDays: weekdays,
+  weekStartsOn,
+  weekdayFormat,
+  fixedWeeks,
+  multiple,
+  numberOfMonths,
+  monthYearOverlayState,
+  readonly,
+  preventDeselect,
+  fullCalendarLabel,
+  headingValue,
+  isInvalid,
+  isDateSelected,
+  isNextButtonDisabled,
+  isPrevButtonDisabled,
+  isOutsideVisibleView,
+  nextPage,
+  prevPage,
+  parentElement,
+  onPlaceholderChange,
+  onDateChange,
+  disableDaysOutsideCurrentView,
+  minValue,
+  maxValue,
+  currentMonth,
+  currentYear,
+  months,
+  years,
+});
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    :as="as"
+    :as-child="asChild"
+    :aria-label="fullCalendarLabel"
+    :data-readonly="readonly ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="isInvalid ? '' : undefined"
+    :dir="dir"
+  >
+    <slot
+      :date="placeholder"
+      :grid="grid"
+      :week-days="weekdays"
+      :week-starts-on="weekStartsOn"
+      :locale="locale"
+      :fixed-weeks="fixedWeeks"
+      :model-value="modelValue"
+    />
+    <div
+      style="
+        border: 0px;
+        clip: rect(0px, 0px, 0px, 0px);
+        clip-path: inset(50%);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0px;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      "
+    >
+      <div role="heading" aria-level="2">
+        {{ fullCalendarLabel }}
+      </div>
+    </div>
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarYearHeading.vue

@@ -0,0 +1,63 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+
+export interface CalendarYearHeadingProps extends PrimitiveProps {}
+
+export interface CalendarNextSlot {
+  default?: (props: {
+    /** Current disable state */
+    disabled: boolean;
+  }) => any;
+}
+</script>
+
+<script setup lang="ts">
+import { computed, useAttrs } from "vue";
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarYearHeadingProps>(), {
+  as: "button",
+});
+// defineSlots<CalendarNextSlot>();
+
+const disabled = computed(() => {
+  // TODO
+
+  // rootContext.disabled.value ||
+  // rootContext.isNextButtonDisabled(props.nextPage),
+  return false;
+});
+
+const rootContext = injectCalendarRootContext();
+const currentYear = computed(() => rootContext.currentYear?.value);
+const attrs = useAttrs();
+const ariaLabel = computed(
+  () =>
+    currentYear.value +
+    " - " +
+    (attrs["aria-label"] || "Open month selection overlay"),
+);  
+
+function handleClick() {
+  rootContext.monthYearOverlayState.value = "year";
+}
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :aria-label="ariaLabel"
+    :type="as === 'button' ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="handleClick"
+  >
+    <slot :disabled>
+      {{ currentYear }}
+    </slot>
+  </Primitive>
+</template>

package/src/components/Calendar/index.ts

@@ -0,0 +1,63 @@
+export {
+  default as CalendarCell,
+  type CalendarCellProps,
+} from "./CalendarCell.vue";
+export {
+  default as CalendarCellTrigger,
+  type CalendarCellTriggerProps,
+} from "./CalendarCellTrigger.vue";
+export {
+  default as CalendarGrid,
+  type CalendarGridProps,
+} from "./CalendarGrid.vue";
+export {
+  default as CalendarGridBody,
+  type CalendarGridBodyProps,
+} from "./CalendarGridBody.vue";
+export {
+  default as CalendarGridHead,
+  type CalendarGridHeadProps,
+} from "./CalendarGridHead.vue";
+export {
+  default as CalendarGridRow,
+  type CalendarGridRowProps,
+} from "./CalendarGridRow.vue";
+export {
+  default as CalendarHeadCell,
+  type CalendarHeadCellProps,
+} from "./CalendarHeadCell.vue";
+export {
+  default as CalendarHeader,
+  type CalendarHeaderProps,
+} from "./CalendarHeader.vue";
+
+export {
+  default as CalendarHeading,
+  type CalendarHeadingProps,
+} from "./CalendarHeading.vue";
+export {
+  default as CalendarNext,
+  type CalendarNextProps,
+} from "./CalendarNext.vue";
+export {
+  default as CalendarPrev,
+  type CalendarPrevProps,
+} from "./CalendarPrev.vue";
+export {
+  default as CalendarRoot,
+  type CalendarRootEmits,
+  type CalendarRootProps,
+  injectCalendarRootContext,
+} from "./CalendarRoot.vue";
+export {
+  default as CalendarMonthHeading,
+  type CalendarMonthHeadingProps,
+} from "./CalendarMonthHeading.vue";
+export {
+  default as CalendarYearHeading,
+  type CalendarYearHeadingProps,
+} from "./CalendarYearHeading.vue";
+export {
+  default as CalendarMonthYearOverlay,
+  type CalendarMonthYearOverlayProps,
+} from "./CalendarMonthYearOverlay.vue";