@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/style.mjs

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.0-alpha.1 Fri Apr 21 2023 18:05:06 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.0-alpha.2 Wed Apr 26 2023 18:37:03 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/variables-jmapp.scss

@@ -1520,108 +1520,36 @@ $popover-menu-name-line-height: var(
   normal
 ) !default;
 
-//progressr（✅）
+//progress（✅）
+$progress-height: var(--nutui-progress-height, 10px) !default;
+$progress-color: var(
+  --nutui-progress-color,
+  linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
+) !default;
+$progress-background: var(--nutui-progress-background, #f3f3f3) !default;
 $progress-border-radius: var(--nutui-progress-border-radius, 12px) !default;
-$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
-$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default;
-$progress-text-color: var(--nutui-progress-text-color, $title-color) !default;
-$progress-text-inner-color: var(
-  --nutui-progress-text-inner-color,
+$progress-text-color: var(
+  --nutui-progress-text-color,
   $primary-text-color
 ) !default;
-$progress-insidetext-position-top: var(
-  --nutui-progress-insidetext-position-top,
-  -4px
+$progress-text-background: var(
+  --nutui-progress-text-background,
+  $progress-color
 ) !default;
-$progress-insidetext-position-bottom: var(
-  --nutui-progress-insidetext-position-bottom,
+$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
+$progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
+$progress-text-position-top: var(
+  --nutui-progress-text-position-top,
   -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
-  5px
-) !default;
-$progress-inner-background-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$progress-insidetext-background: var(
-  --nutui-progress-insidetext-background,
-  $progress-inner-background-color
-) !default;
-$progress-outer-background-color: var(
-  --nutui-progress-outer-background-color,
-  #f3f3f3
-) !default;
-$progress-outer-border-radius: var(
-  --nutui-progress-outer-border-radius,
-  12px
+$progress-text-position-bottom: var(
+  --nutui-progress-text-position-bottom,
+  -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
+$progress-text-border-radius: var(
+  --nutui-progress-text-border-radius,
   5px
 ) !default;
-$progress-insidetext-padding: var(
-  --nutui-progress-insidetext-padding,
-  3px 5px 3px 6px
-) !default;
-$progress-insidetext-top: var(--nutui-progress-insidetext-top, -42%) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-small-font-size: var(--nutui-progress-small-font-size, 7px) !default;
-$progress-small-padding: var(--nutui-progress-small-padding, 0 4px) !default;
-$progress-small-height: var(--nutui-progress-small-height, 5px) !default;
-$progress-small-text-font-size: var(
-  --nutui-progress-small-text-font-size,
-  7px
-) !default;
-$progress-small-text-line-height: var(
-  --nutui-progress-small-text-line-height,
-  10px
-) !default;
-$progress-small-text-padding: var(
-  --nutui-progress-small-text-padding,
-  2px 4px
-) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-base-font-size: var(--nutui-progress-base-font-size, 9px) !default;
-$progress-base-padding: var(--nutui-progress-base-padding, 0 5px) !default;
-$progress-base-height: var(--nutui-progress-base-height, 10px) !default;
-$progress-base-text-font-size: var(
-  --nutui-progress-base-text-font-size,
-  9px
-) !default;
-$progress-base-text-line-height: var(
-  --nutui-progress-base-text-line-height,
-  13px
-) !default;
-$progress-base-text-padding: var(
-  --nutui-progress-base-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-base-text-top: var(
-  --nutui-progress-base-text-top,
-  $progress-insidetext-top
-) !default;
-$progress-large-font-size: var(--nutui-progress-large-font-size, 13px) !default;
-$progress-large-padding: var(--nutui-progress-large-padding, 0 5px) !default;
-$progress-large-height: var(--nutui-progress-large-height, 15px) !default;
-$progress-large-text-font-size: var(
-  --nutui-progress-large-text-font-size,
-  13px
-) !default;
-$progress-large-text-line-height: var(
-  --nutui-progress-large-text-line-height,
-  18px
-) !default;
-$progress-large-text-padding: var(
-  --nutui-progress-large-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-large-text-top: var(
-  --nutui-progress-large-text-top,
-  $progress-insidetext-top
-) !default;
 
 //pagination（✅）
 $pagination-color: var(--nutui-pagination-color, $primary-color) !default;
@@ -2196,21 +2124,14 @@ $navbar-box-shadow: var(
   0px 1px 7px 0px rgba(237, 238, 241, 1)
 ) !default;
 $navbar-color: var(--nutui-navbar-color, $gray1) !default;
-$navbar-title-base-font: var(
-  --nutui-navbar-title-base-font,
-  $font-size-2
-) !default;
-$navbar-title-font: var(--nutui-navbar-title-font, $font-size-2) !default;
+$navbar-font-size: var(--nutui-navbar-font-size, $font-size-2) !default;
+$navbar-title-font: var(--nutui-navbar-title-font-size, $font-size-2) !default;
 $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default;
 $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
   $navbar-color
 ) !default;
 $navbar-title-width: var(--nutui-navbar-title-width, 100px) !default;
-$navbar-title-icon-margin: var(
-  --nutui-navbar-title-icon-margin,
-  0 0 0 13px
-) !default;
 
 // sidenavbar（✅）
 $sidenavbar-content-bg-color: var(
@@ -2328,18 +2249,6 @@ $elevator-list-item-code-line-height: var(
   --nutui-elevator-list-item-code-line-height,
   35px
 ) !default;
-$elevator-list-item-code-after-width: var(
-  --nutui-elevator-list-item-code-after-width,
-  100%
-) !default;
-$elevator-list-item-code-after-height: var(
-  --nutui-elevator-list-item-code-after-height,
-  1px
-) !default;
-$elevator-list-item-code-after-bg-color: var(
-  --nutui-elevator-list-item-code-after-bg-color,
-  #f5f5f5
-) !default;
 $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px
   rgba(240, 240, 240, 1) !default;
 $elevator-list-item-code-current-bg-color: var(

package/dist/styles/variables.scss

@@ -1419,26 +1419,19 @@ $badge-background-color: var(
 ) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-1) !default;
-$badge-default-background-color: var(
-  --nutui-badge-default-background-color,
-  rgba(255, 255, 255, 1)
-) !default;
 $badge-border: var(
   --nutui-badge-border,
   0px solid $primary-text-color
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, 14px) !default;
 $badge-padding: var(--nutui-badge-padding, 0 5px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
   translateY(-50%) translateX(100%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
 $badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
-$badge-dot-height: var(--nutui-badge-dot-height, 7px) !default;
-$badge-dot-border-radius: var(--nutui-badge-dot-border-radius, 7px) !default;
-$badge-dot-padding: var(--nutui-badge-dot-padding, 0px) !default;
 
 //popover（✅）
 $popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
@@ -1505,108 +1498,36 @@ $popover-menu-name-line-height: var(
   normal
 ) !default;
 
-//progressr（✅）
+//progress（✅）
+$progress-height: var(--nutui-progress-height, 10px) !default;
+$progress-color: var(
+  --nutui-progress-color,
+  linear-gradient(135deg, #fa2c19 0%, #fa6419 100%)
+) !default;
+$progress-background: var(--nutui-progress-background, #f3f3f3) !default;
 $progress-border-radius: var(--nutui-progress-border-radius, 12px) !default;
-$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
-$progress-text-font-size: var(--nutui-progress-text-font-size, 13px) !default;
-$progress-text-color: var(--nutui-progress-text-color, $title-color) !default;
-$progress-text-inner-color: var(
-  --nutui-progress-text-inner-color,
+$progress-text-color: var(
+  --nutui-progress-text-color,
   $primary-text-color
 ) !default;
-$progress-insidetext-position-top: var(
-  --nutui-progress-insidetext-position-top,
-  -4px
+$progress-text-background: var(
+  --nutui-progress-text-background,
+  $progress-color
 ) !default;
-$progress-insidetext-position-bottom: var(
-  --nutui-progress-insidetext-position-bottom,
+$progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
+$progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
+$progress-text-position-top: var(
+  --nutui-progress-text-position-top,
   -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
-  5px
-) !default;
-$progress-inner-background-color: linear-gradient(
-  135deg,
-  $primary-color 0%,
-  $primary-color-end 100%
-) !default;
-$progress-insidetext-background: var(
-  --nutui-progress-insidetext-background,
-  $progress-inner-background-color
-) !default;
-$progress-outer-background-color: var(
-  --nutui-progress-outer-background-color,
-  #f3f3f3
-) !default;
-$progress-outer-border-radius: var(
-  --nutui-progress-outer-border-radius,
-  12px
+$progress-text-position-bottom: var(
+  --nutui-progress-text-position-bottom,
+  -4px
 ) !default;
-$progress-insidetext-border-radius: var(
-  --nutui-progress-insidetext-border-radius,
+$progress-text-border-radius: var(
+  --nutui-progress-text-border-radius,
   5px
 ) !default;
-$progress-insidetext-padding: var(
-  --nutui-progress-insidetext-padding,
-  3px 5px 3px 6px
-) !default;
-$progress-insidetext-top: var(--nutui-progress-insidetext-top, -42%) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-small-font-size: var(--nutui-progress-small-font-size, 7px) !default;
-$progress-small-padding: var(--nutui-progress-small-padding, 0 4px) !default;
-$progress-small-height: var(--nutui-progress-small-height, 5px) !default;
-$progress-small-text-font-size: var(
-  --nutui-progress-small-text-font-size,
-  7px
-) !default;
-$progress-small-text-line-height: var(
-  --nutui-progress-small-text-line-height,
-  10px
-) !default;
-$progress-small-text-padding: var(
-  --nutui-progress-small-text-padding,
-  2px 4px
-) !default;
-$progress-small-text-top: var(--nutui-progress-small-text-top, -100%) !default;
-$progress-base-font-size: var(--nutui-progress-base-font-size, 9px) !default;
-$progress-base-padding: var(--nutui-progress-base-padding, 0 5px) !default;
-$progress-base-height: var(--nutui-progress-base-height, 10px) !default;
-$progress-base-text-font-size: var(
-  --nutui-progress-base-text-font-size,
-  9px
-) !default;
-$progress-base-text-line-height: var(
-  --nutui-progress-base-text-line-height,
-  13px
-) !default;
-$progress-base-text-padding: var(
-  --nutui-progress-base-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-base-text-top: var(
-  --nutui-progress-base-text-top,
-  $progress-insidetext-top
-) !default;
-$progress-large-font-size: var(--nutui-progress-large-font-size, 13px) !default;
-$progress-large-padding: var(--nutui-progress-large-padding, 0 5px) !default;
-$progress-large-height: var(--nutui-progress-large-height, 15px) !default;
-$progress-large-text-font-size: var(
-  --nutui-progress-large-text-font-size,
-  13px
-) !default;
-$progress-large-text-line-height: var(
-  --nutui-progress-large-text-line-height,
-  18px
-) !default;
-$progress-large-text-padding: var(
-  --nutui-progress-large-text-padding,
-  $progress-insidetext-padding
-) !default;
-$progress-large-text-top: var(
-  --nutui-progress-large-text-top,
-  $progress-insidetext-top
-) !default;
 
 //pagination（✅）
 $pagination-color: var(--nutui-pagination-color, $primary-color) !default;
@@ -2180,22 +2101,14 @@ $navbar-box-shadow: var(
   --nutui-navbar-box-shadow,
   0px 1px 7px 0px rgba(237, 238, 241, 1)
 ) !default;
-$navbar-color: var(--nutui-navbar-color, $gray1) !default;
-$navbar-title-base-font: var(
-  --nutui-navbar-title-base-font,
+$navbar-color: var(--nutui-navbar-color, $gray2) !default;
+$navbar-font-size: var(--nutui-navbar-font-size, $font-size-2) !default;
+$navbar-title-font-size: var(
+  --nutui-navbar-title-font-size,
   $font-size-2
 ) !default;
-$navbar-title-font: var(--nutui-navbar-title-font, $font-size-2) !default;
 $navbar-title-font-weight: var(--nutui-navbar-title-font-weight, 0) !default;
-$navbar-title-font-color: var(
-  --nutui-navbar-title-font-color,
-  $navbar-color
-) !default;
-$navbar-title-width: var(--nutui-navbar-title-width, 100px) !default;
-$navbar-title-icon-margin: var(
-  --nutui-navbar-title-icon-margin,
-  0 0 0 13px
-) !default;
+$navbar-title-font-color: var(--nutui-navbar-title-font-color, $gray1) !default;
 
 // sidenavbar（✅）
 $sidenavbar-content-bg-color: var(
@@ -2313,16 +2226,12 @@ $elevator-list-item-code-line-height: var(
   --nutui-elevator-list-item-code-line-height,
   35px
 ) !default;
-$elevator-list-item-code-after-width: var(
-  --nutui-elevator-list-item-code-after-width,
-  100%
-) !default;
-$elevator-list-item-code-after-height: var(
-  --nutui-elevator-list-item-code-after-height,
+$elevator-list-item-code-border-bottom: var(
+  --nutui-elevator-list-item-code-border-bottom,
   1px
 ) !default;
-$elevator-list-item-code-after-bg-color: var(
-  --nutui-elevator-list-item-code-after-bg-color,
+$elevator-list-item-code-border-bottom-color: var(
+  --nutui-elevator-list-item-code-border-bottom-color,
   #f5f5f5
 ) !default;
 $elevator-list-item-code-current-box-shadow: 0 3px 3px 1px

package/dist/types/index.d.ts

@@ -241,10 +241,8 @@ declare const Col: FunctionComponent<Partial<ColProps> & Omit<React__default.HTM
 
 type ContentPositionType = 'left' | 'center' | 'right';
 type DirectionType = 'horizontal' | 'vertical';
-interface DividerProps {
+interface DividerProps extends BasicComponent {
     contentPosition: ContentPositionType;
-    style?: React__default.CSSProperties;
-    className?: string;
     direction?: DirectionType;
 }
 declare const Divider: FunctionComponent<Partial<DividerProps> & React__default.HTMLAttributes<HTMLDivElement>>;
@@ -304,15 +302,13 @@ interface StickyProps extends BasicComponent {
 declare const Sticky: FunctionComponent<Partial<StickyProps>>;
 
 declare const elevatorContext: React__default.Context<ElevatorData>;
-interface ElevatorProps {
+interface ElevatorProps extends BasicComponent {
     height: number | string;
-    acceptKey: string;
-    indexList: any[];
-    isSticky: boolean;
+    floorKey: string;
+    list: any[];
+    sticky: boolean;
     spaceHeight: number;
     titleHeight: number;
-    className: string;
-    style: React__default.CSSProperties;
     children: React__default.ReactNode;
     onClickItem: (key: string, item: ElevatorData) => void;
     onClickIndex: (key: string) => void;
@@ -353,13 +349,11 @@ interface IndicatorProps {
 declare const Indicator: FunctionComponent<Partial<IndicatorProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
 interface MenuProps extends BasicComponent {
-    className: string;
-    style: React__default.CSSProperties;
     activeColor: string;
-    closeOnClickOverlay: boolean;
+    closeOnOverlayClick: boolean;
     scrollFixed: boolean | string | number;
     lockScroll: boolean;
-    titleIcon: React__default.ReactNode;
+    icon: React__default.ReactNode;
     children: React__default.ReactNode;
 }
 declare const Menu: FunctionComponent<Partial<MenuProps>>;
@@ -369,13 +363,12 @@ interface OptionItem {
     value: string | number;
 }
 interface MenuItemProps extends BasicComponent {
-    className: string;
-    style: React__default.CSSProperties;
     title: React__default.ReactNode;
     options: OptionItem[];
     disabled: boolean;
     columns: number;
-    optionsIcon: React__default.ReactNode;
+    icon: React__default.ReactNode;
+    closeOnClickAway: boolean;
     direction: string;
     activeTitleClass: string;
     inactiveTitleClass: string;
@@ -386,21 +379,14 @@ interface MenuItemProps extends BasicComponent {
 declare const MenuItem: React__default.ForwardRefExoticComponent<Partial<MenuItemProps> & React__default.RefAttributes<unknown>>;
 
 interface NavBarProps$1 extends BasicComponent {
-    leftShow: boolean;
-    title: string;
-    leftText: string;
-    description: string;
-    className: string;
+    left: React__default.ReactNode;
+    back: React__default.ReactNode;
+    right: React__default.ReactNode;
     fixed: boolean;
     safeAreaInsetTop: boolean;
-    border: boolean;
     placeholder: boolean;
     zIndex: number | string;
-    style: React__default.CSSProperties;
-    onClickTitle: (e: React__default.MouseEvent<HTMLDivElement>) => void;
-    onClickIcon: (e: React__default.MouseEvent<HTMLDivElement>) => void;
     onClickBack: (e: React__default.MouseEvent<HTMLElement>) => void;
-    onClickRight: (e: React__default.MouseEvent<HTMLDivElement>) => void;
     children?: React__default.ReactNode;
 }
 declare const NavBar: FunctionComponent<Partial<NavBarProps$1>>;
@@ -1300,7 +1286,7 @@ interface DialogComponent extends ForwardRefExoticComponent<PropsWithChildren<Ba
 type DialogProps = BasicDialogProps;
 declare const Dialog: DialogComponent;
 
-interface DragProps {
+interface DragProps extends BasicComponent {
     attract: boolean;
     direction: 'x' | 'y' | 'lock' | undefined;
     boundary: {
@@ -1309,8 +1295,6 @@ interface DragProps {
         right: number;
         bottom: number;
     };
-    className: string;
-    style: React__default.CSSProperties;
 }
 declare const Drag: FunctionComponent<Partial<DragProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
@@ -1465,12 +1449,10 @@ declare const _default: {
 type AnimateType = 'shake' | 'ripple' | 'breath' | 'float' | 'slide-right' | 'slide-left' | 'slide-top' | 'slide-bottom' | 'jump' | 'twinkle' | 'flicker';
 type AnimateAction = 'initial' | 'click';
 
-interface AnimateProps {
+interface AnimateProps extends BasicComponent {
     type: AnimateType;
     action: AnimateAction;
     loop: boolean;
-    className: string;
-    style: React__default.CSSProperties;
     onClick: (event: React__default.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 declare const Animate: FunctionComponent<Partial<AnimateProps> & React__default.HTMLAttributes<HTMLDivElement>>;
@@ -1545,15 +1527,12 @@ interface AvatarGroupProps {
 declare const AvatarGroup: FunctionComponent<Partial<AvatarGroupProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 
 interface BadgeProps extends BasicComponent {
-    value: any;
+    value: ReactNode;
     dot: boolean;
     max: number;
     top: string;
     right: string;
-    zIndex: string;
     color: string;
-    icon: ReactNode;
-    children?: ReactNode;
 }
 declare const Badge: FunctionComponent<Partial<BadgeProps>>;
 
@@ -1719,26 +1698,13 @@ interface PriceProps {
 }
 declare const Price: FunctionComponent<Partial<PriceProps>>;
 
-type ProgressSize = 'small' | 'base' | 'large';
-type TextType = 'icon' | 'text';
 interface ProgressProps extends BasicComponent {
-    className: string;
-    style: CSSProperties;
-    isShowPercentage: boolean;
-    percentage: number;
-    fillColor: string;
-    strokeColor: string;
+    percent: number;
+    background: string;
+    color: string;
     strokeWidth: string;
-    size: ProgressSize;
-    textColor: string;
-    textWidth: string;
     showText: boolean;
-    textInside: boolean;
-    textBackground: string;
-    textType: TextType;
-    status: boolean;
-    icon: ReactNode;
-    children: ReactNode;
+    animated: boolean;
 }
 declare const Progress: FunctionComponent<Partial<ProgressProps> & React__default.HTMLAttributes<HTMLDivElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui-react",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "style": "dist/style.css",
   "main": "dist/nutui.react.umd.js",
   "module": "dist/esm/nutui-react.es.js",