@rupe/v-datepicker 1.0.0-beta.0 → 1.0.0-beta.3

package/README.md

@@ -62,10 +62,53 @@ import { DatePicker } from '@rupe/v-datepicker'
       <DatePicker.Calendar v-slot="{ weekDays, grid }">
         <DatePicker.Header class="flex items-center justify-between mb-4">
           <DatePicker.Prev class="p-1 hover:bg-gray-100 rounded">⬅️</DatePicker.Prev>
+          
           <DatePicker.Heading class="font-bold flex gap-1">
-             <DatePicker.MonthHeading />
-             <DatePicker.YearHeading />
+            <!-- Month Heading & Overlay -->
+            <DatePicker.MonthHeading class="hover:bg-gray-100 rounded px-1 cursor-pointer" />
+            <DatePicker.MonthYearOverlay type="month" class="bg-white rounded-lg shadow-lg p-2" :items-per-row="3">
+              <template #default="{ months }">
+                <DatePicker.Grid class="w-full">
+                  <DatePicker.GridBody>
+                    <DatePicker.GridRow v-for="(row, index) in months" :key="index" class="flex gap-1 mb-1">
+                      <DatePicker.Cell v-for="month in row" :key="month.monthName" :date="month" class="flex-1">
+                        <DatePicker.OverlayItem
+                          :date="month"
+                          type="month"
+                          class="w-full p-2 text-center rounded hover:bg-blue-50 data-[selected]:bg-blue-600 data-[selected]:text-white"
+                        >
+                          {{ month.monthName }}
+                        </DatePicker.OverlayItem>
+                      </DatePicker.Cell>
+                    </DatePicker.GridRow>
+                  </DatePicker.GridBody>
+                </DatePicker.Grid>
+              </template>
+            </DatePicker.MonthYearOverlay>
+
+            <!-- Year Heading & Overlay -->
+            <DatePicker.YearHeading class="hover:bg-gray-100 rounded px-1 cursor-pointer" />
+            <DatePicker.MonthYearOverlay type="year" class="bg-white rounded-lg shadow-lg p-2 h-64 overflow-y-auto" :items-per-row="3">
+              <template #default="{ years }">
+                <DatePicker.Grid class="w-full">
+                  <DatePicker.GridBody>
+                    <DatePicker.GridRow v-for="(row, index) in years" :key="index" class="flex gap-1 mb-1">
+                      <DatePicker.Cell v-for="year in row" :key="year.year" :date="year" class="flex-1">
+                        <DatePicker.OverlayItem
+                          :date="year"
+                          type="year"
+                          class="w-full p-2 text-center rounded hover:bg-blue-50 data-[selected]:bg-blue-600 data-[selected]:text-white"
+                        >
+                          {{ year.year }}
+                        </DatePicker.OverlayItem>
+                      </DatePicker.Cell>
+                    </DatePicker.GridRow>
+                  </DatePicker.GridBody>
+                </DatePicker.Grid>
+              </template>
+            </DatePicker.MonthYearOverlay>
           </DatePicker.Heading>
+
           <DatePicker.Next class="p-1 hover:bg-gray-100 rounded">➡️</DatePicker.Next>
         </DatePicker.Header>
         
@@ -97,7 +140,9 @@ import { DatePicker } from '@rupe/v-datepicker'
 
 ## Playground
 
-The repository includes a playground project built with **Nuxt** and **Tailwind CSS** to test the library locally.
+You can check out the package in action on [StackBlitz](https://stackblitz.com/edit/nuxt-starter-tjmzbch9?file=package.json).
+
+The repository also includes a playground project built with **Nuxt** and **Tailwind CSS** to test the library locally.
 
 ### Running the Playground
 

package/dist/components/Calendar/CalendarRoot.vue.d.ts

@@ -99,6 +99,10 @@ export interface CalendarRootProps extends PrimitiveProps {
     multiple?: boolean;
     /** Whether or not to disable days outside the current view. */
     disableDaysOutsideCurrentView?: boolean;
+    /** The minimum year displayed in the year overlay */
+    minYear?: number;
+    /** The maximum year displayed in the year overlay */
+    maxYear?: number;
 }
 export type CalendarRootEmits = {
     /** Event handler called whenever the model value changes */
@@ -130,6 +134,8 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<CalendarRootPro
     isDateDisabled: Matcher;
     isDateUnavailable: Matcher;
     disableDaysOutsideCurrentView: boolean;
+    minYear: number;
+    maxYear: number;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
     primitiveElement: CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
         asChild: {

package/dist/components/Calendar/useCalendar.d.ts

@@ -18,6 +18,8 @@ export type UseCalendarProps = {
     calendarLabel: Ref<string | undefined>;
     nextPage: Ref<((placeholder: DateValue) => DateValue) | undefined>;
     prevPage: Ref<((placeholder: DateValue) => DateValue) | undefined>;
+    minYear: Ref<number>;
+    maxYear: Ref<number>;
 };
 export type UseCalendarStateProps = {
     isDateDisabled: Matcher;

package/dist/components/DatePicker/DatePickerRoot.vue.d.ts

@@ -36,8 +36,10 @@ type DatePickerRootContext = {
     dir: Ref<Direction>;
     step: Ref<DateStep | undefined>;
     closeOnSelect: Ref<boolean>;
+    minYear: Ref<number>;
+    maxYear: Ref<number>;
 };
-export type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, "isDateDisabled" | "pagedNavigation" | "weekStartsOn" | "weekdayFormat" | "fixedWeeks" | "numberOfMonths" | "preventDeselect"> & {
+export type DatePickerRootProps = DateFieldRootProps & PopoverRootProps & Pick<CalendarRootProps, "isDateDisabled" | "pagedNavigation" | "weekStartsOn" | "weekdayFormat" | "fixedWeeks" | "numberOfMonths" | "preventDeselect" | "minYear" | "maxYear"> & {
     /** Whether or not to close the popover on date select */
     closeOnSelect?: boolean;
 };
@@ -72,6 +74,8 @@ declare const _default: __VLS_WithTemplateSlots< DefineComponent<DatePickerRootP
     readonly: boolean;
     isDateDisabled: Matcher;
     isDateUnavailable: Matcher;
+    minYear: number;
+    maxYear: number;
     closeOnSelect: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
     default?(_: {}): any;

package/dist/index.cjs

@@ -3201,6 +3201,9 @@ function handlePrevPage(date2, prevPageFunc) {
 }
 function useCalendar(props) {
   const formatter = useDateFormatter(props.locale.value);
+  vue.watch(props.locale, (newLocale) => {
+    formatter.setLocale(newLocale);
+  });
   const headingFormatOptions = vue.computed(() => {
     const options = {
       calendar: props.placeholder.value.calendar.identifier
@@ -3367,15 +3370,14 @@ function useCalendar(props) {
     }
   );
   const headingValue = vue.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
@@ -3395,26 +3397,18 @@ function useCalendar(props) {
     const content = startMonthYear === endMonthYear ? `${startMonthName} - ${endMonthName} ${endMonthYear}` : `${startMonthName} ${startMonthYear} - ${endMonthName} ${endMonthYear}`;
     return content;
   });
-  const currentMonth = vue.computed(() => {
-    if (!grid.value.length) return "";
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
-    const date2 = grid.value[0]?.value;
-    if (date2) {
-      return `${formatter.fullMonth(toDate(date2), headingFormatOptions.value)}`;
-    }
-    return "";
-  });
-  const currentYear = vue.computed(() => {
+  function formatGridDate(fn) {
     if (!grid.value.length) return "";
-    if (props.locale.value !== formatter.getLocale())
-      formatter.setLocale(props.locale.value);
     const date2 = grid.value[0]?.value;
-    if (date2) {
-      return `${formatter.fullYear(toDate(date2), headingFormatOptions.value)}`;
-    }
-    return "";
-  });
+    if (!date2) return "";
+    return fn(toDate(date2));
+  }
+  const currentMonth = vue.computed(
+    () => formatGridDate((d) => formatter.fullMonth(d, headingFormatOptions.value))
+  );
+  const currentYear = vue.computed(
+    () => formatGridDate((d) => formatter.fullYear(d, headingFormatOptions.value))
+  );
   const months = vue.computed(() => {
     const startDate = props.placeholder.value.set({ month: 1 });
     const monthsArray = createMonths({
@@ -3431,8 +3425,8 @@ function useCalendar(props) {
     });
   });
   const years = vue.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 = vue.computed(
@@ -3491,6 +3485,8 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     modelValue: {},
     multiple: { type: Boolean, default: false },
     disableDaysOutsideCurrentView: { type: Boolean, default: false },
+    minYear: { default: 1900 },
+    maxYear: { default: 2100 },
     asChild: { type: Boolean },
     as: { default: "div" }
   },
@@ -3519,7 +3515,9 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
       prevPage: propsPrevPage,
       dir: propDir,
       locale: propLocale,
-      disableDaysOutsideCurrentView
+      disableDaysOutsideCurrentView,
+      minYear,
+      maxYear
     } = vue.toRefs(props);
     const { primitiveElement, currentElement: parentElement } = usePrimitiveElement();
     const locale = useLocale(propLocale);
@@ -3573,7 +3571,9 @@ const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
       isDateUnavailable: propsIsDateUnavailable.value,
       calendarLabel,
       nextPage: propsNextPage,
-      prevPage: propsPrevPage
+      prevPage: propsPrevPage,
+      minYear,
+      maxYear
     });
     const { isInvalid, isDateSelected } = useCalendarState({
       date: modelValue,
@@ -4211,8 +4211,7 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
               left: "0",
               zIndex: "1000"
             },
-            role: "dialog",
-            tabindex: "0"
+            role: "dialog"
           }), {
             default: vue.withCtx(() => [
               vue.renderSlot(_ctx.$slots, "default", {
@@ -4265,6 +4264,8 @@ const _sfc_main$p = /* @__PURE__ */ vue.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"],
@@ -4295,7 +4296,9 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       defaultValue,
       dir: propDir,
       step,
-      closeOnSelect
+      closeOnSelect,
+      minYear,
+      maxYear
     } = vue.toRefs(props);
     const dir = useDirection(propDir);
     const modelValue = core.useVModel(props, "modelValue", emits, {
@@ -4366,7 +4369,9 @@ const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
       onPlaceholderChange(date2) {
         placeholder.value = date2.copy();
       },
-      closeOnSelect
+      closeOnSelect,
+      minYear,
+      maxYear
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(_sfc_main$S), {
@@ -4401,7 +4406,9 @@ const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
         numberOfMonths: vue.unref(rootContext).numberOfMonths.value,
         readonly: vue.unref(rootContext).readonly.value,
         preventDeselect: vue.unref(rootContext).preventDeselect.value,
-        dir: vue.unref(rootContext).dir.value
+        dir: vue.unref(rootContext).dir.value,
+        minYear: vue.unref(rootContext).minYear.value,
+        maxYear: vue.unref(rootContext).maxYear.value
       }, {
         "model-value": vue.unref(rootContext).modelValue.value,
         placeholder: vue.unref(rootContext).placeholder.value,
@@ -5192,74 +5199,106 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     const props = __props;
     const rootContext = injectCalendarRootContext();
     const years = vue.computed(() => rootContext.years.value);
-    const maxValue = vue.computed(
-      () => props.type === "month" ? 12 : years.value.length
-    );
     const overlayContext = injectCalendarMonthYearOverlayContext();
     const dataValue = vue.computed(() => `${props.type}-${props.date[props.type]}`);
+    const { primitiveElement, currentElement } = usePrimitiveElement();
     const isFocusedDate = vue.computed(() => {
       if (props.type === "month")
         return rootContext.currentMonth.value === props.date.monthName;
       return rootContext.currentYear.value === props.date.year.toString();
     });
+    const ariaLabel = vue.computed(() => {
+      if (props.type === "month") return props.date.monthName;
+      return props.date.year.toString();
+    });
+    vue.onMounted(() => {
+      if (isFocusedDate.value) {
+        vue.nextTick(() => {
+          currentElement.value?.focus();
+          currentElement.value?.scrollIntoView({ block: "nearest" });
+        });
+      }
+    });
+    function isDateSelectable(date2) {
+      return !rootContext.isDateDisabled(date2) && !rootContext.isDateUnavailable?.(date2);
+    }
     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);
       closeOverlay();
     }
     const kbd = useKbd();
-    function handleArrowKey(e) {
+    function handleKeydown(e) {
       if (props.disabled) return;
       e.preventDefault();
       e.stopPropagation();
       const parentElement = rootContext.parentElement.value;
-      const indexIncrementation = overlayContext.itemsPerRow.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(props.date, sign);
+          shiftFocus(sign);
           break;
         case kbd.ARROW_LEFT:
-          shiftFocus(props.date, -sign);
+          shiftFocus(-sign);
           break;
         case kbd.ARROW_UP:
-          shiftFocus(props.date, -indexIncrementation);
+          shiftFocus(-itemsPerRow);
           break;
         case kbd.ARROW_DOWN:
-          shiftFocus(props.date, indexIncrementation);
+          shiftFocus(itemsPerRow);
+          break;
+        case kbd.HOME: {
+          const firstValue = props.type === "month" ? 1 : years.value[0].year;
+          focusItem(firstValue);
           break;
-        case kbd.ENTER:
-        case kbd.SPACE_CODE:
-          rootContext.onDateChange(props.date);
-          closeOverlay();
-      }
-      function shiftFocus(date2, add) {
-        let nextDate = date2[props.type] + add;
-        if (nextDate <= 0) {
-          nextDate = maxValue.value + nextDate;
         }
-        if (nextDate > years.value[maxValue.value - 1].year) {
-          nextDate = nextDate - maxValue.value;
+        case kbd.END: {
+          const lastValue = props.type === "month" ? 12 : years.value[years.value.length - 1].year;
+          focusItem(lastValue);
+          break;
         }
-        const candidateDay = parentElement.querySelector(
-          `[data-value='${props.type}-${nextDate}']`
-        );
-        candidateDay?.focus();
+        case kbd.ENTER:
+        case kbd.SPACE_CODE:
+          if (isDateSelectable(props.date)) {
+            rootContext.onDateChange(props.date);
+            closeOverlay();
+          }
       }
     }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps(props, {
         onClick: handleClick,
-        ref: "primitiveElement",
+        ref_key: "primitiveElement",
+        ref: primitiveElement,
         role: "button",
+        "aria-label": ariaLabel.value,
         "aria-disabled": __props.disabled,
         "data-value": dataValue.value,
         onKeydown: [
-          vue.withKeys(handleArrowKey, ["up", "down", "left", "right", "space", "enter"]),
+          vue.withKeys(handleKeydown, ["up", "down", "left", "right", "space", "enter", "home", "end"]),
           _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(() => {
           }, ["prevent"]), ["enter"]))
         ],
@@ -5269,7 +5308,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16, ["aria-disabled", "data-value", "tabindex"]);
+      }, 16, ["aria-label", "aria-disabled", "data-value", "tabindex"]);
     };
   }
 });