@lichta/vue 2.1.0 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -3
- package/dist/Calendar.vue.d.ts +9 -1
- package/dist/DatePicker.vue.d.ts +6 -1
- package/dist/lichta-vue.es.js +151 -134
- package/dist/lichta-vue.umd.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @lichta/vue
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@lichta/vue)
|
|
4
|
+
[](https://www.npmjs.com/package/@lichta/core)
|
|
5
5
|
|
|
6
6
|
🚀 **[Demo trực tiếp](https://lichta.zeneo.app/)**
|
|
7
7
|
|
|
@@ -44,6 +44,8 @@ function onSelect(date: Date, lunar: LunarDate) {
|
|
|
44
44
|
| `year` | `number` | Năm hiện tại | Năm hiển thị ban đầu |
|
|
45
45
|
| `showLunar` | `boolean` | `true` | Hiện ngày âm lịch dưới ngày dương |
|
|
46
46
|
| `locale` | `'vi' \| 'en' \| 'ja' \| 'ko'` | `'vi'` | Ngôn ngữ nhãn thứ trong tuần |
|
|
47
|
+
| `firstDayOfWeek` | `0 \| 1` | `0` | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai |
|
|
48
|
+
| `showWeekNumber` | `boolean` | `false` | Hiện số tuần (ISO-8601) ở đầu mỗi hàng |
|
|
47
49
|
| `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện lịch |
|
|
48
50
|
|
|
49
51
|
## Events
|
|
@@ -51,8 +53,9 @@ function onSelect(date: Date, lunar: LunarDate) {
|
|
|
51
53
|
| Event | Payload | Mô tả |
|
|
52
54
|
|---|---|---|
|
|
53
55
|
| `select` | `(date: Date, lunar: LunarDate)` | Bắn ra khi người dùng chọn 1 ngày |
|
|
56
|
+
| `month-change` | `(month: number, year: number)` | Bắn ra khi điều hướng tháng qua nút prev/next trong header |
|
|
54
57
|
|
|
55
|
-
> 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`)
|
|
58
|
+
> 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).
|
|
56
59
|
|
|
57
60
|
## DatePicker
|
|
58
61
|
|
|
@@ -85,6 +88,7 @@ function onSelect(date, lunar) {
|
|
|
85
88
|
| `value` | `Date \| null` | `null` | Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) |
|
|
86
89
|
| `placeholder` | `string` | `'Chọn ngày'` | Placeholder khi chưa chọn ngày |
|
|
87
90
|
| `locale` | `'vi' \| 'en' \| 'ja' \| 'ko'` | `'vi'` | Ngôn ngữ hiển thị trong popover |
|
|
91
|
+
| `firstDayOfWeek` | `0 \| 1` | `0` | Ngày bắt đầu tuần: `0` = Chủ Nhật, `1` = Thứ Hai |
|
|
88
92
|
| `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện input + popover |
|
|
89
93
|
| `showLunar` | `boolean` | `true` | Hiện ngày âm lịch trong popover |
|
|
90
94
|
| `format` | `(date: Date) => string` | `dd/MM/yyyy` | Hàm format ngày hiển thị trên input |
|
|
@@ -93,6 +97,7 @@ function onSelect(date, lunar) {
|
|
|
93
97
|
| Event | Payload | Mô tả |
|
|
94
98
|
|---|---|---|
|
|
95
99
|
| `select` | `(date: Date, lunar: LunarDate)` | Bắn khi chọn ngày trong popover |
|
|
100
|
+
| `month-change` | `(month: number, year: number)` | Bắn khi điều hướng tháng qua nút prev/next trong popover |
|
|
96
101
|
|
|
97
102
|
Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
|
|
98
103
|
|
package/dist/Calendar.vue.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type LunarDate, type Locale, type CalendarDayCell } from '@lichta/core';
|
|
1
|
+
import { type LunarDate, type Locale, type CalendarDayCell, type FirstDayOfWeek } from '@lichta/core';
|
|
2
2
|
interface Props {
|
|
3
3
|
month?: number;
|
|
4
4
|
year?: number;
|
|
@@ -6,6 +6,10 @@ interface Props {
|
|
|
6
6
|
selectedDate?: Date | null;
|
|
7
7
|
showLunar?: boolean;
|
|
8
8
|
locale?: Locale;
|
|
9
|
+
/** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
|
|
10
|
+
firstDayOfWeek?: FirstDayOfWeek;
|
|
11
|
+
/** Hiển thị số tuần (ISO-8601) ở đầu mỗi hàng */
|
|
12
|
+
showWeekNumber?: boolean;
|
|
9
13
|
theme?: 'classic' | 'glass';
|
|
10
14
|
}
|
|
11
15
|
export type DayCellData = CalendarDayCell;
|
|
@@ -15,14 +19,18 @@ type __VLS_Slots = {} & {
|
|
|
15
19
|
};
|
|
16
20
|
declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
17
21
|
select: (date: Date, lunar: LunarDate) => any;
|
|
22
|
+
"month-change": (month: number, year: number) => any;
|
|
18
23
|
}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
|
|
19
24
|
onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
|
|
25
|
+
"onMonth-change"?: ((month: number, year: number) => any) | undefined;
|
|
20
26
|
}>, {
|
|
21
27
|
month: number;
|
|
22
28
|
year: number;
|
|
23
29
|
selectedDate: Date | null;
|
|
24
30
|
showLunar: boolean;
|
|
25
31
|
locale: Locale;
|
|
32
|
+
firstDayOfWeek: FirstDayOfWeek;
|
|
33
|
+
showWeekNumber: boolean;
|
|
26
34
|
theme: "classic" | "glass";
|
|
27
35
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
28
36
|
declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
|
package/dist/DatePicker.vue.d.ts
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
|
-
import { type LunarDate, type Locale } from '@lichta/core';
|
|
1
|
+
import { type LunarDate, type Locale, type FirstDayOfWeek } from '@lichta/core';
|
|
2
2
|
interface Props {
|
|
3
3
|
/** Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) */
|
|
4
4
|
value?: Date | null;
|
|
5
5
|
placeholder?: string;
|
|
6
6
|
locale?: Locale;
|
|
7
|
+
/** Ngày bắt đầu tuần: 0 = Chủ Nhật (mặc định), 1 = Thứ Hai */
|
|
8
|
+
firstDayOfWeek?: FirstDayOfWeek;
|
|
7
9
|
theme?: 'classic' | 'glass';
|
|
8
10
|
showLunar?: boolean;
|
|
9
11
|
format?: (date: Date) => string;
|
|
@@ -11,11 +13,14 @@ interface Props {
|
|
|
11
13
|
}
|
|
12
14
|
declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
|
|
13
15
|
select: (date: Date, lunar: LunarDate) => any;
|
|
16
|
+
"month-change": (month: number, year: number) => any;
|
|
14
17
|
}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
|
|
15
18
|
onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
|
|
19
|
+
"onMonth-change"?: ((month: number, year: number) => any) | undefined;
|
|
16
20
|
}>, {
|
|
17
21
|
showLunar: boolean;
|
|
18
22
|
locale: Locale;
|
|
23
|
+
firstDayOfWeek: FirstDayOfWeek;
|
|
19
24
|
theme: "classic" | "glass";
|
|
20
25
|
value: Date | null;
|
|
21
26
|
placeholder: string;
|
package/dist/lichta-vue.es.js
CHANGED
|
@@ -1,12 +1,19 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import { getYearDetails as
|
|
3
|
-
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 = {
|
|
1
|
+
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";
|
|
2
|
+
import { getYearDetails as F, getWeekDayLabels as K, t as V, getCalendarGrid as P } from "@lichta/core";
|
|
3
|
+
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 = {
|
|
4
|
+
key: 0,
|
|
5
|
+
class: "lich-ta-calendar-week-number",
|
|
6
|
+
"aria-hidden": "true"
|
|
7
|
+
}, R = { class: "lich-ta-calendar-grid" }, X = {
|
|
8
|
+
key: 0,
|
|
9
|
+
class: "lich-ta-calendar-week-number"
|
|
10
|
+
}, Z = ["tabindex", "onClick", "onKeydown"], ee = { class: "solar-day" }, ae = {
|
|
4
11
|
key: 0,
|
|
5
12
|
class: "lunar-day"
|
|
6
|
-
},
|
|
13
|
+
}, te = {
|
|
7
14
|
key: 0,
|
|
8
15
|
class: "lich-ta-calendar-footer"
|
|
9
|
-
}, pe = /* @__PURE__ */
|
|
16
|
+
}, pe = /* @__PURE__ */ T({
|
|
10
17
|
__name: "Calendar",
|
|
11
18
|
props: {
|
|
12
19
|
month: { default: (/* @__PURE__ */ new Date()).getMonth() + 1 },
|
|
@@ -14,211 +21,221 @@ const U = { class: "lich-ta-calendar-header" }, j = { class: "lich-ta-calendar-t
|
|
|
14
21
|
selectedDate: { default: void 0 },
|
|
15
22
|
showLunar: { type: Boolean, default: !0 },
|
|
16
23
|
locale: { default: "vi" },
|
|
24
|
+
firstDayOfWeek: { default: 0 },
|
|
25
|
+
showWeekNumber: { type: Boolean, default: !1 },
|
|
17
26
|
theme: { default: "classic" }
|
|
18
27
|
},
|
|
19
|
-
emits: ["select"],
|
|
20
|
-
setup(
|
|
21
|
-
const e =
|
|
22
|
-
() => e.selectedDate !== void 0 ? e.selectedDate :
|
|
28
|
+
emits: ["select", "month-change"],
|
|
29
|
+
setup(v, { emit: g }) {
|
|
30
|
+
const e = v, i = _(e.month), c = _(e.year), m = _(null), b = k(
|
|
31
|
+
() => e.selectedDate !== void 0 ? e.selectedDate : m.value
|
|
23
32
|
);
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}),
|
|
27
|
-
|
|
33
|
+
B(() => e.month, (a) => {
|
|
34
|
+
i.value = a;
|
|
35
|
+
}), B(() => e.year, (a) => {
|
|
36
|
+
c.value = a;
|
|
28
37
|
});
|
|
29
|
-
const
|
|
30
|
-
() =>
|
|
38
|
+
const D = k(() => F(c.value)), d = g, h = k(() => K(e.locale, e.firstDayOfWeek)), M = k(() => V(e.locale).solarMonthNames), Y = k(
|
|
39
|
+
() => P(i.value, c.value, b.value, e.firstDayOfWeek)
|
|
31
40
|
);
|
|
32
|
-
function
|
|
33
|
-
|
|
41
|
+
function E() {
|
|
42
|
+
const a = i.value === 1 ? 12 : i.value - 1, f = i.value === 1 ? c.value - 1 : c.value;
|
|
43
|
+
i.value = a, c.value = f, d("month-change", a, f);
|
|
34
44
|
}
|
|
35
|
-
function
|
|
36
|
-
|
|
45
|
+
function S() {
|
|
46
|
+
const a = i.value === 12 ? 1 : i.value + 1, f = i.value === 12 ? c.value + 1 : c.value;
|
|
47
|
+
i.value = a, c.value = f, d("month-change", a, f);
|
|
37
48
|
}
|
|
38
|
-
function
|
|
39
|
-
e.selectedDate === void 0 && (
|
|
49
|
+
function L(a) {
|
|
50
|
+
e.selectedDate === void 0 && (m.value = a.solar), d("select", a.solar, a.lunar);
|
|
40
51
|
}
|
|
41
|
-
function
|
|
42
|
-
(
|
|
52
|
+
function O(a, f) {
|
|
53
|
+
(a.key === "Enter" || a.key === " ") && (a.preventDefault(), L(f));
|
|
43
54
|
}
|
|
44
|
-
return (
|
|
45
|
-
class:
|
|
55
|
+
return (a, f) => (l(), s("div", {
|
|
56
|
+
class: N(["lich-ta-calendar", `lichta-theme-${e.theme}`, { "lich-ta-calendar--with-week-number": e.showWeekNumber }])
|
|
46
57
|
}, [
|
|
47
|
-
|
|
48
|
-
|
|
58
|
+
t("div", U, [
|
|
59
|
+
t("button", {
|
|
49
60
|
class: "lich-ta-calendar-nav",
|
|
50
61
|
"aria-label": "Tháng trước",
|
|
51
|
-
onClick:
|
|
62
|
+
onClick: E
|
|
52
63
|
}, "◀"),
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
64
|
+
t("div", j, [
|
|
65
|
+
t("span", q, n(M.value[i.value - 1]) + ", " + n(c.value), 1),
|
|
66
|
+
t("span", H, n(D.value.can) + " " + n(D.value.chi), 1)
|
|
56
67
|
]),
|
|
57
|
-
|
|
68
|
+
t("button", {
|
|
58
69
|
class: "lich-ta-calendar-nav",
|
|
59
70
|
"aria-label": "Tháng sau",
|
|
60
|
-
onClick:
|
|
71
|
+
onClick: S
|
|
61
72
|
}, "▶")
|
|
62
73
|
]),
|
|
63
|
-
|
|
64
|
-
(l(
|
|
65
|
-
|
|
74
|
+
t("div", J, [
|
|
75
|
+
e.showWeekNumber ? (l(), s("div", Q)) : w("", !0),
|
|
76
|
+
(l(!0), s(p, null, x(h.value, (o) => (l(), s("div", {
|
|
77
|
+
key: o,
|
|
66
78
|
class: "lich-ta-calendar-weekday"
|
|
67
|
-
},
|
|
79
|
+
}, n(o), 1))), 128))
|
|
68
80
|
]),
|
|
69
|
-
|
|
70
|
-
(l(!0), s(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
"
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
81
|
+
t("div", R, [
|
|
82
|
+
(l(!0), s(p, null, x(Y.value, (o, $) => (l(), s(p, { key: $ }, [
|
|
83
|
+
e.showWeekNumber && $ % 7 === 0 ? (l(), s("div", X, n(o.weekNumber), 1)) : w("", !0),
|
|
84
|
+
t("button", {
|
|
85
|
+
class: N(["lich-ta-calendar-day", {
|
|
86
|
+
"is-today": o.isToday,
|
|
87
|
+
"is-selected": o.isSelected,
|
|
88
|
+
"is-other-month": !o.isCurrentMonth,
|
|
89
|
+
"is-first-lunar": o.lunar.day === 1
|
|
90
|
+
}]),
|
|
91
|
+
tabindex: o.isCurrentMonth ? 0 : -1,
|
|
92
|
+
onClick: (C) => L(o),
|
|
93
|
+
onKeydown: (C) => O(C, o)
|
|
94
|
+
}, [
|
|
95
|
+
t("span", ee, n(o.solar.getDate()), 1),
|
|
96
|
+
e.showLunar ? (l(), s("span", ae, [
|
|
97
|
+
o.lunar.day === 1 ? (l(), s(p, { key: 0 }, [
|
|
98
|
+
W(n(o.lunar.day) + "/" + n(o.lunar.month) + n(o.lunar.isLeap ? "*" : ""), 1)
|
|
99
|
+
], 64)) : (l(), s(p, { key: 1 }, [
|
|
100
|
+
W(n(o.lunar.day), 1)
|
|
101
|
+
], 64))
|
|
102
|
+
])) : w("", !0)
|
|
103
|
+
], 42, Z)
|
|
104
|
+
], 64))), 128))
|
|
91
105
|
]),
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
])) :
|
|
106
|
+
a.$slots.default ? (l(), s("div", te, [
|
|
107
|
+
I(a.$slots, "default")
|
|
108
|
+
])) : w("", !0)
|
|
95
109
|
], 2));
|
|
96
110
|
}
|
|
97
|
-
}),
|
|
111
|
+
}), ne = ["disabled", "placeholder", "value", "aria-expanded"], le = {
|
|
98
112
|
key: 0,
|
|
99
113
|
class: "lich-ta-datepicker-popover",
|
|
100
114
|
role: "dialog"
|
|
101
|
-
},
|
|
115
|
+
}, 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 = {
|
|
102
116
|
key: 0,
|
|
103
117
|
class: "lunar-day"
|
|
104
|
-
},
|
|
118
|
+
}, _e = /* @__PURE__ */ T({
|
|
105
119
|
__name: "DatePicker",
|
|
106
120
|
props: {
|
|
107
121
|
value: { default: null },
|
|
108
122
|
placeholder: { default: "Chọn ngày" },
|
|
109
123
|
locale: { default: "vi" },
|
|
124
|
+
firstDayOfWeek: { default: 0 },
|
|
110
125
|
theme: { default: "classic" },
|
|
111
126
|
showLunar: { type: Boolean, default: !0 },
|
|
112
|
-
format: { type: Function, default: (
|
|
113
|
-
const
|
|
114
|
-
return `${
|
|
127
|
+
format: { type: Function, default: (v) => {
|
|
128
|
+
const g = String(v.getDate()).padStart(2, "0"), e = String(v.getMonth() + 1).padStart(2, "0");
|
|
129
|
+
return `${g}/${e}/${v.getFullYear()}`;
|
|
115
130
|
} },
|
|
116
131
|
disabled: { type: Boolean, default: !1 }
|
|
117
132
|
},
|
|
118
|
-
emits: ["select"],
|
|
119
|
-
setup(
|
|
120
|
-
const e =
|
|
121
|
-
|
|
133
|
+
emits: ["select", "month-change"],
|
|
134
|
+
setup(v, { emit: g }) {
|
|
135
|
+
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());
|
|
136
|
+
B(
|
|
122
137
|
() => e.value,
|
|
123
|
-
(
|
|
124
|
-
const
|
|
125
|
-
|
|
138
|
+
(r) => {
|
|
139
|
+
const y = r ?? null;
|
|
140
|
+
c.value = y, y && (d.value = y.getMonth() + 1, h.value = y.getFullYear());
|
|
126
141
|
}
|
|
127
142
|
);
|
|
128
|
-
const
|
|
129
|
-
function
|
|
130
|
-
e.disabled || (
|
|
143
|
+
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) : "");
|
|
144
|
+
function O() {
|
|
145
|
+
e.disabled || (m.value = !m.value);
|
|
131
146
|
}
|
|
132
|
-
function
|
|
133
|
-
|
|
147
|
+
function a() {
|
|
148
|
+
const r = d.value === 1 ? 12 : d.value - 1, y = d.value === 1 ? h.value - 1 : h.value;
|
|
149
|
+
d.value = r, h.value = y, i("month-change", r, y);
|
|
134
150
|
}
|
|
135
|
-
function
|
|
136
|
-
|
|
151
|
+
function f() {
|
|
152
|
+
const r = d.value === 12 ? 1 : d.value + 1, y = d.value === 12 ? h.value + 1 : h.value;
|
|
153
|
+
d.value = r, h.value = y, i("month-change", r, y);
|
|
137
154
|
}
|
|
138
|
-
function
|
|
139
|
-
|
|
155
|
+
function o(r) {
|
|
156
|
+
c.value = r.solar, m.value = !1, i("select", r.solar, r.lunar);
|
|
140
157
|
}
|
|
141
|
-
function
|
|
142
|
-
|
|
158
|
+
function $(r) {
|
|
159
|
+
b.value && !b.value.contains(r.target) && (m.value = !1);
|
|
143
160
|
}
|
|
144
|
-
function
|
|
145
|
-
|
|
161
|
+
function C(r) {
|
|
162
|
+
r.key === "Escape" && (m.value = !1);
|
|
146
163
|
}
|
|
147
164
|
return z(() => {
|
|
148
|
-
document.addEventListener("mousedown",
|
|
165
|
+
document.addEventListener("mousedown", $), document.addEventListener("keydown", C);
|
|
149
166
|
}), A(() => {
|
|
150
|
-
document.removeEventListener("mousedown",
|
|
151
|
-
}), (
|
|
167
|
+
document.removeEventListener("mousedown", $), document.removeEventListener("keydown", C);
|
|
168
|
+
}), (r, y) => (l(), s("div", {
|
|
152
169
|
ref_key: "rootEl",
|
|
153
|
-
ref:
|
|
154
|
-
class:
|
|
170
|
+
ref: b,
|
|
171
|
+
class: N(["lich-ta-datepicker", `lichta-theme-${v.theme}`])
|
|
155
172
|
}, [
|
|
156
|
-
|
|
173
|
+
t("input", {
|
|
157
174
|
type: "text",
|
|
158
175
|
class: "lich-ta-datepicker-input",
|
|
159
176
|
readonly: "",
|
|
160
|
-
disabled:
|
|
161
|
-
placeholder:
|
|
162
|
-
value:
|
|
177
|
+
disabled: v.disabled,
|
|
178
|
+
placeholder: v.placeholder,
|
|
179
|
+
value: L.value,
|
|
163
180
|
"aria-haspopup": "dialog",
|
|
164
|
-
"aria-expanded":
|
|
165
|
-
onClick:
|
|
166
|
-
}, null, 8,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
181
|
+
"aria-expanded": m.value,
|
|
182
|
+
onClick: O
|
|
183
|
+
}, null, 8, ne),
|
|
184
|
+
m.value ? (l(), s("div", le, [
|
|
185
|
+
t("div", se, [
|
|
186
|
+
t("div", oe, [
|
|
187
|
+
t("button", {
|
|
171
188
|
type: "button",
|
|
172
189
|
class: "lich-ta-datepicker-calendar-nav",
|
|
173
190
|
"aria-label": "Tháng trước",
|
|
174
|
-
onClick:
|
|
191
|
+
onClick: a
|
|
175
192
|
}, " ◀ "),
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
193
|
+
t("div", ce, [
|
|
194
|
+
t("span", re, n(E.value[d.value - 1]) + ", " + n(h.value), 1),
|
|
195
|
+
t("span", ie, n(M.value.can) + " " + n(M.value.chi), 1)
|
|
179
196
|
]),
|
|
180
|
-
|
|
197
|
+
t("button", {
|
|
181
198
|
type: "button",
|
|
182
199
|
class: "lich-ta-datepicker-calendar-nav",
|
|
183
200
|
"aria-label": "Tháng sau",
|
|
184
|
-
onClick:
|
|
201
|
+
onClick: f
|
|
185
202
|
}, " ▶ ")
|
|
186
203
|
]),
|
|
187
|
-
|
|
188
|
-
(l(!0), s(
|
|
189
|
-
key:
|
|
204
|
+
t("div", de, [
|
|
205
|
+
(l(!0), s(p, null, x(Y.value, (u) => (l(), s("div", {
|
|
206
|
+
key: u,
|
|
190
207
|
class: "lich-ta-datepicker-calendar-weekday"
|
|
191
|
-
},
|
|
208
|
+
}, n(u), 1))), 128))
|
|
192
209
|
]),
|
|
193
|
-
|
|
194
|
-
(l(!0), s(
|
|
195
|
-
key:
|
|
210
|
+
t("div", ue, [
|
|
211
|
+
(l(!0), s(p, null, x(S.value, (u, G) => (l(), s("button", {
|
|
212
|
+
key: G,
|
|
196
213
|
type: "button",
|
|
197
|
-
class:
|
|
198
|
-
"is-today":
|
|
199
|
-
"is-selected":
|
|
200
|
-
"is-other-month": !
|
|
201
|
-
"is-first-lunar":
|
|
214
|
+
class: N(["lich-ta-datepicker-calendar-day", {
|
|
215
|
+
"is-today": u.isToday,
|
|
216
|
+
"is-selected": u.isSelected,
|
|
217
|
+
"is-other-month": !u.isCurrentMonth,
|
|
218
|
+
"is-first-lunar": u.lunar.day === 1
|
|
202
219
|
}]),
|
|
203
|
-
tabindex:
|
|
204
|
-
onClick: (
|
|
220
|
+
tabindex: u.isCurrentMonth ? 0 : -1,
|
|
221
|
+
onClick: (me) => o(u)
|
|
205
222
|
}, [
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
], 64)) : (l(), s(
|
|
211
|
-
|
|
223
|
+
t("span", ve, n(u.solar.getDate()), 1),
|
|
224
|
+
v.showLunar ? (l(), s("span", ye, [
|
|
225
|
+
u.lunar.day === 1 ? (l(), s(p, { key: 0 }, [
|
|
226
|
+
W(n(u.lunar.day) + "/" + n(u.lunar.month) + n(u.lunar.isLeap ? "*" : ""), 1)
|
|
227
|
+
], 64)) : (l(), s(p, { key: 1 }, [
|
|
228
|
+
W(n(u.lunar.day), 1)
|
|
212
229
|
], 64))
|
|
213
|
-
])) :
|
|
214
|
-
], 10,
|
|
230
|
+
])) : w("", !0)
|
|
231
|
+
], 10, he))), 128))
|
|
215
232
|
])
|
|
216
233
|
])
|
|
217
|
-
])) :
|
|
234
|
+
])) : w("", !0)
|
|
218
235
|
], 2));
|
|
219
236
|
}
|
|
220
237
|
});
|
|
221
238
|
export {
|
|
222
239
|
pe as Calendar,
|
|
223
|
-
|
|
240
|
+
_e as DatePicker
|
|
224
241
|
};
|
package/dist/lichta-vue.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lichta/vue",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "Vue components for LichTa",
|
|
5
5
|
"author": "Zeforc Labs | Stridev",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"LICENSE"
|
|
21
21
|
],
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@lichta/core": "2.
|
|
23
|
+
"@lichta/core": "2.2.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
26
26
|
"vue": "^3.0.0"
|