@lichta/vue 2.0.1 → 2.2.0

package/README.md

@@ -1,6 +1,9 @@
 # @lichta/vue
 
-[![npm version](https://img.shields.io/npm/v/@lichta/vue.svg)](https://www.npmjs.com/package/@lichta/vue)
+[![@lichta/vue](https://img.shields.io/npm/v/@lichta/vue.svg?label=%40lichta%2Fvue)](https://www.npmjs.com/package/@lichta/vue)
+[![@lichta/core](https://img.shields.io/npm/v/@lichta/core.svg?label=%40lichta%2Fcore)](https://www.npmjs.com/package/@lichta/core)
+
+🚀 **[Demo trực tiếp](https://lichta.zeneo.app/)**
 
 Component `Calendar` (lịch tháng có ngày âm lịch) cho Vue 3, đóng gói trên [`@lichta/core`](https://www.npmjs.com/package/@lichta/core).
 
@@ -41,6 +44,8 @@ function onSelect(date: Date, lunar: LunarDate) {
 | `year` | `number` | Năm hiện tại | Năm hiển thị ban đầu |
 | `showLunar` | `boolean` | `true` | Hiện ngày âm lịch dưới ngày dương |
 | `locale` | `'vi' \| 'en' \| 'ja' \| 'ko'` | `'vi'` | Ngôn ngữ nhãn thứ trong tuần |
+| `firstDayOfWeek` | `0 \| 1` | `0` | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai |
+| `showWeekNumber` | `boolean` | `false` | Hiện số tuần (ISO-8601) ở đầu mỗi hàng |
 | `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện lịch |
 
 ## Events
@@ -48,8 +53,53 @@ function onSelect(date: Date, lunar: LunarDate) {
 | Event | Payload | Mô tả |
 |---|---|---|
 | `select` | `(date: Date, lunar: LunarDate)` | Bắn ra khi người dùng chọn 1 ngày |
+| `month-change` | `(month: number, year: number)` | Bắn ra khi điều hướng tháng qua nút prev/next trong header |
+
+> Khác với `@lichta/react`/`@lichta/svelte` (dùng prop `onSelect`), Vue theo đúng convention của framework nên dùng `emit`/`@select` (và `@month-change`) thay vì prop callback. Component cũng chưa hỗ trợ custom render cho từng ô ngày (có ở React/Svelte qua `renderDay`/`dayCell`). `month`/`year` là controlled prop — component tự đồng bộ lại khi cha đổi giá trị; kết hợp với `@month-change` để đồng bộ 2 chiều với 1 nguồn điều hướng khác (ví dụ FullCalendar).
+
+## DatePicker
+
+Component `DatePicker` (input + popover chọn ngày, dựng trên `Calendar` ở trên).
 
-> Khác với `@lichta/react`/`@lichta/svelte` (dùng prop `onSelect`), Vue theo đúng convention của framework nên dùng `emit`/`@select` thay vì prop callback. Component cũng chưa hỗ trợ custom render cho từng ô ngày (có ở React/Svelte qua `renderDay`/`dayCell`) hay điều khiển `month`/`year` như controlled prop — thay đổi prop sau khi mount chưa tự động cập nhật lại lịch đang hiển thị.
+```vue
+<script setup>
+import { DatePicker } from '@lichta/vue';
+import '@lichta/core/styles/calendar-base.css';
+import '@lichta/core/styles/calendar-glass.css'; // theme "glass" (tùy chọn)
+import '@lichta/core/styles/datepicker-base.css';
+import '@lichta/core/styles/datepicker-glass.css'; // theme "glass" (tùy chọn)
+
+function onSelect(date, lunar) {
+  console.log(date, lunar);
+}
+</script>
+
+<template>
+  <DatePicker theme="glass" locale="vi" @select="onSelect" />
+</template>
+```
+
+> ⚠️ Cần import cả CSS của `Calendar` (dùng trong popover) lẫn `DatePicker` (input + popover chrome) — thiếu 1 trong 2 sẽ hiển thị thiếu style.
+
+### Props / Events
+
+| Prop | Kiểu | Mặc định | Mô tả |
+|---|---|---|---|
+| `value` | `Date \| null` | `null` | Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) |
+| `placeholder` | `string` | `'Chọn ngày'` | Placeholder khi chưa chọn ngày |
+| `locale` | `'vi' \| 'en' \| 'ja' \| 'ko'` | `'vi'` | Ngôn ngữ hiển thị trong popover |
+| `firstDayOfWeek` | `0 \| 1` | `0` | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai |
+| `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện input + popover |
+| `showLunar` | `boolean` | `true` | Hiện ngày âm lịch trong popover |
+| `format` | `(date: Date) => string` | `dd/MM/yyyy` | Hàm format ngày hiển thị trên input |
+| `disabled` | `boolean` | `false` | Vô hiệu hoá input |
+
+| Event | Payload | Mô tả |
+|---|---|---|
+| `select` | `(date: Date, lunar: LunarDate)` | Bắn khi chọn ngày trong popover |
+| `month-change` | `(month: number, year: number)` | Bắn khi điều hướng tháng qua nút prev/next trong popover |
+
+Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
 
 ## Theming
 
@@ -66,6 +116,8 @@ function onSelect(date: Date, lunar: LunarDate) {
 }
 ```
 
+`DatePicker` dùng chung biến CSS `--lichta-*` ở trên — không cần custom class riêng.
+
 ## License
 
 [MIT](./LICENSE)

package/dist/Calendar.vue.d.ts

@@ -1,31 +1,36 @@
-import { type LunarDate, type Locale } from '@lichta/core';
+import { type LunarDate, type Locale, type CalendarDayCell, type FirstDayOfWeek } from '@lichta/core';
 interface Props {
     month?: number;
     year?: number;
+    /** Ngày được chọn (controlled). Bỏ qua thì Calendar tự quản lý selection nội bộ (uncontrolled). */
+    selectedDate?: Date | null;
     showLunar?: boolean;
     locale?: Locale;
+    /** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+    firstDayOfWeek?: FirstDayOfWeek;
+    /** Hiển thị số tuần (ISO-8601) ở đầu mỗi hàng */
+    showWeekNumber?: boolean;
     theme?: 'classic' | 'glass';
 }
-export interface DayCellData {
-    solar: Date;
-    lunar: LunarDate;
-    isToday: boolean;
-    isSelected: boolean;
-    isCurrentMonth: boolean;
-}
+export type DayCellData = CalendarDayCell;
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (date: Date, lunar: LunarDate) => any;
+    "month-change": (month: number, year: number) => any;
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
+    "onMonth-change"?: ((month: number, year: number) => any) | undefined;
 }>, {
     month: number;
     year: number;
+    selectedDate: Date | null;
     showLunar: boolean;
     locale: Locale;
+    firstDayOfWeek: FirstDayOfWeek;
+    showWeekNumber: boolean;
     theme: "classic" | "glass";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;

package/dist/DatePicker.vue.d.ts

@@ -0,0 +1,30 @@
+import { type LunarDate, type Locale, type FirstDayOfWeek } from '@lichta/core';
+interface Props {
+    /** Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) */
+    value?: Date | null;
+    placeholder?: string;
+    locale?: Locale;
+    /** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
+    firstDayOfWeek?: FirstDayOfWeek;
+    theme?: 'classic' | 'glass';
+    showLunar?: boolean;
+    format?: (date: Date) => string;
+    disabled?: boolean;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (date: Date, lunar: LunarDate) => any;
+    "month-change": (month: number, year: number) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
+    "onMonth-change"?: ((month: number, year: number) => any) | undefined;
+}>, {
+    showLunar: boolean;
+    locale: Locale;
+    firstDayOfWeek: FirstDayOfWeek;
+    theme: "classic" | "glass";
+    value: Date | null;
+    placeholder: string;
+    format: (date: Date) => string;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as Calendar } from './Calendar.vue';
+export { default as DatePicker } from './DatePicker.vue';

package/dist/lichta-vue.es.js

@@ -1,139 +1,241 @@
-import { defineComponent as q, ref as $, computed as L, openBlock as i, createElementBlock as d, normalizeClass as b, createElementVNode as l, toDisplayString as o, Fragment as T, renderList as N, createTextVNode as Y, createCommentVNode as x, renderSlot as A } from "vue";
-import { getYearDetails as H, LichTa as w } from "@lichta/core";
-const J = { class: "lich-ta-calendar-header" }, P = { class: "lich-ta-calendar-title" }, Q = { class: "lich-ta-calendar-month-year" }, R = { class: "lich-ta-calendar-canchi" }, U = { class: "lich-ta-calendar-weekdays" }, X = { class: "lich-ta-calendar-grid" }, Z = ["tabindex", "onClick", "onKeydown"], ee = { class: "solar-day" }, ae = {
+import { defineComponent as T, ref as _, computed as k, watch as B, openBlock as l, createElementBlock as s, normalizeClass as N, createElementVNode as t, toDisplayString as n, createCommentVNode as w, Fragment as p, renderList as x, createTextVNode as W, renderSlot as I, onMounted as z, onBeforeUnmount as A } from "vue";
+import { getYearDetails as F, getWeekDayLabels as K, t as V, getCalendarGrid as P } from "@lichta/core";
+const U = { class: "lich-ta-calendar-header" }, j = { class: "lich-ta-calendar-title" }, q = { class: "lich-ta-calendar-month-year" }, H = { class: "lich-ta-calendar-canchi" }, J = { class: "lich-ta-calendar-weekdays" }, Q = {
+  key: 0,
+  class: "lich-ta-calendar-week-number",
+  "aria-hidden": "true"
+}, R = { class: "lich-ta-calendar-grid" }, X = {
+  key: 0,
+  class: "lich-ta-calendar-week-number"
+}, Z = ["tabindex", "onClick", "onKeydown"], ee = { class: "solar-day" }, ae = {
   key: 0,
   class: "lunar-day"
 }, te = {
   key: 0,
   class: "lich-ta-calendar-footer"
-}, le = /* @__PURE__ */ q({
+}, pe = /* @__PURE__ */ T({
   __name: "Calendar",
   props: {
     month: { default: (/* @__PURE__ */ new Date()).getMonth() + 1 },
     year: { default: (/* @__PURE__ */ new Date()).getFullYear() },
+    selectedDate: { default: void 0 },
     showLunar: { type: Boolean, default: !0 },
     locale: { default: "vi" },
+    firstDayOfWeek: { default: 0 },
+    showWeekNumber: { type: Boolean, default: !1 },
     theme: { default: "classic" }
   },
-  emits: ["select"],
-  setup(F, { emit: B }) {
-    const v = F, e = $(v.month), s = $(v.year), h = $(null), C = L(() => H(s.value)), E = B, K = [
-      "Tháng 1",
-      "Tháng 2",
-      "Tháng 3",
-      "Tháng 4",
-      "Tháng 5",
-      "Tháng 6",
-      "Tháng 7",
-      "Tháng 8",
-      "Tháng 9",
-      "Tháng 10",
-      "Tháng 11",
-      "Tháng 12"
-    ], V = ["CN", "T2", "T3", "T4", "T5", "T6", "T7"], I = L(() => {
-      const t = [], y = new Date(s.value, e.value - 1, 1), a = new Date(s.value, e.value, 0), D = y.getDay(), g = a.getDate(), p = /* @__PURE__ */ new Date(), _ = `${p.getFullYear()}-${p.getMonth() + 1}-${p.getDate()}`;
-      let f = "";
-      h.value && (f = `${h.value.getFullYear()}-${h.value.getMonth() + 1}-${h.value.getDate()}`);
-      const W = new Date(s.value, e.value - 1, 0).getDate();
-      for (let n = D - 1; n >= 0; n--) {
-        const r = W - n, c = e.value - 1 < 1 ? 12 : e.value - 1, u = e.value - 1 < 1 ? s.value - 1 : s.value, k = new Date(u, c - 1, r), m = w.toLunar(r, c, u), S = `${u}-${c}-${r}`;
-        t.push({
-          solar: k,
-          lunar: m,
-          isToday: S === _,
-          isSelected: S === f,
-          isCurrentMonth: !1
-        });
-      }
-      for (let n = 1; n <= g; n++) {
-        const r = new Date(s.value, e.value - 1, n), c = w.toLunar(n, e.value, s.value), u = `${s.value}-${e.value}-${n}`;
-        t.push({
-          solar: r,
-          lunar: c,
-          isToday: u === _,
-          isSelected: u === f,
-          isCurrentMonth: !0
-        });
-      }
-      const j = 42 - t.length;
-      for (let n = 1; n <= j; n++) {
-        const r = e.value + 1 > 12 ? 1 : e.value + 1, c = e.value + 1 > 12 ? s.value + 1 : s.value, u = new Date(c, r - 1, n), k = w.toLunar(n, r, c), m = `${c}-${r}-${n}`;
-        t.push({
-          solar: u,
-          lunar: k,
-          isToday: m === _,
-          isSelected: m === f,
-          isCurrentMonth: !1
-        });
-      }
-      return t;
+  emits: ["select", "month-change"],
+  setup(v, { emit: g }) {
+    const e = v, i = _(e.month), c = _(e.year), m = _(null), b = k(
+      () => e.selectedDate !== void 0 ? e.selectedDate : m.value
+    );
+    B(() => e.month, (a) => {
+      i.value = a;
+    }), B(() => e.year, (a) => {
+      c.value = a;
     });
-    function z() {
-      e.value === 1 ? (e.value = 12, s.value -= 1) : e.value -= 1;
+    const D = k(() => F(c.value)), d = g, h = k(() => K(e.locale, e.firstDayOfWeek)), M = k(() => V(e.locale).solarMonthNames), Y = k(
+      () => P(i.value, c.value, b.value, e.firstDayOfWeek)
+    );
+    function E() {
+      const a = i.value === 1 ? 12 : i.value - 1, f = i.value === 1 ? c.value - 1 : c.value;
+      i.value = a, c.value = f, d("month-change", a, f);
     }
-    function G() {
-      e.value === 12 ? (e.value = 1, s.value += 1) : e.value += 1;
+    function S() {
+      const a = i.value === 12 ? 1 : i.value + 1, f = i.value === 12 ? c.value + 1 : c.value;
+      i.value = a, c.value = f, d("month-change", a, f);
     }
-    function M(t) {
-      h.value = t.solar, E("select", t.solar, t.lunar);
+    function L(a) {
+      e.selectedDate === void 0 && (m.value = a.solar), d("select", a.solar, a.lunar);
     }
-    function O(t, y) {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), M(y));
+    function O(a, f) {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), L(f));
     }
-    return (t, y) => (i(), d("div", {
-      class: b(["lich-ta-calendar", `lichta-theme-${v.theme}`])
+    return (a, f) => (l(), s("div", {
+      class: N(["lich-ta-calendar", `lichta-theme-${e.theme}`, { "lich-ta-calendar--with-week-number": e.showWeekNumber }])
     }, [
-      l("div", J, [
-        l("button", {
+      t("div", U, [
+        t("button", {
           class: "lich-ta-calendar-nav",
           "aria-label": "Tháng trước",
-          onClick: z
+          onClick: E
         }, "◀"),
-        l("div", P, [
-          l("span", Q, o(K[e.value - 1]) + ", " + o(s.value), 1),
-          l("span", R, o(C.value.can) + " " + o(C.value.chi), 1)
+        t("div", j, [
+          t("span", q, n(M.value[i.value - 1]) + ", " + n(c.value), 1),
+          t("span", H, n(D.value.can) + " " + n(D.value.chi), 1)
         ]),
-        l("button", {
+        t("button", {
           class: "lich-ta-calendar-nav",
           "aria-label": "Tháng sau",
-          onClick: G
+          onClick: S
         }, "▶")
       ]),
-      l("div", U, [
-        (i(), d(T, null, N(V, (a) => l("div", {
-          key: a,
+      t("div", J, [
+        e.showWeekNumber ? (l(), s("div", Q)) : w("", !0),
+        (l(!0), s(p, null, x(h.value, (o) => (l(), s("div", {
+          key: o,
           class: "lich-ta-calendar-weekday"
-        }, o(a), 1)), 64))
+        }, n(o), 1))), 128))
       ]),
-      l("div", X, [
-        (i(!0), d(T, null, N(I.value, (a, D) => (i(), d("button", {
-          key: D,
-          class: b(["lich-ta-calendar-day", {
-            "is-today": a.isToday,
-            "is-selected": a.isSelected,
-            "is-other-month": !a.isCurrentMonth,
-            "is-first-lunar": a.lunar.day === 1
-          }]),
-          tabindex: a.isCurrentMonth ? 0 : -1,
-          onClick: (g) => M(a),
-          onKeydown: (g) => O(g, a)
-        }, [
-          l("span", ee, o(a.solar.getDate()), 1),
-          v.showLunar ? (i(), d("span", ae, [
-            a.lunar.day === 1 ? (i(), d(T, { key: 0 }, [
-              Y(o(a.lunar.day) + "/" + o(a.lunar.month) + o(a.lunar.isLeap ? "*" : ""), 1)
-            ], 64)) : (i(), d(T, { key: 1 }, [
-              Y(o(a.lunar.day), 1)
-            ], 64))
-          ])) : x("", !0)
-        ], 42, Z))), 128))
+      t("div", R, [
+        (l(!0), s(p, null, x(Y.value, (o, $) => (l(), s(p, { key: $ }, [
+          e.showWeekNumber && $ % 7 === 0 ? (l(), s("div", X, n(o.weekNumber), 1)) : w("", !0),
+          t("button", {
+            class: N(["lich-ta-calendar-day", {
+              "is-today": o.isToday,
+              "is-selected": o.isSelected,
+              "is-other-month": !o.isCurrentMonth,
+              "is-first-lunar": o.lunar.day === 1
+            }]),
+            tabindex: o.isCurrentMonth ? 0 : -1,
+            onClick: (C) => L(o),
+            onKeydown: (C) => O(C, o)
+          }, [
+            t("span", ee, n(o.solar.getDate()), 1),
+            e.showLunar ? (l(), s("span", ae, [
+              o.lunar.day === 1 ? (l(), s(p, { key: 0 }, [
+                W(n(o.lunar.day) + "/" + n(o.lunar.month) + n(o.lunar.isLeap ? "*" : ""), 1)
+              ], 64)) : (l(), s(p, { key: 1 }, [
+                W(n(o.lunar.day), 1)
+              ], 64))
+            ])) : w("", !0)
+          ], 42, Z)
+        ], 64))), 128))
       ]),
-      t.$slots.default ? (i(), d("div", te, [
-        A(t.$slots, "default")
-      ])) : x("", !0)
+      a.$slots.default ? (l(), s("div", te, [
+        I(a.$slots, "default")
+      ])) : w("", !0)
+    ], 2));
+  }
+}), ne = ["disabled", "placeholder", "value", "aria-expanded"], le = {
+  key: 0,
+  class: "lich-ta-datepicker-popover",
+  role: "dialog"
+}, se = { class: "lich-ta-datepicker-calendar" }, oe = { class: "lich-ta-datepicker-calendar-header" }, ce = { class: "lich-ta-datepicker-calendar-title" }, re = { class: "lich-ta-datepicker-calendar-month-year" }, ie = { class: "lich-ta-datepicker-calendar-canchi" }, de = { class: "lich-ta-datepicker-calendar-weekdays" }, ue = { class: "lich-ta-datepicker-calendar-grid" }, he = ["tabindex", "onClick"], ve = { class: "solar-day" }, ye = {
+  key: 0,
+  class: "lunar-day"
+}, _e = /* @__PURE__ */ T({
+  __name: "DatePicker",
+  props: {
+    value: { default: null },
+    placeholder: { default: "Chọn ngày" },
+    locale: { default: "vi" },
+    firstDayOfWeek: { default: 0 },
+    theme: { default: "classic" },
+    showLunar: { type: Boolean, default: !0 },
+    format: { type: Function, default: (v) => {
+      const g = String(v.getDate()).padStart(2, "0"), e = String(v.getMonth() + 1).padStart(2, "0");
+      return `${g}/${e}/${v.getFullYear()}`;
+    } },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select", "month-change"],
+  setup(v, { emit: g }) {
+    const e = v, i = g, c = _(e.value), m = _(!1), b = _(null), D = c.value ?? /* @__PURE__ */ new Date(), d = _(D.getMonth() + 1), h = _(D.getFullYear());
+    B(
+      () => e.value,
+      (r) => {
+        const y = r ?? null;
+        c.value = y, y && (d.value = y.getMonth() + 1, h.value = y.getFullYear());
+      }
+    );
+    const M = k(() => F(h.value)), Y = k(() => K(e.locale, e.firstDayOfWeek)), E = k(() => V(e.locale).solarMonthNames), S = k(() => P(d.value, h.value, c.value, e.firstDayOfWeek)), L = k(() => c.value ? e.format(c.value) : "");
+    function O() {
+      e.disabled || (m.value = !m.value);
+    }
+    function a() {
+      const r = d.value === 1 ? 12 : d.value - 1, y = d.value === 1 ? h.value - 1 : h.value;
+      d.value = r, h.value = y, i("month-change", r, y);
+    }
+    function f() {
+      const r = d.value === 12 ? 1 : d.value + 1, y = d.value === 12 ? h.value + 1 : h.value;
+      d.value = r, h.value = y, i("month-change", r, y);
+    }
+    function o(r) {
+      c.value = r.solar, m.value = !1, i("select", r.solar, r.lunar);
+    }
+    function $(r) {
+      b.value && !b.value.contains(r.target) && (m.value = !1);
+    }
+    function C(r) {
+      r.key === "Escape" && (m.value = !1);
+    }
+    return z(() => {
+      document.addEventListener("mousedown", $), document.addEventListener("keydown", C);
+    }), A(() => {
+      document.removeEventListener("mousedown", $), document.removeEventListener("keydown", C);
+    }), (r, y) => (l(), s("div", {
+      ref_key: "rootEl",
+      ref: b,
+      class: N(["lich-ta-datepicker", `lichta-theme-${v.theme}`])
+    }, [
+      t("input", {
+        type: "text",
+        class: "lich-ta-datepicker-input",
+        readonly: "",
+        disabled: v.disabled,
+        placeholder: v.placeholder,
+        value: L.value,
+        "aria-haspopup": "dialog",
+        "aria-expanded": m.value,
+        onClick: O
+      }, null, 8, ne),
+      m.value ? (l(), s("div", le, [
+        t("div", se, [
+          t("div", oe, [
+            t("button", {
+              type: "button",
+              class: "lich-ta-datepicker-calendar-nav",
+              "aria-label": "Tháng trước",
+              onClick: a
+            }, " ◀ "),
+            t("div", ce, [
+              t("span", re, n(E.value[d.value - 1]) + ", " + n(h.value), 1),
+              t("span", ie, n(M.value.can) + " " + n(M.value.chi), 1)
+            ]),
+            t("button", {
+              type: "button",
+              class: "lich-ta-datepicker-calendar-nav",
+              "aria-label": "Tháng sau",
+              onClick: f
+            }, " ▶ ")
+          ]),
+          t("div", de, [
+            (l(!0), s(p, null, x(Y.value, (u) => (l(), s("div", {
+              key: u,
+              class: "lich-ta-datepicker-calendar-weekday"
+            }, n(u), 1))), 128))
+          ]),
+          t("div", ue, [
+            (l(!0), s(p, null, x(S.value, (u, G) => (l(), s("button", {
+              key: G,
+              type: "button",
+              class: N(["lich-ta-datepicker-calendar-day", {
+                "is-today": u.isToday,
+                "is-selected": u.isSelected,
+                "is-other-month": !u.isCurrentMonth,
+                "is-first-lunar": u.lunar.day === 1
+              }]),
+              tabindex: u.isCurrentMonth ? 0 : -1,
+              onClick: (me) => o(u)
+            }, [
+              t("span", ve, n(u.solar.getDate()), 1),
+              v.showLunar ? (l(), s("span", ye, [
+                u.lunar.day === 1 ? (l(), s(p, { key: 0 }, [
+                  W(n(u.lunar.day) + "/" + n(u.lunar.month) + n(u.lunar.isLeap ? "*" : ""), 1)
+                ], 64)) : (l(), s(p, { key: 1 }, [
+                  W(n(u.lunar.day), 1)
+                ], 64))
+              ])) : w("", !0)
+            ], 10, he))), 128))
+          ])
+        ])
+      ])) : w("", !0)
     ], 2));
   }
 });
 export {
-  le as Calendar
+  pe as Calendar,
+  _e as DatePicker
 };

package/dist/lichta-vue.umd.js

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@lichta/core")):typeof define=="function"&&define.amd?define(["exports","vue","@lichta/core"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.LichTaVue={},c.Vue,c.LichTaCore))})(this,(function(c,e,h){"use strict";const E={class:"lich-ta-calendar-header"},$={class:"lich-ta-calendar-title"},w={class:"lich-ta-calendar-month-year"},B={class:"lich-ta-calendar-canchi"},N={class:"lich-ta-calendar-weekdays"},V={class:"lich-ta-calendar-grid"},L=["tabindex","onClick","onKeydown"],M={class:"solar-day"},b={key:0,class:"lunar-day"},F={key:0,class:"lich-ta-calendar-footer"},x=e.defineComponent({__name:"Calendar",props:{month:{default:new Date().getMonth()+1},year:{default:new Date().getFullYear()},showLunar:{type:Boolean,default:!0},locale:{default:"vi"},theme:{default:"classic"}},emits:["select"],setup(Y,{emit:K}){const u=Y,t=e.ref(u.month),l=e.ref(u.year),d=e.ref(null),_=e.computed(()=>h.getYearDetails(l.value)),j=K,q=["Tháng 1","Tháng 2","Tháng 3","Tháng 4","Tháng 5","Tháng 6","Tháng 7","Tháng 8","Tháng 9","Tháng 10","Tháng 11","Tháng 12"],v=["CN","T2","T3","T4","T5","T6","T7"],z=e.computed(()=>{const n=[],y=new Date(l.value,t.value-1,1),a=new Date(l.value,t.value,0),f=y.getDay(),m=a.getDate(),D=new Date,T=`${D.getFullYear()}-${D.getMonth()+1}-${D.getDate()}`;let g="";d.value&&(g=`${d.value.getFullYear()}-${d.value.getMonth()+1}-${d.value.getDate()}`);const P=new Date(l.value,t.value-1,0).getDate();for(let o=f-1;o>=0;o--){const s=P-o,r=t.value-1<1?12:t.value-1,i=t.value-1<1?l.value-1:l.value,k=new Date(i,r-1,s),p=h.LichTa.toLunar(s,r,i),C=`${i}-${r}-${s}`;n.push({solar:k,lunar:p,isToday:C===T,isSelected:C===g,isCurrentMonth:!1})}for(let o=1;o<=m;o++){const s=new Date(l.value,t.value-1,o),r=h.LichTa.toLunar(o,t.value,l.value),i=`${l.value}-${t.value}-${o}`;n.push({solar:s,lunar:r,isToday:i===T,isSelected:i===g,isCurrentMonth:!0})}const W=42-n.length;for(let o=1;o<=W;o++){const s=t.value+1>12?1:t.value+1,r=t.value+1>12?l.value+1:l.value,i=new Date(r,s-1,o),k=h.LichTa.toLunar(o,s,r),p=`${r}-${s}-${o}`;n.push({solar:i,lunar:k,isToday:p===T,isSelected:p===g,isCurrentMonth:!1})}return n});function I(){t.value===1?(t.value=12,l.value-=1):t.value-=1}function O(){t.value===12?(t.value=1,l.value+=1):t.value+=1}function S(n){d.value=n.solar,j("select",n.solar,n.lunar)}function G(n,y){(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),S(y))}return(n,y)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["lich-ta-calendar",`lichta-theme-${u.theme}`])},[e.createElementVNode("div",E,[e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng trước",onClick:I},"◀"),e.createElementVNode("div",$,[e.createElementVNode("span",w,e.toDisplayString(q[t.value-1])+", "+e.toDisplayString(l.value),1),e.createElementVNode("span",B,e.toDisplayString(_.value.can)+" "+e.toDisplayString(_.value.chi),1)]),e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng sau",onClick:O},"▶")]),e.createElementVNode("div",N,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(v,a=>e.createElementVNode("div",{key:a,class:"lich-ta-calendar-weekday"},e.toDisplayString(a),1)),64))]),e.createElementVNode("div",V,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(z.value,(a,f)=>(e.openBlock(),e.createElementBlock("button",{key:f,class:e.normalizeClass(["lich-ta-calendar-day",{"is-today":a.isToday,"is-selected":a.isSelected,"is-other-month":!a.isCurrentMonth,"is-first-lunar":a.lunar.day===1}]),tabindex:a.isCurrentMonth?0:-1,onClick:m=>S(a),onKeydown:m=>G(m,a)},[e.createElementVNode("span",M,e.toDisplayString(a.solar.getDate()),1),u.showLunar?(e.openBlock(),e.createElementBlock("span",b,[a.lunar.day===1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(a.lunar.day)+"/"+e.toDisplayString(a.lunar.month)+e.toDisplayString(a.lunar.isLeap?"*":""),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(a.lunar.day),1)],64))])):e.createCommentVNode("",!0)],42,L))),128))]),n.$slots.default?(e.openBlock(),e.createElementBlock("div",F,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)],2))}});c.Calendar=x,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
+(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@lichta/core")):typeof define=="function"&&define.amd?define(["exports","vue","@lichta/core"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.LichTaVue={},k.Vue,k.LichTaCore))})(this,(function(k,e,y){"use strict";const C={class:"lich-ta-calendar-header"},S={class:"lich-ta-calendar-title"},M={class:"lich-ta-calendar-month-year"},$={class:"lich-ta-calendar-canchi"},L={class:"lich-ta-calendar-weekdays"},T={key:0,class:"lich-ta-calendar-week-number","aria-hidden":"true"},x={class:"lich-ta-calendar-grid"},F={key:0,class:"lich-ta-calendar-week-number"},W=["tabindex","onClick","onKeydown"],Y={class:"solar-day"},O={key:0,class:"lunar-day"},z={key:0,class:"lich-ta-calendar-footer"},K=e.defineComponent({__name:"Calendar",props:{month:{default:new Date().getMonth()+1},year:{default:new Date().getFullYear()},selectedDate:{default:void 0},showLunar:{type:Boolean,default:!0},locale:{default:"vi"},firstDayOfWeek:{default:0},showWeekNumber:{type:Boolean,default:!1},theme:{default:"classic"}},emits:["select","month-change"],setup(d,{emit:u}){const t=d,c=e.ref(t.month),l=e.ref(t.year),m=e.ref(null),f=e.computed(()=>t.selectedDate!==void 0?t.selectedDate:m.value);e.watch(()=>t.month,a=>{c.value=a}),e.watch(()=>t.year,a=>{l.value=a});const g=e.computed(()=>y.getYearDetails(l.value)),r=u,i=e.computed(()=>y.getWeekDayLabels(t.locale,t.firstDayOfWeek)),E=e.computed(()=>y.t(t.locale).solarMonthNames),w=e.computed(()=>y.getCalendarGrid(c.value,l.value,f.value,t.firstDayOfWeek));function N(){const a=c.value===1?12:c.value-1,p=c.value===1?l.value-1:l.value;c.value=a,l.value=p,r("month-change",a,p)}function V(){const a=c.value===12?1:c.value+1,p=c.value===12?l.value+1:l.value;c.value=a,l.value=p,r("month-change",a,p)}function B(a){t.selectedDate===void 0&&(m.value=a.solar),r("select",a.solar,a.lunar)}function b(a,p){(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),B(p))}return(a,p)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["lich-ta-calendar",`lichta-theme-${t.theme}`,{"lich-ta-calendar--with-week-number":t.showWeekNumber}])},[e.createElementVNode("div",C,[e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng trước",onClick:N},"◀"),e.createElementVNode("div",S,[e.createElementVNode("span",M,e.toDisplayString(E.value[c.value-1])+", "+e.toDisplayString(l.value),1),e.createElementVNode("span",$,e.toDisplayString(g.value.can)+" "+e.toDisplayString(g.value.chi),1)]),e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng sau",onClick:V},"▶")]),e.createElementVNode("div",L,[t.showWeekNumber?(e.openBlock(),e.createElementBlock("div",T)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(i.value,n=>(e.openBlock(),e.createElementBlock("div",{key:n,class:"lich-ta-calendar-weekday"},e.toDisplayString(n),1))),128))]),e.createElementVNode("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,(n,D)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:D},[t.showWeekNumber&&D%7===0?(e.openBlock(),e.createElementBlock("div",F,e.toDisplayString(n.weekNumber),1)):e.createCommentVNode("",!0),e.createElementVNode("button",{class:e.normalizeClass(["lich-ta-calendar-day",{"is-today":n.isToday,"is-selected":n.isSelected,"is-other-month":!n.isCurrentMonth,"is-first-lunar":n.lunar.day===1}]),tabindex:n.isCurrentMonth?0:-1,onClick:_=>B(n),onKeydown:_=>b(_,n)},[e.createElementVNode("span",Y,e.toDisplayString(n.solar.getDate()),1),t.showLunar?(e.openBlock(),e.createElementBlock("span",O,[n.lunar.day===1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(n.lunar.day)+"/"+e.toDisplayString(n.lunar.month)+e.toDisplayString(n.lunar.isLeap?"*":""),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(n.lunar.day),1)],64))])):e.createCommentVNode("",!0)],42,W)],64))),128))]),a.$slots.default?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(a.$slots,"default")])):e.createCommentVNode("",!0)],2))}}),P=["disabled","placeholder","value","aria-expanded"],G={key:0,class:"lich-ta-datepicker-popover",role:"dialog"},j={class:"lich-ta-datepicker-calendar"},q={class:"lich-ta-datepicker-calendar-header"},I={class:"lich-ta-datepicker-calendar-title"},A={class:"lich-ta-datepicker-calendar-month-year"},U={class:"lich-ta-datepicker-calendar-canchi"},H={class:"lich-ta-datepicker-calendar-weekdays"},J={class:"lich-ta-datepicker-calendar-grid"},Q=["tabindex","onClick"],R={class:"solar-day"},X={key:0,class:"lunar-day"},Z=e.defineComponent({__name:"DatePicker",props:{value:{default:null},placeholder:{default:"Chọn ngày"},locale:{default:"vi"},firstDayOfWeek:{default:0},theme:{default:"classic"},showLunar:{type:Boolean,default:!0},format:{type:Function,default:d=>{const u=String(d.getDate()).padStart(2,"0"),t=String(d.getMonth()+1).padStart(2,"0");return`${u}/${t}/${d.getFullYear()}`}},disabled:{type:Boolean,default:!1}},emits:["select","month-change"],setup(d,{emit:u}){const t=d,c=u,l=e.ref(t.value),m=e.ref(!1),f=e.ref(null),g=l.value??new Date,r=e.ref(g.getMonth()+1),i=e.ref(g.getFullYear());e.watch(()=>t.value,o=>{const h=o??null;l.value=h,h&&(r.value=h.getMonth()+1,i.value=h.getFullYear())});const E=e.computed(()=>y.getYearDetails(i.value)),w=e.computed(()=>y.getWeekDayLabels(t.locale,t.firstDayOfWeek)),N=e.computed(()=>y.t(t.locale).solarMonthNames),V=e.computed(()=>y.getCalendarGrid(r.value,i.value,l.value,t.firstDayOfWeek)),B=e.computed(()=>l.value?t.format(l.value):"");function b(){t.disabled||(m.value=!m.value)}function a(){const o=r.value===1?12:r.value-1,h=r.value===1?i.value-1:i.value;r.value=o,i.value=h,c("month-change",o,h)}function p(){const o=r.value===12?1:r.value+1,h=r.value===12?i.value+1:i.value;r.value=o,i.value=h,c("month-change",o,h)}function n(o){l.value=o.solar,m.value=!1,c("select",o.solar,o.lunar)}function D(o){f.value&&!f.value.contains(o.target)&&(m.value=!1)}function _(o){o.key==="Escape"&&(m.value=!1)}return e.onMounted(()=>{document.addEventListener("mousedown",D),document.addEventListener("keydown",_)}),e.onBeforeUnmount(()=>{document.removeEventListener("mousedown",D),document.removeEventListener("keydown",_)}),(o,h)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:f,class:e.normalizeClass(["lich-ta-datepicker",`lichta-theme-${d.theme}`])},[e.createElementVNode("input",{type:"text",class:"lich-ta-datepicker-input",readonly:"",disabled:d.disabled,placeholder:d.placeholder,value:B.value,"aria-haspopup":"dialog","aria-expanded":m.value,onClick:b},null,8,P),m.value?(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",j,[e.createElementVNode("div",q,[e.createElementVNode("button",{type:"button",class:"lich-ta-datepicker-calendar-nav","aria-label":"Tháng trước",onClick:a}," ◀ "),e.createElementVNode("div",I,[e.createElementVNode("span",A,e.toDisplayString(N.value[r.value-1])+", "+e.toDisplayString(i.value),1),e.createElementVNode("span",U,e.toDisplayString(E.value.can)+" "+e.toDisplayString(E.value.chi),1)]),e.createElementVNode("button",{type:"button",class:"lich-ta-datepicker-calendar-nav","aria-label":"Tháng sau",onClick:p}," ▶ ")]),e.createElementVNode("div",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(w.value,s=>(e.openBlock(),e.createElementBlock("div",{key:s,class:"lich-ta-datepicker-calendar-weekday"},e.toDisplayString(s),1))),128))]),e.createElementVNode("div",J,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,(s,v)=>(e.openBlock(),e.createElementBlock("button",{key:v,type:"button",class:e.normalizeClass(["lich-ta-datepicker-calendar-day",{"is-today":s.isToday,"is-selected":s.isSelected,"is-other-month":!s.isCurrentMonth,"is-first-lunar":s.lunar.day===1}]),tabindex:s.isCurrentMonth?0:-1,onClick:ee=>n(s)},[e.createElementVNode("span",R,e.toDisplayString(s.solar.getDate()),1),d.showLunar?(e.openBlock(),e.createElementBlock("span",X,[s.lunar.day===1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(s.lunar.day)+"/"+e.toDisplayString(s.lunar.month)+e.toDisplayString(s.lunar.isLeap?"*":""),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(s.lunar.day),1)],64))])):e.createCommentVNode("",!0)],10,Q))),128))])])])):e.createCommentVNode("",!0)],2))}});k.Calendar=K,k.DatePicker=Z,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lichta/vue",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "description": "Vue components for LichTa",
   "author": "Zeforc Labs | Stridev",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@lichta/core": "2.0.1"
+    "@lichta/core": "2.2.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"