npm - @lichta/vue - Versions diffs - 2.0.0 - Mend

@lichta/vue 2.0.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.

Files changed (7) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2026 Zeforc Labs
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,71 @@
+# @lichta/vue
+[![npm version](https://img.shields.io/npm/v/@lichta/vue.svg)](https://www.npmjs.com/package/@lichta/vue)
+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).
+## Cài đặt
+```bash
+pnpm add @lichta/vue
+```
+`@lichta/core` được cài kèm tự động (dependency thường), nhưng bạn cần cài `vue` (peer dependency, `^3.0.0`) nếu dự án chưa có.
+## Sử dụng
+```vue
+<script setup lang="ts">
+import { Calendar } from '@lichta/vue';
+import '@lichta/core/styles/calendar-base.css';
+import '@lichta/core/styles/calendar-glass.css'; // theme "glass" (tùy chọn)
+import type { LunarDate } from '@lichta/core';
+function onSelect(date: Date, lunar: LunarDate) {
+  console.log(date, lunar);
+}
+</script>
+<template>
+  <Calendar theme="glass" locale="vi" @select="onSelect" />
+</template>
+```
+> ⚠️ `Calendar` chỉ export class CSS (`lich-ta-calendar`, ...) — bạn **phải tự import** file CSS ở trên (hoặc CSS tương đương của riêng bạn), nếu không lịch sẽ hiển thị không có style.
+## Props
+| Prop | Kiểu | Mặc định | Mô tả |
+|---|---|---|---|
+| `month` | `number` | Tháng hiện tại | Tháng hiển thị ban đầu (1–12) |
+| `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 |
+| `theme` | `'classic' \| 'glass'` | `'classic'` | Giao diện lịch |
+## Events
+| Event | Payload | Mô tả |
+|---|---|---|
+| `select` | `(date: Date, lunar: LunarDate)` | Bắn ra khi người dùng chọn 1 ngày |
+> 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ị.
+## Theming
+```css
+:root {
+  --lichta-primary: #d4a373;
+  --lichta-bg: #fffcf7;
+  --lichta-text: #2c1810;
+  --lichta-today-bg: #d4a373;
+  --lichta-selected-bg: #a0522d;
+  --lichta-lunar-text: #b08968;
+  --lichta-radius: 8px;
+  --lichta-font: 'Inter', sans-serif;
+}
+```
+## License
+[MIT](./LICENSE)

package/dist/Calendar.vue.d.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import { type LunarDate, type Locale } from '@lichta/core';
+interface Props {
+    month?: number;
+    year?: number;
+    showLunar?: boolean;
+    locale?: Locale;
+    theme?: 'classic' | 'glass';
+}
+export interface DayCellData {
+    solar: Date;
+    lunar: LunarDate;
+    isToday: boolean;
+    isSelected: boolean;
+    isCurrentMonth: boolean;
+}
+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;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: ((date: Date, lunar: LunarDate) => any) | undefined;
+}>, {
+    month: number;
+    year: number;
+    showLunar: boolean;
+    locale: Locale;
+    theme: "classic" | "glass";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts ADDED Viewed

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

package/dist/lichta-vue.es.js ADDED Viewed

@@ -0,0 +1,139 @@
+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 = {
+  key: 0,
+  class: "lunar-day"
+}, te = {
+  key: 0,
+  class: "lich-ta-calendar-footer"
+}, le = /* @__PURE__ */ q({
+  __name: "Calendar",
+  props: {
+    month: { default: (/* @__PURE__ */ new Date()).getMonth() + 1 },
+    year: { default: (/* @__PURE__ */ new Date()).getFullYear() },
+    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;
+    });
+    function z() {
+      e.value === 1 ? (e.value = 12, s.value -= 1) : e.value -= 1;
+    }
+    function G() {
+      e.value === 12 ? (e.value = 1, s.value += 1) : e.value += 1;
+    }
+    function M(t) {
+      h.value = t.solar, E("select", t.solar, t.lunar);
+    }
+    function O(t, y) {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), M(y));
+    }
+    return (t, y) => (i(), d("div", {
+      class: b(["lich-ta-calendar", `lichta-theme-${v.theme}`])
+    }, [
+      l("div", J, [
+        l("button", {
+          class: "lich-ta-calendar-nav",
+          "aria-label": "Tháng trước",
+          onClick: z
+        }, "◀"),
+        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)
+        ]),
+        l("button", {
+          class: "lich-ta-calendar-nav",
+          "aria-label": "Tháng sau",
+          onClick: G
+        }, "▶")
+      ]),
+      l("div", U, [
+        (i(), d(T, null, N(V, (a) => l("div", {
+          key: a,
+          class: "lich-ta-calendar-weekday"
+        }, o(a), 1)), 64))
+      ]),
+      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.$slots.default ? (i(), d("div", te, [
+        A(t.$slots, "default")
+      ])) : x("", !0)
+    ], 2));
+  }
+});
+export {
+  le as Calendar
+};

package/dist/lichta-vue.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,40 @@
+{
+  "name": "@lichta/vue",
+  "version": "2.0.0",
+  "description": "Vue components for LichTa",
+  "author": "Zeforc Labs | Stridev",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/lichta-vue.umd.js",
+  "module": "./dist/lichta-vue.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/lichta-vue.es.js",
+      "require": "./dist/lichta-vue.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@lichta/core": "2.0.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "lint": "eslint src/**/*.vue"
+  }
+}