@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/DatePicker/DatePickerHeadCell.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { CalendarHeadCellProps } from "../Calendar";
+import { CalendarHeadCell } from "../Calendar";
+
+export type DatePickerHeadCellProps = CalendarHeadCellProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerHeadCellProps>();
+</script>
+
+<template>
+  <CalendarHeadCell v-bind="props">
+    <slot />
+  </CalendarHeadCell>
+</template>

package/src/components/DatePicker/DatePickerHeader.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { CalendarHeaderProps } from "../Calendar";
+import { CalendarHeader } from "../Calendar";
+
+export type DatePickerHeaderProps = CalendarHeaderProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerHeaderProps>();
+</script>
+
+<template>
+  <CalendarHeader v-bind="props">
+    <slot />
+  </CalendarHeader>
+</template>

package/src/components/DatePicker/DatePickerHeading.vue

@@ -0,0 +1,24 @@
+<script lang="ts">
+import type { CalendarHeadingProps } from "../Calendar";
+import { CalendarHeading } from "../Calendar";
+
+export type DatePickerHeadingProps = CalendarHeadingProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerHeadingProps>();
+defineSlots<{
+  default?: (props: {
+    /** Current month and year */
+    headingValue: string;
+  }) => any;
+}>();
+</script>
+
+<template>
+  <CalendarHeading v-slot="{ headingValue }" v-bind="props">
+    <slot :heading-value="headingValue">
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>

package/src/components/DatePicker/DatePickerInput.vue

@@ -0,0 +1,16 @@
+<script lang="ts">
+import type { DateFieldInputProps } from "../DateField";
+import { DateFieldInput } from "../DateField";
+
+export type DatePickerInputProps = DateFieldInputProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerInputProps>();
+</script>
+
+<template>
+  <DateFieldInput v-bind="props">
+    <slot />
+  </DateFieldInput>
+</template>

package/src/components/DatePicker/DatePickerMonthHeading.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { CalendarMonthHeadingProps } from "../Calendar";
+import { CalendarMonthHeading } from "../Calendar";
+
+export type DatePickerMonthHeadingProps = CalendarMonthHeadingProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CalendarMonthHeadingProps>();
+
+// TODO
+// defineSlots<CalendarNextSlot>();
+</script>
+
+<template>
+  <CalendarMonthHeading v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </CalendarMonthHeading>
+</template>

package/src/components/DatePicker/DatePickerMonthYearOverlay.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { CalendarMonthYearOverlay, type CalendarMonthYearOverlayProps } from "../Calendar";
+
+export type DatePickerMonthYearOverlayProps = CalendarMonthYearOverlayProps 
+
+const props = defineProps<DatePickerMonthYearOverlayProps>();
+</script> 
+
+<template>
+  <CalendarMonthYearOverlay v-bind="props" v-slot="{ months, years }">
+    <slot :months="months" :years="years" />
+  </CalendarMonthYearOverlay>
+</template>

package/src/components/DatePicker/DatePickerNext.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { CalendarNextProps } from "../Calendar";
+import type { CalendarNextSlot } from "../Calendar/CalendarNext.vue";
+import { CalendarNext } from "../Calendar";
+
+export type DatePickerNextProps = CalendarNextProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerNextProps>();
+
+defineSlots<CalendarNextSlot>();
+</script>
+
+<template>
+  <CalendarNext v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </CalendarNext>
+</template>

package/src/components/DatePicker/DatePickerOverlayItem.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { useAttrs } from 'vue';
+import CalendarOverlayItem, {
+  type CalendarOverlayItemProps,
+} from "../Calendar/CalendarOverlayItem.vue";
+
+export type DatePickerOverlayItemProps = CalendarOverlayItemProps
+
+const props = defineProps<DatePickerOverlayItemProps>();
+</script>
+
+<template>
+  <CalendarOverlayItem v-bind="props">
+    <slot />
+  </CalendarOverlayItem>
+</template>

package/src/components/DatePicker/DatePickerPrev.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+import type { CalendarPrevProps } from "../Calendar";
+import type { CalendarPrevSlot } from "../Calendar/CalendarPrev.vue";
+import { CalendarPrev } from "../Calendar";
+
+export type DatePickerPrevProps = CalendarPrevProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerPrevProps>();
+defineSlots<CalendarPrevSlot>();
+</script>
+
+<template>
+  <CalendarPrev v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </CalendarPrev>
+</template>

package/src/components/DatePicker/DatePickerRoot.vue

@@ -0,0 +1,216 @@
+<script lang="ts">
+import type { DateValue } from "@internationalized/date";
+
+import type { Ref } from "vue";
+import type { CalendarRootProps } from "../Calendar";
+import type { DateFieldRootProps } from "../DateField";
+import type { PopoverRootEmits, PopoverRootProps } from "../Popover";
+import type { DateFieldRoot } from "../DateField";
+import type { Matcher, WeekDayFormat } from "../../date";
+import type { DateStep, Granularity, HourCycle } from "../../shared/date";
+import type { Direction } from "../../shared/types";
+import { computed, ref, toRefs, watch } from "vue";
+import { createContext, useDirection } from "../../shared";
+import { getDefaultDate } from "../../shared/date";
+import { PopoverRoot } from "../Popover";
+
+type DatePickerRootContext = {
+  id: Ref<string | undefined>;
+  name: Ref<string | undefined>;
+  minValue: Ref<DateValue | undefined>;
+  maxValue: Ref<DateValue | undefined>;
+  hourCycle: Ref<HourCycle | undefined>;
+  granularity: Ref<Granularity | undefined>;
+  hideTimeZone: Ref<boolean>;
+  required: Ref<boolean>;
+  locale: Ref<string>;
+  dateFieldRef: Ref<InstanceType<typeof DateFieldRoot> | undefined>;
+  modelValue: Ref<DateValue | undefined>;
+  placeholder: Ref<DateValue>;
+  pagedNavigation: Ref<boolean>;
+  preventDeselect: Ref<boolean>;
+  weekStartsOn: Ref<0 | 1 | 2 | 3 | 4 | 5 | 6>;
+  weekdayFormat: Ref<WeekDayFormat>;
+  fixedWeeks: Ref<boolean>;
+  numberOfMonths: Ref<number>;
+  disabled: Ref<boolean>;
+  readonly: Ref<boolean>;
+  isDateDisabled?: Matcher;
+  isDateUnavailable?: Matcher;
+  defaultOpen: Ref<boolean>;
+  open: Ref<boolean>;
+  onDateChange: (date: DateValue | undefined) => void;
+  onPlaceholderChange: (date: DateValue) => void;
+  dir: Ref<Direction>;
+  step: Ref<DateStep | undefined>;
+  closeOnSelect: Ref<boolean>;
+};
+
+export type DatePickerRootProps = DateFieldRootProps &
+  PopoverRootProps &
+  Pick<
+    CalendarRootProps,
+    | "isDateDisabled"
+    | "pagedNavigation"
+    | "weekStartsOn"
+    | "weekdayFormat"
+    | "fixedWeeks"
+    | "numberOfMonths"
+    | "preventDeselect"
+  > & {
+    /** Whether or not to close the popover on date select */
+    closeOnSelect?: boolean;
+  };
+
+export type DatePickerRootEmits = {
+  /** 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 [injectDatePickerRootContext, provideDatePickerRootContext] =
+  createContext<DatePickerRootContext>("DatePickerRoot");
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+
+defineOptions({
+  inheritAttrs: false,
+});
+const props = withDefaults(defineProps<DatePickerRootProps>(), {
+  defaultValue: undefined,
+  defaultOpen: false,
+  open: undefined,
+  pagedNavigation: false,
+  preventDeselect: false,
+  weekStartsOn: 0,
+  weekdayFormat: "narrow",
+  fixedWeeks: false,
+  numberOfMonths: 1,
+  disabled: false,
+  readonly: false,
+  placeholder: undefined,
+  locale: "en",
+  isDateDisabled: undefined,
+  isDateUnavailable: undefined,
+  closeOnSelect: false,
+});
+const emits = defineEmits<DatePickerRootEmits & PopoverRootEmits>();
+const {
+  locale,
+  disabled,
+  readonly,
+  pagedNavigation,
+  weekStartsOn,
+  weekdayFormat,
+  fixedWeeks,
+  numberOfMonths,
+  preventDeselect,
+  isDateDisabled: propsIsDateDisabled,
+  isDateUnavailable: propsIsDateUnavailable,
+  defaultOpen,
+  id,
+  name,
+  required,
+  minValue,
+  maxValue,
+  granularity,
+  hideTimeZone,
+  hourCycle,
+  defaultValue,
+  dir: propDir,
+  step,
+  closeOnSelect,
+} = toRefs(props);
+
+const dir = useDirection(propDir);
+
+const modelValue = useVModel(props, "modelValue", emits, {
+  defaultValue: defaultValue.value,
+  passive: (props.modelValue === undefined) as false,
+}) as Ref<DateValue | undefined>;
+
+const defaultDate = computed(() =>
+  getDefaultDate({
+    defaultPlaceholder: props.placeholder,
+    granularity: props.granularity,
+    defaultValue: modelValue.value,
+    locale: props.locale,
+  }),
+);
+
+const placeholder = useVModel(props, "placeholder", emits, {
+  defaultValue: props.defaultPlaceholder ?? defaultDate.value.copy(),
+  passive: (props.placeholder === undefined) as false,
+}) as Ref<DateValue>;
+
+const open = useVModel(props, "open", emits, {
+  defaultValue: defaultOpen.value,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+const dateFieldRef = ref<InstanceType<typeof DateFieldRoot> | undefined>();
+
+watch(modelValue, (value) => {
+  if (value && value.compare(placeholder.value) !== 0) {
+    placeholder.value = value.copy();
+  }
+  if (closeOnSelect.value) {
+    open.value = false;
+  }
+});
+
+provideDatePickerRootContext({
+  isDateUnavailable: propsIsDateUnavailable.value,
+  isDateDisabled: propsIsDateDisabled.value,
+  locale,
+  disabled,
+  pagedNavigation,
+  weekStartsOn,
+  weekdayFormat,
+  fixedWeeks,
+  numberOfMonths,
+  readonly,
+  preventDeselect,
+  modelValue,
+  placeholder,
+  defaultOpen,
+  open,
+  id,
+  name,
+  required,
+  minValue,
+  maxValue,
+  granularity,
+  hideTimeZone,
+  hourCycle,
+  dateFieldRef,
+  dir,
+  step,
+  onDateChange(date: DateValue | undefined) {
+    if (!date || !modelValue.value) {
+      modelValue.value = date?.copy() ?? undefined;
+    } else if (
+      !preventDeselect.value &&
+      date &&
+      modelValue.value.compare(date) === 0
+    ) {
+      modelValue.value = undefined;
+    } else {
+      modelValue.value = date.copy();
+    }
+  },
+  onPlaceholderChange(date: DateValue) {
+    placeholder.value = date.copy();
+  },
+  closeOnSelect,
+});
+</script>
+
+<template>
+  <PopoverRoot v-model:open="open" :default-open="defaultOpen">
+    <slot />
+  </PopoverRoot>
+</template>

package/src/components/DatePicker/DatePickerTrigger.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PopoverTriggerProps } from "../Popover";
+import { PopoverTrigger } from "../Popover";
+import { injectDatePickerRootContext } from "./DatePickerRoot.vue";
+
+export type DatePickerTriggerProps = PopoverTriggerProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DatePickerTriggerProps>();
+const rootContext = injectDatePickerRootContext();
+</script>
+
+<template>
+  <PopoverTrigger
+    data-reka-date-field-segment="trigger"
+    v-bind="props"
+    :disabled="rootContext.disabled.value"
+    @focusin="
+      (e: FocusEvent) => {
+        rootContext.dateFieldRef.value?.setFocusedElement(
+          e.target as HTMLElement,
+        );
+      }
+    "
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

package/src/components/DatePicker/DatePickerYearHeading.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { CalendarYearHeadingProps } from "../Calendar";
+import { CalendarYearHeading } from "../Calendar";
+
+export type DatePickerYearHeadingProps = CalendarYearHeadingProps;
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CalendarYearHeadingProps>();
+
+// TODO
+// defineSlots<CalendarNextSlot>();
+</script>
+
+<template>
+  <CalendarYearHeading v-slot="slotProps" v-bind="props">
+    <slot v-bind="slotProps" />
+  </CalendarYearHeading>
+</template>

package/src/components/DatePicker/index.ts

@@ -0,0 +1,92 @@
+export { default as DatePickerAnchor } from "./DatePickerAnchor.vue";
+
+export { default as DatePickerArrow } from "./DatePickerArrow.vue";
+export { default as DatePickerCalendar } from "./DatePickerCalendar.vue";
+
+export {
+  default as DatePickerCell,
+  type DatePickerCellProps,
+} from "./DatePickerCell.vue";
+
+export {
+  default as DatePickerCellTrigger,
+  type DatePickerCellTriggerProps,
+} from "./DatePickerCellTrigger.vue";
+export { default as DatePickerClose } from "./DatePickerClose.vue";
+
+export {
+  default as DatePickerContent,
+  type DatePickerContentProps,
+} from "./DatePickerContent.vue";
+export { default as DatePickerField } from "./DatePickerField.vue";
+
+export {
+  default as DatePickerGrid,
+  type DatePickerGridProps,
+} from "./DatePickerGrid.vue";
+export {
+  default as DatePickerGridBody,
+  type DatePickerGridBodyProps,
+} from "./DatePickerGridBody.vue";
+export {
+  default as DatePickerGridHead,
+  type DatePickerGridHeadProps,
+} from "./DatePickerGridHead.vue";
+
+export {
+  default as DatePickerGridRow,
+  type DatePickerGridRowProps,
+} from "./DatePickerGridRow.vue";
+
+export {
+  default as DatePickerHeadCell,
+  type DatePickerHeadCellProps,
+} from "./DatePickerHeadCell.vue";
+
+export {
+  default as DatePickerHeader,
+  type DatePickerHeaderProps,
+} from "./DatePickerHeader.vue";
+export {
+  default as DatePickerHeading,
+  type DatePickerHeadingProps,
+} from "./DatePickerHeading.vue";
+
+export {
+  default as DatePickerInput,
+  type DatePickerInputProps,
+} from "./DatePickerInput.vue";
+export {
+  default as DatePickerNext,
+  type DatePickerNextProps,
+} from "./DatePickerNext.vue";
+export {
+  default as DatePickerPrev,
+  type DatePickerPrevProps,
+} from "./DatePickerPrev.vue";
+export {
+  default as DatePickerRoot,
+  type DatePickerRootEmits,
+  type DatePickerRootProps,
+  injectDatePickerRootContext,
+} from "./DatePickerRoot.vue";
+export {
+  default as DatePickerTrigger,
+  type DatePickerTriggerProps,
+} from "./DatePickerTrigger.vue";
+export {
+  default as DatePickerMonthHeading,
+  type DatePickerMonthHeadingProps,
+} from "./DatePickerMonthHeading.vue";
+export {
+  default as DatePickerYearHeading,
+  type DatePickerYearHeadingProps,
+} from "./DatePickerYearHeading.vue";
+export {
+  default as DatePickerMonthYearOverlay,
+  type DatePickerMonthYearOverlayProps,
+} from "./DatePickerMonthYearOverlay.vue";
+export {
+  default as DatePickerOverlayItem,
+  type DatePickerOverlayItemProps,
+} from "./DatePickerOverlayItem.vue";