@qsxy/element-plus-react 1.0.0-next.21 → 1.0.0-next.23

package/dist/index.d.ts

@@ -54,6 +54,8 @@ 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';
@@ -78,6 +80,8 @@ export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from '
 export type { BreadcrumbItemProps, BreadcrumbProps } from './Breadcrumb';
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from './Dropdown';
 export type { DropdownItemProps, DropdownMenuProps, DropdownProps } from './Dropdown';
+export { Menu as ElMenu, MenuItem as ElMenuItem, MenuItemGroup as ElMenuItemGroup, SubMenu as ElSubMenu } from './Menu';
+export type { MenuCloseEvent, MenuItemClicked, MenuItemGroupProps, MenuItemProps, MenuItemRegistered, MenuOpenEvent, MenuProps, MenuRef, SubMenuProps } from './Menu';
 export { TabPane as ElTabPane, Tabs as ElTabs } from './Tabs';
 export type { TabPaneProps, TabsPaneContext, TabsProps } from './Tabs';
 export { Empty as ElEmpty } from './Empty';

package/dist/index.js

@@ -31,6 +31,7 @@ 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";
@@ -47,6 +48,7 @@ export { TreeSelect as ElTreeSelect } from "./TreeSelect";
 /* Navigation 导航 */
 export { Breadcrumb as ElBreadcrumb, BreadcrumbItem as ElBreadcrumbItem } from "./Breadcrumb";
 export { Dropdown as ElDropdown, DropdownItem as ElDropdownItem, DropdownMenu as ElDropdownMenu } from "./Dropdown";
+export { Menu as ElMenu, MenuItem as ElMenuItem, MenuItemGroup as ElMenuItemGroup, SubMenu as ElSubMenu } from "./Menu";
 export { TabPane as ElTabPane, Tabs as ElTabs } from "./Tabs";
 export { Empty as ElEmpty } from "./Empty";
 export { Skeleton as ElSkeleton, SkeletonItem as ElSkeletonItem } from "./Skeleton";

package/dist/types/common.d.ts

@@ -10,14 +10,14 @@ export declare namespace TypeAttributes {
     type CheckTrigger = 'change' | 'blur' | 'none';
 }
 export type ComponentChildren = React.ReactNode | React.ReactNode[];
-export interface FormControlBaseProps<ValueType = React.AllHTMLAttributes<HTMLInputElement>['value']> {
+export interface FormControlBaseProps<ValueType = string | number | boolean> {
     name?: string;
     /** 初始值 */
     defaultValue?: ValueType;
     /** 值（可控） */
     value?: ValueType;
     /** 选中值发生变化时触发 */
-    onChange?: (value: ValueType | boolean, event?: React.ChangeEvent<any>) => void;
+    onChange?: (value: ValueType, event?: React.ChangeEvent<any>) => void;
     /** 禁用 */
     disabled?: boolean;
     /** 尺寸 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.21",
+  "version": "1.0.0-next.23",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,8 +17,9 @@
     "theme-chalk"
   ],
   "peerDependencies": {
-    "react": ">=16.9.0",
-    "react-dom": ">=16.9.0"
+    "react": ">=18.0.0",
+    "react-router-dom": ">=6.22.1",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@ctrl/tinycolor": "^4.1.0",

package/theme-chalk/aside.scss

@@ -0,0 +1,8 @@
+@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/common/transition.scss

@@ -0,0 +1,142 @@
+@use '../mixins/config' as *;
+@use '../mixins/mixins' as *;
+
+.fade-in-linear-enter-active,
+.fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+
+.fade-in-linear-enter-from,
+.fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-linear-enter-active,
+.#{$namespace}-fade-in-linear-leave-active {
+    transition: getCssVar('transition-fade', 'linear');
+}
+.#{$namespace}-fade-in-linear-enter-from,
+.#{$namespace}-fade-in-linear-leave-to {
+    opacity: 0;
+}
+
+.#{$namespace}-fade-in-enter-active,
+.#{$namespace}-fade-in-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-fade-in-enter-from,
+.#{$namespace}-fade-in-leave-active {
+    opacity: 0;
+}
+
+.#{$namespace}-zoom-in-center-enter-active,
+.#{$namespace}-zoom-in-center-leave-active {
+    transition: all getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}
+.#{$namespace}-zoom-in-center-enter-from,
+.#{$namespace}-zoom-in-center-leave-active {
+    opacity: 0;
+    transform: scaleX(0);
+}
+
+.#{$namespace}-zoom-in-top-enter-active,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center top;
+
+    &[data-popper-placement^='top'] {
+        transform-origin: center bottom;
+    }
+}
+.#{$namespace}-zoom-in-top-enter-from,
+.#{$namespace}-zoom-in-top-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-bottom-enter-active,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 1;
+    transform: scaleY(1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: center bottom;
+}
+.#{$namespace}-zoom-in-bottom-enter-from,
+.#{$namespace}-zoom-in-bottom-leave-active {
+    opacity: 0;
+    transform: scaleY(0);
+}
+
+.#{$namespace}-zoom-in-left-enter-active,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 1;
+    transform: scale(1, 1);
+    transition: getCssVar('transition-md-fade');
+    transform-origin: top left;
+}
+.#{$namespace}-zoom-in-left-enter-from,
+.#{$namespace}-zoom-in-left-leave-active {
+    opacity: 0;
+    transform: scale(0.45, 0.45);
+}
+
+.collapse-transition {
+    transition: getCssVar('transition-duration') height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-collapse-transition-leave-active,
+.#{$namespace}-collapse-transition-enter-active {
+    transition: getCssVar('transition-duration') max-height ease-in-out, getCssVar('transition-duration') padding-top ease-in-out,
+        getCssVar('transition-duration') padding-bottom ease-in-out;
+}
+
+.#{$namespace}-menu-collapse-enter-active,
+.#{$namespace}-menu-collapse-leave-active {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-play-state: paused;
+}
+
+.#{$namespace}-menu-collapse-enter-from {
+    // opacity: 0;
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    animation-name: rSlideUpIn;
+    animation-play-state: running;
+}
+
+.#{$namespace}-menu-collapse-leave-active {
+    animation-name: treeNodeLeave;
+    animation-play-state: running;
+    pointer-events: none;
+}
+
+.#{$namespace}-menu-collapse-leave-to {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+
+.horizontal-collapse-transition {
+    transition: getCssVar('transition-duration') width ease-in-out, getCssVar('transition-duration') padding-left ease-in-out,
+        getCssVar('transition-duration') padding-right ease-in-out;
+}
+
+.#{$namespace}-list-enter-active,
+.#{$namespace}-list-leave-active {
+    transition: all 1s;
+}
+
+.#{$namespace}-list-enter-from,
+.#{$namespace}-list-leave-to {
+    opacity: 0;
+    transform: translateY(-30px);
+}
+
+.#{$namespace}-list-leave-active {
+    position: absolute !important;
+}
+
+.#{$namespace}-opacity-transition {
+    transition: opacity getCssVar('transition-duration') cubic-bezier(0.55, 0, 0.1, 1);
+}

package/theme-chalk/container.scss

@@ -0,0 +1,14 @@
+@use 'mixins/mixins' as *;
+
+@include b(container) {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  flex-basis: auto;
+  box-sizing: border-box;
+  min-width: 0;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+}

package/theme-chalk/footer.scss

@@ -0,0 +1,12 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(footer) {
+  @include set-component-css-var('footer', $footer);
+
+  padding: getCssVar('footer-padding');
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: getCssVar('footer-height');
+}

package/theme-chalk/header.scss

@@ -0,0 +1,12 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(header) {
+  @include set-component-css-var('header', $header);
+
+  padding: getCssVar('header-padding');
+  box-sizing: border-box;
+  flex-shrink: 0;
+  height: getCssVar('header-height');
+}

package/theme-chalk/index.scss

@@ -3,6 +3,11 @@
 @use './link';
 @use './button';
 @use './button-group';
+@use './aside';
+@use './container';
+@use './footer';
+@use './header';
+@use './main';
 @use './icon/fonts';
 @use './icon';
 @use './row';
@@ -54,6 +59,9 @@
 // /* Navigation 导航 */
 @use './breadcrumb';
 @use './dropdown';
+@use './menu';
+@use './menu-item';
+@use './menu-item-group';
 @use './tabs';
 @use './empty';
 @use './skeleton';

package/theme-chalk/main.scss

@@ -0,0 +1,14 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'common/var' as *;
+
+@include b(main) {
+  @include set-component-css-var('main', $main);
+
+  display: block;
+  flex: 1;
+  flex-basis: auto;
+  overflow: auto;
+  box-sizing: border-box;
+  padding: getCssVar('main-padding');
+}

package/theme-chalk/menu.scss

@@ -0,0 +1,353 @@
+@use 'mixins/mixins' as *;
+@use 'mixins/var' as *;
+@use 'mixins/utils' as *;
+@use 'common/var' as *;
+@use 'common/transition';
+
+@mixin menu-item {
+    display: flex;
+    align-items: center;
+    height: getCssVar('menu-item-height');
+    line-height: getCssVar('menu-item-height');
+    font-size: getCssVar('menu-item-font-size');
+    color: getCssVar('menu-text-color');
+    padding: 0 getCssVar('menu-base-level-padding');
+    list-style: none;
+    cursor: pointer;
+    position: relative;
+    transition: border-color getCssVar('transition-duration'), background-color getCssVar('transition-duration'), color getCssVar('transition-duration');
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    * {
+        vertical-align: bottom;
+    }
+
+    i {
+        color: inherit;
+    }
+
+    &:hover,
+    &:focus {
+        outline: none;
+    }
+
+    &:hover {
+        background-color: getCssVar('menu-hover-bg-color');
+        color: getCssVar('menu-hover-text-color');
+    }
+
+    @include when(disabled) {
+        opacity: 0.25;
+        cursor: not-allowed;
+        background: none !important;
+    }
+}
+
+:root {
+    // They are defined on :root so they can be inherited by sub-menu instead of overwritten
+    @include set-component-css-var('menu', $menu);
+}
+
+@include b(menu) {
+    border-right: solid 1px getCssVar('menu-border-color');
+    list-style: none;
+    position: relative;
+    margin: 0;
+    padding-left: 0;
+    background-color: getCssVar('menu-bg-color');
+    box-sizing: border-box;
+
+    @include m(vertical) {
+        &:not(.#{$namespace}-menu--collapse):not(.#{$namespace}-menu--popup-container) {
+            & .#{$namespace}-menu-item,
+            & .#{$namespace}-sub-menu__title,
+            & .#{$namespace}-menu-item-group__title {
+                white-space: nowrap;
+                padding-left: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-level')} * #{getCssVar('menu-level-padding')});
+            }
+        }
+    }
+
+    &:not(.#{$namespace}-menu--collapse) .#{$namespace}-sub-menu__title {
+        padding-right: calc(#{getCssVar('menu-base-level-padding')} + #{getCssVar('menu-icon-width')});
+    }
+
+    @include m(horizontal) {
+        display: flex;
+        flex-wrap: nowrap;
+        border-right: none;
+
+        height: getCssVar('menu-horizontal-height');
+
+        // reset menu-item popup height
+        &.#{$namespace}-menu--popup-container {
+            height: unset;
+        }
+
+        &.#{$namespace}-menu {
+            border-bottom: solid 1px getCssVar('menu-border-color');
+        }
+
+        & > .#{$namespace}-menu-item {
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+
+            height: 100%;
+            margin: 0;
+            border-bottom: 2px solid transparent;
+            color: getCssVar('menu-text-color');
+
+            a,
+            a:hover {
+                color: inherit;
+            }
+        }
+
+        & > .#{$namespace}-sub-menu {
+            &:focus,
+            &:hover {
+                outline: none;
+            }
+
+            &:hover {
+                .#{$namespace}-sub-menu__title {
+                    color: getCssVar('menu-hover-text-color');
+                }
+            }
+
+            &.is-active {
+                .#{$namespace}-sub-menu__title {
+                    border-bottom: 2px solid getCssVar('menu-active-color');
+                    color: getCssVar('menu-active-color');
+                }
+            }
+
+            & .#{$namespace}-sub-menu__title {
+                height: 100%;
+                border-bottom: 2px solid transparent;
+                color: getCssVar('menu-text-color');
+
+                &:hover {
+                    background-color: getCssVar('menu-bg-color');
+                }
+            }
+        }
+
+        & .#{$namespace}-menu {
+            & .#{$namespace}-menu-item,
+            & .#{$namespace}-sub-menu__title {
+                background-color: getCssVar('menu-bg-color');
+                display: flex;
+                align-items: center;
+                height: getCssVar('menu-horizontal-sub-item-height');
+                line-height: getCssVar('menu-horizontal-sub-item-height');
+                padding: 0 10px;
+                color: getCssVar('menu-text-color');
+            }
+
+            & .#{$namespace}-sub-menu__title {
+                padding-right: 40px;
+            }
+
+            & .#{$namespace}-menu-item.is-active,
+            & .#{$namespace}-menu-item.is-active:hover,
+            & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title,
+            & .#{$namespace}-sub-menu.is-active > .#{$namespace}-sub-menu__title:hover {
+                color: getCssVar('menu-active-color');
+            }
+        }
+
+        & .#{$namespace}-menu-item:not(.is-disabled):hover,
+        & .#{$namespace}-menu-item:not(.is-disabled):focus {
+            outline: none;
+            color: getCssVarWithDefault('menu-active-color', getCssVar('menu-hover-text-color'));
+            background-color: getCssVar('menu-hover-bg-color');
+        }
+
+        & > .#{$namespace}-menu-item.is-active {
+            border-bottom: 2px solid getCssVar('menu-active-color');
+            color: getCssVar('menu-active-color') !important;
+        }
+    }
+
+    @include m(collapse) {
+        width: calc(#{getCssVar('menu-icon-width')} + #{getCssVar('menu-base-level-padding')} * 2);
+
+        > .#{$namespace}-menu-item,
+        > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title,
+        > .#{$namespace}-menu-item-group > ul > .#{$namespace}-sub-menu > .#{$namespace}-sub-menu__title {
+            [class^='#{$namespace}-icon'] {
+                margin: 0;
+                vertical-align: middle;
+                width: getCssVar('menu-icon-width');
+                text-align: center;
+            }
+
+            .#{$namespace}-sub-menu__icon-arrow {
+                display: none;
+            }
+
+            > span {
+                height: 0;
+                width: 0;
+                overflow: hidden;
+                visibility: hidden;
+                display: inline-block;
+            }
+        }
+
+        > .#{$namespace}-menu-item.is-active i {
+            color: inherit;
+        }
+
+        .#{$namespace}-menu .#{$namespace}-sub-menu {
+            min-width: 200px;
+        }
+
+        .#{$namespace}-sub-menu {
+            &.is-active .#{$namespace}-sub-menu__title {
+                color: getCssVar('menu-active-color');
+            }
+        }
+    }
+
+    @include m(popup) {
+        z-index: 100;
+        min-width: 200px;
+        border: none;
+        padding: 5px 0;
+        border-radius: getCssVar('border-radius-small');
+        box-shadow: getCssVar('box-shadow-light');
+    }
+
+    @include m(inline) {
+        display: none;
+    }
+
+    .#{$namespace}-icon {
+        flex-shrink: 0;
+    }
+}
+
+@include b(menu-item) {
+    @include menu-item;
+
+    & [class^='#{$namespace}-icon'] {
+        margin-right: 5px;
+        width: getCssVar('menu-icon-width');
+        text-align: center;
+        font-size: 18px;
+        vertical-align: middle;
+    }
+
+    @include when(active) {
+        color: getCssVar('menu-active-color');
+
+        i {
+            color: inherit;
+        }
+    }
+
+    .#{$namespace}-menu-tooltip__trigger {
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 100%;
+        display: inline-flex;
+        align-items: center;
+        box-sizing: border-box;
+        padding: 0 getCssVar('menu-base-level-padding');
+    }
+}
+
+@include b(sub-menu) {
+    list-style: none;
+    margin: 0;
+    padding-left: 0;
+
+    @include e(title) {
+        @include menu-item;
+
+        &:hover {
+            background-color: getCssVar('menu-hover-bg-color');
+        }
+    }
+
+    &.#{$namespace}-sub-menu__hide-arrow .el-sub-menu__title {
+        padding-right: var(--el-menu-base-level-padding);
+    }
+
+    & .#{$namespace}-menu {
+        border: none;
+    }
+
+    & .#{$namespace}-menu-item {
+        height: getCssVar('menu-sub-item-height');
+        line-height: getCssVar('menu-sub-item-height');
+    }
+
+    @include e(hide-arrow) {
+        .#{$namespace}-sub-menu__icon-arrow {
+            display: none !important;
+        }
+    }
+
+    @include when(active) {
+        .#{$namespace}-sub-menu__title {
+            border-bottom-color: getCssVar('menu-active-color');
+        }
+    }
+
+    @include when(disabled) {
+        .#{$namespace}-sub-menu__title,
+        .#{$namespace}-menu-item {
+            opacity: 0.25;
+            cursor: not-allowed;
+            background: none !important;
+        }
+    }
+
+    .#{$namespace}-icon {
+        vertical-align: middle;
+        margin-right: 5px;
+        width: getCssVar('menu-icon-width');
+        text-align: center;
+        font-size: 18px;
+
+        &.#{$namespace}-sub-menu__icon-more {
+            margin-right: 0 !important;
+        }
+    }
+
+    .#{$namespace}-sub-menu__icon-arrow {
+        position: absolute;
+        top: 50%;
+        right: getCssVar('menu-base-level-padding');
+        margin-top: -6px;
+        transition: transform getCssVar('transition-duration');
+        font-size: 12px;
+        margin-right: 0;
+        width: inherit;
+    }
+}
+
+@include b(menu-item-group) {
+    > ul {
+        padding: 0;
+    }
+
+    @include e(title) {
+        padding: 7px 0 7px getCssVar('menu-base-level-padding');
+        line-height: normal;
+        font-size: 12px;
+        color: getCssVar('text-color', 'secondary');
+    }
+}
+
+.horizontal-collapse-transition .#{$namespace}-sub-menu__title .#{$namespace}-sub-menu__icon-arrow {
+    transition: getCssVar('transition-duration-fast');
+    opacity: 0;
+}