@qsxy/element-plus-react 1.0.2 → 1.0.3

package/dist/index.d.ts

@@ -1,17 +1,23 @@
 import './locale/i18n';
-export { Link as ElLink } from './Link';
-export type { LinkProps } from './Link';
 export { Button as ElButton } from './Button';
 export type { ButtonGroupProps, ButtonProps } from './Button';
+export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from './Container';
+export type { AsideProps, ContainerProps, FooterProps, HeaderProps, MainProps } from './Container';
 export { Col as ElCol } from './Col';
 export type { ColProps } from './Col';
+export { Row as ElRow, RowContext } from './Row';
+export type { RowProps } from './Row';
 export { Icon as ElIcon } from './Icon';
 export type { IconName, IconPrefix, IconProps } from './Icon';
 export * from './Icon/IconList';
-export { Row as ElRow, RowContext } from './Row';
-export type { RowProps } from './Row';
+export { Link as ElLink } from './Link';
+export type { LinkProps } from './Link';
+export { Text as ElText } from './Text';
+export type { TextProps } from './Text';
 export { Scrollbar as ElScrollbar } from './Scrollbar';
 export type { BarProps, ScrollbarProps, ScrollbarRef } from './Scrollbar';
+export { Space as ElSpace } from './Space';
+export type { SpaceProps } from './Space';
 export { Popper as ElPopper } from './Popper';
 export type { PopperOptionRef, PopperOptions, PopperProps } from './Popper';
 export { Transition as ElTransition } from './Transition';
@@ -33,7 +39,7 @@ export type { InputProps, InputRangeProps, InputRef, TextareaProps, TextareaRef
 export { InputNumber as ElInputNumber } from './InputNumber';
 export type { InputNumberProps, InputNumberRef } from './InputNumber';
 export { Option as ElOption, OptionGroup as ElOptionGroup, Select as ElSelect } from './Select';
-export type { SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './Select';
+export type { OptionData, SelectOptionGroupProps, SelectOptionProps, SelectProps, SelectRef } from './Select';
 export { Calendar, CalendarContext } from './Calendar';
 export type { DateRangeType, DateType } from './Calendar';
 export { DatePicker as ElDatePicker } from './DatePicker';
@@ -54,8 +60,6 @@ export { Badge as ElBadge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Card as ElCard } from './Card';
 export type { CardProps } from './Card';
-export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from './Container';
-export type { AsideProps, ContainerProps, FooterProps, HeaderProps, MainProps } from './Container';
 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';
@@ -66,16 +70,17 @@ export { Pagination as ElPagination } from './Pagination';
 export type { PageType, PaginationProps, PaginationRef } from './Pagination';
 export { Progress as ElProgress } from './Progress';
 export type { PropgressProps } from './Progress';
+export { Statistic as ElStatistic } from './Statistic';
+export type { StatisticProps, StatisticRef } from './Statistic';
 export { Table as ElTable, TableColumn as ElTableColumn } from './Table';
 export type { RenderCell, TableColumnCtx, TableColumnProps, TableProps, TableRef, TableSort } from './Table';
 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 } from './Tree';
-export type { BasicDataNode, DataNode, DirectoryTreeExpandAction, DirectoryTreeProps, EventDataNode, Key, TreeProps, } from './Tree';
+export { Tree as ElTree } from './Tree';
+export type { AllowDragFunction, AllowDropFunction, AllowDropType, FilterNodeMethodFunction, LoadFunction, NodeDropType, TreeNode, TreeNodeData, TreeNodeProps, TreeOptionProps, TreeProps, TreeRef, TreeStore, } from './Tree';
 export { TreeSelect as ElTreeSelect } from './TreeSelect';
-export type { SelectInfo, TreeSelectProps, TreeSelectRef } from './TreeSelect';
 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';
@@ -88,6 +93,8 @@ export { Empty as ElEmpty } from './Empty';
 export type { IEmptyProps } from './Empty';
 export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from './Skeleton';
 export type { SkeletonItemProps, SkeletonProps } from './Skeleton';
+export { Alert as ElAlert } from './Alert';
+export type { AlertProps } from './Alert';
 export { Dialog as ElDialog } from './Dialog';
 export type { DialogBeforeCloseFn, DialogProps } from './Dialog';
 export { Drawer as ElDrawer } from './Drawer';
@@ -109,7 +116,7 @@ export type { PopoverProps } from './Popover';
 export { Divider as ElDivider } from './Divider';
 export type { DividerProps } from './Divider';
 export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from './Util';
-export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useControlled, useDisabled, useForceUpdate, useSize, } from './hooks';
+export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useConfigProvider, useControlled, useDisabled, useForceUpdate, useSize, } from './hooks';
 export type { AnimationEventProps, BaseProps, FormControlBaseProps, NativeProps, StandardProps, TooltipBaseProps, TypeAttributes } from './types/common';
 /** 全局配置 */
 export { ConfigProvider as ElConfigProvider } from './ConfigProvider';

package/dist/index.js

@@ -1,13 +1,16 @@
 import "./locale/i18n";
 
 /* Basic 基础组件 */
-export { Link as ElLink } from "./Link";
 export { Button as ElButton } from "./Button";
+export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from "./Container";
 export { Col as ElCol } from "./Col";
+export { Row as ElRow, RowContext } from "./Row";
 export { Icon as ElIcon } from "./Icon";
 export * from "./Icon/IconList";
-export { Row as ElRow, RowContext } from "./Row";
+export { Link as ElLink } from "./Link";
+export { Text as ElText } from "./Text";
 export { Scrollbar as ElScrollbar } from "./Scrollbar";
+export { Space as ElSpace } from "./Space";
 export { Popper as ElPopper } from "./Popper";
 export { Transition as ElTransition } from "./Transition";
 /* Form 表单组件 */
@@ -31,17 +34,19 @@ export { Upload as ElUpload } from "./Upload";
 export { Avatar as ElAvatar } from "./Avatar";
 export { Badge as ElBadge } from "./Badge";
 export { Card as ElCard } from "./Card";
-export { Aside as ElAside, Container as ElContainer, Footer as ElFooter, Header as ElHeader, Main as ElMain } from "./Container";
 export { Carousel as ElCarousel, CarouselItem as ElCarouselItem } from "./Carousel";
 export { Collapse as ElCollapse, CollapseItem as ElCollapseItem } from "./Collapse";
 export { Descriptions as ElDescriptions, DescriptionsItem as ElDescriptionsItem } from "./Descriptions";
 export { Pagination as ElPagination } from "./Pagination";
 export { Progress as ElProgress } from "./Progress";
+export { Statistic as ElStatistic } from "./Statistic";
 export { Table as ElTable, TableColumn as ElTableColumn } from "./Table";
 export { Tag as ElTag } from "./Tag";
 export { TimeLine as ElTimeLine, TimeLineItem as ElTimeLineItem } from "./TimeLine";
-export { DirectoryTree as ElDirectoryTree, Tree as ElTree /* , TreeNode */ } from "./Tree";
+export { Tree as ElTree } 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';
 
@@ -53,6 +58,7 @@ export { TabPane as ElTabPane, Tabs as ElTabs } from "./Tabs";
 export { Empty as ElEmpty } from "./Empty";
 export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from "./Skeleton";
 /* Feedback 反馈组件 */
+export { Alert as ElAlert } from "./Alert";
 export { Dialog as ElDialog } from "./Dialog";
 export { Drawer as ElDrawer } from "./Drawer";
 export { Loading as ElLoading } from "./Loading";
@@ -66,7 +72,7 @@ export { Popover as ElPopover } from "./Popover";
 export { Divider as ElDivider } from "./Divider";
 /* 工具库与hooks */
 export { PopupManager, download, genFileId, generateTree, getScrollWidth, isEmpty, isNotEmpty, randomCode } from "./Util";
-export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useControlled, useDisabled, useForceUpdate, useSize } from "./hooks";
+export { htmlInputAttrs, htmlInputEvents, htmlInputProps, partitionAnimationProps, partitionHTMLProps, partitionPopperPropsUtils, partitionTreePropsUtils, prefix, useChildrenInstance, useClassNames, useClickOutside, useComponentWillMount, useConfigProvider, useControlled, useDisabled, useForceUpdate, useSize } from "./hooks";
 
 /* 通用types */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",

package/theme-chalk/alert.scss

@@ -0,0 +1,115 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(alert) {
+  @include set-component-css-var('alert', $alert);
+
+  width: 100%;
+  padding: getCssVar('alert', 'padding');
+  margin: 0;
+  box-sizing: border-box;
+  border-radius: getCssVar('alert', 'border-radius-base');
+  position: relative;
+  background-color: getCssVar('color', 'white');
+  overflow: hidden;
+  opacity: 1;
+  display: flex;
+  align-items: center;
+  transition: opacity getCssVar('transition-duration', 'fast');
+
+  @include when(light) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('text-color', 'placeholder');
+    }
+  }
+
+  @include when(dark) {
+    .#{$namespace}-alert__close-btn {
+      color: getCssVar('color', 'white');
+    }
+    .#{$namespace}-alert__description {
+      color: getCssVar('color', 'white');
+    }
+  }
+
+  @include when(center) {
+    justify-content: center;
+  }
+
+  @each $type in (primary, success, info, warning, error) {
+    @include m($type) {
+      @include css-var-from-global(
+        ('alert', 'bg-color'),
+        ('color', $type, 'light-9')
+      );
+
+      &.is-light {
+        background-color: getCssVar('alert', 'bg-color');
+        color: getCssVar('color', $type);
+
+        .#{$namespace}-alert__description {
+          color: getCssVar('color', $type);
+        }
+      }
+
+      &.is-dark {
+        background-color: getCssVar('color', $type);
+        color: getCssVar('color', 'white');
+      }
+    }
+  }
+
+  @include e(content) {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  & .#{$namespace}-alert__icon {
+    font-size: getCssVar('alert', 'icon-size');
+    width: getCssVar('alert', 'icon-size');
+    margin-right: 8px;
+
+    @include when(big) {
+      font-size: getCssVar('alert', 'icon-large-size');
+      width: getCssVar('alert', 'icon-large-size');
+      margin-right: 12px;
+    }
+  }
+
+  @include e(title) {
+    font-size: getCssVar('alert', 'title-font-size');
+    line-height: 24px;
+
+    &.with-description {
+      font-size: getCssVar('alert', 'title-with-description-font-size');
+    }
+  }
+
+  & .#{$namespace}-alert__description {
+    font-size: getCssVar('alert', 'description-font-size');
+    margin: 0;
+  }
+
+  & .#{$namespace}-alert__close-btn {
+    font-size: getCssVar('alert', 'close-font-size');
+    opacity: 1;
+    position: absolute;
+    top: 12px;
+    right: 16px;
+    cursor: pointer;
+
+    @include when(customed) {
+      font-style: normal;
+      font-size: getCssVar('alert', 'close-customed-font-size');
+      line-height: 24px;
+      top: 8px;
+    }
+  }
+}
+
+.#{$namespace}-alert-fade-enter-from,
+.#{$namespace}-alert-fade-leave-active {
+  opacity: 0;
+}

package/theme-chalk/aside.scss

@@ -1,8 +1,8 @@
-@use 'mixins/mixins' as *;
-
-@include b(aside) {
-  overflow: auto;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  width: var(#{getCssVarName('aside', 'width')}, 300px);
-}
+@use 'mixins/mixins' as *;
+
+@include b(aside) {
+  overflow: auto;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  width: var(#{getCssVarName('aside', 'width')}, 300px);
+}

package/theme-chalk/button-group.scss

@@ -1,80 +1,80 @@
-@use 'sass:map';
-
-@use 'common/var' as *;
-@use 'mixins/mixins' as *;
-@use 'mixins/utils' as *;
-
-@include b(button-group) {
-  display: inline-block;
-  vertical-align: middle;
-  @include utils-clearfix;
-
-  & > .#{$namespace}-button {
-    float: left;
-    position: relative;
-    & + .#{$namespace}-button {
-      margin-left: 0;
-    }
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-    &:first-child:last-child {
-      border-top-right-radius: map.get($button-border-radius, 'default');
-      border-bottom-right-radius: map.get($button-border-radius, 'default');
-      border-top-left-radius: map.get($button-border-radius, 'default');
-      border-bottom-left-radius: map.get($button-border-radius, 'default');
-
-      &.is-round {
-        border-radius: getCssVar('border-radius', 'round');
-      }
-
-      &.is-circle {
-        border-radius: 50%;
-      }
-    }
-    &:not(:first-child):not(:last-child) {
-      border-radius: 0;
-    }
-    &:not(:last-child) {
-      margin-right: -1px;
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 1;
-    }
-
-    @include when(active) {
-      z-index: 1;
-    }
-  }
-
-  & > .#{$namespace}-dropdown {
-    & > .#{$namespace}-button {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      border-left-color: getCssVar('button', 'divide-border-color');
-    }
-  }
-
-  @each $type in (primary, success, warning, danger, info) {
-    .#{$namespace}-button--#{$type} {
-      &:first-child {
-        border-right-color: getCssVar('button', 'divide-border-color');
-      }
-      &:last-child {
-        border-left-color: getCssVar('button', 'divide-border-color');
-      }
-      &:not(:first-child):not(:last-child) {
-        border-left-color: getCssVar('button', 'divide-border-color');
-        border-right-color: getCssVar('button', 'divide-border-color');
-      }
-    }
-  }
-}
+@use 'sass:map';
+
+@use 'common/var' as *;
+@use 'mixins/mixins' as *;
+@use 'mixins/utils' as *;
+
+@include b(button-group) {
+  display: inline-block;
+  vertical-align: middle;
+  @include utils-clearfix;
+
+  & > .#{$namespace}-button {
+    float: left;
+    position: relative;
+    & + .#{$namespace}-button {
+      margin-left: 0;
+    }
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &:first-child:last-child {
+      border-top-right-radius: map.get($button-border-radius, 'default');
+      border-bottom-right-radius: map.get($button-border-radius, 'default');
+      border-top-left-radius: map.get($button-border-radius, 'default');
+      border-bottom-left-radius: map.get($button-border-radius, 'default');
+
+      &.is-round {
+        border-radius: getCssVar('border-radius', 'round');
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      z-index: 1;
+    }
+
+    @include when(active) {
+      z-index: 1;
+    }
+  }
+
+  & > .#{$namespace}-dropdown {
+    & > .#{$namespace}-button {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: getCssVar('button', 'divide-border-color');
+    }
+  }
+
+  @each $type in (primary, success, warning, danger, info) {
+    .#{$namespace}-button--#{$type} {
+      &:first-child {
+        border-right-color: getCssVar('button', 'divide-border-color');
+      }
+      &:last-child {
+        border-left-color: getCssVar('button', 'divide-border-color');
+      }
+      &:not(:first-child):not(:last-child) {
+        border-left-color: getCssVar('button', 'divide-border-color');
+        border-right-color: getCssVar('button', 'divide-border-color');
+      }
+    }
+  }
+}