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

package/dist/DateTimePicker/DateTimePicker.js

@@ -71,7 +71,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
     formatter,
     ...rest
   } = props;
-  const { e, is } = (0, import_hooks.useClassNames)(classPrefix);
+  const { b, e, is } = (0, import_hooks.useClassNames)(classPrefix);
   const [value, setValue] = (0, import_hooks.useControlled)(props.value, props.defaultValue);
   const [visible, setVisible] = (0, import_react.useState)(false);
   const [showTime, setShowTime] = (0, import_react.useState)(false);
@@ -129,7 +129,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
       onClick: onActive,
       value,
       onClear: () => handleChange(null, {}),
-      className: (0, import_classnames.default)({ "r-date": readonly }, is({ active: visible })),
+      className: (0, import_classnames.default)({ [b("date", false)]: readonly }, is({ active: visible })),
       style: props.style,
       error,
       warning,
@@ -192,7 +192,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
         {
           nodeRef: () => ({ current: timePanelRef.current.ref }),
           visible: showTime,
-          name: "r-slide-up",
+          name: b("slide-up", false),
           transitionAppear: true,
           unmountOnExit: true,
           display: "",

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/Dialog/typings.d.ts

@@ -3,7 +3,7 @@ import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps, TransitionProps {
     /** 是否显示模态框（可控） */
-    visible?: boolean;
+    visible: boolean;
     /** 默认是否显示模态框 */
     defaultVisible?: boolean;
     /** 是否需要遮罩层 */
@@ -50,7 +50,7 @@ export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps
     /** Dialog 关闭动画结束时的回调 */
     onClosed?: () => void;
     /** 关闭弹窗函数 */
-    close?: () => void;
+    close: () => void;
     /** 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
     beforeClose?: DialogBeforeCloseFn;
 }

package/dist/Drawer/Drawer.js

@@ -39,6 +39,7 @@ var import_react_dom = require("react-dom");
 var import_Transition = require("../Transition");
 var import_Util = require("../Util");
 var import_hooks = require("../hooks");
+var import_prefix = require("../hooks/prefix");
 var import_DrawerBody = __toESM(require("./DrawerBody"));
 var import_DrawerContext = require("./DrawerContext");
 var import_DrawerFooter = __toESM(require("./DrawerFooter"));
@@ -76,14 +77,14 @@ function InternalComp(props, ref) {
           setVisible(false);
           onClose == null ? void 0 : onClose();
         } else if (backdrop === "static") {
-          (0, import_dom_lib.addClass)(drawerRef.current, "r-drawer-shake");
+          (0, import_dom_lib.addClass)(drawerRef.current, `${import_prefix.namespace}-drawer-shake`);
           setTimeout(() => {
-            (0, import_dom_lib.removeClass)(drawerRef.current, "r-drawer-shake");
+            (0, import_dom_lib.removeClass)(drawerRef.current, `${import_prefix.namespace}-drawer-shake`);
           }, 300);
         }
       });
     }
-  }, [backdrop, onClose, ref, setVisible, visible]);
+  }, [b, backdrop, onClose, ref, setVisible, visible]);
   return /* @__PURE__ */ import_react.default.createElement(import_DrawerContext.DrawerContext.Provider, { value: { backdrop, setVisible, isControlled, onClose } }, backdrop && (0, import_react_dom.createPortal)(
     /* @__PURE__ */ import_react.default.createElement(
       import_Transition.Transition,
@@ -95,12 +96,12 @@ function InternalComp(props, ref) {
         duration: 300,
         onEnter: () => {
           setTimeout(() => {
-            (0, import_dom_lib.addClass)(backdropRef.current, "r-anim-in");
+            (0, import_dom_lib.addClass)(backdropRef.current, `${import_prefix.namespace}-anim-in`);
           }, 10);
         },
-        beforeLeave: () => (0, import_dom_lib.removeClass)(backdropRef.current, "r-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`, "r-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)(
@@ -119,15 +120,23 @@ function InternalComp(props, ref) {
         },
         beforeLeave: () => {
           var _a;
-          (0, import_dom_lib.removeClass)(drawerRef.current, "r-anim-slide-in");
-          (0, import_dom_lib.addClass)(drawerRef.current, "r-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,
         afterLeave: props.afterLeave,
         duration: 300
       },
-      /* @__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), "r-anim-slide-in", `r-anim-${placement}`), style: { display: "block" }, ref: drawerRef }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`dialog` }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`content` }, children))))
+      /* @__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.namespace}-anim-slide-in`, `${import_prefix.namespace}-anim-${placement}`),
+          style: { display: "block" },
+          ref: drawerRef
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { className: b`dialog` }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`content` }, children))
+      ))
     ),
     document.body
   ));

package/dist/Dropdown/Dropdown.js

@@ -86,7 +86,7 @@ var Dropdown = (props) => {
     import_Tooltip.default,
     {
       classPrefix,
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       popperClass: e`popper`,
       disabled,
       enterable: true,

package/dist/Dropdown/typings.d.ts

@@ -3,7 +3,7 @@ import { PopperOptions } from '../Popper';
 import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 /** Dropdown 属性 */
-export interface DropdownProps extends BaseProps, NativeProps, PopperOptions, AnimationEventProps, TransitionProps {
+export interface DropdownProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions, AnimationEventProps, Omit<TransitionProps, 'children'> {
     menu: React.ReactElement<DropdownMenuProps>;
     /** 触发下拉的行为 */
     trigger?: 'hover' | 'click' | 'contextmenu';

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/Input.js

@@ -316,7 +316,7 @@ function InternalInput(props, ref) {
           }
         }
       ))),
-      suffixSlot && /* @__PURE__ */ import_react.default.createElement("span", { ref: suffixRef, key: "suffixSlot", className: (0, import_classnames.default)(e`suffix`, { "r-click": suffixCanClick }), onClick: onClickSuffix }, /* @__PURE__ */ import_react.default.createElement("span", { className: e`suffix-inner` }, suffixSlot))
+      suffixSlot && /* @__PURE__ */ import_react.default.createElement("span", { ref: suffixRef, key: "suffixSlot", className: (0, import_classnames.default)(e`suffix`, { [b("click", false)]: suffixCanClick }), onClick: onClickSuffix }, /* @__PURE__ */ import_react.default.createElement("span", { className: e`suffix-inner` }, suffixSlot))
     );
   }, [
     type,
@@ -342,6 +342,7 @@ function InternalInput(props, ref) {
     maxLength,
     handelClear,
     suffixSlot,
+    b,
     suffixCanClick,
     onClickSuffix,
     showClear,

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/Popconfirm/Popconfirm.js

@@ -77,7 +77,7 @@ var Popconfirm = (props) => {
       classPrefix,
       popperClass: b("popover", false),
       popperStyle: { minWidth: 200 },
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       enterable: true,
       effect: "light",
       trigger: "click",

package/dist/Popconfirm/typings.d.ts

@@ -1,7 +1,8 @@
+import React from 'react';
 import { IconName } from '../Icon';
 import { PopperOptions } from '../Popper';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
-export interface PopconfirmProps extends BaseProps, NativeProps, PopperOptions {
+export interface PopconfirmProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions {
     classPrefix?: string;
     /** 显示的内容 */
     title: string;

package/dist/Popover/Popover.js

@@ -71,7 +71,7 @@ var Popover = (props) => {
       classPrefix,
       popperClass: (0, import_classnames.default)(b(), { [m`plain`]: plain }),
       popperStyle: { width },
-      triggerRef: /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, props.children),
+      triggerRef: props.children,
       enterable: true,
       effect: "light",
       placement,

package/dist/Popover/typings.d.ts

@@ -3,7 +3,7 @@ import { PopperOptions } from '../Popper';
 import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 /** Dropdown 属性 */
-export interface PopoverProps extends BaseProps, NativeProps, PopperOptions, AnimationEventProps, TransitionProps {
+export interface PopoverProps extends BaseProps<React.ReactElement>, NativeProps, PopperOptions, AnimationEventProps, Omit<TransitionProps, 'children'> {
     /** 触发下拉的行为 */
     trigger?: 'hover' | 'click' | 'contextmenu';
     /** 标题 */

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;

package/dist/Table/util.js

@@ -36,7 +36,7 @@ var import_prefix = require("../hooks/prefix");
 var TableIdManager = {
   tableId: 0,
   columnId: 0,
-  nextTableId: () => `r-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/Tabs/Tabs.js

@@ -171,7 +171,7 @@ var Tabs = (0, import_react.forwardRef)((props, ref) => {
     let offset = 0;
     let tabSize = 0;
     const sizeDir = sizeName === "offsetWidth" ? "X" : "Y";
-    (0, import_forEach.default)((_a = elRef.current) == null ? void 0 : _a.querySelectorAll(".r-tabs__item"), (el) => {
+    (0, import_forEach.default)((_a = elRef.current) == null ? void 0 : _a.querySelectorAll("." + e`item`), (el) => {
       var _a2;
       if ((0, import_dom_lib.hasClass)(el, "is-active")) {
         tabSize = el[sizeName === "offsetWidth" ? "clientWidth" : "clientHeight"];

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,
@@ -199,6 +199,7 @@ var TimePicker = (0, import_react.forwardRef)((props, ref) => {
         setVisible(false);
         setValue(initialValue.current);
       },
+      onEnter: () => timePanelRef.current.adjustSpinners(),
       ...animationInputProps,
       transitionAppear: true,
       unmountOnExit: true

package/dist/TimePicker/TimeSpinnerPanel.js

@@ -186,8 +186,9 @@ var TimeSpinnerPanel = (0, import_react.memo)(
           ),
           type === "hours" ? 23 : 59
         );
-        debouncedResetScroll(type);
         modifyDateField(type, value);
+        debouncedResetScroll(type);
+        isScrolling.current = false;
       },
       [debouncedResetScroll, listRefsMap, modifyDateField, scrollBarHeight, typeItemHeight]
     );

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;