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

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';
@@ -49,10 +49,14 @@ export { Form as ElForm, useForm } from './Form';
 export type { FormInstance, FormItemProps, FormProps, FormRules, InternalFormInstance, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './Form';
 export { Upload as ElUpload } from './Upload';
 export type { UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadRef, UploadStatus, UploadUserFile } from './Upload';
+export { Avatar as ElAvatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
 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 +71,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';
@@ -106,5 +108,6 @@ export type { DividerProps } from './Divider';
 export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from './Util';
 export * from './hooks';
 export type { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, StandardProps, TooltipBaseProps, TypeAttributes } from './types/common';
+/** 全局配置 */
 export { ConfigProvider } from './ConfigProvider';
 export type { ConfigProviderProps } from './ConfigProvider';

package/dist/index.js

@@ -23,11 +23,14 @@ __export(src_exports, {
   Calendar: () => import_Calendar.Calendar,
   CalendarContext: () => import_Calendar.CalendarContext,
   ConfigProvider: () => import_ConfigProvider.ConfigProvider,
+  ElAvatar: () => import_Avatar.Avatar,
   ElBadge: () => import_Badge.Badge,
   ElBreadcrumb: () => import_Breadcrumb.Breadcrumb,
   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 +88,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,
@@ -123,8 +124,10 @@ var import_Switch = require("./Switch");
 var import_Transfer = require("./Transfer");
 var import_Form = require("./Form");
 var import_Upload = require("./Upload");
+var import_Avatar = require("./Avatar");
 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 +137,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");
@@ -158,11 +160,14 @@ var import_ConfigProvider = require("./ConfigProvider");
   Calendar,
   CalendarContext,
   ConfigProvider,
+  ElAvatar,
   ElBadge,
   ElBreadcrumb,
   ElBreadcrumbItem,
   ElButton,
   ElCard,
+  ElCarousel,
+  ElCarouselItem,
   ElCascader,
   ElCheckbox,
   ElCheckboxButton,
@@ -220,8 +225,6 @@ var import_ConfigProvider = require("./ConfigProvider");
   ElUpload,
   PopupManager,
   RowContext,
-  TreeNode,
-  VirtualList,
   download,
   genFileId,
   generateTree,

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

@@ -0,0 +1,50 @@
+@use '../common/var';
+
+.#{$namespace}-avatar {
+    --#{$namespace}-avatar-text-color: var(--#{$namespace}-color-white);
+    --#{$namespace}-avatar-bg-color: var(--#{$namespace}-text-color-disabled);
+    --#{$namespace}-avatar-text-size: 14px;
+    --#{$namespace}-avatar-icon-size: 18px;
+    --#{$namespace}-avatar-border-radius: var(--#{$namespace}-border-radius-base);
+    --#{$namespace}-avatar-size-large: 56px;
+    --#{$namespace}-avatar-size-small: 24px;
+    --#{$namespace}-avatar-size: 40px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    text-align: center;
+    overflow: hidden;
+    outline: none;
+    color: var(--#{$namespace}-avatar-text-color);
+    background: var(--#{$namespace}-avatar-bg-color);
+    width: var(--#{$namespace}-avatar-size);
+    height: var(--#{$namespace}-avatar-size);
+    font-size: var(--#{$namespace}-avatar-text-size);
+}
+
+.#{$namespace}-avatar > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.#{$namespace}-avatar--circle {
+    border-radius: 50%;
+}
+
+.#{$namespace}-avatar--square {
+    border-radius: var(--#{$namespace}-avatar-border-radius);
+}
+
+.#{$namespace}-avatar--icon {
+    font-size: var(--#{$namespace}-avatar-icon-size);
+}
+
+.#{$namespace}-avatar--small {
+    --#{$namespace}-avatar-size: 24px;
+}
+
+.#{$namespace}-avatar--large {
+    --#{$namespace}-avatar-size: 56px;
+}

package/dist/theme-chalk/build.scss

@@ -0,0 +1,2 @@
+$fa-font-path: './fonts' !default;
+@import './index.scss';

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/checkbox/index.scss

@@ -133,7 +133,7 @@
             color: var(--#{$namespace}-checkbox-checked-icon-color);
 
             &:after {
-                font-family: 'R Icons';
+                font-family: $fa-font-family;
                 content: '\f068';
                 font-weight: normal;
                 display: block;
@@ -152,7 +152,7 @@
         }
 
         &:checked + .#{$namespace}-checkbox__inner:after {
-            font-family: 'R Icons';
+            font-family: $fa-font-family;
             content: '\f00c';
             font-weight: normal;
             display: block;

package/dist/theme-chalk/common/_var.scss

@@ -3,3 +3,4 @@ $common-separator: '-' !default;
 $element-separator: '__' !default;
 $modifier-separator: '--' !default;
 $state-prefix: 'is-' !default;
+$fa-font-family: 'el-icon' !default;

package/dist/theme-chalk/dev.scss

@@ -0,0 +1,2 @@
+$fa-font-path: '/fonts' !default;
+@import './index.scss';

package/dist/theme-chalk/doc.scss

@@ -0,0 +1,2 @@
+$fa-font-path: '/element-plus-react/fonts' !default;
+@import './index.scss';

package/dist/theme-chalk/icon/fonts.scss

@@ -0,0 +1,9 @@
+@use '../common/var';
+@import './scss/index.scss';
+@import './scss/v4-shims.scss';
+@import './scss/regular.scss';
+@import './scss/light.scss';
+@import './scss/thin.scss';
+@import './scss/duotone.scss';
+@import './scss/brands.scss';
+@import './scss/solid.scss';

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

@@ -1,14 +1,5 @@
 @use '../common/var';
 
-@import './scss/index.scss';
-@import './scss/v4-shims.scss';
-@import './scss/regular.scss';
-@import './scss/light.scss';
-@import './scss/thin.scss';
-@import './scss/duotone.scss';
-@import './scss/brands.scss';
-@import './scss/solid.scss';
-
 .#{$namespace}-icon-loading {
     animation: rotating 2s linear infinite;
 }