v-datepicker-lite 0.0.1

package/README.md

@@ -0,0 +1,223 @@
+# Vue DatePicker
+
+A lightweight and customizable Vue 3 date picker component with support for date, time, date-time, week, and month selection modes, featuring accessibility and responsive design.
+
+## Features
+
+-   **Multiple Selection Modes**: Supports `date`, `time`, `dateTime`, `week`, and `month` modes.
+-   **Responsive Design**: Adapts to various screen sizes with a clean, modern UI.
+-   **Accessibility**: Includes ARIA attributes and keyboard navigation for enhanced usability.
+-   **Customizable**: Flexible props for date format, time format, min/max dates, disabled dates, and more.
+-   **Time Selection**: Supports 12h/24h formats with customizable time intervals (15, 30, or 60 minutes).
+-   **Performance Optimized**: Uses Vue 3 composition API for efficient rendering and state management.
+-   **TypeScript Support**: Fully typed with TypeScript for better developer experience.
+
+## Demo
+
+[Live Demo](https://v-datepicker-lite.vercel.app/)
+
+## Installation
+
+```bash
+# npm
+npm install v-datepicker-lite
+
+# yarn
+yarn add v-datepicker-lite
+
+# pnpm
+pnpm add v-datepicker-lite
+```
+
+## Usage
+
+Below are examples demonstrating different configurations of the Vue DatePicker component.
+
+### 1. Basic Date Picker
+
+A simple date picker for selecting a single date.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import DatePicker from 'v-datepicker-lite'
+import 'v-datepicker-lite/style.css'
+
+const selectedDate = (ref < Date) | (null > null)
+</script>
+
+<template>
+	<div>
+		<h3>Date Picker</h3>
+		<DatePicker
+			v-model:value="selectedDate"
+			mode="date" />
+		<p>
+			Selected:
+			{{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}
+		</p>
+	</div>
+</template>
+```
+
+### 2. Week Picker
+
+Select an entire week starting from the first day of the selected week.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import DatePicker from 'v-datepicker-lite'
+
+const selectedWeek = (ref < Date) | (null > null)
+</script>
+
+<template>
+	<div>
+		<h3>Week Picker</h3>
+		<DatePicker
+			v-model:value="selectedWeek"
+			mode="week" />
+		<p>
+			Selected:
+			{{ selectedWeek ? selectedWeek.toLocaleDateString() : 'None' }}
+		</p>
+	</div>
+</template>
+```
+
+### 3. Month Picker
+
+Select a month and year.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import DatePicker from 'v-datepicker-lite'
+
+const selectedMonth = (ref < Date) | (null > null)
+</script>
+
+<template>
+	<div>
+		<h3>Month Picker</h3>
+		<DatePicker
+			v-model:value="selectedMonth"
+			mode="month" />
+		<p>
+			Selected:
+			{{ selectedMonth ? selectedMonth.toLocaleDateString() : 'None' }}
+		</p>
+	</div>
+</template>
+```
+
+### 4. DateTime Picker
+
+Select both date and time with a 12-hour format.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import DatePicker from 'v-datepicker-lite'
+
+const selectedDateTime = (ref < Date) | (null > null)
+</script>
+
+<template>
+	<div>
+		<h3>DateTime Picker</h3>
+		<DatePicker
+			v-model:value="selectedDateTime"
+			mode="dateTime"
+			time-format="12h"
+			time-interval="15" />
+		<p>
+			Selected:
+			{{ selectedDateTime ? selectedDateTime.toLocaleString() : 'None' }}
+		</p>
+	</div>
+</template>
+```
+
+### 5. Date Picker with Restrictions
+
+Restrict date selection with minimum date and disabled date ranges.
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import DatePicker from 'v-datepicker-lite'
+
+const selectedDate = (ref < Date) | (null > null)
+</script>
+
+<template>
+	<div>
+		<h3>Restricted Date Picker</h3>
+		<DatePicker
+			v-model:value="selectedDate"
+			mode="date"
+			:min-date="new Date().toISOString().split('T')[0]"
+			:disabled-dates="[
+				{ start: '2025-08-15', end: '2025-08-20' },
+				{ start: '2025-08-25' },
+			]" />
+		<p>
+			Selected:
+			{{ selectedDate ? selectedDate.toLocaleDateString() : 'None' }}
+		</p>
+	</div>
+</template>
+```
+
+## Props
+
+| Prop            | Type                     | Default        | Description                                                       |
+| --------------- | ------------------------ | -------------- | ----------------------------------------------------------------- |
+| `value`         | `Date \| string \| null` | `null`         | v-model binding for the selected date/time.                       |
+| `mode`          | `string`                 | `'date'`       | Selection mode: `date`, `time`, `dateTime`, `week`, or `month`.   |
+| `format`        | `string`                 | `'YYYY-MM-DD'` | Date format for string output (e.g., `YYYY-MM-DD HH:mm`).         |
+| `timeFormat`    | `string`                 | `'24h'`        | Time format: `12h` or `24h`.                                      |
+| `timeInterval`  | `number`                 | `15`           | Time selection interval in minutes: `15`, `30`, or `60`.          |
+| `minDate`       | `string`                 | `undefined`    | Minimum selectable date (ISO format: `YYYY-MM-DD`).               |
+| `maxDate`       | `string`                 | `undefined`    | Maximum selectable date (ISO format: `YYYY-MM-DD`).               |
+| `disabledDates` | `Array`                  | `[]`           | Array of disabled date ranges: `{ start: string, end?: string }`. |
+| `disabled`      | `boolean`                | `false`        | Disables the date picker.                                         |
+| `readonly`      | `boolean`                | `false`        | Makes the date picker read-only.                                  |
+
+## Events
+
+| Event          | Payload Type             | Description                              |
+| -------------- | ------------------------ | ---------------------------------------- |
+| `update:value` | `Date \| string \| null` | Emitted when the selected value changes. |
+| `change`       | `Date \| string \| null` | Emitted when the selected value changes. |
+| `select`       | `Date \| string \| null` | Emitted when a date/time is selected.    |
+
+## Styling
+
+Customize the appearance using the following CSS variables defined in `style.css`:
+
+```css
+:root {
+	--date-picker-primary: #4f46e5; /* Primary color for selected items */
+	--date-picker-primary-fg: #ffffff; /* Foreground color for selected items */
+	--date-picker-text: #374151; /* Text color */
+	--date-picker-border: #d1d5db; /* Border color */
+	--date-picker-bg: #ffffff; /* Background color */
+	--date-picker-secondary: #f7f7f9; /* Secondary background color */
+	--date-picker-secondary-dark: #eff0f3; /* Hover background color */
+	--date-picker-disabled: #9ca3af; /* Disabled item color */
+	--date-picker-today: #fef3c7; /* Today highlight color */
+	--date-picker-radius: 0.375em; /* Border radius */
+	--date-picker-hover: #f3f4f6; /* Hover background color */
+}
+```
+
+## Author
+
+[safdar-azeem](https://github.com/safdar-azeem)
+
+## License
+
+MIT

package/index.js

@@ -0,0 +1,795 @@
+import { defineComponent as I, computed as S, createElementBlock as p, openBlock as v, createElementVNode as h, Fragment as Y, renderList as T, unref as o, toDisplayString as P, normalizeClass as x, ref as F, watch as L, nextTick as B, onMounted as U, createBlock as V, createCommentVNode as N, normalizeStyle as X, createVNode as Z } from "vue";
+const R = (t, r = "YYYY-MM-DD") => {
+  const e = t.getFullYear(), u = String(t.getMonth() + 1).padStart(2, "0"), n = String(t.getDate()).padStart(2, "0"), d = String(t.getHours()).padStart(2, "0"), i = String(t.getMinutes()).padStart(2, "0");
+  return r.replace("YYYY", e.toString()).replace("MM", u).replace("DD", n).replace("HH", d).replace("mm", i);
+}, W = (t) => {
+  if (!t) return null;
+  const r = new Date(t);
+  return isNaN(r.getTime()) ? null : r;
+}, G = (t, r) => t.getFullYear() === r.getFullYear() && t.getMonth() === r.getMonth() && t.getDate() === r.getDate(), ee = (t) => {
+  const r = new Date(t.getFullYear(), 0, 1), e = (t.getTime() - r.getTime()) / 864e5;
+  return Math.ceil((e + r.getDay() + 1) / 7);
+}, E = (t, r) => {
+  const e = new Date(t, r, 1), n = new Date(t, r + 1, 0).getDate(), d = e.getDay(), i = [], a = /* @__PURE__ */ new Date(), l = r === 0 ? 11 : r - 1, m = r === 0 ? t - 1 : t, D = new Date(m, l + 1, 0).getDate();
+  for (let f = d - 1; f >= 0; f--) {
+    const c = new Date(m, l, D - f);
+    i.push({
+      date: c,
+      day: D - f,
+      month: l,
+      year: m,
+      isCurrentMonth: !1,
+      isToday: G(c, a),
+      isSelected: !1,
+      isDisabled: !1
+    });
+  }
+  for (let f = 1; f <= n; f++) {
+    const c = new Date(t, r, f);
+    i.push({
+      date: c,
+      day: f,
+      month: r,
+      year: t,
+      isCurrentMonth: !0,
+      isToday: G(c, a),
+      isSelected: !1,
+      isDisabled: !1
+    });
+  }
+  const s = 42 - i.length, M = r === 11 ? 0 : r + 1, k = r === 11 ? t + 1 : t;
+  for (let f = 1; f <= s; f++) {
+    const c = new Date(k, M, f);
+    i.push({
+      date: c,
+      day: f,
+      month: M,
+      year: k,
+      isCurrentMonth: !1,
+      isToday: G(c, a),
+      isSelected: !1,
+      isDisabled: !1
+    });
+  }
+  return i;
+}, te = (t, r) => {
+  const e = E(t, r), u = [];
+  for (let n = 0; n < e.length; n += 7) {
+    const d = e.slice(n, n + 7), i = ee(d[0].date);
+    u.push({
+      weekNumber: i,
+      days: d,
+      isSelected: !1
+    });
+  }
+  return u;
+}, j = (t) => [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+].map((e, u) => ({
+  month: u,
+  year: t,
+  name: e,
+  isSelected: !1,
+  isDisabled: !1
+})), ae = (t, r, e, u) => {
+  const n = R(t, "YYYY-MM-DD");
+  return r && n < r || e && n > e ? !0 : u ? u.some((d) => d.end ? n >= d.start && n <= d.end : n === d.start) : !1;
+}, O = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], K = [
+  "Sun",
+  "Mon",
+  "Tue",
+  "Wed",
+  "Thu",
+  "Fri",
+  "Sat"
+], ne = { class: "date-picker-content" }, le = { class: "date-picker-table" }, se = { class: "date-picker-weekdays-row" }, re = { class: "date-picker-days-body" }, oe = ["onClick", "disabled"], ce = /* @__PURE__ */ I({
+  __name: "DateView",
+  props: {
+    currentDate: {},
+    selectedDate: {},
+    minDate: {},
+    maxDate: {},
+    disabledDates: {}
+  },
+  emits: ["select"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = S(() => E(
+      e.currentDate.getFullYear(),
+      e.currentDate.getMonth()
+    ).map((l) => ({
+      ...l,
+      isSelected: e.selectedDate ? G(l.date, e.selectedDate) : !1,
+      isDisabled: ae(
+        l.date,
+        e.minDate,
+        e.maxDate,
+        e.disabledDates
+      )
+    }))), d = S(() => {
+      const a = [];
+      for (let l = 0; l < n.value.length; l += 7)
+        a.push(n.value.slice(l, l + 7));
+      return a;
+    }), i = (a) => {
+      a.isDisabled || u("select", a.date);
+    };
+    return (a, l) => (v(), p("div", ne, [
+      h("table", le, [
+        h("thead", null, [
+          h("tr", se, [
+            (v(!0), p(Y, null, T(o(K), (m) => (v(), p("th", { key: m }, P(m), 1))), 128))
+          ])
+        ]),
+        h("tbody", re, [
+          (v(!0), p(Y, null, T(d.value, (m, D) => (v(), p("tr", {
+            key: D,
+            class: "date-picker-week-row"
+          }, [
+            (v(!0), p(Y, null, T(m, (s) => (v(), p("td", {
+              key: `${s.year}-${s.month}-${s.day}`,
+              class: "date-picker-day-cell"
+            }, [
+              h("button", {
+                class: x([
+                  "date-picker-day",
+                  {
+                    "other-month": !s.isCurrentMonth,
+                    today: s.isToday,
+                    selected: s.isSelected,
+                    disabled: s.isDisabled
+                  }
+                ]),
+                onClick: (M) => i(s),
+                disabled: s.isDisabled
+              }, P(s.day), 11, oe)
+            ]))), 128))
+          ]))), 128))
+        ])
+      ])
+    ]));
+  }
+}), ie = { class: "date-picker-content" }, ue = {
+  class: "date-picker-table date-picker-week-table",
+  cellpadding: "0",
+  cellspacing: "0"
+}, de = { class: "date-picker-weekdays-row" }, me = { class: "date-picker-weeks-body" }, ve = ["onClick"], he = { class: "date-picker-week-number-cell" }, pe = { class: "date-picker-week-number" }, ge = /* @__PURE__ */ I({
+  __name: "WeekView",
+  props: {
+    currentDate: {},
+    selectedDate: {}
+  },
+  emits: ["select"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = S(() => te(
+      e.currentDate.getFullYear(),
+      e.currentDate.getMonth()
+    ).map((a) => {
+      const l = e.selectedDate ? a.days.some(
+        (m) => G(m.date, e.selectedDate)
+      ) : !1;
+      return {
+        ...a,
+        isSelected: l
+      };
+    })), d = (i) => {
+      var l;
+      const a = ((l = i.days.find((m) => m.isCurrentMonth)) == null ? void 0 : l.date) || i.days[0].date;
+      u("select", a);
+    };
+    return (i, a) => (v(), p("div", ie, [
+      h("table", ue, [
+        h("thead", null, [
+          h("tr", de, [
+            a[0] || (a[0] = h("th", { class: "date-picker-weekday date-picker-week-header" }, " Wk ", -1)),
+            (v(!0), p(Y, null, T(o(K), (l) => (v(), p("th", { key: l }, P(l), 1))), 128))
+          ])
+        ]),
+        h("tbody", me, [
+          (v(!0), p(Y, null, T(n.value, (l) => (v(), p("tr", {
+            key: l.weekNumber,
+            class: x([
+              "date-picker-week-row",
+              {
+                selected: l.isSelected
+              }
+            ]),
+            onClick: (m) => d(l)
+          }, [
+            h("td", he, [
+              h("div", pe, P(l.weekNumber), 1)
+            ]),
+            (v(!0), p(Y, null, T(l.days, (m) => (v(), p("td", {
+              key: `${m.year}-${m.month}-${m.day}`,
+              class: "date-picker-day-cell"
+            }, [
+              h("button", {
+                class: x([
+                  "date-picker-day",
+                  {
+                    "other-month": !m.isCurrentMonth,
+                    today: m.isToday
+                  }
+                ])
+              }, P(m.day), 3)
+            ]))), 128))
+          ], 10, ve))), 128))
+        ])
+      ])
+    ]));
+  }
+});
+function De(t, r = "24h", e = 15, u) {
+  const n = F(0), d = F(0), i = F([]), a = S(() => r === "12h"), l = () => {
+    if (t)
+      n.value = t.getHours(), d.value = t.getMinutes();
+    else {
+      const c = /* @__PURE__ */ new Date();
+      n.value = c.getHours(), d.value = c.getMinutes();
+    }
+    D();
+  }, m = (c) => {
+    c && (n.value = c.getHours(), d.value = c.getMinutes());
+  }, D = () => {
+    const c = [], b = a.value ? 1 : 0;
+    for (let y = 0; y < (a.value ? 2 : 1); y++) {
+      const C = a.value ? y === 0 ? " AM" : " PM" : "";
+      for (let _ = b; _ <= (a.value ? 12 : 23); _++)
+        for (let g = 0; g < 60; g += e) {
+          const $ = (a.value, _), H = a.value ? _ === 12 ? y === 0 ? 0 : 12 : _ + y * 12 : _, q = `${String($).padStart(
+            2,
+            "0"
+          )}:${String(g).padStart(2, "0")}` + C;
+          c.push({
+            display: q,
+            value: `${String(H).padStart(2, "0")}:${String(
+              g
+            ).padStart(2, "0")}`,
+            hour: H,
+            minute: g
+          });
+        }
+    }
+    a.value ? i.value = c.map((y) => y.display) : i.value = c.map((y) => y.value);
+  }, s = () => {
+    if (a.value) {
+      const c = n.value === 0 ? 12 : n.value > 12 ? n.value - 12 : n.value, b = n.value < 12 ? " AM" : " PM";
+      return `${String(c).padStart(2, "0")}:${String(
+        d.value
+      ).padStart(2, "0")}${b}`;
+    }
+    return `${String(n.value).padStart(2, "0")}:${String(
+      d.value
+    ).padStart(2, "0")}`;
+  };
+  return {
+    hours: n,
+    minutes: d,
+    timeOptions: i,
+    is12HourFormat: a,
+    initializeTime: l,
+    updateTime: m,
+    generateTimeOptions: D,
+    getCurrentTimeString: s,
+    selectTime: (c) => {
+      let b, y;
+      if (a.value) {
+        const [_, g] = c.split(" "), [$, H] = _.split(":");
+        b = parseInt($), y = parseInt(H), g === "AM" ? b === 12 && (b = 0) : b !== 12 && (b += 12);
+      } else {
+        const [_, g] = c.split(":");
+        b = parseInt(_), y = parseInt(g);
+      }
+      n.value = b, d.value = y;
+      const C = t ? new Date(t.getTime()) : /* @__PURE__ */ new Date();
+      C.setHours(b, y, 0, 0), u("update", C);
+    },
+    scrollToSelected: (c) => {
+      if (!c) return;
+      const b = i.value.findIndex(
+        (y) => y === s()
+      );
+      if (b >= 0) {
+        const C = c.clientHeight, _ = b * 30 - C / 2 + 30 / 2;
+        c.scrollTop = Math.max(0, _);
+      }
+    },
+    onTimeUpdate: (c) => {
+      n.value = c.getHours(), d.value = c.getMinutes(), u("update", c);
+    }
+  };
+}
+const ke = { class: "time-picker-container" }, fe = ["aria-selected", "onClick"], J = /* @__PURE__ */ I({
+  __name: "TimeView",
+  props: {
+    selectedTime: {},
+    timeFormat: { default: "24h" },
+    timeInterval: { default: 15 }
+  },
+  emits: ["update"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = F(null), {
+      timeOptions: d,
+      initializeTime: i,
+      updateTime: a,
+      getCurrentTimeString: l,
+      selectTime: m,
+      scrollToSelected: D
+    } = De(e.selectedTime, e.timeFormat, e.timeInterval, u);
+    return L(
+      () => e.selectedTime,
+      (s) => {
+        a(s), B(() => {
+          D(n.value);
+        });
+      },
+      { immediate: !0 }
+    ), L(
+      () => e.timeFormat,
+      () => {
+        i(), B(() => {
+          D(n.value);
+        });
+      }
+    ), L(
+      () => e.timeInterval,
+      () => {
+        i(), B(() => {
+          D(n.value);
+        });
+      }
+    ), U(() => {
+      i(), B(() => {
+        D(n.value);
+      });
+    }), (s, M) => (v(), p("div", ke, [
+      h("div", {
+        ref_key: "timeListRef",
+        ref: n,
+        class: "time-wheel",
+        role: "listbox",
+        "aria-label": "Time Selection"
+      }, [
+        (v(!0), p(Y, null, T(o(d), (k) => (v(), p("div", {
+          key: k,
+          class: x(["time-option", {
+            selected: k === o(l)()
+          }]),
+          role: "option",
+          "aria-selected": k === o(l)(),
+          onClick: (f) => o(m)(k)
+        }, P(k), 11, fe))), 128))
+      ], 512)
+    ]));
+  }
+}), ye = { class: "year-view-layout" }, be = { class: "years-section" }, _e = { class: "years-list" }, Me = ["onClick"], we = { class: "months-section" }, Se = { class: "date-picker-table date-picker-months-table" }, $e = { class: "date-picker-months-body" }, Ye = ["onClick", "disabled"], Te = /* @__PURE__ */ I({
+  __name: "YearView",
+  props: {
+    currentDate: {},
+    selectedDate: {}
+  },
+  emits: ["select", "month-select"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = S(() => e.currentDate.getFullYear()), d = S(() => {
+      var s;
+      return (s = e.selectedDate) == null ? void 0 : s.getFullYear();
+    }), i = S(() => {
+      const s = Math.floor(n.value / 10) * 10;
+      return Array.from({ length: 12 }, (M, k) => s + k - 1);
+    }), a = S(() => j(n.value).map((s) => ({
+      ...s,
+      isSelected: e.selectedDate ? s.month === e.selectedDate.getMonth() && s.year === e.selectedDate.getFullYear() : !1
+    }))), l = S(() => {
+      const s = [];
+      for (let M = 0; M < a.value.length; M += 3)
+        s.push(a.value.slice(M, M + 3));
+      return s;
+    }), m = (s) => {
+      u("select", s);
+    }, D = (s) => {
+      u("month-select", s.month);
+    };
+    return (s, M) => (v(), p("div", ye, [
+      h("div", be, [
+        h("div", _e, [
+          (v(!0), p(Y, null, T(i.value, (k) => (v(), p("button", {
+            key: k,
+            class: x([
+              "year-item",
+              {
+                selected: k === d.value,
+                current: k === n.value
+              }
+            ]),
+            onClick: (f) => m(k)
+          }, P(k), 11, Me))), 128))
+        ])
+      ]),
+      h("div", we, [
+        h("table", Se, [
+          h("tbody", $e, [
+            (v(!0), p(Y, null, T(l.value, (k, f) => (v(), p("tr", {
+              key: f,
+              class: "date-picker-months-row"
+            }, [
+              (v(!0), p(Y, null, T(k, (c) => (v(), p("td", {
+                key: c.month,
+                class: "date-picker-month-cell"
+              }, [
+                h("button", {
+                  class: x([
+                    "date-picker-month",
+                    {
+                      selected: c.isSelected,
+                      disabled: c.isDisabled
+                    }
+                  ]),
+                  onClick: (b) => D(c),
+                  disabled: c.isDisabled
+                }, P(c.name.substring(0, 3)), 11, Ye)
+              ]))), 128))
+            ]))), 128))
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Ce = { class: "date-picker-content" }, He = { class: "date-picker-table date-picker-months-table" }, Pe = { class: "date-picker-months-body" }, Fe = ["onClick", "disabled"], xe = /* @__PURE__ */ I({
+  __name: "MonthView",
+  props: {
+    currentDate: {},
+    selectedDate: {}
+  },
+  emits: ["select"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = S(() => j(e.currentDate.getFullYear()).map((l) => ({
+      ...l,
+      isSelected: e.selectedDate ? l.month === e.selectedDate.getMonth() && l.year === e.selectedDate.getFullYear() : !1
+    }))), d = S(() => {
+      const a = [];
+      for (let l = 0; l < n.value.length; l += 3)
+        a.push(n.value.slice(l, l + 3));
+      return a;
+    }), i = (a) => {
+      u("select", a.month);
+    };
+    return (a, l) => (v(), p("div", Ce, [
+      h("table", He, [
+        h("tbody", Pe, [
+          (v(!0), p(Y, null, T(d.value, (m, D) => (v(), p("tr", {
+            key: D,
+            class: "date-picker-months-row"
+          }, [
+            (v(!0), p(Y, null, T(m, (s) => (v(), p("td", {
+              key: s.month,
+              class: "date-picker-month-cell"
+            }, [
+              h("button", {
+                class: x([
+                  "date-picker-month",
+                  {
+                    selected: s.isSelected,
+                    disabled: s.isDisabled
+                  }
+                ]),
+                onClick: (M) => i(s),
+                disabled: s.isDisabled
+              }, P(s.name), 11, Fe)
+            ]))), 128))
+          ]))), 128))
+        ])
+      ])
+    ]));
+  }
+}), Ne = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M8.293 12.707a1 1 0 0 1 0-1.414l5.657-5.657a1 1 0 1 1 1.414 1.414L10.414 12l4.95 4.95a1 1 0 0 1-1.414 1.414z"/></g></svg>', Ie = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M15.707 11.293a1 1 0 0 1 0 1.414l-5.657 5.657a1 1 0 1 1-1.414-1.414l4.95-4.95l-4.95-4.95a1 1 0 0 1 1.414-1.414z"/></g></svg>', Ve = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12m0-1.5a4.5 4.5 0 1 0 0-9a4.5 4.5 0 0 0 0 9"/></svg>', Ge = { class: "date-picker-header" }, qe = ["disabled"], ze = ["innerHTML"], Be = ["innerHTML"], Le = ["disabled"], We = ["innerHTML"], Ae = /* @__PURE__ */ I({
+  __name: "DatePickerHeader",
+  props: {
+    currentDate: {},
+    viewMode: {},
+    canGoPrev: { type: Boolean },
+    canGoNext: { type: Boolean }
+  },
+  emits: ["prev", "next", "header-click", "current-date"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = S(() => {
+      const m = e.currentDate.getFullYear(), D = e.currentDate.getMonth();
+      switch (e.viewMode) {
+        case "date":
+          return `${O[D]} ${m}`;
+        case "year":
+          const s = Math.floor(m / 10) * 10, M = s + 9;
+          return `${s}–${M}`;
+        default:
+          return `${O[D]} ${m}`;
+      }
+    }), d = () => {
+      u("prev");
+    }, i = () => {
+      u("next");
+    }, a = () => {
+      u("header-click");
+    }, l = () => {
+      u("current-date");
+    };
+    return (m, D) => (v(), p("div", Ge, [
+      h("button", {
+        class: "date-picker-title",
+        onClick: a,
+        type: "button"
+      }, P(n.value), 1),
+      h("button", {
+        class: "date-picker-nav-button ml-auto",
+        disabled: !m.canGoPrev,
+        onClick: d,
+        type: "button",
+        "aria-label": "Previous"
+      }, [
+        h("span", {
+          class: "date-picker-nav-icon",
+          innerHTML: o(Ne)
+        }, null, 8, ze)
+      ], 8, qe),
+      h("button", {
+        class: "date-picker-nav-button",
+        onClick: l,
+        type: "button",
+        "aria-label": "Current Date"
+      }, [
+        h("span", {
+          class: "date-picker-nav-icon",
+          innerHTML: o(Ve)
+        }, null, 8, Be)
+      ]),
+      h("button", {
+        class: "date-picker-nav-button",
+        disabled: !m.canGoNext,
+        onClick: i,
+        type: "button",
+        "aria-label": "Next"
+      }, [
+        h("span", {
+          class: "date-picker-nav-icon",
+          innerHTML: o(Ie)
+        }, null, 8, We)
+      ], 8, Le)
+    ]));
+  }
+});
+function Oe(t, r) {
+  const e = F(/* @__PURE__ */ new Date()), u = F("date"), n = S(() => t.value ? t.value instanceof Date ? t.value : W(t.value) : null), d = S(() => {
+    if (!t.minDate) return !0;
+    const g = W(t.minDate);
+    if (!g) return !0;
+    const $ = e.value.getFullYear(), H = e.value.getMonth();
+    return new Date($, H, 1) > g;
+  }), i = S(() => {
+    if (!t.maxDate) return !0;
+    const g = W(t.maxDate);
+    if (!g) return !0;
+    const $ = e.value.getFullYear(), H = e.value.getMonth();
+    return new Date($, H + 1, 0) < g;
+  }), a = () => {
+    d.value && (e.value = new Date(
+      e.value.getFullYear(),
+      e.value.getMonth() - 1,
+      1
+    ));
+  }, l = () => {
+    i.value && (e.value = new Date(
+      e.value.getFullYear(),
+      e.value.getMonth() + 1,
+      1
+    ));
+  }, m = () => {
+    e.value = new Date(
+      e.value.getFullYear() - 1,
+      e.value.getMonth(),
+      1
+    );
+  }, D = () => {
+    e.value = new Date(
+      e.value.getFullYear() + 1,
+      e.value.getMonth(),
+      1
+    );
+  }, s = () => {
+    e.value = new Date(
+      e.value.getFullYear() - 10,
+      e.value.getMonth(),
+      1
+    );
+  }, M = () => {
+    e.value = new Date(
+      e.value.getFullYear() + 10,
+      e.value.getMonth(),
+      1
+    );
+  }, k = () => {
+    e.value = /* @__PURE__ */ new Date(), u.value = "date";
+  }, f = () => {
+    switch (u.value) {
+      case "date":
+        u.value = "year";
+        break;
+      case "year":
+        u.value = "date";
+        break;
+    }
+  }, c = (g) => {
+    t.mode === "dateTime" && n.value && g.setHours(
+      n.value.getHours(),
+      n.value.getMinutes()
+    ), _(g);
+  }, b = (g) => {
+    _(g);
+  }, y = (g) => {
+    e.value = new Date(e.value.getFullYear(), g, 1), u.value = "date", t.mode === "month" && _(new Date(e.value.getFullYear(), g, 1));
+  }, C = (g) => {
+    e.value = new Date(g, e.value.getMonth(), 1), u.value = "date";
+  }, _ = (g) => {
+    const $ = typeof t.value == "string" ? R(g, t.format) : g;
+    r("update:value", $), r("change", $), r("select", $);
+  };
+  return {
+    currentDate: e,
+    viewMode: u,
+    selectedDate: n,
+    canGoPrev: d,
+    canGoNext: i,
+    goToPrevMonth: a,
+    goToNextMonth: l,
+    goToPrevYear: m,
+    goToNextYear: D,
+    goToPrevDecade: s,
+    goToNextDecade: M,
+    goToCurrentDate: k,
+    onHeaderClick: f,
+    onDateSelect: c,
+    onWeekSelect: b,
+    onMonthSelect: y,
+    onYearSelect: C,
+    emitValue: _
+  };
+}
+const Je = { class: "date-picker" }, Ue = {
+  key: 0,
+  class: "date-picker-time-section"
+}, Ee = /* @__PURE__ */ I({
+  __name: "DatePicker",
+  props: {
+    value: {},
+    mode: { default: "date" },
+    minDate: {},
+    maxDate: {},
+    disabledDates: {},
+    format: { default: "YYYY-MM-DD" },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    timeFormat: { default: "24h" },
+    timeInterval: { default: 15 }
+  },
+  emits: ["update:value", "change", "select"],
+  setup(t, { emit: r }) {
+    const e = t, u = r, n = F(null), d = F(0), {
+      currentDate: i,
+      viewMode: a,
+      selectedDate: l,
+      canGoPrev: m,
+      canGoNext: D,
+      goToPrevMonth: s,
+      goToNextMonth: M,
+      goToPrevYear: k,
+      goToNextYear: f,
+      goToPrevDecade: c,
+      goToNextDecade: b,
+      goToCurrentDate: y,
+      onHeaderClick: C,
+      onDateSelect: _,
+      onWeekSelect: g,
+      onMonthSelect: $,
+      onYearSelect: H,
+      emitValue: A
+    } = Oe(e, u), q = (w) => {
+      A(w);
+    };
+    return U(() => {
+      n.value && (d.value = n.value.clientHeight);
+    }), (w, z) => (v(), p("div", Je, [
+      w.mode !== "time" ? (v(), V(Ae, {
+        key: 0,
+        "current-date": o(i),
+        "view-mode": o(a),
+        "can-go-prev": o(m),
+        "can-go-next": o(D),
+        onPrev: z[0] || (z[0] = (Q) => o(a) === "year" ? o(c)() : o(a) === "month" ? o(k)() : o(s)()),
+        onNext: z[1] || (z[1] = (Q) => o(a) === "year" ? o(b)() : o(a) === "month" ? o(f)() : o(M)()),
+        onHeaderClick: o(C),
+        onCurrentDate: o(y)
+      }, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : N("", !0),
+      h("div", {
+        class: x({
+          "date-picker-datetime-layout": w.mode === "dateTime" && o(a) === "date"
+        }),
+        style: X({
+          height: d.value !== 0 ? d.value + "px" : "100%"
+        })
+      }, [
+        h("div", {
+          class: "date-picker-date-section",
+          ref_key: "datePickerContent",
+          ref: n
+        }, [
+          o(a) === "date" && (w.mode === "date" || w.mode === "dateTime") ? (v(), V(ce, {
+            key: 0,
+            "current-date": o(i),
+            "selected-date": o(l),
+            "min-date": w.minDate,
+            "max-date": w.maxDate,
+            "disabled-dates": w.disabledDates,
+            onSelect: o(_)
+          }, null, 8, ["current-date", "selected-date", "min-date", "max-date", "disabled-dates", "onSelect"])) : N("", !0),
+          w.mode === "week" && o(a) === "date" ? (v(), V(ge, {
+            key: 1,
+            "current-date": o(i),
+            "selected-date": o(l),
+            onSelect: o(g)
+          }, null, 8, ["current-date", "selected-date", "onSelect"])) : N("", !0),
+          o(a) !== "year" && (o(a) === "month" || w.mode === "month") ? (v(), V(xe, {
+            key: 2,
+            "current-date": o(i),
+            "selected-date": o(l),
+            onSelect: o($)
+          }, null, 8, ["current-date", "selected-date", "onSelect"])) : N("", !0),
+          o(a) === "year" ? (v(), V(Te, {
+            key: 3,
+            "current-date": o(i),
+            "selected-date": o(l),
+            onSelect: o(H),
+            onMonthSelect: o($)
+          }, null, 8, ["current-date", "selected-date", "onSelect", "onMonthSelect"])) : N("", !0)
+        ], 512),
+        w.mode === "dateTime" && o(a) === "date" ? (v(), p("div", Ue, [
+          Z(J, {
+            "selected-time": o(l),
+            "time-format": w.timeFormat,
+            "time-interval": w.timeInterval,
+            onUpdate: q
+          }, null, 8, ["selected-time", "time-format", "time-interval"])
+        ])) : N("", !0)
+      ], 6),
+      w.mode === "time" ? (v(), V(J, {
+        key: 1,
+        "selected-time": o(l),
+        "time-format": w.timeFormat,
+        "time-interval": w.timeInterval,
+        onUpdate: q
+      }, null, 8, ["selected-time", "time-format", "time-interval"])) : N("", !0)
+    ]));
+  }
+});
+export {
+  Ee as default
+};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "v-datepicker-lite",
+  "version": "0.0.1",
+  "description": "A lightweight Vue 3 date picker with date, time, date-time, week, and month modes",
+  "type": "module",
+  "author": "safdar-azeem",
+  "license": "MIT",
+  "main": "index.js",
+  "keywords": [
+    "vue",
+    "vue3",
+    "datepicker",
+    "date-picker",
+    "calendar",
+    "timepicker",
+    "time-picker",
+    "datetime",
+    "date-time-picker",
+    "week-picker",
+    "month-picker",
+    "typescript",
+    "composition-api",
+    "accessible",
+    "responsive",
+    "ui-component",
+    "frontend"
+  ],
+  "homepage": "https://github.com/safdar-azeem/v-datepicker-lite#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/safdar-azeem/v-datepicker-lite.git"
+  },
+  "bugs": {
+    "url": "https://github.com/safdar-azeem/v-datepicker-lite/issues"
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.31"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.10",
+    "@types/vue": "^2.0.0",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.1",
+    "vite-plugin-dts": "^3.9.1",
+    "vue-tsc": "^2.0.21"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}