@nutui/nutui-react 3.0.0-beta.8 → 3.0.0

package/dist/es/packages/fixednav/fixednav.js

@@ -4,56 +4,53 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import React from "react";
 import classNames from "classnames";
 import { ArrowLeft } from "@nutui/icons-react";
-import Overlay from "../overlay";
+import Overlay from "../overlay/index";
 import { useConfig } from "../configprovider";
-import { ComponentDefaults } from "../../utils/typings";
-var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
+import { defaultOverlayProps } from "../overlay/overlay";
+var defaultProps = _object_spread_props(_object_spread({}, defaultOverlayProps), {
     activeText: '',
     inactiveText: '',
     type: 'right',
+    list: [],
+    overlay: true,
     position: {
         top: 'auto',
         bottom: 'auto'
-    }
+    },
+    zIndex: 200,
+    onChange: function(value) {},
+    onSelect: function() {}
 });
 export var FixedNav = function(props) {
     var locale = useConfig().locale;
-    var _ref = _object_spread({}, defaultProps, props), className = _ref.className, overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, onChange = _ref.onChange, onSelect = _ref.onSelect, type = _ref.type, children = _ref.children, style = _ref.style, content = _ref.content, rest = _object_without_properties(_ref, [
-        "className",
+    var _ref = _object_spread({}, defaultProps, props), overlay = _ref.overlay, visible = _ref.visible, list = _ref.list, activeText = _ref.activeText, inactiveText = _ref.inactiveText, position = _ref.position, type = _ref.type, children = _ref.children, style = _ref.style, className = _ref.className, content = _ref.content, zIndex = _ref.zIndex, onChange = _ref.onChange, onSelect = _ref.onSelect, rest = _object_without_properties(_ref, [
         "overlay",
         "visible",
         "list",
         "activeText",
         "inactiveText",
         "position",
-        "onChange",
-        "onSelect",
         "type",
         "children",
         "style",
-        "content"
+        "className",
+        "content",
+        "zIndex",
+        "onChange",
+        "onSelect"
     ]);
     var classPrefix = 'nut-fixednav';
     var classes = classNames(classPrefix, {
         active: visible
     }, type, className);
-    var handleClick = function(item, event) {
-        onSelect(item, event);
-    };
-    var onUpdateValue = function() {
-        var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : !visible;
-        onChange(value);
-    };
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: classes,
         style: _object_spread({}, position, style)
     }, rest), overlay && /*#__PURE__*/ React.createElement(Overlay, {
         visible: visible,
-        style: {
-            '--nutui-overlay-zIndex': 200
-        },
+        zIndex: zIndex,
         onClick: function() {
-            return onUpdateValue(false);
+            return onChange(false);
         }
     }), /*#__PURE__*/ React.createElement("div", {
         className: "list"
@@ -63,7 +60,7 @@ export var FixedNav = function(props) {
         return /*#__PURE__*/ React.createElement("div", {
             className: "".concat(classPrefix, "-list-item"),
             onClick: function(event) {
-                return handleClick(item, event);
+                return onSelect(item, event);
             },
             key: item.id || index
         }, /*#__PURE__*/ React.isValidElement(item.icon) ? item.icon : /*#__PURE__*/ React.createElement("img", {
@@ -77,7 +74,7 @@ export var FixedNav = function(props) {
     }))), /*#__PURE__*/ React.createElement("div", {
         className: "".concat(classPrefix, "-btn"),
         onClick: function() {
-            return onUpdateValue();
+            return onChange(!visible);
         }
     }, content || /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(ArrowLeft, {
         color: "#fff"

package/dist/es/packages/fixednav/index.d.ts

@@ -1,4 +1,3 @@
 import { FixedNav } from './fixednav';
-export type { FixedNavType, FixedNavPosition, FixedNavItem } from './types';
-export type { FixedNavProps } from './fixednav';
+export type { FixedNavType, FixedNavPosition, FixedNavItem, FixedNavProps, } from './types';
 export default FixedNav;

package/dist/es/packages/fixednav/style/style.css

@@ -3,12 +3,7 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
@@ -19,12 +14,6 @@
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
-[dir=rtl] .nut-overlay,
-.nut-rtl .nut-overlay {
-  left: auto;
-  right: 0;
-}
-
 .nut-overflow-hidden {
   overflow: hidden !important;
 }
@@ -62,6 +51,12 @@
   animation-duration: var(--nutui-overlay-animation-duration, 0.3s);
 }
 
+[dir=rtl] .nut-overlay,
+.nut-rtl .nut-overlay {
+  left: auto;
+  right: 0;
+}
+
 .nut-fixednav {
   position: fixed;
   z-index: var(--nutui-fixednav-index, 900);

package/dist/es/packages/fixednav/types.d.ts

@@ -1,4 +1,5 @@
 import { Key, ReactNode } from 'react';
+import { OverlayProps } from "../overlay/types";
 export type FixedNavType = 'right' | 'left';
 export type FixedNavPosition = {
     top?: string;
@@ -10,3 +11,14 @@ export interface FixedNavItem {
     text: ReactNode;
     icon: ReactNode;
 }
+export interface FixedNavProps extends Omit<OverlayProps, 'onClick'> {
+    overlay: boolean;
+    activeText: string;
+    inactiveText: string;
+    position: FixedNavPosition;
+    type: FixedNavType;
+    content?: React.ReactNode;
+    list: Array<FixedNavItem>;
+    onChange: (value: boolean) => void;
+    onSelect: (item: FixedNavItem, event: React.MouseEvent<Element, MouseEvent>) => void;
+}

package/dist/es/packages/form/style/style.css

@@ -115,9 +115,9 @@
   left: 50%;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-color-title, #1a1a1a);
+  background-color: #000000;
   border: inherit;
-  border-color: var(--nutui-color-title, #1a1a1a);
+  border-color: #000000;
   border-radius: inherit;
   transform: translate(-50%, -50%);
   opacity: 0;
@@ -142,6 +142,8 @@
 
 .nut-form-item {
   display: flex;
+  align-items: center;
+  padding: 4px 12px;
 }
 .nut-form-item.error.line::before {
   border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/formitem/style/formitem.scss

@@ -1,5 +1,7 @@
 .nut-form-item {
   display: flex;
+  align-items: center;
+  padding: 4px 12px;
 
   &.error {
     &.line {

package/dist/es/packages/formitem/style/style.css

@@ -4,6 +4,8 @@
 /* #endif */
 .nut-form-item {
   display: flex;
+  align-items: center;
+  padding: 4px 12px;
 }
 .nut-form-item.error.line::before {
   border-bottom: 1px solid var(--nutui-form-item-error-line-color, var(--nutui-color-primary, #ff0f23));

package/dist/es/packages/grid/style/style.css

@@ -32,7 +32,7 @@
   flex-direction: column;
   width: 100%;
   padding: var(--nutui-grid-item-content-padding, 16px 8px);
-  background: var(--nutui-grid-item-content-bg-color, #ffffff);
+  background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1));
   border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {

package/dist/es/packages/griditem/style/style.css

@@ -32,7 +32,7 @@
   flex-direction: column;
   width: 100%;
   padding: var(--nutui-grid-item-content-padding, 16px 8px);
-  background: var(--nutui-grid-item-content-bg-color, #ffffff);
+  background: var(--nutui-grid-item-content-bg-color, var(--nutui-gray-1));
   border: 0 solid var(--nutui-grid-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 .nut-grid-item-content-border {

package/dist/es/packages/hoverbutton/style/hoverbutton.scss

@@ -9,10 +9,6 @@
     bottom: $hoverbutton-position-bottom;
     z-index: 10;
   }
-
-  &-container-rn {
-    position: absolute;
-  }
 }
 
 [dir='rtl'] .nut-hoverbutton-container,

package/dist/es/packages/hoverbutton/style/style.css

@@ -67,9 +67,6 @@
   bottom: var(--nutui-hoverbutton-position-bottom, 60px);
   z-index: 10;
 }
-.nut-hoverbutton-container-rn {
-  position: absolute;
-}
 
 [dir=rtl] .nut-hoverbutton-container,
 .nut-hoverbutton-container-rtl {

package/dist/es/packages/image/image.d.ts

@@ -1,5 +1,6 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
+import { FixAutoComplete } from "../../types/fix-string-literal-union";
 export interface ImageProps extends BasicComponent {
     src: string;
     fit: ImageFit;
@@ -15,6 +16,6 @@ export interface ImageProps extends BasicComponent {
     onLoad: () => void;
     onError: () => void;
 }
-export type ImageFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down' | string;
-export type ImagePosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | string;
+export type ImageFit = FixAutoComplete<'contain' | 'cover' | 'fill' | 'none' | 'scale-down'>;
+export type ImagePosition = FixAutoComplete<'center' | 'top' | 'right' | 'bottom' | 'left'>;
 export declare const Image: FunctionComponent<Partial<ImageProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'onLoad' | 'onError'>>;

package/dist/es/packages/image/style/style.css

@@ -25,7 +25,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 .nut-image-error {
@@ -38,7 +38,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: var(--nutui-color-background, #f5f6fa);
+  background: var(--nutui-color-background, #f2f3f5);
   background-size: 100% 100%;
 }
 

package/dist/es/packages/imagepreview/imagepreview.js

@@ -10,7 +10,7 @@ import Video from "../video";
 import Swiper from "../swiper";
 import SwiperItem from "../swiperitem";
 import { ComponentDefaults } from "../../utils/typings";
-import { usePropsValue } from "../../utils/use-props-value";
+import { usePropsValue } from "../../hooks/use-props-value";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     images: [],
     videos: [],