@qsxy/element-plus-react 1.0.0-next.4 → 1.0.0-next.5

package/dist/Dialog/Dialog.js

@@ -189,8 +189,8 @@ function InternalElDialog(props, ref) {
           style: {
             ...props.style,
             // @ts-ignore
-            [`--${import_prefix.globalKey}-dialog-width`]: fullscreen || classPrefix !== "dialog" ? "" : (0, import_Util.addUnit)(width),
-            [`--${import_prefix.globalKey}-dialog-margin-top`]: (0, import_Util.addUnit)(top)
+            [`--${import_prefix.namespace}-dialog-width`]: fullscreen || classPrefix !== "dialog" ? "" : (0, import_Util.addUnit)(width),
+            [`--${import_prefix.namespace}-dialog-margin-top`]: (0, import_Util.addUnit)(top)
           },
           ref: dialogRef
         },

package/dist/Drawer/Drawer.js

@@ -77,9 +77,9 @@ function InternalComp(props, ref) {
           setVisible(false);
           onClose == null ? void 0 : onClose();
         } else if (backdrop === "static") {
-          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.globalKey}-drawer-shake`);
+          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.namespace}-drawer-shake`);
           setTimeout(() => {
-            (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.globalKey}-drawer-shake`);
+            (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.namespace}-drawer-shake`);
           }, 300);
         }
       });
@@ -96,12 +96,12 @@ function InternalComp(props, ref) {
         duration: 300,
         onEnter: () => {
           setTimeout(() => {
-            (0, import_dom_lib.addClass)(backdropRef.current, `${import_prefix.globalKey}-anim-in`);
+            (0, import_dom_lib.addClass)(backdropRef.current, `${import_prefix.namespace}-anim-in`);
           }, 10);
         },
-        beforeLeave: () => (0, import_dom_lib.removeClass)(backdropRef.current, `${import_prefix.globalKey}-anim-in`)
+        beforeLeave: () => (0, import_dom_lib.removeClass)(backdropRef.current, `${import_prefix.namespace}-anim-in`)
       },
-      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`backdrop`, `${import_prefix.globalKey}-anim-fade`), style: { zIndex: import_Util.PopupManager.nextZIndex() }, ref: backdropRef })
+      /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`backdrop`, `${import_prefix.namespace}-anim-fade`), style: { zIndex: import_Util.PopupManager.nextZIndex() }, ref: backdropRef })
     ),
     document.body
   ), (0, import_react_dom.createPortal)(
@@ -120,8 +120,8 @@ function InternalComp(props, ref) {
         },
         beforeLeave: () => {
           var _a;
-          (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.globalKey}-anim-slide-in`);
-          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.globalKey}-anim-slide-out`);
+          (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.namespace}-anim-slide-in`);
+          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.namespace}-anim-slide-out`);
           (_a = props.beforeLeave) == null ? void 0 : _a.call(props);
         },
         onLeave: props.onLeave,
@@ -131,7 +131,7 @@ function InternalComp(props, ref) {
       /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`wrapper`, props.className), style: { ...props.style, zIndex: import_Util.PopupManager.nextZIndex() }, ref: ref || wrapperRef }, /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: (0, import_classnames.default)(wb(size, placement), `${import_prefix.globalKey}-anim-slide-in`, `${import_prefix.globalKey}-anim-${placement}`),
+          className: (0, import_classnames.default)(wb(size, placement), `${import_prefix.namespace}-anim-slide-in`, `${import_prefix.namespace}-anim-${placement}`),
           style: { display: "block" },
           ref: drawerRef
         },

package/dist/Form/utils/classUtil.js

@@ -37,10 +37,10 @@ module.exports = __toCommonJS(classUtil_exports);
 var import_classnames = __toESM(require("classnames"));
 var import_prefix = require("../../hooks/prefix");
 var prefixSplit = (splitCode, ...classes) => {
-  const mergeClasses = classes.length ? (0, import_classnames.default)(...classes).split(" ").map((item) => (0, import_prefix.prefix)(`${import_prefix.globalKey}-form-item`, item, splitCode)) : [];
+  const mergeClasses = classes.length ? (0, import_classnames.default)(...classes).split(" ").map((item) => (0, import_prefix.prefix)(`${import_prefix.namespace}-form-item`, item, splitCode)) : [];
   return mergeClasses.filter((cls) => cls).join(" ");
 };
-var b = (name) => `${import_prefix.globalKey}-${name}`;
+var b = (name) => `${import_prefix.namespace}-${name}`;
 var e = (...classes) => prefixSplit("__", ...classes);
 var m = (...classes) => prefixSplit("--", ...classes);
 // Annotate the CommonJS export names for ESM import in node:

package/dist/Input/InputRange.js

@@ -214,7 +214,7 @@ var InputRange = (0, import_react.forwardRef)((props, ref) => {
       if (nodeType === "ElIcon") {
         return (0, import_react.cloneElement)(prefix, {
           ...prefix.props,
-          className: (0, import_classnames.default)((_a = prefix.props) == null ? void 0 : _a.className, `${import_prefix.globalKey}-range__icon`)
+          className: (0, import_classnames.default)((_a = prefix.props) == null ? void 0 : _a.className, `${import_prefix.namespace}-range__icon`)
         });
       }
     }
@@ -229,11 +229,11 @@ var InputRange = (0, import_react.forwardRef)((props, ref) => {
         if (nodeType === "ElIcon") {
           return (0, import_react.cloneElement)(suffix, {
             ...suffix.props,
-            className: (0, import_classnames.default)((_a = suffix.props) == null ? void 0 : _a.className, `${import_prefix.globalKey}-input__icon ${import_prefix.globalKey}-range__close-icon`)
+            className: (0, import_classnames.default)((_a = suffix.props) == null ? void 0 : _a.className, `${import_prefix.namespace}-input__icon ${import_prefix.namespace}-range__close-icon`)
           });
         }
       } else {
-        return /* @__PURE__ */ import_react.default.createElement("span", { className: `${import_prefix.globalKey}-range__end-icon` }, suffix);
+        return /* @__PURE__ */ import_react.default.createElement("span", { className: `${import_prefix.namespace}-range__end-icon` }, suffix);
       }
     }
     return null;

package/dist/MessageBox/MessageBox.js

@@ -189,7 +189,7 @@ var MessageBox = (0, import_react.memo)(
         classPrefix,
         visible,
         className: (0, import_classnames.default)("is-message-box", className),
-        style: { ...style, [`--${import_prefix.globalKey}-messagebox-width`]: (0, import_Util.addUnit)(width) },
+        style: { ...style, [`--${import_prefix.namespace}-messagebox-width`]: (0, import_Util.addUnit)(width) },
         modal: true,
         overflow,
         showClose,

package/dist/Popper/Popper.js

@@ -87,13 +87,13 @@ var Popper = (0, import_react.forwardRef)((props, ref) => {
   const animation = (0, import_react.useMemo)(() => {
     var _a2, _b, _c, _d;
     if ((0, import_startsWith.default)(((_a2 = popperInstance == null ? void 0 : popperInstance.state) == null ? void 0 : _a2.placement) || (props == null ? void 0 : props.placement), "top")) {
-      return `${import_prefix.globalKey}-slide-down`;
+      return `${import_prefix.namespace}-slide-down`;
     } else if ((0, import_startsWith.default)(((_b = popperInstance == null ? void 0 : popperInstance.state) == null ? void 0 : _b.placement) || (props == null ? void 0 : props.placement), "bottom")) {
-      return `${import_prefix.globalKey}-slide-up`;
+      return `${import_prefix.namespace}-slide-up`;
     } else if ((0, import_startsWith.default)(((_c = popperInstance == null ? void 0 : popperInstance.state) == null ? void 0 : _c.placement) || (props == null ? void 0 : props.placement), "left")) {
-      return `${import_prefix.globalKey}-slide-right`;
+      return `${import_prefix.namespace}-slide-right`;
     } else if ((0, import_startsWith.default)(((_d = popperInstance == null ? void 0 : popperInstance.state) == null ? void 0 : _d.placement) || (props == null ? void 0 : props.placement), "right")) {
-      return `${import_prefix.globalKey}-slide-left`;
+      return `${import_prefix.namespace}-slide-left`;
     }
   }, [(_a = popperInstance == null ? void 0 : popperInstance.state) == null ? void 0 : _a.placement, props == null ? void 0 : props.placement]);
   const afterLeave = (0, import_react.useCallback)(() => {
@@ -115,8 +115,8 @@ var Popper = (0, import_react.forwardRef)((props, ref) => {
     }
   }, [popperInstance]);
   (0, import_hooks.useComponentWillMount)(() => {
-    if (!transitionProps.unmountOnExit && document.getElementById(`${import_prefix.globalKey}-popper-${id}`)) {
-      document.getElementById(`${import_prefix.globalKey}-popper-${id}`).parentNode.removeChild(document.getElementById(`${import_prefix.globalKey}-popper-${id}`));
+    if (!transitionProps.unmountOnExit && document.getElementById(`${import_prefix.namespace}-popper-${id}`)) {
+      document.getElementById(`${import_prefix.namespace}-popper-${id}`).parentNode.removeChild(document.getElementById(`${import_prefix.namespace}-popper-${id}`));
     }
   });
   (0, import_react.useImperativeHandle)(ref, () => ({
@@ -126,7 +126,7 @@ var Popper = (0, import_react.forwardRef)((props, ref) => {
     () => /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef: { current: popperElement }, visible, name: animation, className, afterLeave, ...transitionProps }, /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
-        id: `${import_prefix.globalKey}-popper-${id}`,
+        id: `${import_prefix.namespace}-popper-${id}`,
         className: (0, import_classnames.default)(b(), is(effect), popperClass),
         onMouseEnter,
         onMouseLeave,

package/dist/Progress/Progress.js

@@ -173,7 +173,7 @@ var Progress = (props) => {
       {
         className: be("circle", "track"),
         d: trackPath,
-        stroke: `var(--${import_prefix.globalKey}-fill-color-light, #e5e9f2)`,
+        stroke: `var(--${import_prefix.namespace}-fill-color-light, #e5e9f2)`,
         strokeWidth: relativeStrokeWidth,
         fill: "none",
         style: trailPathStyle

package/dist/Table/hooks/useSelection.d.ts

@@ -1,12 +1,5 @@
 /// <reference types="react" />
 import { TableProps } from '../typings';
-/**
- * @author	Parker
- * @CreateTime	2022/9/17 19:39:22
- * @LastEditor	Parker
- * @ModifyTime	2022/11/7 19:38:04
- * @Description
- */
 export declare const useSelection: <T>(props: TableProps<T>, data: T[]) => {
     state: {
         isIndeterminate: any;
@@ -46,4 +39,4 @@ export declare const activeRow: <T>(payload: T) => Action;
  * @param payload
  * @returns
  */
-export declare const onCheck: <T>(payload: Pick<State<T>, "selection" | "isIndeterminate">) => Action;
+export declare const onCheck: <T>(payload: Pick<State<T>, "isIndeterminate" | "selection">) => Action;

package/dist/Table/util.js

@@ -36,7 +36,7 @@ var import_prefix = require("../hooks/prefix");
 var TableIdManager = {
   tableId: 0,
   columnId: 0,
-  nextTableId: () => `${import_prefix.globalKey}-table_${++TableIdManager.tableId}`,
+  nextTableId: () => `${import_prefix.namespace}-table_${++TableIdManager.tableId}`,
   nextColumnId: (start) => `column_${start ? ++start : ++TableIdManager.columnId}`
 };
 var cacheStringFunction = (fn) => {
@@ -73,7 +73,7 @@ var getStyle = (element, styleName) => {
 var removePopper;
 function createTablePopper(parentNode, trigger, popperContent, tooltipRef) {
   var _a;
-  const ns = import_prefix.globalKey || "r";
+  const ns = import_prefix.namespace || "r";
   const scrollContainer = parentNode == null ? void 0 : parentNode.querySelector(`.${ns}-scrollbar__wrap`);
   removePopper == null ? void 0 : removePopper();
   const renderDom = document.createDocumentFragment();

package/dist/TimePicker/TimePicker.js

@@ -178,7 +178,7 @@ var TimePicker = (0, import_react.forwardRef)((props, ref) => {
         handleChange(null);
         initialValue.current = "";
       },
-      className: (0, import_classnames.default)({ [`${import_prefix.globalKey}-date`]: readonly, "is-active": visible }),
+      className: (0, import_classnames.default)({ [`${import_prefix.namespace}-date`]: readonly, "is-active": visible }),
       style: props.style,
       error,
       warning,

package/dist/hooks/prefix.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="lodash" />
-export declare const globalKey = "el";
+export declare const namespace = "el";
 export declare const getClassNamePrefix: () => string;
 export declare const defaultClassPrefix: (name: string) => string;
 export type ISplitCode = '-' | '__' | '--';

package/dist/hooks/prefix.js

@@ -32,15 +32,15 @@ __export(prefix_exports, {
   default: () => prefix_default,
   defaultClassPrefix: () => defaultClassPrefix,
   getClassNamePrefix: () => getClassNamePrefix,
-  globalKey: () => globalKey,
+  namespace: () => namespace,
   prefix: () => prefix
 });
 module.exports = __toCommonJS(prefix_exports);
 var import_classnames = __toESM(require("classnames"));
 var import_curry = __toESM(require("lodash/curry"));
-var globalKey = "el";
+var namespace = "el";
 var getClassNamePrefix = () => {
-  return globalKey + "-";
+  return namespace + "-";
 };
 var defaultClassPrefix = (name) => `${getClassNamePrefix()}${name}`;
 function prefix(pre, className, split = "-") {
@@ -57,6 +57,6 @@ var prefix_default = (0, import_curry.default)(prefix);
 0 && (module.exports = {
   defaultClassPrefix,
   getClassNamePrefix,
-  globalKey,
+  namespace,
   prefix
 });

package/dist/hooks/useClassNames.js

@@ -37,7 +37,7 @@ var import_isBoolean = __toESM(require("lodash/isBoolean"));
 var import_last = __toESM(require("lodash/last"));
 var import_react = require("react");
 var import_prefix = require("./prefix");
-function useClassNames(str, classPrefix = import_prefix.globalKey) {
+function useClassNames(str, classPrefix = import_prefix.namespace) {
   const componentName = (0, import_prefix.prefix)(classPrefix, str);
   const prefixSplit = (0, import_react.useCallback)(
     (splitCode, ...classes) => {

package/dist/index.css

@@ -4721,6 +4721,228 @@
   background: transparent;
 }
 
+.el-carousel__item {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+  z-index: calc(var(--el-index-normal) - 1);
+}
+.el-carousel__item.is-active {
+  z-index: calc(var(--el-index-normal) - 1);
+}
+.el-carousel__item.is-animating {
+  transition: transform 0.4s ease-in-out;
+}
+
+.el-carousel__item--card {
+  width: 50%;
+  transition: transform 0.4s ease-in-out;
+}
+.el-carousel__item--card.is-in-stage {
+  cursor: pointer;
+  z-index: var(--el-index-normal);
+}
+.el-carousel__item--card.is-in-stage:hover .el-carousel__mask, .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask {
+  opacity: 0.12;
+}
+.el-carousel__item--card.is-active {
+  z-index: calc(var(--el-index-normal) + 1);
+}
+
+.el-carousel__item--card-vertical {
+  width: 100%;
+  height: 50%;
+}
+
+.el-carousel__mask {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--el-color-white);
+  opacity: 0.24;
+  transition: var(--el-transition-duration-fast);
+}
+
+.el-carousel {
+  --el-carousel-arrow-font-size: 12px;
+  --el-carousel-arrow-size: 36px;
+  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
+  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
+  --el-carousel-indicator-width: 30px;
+  --el-carousel-indicator-height: 2px;
+  --el-carousel-indicator-padding-horizontal: 4px;
+  --el-carousel-indicator-padding-vertical: 12px;
+  --el-carousel-indicator-out-color: var(--el-border-color-hover);
+  position: relative;
+}
+
+.el-carousel--horizontal,
+.el-carousel--vertical {
+  overflow: hidden;
+}
+
+.el-carousel__container {
+  position: relative;
+  height: 300px;
+}
+
+.el-carousel__arrow {
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  height: var(--el-carousel-arrow-size);
+  width: var(--el-carousel-arrow-size);
+  cursor: pointer;
+  transition: var(--el-transition-duration);
+  border-radius: 50%;
+  background-color: var(--el-carousel-arrow-background);
+  color: #fff;
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  transform: translateY(-50%);
+  text-align: center;
+  font-size: var(--el-carousel-arrow-font-size);
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.el-carousel__arrow:hover {
+  background-color: var(--el-carousel-arrow-hover-background);
+}
+.el-carousel__arrow i {
+  cursor: pointer;
+}
+
+.el-carousel__arrow--left {
+  left: 16px;
+}
+
+.el-carousel__arrow--right {
+  right: 16px;
+}
+
+.el-carousel__indicators {
+  position: absolute;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  z-index: calc(var(--el-index-normal) + 1);
+}
+
+.el-carousel__indicators--horizontal {
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%);
+}
+
+.el-carousel__indicators--vertical {
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.el-carousel__indicators--outside {
+  bottom: calc(var(--el-carousel-indicator-height) + var(--el-carousel-indicator-padding-vertical) * 2);
+  text-align: center;
+  position: static;
+  transform: none;
+}
+.el-carousel__indicators--outside .el-carousel__indicator:hover button {
+  opacity: 0.64;
+}
+.el-carousel__indicators--outside button {
+  background-color: var(--el-carousel-indicator-out-color);
+  opacity: 0.24;
+}
+
+.el-carousel__indicators--right {
+  right: 0;
+}
+
+.el-carousel__indicators--labels {
+  left: 0;
+  right: 0;
+  transform: none;
+  text-align: center;
+}
+.el-carousel__indicators--labels .el-carousel__button {
+  height: auto;
+  width: auto;
+  padding: 2px 18px;
+  font-size: 12px;
+  color: #000;
+}
+.el-carousel__indicators--labels .el-carousel__indicator {
+  padding: 6px 4px;
+}
+
+.el-carousel__indicator {
+  background-color: transparent;
+  cursor: pointer;
+}
+.el-carousel__indicator:hover button {
+  opacity: 0.72;
+}
+
+.el-carousel__indicator--horizontal {
+  display: inline-block;
+  padding: var(--el-carousel-indicator-padding-vertical) var(--el-carousel-indicator-padding-horizontal);
+}
+
+.el-carousel__indicator--vertical {
+  padding: var(--el-carousel-indicator-padding-horizontal) var(--el-carousel-indicator-padding-vertical);
+}
+.el-carousel__indicator--vertical .el-carousel__button {
+  width: var(--el-carousel-indicator-height);
+  height: calc(var(--el-carousel-indicator-width) / 2);
+}
+
+.el-carousel__indicator.is-active button {
+  opacity: 1;
+}
+
+.el-carousel__button {
+  display: block;
+  opacity: 0.48;
+  width: var(--el-carousel-indicator-width);
+  height: var(--el-carousel-indicator-height);
+  background-color: #fff;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  transition: var(--el-transition-duration);
+}
+
+.carousel-arrow-left-enter-from,
+.carousel-arrow-left-leave-active {
+  transform: translateY(-50%) translate(-10px);
+  opacity: 0;
+}
+
+.carousel-arrow-right-enter-from,
+.carousel-arrow-right-leave-active {
+  transform: translateY(-50%) translate(10px);
+  opacity: 0;
+}
+
+.el-transitioning {
+  filter: url(#elCarouselHorizontal);
+}
+
+.el-transitioning-vertical {
+  filter: url(#elCarouselVertical);
+}
+
 .el-checkbox {
   --el-checkbox-text-color: var(--el-text-color-regular);
   --el-checkbox-input-width: 16px;

package/dist/index.d.ts

@@ -53,6 +53,8 @@ export { Badge as ElBadge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Card as ElCard } from './Card';
 export type { CardProps } from './Card';
+export { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from './Carousel';
+export type { CarouselItemProps, CarouselProps, CarouselRef } from './Carousel';
 export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from './Collapse';
 export type { CollapseItemProps, CollapseProps } from './Collapse';
 export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from './Descriptions';

package/dist/index.js

@@ -28,6 +28,8 @@ __export(src_exports, {
   ElBreadcrumbItem: () => import_Breadcrumb.BreadcrumbItem,
   ElButton: () => import_Button.Button,
   ElCard: () => import_Card.Card,
+  ElCarousel: () => import_Carousel.Carousel,
+  ElCarouselItem: () => import_Carousel.CarouselItem,
   ElCascader: () => import_Cascader.Cascader,
   ElCheckbox: () => import_Checkbox.Checkbox,
   ElCheckboxButton: () => import_Checkbox.CheckboxButton,
@@ -125,6 +127,7 @@ var import_Form = require("./Form");
 var import_Upload = require("./Upload");
 var import_Badge = require("./Badge");
 var import_Card = require("./Card");
+var import_Carousel = require("./Carousel");
 var import_Collapse = require("./Collapse");
 var import_Descriptions = require("./Descriptions");
 var import_Pagination = require("./Pagination");
@@ -163,6 +166,8 @@ var import_ConfigProvider = require("./ConfigProvider");
   ElBreadcrumbItem,
   ElButton,
   ElCard,
+  ElCarousel,
+  ElCarouselItem,
   ElCascader,
   ElCheckbox,
   ElCheckboxButton,