yc-design-vue 2.2.3 → 2.2.4

package/es/Affix/index.vue.js

@@ -3,10 +3,6 @@ import { useResizeObserver, useEventListener } from "../node_modules/@vueuse/cor
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { findFirstScrollableParent, getElement, throttleByRaf, valueToPx } from "../_shared/utils/dom.js";
 import { isUndefined } from "../_shared/utils/is.js";
 import "../_shared/utils/locale.js";

package/es/Alert/index.vue.js

@@ -5,10 +5,6 @@ import _sfc_main$1 from "../_shared/components/IconButton/index.vue.js";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Anchor/Anchor.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, ref, computed, onMounted, createElementBlock, openBloc
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { valueToPx } from "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Anchor/AnchorLink.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, useSlots, toRefs, createElementBlock, openBlock, norma
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { getElement } from "../_shared/utils/dom.js";
 import { isNumber } from "../_shared/utils/is.js";
 import "../_shared/utils/locale.js";

package/es/Anchor/hooks/useContext.js

@@ -2,10 +2,6 @@ import { toRefs, useSlots, ref, computed, provide, inject } from "vue";
 import "../../node_modules/b-tween/dist/b-tween.es.js";
 import "../../node_modules/dayjs/dayjs.min.js";
 import "../../node_modules/tinycolor2/esm/tinycolor.js";
-import "../../node_modules/dayjs/plugin/duration.js";
-import "../../node_modules/dayjs/plugin/toObject.js";
-import "../../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { findFirstScrollableParent, getElement } from "../../_shared/utils/dom.js";
 import { isUndefined } from "../../_shared/utils/is.js";
 import "../../_shared/utils/locale.js";

package/es/AutoComplete/index.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, useSlots, toRefs, ref, createBlock, openBlock, unref,
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { isObject } from "../_shared/utils/is.js";
 import { useControlValue } from "../_shared/utils/hooks.js";

package/es/Avatar/Avatar.vue.js

@@ -3,10 +3,6 @@ import { useResizeObserver } from "../node_modules/@vueuse/core/index.js";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { valueToPx } from "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Avatar/AvatarGroup.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, useSlots, toRefs, computed, createElementBlock, openBl
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { valueToPx } from "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/BackTop/index.vue.js

@@ -3,10 +3,6 @@ import { useEventListener } from "../node_modules/@vueuse/core/index.js";
 import Tween from "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { findFirstScrollableParent, getElement } from "../_shared/utils/dom.js";
 import { isUndefined } from "../_shared/utils/is.js";
 import "../_shared/utils/locale.js";

package/es/Badge/index.vue.js

@@ -3,10 +3,6 @@ import { TAG_PRESET_COLORS } from "../_shared/constants/index.js";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import { valueToPx } from "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Breadcrumb/Breadcrumb.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, useSlots, toRefs, computed, createElementBlock, openBl
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { isString } from "../_shared/utils/is.js";
 import "../_shared/utils/locale.js";

package/es/Breadcrumb/BreadcrumbItem.vue.js

@@ -3,10 +3,6 @@ import _sfc_main$1 from "../_shared/icons/IconArrowDown.vue.js";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Breadcrumb/BreadcrumbMore.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, createBlock, openBlock, withCtx, resolveDynamicCompone
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import "../_shared/utils/locale.js";
 import "../_shared/utils/time.js";

package/es/Breadcrumb/BreadcrumbSeparator.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, computed, createElementBlock, openBlock, createBlock,
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { isUndefined } from "../_shared/utils/is.js";
 import "../_shared/utils/locale.js";

package/es/Button/hooks/useContext.js

@@ -2,10 +2,6 @@ import { toRefs, provide, inject, ref, computed } from "vue";
 import "../../node_modules/b-tween/dist/b-tween.es.js";
 import "../../node_modules/dayjs/dayjs.min.js";
 import "../../node_modules/tinycolor2/esm/tinycolor.js";
-import "../../node_modules/dayjs/plugin/duration.js";
-import "../../node_modules/dayjs/plugin/toObject.js";
-import "../../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../../_shared/utils/dom.js";
 import { getGlobalConfig } from "../../_shared/utils/global-config.js";
 import "../../_shared/utils/locale.js";

package/es/Calendar/Calendar.vue.js

@@ -2,10 +2,6 @@ import { defineComponent, useSlots, toRefs, ref, computed, watch, createElementB
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import dayjs from "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { useControlValue } from "../_shared/utils/hooks.js";
 import { useI18n } from "../_shared/utils/locale.js";
@@ -52,6 +48,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       defaultMode,
       modes: _modes
     } = toRefs(props);
+    const { t } = useI18n();
     const computedValue = useControlValue(
       modelValue,
       defaultValue.value,
@@ -60,26 +57,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         emits("change", val);
       }
     );
-    const { t } = useI18n();
-    const recordDate = ref({});
-    const recordDateFormat = computed(() => {
-      const { year, month } = recordDate.value;
-      return dayjs().set("year", year).set("month", month).format(t("calendar.formatMonth"));
+    const curYear = ref(0);
+    const curMonth = ref(0);
+    const formatValue = computed(() => {
+      return dayjs().set("year", curYear.value).set("month", curMonth.value).format(t("calendar.formatMonth"));
     });
-    watch(
-      () => computedValue.value,
-      (val) => {
-        const date = val ? dayjs(val) : dayjs();
-        recordDate.value = {
-          year: date.year(),
-          month: date.month() + 1,
-          day: date.date()
-        };
-      },
-      {
-        immediate: true
-      }
-    );
     const computedMode = useControlValue(
       mode,
       defaultMode.value,
@@ -96,29 +78,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         };
       });
     });
-    const handleClick = (col) => {
-      computedValue.value = new Date(col.fullDate);
-    };
     const handleDateChange = (type) => {
       if (type == "today") {
         computedValue.value = /* @__PURE__ */ new Date();
         return;
       }
-      const { year, month } = recordDate.value;
-      if (type == "next") {
-        const tempMonth = month + 1 > 12 ? 1 : month + 1;
-        const tempYear = month + 1 > 12 || computedMode.value == "year" ? 1 : 0;
-        recordDate.value.year = year + tempYear;
-        if (computedMode.value == "year") return;
-        recordDate.value.month = tempMonth;
-      } else {
-        const tempMonth = month - 1 < 1 ? 12 : month - 1;
-        const tempYear = month - 1 < 1 || computedMode.value == "year" ? -1 : 0;
-        recordDate.value.year = year + tempYear;
-        if (computedMode.value == "year") return;
-        recordDate.value.month = tempMonth;
-      }
+      let date = dayjs().set("year", curYear.value).set("month", curMonth.value);
+      date = type == "next" ? date.add(1, "month") : date.subtract(1, "month");
+      curYear.value = date.year();
+      curMonth.value = date.month();
     };
+    watch(
+      () => computedValue.value,
+      () => {
+        const date = dayjs(computedValue.value ? computedValue.value : /* @__PURE__ */ new Date());
+        curYear.value = date.year();
+        curMonth.value = date.month();
+      },
+      {
+        immediate: true
+      }
+    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass(["yc-calendar", `yc-calendar-mode-${unref(computedMode)}`])
@@ -140,10 +120,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }),
             createElementVNode("div", _hoisted_3, [
               renderSlot(_ctx.$slots, "header", {
-                year: recordDate.value.year,
-                month: recordDate.value.month
+                year: curYear.value,
+                month: curMonth.value
               }, () => [
-                createTextVNode(toDisplayString(recordDateFormat.value), 1)
+                createTextVNode(toDisplayString(formatValue.value), 1)
               ])
             ]),
             createVNode(unref(_sfc_main$1), {
@@ -183,8 +163,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           unref(computedMode) == "month" ? (openBlock(), createBlock(_sfc_main$4, {
             key: 0,
             "computed-value": unref(computedValue),
-            recordDate: recordDate.value,
-            onCellClick: handleClick
+            "cur-year": curYear.value,
+            "cur-month": curMonth.value,
+            onCellClick: _cache[4] || (_cache[4] = (v) => computedValue.value = v)
           }, createSlots({ _: 2 }, [
             $slots.default ? {
               name: "default",
@@ -193,11 +174,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["computed-value", "recordDate"])) : (openBlock(), createBlock(_sfc_main$5, {
+          ]), 1032, ["computed-value", "cur-year", "cur-month"])) : (openBlock(), createBlock(_sfc_main$5, {
             key: 1,
             "computed-value": unref(computedValue),
-            "record-date": recordDate.value,
-            onCellClick: handleClick
+            "cur-year": curYear.value,
+            onCellClick: _cache[5] || (_cache[5] = (v) => computedValue.value = v)
           }, createSlots({ _: 2 }, [
             $slots.default ? {
               name: "default",
@@ -206,7 +187,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ]),
               key: "0"
             } : void 0
-          ]), 1032, ["computed-value", "record-date"]))
+          ]), 1032, ["computed-value", "cur-year"]))
         ])
       ], 2);
     };

package/es/Calendar/CalendarMonth.vue.d.ts

@@ -1,8 +1,7 @@
-import { CalendarCellData } from '../_shared/utils';
 type __VLS_Props = {
     computedValue: Date;
-    recordDate: Record<string, number>;
-    calendar?: CalendarCellData[][];
+    curYear: number;
+    curMonth: number;
     small?: boolean;
 };
 declare function __VLS_template(): {
@@ -19,12 +18,11 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "cell-click": (col: CalendarCellData) => any;
+    "cell-click": (col: Date) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onCell-click"?: ((col: CalendarCellData) => any) | undefined;
+    "onCell-click"?: ((col: Date) => any) | undefined;
 }>, {
     small: boolean;
-    calendar: CalendarCellData[][];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/es/Calendar/CalendarMonth.vue.js

@@ -1,15 +1,11 @@
-import { defineComponent, toRefs, computed, watch, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, toDisplayString, renderSlot } from "vue";
+import { defineComponent, toRefs, computed, ref, watch, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, Fragment, renderList, toDisplayString, renderSlot } from "vue";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import dayjs from "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
-import { useControlValue } from "../_shared/utils/hooks.js";
 import { useI18n } from "../_shared/utils/locale.js";
-import { generateMonthCalendar } from "../_shared/utils/time.js";
+import "../_shared/utils/time.js";
+import useCalendar from "./hooks/useCalendar.js";
 const _hoisted_1 = { class: "yc-calendar-week-list" };
 const _hoisted_2 = { class: "yc-calendar-month-cell-body" };
 const _hoisted_3 = ["onClick"];
@@ -20,16 +16,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CalendarMonth",
   props: {
     computedValue: {},
-    recordDate: {},
-    calendar: { default: void 0 },
+    curYear: {},
+    curMonth: {},
     small: { type: Boolean, default: false }
   },
   emits: ["cell-click"],
   setup(__props) {
     const props = __props;
-    const { computedValue, calendar: _calendar, small, recordDate } = toRefs(props);
+    const { small, curYear, curMonth, computedValue } = toRefs(props);
+    const { getDayOfMonth } = useCalendar();
     const { t } = useI18n();
-    const weekList = computed(() => {
+    const weekHeaders = computed(() => {
       return [
         "sunday",
         "monday",
@@ -40,34 +37,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "saturday"
       ].map((v) => t(`calendar.week.${small.value ? "short" : "long"}.${v}`));
     });
-    const calendar = useControlValue(_calendar, []);
+    const calendar = ref([]);
+    const isToday = (date) => {
+      const curDate = dayjs();
+      return date.getFullYear() == curDate.year() && date.getMonth() == curDate.month() && date.getDate() == curDate.date();
+    };
+    const isCellInView = (date) => {
+      return date.getFullYear() == curYear.value && date.getMonth() == curMonth.value;
+    };
+    const isSelected = (date) => {
+      if (!computedValue.value) return false;
+      const isSameDay = computedValue.value.getFullYear() == date.getFullYear() && computedValue.value.getMonth() == date.getMonth() && computedValue.value.getDate() == date.getDate();
+      return small.value ? isSameDay && curMonth.value == computedValue.value.getMonth() : isSameDay;
+    };
     watch(
-      () => recordDate.value.month,
+      () => [curYear.value, curMonth.value],
       () => {
-        if (_calendar.value) return;
-        const { year, month } = recordDate.value;
-        calendar.value = generateMonthCalendar(year, month);
+        calendar.value = getDayOfMonth(curYear.value, curMonth.value);
       },
       {
         immediate: true
       }
     );
-    const isToday = (col) => {
-      const { day, year, month } = col;
-      const cur = dayjs();
-      const _day = cur.date();
-      const _month = cur.month();
-      const _year = cur.year();
-      return day == _day && month == _month && year == _year;
-    };
-    const isSelected = (col) => {
-      const year = computedValue.value.getFullYear();
-      const month = computedValue.value.getMonth();
-      const day = computedValue.value.getDate();
-      const { day: _day, year: _year, month: _month, isCurrentMonth } = col;
-      const isSameDate = day == _day && month == _month && year == _year;
-      return small.value ? isSameDate && isCurrentMonth : isSameDate;
-    };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([
@@ -78,7 +69,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         ])
       }, [
         createElementVNode("div", _hoisted_1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(weekList.value, (item) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(weekHeaders.value, (item) => {
             return openBlock(), createElementBlock("div", {
               class: "yc-calendar-week-list-item",
               key: item
@@ -86,32 +77,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         createElementVNode("div", _hoisted_2, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(calendar), (row, i) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(calendar.value, (row, i) => {
             return openBlock(), createElementBlock("div", {
               key: i,
               class: "yc-calendar-month-row"
             }, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (col, i1) => {
+              (openBlock(true), createElementBlock(Fragment, null, renderList(row, (v, i1) => {
                 return openBlock(), createElementBlock("div", {
                   key: i1,
                   class: normalizeClass([
                     "yc-calendar-cell",
                     {
-                      "yc-calendar-cell-today": isToday(col),
-                      "yc-calendar-cell-selected": isSelected(col),
-                      "yc-calendar-cell-in-view": col.isCurrentMonth
+                      "yc-calendar-cell-today": isToday(v.value),
+                      "yc-calendar-cell-selected": isSelected(v.value),
+                      "yc-calendar-cell-in-view": isCellInView(v.value)
                     }
                   ]),
-                  onClick: ($event) => _ctx.$emit("cell-click", col)
+                  onClick: ($event) => _ctx.$emit("cell-click", v.value)
                 }, [
                   renderSlot(_ctx.$slots, "default", {
-                    year: col.year,
-                    month: col.month,
-                    day: col.day
+                    year: v.value.getFullYear(),
+                    month: v.value.getMonth(),
+                    day: v.value.getDate()
                   }, () => [
                     createElementVNode("div", _hoisted_4, [
                       createElementVNode("div", _hoisted_5, [
-                        createElementVNode("div", _hoisted_6, toDisplayString(col.day), 1)
+                        createElementVNode("div", _hoisted_6, toDisplayString(v.label), 1)
                       ])
                     ])
                   ])

package/es/Calendar/CalendarYear.vue.d.ts

@@ -1,7 +1,6 @@
-import { CalendarCellData } from '../_shared/utils';
 type __VLS_Props = {
     computedValue: Date;
-    recordDate: Record<string, number>;
+    curYear: number;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -17,9 +16,9 @@ declare function __VLS_template(): {
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
-    "cell-click": (col: CalendarCellData) => any;
+    "cell-click": (col: Date) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onCell-click"?: ((col: CalendarCellData) => any) | undefined;
+    "onCell-click"?: ((col: Date) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;

package/es/Calendar/CalendarYear.vue.js

@@ -1,14 +1,10 @@
-import { defineComponent, toRefs, ref, computed, watch, createElementBlock, openBlock, Fragment, renderList, createElementVNode, createVNode, toDisplayString, unref, createSlots, withCtx, renderSlot } from "vue";
+import { defineComponent, ref, computed, createElementBlock, openBlock, Fragment, renderList, createElementVNode, createVNode, toDisplayString, createSlots, withCtx, renderSlot } from "vue";
 import "../node_modules/b-tween/dist/b-tween.es.js";
 import "../node_modules/dayjs/dayjs.min.js";
 import "../node_modules/tinycolor2/esm/tinycolor.js";
-import "../node_modules/dayjs/plugin/duration.js";
-import "../node_modules/dayjs/plugin/toObject.js";
-import "../node_modules/dayjs/plugin/isSameOrAfter.js";
-import "../node_modules/dayjs/plugin/isSameOrBefore.js";
 import "../_shared/utils/dom.js";
 import { useI18n } from "../_shared/utils/locale.js";
-import { generateMonthCalendar } from "../_shared/utils/time.js";
+import "../_shared/utils/time.js";
 import _sfc_main$1 from "./CalendarMonth.vue.js";
 /* empty css                   */
 const _hoisted_1 = { class: "yc-calendar-year" };
@@ -17,15 +13,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "CalendarYear",
   props: {
     computedValue: {},
-    recordDate: {}
+    curYear: {}
   },
   emits: ["cell-click"],
   setup(__props) {
-    const props = __props;
-    const { computedValue, recordDate } = toRefs(props);
     const { t } = useI18n();
-    const calendar = ref([]);
-    const monthList = computed(() => {
+    const months = ref([
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 9],
+      [10, 11, 12]
+    ]);
+    const monthHeaders = computed(() => {
       return [
         "January",
         "February",
@@ -41,57 +40,39 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         "December"
       ].map((v) => t(`calendar.month.short.${v}`));
     });
-    watch(
-      () => recordDate.value.year,
-      () => {
-        const { year } = recordDate.value;
-        calendar.value = [];
-        const row = [];
-        for (let i = 1; i <= 12; i++) {
-          row.push(generateMonthCalendar(year, i));
-          if (row.length == 4) {
-            calendar.value.push([...row]);
-            row.splice(0);
-          }
-        }
-      },
-      {
-        immediate: true
-      }
-    );
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1, [
-        (openBlock(true), createElementBlock(Fragment, null, renderList(calendar.value, (row, i) => {
+        (openBlock(true), createElementBlock(Fragment, null, renderList(months.value, (row, i) => {
           return openBlock(), createElementBlock("div", {
             key: i,
             class: "yc-calendar-year-row"
           }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(row, (col, i1) => {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(row, (month, i1) => {
               return openBlock(), createElementBlock("div", {
                 key: i1,
                 class: "yc-calendar-year-cell"
               }, [
-                createElementVNode("div", _hoisted_2, toDisplayString(monthList.value[i * 4 + i1]), 1),
+                createElementVNode("div", _hoisted_2, toDisplayString(monthHeaders.value[i * 4 + i1]), 1),
                 createVNode(_sfc_main$1, {
-                  "computed-value": unref(computedValue),
-                  calendar: col,
-                  "record-date": unref(recordDate),
+                  "cur-year": _ctx.curYear,
+                  "cur-month": month - 1,
+                  "computed-value": _ctx.computedValue,
                   small: "",
                   class: "yc-calendar-year-cell-body",
                   onCellClick: _cache[0] || (_cache[0] = (v) => _ctx.$emit("cell-click", v))
                 }, createSlots({ _: 2 }, [
                   _ctx.$slots.default ? {
                     name: "default",
-                    fn: withCtx(({ year, month, day }) => [
+                    fn: withCtx(({ year, month: month2, day }) => [
                       renderSlot(_ctx.$slots, "default", {
                         year,
-                        month,
+                        month: month2,
                         day
                       })
                     ]),
                     key: "0"
                   } : void 0
-                ]), 1032, ["computed-value", "calendar", "record-date"])
+                ]), 1032, ["cur-year", "cur-month", "computed-value"])
               ]);
             }), 128))
           ]);

package/es/Calendar/hooks/useCalendar.d.ts

@@ -0,0 +1,7 @@
+export interface CalendarCellData {
+    label: string | number;
+    value: Date;
+}
+export default function useCalendar(): {
+    getDayOfMonth: (year: number, month: number, dayStartOfWeek?: number) => CalendarCellData[][];
+};