@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.10

package/README.md

@@ -0,0 +1,95 @@
+# @qsxy/element-plus-react
+
+[![NPM version](https://img.shields.io/npm/v/element-plus-react.svg?style=flat)](https://npmjs.org/package/@qsxy/element-plus-react)
+[![NPM downloads](http://img.shields.io/npm/dm/element-plus-react.svg?style=flat)](https://npmjs.org/package/@qsxy/element-plus-react)
+
+-   [API 文档](https://ahqsluoye.github.io/element-plus-react/)
+
+## Usage
+
+```javascript
+// how to use
+import '@qsxy/element-plus-react/dist/index.css';
+import { ElButton, ElLink } from '@qsxy/element-plus-react';
+```
+
+### Change the SCSS variable in the project
+
+element-plus-react is using SCSS. If your project also uses SCSS, you can directly change the style variable of Element in the project. Create a new style file, such as element-variables.csss, and write the following content:
+
+### 在项目中改变 SCSS 变量
+
+element-plus-react 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：
+
+/_ Change the theme color variable _/
+
+/_ 改变主题色变量 _/
+
+```scss
+@use 'sass:math';
+
+@mixin set-color-mix-level($number, $mode: 'light', $--el-color-primary, $mix-color: #ffffff) {
+    --el-color-primary-#{$mode}-#{$number}: #{mix($mix-color, $--el-color-primary, math.percentage(math.div($number, 10)))};
+}
+
+// Theme color variable
+// 主题色变量
+$--el-color-primary: #4f8ffa;
+:root {
+    // Theme color variable
+    // 主题色变量
+    --el-color-primary: #4f8ffa;
+    // Theme background color variable (button class)
+    // 主题背景颜色变量（按钮类）
+    --el-bg-color-primary: #4f8ffa;
+    // Theme border color variable (button class)
+    // 主题边框颜色变量（按钮类）
+    --btn-border-color: #48aff9;
+
+    @each $i in (3, 5, 7, 8, 9) {
+        @include set-color-mix-level($i, 'light', $--el-color-primary, #ffffff);
+    }
+
+    @include set-color-mix-level(2, 'dark', $--el-color-primary, #000000);
+
+    // dark mode 暗黑模式
+    &.is-dark {
+        --el-color-primary: #{mix(#141414, $--el-color-primary, 5)};
+
+        @each $i in (3, 5, 7, 8, 9) {
+            @include set-color-mix-level($i, 'light', $--el-color-primary, #141414);
+        }
+
+        @include set-color-mix-level(2, 'dark', $--el-color-primary, #141414);
+    }
+}
+```
+
+/_ Change icon font path variable, required _/
+
+/_ 改变 icon 字体路径变量，必需 _/
+
+```scss
+$fa-font-path: '~@/assets/fonts';
+@import '@qsxy/element-plus-react/theme-chalk/index.scss';
+```
+
+## Warm Reminder
+
+Currently, this library is in the development and testing stage, and there may be some inevitable issues. If you encounter any problems, please feel free to raise an issue for me, and I will fix them as soon as possible.
+
+目前该库为开发测试阶段，会有一些不可避免的问题，如果您发现了一些问题，欢迎提 Issues 给我，我会尽快修复
+
+## Development
+
+```bash
+# install dependencies
+$ npm i @qsxy/element-plus-react
+# It is recommended to use (to avoid React version conflicts)
+# 推荐使用（避免react版本冲突）
+$ pnpm add @qsxy/element-plus-react
+```
+
+## LICENSE
+
+MIT

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { AvatarProps } from './typings';
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,86 @@
+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);
+
+// src/Avatar/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  default: () => Avatar_default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Icon = __toESM(require("../Icon/Icon"));
+var import_base = require("../Util/base");
+var import_hooks = require("../hooks");
+var Avatar = (0, import_react.memo)((props) => {
+  const { icon, size = "default", shape = "circle", src, srcSet, alt, fit = "cover", classPrefix = "avatar", onError } = props;
+  const { b, m, cssVarBlock } = (0, import_hooks.useClassNames)(classPrefix);
+  const [hasLoadError, setHasLoadError] = (0, import_react.useState)(false);
+  const handleError = (e) => {
+    setHasLoadError(true);
+    onError(e);
+  };
+  (0, import_react.useEffect)(() => {
+    if ((0, import_base.isNotEmpty)(src)) {
+      setHasLoadError(false);
+    }
+  }, [src]);
+  const avatarClass = (0, import_react.useMemo)(() => {
+    const classList = [b()];
+    if ((0, import_base.isString)(size)) {
+      classList.push(m(size));
+    }
+    if (icon) {
+      classList.push(m("icon"));
+    }
+    if (shape) {
+      classList.push(m(shape));
+    }
+    return (0, import_classnames.default)(classList);
+  }, [b, icon, m, shape, size]);
+  const sizeStyle = (0, import_react.useMemo)(() => {
+    return (0, import_base.isNumber)(size) ? cssVarBlock({
+      size: (0, import_base.addUnit)(size) || ""
+    }) : void 0;
+  }, [cssVarBlock, size]);
+  const children = (0, import_react.useMemo)(() => icon ? /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: icon }) : props.children, [icon, props.children]);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: avatarClass, style: sizeStyle }, (src || srcSet) && !hasLoadError ? /* @__PURE__ */ import_react.default.createElement(
+    "img",
+    {
+      src,
+      alt,
+      srcSet,
+      style: {
+        objectFit: fit
+      },
+      onError: handleError
+    }
+  ) : children);
+});
+Avatar.displayName = "ElAvatar";
+var Avatar_default = Avatar;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './typings';

package/dist/{VirtualList → Avatar}/index.js

@@ -26,14 +26,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/VirtualList/index.ts
-var VirtualList_exports = {};
-__export(VirtualList_exports, {
-  VirtualList: () => import_VirtualList.default
+// src/Avatar/index.ts
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => import_Avatar.default
 });
-module.exports = __toCommonJS(VirtualList_exports);
-var import_VirtualList = __toESM(require("./VirtualList"));
+module.exports = __toCommonJS(Avatar_exports);
+var import_Avatar = __toESM(require("./Avatar"));
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  VirtualList
+  Avatar
 });

package/dist/Avatar/typings.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IconName } from '../Icon';
+import { BaseProps, NativeProps } from '../types/common';
+export interface AvatarProps extends BaseProps, NativeProps<'--el-avatar-text-color' | '--el-avatar-bg-color' | '--el-avatar-text-size' | '--el-avatar-icon-size' | '--el-avatar-border-radius' | '--el-avatar-size-large' | '--el-avatar-size-small' | '--el-avatar-size'> {
+    /** 设置 Avatar 的图标类型，具体参考 Icon 组件	 */
+    icon?: IconName;
+    /** Avatar 大小	*/
+    size?: number | 'large' | 'default' | 'small' | '';
+    /** Avatar 形状	 */
+    shape?: 'circle' | 'square';
+    /** Avatar 图片的源地址 */
+    src?: string;
+    /** 图片 Avatar 的原生 srcset 属性 */
+    srcSet?: string;
+    /** 图片 Avatar 的原生 alt 属性 */
+    alt?: string;
+    /** 当展示类型为图片的时候，设置图片如何适应容器 */
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    /** 图片加载失败时触发 */
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/dist/{VirtualList/interface.js → Avatar/typings.js}

@@ -12,6 +12,6 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// src/VirtualList/interface.ts
-var interface_exports = {};
-module.exports = __toCommonJS(interface_exports);
+// src/Avatar/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/Badge/Badge.js

@@ -38,8 +38,9 @@ var import_react = __toESM(require("react"));
 var import_Transition = __toESM(require("../Transition/Transition"));
 var import_hooks = require("../hooks");
 var Badge = (0, import_react.forwardRef)((props, ref) => {
-  const { type, isDot, value, max, hidden, showZero = true, color, offset = [], badgeClass, badgeStyle = {} } = props;
+  const { type = "danger", isDot, value, max, hidden, showZero = true, color, offset = [], badgeClass, badgeStyle = {} } = props;
   const { b, e, em, is } = (0, import_hooks.useClassNames)("badge");
+  const nodeRef = (0, import_react.useRef)(null);
   const content = (0, import_react.useMemo)(() => {
     if (isDot) {
       return "";
@@ -49,9 +50,10 @@ var Badge = (0, import_react.forwardRef)((props, ref) => {
     }
     return `${value}`;
   }, [isDot, max, value]);
-  return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(b(), props.className), style: props.style }, props.children, /* @__PURE__ */ import_react.default.createElement(import_Transition.default, { name: "r-zoom-in-center", visible: !hidden && (!!content || isDot) && !(!showZero && value === 0), display: "inline-flex" }, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(b(), props.className), style: props.style }, props.children, /* @__PURE__ */ import_react.default.createElement(import_Transition.default, { nodeRef, name: b("zoom-in-center", false), visible: !hidden && (!!content || isDot) && !(!showZero && value === 0), display: "inline-flex" }, /* @__PURE__ */ import_react.default.createElement(
     "sup",
     {
+      ref: nodeRef,
       className: (0, import_classnames.default)(e`content`, em("content", type), is({ fixed: !!props.children, dot: isDot }), badgeClass),
       style: { background: color, marginRight: (offset == null ? void 0 : offset[0]) ? -offset[0] : null, marginTop: offset == null ? void 0 : offset[1], ...badgeStyle }
     },
@@ -59,7 +61,4 @@ var Badge = (0, import_react.forwardRef)((props, ref) => {
   )));
 });
 Badge.displayName = "ElBadge";
-Badge.defaultProps = {
-  type: "danger"
-};
 var Badge_default = (0, import_react.memo)(Badge);

package/dist/Badge/typings.d.ts

@@ -1,14 +1,24 @@
 import React from 'react';
 import { AnimationEventProps, BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface BadgeProps extends BaseProps, NativeProps, AnimationEventProps {
+    /** 显示值 */
     value?: string | number;
+    /** 最大值，超过最大值会显示 {max}+。 只有当 value 是数字类型时起作用。 */
     max?: number;
+    /** 是否显示小圆点。 */
     isDot?: boolean;
+    /** 是否隐藏 Badge。 */
     hidden?: Boolean;
+    /** 类型 */
     type?: TypeAttributes.Appearance;
+    /** 值为零时是否显示 Badge */
     showZero?: boolean;
+    /** 背景色 */
     color?: string;
+    /** badge 的偏移量 */
     offset?: [number, number];
+    /** 自定义 badge 样式 */
     badgeStyle?: React.CSSProperties;
+    /** 自定义 badge 类名  */
     badgeClass?: string;
 }

package/dist/Breadcrumb/Breadcrumb.js

@@ -37,13 +37,10 @@ var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_hooks = require("../hooks");
 var Breadcrumb = (0, import_react.memo)((props) => {
-  const { classPrefix = "breadcrumb", separator } = props;
+  const { classPrefix = "breadcrumb", separator = "/" } = props;
   const { b } = (0, import_hooks.useClassNames)(classPrefix);
   return /* @__PURE__ */ import_react.default.createElement(BreadcrumbContext.Provider, { value: { separator } }, /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), props.className), style: props.style }, props.children));
 });
-Breadcrumb.defaultProps = {
-  separator: "/"
-};
 var Breadcrumb_default = Breadcrumb;
 var BreadcrumbContext = (0, import_react.createContext)({
   separator: "/"

package/dist/Breadcrumb/typings.d.ts

@@ -2,12 +2,16 @@ import React from 'react';
 import { RouteProps } from 'react-router-dom';
 import { BaseProps, NativeProps } from '../types/common';
 export interface BreadcrumbProps extends BaseProps, NativeProps {
+    /** 分隔符 */
     separator?: string | React.ReactElement<any>;
 }
 export interface BreadcrumbContextProps {
+    /** 分隔符 */
     separator: string | React.ReactElement<any>;
 }
 export interface BreadcrumbItemProps extends BaseProps, NativeProps {
+    /** 路由跳转目标，同 vue-router 的 to 属性	 */
     to?: string | RouteProps;
+    /** 如果设置该属性为 true, 导航将不会留下历史记录	 */
     onClick?: (to?: string | RouteProps) => void;
 }

package/dist/Button/Button.d.ts

@@ -7,7 +7,6 @@ declare const Comp: (props: ButtonProps & {
 type InternalType = typeof Comp;
 interface CompInterface extends InternalType {
     displayName?: string;
-    defaultProps?: ButtonProps;
     Group: typeof ButtonGroup;
 }
 declare const Button: CompInterface;

package/dist/Button/Button.js

@@ -43,14 +43,32 @@ var import_ButtonGroupContext = require("./ButtonGroupContext");
 var InternalButton = (props, ref) => {
   const { disabled: groupDisabled, type: groupType, size: groupSize, bgColor, borderColor } = (0, import_react.useContext)(import_ButtonGroupContext.ButtonGroupContext);
   const { button } = (0, import_react.useContext)(import_ConfigProvider.ConfigProvider);
-  const { active, block, plain, round, circle, link, text, bg, dashed, className, loading, loadingIcon, loadingSlot, nativeType, icon, onClick, ...rest } = props;
+  const {
+    active,
+    block,
+    plain,
+    round,
+    circle,
+    link,
+    text,
+    bg,
+    dashed,
+    className,
+    loading,
+    loadingIcon = "spinner",
+    loadingSlot,
+    nativeType = "button",
+    icon = false,
+    onClick,
+    ...rest
+  } = props;
   const disabled = (0, import_hooks.useDisabled)(groupDisabled ?? props.disabled);
   const size = (0, import_hooks.useSize)(groupSize ?? props.size);
   const { b, m, is } = (0, import_hooks.useClassNames)("button");
   const [htmlInputProps] = (0, import_hooks.partitionHTMLProps)(rest);
   const containerRef = (0, import_react.useRef)(null);
-  const spin = (0, import_react.useMemo)(() => loadingSlot ?? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: loadingIcon, className: (0, import_classnames.default)(b`spin`, is`loading`), spin: true }), [loadingSlot, loadingIcon, import_classnames.default, b, is]);
-  const type = (0, import_react.useMemo)(() => groupType ?? props.type, [groupType, props.type]);
+  const spin = (0, import_react.useMemo)(() => loadingSlot ?? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: loadingIcon, className: (0, import_classnames.default)(b`spin`, is`loading`), spin: true }), [loadingSlot, loadingIcon, b, is]);
+  const type = (0, import_react.useMemo)(() => groupType ?? (props.type || "default"), [groupType, props.type]);
   const autoInsertSpace = (0, import_react.useMemo)(() => props.autoInsertSpace ?? (button == null ? void 0 : button.autoInsertSpace) ?? true, [button == null ? void 0 : button.autoInsertSpace, props.autoInsertSpace]);
   const children = (0, import_react.useMemo)(() => {
     if (autoInsertSpace && typeof props.children === "string" && props.children.length === 2 && /[\u4e00-\u9fa5]{2}/.test(props.children)) {
@@ -88,12 +106,6 @@ var InternalButton = (props, ref) => {
 };
 var Comp = (0, import_react.memo)((0, import_react.forwardRef)(InternalButton));
 var Button = Comp;
-Button.defaultProps = {
-  type: "default",
-  nativeType: "button",
-  icon: false,
-  loadingIcon: "spinner"
-};
 Button.Group = import_ButtonGroup.default;
 Button.displayName = "ElButton";
 var Button_default = Button;

package/dist/Button/typings.d.ts

@@ -2,36 +2,64 @@ import React from 'react';
 import { IconName } from '../Icon';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface ButtonProps extends Omit<React.AllHTMLAttributes<HTMLElement>, 'loading' | 'size' | 'icon' | 'style' | 'children'>, BaseProps, NativeProps {
+    /** 尺寸 */
     size?: TypeAttributes.Size;
+    /** 类型 */
     type?: TypeAttributes.Appearance;
+    /** 是否为朴素按钮 */
     plain?: boolean;
+    /** 是否为圆角按钮 */
     round?: boolean;
+    /** 是否为圆形按钮 */
     circle?: boolean;
+    /** 是否为文字按钮 */
     text?: boolean;
+    /** 是否显示文字按钮背景颜色	 */
     bg?: boolean;
+    /** 是否为链接按钮 */
     link?: boolean;
+    /** 是否为虚线按钮 */
     dashed?: boolean;
+    /** 是否为加载中状态 */
     loading?: boolean;
+    /** 自定义加载中图标 */
     loadingIcon?: IconName;
+    /** 自定义加载中图标 */
     loadingSlot?: React.ReactElement;
+    /** 是否为激活状态 */
     active?: boolean;
+    /** 是否为禁用状态 */
     disabled?: boolean;
+    /** 自定义图标 */
     icon?: IconName | boolean;
+    /** 自定义颜色 */
     color?: TypeAttributes.Color;
+    /** Format button to appear inside a content bloc */
     block?: boolean;
+    /** 自动在两个中文字符之间插入空格 */
     autoInsertSpace?: boolean;
+    /** Providing a `href` will render an `<a>` element, _styled_ as a button */
     href?: string;
+    /** Where to display the linked URL */
     target?: string;
+    /** Defines HTML button type attribute */
     nativeType?: 'button' | 'reset' | 'submit';
 }
 export type ButtonRef = {
+    /** 按钮 html 元素	 */
     ref: React.MutableRefObject<HTMLButtonElement>;
+    /** 按钮尺寸 */
     size: TypeAttributes.Size;
+    /** 类型 */
     type?: TypeAttributes.Appearance;
+    /** 是否为禁用状态 */
     disabled?: boolean;
+    /** 是否在两个字符之间插入空格 */
     shouldAddSpace?: boolean;
 };
 export type ButtonGroupProps = BaseProps & NativeProps & Pick<ButtonProps, 'disabled' | 'size' | 'type'> & {
+    /** 背景色 */
     bgColor?: string;
+    /** 边框颜色 */
     borderColor?: string;
 };

package/dist/Calendar/Calendar.js

@@ -273,6 +273,5 @@ var Calendar = (0, import_react.forwardRef)((props, ref) => {
     (showToday || showNow) && /* @__PURE__ */ import_react.default.createElement(import_Footer.default, null)
   );
 });
-Calendar.defaultProps = {};
-Calendar.displayName = "Calendar";
+Calendar.displayName = "ElCalendar";
 var Calendar_default = Calendar;

package/dist/Calendar/CalendarContext.d.ts

@@ -10,16 +10,26 @@ export interface CalendarContextProps {
     initialValue?: string | [v1: string, v2: string];
     value?: Dayjs;
     valueRange?: [value: Dayjs, value: Dayjs];
+    /** 显示类型 */
     dateType?: DateType | DateRangeType;
+    /** 是否展示“今天”按钮 */
     showToday?: boolean;
+    /** 是否展示“此刻”按钮 */
     showNow?: boolean;
+    /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
+    /** 在范围选择器里取消两个日期面板之间的联动 */
     unlinkPanels?: boolean;
     popperInstRef?: RefObject<PopperOptionRef>;
+    /** 快捷方式 */
     shortcuts?: Shortcuts[];
+    /** 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 */
     disabledDate?: (time: Date) => boolean;
+    /** 关闭下拉框方法 */
     close?: () => void;
+    /** 单选框提交数据方法 */
     onChange?: (value: Dayjs, params?: ChangeParams) => void;
+    /** 日期范围框提交数据方法 */
     onChangeRange?: (value: [value: Dayjs, value: Dayjs], finish: boolean) => void;
     formatter?: (value: Dayjs, text: number) => React.ReactElement;
 }

package/dist/Calendar/Footer.js

@@ -52,6 +52,5 @@ var Footer = () => {
   }, [close, disabledDate, onChange, showToday]);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: e`footer` }, showToday && /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "primary", link: true, className: e`today-btn`, onClick: onPickToday }, "今 天"), showNow && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "primary", link: true, className: e`link-btn`, onClick: onPickToday }, "此 刻"), /* @__PURE__ */ import_react.default.createElement(import_Button.Button, { type: "default", className: e`link-btn`, onClick: close }, "确 定")));
 };
-Footer.defaultProps = {};
-Footer.displayName = "Calendar.Footer";
+Footer.displayName = "ElCalendar.Footer";
 var Footer_default = Footer;

package/dist/Calendar/Header.js

@@ -40,9 +40,9 @@ var import_hooks = require("../hooks");
 var Header = (props) => {
   const {
     prefix,
-    showBackward,
-    showForward,
-    showMonth,
+    showBackward = true,
+    showForward = true,
+    showMonth = true,
     plain,
     postion,
     year,
@@ -62,10 +62,5 @@ var Header = (props) => {
   const iconClass = (0, import_react.useMemo)(() => be("picker-panel", "icon-btn", false), [be]);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`header`, { [em("header", "bordered")]: border }) }, showBackward && /* @__PURE__ */ import_react.default.createElement("div", { className: e`prev-btn` }, /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledBackwards, className: (0, import_classnames.default)(iconClass, "d-arrow-left"), onClick: onMoveBackwards }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-left" })), showMonth && /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledBackward, className: (0, import_classnames.default)(iconClass, "arrow-left"), onClick: onMoveBackward }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-left" }))), !plain && /* @__PURE__ */ import_react.default.createElement("span", { className: e`header-label`, onClick: () => onToggleView("year", postion) }, year), !plain && showMonth && /* @__PURE__ */ import_react.default.createElement("span", { className: e`header-label`, onClick: () => onToggleView("month", postion) }, month), showForward && /* @__PURE__ */ import_react.default.createElement("div", { className: e`next-btn` }, showMonth && /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledForward, className: (0, import_classnames.default)(iconClass, "arrow-right"), onClick: onMoveForward }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" })), /* @__PURE__ */ import_react.default.createElement(import_Link.Link, { disabled: disabledForwards, className: (0, import_classnames.default)(iconClass, "d-arrow-right"), onClick: onMoveForwards }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angles-right" }))), plain && /* @__PURE__ */ import_react.default.createElement("div", null, showMonth ? `${year}  ${month}` : year));
 };
-Header.defaultProps = {
-  showBackward: true,
-  showForward: true,
-  showMonth: true
-};
 Header.displayName = "Calendar.Header";
 var Header_default = Header;

package/dist/Calendar/ShortCuts.d.ts

@@ -4,7 +4,9 @@ import { ClassValue } from '../hooks/useClassNames';
 import { ChangeParams } from './CalendarContext';
 import { Shortcuts } from './typings';
 interface Props {
+    /** 快捷方式 */
     shortcuts: Shortcuts[];
+    /** 单选框提交数据方法 */
     onChange?: (value: Dayjs, params?: ChangeParams) => void;
     e: (...classes: ClassValue[]) => string;
 }

package/dist/Calendar/typings.d.ts

@@ -5,32 +5,50 @@ export type DateRangeType = 'daterange' | 'monthrange' | 'yearrange';
 export type RangePosition = 'left' | 'right';
 export type ValueRagne = [value: Dayjs, value: Dayjs];
 export type ValueRagneTemp = [value: Dayjs, value: Dayjs, value: Dayjs];
+/** 快捷方式 */
 export interface Shortcuts {
     text: string;
     value: Date | (() => Date);
 }
 export interface CalendarProps extends BaseProps, NativeProps {
+    /** 是否显示时间 */
     hasTime?: boolean;
 }
 export interface HeaderProps {
+    /**  */
     prefix?: string;
+    /** 年 */
     year?: number | string;
+    /** 月 */
     month?: number | string;
+    /** 是否禁用 */
     disabled?: boolean;
+    /**  */
+    /**  */
+    /** 是否显示月份 */
     showMonth?: boolean;
+    /** 是否显示后退按钮 */
     showBackward?: boolean;
+    /** 是否显示前进按钮 */
     showForward?: boolean;
+    /** 是否纯文本模式 */
     plain?: boolean;
+    /** 是否显示边框 */
     border?: boolean;
     postion?: RangePosition;
     disabledForward?: boolean;
     disabledBackward?: boolean;
     disabledForwards?: boolean;
     disabledBackwards?: boolean;
+    /**  */
     onToggleView?: (type: DateType, postion?: RangePosition) => void;
+    /**  */
     onMoveBackward?: () => void;
+    /**  */
     onMoveForward?: () => void;
+    /**  */
     onMoveBackwards?: () => void;
+    /**  */
     onMoveForwards?: () => void;
 }
 export type YearPanelProps = {

package/dist/Card/typings.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 import { BaseProps, NativeProps } from '../types/common';
 export interface CardProps extends BaseProps, NativeProps<'--el-card-border-color' | '--el-card-border-radius' | '--el-card-padding' | '--el-card-bg-color'> {
+    /** 卡片的标题 你可以通过设置 header 来修改标题 */
     header?: string | React.ReactElement<any>;
+    /** 卡片页脚。 你既可以通过设置 footer 来修改卡片底部内容 */
     footer?: string | React.ReactElement<any>;
+    /** body 的 CSS 样式 */
     bodyStyle?: React.CSSProperties;
+    /** 设置阴影显示时机 */
     shadow?: 'always' | 'never' | 'hover';
 }

package/dist/Carousel/Carousel.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CarouselProps, CarouselRef } from './typings';
+declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<CarouselRef>>;
+export default Carousel;