@lichta/svelte 2.0.0 → 2.1.0

package/README.md

@@ -1,9 +1,14 @@
 # @lichta/svelte
 
 [![npm version](https://img.shields.io/npm/v/@lichta/svelte.svg)](https://www.npmjs.com/package/@lichta/svelte)
+[![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`/`Formatter` (lịch tháng có ngày âm lịch) cho Svelte 5, đóng gói trên [`@lichta/core`](https://www.npmjs.com/package/@lichta/core).
 
+Package này gồm 3 component: `Calendar` (lịch tháng), `Formatter` (hiển thị ngày âm cho 1 ngày cụ thể), `DatePicker` (input + popover chọn ngày, dựng trên `Calendar`).
+
 Khác với `@lichta/react`/`@lichta/vue`, package này **re-export toàn bộ API của `@lichta/core`** (`LichTa`, `getYearDetails`, `formatTraditional`, `t`, ...) — bạn không cần cài `@lichta/core` riêng, chỉ cần import thẳng từ `@lichta/svelte`.
 
 ## Cài đặt
@@ -70,6 +75,35 @@ Bạn cần cài `svelte` (peer dependency, `^5.0.0`) nếu dự án chưa có.
 | `date`     | `Date`    | `new Date()` | Ngày dương lịch cần hiển thị     |
 | `children` | `Snippet` | —            | Nội dung tùy chỉnh (render prop) |
 
+### `DatePicker`
+
+```svelte
+<script>
+	import { DatePicker } from '@lichta/svelte';
+	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)
+</script>
+
+<DatePicker theme="glass" locale="vi" onSelect={(date, lunar) => console.log(date, lunar)} />
+```
+
+> ⚠️ 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.
+
+| 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) |
+| `onSelect`  | `(date: Date, lunar: LunarDate) => void` | —              | Callback khi chọn ngày trong popover                                    |
+| `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                                                       |
+
+Popover tự đóng khi: chọn xong 1 ngày, click ra ngoài, hoặc nhấn phím `Escape`.
+
 ## Dùng logic thuần (không cần component)
 
 Vì `@lichta/svelte` re-export toàn bộ `@lichta/core`, bạn có thể import thẳng logic tính toán từ đây thay vì cài thêm `@lichta/core`:

package/dist/components/Calendar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { LichTa, getYearDetails } from '@lichta/core';
-	import type { LunarDate } from '@lichta/core';
+	import { getYearDetails, getCalendarGrid, t } from '@lichta/core';
+	import type { LunarDate, CalendarDayCell } from '@lichta/core';
 	import type { Snippet } from 'svelte';
 	import { untrack } from 'svelte';
 
@@ -9,13 +9,7 @@
 	/**
 	 * Dữ liệu cho mỗi ô ngày trong lưới lịch
 	 */
-	interface DayCellData {
-		solar: Date;
-		lunar: LunarDate;
-		isToday: boolean;
-		isSelected: boolean;
-		isCurrentMonth: boolean;
-	}
+	type DayCellData = CalendarDayCell;
 
 	interface Props {
 		/** Tháng hiển thị (1-12). Mặc định: tháng hiện tại */
@@ -66,109 +60,16 @@
 	});
 
 	// Tên thứ trong tuần
-	const weekDayLabels = $derived(
-		locale === 'vi'
-			? ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7']
-			: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
-	);
+	const weekDayLabels = $derived(t(locale).weekDays);
 
-	// Tên tháng hiển thị
-	const monthNames = [
-		'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'
-	];
+	// Tên tháng dương lịch cho phần header điều hướng
+	const monthNames = $derived(t(locale).solarMonthNames);
 
 	// Can Chi năm hiển thị
 	let yearInfo = $derived(getYearDetails(currentYear));
 
-	// Ngày hôm nay
-	const today = new Date();
-	const todayStr = `${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()}`;
-
 	// Tính grid lịch 6x7 = 42 ô
-	let calendarGrid = $derived.by((): DayCellData[] => {
-		const grid: DayCellData[] = [];
-
-		// Ngày đầu tiên của tháng
-		const firstDay = new Date(currentYear, currentMonth - 1, 1);
-		// Thứ của ngày đầu tiên (0=CN, 1=T2, ...)
-		const startDayOfWeek = firstDay.getDay();
-		// Số ngày trong tháng
-		const daysInMonth = new Date(currentYear, currentMonth, 0).getDate();
-
-		// Padding ngày tháng trước
-		const prevMonthDays = new Date(currentYear, currentMonth - 1, 0).getDate();
-		for (let i = startDayOfWeek - 1; i >= 0; i--) {
-			const d = prevMonthDays - i;
-			const m = currentMonth - 1 <= 0 ? 12 : currentMonth - 1;
-			const y = currentMonth - 1 <= 0 ? currentYear - 1 : currentYear;
-			const solar = new Date(y, m - 1, d);
-			const lunar = LichTa.toLunar(d, m, y);
-			const dateStr = `${y}-${m}-${d}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: false
-			});
-		}
-
-		// Ngày trong tháng hiện tại
-		for (let d = 1; d <= daysInMonth; d++) {
-			const solar = new Date(currentYear, currentMonth - 1, d);
-			const lunar = LichTa.toLunar(d, currentMonth, currentYear);
-			const dateStr = `${currentYear}-${currentMonth}-${d}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: true
-			});
-		}
-
-		// Padding ngày tháng sau
-		const remaining = 42 - grid.length;
-		for (let d = 1; d <= remaining; d++) {
-			const m = currentMonth + 1 > 12 ? 1 : currentMonth + 1;
-			const y = currentMonth + 1 > 12 ? currentYear + 1 : currentYear;
-			const solar = new Date(y, m - 1, d);
-			const lunar = LichTa.toLunar(d, m, y);
-			const dateStr = `${y}-${m}-${d}`;
-			const selStr = selectedDate
-				? `${selectedDate.getFullYear()}-${selectedDate.getMonth() + 1}-${selectedDate.getDate()}`
-				: '';
-
-			grid.push({
-				solar,
-				lunar,
-				isToday: dateStr === todayStr,
-				isSelected: dateStr === selStr,
-				isCurrentMonth: false
-			});
-		}
-
-		return grid;
-	});
+	let calendarGrid = $derived(getCalendarGrid(currentMonth, currentYear, selectedDate));
 
 	// Navigation
 	function prevMonth() {
@@ -262,202 +163,3 @@
 		</div>
 	{/if}
 </div>
-
-<style>
-	.lich-ta-calendar {
-		--lichta-primary: #d4a373;
-		--lichta-primary-light: #f5e6d3;
-		--lichta-bg: #fffcf7;
-		--lichta-surface: #ffffff;
-		--lichta-text: #2c1810;
-		--lichta-text-muted: #8b7355;
-		--lichta-text-dim: #c4b5a0;
-		--lichta-border: #e8ddd0;
-		--lichta-today-bg: #d4a373;
-		--lichta-today-text: #ffffff;
-		--lichta-selected-bg: #a0522d;
-		--lichta-selected-text: #ffffff;
-		--lichta-hover-bg: #f5e6d3;
-		--lichta-lunar-text: #b08968;
-		--lichta-first-lunar: #c2185b;
-		--lichta-radius: 8px;
-		--lichta-font: inherit;
-
-		font-family: var(--lichta-font);
-		background: var(--lichta-bg);
-		border: 1px solid var(--lichta-border);
-		border-radius: calc(var(--lichta-radius) * 2);
-		padding: 16px;
-		max-width: 420px;
-		width: 100%;
-		box-sizing: border-box;
-		user-select: none;
-	}
-
-	/* Header */
-	.lich-ta-calendar-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 16px;
-	}
-
-	.lich-ta-calendar-nav {
-		background: none;
-		border: 1px solid var(--lichta-border);
-		border-radius: var(--lichta-radius);
-		width: 36px;
-		height: 36px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		color: var(--lichta-text);
-		font-size: 0.85rem;
-		transition: all 0.15s ease;
-	}
-
-	.lich-ta-calendar-nav:hover {
-		background: var(--lichta-hover-bg);
-		border-color: var(--lichta-primary);
-	}
-
-	.lich-ta-calendar-title {
-		text-align: center;
-	}
-
-	.lich-ta-calendar-month-year {
-		display: block;
-		font-size: 1.1rem;
-		font-weight: 600;
-		color: var(--lichta-text);
-	}
-
-	.lich-ta-calendar-canchi {
-		display: block;
-		font-size: 0.8rem;
-		color: var(--lichta-text-muted);
-		margin-top: 2px;
-	}
-
-	/* Weekdays */
-	.lich-ta-calendar-weekdays {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		margin-bottom: 4px;
-	}
-
-	.lich-ta-calendar-weekday {
-		text-align: center;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: var(--lichta-text-muted);
-		padding: 6px 0;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-	}
-
-	/* Grid */
-	.lich-ta-calendar-grid {
-		display: grid;
-		grid-template-columns: repeat(7, 1fr);
-		gap: 2px;
-	}
-
-	.lich-ta-calendar-day {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-		padding: 6px 2px;
-		min-height: 48px;
-		border: none;
-		border-radius: var(--lichta-radius);
-		background: transparent;
-		cursor: pointer;
-		transition: all 0.15s ease;
-		font-family: inherit;
-	}
-
-	.lich-ta-calendar-day:hover {
-		background: var(--lichta-hover-bg);
-	}
-
-	.lich-ta-calendar-day:focus-visible {
-		outline: 2px solid var(--lichta-primary);
-		outline-offset: 1px;
-	}
-
-	.solar-day {
-		font-size: 0.95rem;
-		font-weight: 500;
-		color: var(--lichta-text);
-		line-height: 1.2;
-	}
-
-	.lunar-day {
-		font-size: 0.65rem;
-		color: var(--lichta-lunar-text);
-		line-height: 1.2;
-		margin-top: 1px;
-	}
-
-	/* States */
-	.is-other-month .solar-day {
-		color: var(--lichta-text-dim);
-	}
-
-	.is-other-month .lunar-day {
-		color: var(--lichta-text-dim);
-	}
-
-	.is-today {
-		background: var(--lichta-today-bg);
-	}
-
-	.is-today .solar-day {
-		color: var(--lichta-today-text);
-		font-weight: 700;
-	}
-
-	.is-today .lunar-day {
-		color: var(--lichta-today-text);
-		opacity: 0.85;
-	}
-
-	.is-today:hover {
-		background: var(--lichta-today-bg);
-		opacity: 0.9;
-	}
-
-	.is-selected {
-		background: var(--lichta-selected-bg);
-	}
-
-	.is-selected .solar-day {
-		color: var(--lichta-selected-text);
-		font-weight: 700;
-	}
-
-	.is-selected .lunar-day {
-		color: var(--lichta-selected-text);
-		opacity: 0.85;
-	}
-
-	.is-first-lunar .lunar-day {
-		color: var(--lichta-first-lunar);
-		font-weight: 600;
-	}
-
-	.is-today.is-first-lunar .lunar-day,
-	.is-selected.is-first-lunar .lunar-day {
-		color: var(--lichta-today-text);
-	}
-
-	/* Footer */
-	.lich-ta-calendar-footer {
-		margin-top: 12px;
-		padding-top: 12px;
-		border-top: 1px solid var(--lichta-border);
-	}
-</style>

package/dist/components/Calendar.svelte.d.ts

@@ -1,16 +1,10 @@
-import type { LunarDate } from '@lichta/core';
+import type { LunarDate, CalendarDayCell } from '@lichta/core';
 import type { Snippet } from 'svelte';
 import type { Locale } from '@lichta/core';
 /**
  * Dữ liệu cho mỗi ô ngày trong lưới lịch
  */
-interface DayCellData {
-    solar: Date;
-    lunar: LunarDate;
-    isToday: boolean;
-    isSelected: boolean;
-    isCurrentMonth: boolean;
-}
+type DayCellData = CalendarDayCell;
 interface Props {
     /** Tháng hiển thị (1-12). Mặc định: tháng hiện tại */
     month?: number;

package/dist/components/DatePicker.svelte

@@ -0,0 +1,184 @@
+<script lang="ts">
+	import { getYearDetails, getCalendarGrid, t } from '@lichta/core';
+	import type { LunarDate, Locale, CalendarDayCell } from '@lichta/core';
+
+	interface Props {
+		/** Ngày đang chọn (uncontrolled — component tự quản lý sau lần mount đầu) */
+		value?: Date | null;
+		/** Gọi khi người dùng chọn 1 ngày trong popover */
+		onSelect?: (date: Date, lunar: LunarDate) => void;
+		placeholder?: string;
+		locale?: Locale;
+		theme?: 'classic' | 'glass';
+		showLunar?: boolean;
+		format?: (date: Date) => string;
+		disabled?: boolean;
+	}
+
+	function defaultFormat(date: Date): string {
+		const dd = String(date.getDate()).padStart(2, '0');
+		const mm = String(date.getMonth() + 1).padStart(2, '0');
+		return `${dd}/${mm}/${date.getFullYear()}`;
+	}
+
+	let {
+		value = null,
+		onSelect,
+		placeholder = 'Chọn ngày',
+		locale = 'vi',
+		theme = 'classic',
+		showLunar = true,
+		format = defaultFormat,
+		disabled = false
+	}: Props = $props();
+
+	// Writable $derived (Svelte 5): mặc định bám theo prop `value`, nhưng có thể
+	// gán lại trực tiếp (xem handleDaySelect) — giá trị gán tay giữ nguyên cho tới
+	// khi `value` đổi thì tính lại từ đầu.
+	let selected = $derived<Date | null>(value ?? null);
+	let isOpen = $state(false);
+	let rootEl: HTMLElement | undefined = $state();
+
+	// State điều hướng tháng/năm hiển thị trong popover, tách khỏi `selected` để
+	// prevMonth()/nextMonth() điều hướng được độc lập (không phụ thuộc ngày đã chọn).
+	const initialAnchor = value ?? new Date();
+	let viewMonth = $state(initialAnchor.getMonth() + 1);
+	let viewYear = $state(initialAnchor.getFullYear());
+
+	// Đồng bộ lại view khi component cha đổi prop `value` từ bên ngoài.
+	$effect(() => {
+		if (value) {
+			viewMonth = value.getMonth() + 1;
+			viewYear = value.getFullYear();
+		}
+	});
+
+	const weekDayLabels = $derived(t(locale).weekDays);
+	const monthNames = $derived(t(locale).solarMonthNames);
+	let yearInfo = $derived(getYearDetails(viewYear));
+	let grid = $derived(getCalendarGrid(viewMonth, viewYear, selected));
+	const displayValue = $derived(selected ? format(selected) : '');
+
+	function toggleOpen() {
+		if (!disabled) isOpen = !isOpen;
+	}
+
+	function prevMonth() {
+		if (viewMonth === 1) {
+			viewMonth = 12;
+			viewYear -= 1;
+		} else {
+			viewMonth -= 1;
+		}
+	}
+
+	function nextMonth() {
+		if (viewMonth === 12) {
+			viewMonth = 1;
+			viewYear += 1;
+		} else {
+			viewMonth += 1;
+		}
+	}
+
+	function handleDaySelect(cell: CalendarDayCell) {
+		selected = cell.solar;
+		isOpen = false;
+		onSelect?.(cell.solar, cell.lunar);
+	}
+
+	function handlePointerDown(event: MouseEvent) {
+		if (rootEl && !rootEl.contains(event.target as Node)) {
+			isOpen = false;
+		}
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') isOpen = false;
+	}
+
+	$effect(() => {
+		if (!isOpen) return;
+		document.addEventListener('mousedown', handlePointerDown);
+		document.addEventListener('keydown', handleKeydown);
+		return () => {
+			document.removeEventListener('mousedown', handlePointerDown);
+			document.removeEventListener('keydown', handleKeydown);
+		};
+	});
+</script>
+
+<div bind:this={rootEl} class={['lich-ta-datepicker', `lichta-theme-${theme}`].join(' ')}>
+	<input
+		type="text"
+		class="lich-ta-datepicker-input"
+		readonly
+		{disabled}
+		{placeholder}
+		value={displayValue}
+		aria-haspopup="dialog"
+		aria-expanded={isOpen}
+		onclick={toggleOpen}
+	/>
+	{#if isOpen}
+		<div class="lich-ta-datepicker-popover" role="dialog">
+			<div class="lich-ta-datepicker-calendar">
+				<div class="lich-ta-datepicker-calendar-header">
+					<button
+						type="button"
+						class="lich-ta-datepicker-calendar-nav"
+						onclick={prevMonth}
+						aria-label="Tháng trước">◀</button
+					>
+					<div class="lich-ta-datepicker-calendar-title">
+						<span class="lich-ta-datepicker-calendar-month-year">
+							{monthNames[viewMonth - 1]}, {viewYear}
+						</span>
+						<span class="lich-ta-datepicker-calendar-canchi">
+							{yearInfo.can}
+							{yearInfo.chi}
+						</span>
+					</div>
+					<button
+						type="button"
+						class="lich-ta-datepicker-calendar-nav"
+						onclick={nextMonth}
+						aria-label="Tháng sau">▶</button
+					>
+				</div>
+
+				<div class="lich-ta-datepicker-calendar-weekdays">
+					{#each weekDayLabels as label (label)}
+						<div class="lich-ta-datepicker-calendar-weekday">{label}</div>
+					{/each}
+				</div>
+
+				<div class="lich-ta-datepicker-calendar-grid">
+					{#each grid as cell (cell.solar.getTime())}
+						<button
+							type="button"
+							class="lich-ta-datepicker-calendar-day"
+							class:is-today={cell.isToday}
+							class:is-selected={cell.isSelected}
+							class:is-other-month={!cell.isCurrentMonth}
+							class:is-first-lunar={cell.lunar.day === 1}
+							tabindex={cell.isCurrentMonth ? 0 : -1}
+							onclick={() => handleDaySelect(cell)}
+						>
+							<span class="solar-day">{cell.solar.getDate()}</span>
+							{#if showLunar}
+								<span class="lunar-day">
+									{#if cell.lunar.day === 1}
+										{cell.lunar.day}/{cell.lunar.month}{cell.lunar.isLeap ? '*' : ''}
+									{:else}
+										{cell.lunar.day}
+									{/if}
+								</span>
+							{/if}
+						</button>
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/components/DatePicker.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { LunarDate, 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;
+    /** Gọi khi người dùng chọn 1 ngày trong popover */
+    onSelect?: (date: Date, lunar: LunarDate) => void;
+    placeholder?: string;
+    locale?: Locale;
+    theme?: 'classic' | 'glass';
+    showLunar?: boolean;
+    format?: (date: Date) => string;
+    disabled?: boolean;
+}
+declare const DatePicker: import("svelte").Component<Props, {}, "">;
+type DatePicker = ReturnType<typeof DatePicker>;
+export default DatePicker;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCan
 export type { LunarDate, SolarDate, Locale } from '@lichta/core';
 export { default as Formatter } from './components/Formatter.svelte';
 export { default as Calendar } from './components/Calendar.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';

package/dist/index.js

@@ -6,3 +6,4 @@ export { LichTa, jdFromDate, jdToDate, getYearDetails, getDayCanChi, getMonthCan
 // Xuất bản phần Svelte Component
 export { default as Formatter } from './components/Formatter.svelte';
 export { default as Calendar } from './components/Calendar.svelte';
+export { default as DatePicker } from './components/DatePicker.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lichta/svelte",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Svelte components for LichTa",
   "author": "Zeforc Labs | Stridev",
   "license": "MIT",
@@ -52,15 +52,23 @@
     "vite": "^8.0.16"
   },
   "dependencies": {
-    "@lichta/core": "2.0.0"
+    "@lichta/core": "2.1.0"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zeforc/lichta.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zeforc/lichta/issues"
+  },
+  "homepage": "https://github.com/zeforc/lichta#readme",
   "scripts": {
     "dev": "vite dev",
     "build": "svelte-kit sync && svelte-package && publint",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check . && eslint .",
+    "lint": "eslint .",
     "format": "prettier --write ."
   }
 }