@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/Calendar/CalendarCell.vue

@@ -0,0 +1,39 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+
+export interface CalendarCellProps extends PrimitiveProps {
+  /** The date value for the cell */
+  date: DateValue;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+withDefaults(defineProps<CalendarCellProps>(), { as: "td" });
+const rootContext = injectCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    role="gridcell"
+    :aria-selected="rootContext.isDateSelected(date) ? true : undefined"
+    :aria-disabled="
+      rootContext.isDateDisabled(date) ||
+      rootContext.isDateUnavailable?.(date) ||
+      rootContext.disableDaysOutsideCurrentView.value
+    "
+    :data-disabled="
+      rootContext.isDateDisabled(date) ||
+      rootContext.disableDaysOutsideCurrentView.value
+        ? ''
+        : undefined
+    "
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarCellTrigger.vue

@@ -0,0 +1,206 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+import {
+  getLocalTimeZone,
+  isSameDay,
+  isSameMonth,
+  isToday,
+} from "@internationalized/date";
+import { computed, nextTick } from "vue";
+import { toDate } from "../../date";
+import { useKbd } from "../../shared";
+
+export interface CalendarCellTriggerProps extends PrimitiveProps {
+  /** The date value provided to the cell trigger */
+  day: DateValue;
+  /** The month in which the cell is rendered */
+  month: DateValue;
+}
+
+export interface CalendarCellTriggerSlot {
+  default?: (props: {
+    /** Current day */
+    dayValue: string;
+    /** Current disable state */
+    disabled: boolean;
+    /** Current selected state */
+    selected: boolean;
+    /** Current today state */
+    today: boolean;
+    /** Current outside view state */
+    outsideView: boolean;
+    /** Current outside visible view state */
+    outsideVisibleView: boolean;
+    /** Current unavailable state */
+    unavailable: boolean;
+  }) => any;
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive, usePrimitiveElement } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarCellTriggerProps>(), {
+  as: "div",
+});
+
+defineSlots<CalendarCellTriggerSlot>();
+
+const kbd = useKbd();
+const rootContext = injectCalendarRootContext();
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+
+const dayValue = computed(() =>
+  props.day.day.toLocaleString(rootContext.locale.value),
+);
+
+const labelText = computed(() => {
+  return rootContext.formatter.custom(toDate(props.day), {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+});
+
+const isUnavailable = computed(
+  () => rootContext.isDateUnavailable?.(props.day) ?? false,
+);
+const isDateToday = computed(() => {
+  return isToday(props.day, getLocalTimeZone());
+});
+const isOutsideView = computed(() => {
+  return !isSameMonth(props.day, props.month);
+});
+
+const isOutsideVisibleView = computed(() =>
+  rootContext.isOutsideVisibleView(props.day),
+);
+
+const isDisabled = computed(
+  () =>
+    rootContext.isDateDisabled(props.day) ||
+    (rootContext.disableDaysOutsideCurrentView.value && isOutsideView.value),
+);
+
+const isFocusedDate = computed(() => {
+  return (
+    !rootContext.disabled.value &&
+    isSameDay(props.day, rootContext.placeholder.value)
+  );
+});
+const isSelectedDate = computed(() => rootContext.isDateSelected(props.day));
+
+function changeDate(date: DateValue) {
+  if (rootContext.readonly.value) return;
+  if (rootContext.isDateDisabled(date) || rootContext.isDateUnavailable?.(date))
+    return;
+
+  rootContext.onDateChange(date);
+}
+
+function handleClick() {
+  if (isDisabled.value) return;
+  changeDate(props.day);
+}
+
+function handleArrowKey(e: KeyboardEvent) {
+  if (isDisabled.value) return;
+  e.preventDefault();
+  e.stopPropagation();
+  const parentElement = rootContext.parentElement.value!;
+  const indexIncrementation = 7;
+  const sign = rootContext.dir.value === "rtl" ? -1 : 1;
+  switch (e.code) {
+    case kbd.ARROW_RIGHT:
+      shiftFocus(props.day, sign);
+      break;
+    case kbd.ARROW_LEFT:
+      shiftFocus(props.day, -sign);
+      break;
+    case kbd.ARROW_UP:
+      shiftFocus(props.day, -indexIncrementation);
+      break;
+    case kbd.ARROW_DOWN:
+      shiftFocus(props.day, indexIncrementation);
+      break;
+    case kbd.ENTER:
+    case kbd.SPACE_CODE:
+      changeDate(props.day);
+  }
+
+  function shiftFocus(day: DateValue, add: number) {
+    const candidateDayValue = day.add({ days: add });
+
+    if (
+      (rootContext.minValue.value &&
+        candidateDayValue.compare(rootContext.minValue.value) < 0) ||
+      (rootContext.maxValue.value &&
+        candidateDayValue.compare(rootContext.maxValue.value) > 0)
+    )
+      return;
+
+    const candidateDay = parentElement.querySelector<HTMLElement>(
+      `[data-value='${candidateDayValue.toString()}']:not([data-outside-view])`,
+    );
+    // If the date is not found it means we must change the page
+    if (!candidateDay) {
+      if (add > 0) {
+        if (rootContext.isNextButtonDisabled()) return;
+        rootContext.nextPage();
+      } else {
+        if (rootContext.isPrevButtonDisabled()) return;
+        rootContext.prevPage();
+      }
+      nextTick(() => {
+        shiftFocus(day, add);
+      });
+      return;
+    }
+
+    if (candidateDay && candidateDay.hasAttribute("data-disabled")) {
+      return shiftFocus(candidateDayValue, add);
+    }
+    rootContext.onPlaceholderChange(candidateDayValue);
+    candidateDay?.focus();
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    ref="primitiveElement"
+    v-bind="props"
+    role="button"
+    :aria-label="labelText"
+    data-reka-calendar-cell-trigger
+    :aria-disabled="isDisabled || isUnavailable ? true : undefined"
+    :data-selected="isSelectedDate ? true : undefined"
+    :data-value="day.toString()"
+    :data-disabled="isDisabled ? '' : undefined"
+    :data-unavailable="isUnavailable ? '' : undefined"
+    :data-today="isDateToday ? '' : undefined"
+    :data-outside-view="isOutsideView ? '' : undefined"
+    :data-outside-visible-view="isOutsideVisibleView ? '' : undefined"
+    :data-focused="isFocusedDate ? '' : undefined"
+    :tabindex="isFocusedDate ? 0 : isOutsideView || isDisabled ? undefined : -1"
+    @click="handleClick"
+    @keydown.up.down.left.right.space.enter="handleArrowKey"
+    @keydown.enter.prevent
+  >
+    <slot
+      :day-value="dayValue"
+      :disabled="isDisabled"
+      :today="isDateToday"
+      :selected="isSelectedDate"
+      :outside-view="isOutsideView"
+      :outside-visible-view="isOutsideVisibleView"
+      :unavailable="isUnavailable"
+    >
+      {{ dayValue }}
+    </slot>
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarGrid.vue

@@ -0,0 +1,35 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarGridProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarGridProps>(), { as: "table" });
+
+const rootContext = injectCalendarRootContext();
+const disabled = computed(() =>
+  rootContext.disabled.value ? true : undefined,
+);
+const readonly = computed(() =>
+  rootContext.readonly.value ? true : undefined,
+);
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    tabindex="-1"
+    role="grid"
+    :aria-readonly="readonly"
+    :aria-disabled="disabled"
+    :data-readonly="readonly && ''"
+    :data-disabled="disabled && ''"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarGridBody.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarGridBodyProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarGridBodyProps>(), {
+  as: "tbody",
+});
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarGridHead.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarGridHeadProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarGridHeadProps>(), {
+  as: "thead",
+});
+</script>
+
+<template>
+  <Primitive v-bind="props" aria-hidden="true">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarGridRow.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarGridRowProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarGridRowProps>(), { as: "tr" });
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarHeadCell.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarHeadCellProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarHeadCellProps>(), { as: "th" });
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarHeader.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarHeaderProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+const props = withDefaults(defineProps<CalendarHeaderProps>(), { as: "div" });
+</script>
+
+<template>
+  <Primitive v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarHeading.vue

@@ -0,0 +1,32 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export type CalendarHeadingProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarHeadingProps>(), { as: "div" });
+
+defineSlots<{
+  default?: (props: {
+    /** Current month and year */
+    headingValue: string;
+  }) => any;
+}>();
+
+const rootContext = injectCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    v-bind="props"
+    :data-disabled="rootContext.disabled.value ? '' : undefined"
+  >
+    <slot :heading-value="rootContext.headingValue.value">
+      {{ rootContext.headingValue.value }}
+    </slot>
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarMonthHeading.vue

@@ -0,0 +1,65 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+
+export interface CalendarMonthHeadingProps 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<CalendarMonthHeadingProps>(), {
+  as: "button",
+});
+
+// TODO
+// defineSlots<CalendarNextSlot>();
+
+const disabled = computed(() => {
+  // TODO
+
+  // rootContext.disabled.value ||
+  // rootContext.isNextButtonDisabled(props.nextPage),
+  return false;
+});
+
+const rootContext = injectCalendarRootContext();
+const currentMonth = computed(() => rootContext.currentMonth?.value);
+const attrs = useAttrs();
+const ariaLabel = computed(
+  () =>
+    currentMonth.value +
+    " - " +
+    (attrs["aria-label"] || "Open month selection overlay"),
+);
+
+function handleClick() {
+  rootContext.monthYearOverlayState.value = "month";
+}
+</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>
+      {{ currentMonth }}
+    </slot>
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarMonthYearOverlay.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { Primitive, type PrimitiveProps } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";import DismissableLayer from "../DismissableLayer/DismissableLayer.vue";
+
+export interface CalendarMonthYearOverlayProps extends PrimitiveProps {
+  type: "month" | "year";
+}
+
+const props = defineProps<CalendarMonthYearOverlayProps>();
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const rootContext = injectCalendarRootContext();
+
+const months = computed(() => rootContext.months.value);
+const years = computed(() => rootContext.years.value);
+
+const isOpen = computed(() => rootContext.monthYearOverlayState.value === props.type);
+
+function onEscapeKeyDown() {
+  rootContext.monthYearOverlayState.value = false;
+}
+
+</script>
+
+<template>
+  <DismissableLayer as-child @escape-key-down="onEscapeKeyDown">
+    <Primitive
+      v-if="isOpen"
+      v-bind="{ ...props, ...$attrs }"
+      :style="{
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        top: '0',
+        left: '0',
+        zIndex: '1000',
+      }"
+      role="dialog"
+      tabindex="0"
+    >
+      <slot :months="months" :years="years" :state="rootContext.monthYearOverlayState" />
+    </Primitive>
+  </DismissableLayer>
+</template>

package/src/components/Calendar/CalendarNext.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+
+export interface CalendarNextProps extends PrimitiveProps {
+  /** The function to be used for the next page. Overwrites the `nextPage` function set on the `CalendarRoot`. */
+  nextPage?: (placeholder: DateValue) => DateValue;
+}
+
+export interface CalendarNextSlot {
+  default?: (props: {
+    /** Current disable state */
+    disabled: boolean;
+  }) => any;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarNextProps>(), {
+  as: "button",
+  step: "month",
+});
+defineSlots<CalendarNextSlot>();
+
+const disabled = computed(
+  () =>
+    rootContext.disabled.value ||
+    rootContext.isNextButtonDisabled(props.nextPage),
+);
+
+const rootContext = injectCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    aria-label="Next page"
+    :type="as === 'button' ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="rootContext.nextPage(props.nextPage)"
+  >
+    <slot :disabled> Next page </slot>
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarOverlayItem.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { DateValue } from "@internationalized/date";
+import { Primitive } from "../Primitive";
+import type { PrimitiveProps } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+export interface CalendarOverlayItemProps extends PrimitiveProps {
+  date: DateValue;
+}
+
+const props = withDefaults(defineProps<CalendarOverlayItemProps>(), {
+  as: "button",
+});
+
+const rootContext = injectCalendarRootContext();
+
+function handleClick() {
+  if (rootContext.isDateDisabled(props.date) || rootContext.isDateUnavailable?.(props.date))
+    return;
+
+  rootContext.onDateChange(props.date);
+  rootContext.monthYearOverlayState.value = false;
+}
+</script>
+
+<template>
+  <Primitive v-bind="props" @click="handleClick">
+    <slot />
+  </Primitive>
+</template>

package/src/components/Calendar/CalendarPrev.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+import type { PrimitiveProps } from "../Primitive";
+
+export interface CalendarPrevProps extends PrimitiveProps {
+  /** The function to be used for the prev page. Overwrites the `prevPage` function set on the `CalendarRoot`. */
+  prevPage?: (placeholder: DateValue) => DateValue;
+}
+
+export interface CalendarPrevSlot {
+  default?: (props: {
+    /** Current disable state */
+    disabled: boolean;
+  }) => any;
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { Primitive } from "../Primitive";
+import { injectCalendarRootContext } from "./CalendarRoot.vue";
+
+const props = withDefaults(defineProps<CalendarPrevProps>(), {
+  as: "button",
+  step: "month",
+});
+defineSlots<CalendarPrevSlot>();
+
+const disabled = computed(
+  () =>
+    rootContext.disabled.value ||
+    rootContext.isPrevButtonDisabled(props.prevPage),
+);
+
+const rootContext = injectCalendarRootContext();
+</script>
+
+<template>
+  <Primitive
+    aria-label="Previous page"
+    :as="props.as"
+    :as-child="props.asChild"
+    :type="as === 'button' ? 'button' : undefined"
+    :aria-disabled="disabled || undefined"
+    :data-disabled="disabled || undefined"
+    :disabled="disabled"
+    @click="rootContext.prevPage(props.prevPage)"
+  >
+    <slot :disabled> Prev page </slot>
+  </Primitive>
+</template>