@lichta/vue 2.0.1 → 2.1.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)
+[![npm version](https://img.shields.io/npm/v/@lichta/core.svg)](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).
 
@@ -51,6 +54,48 @@ function onSelect(date: Date, lunar: LunarDate) {
 
 > 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ị.
 
+## DatePicker
+
+Component `DatePicker` (input + popover chọn ngày, dựng trên `Calendar` ở trên).
+
+```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 |
+| `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 |
+
+Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
+
 ## Theming
 
 ```css
@@ -66,6 +111,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,18 +1,14 @@
-import { type LunarDate, type Locale } from '@lichta/core';
+import { type LunarDate, type Locale, type CalendarDayCell } 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;
     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;
@@ -24,6 +20,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
 }>, {
     month: number;
     year: number;
+    selectedDate: Date | null;
     showLunar: boolean;
     locale: Locale;
     theme: "classic" | "glass";

package/dist/DatePicker.vue.d.ts

@@ -0,0 +1,25 @@
+import { type LunarDate, type Locale } 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;
+    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;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
+}>, {
+    showLunar: boolean;
+    locale: Locale;
+    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,224 @@
-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 V, ref as f, computed as y, watch as K, openBlock as l, createElementBlock as s, normalizeClass as L, createElementVNode as a, toDisplayString as t, Fragment as m, renderList as x, createTextVNode as E, createCommentVNode as S, renderSlot as O, onMounted as z, onBeforeUnmount as A } from "vue";
+import { getYearDetails as P, t as N, getCalendarGrid as G } 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 = { class: "lich-ta-calendar-grid" }, R = ["tabindex", "onClick", "onKeydown"], W = { class: "solar-day" }, X = {
   key: 0,
   class: "lunar-day"
-}, te = {
+}, Z = {
   key: 0,
   class: "lich-ta-calendar-footer"
-}, le = /* @__PURE__ */ q({
+}, pe = /* @__PURE__ */ V({
   __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" },
     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;
+  setup(r, { emit: k }) {
+    const e = r, d = f(e.month), i = f(e.year), h = f(null), _ = y(
+      () => e.selectedDate !== void 0 ? e.selectedDate : h.value
+    );
+    K(() => e.month, (o) => {
+      d.value = o;
+    }), K(() => e.year, (o) => {
+      i.value = o;
     });
-    function z() {
-      e.value === 1 ? (e.value = 12, s.value -= 1) : e.value -= 1;
+    const g = y(() => P(i.value)), u = k, p = y(() => N(e.locale).weekDays), b = y(() => N(e.locale).solarMonthNames), T = y(
+      () => G(d.value, i.value, _.value)
+    );
+    function Y() {
+      d.value === 1 ? (d.value = 12, i.value -= 1) : d.value -= 1;
     }
-    function G() {
-      e.value === 12 ? (e.value = 1, s.value += 1) : e.value += 1;
+    function B() {
+      d.value === 12 ? (d.value = 1, i.value += 1) : d.value += 1;
     }
-    function M(t) {
-      h.value = t.solar, E("select", t.solar, t.lunar);
+    function C(o) {
+      e.selectedDate === void 0 && (h.value = o.solar), u("select", o.solar, o.lunar);
     }
-    function O(t, y) {
-      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), M(y));
+    function F(o, $) {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), C($));
     }
-    return (t, y) => (i(), d("div", {
-      class: b(["lich-ta-calendar", `lichta-theme-${v.theme}`])
+    return (o, $) => (l(), s("div", {
+      class: L(["lich-ta-calendar", `lichta-theme-${e.theme}`])
     }, [
-      l("div", J, [
-        l("button", {
+      a("div", U, [
+        a("button", {
           class: "lich-ta-calendar-nav",
           "aria-label": "Tháng trước",
-          onClick: z
+          onClick: Y
         }, "◀"),
-        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)
+        a("div", j, [
+          a("span", q, t(b.value[d.value - 1]) + ", " + t(i.value), 1),
+          a("span", H, t(g.value.can) + " " + t(g.value.chi), 1)
         ]),
-        l("button", {
+        a("button", {
           class: "lich-ta-calendar-nav",
           "aria-label": "Tháng sau",
-          onClick: G
+          onClick: B
         }, "▶")
       ]),
-      l("div", U, [
-        (i(), d(T, null, N(V, (a) => l("div", {
-          key: a,
+      a("div", J, [
+        (l(!0), s(m, null, x(p.value, (n) => (l(), s("div", {
+          key: n,
           class: "lich-ta-calendar-weekday"
-        }, o(a), 1)), 64))
+        }, t(n), 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
+      a("div", Q, [
+        (l(!0), s(m, null, x(T.value, (n, M) => (l(), s("button", {
+          key: M,
+          class: L(["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: a.isCurrentMonth ? 0 : -1,
-          onClick: (g) => M(a),
-          onKeydown: (g) => O(g, a)
+          tabindex: n.isCurrentMonth ? 0 : -1,
+          onClick: (w) => C(n),
+          onKeydown: (w) => F(w, n)
         }, [
-          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)
+          a("span", W, t(n.solar.getDate()), 1),
+          e.showLunar ? (l(), s("span", X, [
+            n.lunar.day === 1 ? (l(), s(m, { key: 0 }, [
+              E(t(n.lunar.day) + "/" + t(n.lunar.month) + t(n.lunar.isLeap ? "*" : ""), 1)
+            ], 64)) : (l(), s(m, { key: 1 }, [
+              E(t(n.lunar.day), 1)
             ], 64))
-          ])) : x("", !0)
-        ], 42, Z))), 128))
+          ])) : S("", !0)
+        ], 42, R))), 128))
       ]),
-      t.$slots.default ? (i(), d("div", te, [
-        A(t.$slots, "default")
-      ])) : x("", !0)
+      o.$slots.default ? (l(), s("div", Z, [
+        O(o.$slots, "default")
+      ])) : S("", !0)
+    ], 2));
+  }
+}), ee = ["disabled", "placeholder", "value", "aria-expanded"], ae = {
+  key: 0,
+  class: "lich-ta-datepicker-popover",
+  role: "dialog"
+}, te = { class: "lich-ta-datepicker-calendar" }, ne = { class: "lich-ta-datepicker-calendar-header" }, le = { class: "lich-ta-datepicker-calendar-title" }, se = { class: "lich-ta-datepicker-calendar-month-year" }, oe = { class: "lich-ta-datepicker-calendar-canchi" }, ce = { class: "lich-ta-datepicker-calendar-weekdays" }, ie = { class: "lich-ta-datepicker-calendar-grid" }, re = ["tabindex", "onClick"], de = { class: "solar-day" }, ue = {
+  key: 0,
+  class: "lunar-day"
+}, fe = /* @__PURE__ */ V({
+  __name: "DatePicker",
+  props: {
+    value: { default: null },
+    placeholder: { default: "Chọn ngày" },
+    locale: { default: "vi" },
+    theme: { default: "classic" },
+    showLunar: { type: Boolean, default: !0 },
+    format: { type: Function, default: (r) => {
+      const k = String(r.getDate()).padStart(2, "0"), e = String(r.getMonth() + 1).padStart(2, "0");
+      return `${k}/${e}/${r.getFullYear()}`;
+    } },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["select"],
+  setup(r, { emit: k }) {
+    const e = r, d = k, i = f(e.value), h = f(!1), _ = f(null), g = i.value ?? /* @__PURE__ */ new Date(), u = f(g.getMonth() + 1), p = f(g.getFullYear());
+    K(
+      () => e.value,
+      (v) => {
+        const D = v ?? null;
+        i.value = D, D && (u.value = D.getMonth() + 1, p.value = D.getFullYear());
+      }
+    );
+    const b = y(() => P(p.value)), T = y(() => N(e.locale).weekDays), Y = y(() => N(e.locale).solarMonthNames), B = y(() => G(u.value, p.value, i.value)), C = y(() => i.value ? e.format(i.value) : "");
+    function F() {
+      e.disabled || (h.value = !h.value);
+    }
+    function o() {
+      u.value === 1 ? (u.value = 12, p.value -= 1) : u.value -= 1;
+    }
+    function $() {
+      u.value === 12 ? (u.value = 1, p.value += 1) : u.value += 1;
+    }
+    function n(v) {
+      i.value = v.solar, h.value = !1, d("select", v.solar, v.lunar);
+    }
+    function M(v) {
+      _.value && !_.value.contains(v.target) && (h.value = !1);
+    }
+    function w(v) {
+      v.key === "Escape" && (h.value = !1);
+    }
+    return z(() => {
+      document.addEventListener("mousedown", M), document.addEventListener("keydown", w);
+    }), A(() => {
+      document.removeEventListener("mousedown", M), document.removeEventListener("keydown", w);
+    }), (v, D) => (l(), s("div", {
+      ref_key: "rootEl",
+      ref: _,
+      class: L(["lich-ta-datepicker", `lichta-theme-${r.theme}`])
+    }, [
+      a("input", {
+        type: "text",
+        class: "lich-ta-datepicker-input",
+        readonly: "",
+        disabled: r.disabled,
+        placeholder: r.placeholder,
+        value: C.value,
+        "aria-haspopup": "dialog",
+        "aria-expanded": h.value,
+        onClick: F
+      }, null, 8, ee),
+      h.value ? (l(), s("div", ae, [
+        a("div", te, [
+          a("div", ne, [
+            a("button", {
+              type: "button",
+              class: "lich-ta-datepicker-calendar-nav",
+              "aria-label": "Tháng trước",
+              onClick: o
+            }, " ◀ "),
+            a("div", le, [
+              a("span", se, t(Y.value[u.value - 1]) + ", " + t(p.value), 1),
+              a("span", oe, t(b.value.can) + " " + t(b.value.chi), 1)
+            ]),
+            a("button", {
+              type: "button",
+              class: "lich-ta-datepicker-calendar-nav",
+              "aria-label": "Tháng sau",
+              onClick: $
+            }, " ▶ ")
+          ]),
+          a("div", ce, [
+            (l(!0), s(m, null, x(T.value, (c) => (l(), s("div", {
+              key: c,
+              class: "lich-ta-datepicker-calendar-weekday"
+            }, t(c), 1))), 128))
+          ]),
+          a("div", ie, [
+            (l(!0), s(m, null, x(B.value, (c, I) => (l(), s("button", {
+              key: I,
+              type: "button",
+              class: L(["lich-ta-datepicker-calendar-day", {
+                "is-today": c.isToday,
+                "is-selected": c.isSelected,
+                "is-other-month": !c.isCurrentMonth,
+                "is-first-lunar": c.lunar.day === 1
+              }]),
+              tabindex: c.isCurrentMonth ? 0 : -1,
+              onClick: (he) => n(c)
+            }, [
+              a("span", de, t(c.solar.getDate()), 1),
+              r.showLunar ? (l(), s("span", ue, [
+                c.lunar.day === 1 ? (l(), s(m, { key: 0 }, [
+                  E(t(c.lunar.day) + "/" + t(c.lunar.month) + t(c.lunar.isLeap ? "*" : ""), 1)
+                ], 64)) : (l(), s(m, { key: 1 }, [
+                  E(t(c.lunar.day), 1)
+                ], 64))
+              ])) : S("", !0)
+            ], 10, re))), 128))
+          ])
+        ])
+      ])) : S("", !0)
     ], 2));
   }
 });
 export {
-  le as Calendar
+  pe as Calendar,
+  fe 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(h,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):(h=typeof globalThis<"u"?globalThis:h||self,e(h.LichTaVue={},h.Vue,h.LichTaCore))})(this,(function(h,e,m){"use strict";const w={class:"lich-ta-calendar-header"},b={class:"lich-ta-calendar-title"},$={class:"lich-ta-calendar-month-year"},L={class:"lich-ta-calendar-canchi"},M={class:"lich-ta-calendar-weekdays"},x={class:"lich-ta-calendar-grid"},T=["tabindex","onClick","onKeydown"],F={class:"solar-day"},Y={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"},theme:{default:"classic"}},emits:["select"],setup(c,{emit:y}){const t=c,r=e.ref(t.month),o=e.ref(t.year),i=e.ref(null),k=e.computed(()=>t.selectedDate!==void 0?t.selectedDate:i.value);e.watch(()=>t.month,n=>{r.value=n}),e.watch(()=>t.year,n=>{o.value=n});const u=e.computed(()=>m.getYearDetails(o.value)),s=y,p=e.computed(()=>m.t(t.locale).weekDays),_=e.computed(()=>m.t(t.locale).solarMonthNames),N=e.computed(()=>m.getCalendarGrid(r.value,o.value,k.value));function S(){r.value===1?(r.value=12,o.value-=1):r.value-=1}function V(){r.value===12?(r.value=1,o.value+=1):r.value+=1}function E(n){t.selectedDate===void 0&&(i.value=n.solar),s("select",n.solar,n.lunar)}function C(n,D){(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),E(D))}return(n,D)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["lich-ta-calendar",`lichta-theme-${t.theme}`])},[e.createElementVNode("div",w,[e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng trước",onClick:S},"◀"),e.createElementVNode("div",b,[e.createElementVNode("span",$,e.toDisplayString(_.value[r.value-1])+", "+e.toDisplayString(o.value),1),e.createElementVNode("span",L,e.toDisplayString(u.value.can)+" "+e.toDisplayString(u.value.chi),1)]),e.createElementVNode("button",{class:"lich-ta-calendar-nav","aria-label":"Tháng sau",onClick:V},"▶")]),e.createElementVNode("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.value,a=>(e.openBlock(),e.createElementBlock("div",{key:a,class:"lich-ta-calendar-weekday"},e.toDisplayString(a),1))),128))]),e.createElementVNode("div",x,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,(a,B)=>(e.openBlock(),e.createElementBlock("button",{key:B,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:f=>E(a),onKeydown:f=>C(f,a)},[e.createElementVNode("span",F,e.toDisplayString(a.solar.getDate()),1),t.showLunar?(e.openBlock(),e.createElementBlock("span",Y,[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,T))),128))]),n.$slots.default?(e.openBlock(),e.createElementBlock("div",z,[e.renderSlot(n.$slots,"default")])):e.createCommentVNode("",!0)],2))}}),P=["disabled","placeholder","value","aria-expanded"],G={key:0,class:"lich-ta-datepicker-popover",role:"dialog"},O={class:"lich-ta-datepicker-calendar"},j={class:"lich-ta-datepicker-calendar-header"},q={class:"lich-ta-datepicker-calendar-title"},I={class:"lich-ta-datepicker-calendar-month-year"},A={class:"lich-ta-datepicker-calendar-canchi"},U={class:"lich-ta-datepicker-calendar-weekdays"},H={class:"lich-ta-datepicker-calendar-grid"},J=["tabindex","onClick"],Q={class:"solar-day"},R={key:0,class:"lunar-day"},W=e.defineComponent({__name:"DatePicker",props:{value:{default:null},placeholder:{default:"Chọn ngày"},locale:{default:"vi"},theme:{default:"classic"},showLunar:{type:Boolean,default:!0},format:{type:Function,default:c=>{const y=String(c.getDate()).padStart(2,"0"),t=String(c.getMonth()+1).padStart(2,"0");return`${y}/${t}/${c.getFullYear()}`}},disabled:{type:Boolean,default:!1}},emits:["select"],setup(c,{emit:y}){const t=c,r=y,o=e.ref(t.value),i=e.ref(!1),k=e.ref(null),u=o.value??new Date,s=e.ref(u.getMonth()+1),p=e.ref(u.getFullYear());e.watch(()=>t.value,d=>{const g=d??null;o.value=g,g&&(s.value=g.getMonth()+1,p.value=g.getFullYear())});const _=e.computed(()=>m.getYearDetails(p.value)),N=e.computed(()=>m.t(t.locale).weekDays),S=e.computed(()=>m.t(t.locale).solarMonthNames),V=e.computed(()=>m.getCalendarGrid(s.value,p.value,o.value)),E=e.computed(()=>o.value?t.format(o.value):"");function C(){t.disabled||(i.value=!i.value)}function n(){s.value===1?(s.value=12,p.value-=1):s.value-=1}function D(){s.value===12?(s.value=1,p.value+=1):s.value+=1}function a(d){o.value=d.solar,i.value=!1,r("select",d.solar,d.lunar)}function B(d){k.value&&!k.value.contains(d.target)&&(i.value=!1)}function f(d){d.key==="Escape"&&(i.value=!1)}return e.onMounted(()=>{document.addEventListener("mousedown",B),document.addEventListener("keydown",f)}),e.onBeforeUnmount(()=>{document.removeEventListener("mousedown",B),document.removeEventListener("keydown",f)}),(d,g)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:k,class:e.normalizeClass(["lich-ta-datepicker",`lichta-theme-${c.theme}`])},[e.createElementVNode("input",{type:"text",class:"lich-ta-datepicker-input",readonly:"",disabled:c.disabled,placeholder:c.placeholder,value:E.value,"aria-haspopup":"dialog","aria-expanded":i.value,onClick:C},null,8,P),i.value?(e.openBlock(),e.createElementBlock("div",G,[e.createElementVNode("div",O,[e.createElementVNode("div",j,[e.createElementVNode("button",{type:"button",class:"lich-ta-datepicker-calendar-nav","aria-label":"Tháng trước",onClick:n}," ◀ "),e.createElementVNode("div",q,[e.createElementVNode("span",I,e.toDisplayString(S.value[s.value-1])+", "+e.toDisplayString(p.value),1),e.createElementVNode("span",A,e.toDisplayString(_.value.can)+" "+e.toDisplayString(_.value.chi),1)]),e.createElementVNode("button",{type:"button",class:"lich-ta-datepicker-calendar-nav","aria-label":"Tháng sau",onClick:D}," ▶ ")]),e.createElementVNode("div",U,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(N.value,l=>(e.openBlock(),e.createElementBlock("div",{key:l,class:"lich-ta-datepicker-calendar-weekday"},e.toDisplayString(l),1))),128))]),e.createElementVNode("div",H,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,(l,X)=>(e.openBlock(),e.createElementBlock("button",{key:X,type:"button",class:e.normalizeClass(["lich-ta-datepicker-calendar-day",{"is-today":l.isToday,"is-selected":l.isSelected,"is-other-month":!l.isCurrentMonth,"is-first-lunar":l.lunar.day===1}]),tabindex:l.isCurrentMonth?0:-1,onClick:Z=>a(l)},[e.createElementVNode("span",Q,e.toDisplayString(l.solar.getDate()),1),c.showLunar?(e.openBlock(),e.createElementBlock("span",R,[l.lunar.day===1?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(l.lunar.day)+"/"+e.toDisplayString(l.lunar.month)+e.toDisplayString(l.lunar.isLeap?"*":""),1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(l.lunar.day),1)],64))])):e.createCommentVNode("",!0)],10,J))),128))])])])):e.createCommentVNode("",!0)],2))}});h.Calendar=K,h.DatePicker=W,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lichta/vue",
-  "version": "2.0.1",
+  "version": "2.1.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.1.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"