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

package/dist/TreeSelect/Utils.d.ts

@@ -1,3 +1,3 @@
 import { DataNode } from '../Tree';
 /** 单选不可选父级 */
-export declare const parentNotSelectable: (treeData?: DataNode[]) => DataNode<any>[];
+export declare const parentNotSelectable: (treeData?: DataNode[]) => DataNode[];

package/dist/Util/base.d.ts

@@ -38,4 +38,4 @@ export declare const isNumber: (val: any) => val is number;
 export declare const isString: (val: any) => boolean;
 export declare const isStringNumber: (val: string) => boolean;
 export declare function addUnit(value?: string | number, defaultUnit?: string): string;
-export declare function mergeDefaultProps<T extends object>(defaultProps: Partial<T>, props: T): T;
+export declare function mergeDefaultProps<T>(defaultProps: Partial<T>, target: T): T;

package/dist/Util/base.js

@@ -204,8 +204,20 @@ function addUnit(value, defaultUnit = "px") {
     return value;
   }
 }
-function mergeDefaultProps(defaultProps = {}, props) {
-  return { ...defaultProps, ...props ?? {} };
+function mergeDefaultProps(defaultProps = {}, target) {
+  const props = { ...target };
+  if (Object.prototype.toString.call(props) === "[object Object]" && Object.prototype.toString.call(defaultProps) === "[object Object]") {
+    for (const item in defaultProps) {
+      if (isUndefined(props[item])) {
+        Object.assign(props, { [item]: defaultProps[item] });
+      } else {
+        if (Object.prototype.toString.call(props[item]) === "[object Object]" && Object.prototype.toString.call(defaultProps[item]) === "[object Object]") {
+          props[item] = mergeDefaultProps(props[item], defaultProps[item]);
+        }
+      }
+    }
+  }
+  return props;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

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;
@@ -5705,11 +5927,12 @@
 }
 
 .el-input {
+  --el-input-inner-height: calc(var(--el-input-height, 32px) - 2px);
   position: relative;
   display: inline-flex;
   width: 100%;
   font-size: 14px;
-  line-height: var(--el-input-height, 32px);
+  line-height: var(--el-input-inner-height, 30px);
   box-sizing: border-box;
   vertical-align: middle;
 }
@@ -5931,6 +6154,7 @@
 .el-input-group__prepend .el-button {
   display: inline-block;
   margin: 0 -20px;
+  line-height: 0;
 }
 .el-input-group__append button.el-button,
 .el-input-group__append button.el-button:hover,
@@ -6052,13 +6276,13 @@
 
 .el-input--large {
   --el-input-height: var(--el-component-size-large);
-  --el-input-inner-height: calc(var(--el-input-height, var(--el-component-size-large)) - 2px);
+  --el-input-inner-height: calc(var(--el-input-height, 40px) - 2px);
   font-size: 14px;
 }
 
 .el-input--small {
   --el-input-height: var(--el-component-size-small);
-  --el-input-inner-height: var(--el-component-size-small);
+  --el-input-inner-height: calc(var(--el-input-height, 24px) - 2px);
   font-size: 12px;
 }
 
@@ -6928,7 +7152,7 @@
   color: #ffffff;
 }
 .el-month-table td.start-date .cell, .el-month-table td.end-date .cell {
-  color: #ffffff;
+  color: #ffffff !important;
   background: var(--el-datepicker-active-color);
 }
 .el-month-table td.start-date div {

package/dist/index.d.ts

@@ -16,7 +16,7 @@ export type { PopperOptionRef, PopperOptions, PopperProps } from './Popper';
 export { Transition as ElTransition } from './Transition';
 export type { TransitionProps } from './Transition';
 export { Cascader as ElCascader } from './Cascader';
-export type { CascaderMenuProps, CascaderProps, TreeMenuProps } from './Cascader';
+export type { CascaderMenuProps, CascaderProps } from './Cascader';
 export { Checkbox as ElCheckbox, CheckboxButton as ElCheckboxButton } from './Checkbox';
 export type { CheckboxProps, ValueType as CheckboxValueType } from './Checkbox';
 export { CheckboxGroup as ElCheckboxGroup } from './CheckboxGroup';
@@ -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';
@@ -67,12 +69,10 @@ export { Tag as ElTag } from './Tag';
 export type { TagProps } from './Tag';
 export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from './TimeLine';
 export type { TimeLineItemProps, TimeLineProps } from './TimeLine';
-export { DirectoryTree as ElDirectoryTree, Tree as ElTree, TreeNode } from './Tree';
-export type { AntTreeNode, AntTreeNodeCheckedEvent, AntTreeNodeExpandedEvent, AntTreeNodeMouseEvent, AntTreeNodeProps, AntTreeNodeSelectedEvent, AntdTreeNodeAttribute, BasicDataNode, DataNode, DirectoryTreeExpandAction, DirectoryTreeProps, EventDataNode, Key, TreeNodeProps, TreeProps, } from './Tree';
+export { DirectoryTree as ElDirectoryTree, Tree as ElTree } from './Tree';
+export type { BasicDataNode, DataNode, DirectoryTreeExpandAction, DirectoryTreeProps, EventDataNode, Key, TreeProps, } from './Tree';
 export { TreeSelect as ElTreeSelect } from './TreeSelect';
 export type { SelectInfo, TreeSelectProps, TreeSelectRef } from './TreeSelect';
-export { VirtualList } from './VirtualList';
-export type { ListProps, ListRef, ScrollTo } from './VirtualList';
 export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from './Breadcrumb';
 export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from './Dropdown';

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,
@@ -85,8 +87,6 @@ __export(src_exports, {
   ElUpload: () => import_Upload.Upload,
   PopupManager: () => import_Util.PopupManager,
   RowContext: () => import_Row.RowContext,
-  TreeNode: () => import_Tree.TreeNode,
-  VirtualList: () => import_VirtualList.VirtualList,
   download: () => import_Util.download,
   genFileId: () => import_Util.genFileId,
   generateTree: () => import_Util.generateTree,
@@ -125,6 +125,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");
@@ -134,7 +135,6 @@ var import_Tag = require("./Tag");
 var import_TimeLine = require("./TimeLine");
 var import_Tree = require("./Tree");
 var import_TreeSelect = require("./TreeSelect");
-var import_VirtualList = require("./VirtualList");
 var import_Breadcrumb = require("./Breadcrumb");
 var import_Dropdown = require("./Dropdown");
 var import_Tabs = require("./Tabs");
@@ -163,6 +163,8 @@ var import_ConfigProvider = require("./ConfigProvider");
   ElBreadcrumbItem,
   ElButton,
   ElCard,
+  ElCarousel,
+  ElCarouselItem,
   ElCascader,
   ElCheckbox,
   ElCheckboxButton,
@@ -220,8 +222,6 @@ var import_ConfigProvider = require("./ConfigProvider");
   ElUpload,
   PopupManager,
   RowContext,
-  TreeNode,
-  VirtualList,
   download,
   genFileId,
   generateTree,

package/dist/theme-chalk/calendar/month-table.scss

@@ -69,7 +69,7 @@
 
         &.start-date .cell,
         &.end-date .cell {
-            color: #ffffff;
+            color: #ffffff !important;
             background: var(--#{$namespace}-datepicker-active-color);
         }
 

package/dist/theme-chalk/carousel/index.scss

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

package/dist/theme-chalk/dev.scss

@@ -0,0 +1,2 @@
+@import './index.scss';
+@import './icon/fonts';