@bifrostui/react 2.0.0-alpha.0 → 2.0.0-alpha.10

package/dist/CSSTransition/demo/CSSTransitionDemo.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index.less';
+declare const StackDemo: () => React.JSX.Element;
+export default StackDemo;

package/dist/CSSTransition/demo/CSSTransitionDemo.js

@@ -0,0 +1,76 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransitionDemo_exports = {};
+__export(CSSTransitionDemo_exports, {
+  default: () => CSSTransitionDemo_default
+});
+module.exports = __toCommonJS(CSSTransitionDemo_exports);
+var import_react = __toESM(require("react"));
+var import_react2 = require("@bifrostui/react");
+var import_index = require("./index.css");
+const StackDemo = () => {
+  const [open, setOpen] = (0, import_react.useState)(true);
+  const transitionClasses = {
+    enter: "slide-enter",
+    enterActive: "slide-enter-active",
+    enterDone: "slide-enter-done",
+    exit: "slide-exit",
+    exitActive: "slide-exit-active",
+    exitDone: "slide-exit-done"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      style: {
+        width: "300px",
+        height: "100px",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react2.Button,
+      {
+        onClick: () => {
+          setOpen((prev) => !prev);
+        }
+      },
+      open ? "Exit" : "Enter"
+    ),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_react2.CSSTransition,
+      {
+        in: open,
+        timeout: 300,
+        unmountOnExit: false,
+        classNames: transitionClasses
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_react2.Alert, { className: "my-node", color: "success" }, "\u8FC7\u6E21\u8FC7\u7A0B\u4E2D\u4F1A\u4FEE\u6539className")
+    )
+  );
+};
+var CSSTransitionDemo_default = StackDemo;

package/dist/CSSTransition/demo/index.css

@@ -0,0 +1,25 @@
+.bui-btn {
+  margin-bottom: 18px;
+}
+.slide-enter {
+  transform: translate3d(-100%, 0, 0);
+}
+.slide-enter-active {
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-enter-done {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit {
+  transform: translate3d(0%, 0, 0);
+}
+.slide-exit-active {
+  will-change: transform;
+  transform: translate3d(-100%, 0, 0);
+  transition: transform 300ms ease 0ms;
+}
+.slide-exit-done {
+  transform: translate3d(-100%, 0, 0);
+}

package/dist/CSSTransition/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as CSSTransition } from './CSSTransition';
+export * from './CSSTransition.types';

package/dist/CSSTransition/index.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var CSSTransition_exports = {};
+__export(CSSTransition_exports, {
+  CSSTransition: () => import_CSSTransition.default,
+  default: () => import_CSSTransition.default
+});
+module.exports = __toCommonJS(CSSTransition_exports);
+var import_CSSTransition = __toESM(require("./CSSTransition"));
+__reExport(CSSTransition_exports, require("./CSSTransition.types"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSSTransition,
+  ...require("./CSSTransition.types")
+});

package/dist/Calendar/Calendar.js

@@ -59,16 +59,20 @@ __export(Calendar_exports, {
   default: () => Calendar_default
 });
 module.exports = __toCommonJS(Calendar_exports);
-var import_icons = require("@bifrostui/icons");
-var import_utils = require("@bifrostui/utils");
+var import_react = __toESM(require("react"));
 var import_clsx = __toESM(require("clsx"));
 var import_dayjs = __toESM(require("dayjs"));
 var import_isoWeek = __toESM(require("dayjs/plugin/isoWeek"));
-var import_react = __toESM(require("react"));
-var import_utils2 = require("./utils");
+var import_customParseFormat = __toESM(require("dayjs/plugin/customParseFormat"));
+var import_icons = require("@bifrostui/icons");
+var import_utils = require("@bifrostui/utils");
+var import_CSSTransition = __toESM(require("../CSSTransition"));
+var import_TransitionGroup = __toESM(require("../TransitionGroup"));
 var import_locales = require("../locales");
+var import_utils2 = require("./utils");
 var import_index = require("./index.css");
 import_dayjs.default.extend(import_isoWeek.default);
+import_dayjs.default.extend(import_customParseFormat.default);
 const classes = {
   root: "bui-calendar",
   handler: "bui-calendar-handler",
@@ -91,6 +95,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       headerBarRightIcon,
       disabledDate,
       highlightDate = "today",
+      headerVisible = false,
+      enableTransition = false,
+      CSSTransitionProps,
       dateRender,
       weekRender,
       onMonthChange,
@@ -108,6 +115,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       "headerBarRightIcon",
       "disabledDate",
       "highlightDate",
+      "headerVisible",
+      "enableTransition",
+      "CSSTransitionProps",
       "dateRender",
       "weekRender",
       "onMonthChange",
@@ -140,12 +150,10 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       defaultValue: formattedDefaultValue,
       onChange
     });
-    const selectedStartDate = (0, import_react.useMemo)(() => {
-      return calendarValue == null ? void 0 : calendarValue[0];
-    }, [calendarValue]);
-    const selectedEndDate = (0, import_react.useMemo)(() => {
-      return calendarValue == null ? void 0 : calendarValue[1];
+    const [selectedStartDate, selectedEndDate] = (0, import_react.useMemo)(() => {
+      return [calendarValue == null ? void 0 : calendarValue[0], calendarValue == null ? void 0 : calendarValue[1]];
     }, [calendarValue]);
+    const slideDirection = (0, import_react.useRef)("");
     const isMinMonth = (0, import_dayjs.default)(minDate).isSame(renderMonth, "month");
     const isMaxMonth = (0, import_dayjs.default)(maxDate).isSame(renderMonth, "month");
     const headerBarIcon = {
@@ -164,10 +172,23 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
         }
       )
     };
+    const prevValueRef = (0, import_react.useRef)(value);
     (0, import_utils.useDidMountEffect)(() => {
-      const initMonth = formattedValue === void 0 ? formattedDefaultValue == null ? void 0 : formattedDefaultValue[0] : formattedValue == null ? void 0 : formattedValue[0];
-      setRenderMonth((0, import_dayjs.default)(initMonth || minDate).toDate());
-    }, [JSON.stringify(value), JSON.stringify(defaultValue)]);
+      if (!(0, import_utils2.isEqualVal)(prevValueRef.current, value)) {
+        const latestDate = formattedValue == null ? void 0 : formattedValue[0];
+        const lastInitialValue = renderMonth;
+        const inSameMonth = isRangeMode && selectedStartDate && selectedEndDate || latestDate && (0, import_dayjs.default)(latestDate).isSame(lastInitialValue, "month");
+        if (!inSameMonth) {
+          const latestBeforeThanLast = (0, import_dayjs.default)(latestDate).isBefore(
+            lastInitialValue,
+            "month"
+          );
+          slideDirection.current = latestBeforeThanLast ? "right" : "left";
+          setRenderMonth((0, import_dayjs.default)(latestDate || minDate).toDate());
+        }
+        prevValueRef.current = value;
+      }
+    }, [JSON.stringify(value)]);
     const getDaysInMonth = (args) => {
       const m = (0, import_dayjs.default)(args).format("YYYY/MM");
       const count = (0, import_dayjs.default)(m).daysInMonth();
@@ -189,7 +210,7 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       }
       [...Array(count)].forEach((_, i) => {
         const day = (0, import_dayjs.default)(`${m}/${i + 1}`).toDate();
-        const defaultDisable = !(0, import_utils2.isRange)(day, minDate, maxDate);
+        const defaultDisable = !(0, import_utils2.isDateInRange)(day, minDate, maxDate);
         const propsDisable = disabledDate ? !!(disabledDate == null ? void 0 : disabledDate(day)) : false;
         list.push({
           day,
@@ -238,7 +259,9 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
             classes.day,
             (ins == null ? void 0 : ins.disabled) && classes.disabled,
             dayClassName
-          )
+          ),
+          "aria-disabled": ins == null ? void 0 : ins.disabled,
+          "aria-current": (0, import_dayjs.default)(ins.day).isSame((0, import_dayjs.default)(), "day") ? "date" : void 0
         },
         ins.day && (0, import_dayjs.default)(ins.day).format("D")
       );
@@ -265,9 +288,11 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       const hasSelectedDate = selectedStartDate && (0, import_utils2.isSame)(ins.day, selectedStartDate);
       triggerChange == null ? void 0 : triggerChange(e, hasSelectedDate ? null : ins.day);
     };
-    const renderDayList = () => getDaysInMonth(renderMonth).map(
-      (ins, index) => {
+    const renderDayList = () => {
+      const days = getDaysInMonth(renderMonth);
+      return days.map((ins, index) => {
         const dayStr = (0, import_dayjs.default)(ins.day).format("YYYYMMDD");
+        const isSelected = selectedStartDate && (0, import_utils2.isSame)(selectedStartDate, ins.day) || selectedEndDate && (0, import_utils2.isSame)(selectedEndDate, ins.day);
         return /* @__PURE__ */ import_react.default.createElement(
           "div",
           {
@@ -275,16 +300,20 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
               [`${classes.root}-highlight-day`]: highlightDate === "weekend" && !ins.disabled && (index % 7 === 0 || index % 7 === 6)
             }),
             key: `${dayStr}-${index}`,
-            onClick: (e) => onClickDay(e, ins)
+            onClick: (e) => onClickDay(e, ins),
+            "aria-selected": isSelected,
+            "aria-disabled": ins.disabled,
+            tabIndex: ins.disabled ? -1 : 0
           },
           dateRender ? dateRender(ins) : defaultDateRender(ins)
         );
-      }
-    );
+      });
+    };
     const onClickPrev = (e) => {
       if (!isMinMonth) {
         const month = (0, import_dayjs.default)(renderMonth).subtract(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "right";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "prev",
           month: (0, import_dayjs.default)(month).format(headerBarFormat)
@@ -295,38 +324,106 @@ const Calendar = /* @__PURE__ */ import_react.default.forwardRef(
       if (!isMaxMonth) {
         const month = (0, import_dayjs.default)(renderMonth).add(1, "month").toDate();
         setRenderMonth(month);
+        slideDirection.current = "left";
         onMonthChange == null ? void 0 : onMonthChange(e, {
           type: "next",
           month: (0, import_dayjs.default)(month).format(headerBarFormat)
         });
       }
     };
-    let data = {};
-    if (isRangeMode) {
-      data = {
-        "data-start": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD"),
-        "data-end": (0, import_dayjs.default)(selectedEndDate).format("YYYYMMDD")
-      };
-    } else {
-      data = {
-        "data-selected": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD")
+    const data = isRangeMode ? {
+      "data-start": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD"),
+      "data-end": (0, import_dayjs.default)(selectedEndDate).format("YYYYMMDD")
+    } : {
+      "data-selected": (0, import_dayjs.default)(selectedStartDate).format("YYYYMMDD")
+    };
+    const renderMonthDate = () => {
+      const hasSlideDirection = !!slideDirection.current;
+      const monthDateDom = /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          className: (0, import_clsx.default)(`${classes.root}-month`, {
+            "enable-transition": enableTransition,
+            visible: enableTransition && !hasSlideDirection
+          }),
+          "aria-label": "date select"
+        },
+        renderDayList()
+      );
+      if (!enableTransition) {
+        return monthDateDom;
+      }
+      const transitionClasses = {
+        exit: hasSlideDirection && "slide-exit",
+        exitActive: hasSlideDirection && `slide-exit-${slideDirection.current}`,
+        enter: hasSlideDirection && `slide-enter-${slideDirection.current}`,
+        enterActive: hasSlideDirection && "slide-active",
+        enterDone: "slide-enter-done"
       };
-    }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_TransitionGroup.default,
+        {
+          className: (0, import_clsx.default)(`${classes.root}-transition-group`),
+          childFactory: (element) => {
+            return import_react.default.cloneElement(element, {
+              classNames: transitionClasses
+            });
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_CSSTransition.default,
+          __spreadProps(__spreadValues({
+            timeout: 300
+          }, CSSTransitionProps), {
+            in: true,
+            appear: hasSlideDirection,
+            mountOnEnter: true,
+            unmountOnExit: true,
+            key: renderMonth.toString(),
+            classNames: transitionClasses
+          }),
+          monthDateDom
+        )
+      );
+    };
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
-      __spreadValues(__spreadProps(__spreadValues({
+      __spreadProps(__spreadValues(__spreadProps(__spreadValues({
         ref,
         className: (0, import_clsx.default)(classes.root, className, {
           [`${classes.root}-highlight-weekend`]: highlightDate === "weekend"
         })
       }, others), {
         "data-mode": mode
-      }), data),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickPrev, className: `${classes.handler}-btn` }, headerBarIcon.left), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text` }, (0, import_dayjs.default)(renderMonth).format(headerBarFormat)), /* @__PURE__ */ import_react.default.createElement("div", { onClick: onClickNext, className: `${classes.handler}-btn` }, headerBarIcon.right)),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w) => {
+      }), data), {
+        role: "application",
+        "aria-label": "Calendar"
+      }),
+      !headerVisible && /* @__PURE__ */ import_react.default.createElement("div", { className: classes.handler }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickPrev,
+          className: `${classes.handler}-btn`,
+          "aria-label": "prev month",
+          tabIndex: 0
+        },
+        headerBarIcon.left
+      ), /* @__PURE__ */ import_react.default.createElement("div", { className: `${classes.handler}-text`, "aria-live": "polite" }, (0, import_dayjs.default)(renderMonth).format(headerBarFormat)), /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          role: "button",
+          onClick: onClickNext,
+          className: `${classes.handler}-btn`,
+          "aria-label": "next month",
+          tabIndex: 0
+        },
+        headerBarIcon.right
+      )),
+      /* @__PURE__ */ import_react.default.createElement("div", { className: classes.week }, SUNDAY_WEEK_DATA == null ? void 0 : SUNDAY_WEEK_DATA.map((w, idx) => {
         return weekRender ? weekRender(w) : /* @__PURE__ */ import_react.default.createElement("div", { key: w, className: `${classes.week}-item` }, w);
       })),
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_clsx.default)(`${classes.root}-month`) }, renderDayList())
+      renderMonthDate()
     );
   }
 );

package/dist/Calendar/Calendar.types.d.ts

@@ -1,5 +1,6 @@
-import { OverrideProps } from '@bifrostui/types';
 import React from 'react';
+import { OverrideProps } from '@bifrostui/types';
+import { CSSTransitionProps } from '../CSSTransition/CSSTransition.types';
 export interface ICalendarInstance {
     /** 日期对象 */
     day: Date;
@@ -74,6 +75,20 @@ export type CalendarProps<D extends React.ElementType = 'div', P = {}> = Overrid
          * weekend 可选的周末高亮显示
          */
         highlightDate?: 'today' | 'weekend';
+        /**
+         * 是否隐藏头部
+         * default: false
+         */
+        headerVisible?: boolean;
+        /**
+         * 是否开启切换动效
+         * default: false
+         */
+        enableTransition?: boolean;
+        /**
+         * CSSTransition组件属性，仅enableTransition=true时生效
+         */
+        CSSTransitionProps?: CSSTransitionProps;
         /**
          * 自定义日期单元格的内容
          */

package/dist/Calendar/__tests__/fixtures/A11yDemos.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalendarDemo: () => React.JSX.Element;

package/dist/Calendar/__tests__/fixtures/A11yDemos.js

@@ -0,0 +1,41 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var A11yDemos_exports = {};
+__export(A11yDemos_exports, {
+  CalendarDemo: () => CalendarDemo
+});
+module.exports = __toCommonJS(A11yDemos_exports);
+var import_react = __toESM(require("react"));
+var import_Calendar = __toESM(require("../../Calendar"));
+const CalendarDemo = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_Calendar.default, null);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CalendarDemo
+});

package/dist/Calendar/index.css

@@ -1,21 +1,24 @@
 :root,
 page,
 xhs-page {
+  --bui-calendar-transition-exit: transform 300ms ease 0ms;
+  --bui-calendar-transition-enter: transform 300ms ease 0ms;
+  --bui-calendar-transition-group-min-height: 228px;
   --bui-calendar-padding: 6px 12px 7px;
   --bui-calendar-week-height: 30px;
   --bui-calendar-handler-height: 28px;
-  --bui-calendar-handler-margin-bottom: 7px;
+  --bui-calendar-handler-margin: 0 0 7px 0;
   --bui-calendar-handler-text-width: 80px;
   --bui-calendar-handler-btn-width: 46px;
   --bui-calendar-handler-btn-height: 100%;
   --bui-calendar-handler-btn-icon-font-size: 28px;
   --bui-calendar-day-box-height: 30px;
-  --bui-calendar-day-box-margin-bottom: 7px;
+  --bui-calendar-day-box-margin: 0 0 7px 0;
   --bui-calendar-day-disabled-color: #9c9ca5;
   --bui-calendar-middle-color: #000;
-  --bui-calendar-middle-background-color: #ffeaf1;
+  --bui-calendar-middle-bg-color: #ffeaf1;
   --bui-calendar-range-both-ends-color: #000;
-  --bui-calendar-range-both-ends-background-color: #ffc7da;
+  --bui-calendar-range-both-ends-bg-color: #ffc7da;
 }
 .bui-calendar {
   overflow: hidden;
@@ -52,7 +55,7 @@ xhs-page {
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: var(--bui-calendar-handler-margin-bottom);
+  margin-bottom: var(--bui-calendar-handler-margin);
 }
 .bui-calendar-handler-text {
   width: var(--bui-calendar-handler-text-width);
@@ -72,15 +75,28 @@ xhs-page {
 .bui-calendar-handler-btn-icon {
   font-size: var(--bui-calendar-handler-btn-icon-font-size);
 }
+.bui-calendar-transition-group {
+  position: relative;
+  min-height: var(--bui-calendar-transition-group-min-height);
+}
 .bui-calendar-month {
   display: flex;
   flex-wrap: wrap;
   margin-bottom: var(--bui-spacing-sm);
 }
+.bui-calendar-month.enable-transition {
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+}
+.bui-calendar-month.visible {
+  visibility: visible;
+}
 .bui-calendar-day-box {
   width: 14.28%;
   height: var(--bui-calendar-day-box-height);
-  margin-bottom: var(--bui-calendar-day-box-margin-bottom);
+  margin: var(--bui-calendar-day-box-margin);
 }
 .bui-calendar-highlight-day .bui-calendar-day {
   color: var(--bui-color-primary);
@@ -106,11 +122,11 @@ xhs-page {
 .bui-calendar-middle {
   color: var(--bui-calendar-middle-color);
   border-radius: 0;
-  background-color: var(--bui-calendar-middle-background-color);
+  background-color: var(--bui-calendar-middle-bg-color);
 }
 .bui-calendar-start {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
 }
 .bui-calendar-range {
   border-top-right-radius: 0;
@@ -118,7 +134,34 @@ xhs-page {
 }
 .bui-calendar-end {
   color: var(--bui-calendar-range-both-ends-color);
-  background-color: var(--bui-calendar-range-both-ends-background-color);
+  background-color: var(--bui-calendar-range-both-ends-bg-color);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+.bui-calendar .slide-enter-left {
+  transform: translate3d(100%, 0, 0);
+}
+.bui-calendar .slide-enter-right {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-enter-done {
+  visibility: visible;
+}
+.bui-calendar .slide-exit {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-exit);
+}
+.bui-calendar .slide-active {
+  visibility: visible;
+  will-change: transform;
+  transform: translate3d(0%, 0, 0);
+  transition: var(--bui-calendar-transition-enter);
+}
+.bui-calendar .slide-exit-left {
+  transform: translate3d(-100%, 0, 0);
+}
+.bui-calendar .slide-exit-right {
+  transform: translate3d(100%, 0, 0);
+}

package/dist/Calendar/utils.d.ts

@@ -3,18 +3,22 @@ import { ICalendarMode, ICalendarValue } from './Calendar.types';
  * 判断日期是否相同
  */
 export declare const isSame: (start: Date, end: Date) => boolean;
+/**
+ * 判断value、defaultValue是否相同
+ */
+export declare const isEqualVal: (a: ICalendarValue, b: ICalendarValue) => boolean;
 /**
  * 计算日期差
  */
-export declare const geteDateDiff: (a: Date, b: Date) => number;
+export declare const getDateDiff: (a: Date, b: Date) => number;
 /**
  * 判断是否在日期区间内
  */
-export declare const isRange: (current: Date, start: Date, end: Date) => boolean;
+export declare const isDateInRange: (current: Date, start: Date, end: Date) => boolean;
 /**
  * 取数组第一个日期为开始日期，最后一个日期为结束日期
  */
-export declare const generateRangeDate: (value: Date[]) => {
+export declare const generateDateRange: (value: Date[]) => {
     start: Date;
     end: Date;
 };