yc-design-vue 2.2.4 → 2.2.6

package/es/DatePicker/component/PickerHeader.vue.js

@@ -0,0 +1,83 @@
+import { defineComponent, createElementBlock, openBlock, createElementVNode, createCommentVNode, renderSlot, createVNode, unref, toDisplayString, Fragment } 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 "../../_shared/utils/dom.js";
+import { isUndefined } from "../../_shared/utils/is.js";
+import "../../_shared/utils/locale.js";
+import "../../_shared/utils/time.js";
+/* empty css                                             */
+/* empty css                                                  */
+/* empty css                                      */
+import _sfc_main$2 from "../../_shared/icons/IconArrowRight.vue.js";
+import _sfc_main$1 from "../../_shared/icons/IconDoubleLeft.vue2.js";
+import _sfc_main$3 from "../../_shared/icons/IconDoubleRight.vue2.js";
+const _hoisted_1 = { class: "yc-picker-header" };
+const _hoisted_2 = { class: "yc-picker-header-title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PickerHeader",
+  props: {
+    type: {},
+    year: {},
+    month: {}
+  },
+  emits: ["prev-double-click", "prev-click", "next-double-click", "next-click", "year-click", "month-click"],
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", {
+          class: "yc-picker-header-icon",
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("prev-double-click"))
+        }, [
+          renderSlot(_ctx.$slots, "icon-prev-double", {}, () => [
+            createVNode(unref(_sfc_main$1))
+          ])
+        ]),
+        ["week", "date"].includes(_ctx.type) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "yc-picker-header-icon",
+          onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("prev-click"))
+        }, [
+          renderSlot(_ctx.$slots, "icon-prev", {}, () => [
+            createVNode(unref(_sfc_main$2), { rotate: 180 })
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2, [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("span", {
+              class: "yc-picker-header-label",
+              onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("year-click"))
+            }, toDisplayString(_ctx.year), 1),
+            !unref(isUndefined)(_ctx.month) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _cache[6] || (_cache[6] = createElementVNode("span", null, "-", -1)),
+              createElementVNode("span", {
+                class: "yc-picker-header-label",
+                onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("month-click"))
+              }, toDisplayString(_ctx.month < 9 ? `0${_ctx.month + 1}` : _ctx.month + 1), 1)
+            ], 64)) : createCommentVNode("", true)
+          ])
+        ]),
+        ["week", "date"].includes(_ctx.type) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          class: "yc-picker-header-icon",
+          onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("next-click"))
+        }, [
+          renderSlot(_ctx.$slots, "icon-next", {}, () => [
+            createVNode(unref(_sfc_main$2))
+          ])
+        ])) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: "yc-picker-header-icon",
+          onClick: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("next-double-click"))
+        }, [
+          renderSlot(_ctx.$slots, "icon-next-double", {}, () => [
+            createVNode(unref(_sfc_main$3))
+          ])
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/DatePicker/component/PickerHeader.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PickerHeader.vue.js";
+/* empty css                  */
+export {
+  _sfc_main as default
+};

package/es/DatePicker/component/PickerInput.vue.d.ts

@@ -5,6 +5,7 @@ type __VLS_Props = {
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        trigger?(_: {}): any;
         prefix?(_: {}): any;
         'suffix-icon'?(_: {}): any;
         content?(_: {}): any;

package/es/DatePicker/component/PickerInput.vue.js

@@ -1,7 +1,123 @@
-import _sfc_main from "./PickerInput.vue2.js";
-/* empty css                 */
-import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const PickerInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-9f7eea5c"]]);
+import { defineComponent, toRefs, computed, ref, watch, nextTick, createBlock, openBlock, unref, mergeProps, isRef, withCtx, renderSlot, createVNode, normalizeClass, normalizeStyle, createSlots, createElementVNode, createCommentVNode, withModifiers } from "vue";
+import _sfc_main$2 from "../../_shared/components/IconButton/index.vue.js";
+/* empty css                                             */
+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 "../../_shared/utils/dom.js";
+import { useI18n } from "../../_shared/utils/locale.js";
+import "../../_shared/utils/time.js";
+/* empty css                                                  */
+/* empty css                                      */
+import _sfc_main$1 from "../../_shared/icons/IconCalendar.vue2.js";
+import usePickerInputContext from "../hooks/useContext.js";
+import Input from "../../Input/index.js";
+import Trigger from "../../Trigger/index.js";
+const _hoisted_1 = { class: "yc-picker-suffix-icon" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "PickerInput",
+  props: {
+    type: { default: "date" }
+  },
+  setup(__props) {
+    const $props = __props;
+    const { props, computedVisible, formatValue, showClearBtn, onClear } = usePickerInputContext().inject();
+    const {
+      popupContainer,
+      unmountOnClose,
+      readonly,
+      disabled,
+      position,
+      triggerProps,
+      size,
+      error,
+      disabledInput,
+      locale,
+      placeholder: _placeholder
+    } = toRefs(props);
+    const { t } = useI18n();
+    const placeholder = computed(() => {
+      var _a;
+      const key = `datePicker.placeholder.${$props.type}`;
+      return _placeholder.value || ((_a = locale.value) == null ? void 0 : _a[key]) || t(key);
+    });
+    const inputRef = ref();
+    watch(
+      () => computedVisible.value,
+      async (val) => {
+        var _a;
+        if (val) return;
+        await nextTick();
+        (_a = inputRef.value) == null ? void 0 : _a.blur();
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Trigger), mergeProps({
+        "popup-visible": unref(computedVisible),
+        "onUpdate:popupVisible": _cache[0] || (_cache[0] = ($event) => isRef(computedVisible) ? computedVisible.value = $event : null),
+        "popup-offset": 4,
+        "popup-container": unref(popupContainer),
+        "unmount-on-close": unref(unmountOnClose),
+        disabled: unref(disabled) || unref(readonly),
+        position: unref(position),
+        "prevent-focus": "",
+        trigger: "click",
+        "animation-name": "slide-dynamic-origin",
+        "need-transform-origin": ""
+      }, unref(triggerProps)), {
+        content: withCtx(() => [
+          renderSlot(_ctx.$slots, "content")
+        ]),
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "trigger", {}, () => [
+            createVNode(unref(Input), {
+              "model-value": unref(formatValue),
+              placeholder: placeholder.value,
+              disabled: unref(disabled),
+              error: unref(error),
+              size: unref(size),
+              readonly: unref(readonly) || unref(disabledInput) || true,
+              style: normalizeStyle(_ctx.$attrs.style),
+              class: normalizeClass([
+                _ctx.$attrs.class,
+                {
+                  "yc-picker-allow-clear": unref(showClearBtn)
+                }
+              ]),
+              ref_key: "inputRef",
+              ref: inputRef
+            }, createSlots({
+              suffix: withCtx(() => [
+                createElementVNode("div", _hoisted_1, [
+                  renderSlot(_ctx.$slots, "suffix-icon", {}, () => [
+                    createVNode(unref(_sfc_main$1))
+                  ])
+                ]),
+                unref(showClearBtn) ? (openBlock(), createBlock(unref(_sfc_main$2), {
+                  key: 0,
+                  onClick: withModifiers(unref(onClear), ["stop"])
+                }, null, 8, ["onClick"])) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots.prefix ? {
+                name: "prefix",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "prefix")
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["model-value", "placeholder", "disabled", "error", "size", "readonly", "style", "class"])
+          ])
+        ]),
+        _: 3
+      }, 16, ["popup-visible", "popup-container", "unmount-on-close", "disabled", "position"]);
+    };
+  }
+});
 export {
-  PickerInput as default
+  _sfc_main as default
 };

package/es/DatePicker/component/PickerInput.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PickerInput.vue.js";
+/* empty css                 */
+export {
+  _sfc_main as default
+};

package/es/DatePicker/component/PickerPanel.vue.d.ts

@@ -6,6 +6,7 @@ type __VLS_Props = {
     previewShortcut: boolean;
     confirmBtnDisabled: boolean;
     showConfirmBtn: boolean;
+    showNow?: boolean;
 };
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -19,11 +20,15 @@ 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, {} & {
     confirm: (ev: MouseEvent) => any;
+    "now-click": () => any;
     "shortcut-select": (shortcut: ShortcutType, hover: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onConfirm?: ((ev: MouseEvent) => any) | undefined;
+    "onNow-click"?: (() => any) | undefined;
     "onShortcut-select"?: ((shortcut: ShortcutType, hover: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+}>, {
+    showNow: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/es/DatePicker/component/PickerPanel.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent, createElementBlock, openBlock, normalizeClass, createVNode, createBlock, createCommentVNode, createElementVNode, unref, withCtx, Fragment, renderList, resolveDynamicComponent, renderSlot, createTextVNode, toDisplayString } from "vue";
+import { defineComponent, createElementBlock, openBlock, normalizeClass, createVNode, createBlock, createCommentVNode, createElementVNode, unref, withCtx, Fragment, renderList, resolveDynamicComponent, renderSlot, withDirectives, vShow, createTextVNode, toDisplayString } from "vue";
 import { createReusableTemplate } from "../../node_modules/@vueuse/core/index.js";
 import "../../node_modules/b-tween/dist/b-tween.es.js";
 import "../../node_modules/dayjs/dayjs.min.js";
@@ -8,6 +8,7 @@ import { useI18n } from "../../_shared/utils/locale.js";
 import "../../_shared/utils/time.js";
 import { getSlotFunction } from "../../_shared/utils/vue-utils.js";
 import Button from "../../Button/index.js";
+import Link from "../../Link/index.js";
 const _hoisted_1 = { class: "yc-picker-panel-wrapper" };
 const _hoisted_2 = { class: "yc-picker-footer" };
 const _hoisted_3 = {
@@ -18,6 +19,10 @@ const _hoisted_4 = {
   key: 1,
   class: "yc-picker-footer-btn-wrapper"
 };
+const _hoisted_5 = {
+  key: 2,
+  class: "yc-picker-footer-now-wrapper"
+};
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PickerPanel",
   props: {
@@ -26,9 +31,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     shortcuts: {},
     previewShortcut: { type: Boolean },
     confirmBtnDisabled: { type: Boolean },
-    showConfirmBtn: { type: Boolean }
+    showConfirmBtn: { type: Boolean },
+    showNow: { type: Boolean, default: false }
   },
-  emits: ["confirm", "shortcut-select"],
+  emits: ["confirm", "now-click", "shortcut-select"],
   setup(__props) {
     const props = __props;
     const { define: DefineShortcuts, reuse: ReuseShortcuts } = createReusableTemplate();
@@ -38,8 +44,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const key = "datePicker.ok";
       return ((_a = props.locale) == null ? void 0 : _a[key]) || t(key);
     };
+    const getTodayText = () => {
+      var _a;
+      const key = "datePicker.today";
+      return ((_a = props.locale) == null ? void 0 : _a[key]) || t(key);
+    };
+    const getNowText = () => {
+      var _a;
+      const key = "datePicker.now";
+      return ((_a = props.locale) == null ? void 0 : _a[key]) || t(key);
+    };
     return (_ctx, _cache) => {
-      var _a, _b;
+      var _a, _b, _c, _d;
       return openBlock(), createElementBlock("div", {
         class: normalizeClass([
           "yc-picker-container",
@@ -79,19 +95,44 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "extra")
             ])) : createCommentVNode("", true),
             _ctx.showConfirmBtn || _ctx.shortcutsPosition == "bottom" && ((_b = _ctx.shortcuts) == null ? void 0 : _b.length) ? (openBlock(), createElementBlock("div", _hoisted_4, [
-              _ctx.shortcutsPosition == "bottom" ? (openBlock(), createBlock(unref(ReuseShortcuts), { key: 0 })) : createCommentVNode("", true),
+              withDirectives(createVNode(unref(ReuseShortcuts), null, null, 512), [
+                [
+                  vShow,
+                  !_ctx.showNow || _ctx.shortcutsPosition == "bottom" && ((_c = _ctx.shortcuts) == null ? void 0 : _c.length)
+                ]
+              ]),
+              !((_d = _ctx.shortcuts) == null ? void 0 : _d.length) && _ctx.showNow ? (openBlock(), createBlock(unref(Button), {
+                key: 0,
+                size: "mini",
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("now-click"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getNowText()), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
               _ctx.showConfirmBtn ? (openBlock(), createBlock(unref(Button), {
                 key: 1,
                 disabled: _ctx.confirmBtnDisabled,
                 type: "primary",
                 size: "mini",
-                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("confirm", $event))
+                onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("confirm", $event))
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(getOkText()), 1)
                 ]),
                 _: 1
               }, 8, ["disabled"])) : createCommentVNode("", true)
+            ])) : createCommentVNode("", true),
+            _ctx.showNow && !_ctx.showConfirmBtn ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createVNode(unref(Link), {
+                onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("now-click"))
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(getTodayText()), 1)
+                ]),
+                _: 1
+              })
             ])) : createCommentVNode("", true)
           ])
         ])

package/es/DatePicker/component/PickerWeekHeader.vue.d.ts

@@ -0,0 +1,8 @@
+import { DayStartOfWeek } from '../type';
+type __VLS_Props = {
+    locale: Record<string, any>;
+    dayStartOfWeek: DayStartOfWeek;
+    abbreviation: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/es/DatePicker/component/PickerWeekHeader.vue.js

@@ -0,0 +1,58 @@
+import { defineComponent, toRefs, computed, createElementBlock, openBlock, createElementVNode, Fragment, renderList, toDisplayString } 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 "../../_shared/utils/dom.js";
+import { useI18n } from "../../_shared/utils/locale.js";
+import "../../_shared/utils/time.js";
+const _hoisted_1 = { class: "yc-picker-week-list" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PickerWeekHeader",
+  props: {
+    locale: {},
+    dayStartOfWeek: {},
+    abbreviation: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const { locale, dayStartOfWeek, abbreviation } = toRefs(props);
+    const { t } = useI18n();
+    const weekHeaders = computed(() => {
+      const baseDays = [0, 1, 2, 3, 4, 5, 6];
+      const days = [
+        ...baseDays.slice(dayStartOfWeek.value || 0),
+        ...baseDays.slice(0, dayStartOfWeek.value || 0)
+      ];
+      const map = Object.fromEntries(
+        [
+          "sunday",
+          "monday",
+          "tuesday",
+          "wednesday",
+          "thursday",
+          "friday",
+          "saturday"
+        ].map((v, i) => [i, v])
+      );
+      return days.map((v) => {
+        var _a;
+        const key = `datePicker.week.${abbreviation.value ? "short" : "long"}.${map[v]}`;
+        return ((_a = locale.value) == null ? void 0 : _a[key]) || t(key);
+      });
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[0] || (_cache[0] = createElementVNode("div", { class: "yc-picker-week-list-item" }, null, -1)),
+        (openBlock(true), createElementBlock(Fragment, null, renderList(weekHeaders.value, (v) => {
+          return openBlock(), createElementBlock("div", {
+            key: v,
+            class: "yc-picker-week-list-item"
+          }, toDisplayString(v), 1);
+        }), 128))
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/DatePicker/component/PickerWeekHeader.vue3.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./PickerWeekHeader.vue.js";
+/* empty css                      */
+export {
+  _sfc_main as default
+};

package/es/DatePicker/hooks/userPicker.d.ts

@@ -1,18 +1,5 @@
 import { BasePickerEmits, DatePickerValue, DayStartOfWeek, ShortcutType } from '../type';
 import { RecordType } from '../../_shared/type';
-export type YearData = {
-    label: string;
-    value: Date;
-};
-export interface DayData {
-    label: string;
-    value: Date;
-}
-export interface WeekData {
-    label: number;
-    value: Date;
-    time: DayData[];
-}
 export default function usePicker(params: {
     props: RecordType;
     emits: BasePickerEmits;
@@ -33,11 +20,16 @@ export default function usePicker(params: {
     t: (key: string, ...args: any[]) => string;
     getDateFromFormat: (val: DatePickerValue) => Date | "";
     getFormatFromDate: (val: Date) => string | number | Date;
+    isCellInView: (v: Date, type: string) => boolean;
+    isToday: (v: Date, type: string) => boolean;
+    isSelected: (v: Date, type: string) => boolean;
     getRangeOfYear: (curYear: number) => {
-        range: YearData[][];
+        range: import('../../_shared/utils').YearData[][];
         startYear: number;
     };
-    getWeeksOfMonth: (year: number, month: number, startOfWeek?: DayStartOfWeek) => WeekData[];
+    getWeeksOfMonth: (year: number, month: number, startOfWeek?: DayStartOfWeek) => import('../../_shared/utils').WeekData[];
+    getDaysOfMonth: (year: number, month: number, dayStartOfWeek?: number) => import('../../_shared/utils').DayData[][];
+    handleNowClick: () => void;
     handleSelect: (date: Date) => void;
     handleConfirm: () => Promise<void>;
     handleShortcut: (shortcut: ShortcutType, hover: boolean) => void;

package/es/DatePicker/hooks/userPicker.js

@@ -7,10 +7,8 @@ import { sleep } from "../../_shared/utils/dom.js";
 import { isUndefined, isString } from "../../_shared/utils/is.js";
 import { useControlValue } from "../../_shared/utils/hooks.js";
 import { useI18n } from "../../_shared/utils/locale.js";
-import "../../_shared/utils/time.js";
+import { getDaysOfMonth, getWeeksOfMonth, getRangeOfYear } from "../../_shared/utils/time.js";
 import usePickerInputContext from "./useContext.js";
-import isoWeek from "../../node_modules/dayjs/plugin/isoWeek.js";
-dayjs.extend(isoWeek);
 function usePicker(params) {
   const { props, emits } = params;
   const {
@@ -27,6 +25,7 @@ function usePicker(params) {
     locale,
     abbreviation
   } = toRefs(props);
+  const { disabledDate } = props;
   const computedValue = useControlValue(
     modelValue,
     defaultValue.value,
@@ -94,6 +93,9 @@ function usePicker(params) {
     computedVisible.value = false;
   };
   const handleSelect = (date) => {
+    if (disabledDate == null ? void 0 : disabledDate(date)) {
+      return;
+    }
     computedValue.value = date;
     selectDate = date;
     const dateString = dayjs(date).format("YYYY-MM-DD");
@@ -109,6 +111,11 @@ function usePicker(params) {
     await sleep(0);
     computedVisible.value = false;
   };
+  const handleNowClick = () => {
+    isConfirm = true;
+    computedValue.value = /* @__PURE__ */ new Date();
+    computedVisible.value = false;
+  };
   const getDateFromFormat = (val) => {
     if (!val) return "";
     let date;
@@ -131,53 +138,37 @@ function usePicker(params) {
     }
     return date;
   };
-  const getRangeOfYear = (curYear2) => {
-    const decadeStartYear = Math.floor(curYear2 / 10) * 10;
-    const startYear = decadeStartYear - 1;
-    const flatYearArray = Array.from({ length: 12 }, (_, i) => {
-      const year = startYear + i;
-      return {
-        label: year.toString(),
-        value: dayjs().year(year).startOf("year").toDate()
-      };
-    });
-    const grid = [];
-    const columns = 3;
-    for (let i = 0; i < flatYearArray.length; i += columns) {
-      const chunk = flatYearArray.slice(i, i + columns);
-      grid.push(chunk);
-    }
-    return {
-      range: grid,
-      startYear: decadeStartYear
-    };
+  const isCellInView = (v, type) => {
+    const curDate = dayjs();
+    if (type == "year") {
+      const startYear = Math.floor(curDate.year() / 10) * 10;
+      return v.getFullYear() >= startYear && v.getFullYear() <= startYear + 10;
+    }
+    if (type == "month") {
+      return true;
+    }
+    return v.getFullYear() == curYear.value && v.getMonth() == curMonth.value;
   };
-  const getWeeksOfMonth = (year, month, startOfWeek = dayStartOfWeek.value) => {
-    const firstDayOfMonth = dayjs(new Date(year, month, 1));
-    const weekData = [];
-    const dayOfWeekOfFirst = firstDayOfMonth.toDate().getDay();
-    const offset = (dayOfWeekOfFirst - startOfWeek + 7) % 7;
-    let currentDay = firstDayOfMonth.subtract(offset, "day");
-    for (let i = 0; i < 6; i++) {
-      const daysOfWeek = [];
-      const weekRowStartDate = currentDay;
-      for (let j = 0; j < 7; j++) {
-        daysOfWeek.push({
-          label: String(currentDay.date()),
-          value: currentDay.toDate()
-        });
-        currentDay = currentDay.add(1, "day");
-      }
-      const representativeDayOfWeek = weekRowStartDate.add(3, "day");
-      const correctIsoWeek = representativeDayOfWeek.isoWeek();
-      const mondayOfCorrectIsoWeek = representativeDayOfWeek.startOf("isoWeek").toDate();
-      weekData.push({
-        label: correctIsoWeek,
-        value: mondayOfCorrectIsoWeek,
-        time: daysOfWeek
-      });
-    }
-    return weekData;
+  const isToday = (v, type) => {
+    const curDate = dayjs();
+    if (type == "year") {
+      return v.getFullYear() == curDate.year();
+    }
+    if (type == "month") {
+      return v.getMonth() == curDate.month() && v.getFullYear() == curDate.year();
+    }
+    return v.getFullYear() == curDate.year() && v.getMonth() == curDate.month() && v.getDate() == curDate.date();
+  };
+  const isSelected = (v, type) => {
+    const date = getDateFromFormat(computedValue.value);
+    if (!date) return false;
+    if (type == "year") {
+      return date.getFullYear() == v.getFullYear();
+    }
+    if (type == "month") {
+      return date.getFullYear() == v.getFullYear() && date.getMonth() == v.getMonth();
+    }
+    return date.getFullYear() == v.getFullYear() && date.getMonth() == v.getMonth() && date.getDate() == v.getDate();
   };
   usePickerInputContext().provide(
     {
@@ -205,8 +196,13 @@ function usePicker(params) {
     t,
     getDateFromFormat,
     getFormatFromDate,
+    isCellInView,
+    isToday,
+    isSelected,
     getRangeOfYear,
     getWeeksOfMonth,
+    getDaysOfMonth,
+    handleNowClick,
     handleSelect,
     handleConfirm,
     handleShortcut

package/es/DatePicker/index.css

@@ -1,3 +1,3 @@
-.yc-panel-year,.yc-panel-month,.yc-panel-week{width:265px;display:flex;flex-direction:column}.yc-panel-year .yc-picker-header,.yc-panel-month .yc-picker-header,.yc-panel-week .yc-picker-header{padding:8px 16px;border-bottom:1px solid var(--color-neutral-3);display:flex}.yc-panel-year .yc-picker-header .yc-picker-header-icon,.yc-panel-month .yc-picker-header .yc-picker-header-icon,.yc-panel-week .yc-picker-header .yc-picker-header-icon{cursor:pointer;width:24px;height:24px;margin-right:2px;margin-left:2px;color:var(--color-text-2);font-size:12px;line-height:24px;text-align:center;background-color:var(--color-bg-popup);border-radius:50%;transition:all .1s cubic-bezier(0, 0, 1, 1);user-select:none}.yc-panel-year .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-month .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-week .yc-picker-header .yc-picker-header-icon:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-header .yc-picker-header-title,.yc-panel-month .yc-picker-header .yc-picker-header-title,.yc-panel-week .yc-picker-header .yc-picker-header-title{flex:1;color:var(--color-text-1);font-size:14px;line-height:24px;display:flex;justify-content:center;align-items:center}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label{cursor:pointer;padding:2px;border-radius:2px;transition:all .1s}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-body,.yc-panel-month .yc-picker-body,.yc-panel-week .yc-picker-body{padding:14px 16px}.yc-panel-year .yc-picker-body .yc-picker-row,.yc-panel-month .yc-picker-body .yc-picker-row,.yc-panel-week .yc-picker-body .yc-picker-row{padding:2px 0;display:flex}.yc-panel-week{width:298px}.yc-panel-week .yc-picker-week-list{width:100%;padding:14px 16px 0 16px;display:flex}.yc-panel-week .yc-picker-week-list .yc-picker-week-list-item{flex:1;height:32px;padding:0;color:#7d7d7f;font-weight:400;display:flex;justify-content:center;align-items:center}.yc-panel-week .yc-picker-body .yc-picker-week-row:not(.yc-picker-week-row-selected):not(
+.yc-panel-year,.yc-panel-month,.yc-panel-week,.yc-panel-date{width:265px;display:flex;flex-direction:column}.yc-panel-year .yc-picker-header,.yc-panel-month .yc-picker-header,.yc-panel-week .yc-picker-header,.yc-panel-date .yc-picker-header{padding:8px 16px;border-bottom:1px solid var(--color-neutral-3);display:flex}.yc-panel-year .yc-picker-header .yc-picker-header-icon,.yc-panel-month .yc-picker-header .yc-picker-header-icon,.yc-panel-week .yc-picker-header .yc-picker-header-icon,.yc-panel-date .yc-picker-header .yc-picker-header-icon{cursor:pointer;width:24px;height:24px;margin-right:2px;margin-left:2px;color:var(--color-text-2);font-size:12px;line-height:24px;text-align:center;background-color:var(--color-bg-popup);border-radius:50%;transition:all .1s cubic-bezier(0, 0, 1, 1);user-select:none}.yc-panel-year .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-month .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-week .yc-picker-header .yc-picker-header-icon:hover,.yc-panel-date .yc-picker-header .yc-picker-header-icon:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-header .yc-picker-header-title,.yc-panel-month .yc-picker-header .yc-picker-header-title,.yc-panel-week .yc-picker-header .yc-picker-header-title,.yc-panel-date .yc-picker-header .yc-picker-header-title{flex:1;color:var(--color-text-1);font-size:14px;line-height:24px;display:flex;justify-content:center;align-items:center}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label,.yc-panel-date .yc-picker-header .yc-picker-header-title .yc-picker-header-label{cursor:pointer;padding:2px;border-radius:2px;transition:all .1s}.yc-panel-year .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-month .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-week .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover,.yc-panel-date .yc-picker-header .yc-picker-header-title .yc-picker-header-label:hover{background-color:var(--color-fill-3)}.yc-panel-year .yc-picker-week-list,.yc-panel-month .yc-picker-week-list,.yc-panel-week .yc-picker-week-list,.yc-panel-date .yc-picker-week-list{width:100%;padding:14px 16px 0 16px;display:flex}.yc-panel-year .yc-picker-week-list .yc-picker-week-list-item,.yc-panel-month .yc-picker-week-list .yc-picker-week-list-item,.yc-panel-week .yc-picker-week-list .yc-picker-week-list-item,.yc-panel-date .yc-picker-week-list .yc-picker-week-list-item{flex:1;height:32px;padding:0;color:#7d7d7f;font-weight:400;display:flex;justify-content:center;align-items:center}.yc-panel-year .yc-picker-body,.yc-panel-month .yc-picker-body,.yc-panel-week .yc-picker-body,.yc-panel-date .yc-picker-body{padding:14px 16px}.yc-panel-year .yc-picker-body .yc-picker-row,.yc-panel-month .yc-picker-body .yc-picker-row,.yc-panel-week .yc-picker-body .yc-picker-row,.yc-panel-date .yc-picker-body .yc-picker-row{padding:2px 0;display:flex}.yc-panel-week{width:298px}.yc-panel-week .yc-picker-body .yc-picker-week-row:not(.yc-picker-week-row-selected):not(
           .yc-picker-week-row-disabled
-        ):hover .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-fill-3)}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date{padding-left:0;padding-right:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date .yc-picker-date-value{border-radius:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date .yc-picker-date-value{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date .yc-picker-date-value{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:rgb(var(--primary-6));color:var(--color-white);transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected.yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-link-light-3);color:var(--color-white)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date{cursor:not-allowed;background-color:var(--color-fill-1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{cursor:not-allowed;background-color:transparent;color:var(--color-text-4)}.yc-picker-container{overflow:hidden;min-height:60px;background-color:var(--color-bg-popup);border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-medium);box-shadow:0 2px 5px #0000001a;display:flex}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer{width:min-content;min-width:100%}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-extra-wrapper{padding:8px 24px;border-top:1px solid var(--color-neutral-3);color:var(--color-text-1);font-size:12px}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{padding:8px;border-top:1px solid var(--color-neutral-3);display:flex;align-items:center;justify-content:flex-end;gap:10px}.yc-picker-container .yc-picker-shortcuts{overflow-y:auto;padding:10px 8px;flex:1;display:flex;flex-direction:column;gap:5px}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-left{border-right:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-right{border-left:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-bottom{padding:0;overflow:hidden;flex-direction:row;flex-wrap:wrap;gap:5px 10px}.yc-picker-container-shortcuts-right{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{justify-content:space-between}.yc-picker-cell{flex:1}.yc-picker-cell .yc-picker-date{cursor:pointer;width:100%;height:100%;padding:4px;display:flex;justify-content:center}.yc-picker-cell .yc-picker-date .yc-picker-date-value{cursor:pointer;height:24px;width:100%;border-radius:24px;color:var(--color-text-4);font-size:14px;line-height:24px;text-align:center}.yc-picker-cell-in-view .yc-picker-date .yc-picker-date-value{color:var(--color-text-1);font-weight:500}.yc-picker-cell-today{position:relative}.yc-picker-cell-today:after{position:absolute;bottom:-2px;left:50%;display:block;width:4px;height:4px;margin-left:-2px;background-color:rgb(var(--primary-6));border-radius:50%;content:''}.yc-picker-cell-selected .yc-picker-date .yc-picker-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-picker-cell-disabled .yc-picker-date{background-color:var(--color-fill-1);cursor:not-allowed}.yc-picker-cell-disabled .yc-picker-date .yc-picker-date-value{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.yc-picker-cell-hoverable.yc-picker-cell-in-view:not(.yc-picker-cell-selected):not(.yc-picker-cell-disabled) .yc-picker-date .yc-picker-date-value:hover{color:var(--color-text-1);background-color:var(--color-fill-3)}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-icon-button{display:flex}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-picker-suffix-icon{display:none}.yc-picker-allow-clear .yc-icon-button{font-size:16px;display:none}.yc-picker-allow-clear .yc-picker-suffix-icon{font-size:16px;height:100%;display:flex;justify-content:center;align-items:center}
+        ):hover .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-fill-3)}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date{padding-left:0;padding-right:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-picker-cell .yc-picker-date .yc-picker-date-value{border-radius:0}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-first .yc-picker-date .yc-picker-date-value{border-top-left-radius:24px;border-bottom-left-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row .yc-week-picker-cell-last .yc-picker-date .yc-picker-date-value{border-top-right-radius:24px;border-bottom-right-radius:24px}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:rgb(var(--primary-6));color:var(--color-white);transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-selected.yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{background-color:var(--color-link-light-3);color:var(--color-white)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date{cursor:not-allowed;background-color:var(--color-fill-1)}.yc-panel-week .yc-picker-body .yc-picker-week-row-disabled .yc-picker-cell:not(:first-child) .yc-picker-date .yc-picker-date-value{cursor:not-allowed;background-color:transparent;color:var(--color-text-4)}.yc-picker-container{overflow:hidden;min-height:60px;background-color:var(--color-bg-popup);border:1px solid var(--color-neutral-3);border-radius:var(--border-radius-medium);box-shadow:0 2px 5px #0000001a;display:flex}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer{width:min-content;min-width:100%}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-extra-wrapper{padding:8px 24px;border-top:1px solid var(--color-neutral-3);color:var(--color-text-1);font-size:12px}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{width:100%;padding:8px;border-top:1px solid var(--color-neutral-3);display:flex;align-items:center;justify-content:space-between;gap:10px}.yc-picker-container .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-now-wrapper{height:36px;border-top:1px solid var(--color-neutral-3);line-height:36px;display:flex;justify-content:center;align-items:center}.yc-picker-container .yc-picker-shortcuts{overflow-y:auto;padding:10px 8px;flex:1;display:flex;flex-direction:column;gap:5px}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-left{border-right:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-right{border-left:1px solid var(--color-neutral-3)}.yc-picker-container .yc-picker-shortcuts.yc-picker-shortcuts-bottom{padding:0;overflow:hidden;flex-direction:row;flex-wrap:wrap;gap:5px 10px}.yc-picker-container-shortcuts-right{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom{flex-direction:row-reverse}.yc-picker-container-shortcuts-bottom .yc-picker-panel-wrapper .yc-picker-footer .yc-picker-footer-btn-wrapper{justify-content:space-between}.yc-picker-cell{flex:1}.yc-picker-cell .yc-picker-date{cursor:pointer;width:100%;height:100%;padding:4px;display:flex;justify-content:center}.yc-picker-cell .yc-picker-date .yc-picker-date-value{cursor:pointer;height:24px;width:100%;border-radius:24px;color:var(--color-text-4);font-size:14px;line-height:24px;text-align:center}.yc-picker-cell-in-view .yc-picker-date .yc-picker-date-value{color:var(--color-text-1);font-weight:500}.yc-picker-cell-today{position:relative}.yc-picker-cell-today:after{position:absolute;bottom:-2px;left:50%;display:block;width:4px;height:4px;margin-left:-2px;background-color:rgb(var(--primary-6));border-radius:50%;content:''}.yc-picker-cell-selected .yc-picker-date .yc-picker-date-value{color:var(--color-white);background-color:rgb(var(--primary-6));transition:background-color .1s cubic-bezier(0, 0, 1, 1)}.yc-picker-cell-disabled .yc-picker-date{background-color:var(--color-fill-1);cursor:not-allowed}.yc-picker-cell-disabled .yc-picker-date .yc-picker-date-value{color:var(--color-text-4);background-color:transparent;cursor:not-allowed}.yc-picker-cell-hoverable.yc-picker-cell-in-view:not(.yc-picker-cell-selected):not(.yc-picker-cell-disabled) .yc-picker-date .yc-picker-date-value:hover{color:var(--color-text-1);background-color:var(--color-fill-3)}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-icon-button{display:flex}.yc-picker-allow-clear:not(.yc-input-disabled):hover .yc-picker-suffix-icon{display:none}.yc-picker-allow-clear .yc-icon-button{font-size:16px;display:none}.yc-picker-allow-clear .yc-picker-suffix-icon{font-size:16px;height:100%;display:flex;justify-content:center;align-items:center}