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

package/README.md

@@ -0,0 +1,124 @@
+# v-datepicker
+
+A flexible and accessible Vue 3 datepicker component library.
+
+## Description
+
+`v-datepicker` is a highly customizable datepicker package built for the Vue 3 ecosystem. It is primarily based on the robust implementation of [reka-ui](https://github.com/reka-ui/reka-ui) (formerly radix-vue) to ensure top-tier accessibility and performance. 
+
+This package is further enriched with advanced features like the **Month and Year Overlay**, inspired by the popular [vue-datepicker](https://github.com/Vuepic/vue-datepicker), providing a more intuitive navigation experience for users.
+
+> **Note:** This is a **headless** library. No styling is included out of the box. You have full control over the look and feel, and are responsible for applying all styles (e.g., using Tailwind CSS).
+
+## Features
+
+- **Headless & Accessible**: Built on top of Reka UI's accessible primitives.
+- **Customizable**: Full control over the rendering of every part of the datepicker.
+- **Tree-shakable**: Built using modern ES modules.
+- **Month & Year Overlays**: Quick navigation inspired by Vue Datepicker.
+- **TypeScript Ready**: Full type support for a better developer experience.
+
+## Installation
+
+```bash
+# pnpm
+pnpm add @rupe/v-datepicker
+
+# npm
+npm install @rupe/v-datepicker
+
+# yarn
+yarn add @rupe/v-datepicker
+```
+
+## Basic Usage (Tailwind CSS)
+
+Since the library is headless, you'll need to apply your own styles. Here's an example using Tailwind CSS:
+
+```vue
+<script setup lang="ts">
+import { DatePicker } from '@rupe/v-datepicker'
+</script>
+
+<template>
+  <DatePicker.Root class="relative">
+    <DatePicker.Field v-slot="{ segments }" class="flex items-center gap-1 border border-gray-300 rounded px-3 py-2 bg-white focus-within:ring-2 focus:ring-blue-500">
+      <div class="flex items-center">
+        <template v-for="item in segments" :key="item.part">
+          <DatePicker.Input
+            :part="item.part"
+            class="px-0.5 rounded focus:bg-blue-100 focus:outline-none data-[placeholder]:text-gray-400"
+          >
+            {{ item.value }}
+          </DatePicker.Input>
+        </template>
+      </div>
+      <DatePicker.Trigger class="ml-auto text-gray-500 hover:text-gray-700">
+        📅
+      </DatePicker.Trigger>
+    </DatePicker.Field>
+
+    <DatePicker.Content class="absolute z-10 mt-2 bg-white border border-gray-200 rounded-lg shadow-xl p-4">
+      <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 />
+          </DatePicker.Heading>
+          <DatePicker.Next class="p-1 hover:bg-gray-100 rounded">➡️</DatePicker.Next>
+        </DatePicker.Header>
+        
+        <DatePicker.Grid v-for="month in grid" :key="month.value.toString()" class="w-full">
+          <DatePicker.GridHead>
+            <DatePicker.GridRow class="flex justify-between">
+              <DatePicker.HeadCell v-for="day in weekDays" :key="day" class="w-8 text-center text-xs text-gray-500 font-medium">
+                {{ day }}
+              </DatePicker.HeadCell>
+            </DatePicker.GridRow>
+          </DatePicker.GridHead>
+          <DatePicker.GridBody>
+            <DatePicker.GridRow v-for="(weekDates, index) in month.rows" :key="index" class="flex justify-between mt-1">
+              <DatePicker.Cell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
+                <DatePicker.CellTrigger 
+                  :day="weekDate" 
+                  :month="month.value" 
+                  class="w-8 h-8 flex items-center justify-center rounded-full text-sm hover:bg-blue-50 data-[selected]:bg-blue-600 data-[selected]:text-white data-[outside-view]:text-gray-300"
+                />
+              </DatePicker.Cell>
+            </DatePicker.GridRow>
+          </DatePicker.GridBody>
+        </DatePicker.Grid>
+      </DatePicker.Calendar>
+    </DatePicker.Content>
+  </DatePicker.Root>
+</template>
+```
+
+## Playground
+
+The repository includes a playground project built with **Nuxt** and **Tailwind CSS** to test the library locally.
+
+### Running the Playground
+
+1.  **Clone the repository**
+2.  **Install dependencies**:
+    ```bash
+    pnpm install
+    ```
+3.  **Start the playground**:
+    ```bash
+    pnpm dev
+    ```
+    This will start the Nuxt dev server for the `playground` folder. Any changes made in the `src/` directory will be reflected instantly via HMR.
+
+## Credits
+
+Special thanks to the following projects that made this package possible:
+
+- **[reka-ui](https://reka-ui.com/)**: For the incredible foundation of accessible headless components.
+- **[vue-datepicker](https://vue3-datepicker.com/)**: For the inspiration behind the intuitive month and year overlay navigation.
+
+## License
+
+MIT

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

@@ -1,26 +1,25 @@
+import { ComputedRef, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, Ref } from 'vue';
 import { PrimitiveProps } from '../Primitive';
 import { MonthNameDateValue } from './CalendarRoot.vue';
-import { Ref, DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
 export interface CalendarMonthYearOverlayProps extends PrimitiveProps {
     type: "month" | "year";
+    itemsPerRow?: number;
 }
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {
-            months: MonthNameDateValue[];
-            years: {
-                year: number;
-            }[];
-            state: Ref<false | "month" | "year", false | "month" | "year">;
-        }): any;
-    };
-    refs: {};
-    rootEl: any;
+type CalendarMonthYearOverlayContext = {
+    itemsPerRow: ComputedRef<number>;
 };
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: DefineComponent<CalendarMonthYearOverlayProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CalendarMonthYearOverlayProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export declare const injectCalendarMonthYearOverlayContext: <T extends CalendarMonthYearOverlayContext | null | undefined = CalendarMonthYearOverlayContext>(fallback?: T | undefined) => T extends null ? CalendarMonthYearOverlayContext | null : CalendarMonthYearOverlayContext, provideCalendarMonthYearOverlayContext: (contextValue: CalendarMonthYearOverlayContext) => CalendarMonthYearOverlayContext;
+declare const _default: __VLS_WithTemplateSlots< DefineComponent<CalendarMonthYearOverlayProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CalendarMonthYearOverlayProps> & Readonly<{}>, {
+    itemsPerRow: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>, {
+    default?(_: {
+        months: MonthNameDateValue[][];
+        years: {
+            year: number;
+        }[][];
+        state: Ref<false | "month" | "year", false | "month" | "year">;
+    }): any;
+}>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -1,21 +1,99 @@
 import { DateValue } from '@internationalized/date';
 import { PrimitiveProps, AsTag } from '../Primitive';
-import { DefineComponent, ComponentOptionsMixin, PublicProps, Component, ComponentProvideOptions } from 'vue';
+import { CreateComponentPublicInstanceWithMixins, ExtractPropTypes, PropType, Component, VNode, RendererNode, RendererElement, ComponentOptionsMixin, PublicProps, GlobalComponents, GlobalDirectives, ComponentProvideOptions, DefineComponent } from 'vue';
 export interface CalendarOverlayItemProps extends PrimitiveProps {
-    date: DateValue;
+    date: DateValue & {
+        monthName: string;
+    };
+    disabled?: boolean;
+    type: "month" | "year";
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
+    refs: {
+        primitiveElement: CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
+            asChild: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            as: {
+                type: PropType< AsTag | Component>;
+                default: string;
+            };
+        }>> & Readonly<{}>, () => VNode<RendererNode, RendererElement, {
+            [key: string]: any;
+        }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+            asChild: boolean;
+            as: AsTag | Component;
+        }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly< ExtractPropTypes<{
+            asChild: {
+                type: BooleanConstructor;
+                default: boolean;
+            };
+            as: {
+                type: PropType< AsTag | Component>;
+                default: string;
+            };
+        }>> & Readonly<{}>, () => VNode<RendererNode, RendererElement, {
+            [key: string]: any;
+        }>, {}, {}, {}, {
+            asChild: boolean;
+            as: AsTag | Component;
+        }> | null;
+    };
     rootEl: any;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: DefineComponent<CalendarOverlayItemProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<CalendarOverlayItemProps> & Readonly<{}>, {
     as: AsTag | Component;
-}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+    primitiveElement: CreateComponentPublicInstanceWithMixins<Readonly< ExtractPropTypes<{
+        asChild: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: PropType< AsTag | Component>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, PublicProps, {
+        asChild: boolean;
+        as: AsTag | Component;
+    }, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly< ExtractPropTypes<{
+        asChild: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        as: {
+            type: PropType< AsTag | Component>;
+            default: string;
+        };
+    }>> & Readonly<{}>, () => VNode<RendererNode, RendererElement, {
+        [key: string]: any;
+    }>, {}, {}, {}, {
+        asChild: boolean;
+        as: AsTag | Component;
+    }> | null;
+}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

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

@@ -6,10 +6,10 @@ declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         default?(_: {
-            months: MonthNameDateValue[];
+            months: MonthNameDateValue[][];
             years: {
                 year: number;
-            }[];
+            }[][];
         }): any;
     };
     refs: {};

package/dist/index.cjs

@@ -24,6 +24,12 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const vue__namespace = /* @__PURE__ */ _interopNamespaceDefault(vue);
+function chunk$1(arr, size) {
+  const result = [];
+  for (let i = 0; i < arr.length; i += size)
+    result.push(arr.slice(i, i + size));
+  return result;
+}
 function createContext(providerComponentName, contextName) {
   const symbolDescription = typeof providerComponentName === "string" && !contextName ? `${providerComponentName}Context` : contextName;
   const injectionKey = Symbol(symbolDescription);
@@ -4157,6 +4163,10 @@ const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
+const [
+  injectCalendarMonthYearOverlayContext,
+  provideCalendarMonthYearOverlayContext
+] = createContext("CalendarMonthYearOverlay");
 const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
@@ -4164,25 +4174,35 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
   __name: "CalendarMonthYearOverlay",
   props: {
     type: {},
+    itemsPerRow: { default: 4 },
     asChild: { type: Boolean },
     as: {}
   },
   setup(__props) {
     const props = __props;
+    const itemsPerRow = vue.computed(() => props.itemsPerRow);
     const rootContext = injectCalendarRootContext();
-    const months = vue.computed(() => rootContext.months.value);
-    const years = vue.computed(() => rootContext.years.value);
-    const isOpen = vue.computed(() => rootContext.monthYearOverlayState.value === props.type);
+    const months = vue.computed(
+      () => chunk$1(rootContext.months.value, props.itemsPerRow)
+    );
+    const years = vue.computed(() => chunk$1(rootContext.years.value, props.itemsPerRow));
+    const isOpen = vue.computed(
+      () => rootContext.monthYearOverlayState.value === props.type
+    );
     function onEscapeKeyDown() {
       rootContext.monthYearOverlayState.value = false;
     }
+    provideCalendarMonthYearOverlayContext({
+      itemsPerRow
+    });
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(_sfc_main$O, {
+      return isOpen.value ? (vue.openBlock(), vue.createBlock(_sfc_main$O, {
+        key: 0,
         "as-child": "",
         onEscapeKeyDown
       }, {
         default: vue.withCtx(() => [
-          isOpen.value ? (vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({ key: 0 }, { ...props, ..._ctx.$attrs }, {
+          vue.createVNode(vue.unref(Primitive), vue.mergeProps({ ...props, ..._ctx.$attrs }, {
             style: {
               position: "absolute",
               height: "100%",
@@ -4202,10 +4222,10 @@ const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
               })
             ]),
             _: 3
-          }, 16)) : vue.createCommentVNode("", true)
+          }, 16)
         ]),
         _: 3
-      });
+      })) : vue.createCommentVNode("", true);
     };
   }
 });
@@ -5140,6 +5160,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePickerMonthYearOverlay",
   props: {
     type: {},
+    itemsPerRow: {},
     asChild: { type: Boolean },
     as: {}
   },
@@ -5162,25 +5183,93 @@ const _sfc_main$1 = /* @__PURE__ */ vue.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 = 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 isFocusedDate = vue.computed(() => {
+      if (props.type === "month")
+        return rootContext.currentMonth.value === props.date.monthName;
+      return rootContext.currentYear.value === props.date.year.toString();
+    });
+    function closeOverlay() {
+      rootContext.monthYearOverlayState.value = false;
+    }
     function handleClick() {
       if (rootContext.isDateDisabled(props.date) || rootContext.isDateUnavailable?.(props.date))
         return;
       rootContext.onDateChange(props.date);
-      rootContext.monthYearOverlayState.value = false;
+      closeOverlay();
+    }
+    const kbd = useKbd();
+    function handleArrowKey(e) {
+      if (props.disabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const parentElement = rootContext.parentElement.value;
+      const indexIncrementation = overlayContext.itemsPerRow.value;
+      const sign = rootContext.dir.value === "rtl" ? -1 : 1;
+      switch (e.code) {
+        case kbd.ARROW_RIGHT:
+          shiftFocus(props.date, sign);
+          break;
+        case kbd.ARROW_LEFT:
+          shiftFocus(props.date, -sign);
+          break;
+        case kbd.ARROW_UP:
+          shiftFocus(props.date, -indexIncrementation);
+          break;
+        case kbd.ARROW_DOWN:
+          shiftFocus(props.date, indexIncrementation);
+          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;
+        }
+        const candidateDay = parentElement.querySelector(
+          `[data-value='${props.type}-${nextDate}']`
+        );
+        candidateDay?.focus();
+      }
     }
     return (_ctx, _cache) => {
-      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps(props, { onClick: handleClick }), {
+      return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps(props, {
+        onClick: handleClick,
+        ref: "primitiveElement",
+        role: "button",
+        "aria-disabled": __props.disabled,
+        "data-value": dataValue.value,
+        onKeydown: [
+          vue.withKeys(handleArrowKey, ["up", "down", "left", "right", "space", "enter"]),
+          _cache[0] || (_cache[0] = vue.withKeys(vue.withModifiers(() => {
+          }, ["prevent"]), ["enter"]))
+        ],
+        tabindex: isFocusedDate.value ? 0 : -1
+      }), {
         default: vue.withCtx(() => [
           vue.renderSlot(_ctx.$slots, "default")
         ]),
         _: 3
-      }, 16);
+      }, 16, ["aria-disabled", "data-value", "tabindex"]);
     };
   }
 });
@@ -5188,6 +5277,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "DatePickerOverlayItem",
   props: {
     date: {},
+    disabled: { type: Boolean },
+    type: {},
     asChild: { type: Boolean },
     as: {}
   },