@rupe/v-datepicker 1.0.0-alpha.2 → 1.0.0-beta.1

package/dist/index.d.ts

@@ -40,6 +40,8 @@ export declare const DatePicker: {
             readonly: boolean;
             isDateDisabled: Matcher;
             isDateUnavailable: Matcher;
+            minYear: number;
+            maxYear: number;
             closeOnSelect: boolean;
         }, false, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
             P: {};
@@ -68,6 +70,8 @@ export declare const DatePicker: {
             readonly: boolean;
             isDateDisabled: Matcher;
             isDateUnavailable: Matcher;
+            minYear: number;
+            maxYear: number;
             closeOnSelect: boolean;
         }>;
         __isFragment?: never;
@@ -97,6 +101,8 @@ export declare const DatePicker: {
         readonly: boolean;
         isDateDisabled: Matcher;
         isDateUnavailable: Matcher;
+        minYear: number;
+        maxYear: number;
         closeOnSelect: boolean;
     }, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
         $slots: {
@@ -527,10 +533,10 @@ export declare const DatePicker: {
     } & ComponentOptionsBase<Readonly< CalendarMonthYearOverlayProps> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
         $slots: {
             default?(_: {
-                months: MonthNameDateValue[];
+                months: MonthNameDateValue[][];
                 years: {
                     year: number;
-                }[];
+                }[][];
             }): any;
         };
     });

package/dist/index.mjs

@@ -6,6 +6,12 @@ import { defu } from "defu";
 import { unrefElement, computedEager, useVModel, defaultWindow, onKeyStroke, createGlobalState, useMounted } from "@vueuse/core";
 import { isClient, reactiveOmit } from "@vueuse/shared";
 import { offset, flip, shift, size, arrow, hide, limitShift, useFloating, autoUpdate } from "@floating-ui/vue";
+function chunk$1(arr, size2) {
+  const result = [];
+  for (let i = 0; i < arr.length; i += size2)
+    result.push(arr.slice(i, i + size2));
+  return result;
+}
 function createContext(providerComponentName, contextName) {
   const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
   const injectionKey = Symbol(symbolDescription);
@@ -3177,6 +3183,9 @@ function handlePrevPage(date, prevPageFunc) {
 }
 function useCalendar(props) {
   const formatter = useDateFormatter(props.locale.value);
+  watch(props.locale, (newLocale) => {
+    formatter.setLocale(newLocale);
+  });
   const headingFormatOptions = computed(() => {
     const options = {
       calendar: props.placeholder.value.calendar.identifier
@@ -3343,15 +3352,14 @@ function useCalendar(props) {
     }
   );
   const headingValue = computed(() => {
-    if (!grid.value.length) return "";
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
+    if (!grid.value.length || !grid.value[0]) return "";
     if (grid.value.length === 1) {
       const month = grid.value[0].value;
       return `${formatter.fullMonthAndYear(toDate(month), headingFormatOptions.value)}`;
     }
     const startMonth = toDate(grid.value[0].value);
-    const endMonth = toDate(grid.value[grid.value.length - 1].value);
+    const lastMonth = grid.value[grid.value.length - 1];
+    const endMonth = toDate(lastMonth ? lastMonth.value : grid.value[0].value);
     const startMonthName = formatter.fullMonth(
       startMonth,
       headingFormatOptions.value
@@ -3371,26 +3379,18 @@ function useCalendar(props) {
     const content = startMonthYear === endMonthYear ? `${startMonthName} - ${endMonthName} ${endMonthYear}` : `${startMonthName} ${startMonthYear} - ${endMonthName} ${endMonthYear}`;
     return content;
   });
-  const currentMonth = computed(() => {
-    if (!grid.value.length) return "";
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
-    const date = grid.value[0]?.value;
-    if (date) {
-      return `${formatter.fullMonth(toDate(date), headingFormatOptions.value)}`;
-    }
-    return "";
-  });
-  const currentYear = computed(() => {
+  function formatGridDate(fn) {
     if (!grid.value.length) return "";
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
     const date = grid.value[0]?.value;
-    if (date) {
-      return `${formatter.fullYear(toDate(date), headingFormatOptions.value)}`;
-    }
-    return "";
-  });
+    if (!date) return "";
+    return fn(toDate(date));
+  }
+  const currentMonth = computed(
+    () => formatGridDate((d) => formatter.fullMonth(d, headingFormatOptions.value))
+  );
+  const currentYear = computed(
+    () => formatGridDate((d) => formatter.fullYear(d, headingFormatOptions.value))
+  );
   const months = computed(() => {
     const startDate = props.placeholder.value.set({ month: 1 });
     const monthsArray = createMonths({
@@ -3407,8 +3407,8 @@ function useCalendar(props) {
     });
   });
   const years = computed(() => {
-    const startDate = props.placeholder.value.set({ year: 1875 });
-    const endDate = props.placeholder.value.set({ year: 2100 });
+    const startDate = props.placeholder.value.set({ year: props.minYear.value });
+    const endDate = props.placeholder.value.set({ year: props.maxYear.value });
     return createYearRange({ start: startDate, end: endDate });
   });
   const fullCalendarLabel = computed(
@@ -3467,6 +3467,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     modelValue: {},
     multiple: { type: Boolean, default: false },
     disableDaysOutsideCurrentView: { type: Boolean, default: false },
+    minYear: { default: 1900 },
+    maxYear: { default: 2100 },
     asChild: { type: Boolean },
     as: { default: "div" }
   },
@@ -3495,7 +3497,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       prevPage: propsPrevPage,
       dir: propDir,
       locale: propLocale,
-      disableDaysOutsideCurrentView
+      disableDaysOutsideCurrentView,
+      minYear,
+      maxYear
     } = toRefs(props);
     const { primitiveElement, currentElement: parentElement } = usePrimitiveElement();
     const locale = useLocale(propLocale);
@@ -3549,7 +3553,9 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
       isDateUnavailable: propsIsDateUnavailable.value,
       calendarLabel,
       nextPage: propsNextPage,
-      prevPage: propsPrevPage
+      prevPage: propsPrevPage,
+      minYear,
+      maxYear
     });
     const { isInvalid, isDateSelected } = useCalendarState({
       date: modelValue,
@@ -4139,6 +4145,10 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const [
+  injectCalendarMonthYearOverlayContext,
+  provideCalendarMonthYearOverlayContext
+] = createContext("CalendarMonthYearOverlay");
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
@@ -4146,20 +4156,27 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "CalendarMonthYearOverlay",
   props: {
     type: {},
+    itemsPerRow: { default: 4 },
     asChild: { type: Boolean },
     as: {}
   },
   setup(__props) {
     const props = __props;
+    const itemsPerRow = computed(() => props.itemsPerRow);
     const rootContext = injectCalendarRootContext();
-    const months = computed(() => rootContext.months.value);
-    const years = computed(() => rootContext.years.value);
+    const months = computed(
+      () => chunk$1(rootContext.months.value, props.itemsPerRow)
+    );
+    const years = computed(() => chunk$1(rootContext.years.value, props.itemsPerRow));
     const isOpen = computed(
       () => rootContext.monthYearOverlayState.value === props.type
     );
     function onEscapeKeyDown() {
       rootContext.monthYearOverlayState.value = false;
     }
+    provideCalendarMonthYearOverlayContext({
+      itemsPerRow
+    });
     return (_ctx, _cache) => {
       return isOpen.value ? (openBlock(), createBlock(_sfc_main$O, {
         key: 0,
@@ -4176,8 +4193,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
               left: "0",
               zIndex: "1000"
             },
-            role: "dialog",
-            tabindex: "0"
+            role: "dialog"
           }), {
             default: withCtx(() => [
               renderSlot(_ctx.$slots, "default", {
@@ -4230,6 +4246,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     fixedWeeks: { type: Boolean, default: false },
     numberOfMonths: { default: 1 },
     preventDeselect: { type: Boolean, default: false },
+    minYear: { default: 1900 },
+    maxYear: { default: 2100 },
     closeOnSelect: { type: Boolean, default: false }
   },
   emits: ["update:modelValue", "update:placeholder", "update:open"],
@@ -4260,7 +4278,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       defaultValue,
       dir: propDir,
       step,
-      closeOnSelect
+      closeOnSelect,
+      minYear,
+      maxYear
     } = toRefs(props);
     const dir = useDirection(propDir);
     const modelValue = useVModel(props, "modelValue", emits, {
@@ -4331,7 +4351,9 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
       onPlaceholderChange(date) {
         placeholder.value = date.copy();
       },
-      closeOnSelect
+      closeOnSelect,
+      minYear,
+      maxYear
     });
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(_sfc_main$S), {
@@ -4366,7 +4388,9 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
         numberOfMonths: unref(rootContext).numberOfMonths.value,
         readonly: unref(rootContext).readonly.value,
         preventDeselect: unref(rootContext).preventDeselect.value,
-        dir: unref(rootContext).dir.value
+        dir: unref(rootContext).dir.value,
+        minYear: unref(rootContext).minYear.value,
+        maxYear: unref(rootContext).maxYear.value
       }, {
         "model-value": unref(rootContext).modelValue.value,
         placeholder: unref(rootContext).placeholder.value,
@@ -5125,6 +5149,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "DatePickerMonthYearOverlay",
   props: {
     type: {},
+    itemsPerRow: {},
     asChild: { type: Boolean },
     as: {}
   },
@@ -5147,25 +5172,125 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "CalendarOverlayItem",
   props: {
     date: {},
+    disabled: { type: Boolean },
+    type: {},
     asChild: { type: Boolean },
-    as: { default: "button" }
+    as: { default: "div" }
   },
   setup(__props) {
     const props = __props;
     const rootContext = injectCalendarRootContext();
+    const years = computed(() => rootContext.years.value);
+    const overlayContext = injectCalendarMonthYearOverlayContext();
+    const dataValue = computed(() => `${props.type}-${props.date[props.type]}`);
+    const { primitiveElement, currentElement } = usePrimitiveElement();
+    const isFocusedDate = computed(() => {
+      if (props.type === "month")
+        return rootContext.currentMonth.value === props.date.monthName;
+      return rootContext.currentYear.value === props.date.year.toString();
+    });
+    const ariaLabel = computed(() => {
+      if (props.type === "month") return props.date.monthName;
+      return props.date.year.toString();
+    });
+    onMounted(() => {
+      if (isFocusedDate.value) {
+        nextTick(() => {
+          currentElement.value?.focus();
+          currentElement.value?.scrollIntoView({ block: "nearest" });
+        });
+      }
+    });
+    function isDateSelectable(date) {
+      return !rootContext.isDateDisabled(date) && !rootContext.isDateUnavailable?.(date);
+    }
+    function closeOverlay() {
+      rootContext.monthYearOverlayState.value = false;
+    }
     function handleClick() {
-      if (rootContext.isDateDisabled(props.date) || rootContext.isDateUnavailable?.(props.date))
-        return;
+      if (!isDateSelectable(props.date)) return;
       rootContext.onDateChange(props.date);
-      rootContext.monthYearOverlayState.value = false;
+      closeOverlay();
+    }
+    const kbd = useKbd();
+    function handleKeydown(e) {
+      if (props.disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const parentElement = rootContext.parentElement.value;
+      const itemsPerRow = overlayContext.itemsPerRow.value;
+      const sign = rootContext.dir.value === "rtl" ? -1 : 1;
+      const currentValue = props.date[props.type];
+      function focusItem(value) {
+        const candidate = parentElement.querySelector(
+          `[data-value='${props.type}-${value}']`
+        );
+        candidate?.focus();
+        candidate?.scrollIntoView({ block: "nearest" });
+      }
+      function shiftFocus(add) {
+        let nextValue = currentValue + add;
+        if (props.type === "month") {
+          nextValue = (nextValue - 1 + 12) % 12 + 1;
+        } else {
+          const minYear = years.value[0].year;
+          const maxYear = years.value[years.value.length - 1].year;
+          nextValue = Math.max(minYear, Math.min(nextValue, maxYear));
+        }
+        focusItem(nextValue);
+      }
+      switch (e.code) {
+        case kbd.ARROW_RIGHT:
+          shiftFocus(sign);
+          break;
+        case kbd.ARROW_LEFT:
+          shiftFocus(-sign);
+          break;
+        case kbd.ARROW_UP:
+          shiftFocus(-itemsPerRow);
+          break;
+        case kbd.ARROW_DOWN:
+          shiftFocus(itemsPerRow);
+          break;
+        case kbd.HOME: {
+          const firstValue = props.type === "month" ? 1 : years.value[0].year;
+          focusItem(firstValue);
+          break;
+        }
+        case kbd.END: {
+          const lastValue = props.type === "month" ? 12 : years.value[years.value.length - 1].year;
+          focusItem(lastValue);
+          break;
+        }
+        case kbd.ENTER:
+        case kbd.SPACE_CODE:
+          if (isDateSelectable(props.date)) {
+            rootContext.onDateChange(props.date);
+            closeOverlay();
+          }
+      }
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(Primitive), mergeProps(props, { onClick: handleClick }), {
+      return openBlock(), createBlock(unref(Primitive), mergeProps(props, {
+        onClick: handleClick,
+        ref_key: "primitiveElement",
+        ref: primitiveElement,
+        role: "button",
+        "aria-label": ariaLabel.value,
+        "aria-disabled": __props.disabled,
+        "data-value": dataValue.value,
+        onKeydown: [
+          withKeys(handleKeydown, ["up", "down", "left", "right", "space", "enter", "home", "end"]),
+          _cache[0] || (_cache[0] = withKeys(withModifiers(() => {
+          }, ["prevent"]), ["enter"]))
+        ],
+        tabindex: isFocusedDate.value ? 0 : -1
+      }), {
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16);
+      }, 16, ["aria-label", "aria-disabled", "data-value", "tabindex"]);
     };
   }
 });
@@ -5173,6 +5298,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "DatePickerOverlayItem",
   props: {
     date: {},
+    disabled: { type: Boolean },
+    type: {},
     asChild: { type: Boolean },
     as: {}
   },