@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

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

@@ -17,14 +17,16 @@
     position: relative;
 
     .nut-icon {
-      width: 24px;
-      height: 24px;
-      font-size: 24px;
+      width: 22px;
+      height: 22px;
+      font-size: 22px;
     }
 
     &-nav {
       display: block;
+      color: $color-text;
       font-size: $tabbar-text-font-size;
+      line-height: $tabbar-text-font-size;
       margin-top: $tabbar-text-margin-top;
     }
 
@@ -40,10 +42,20 @@
     color: $tabbar-active-color;
 
     .nut-tabbar-item-icon-box {
+      /* #ifdef harmony*/
+      color: $tabbar-active-color;
+      /* #endif*/
+      /* #ifndef harmony*/
       color: inherit;
+      /* #endif*/
 
       .nut-icon {
+        /* #ifdef harmony*/
+        color: $tabbar-active-color;
+        /* #endif*/
+        /* #ifndef harmony*/
         color: inherit;
+        /* #endif*/
       }
     }
   }

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

@@ -1,40 +1,12 @@
 import { FunctionComponent, ReactNode } from 'react';
 import { BasicComponent } from "../../utils/typings";
 export interface TabbarItemProps extends BasicComponent {
-    /**
-    * 标签页的标题
-    * @default -
-    */
-    title: ReactNode
-    /**
-    * 自定义图标
-    * @default -
-    */
-    icon: ReactNode
-    /**
-    * 徽标中显示的内容，支持数字、字符和自定义内容
-    * @default -
-    */
-    value: ReactNode
-    /**
-    * 徽标是否为小点
-    * @default false
-    */
-    dot: boolean
-    /**
-    * value 为数值时，最大值
-    * @default 99
-    */
-    max: number
-    /**
-    * 徽标的上下偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    top: string
-    /**
-    * 徽标的左右偏移量，支持单位设置，可设置为：5 等
-    * @default 0
-    */
-    right: string
+    title: ReactNode;
+    icon: ReactNode;
+    value: ReactNode;
+    dot: boolean;
+    max: number;
+    top: string;
+    right: string;
 }
 export declare const TabbarItem: FunctionComponent<Partial<TabbarItemProps>>;

package/dist/es/packages/tabbaritem/tabbaritem.js

@@ -4,9 +4,11 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import React, { useContext } from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import { ComponentDefaults } from "../../utils/typings";
 import Badge from "../badge/index";
 import TabbarContext from "../tabbar/context";
+import addColorForHarmony from "../../utils/add-color-for-harmony";
 var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     title: '',
     icon: null,
@@ -14,7 +16,7 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
     dot: false,
     max: 99,
     top: '0',
-    right: '5'
+    right: '0'
 });
 export var TabbarItem = function(props) {
     var ctx = useContext(TabbarContext);
@@ -44,7 +46,7 @@ export var TabbarItem = function(props) {
         right: right,
         color: ctx === null || ctx === void 0 ? void 0 : ctx.activeColor
     };
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
+    return /*#__PURE__*/ React.createElement(View, _object_spread({
         className: tabbarItemClass,
         style: _object_spread({
             color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
@@ -52,11 +54,17 @@ export var TabbarItem = function(props) {
         onClick: function() {
             return ctx === null || ctx === void 0 ? void 0 : ctx.handleClick(index);
         }
-    }, rest), icon ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement("div", {
+    }, rest), icon ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
         className: boxPrefix
-    }, icon)), /*#__PURE__*/ React.createElement("div", {
-        className: titleClass
-    }, title)) : /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement("div", {
-        className: titleClass
+    }, addColorForHarmony(icon, active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor))), /*#__PURE__*/ React.createElement(View, {
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
+    }, title)) : /*#__PURE__*/ React.createElement(Badge, badgeProps, /*#__PURE__*/ React.createElement(View, {
+        className: titleClass,
+        style: {
+            color: active ? ctx === null || ctx === void 0 ? void 0 : ctx.activeColor : ctx === null || ctx === void 0 ? void 0 : ctx.inactiveColor
+        }
     }, title)));
 };

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

@@ -1,3 +1,7 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-table {
   overflow: hidden;
   position: relative;
@@ -8,12 +12,12 @@
   display: flex;
   width: 100%;
   flex-direction: column;
-  font-size: var(--nutui-font-size-3, 14px);
-  color: var(--nutui-gray-7, #1a1a1a);
+  font-size: var(--nutui-font-size-base, 14px);
+  color: var(--nutui-gray-7);
   overflow-y: auto;
   overflow-x: hidden;
   position: relative;
-  border: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border: 1px solid var(--nutui-table-border-color, var(--nutui-black-3));
 }
 .nut-table-wrapper-sticky {
   overflow-x: auto;
@@ -21,21 +25,21 @@
 .nut-table-main {
   display: table;
   overflow-x: auto;
-  color: var(--nutui-gray-7, #1a1a1a);
-  background-color: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-gray-7);
+  background-color: var(--nutui-gray-1);
   table-layout: fixed;
   width: max-content;
   min-width: 100%;
   position: relative;
 }
 .nut-table-main-striped .nut-table-main-head-tr {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3));
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(odd) {
   background-color: var(--nutui-table-tr-odd-bg-color, #ffffff);
 }
 .nut-table-main-striped .nut-table-main-body-tr:nth-child(even) {
-  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3, #f5f6fa));
+  background-color: var(--nutui-table-tr-even-bg-color, var(--nutui-gray-3));
 }
 .nut-table-main-head, .nut-table-main-body {
   background: inherit;
@@ -77,8 +81,8 @@
   justify-content: center;
 }
 .nut-table-main-head-tr-border, .nut-table-main-body-tr-border {
-  border-right: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
-  border-bottom: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border-right: 1px solid var(--nutui-table-border-color, var(--nutui-black-3));
+  border-bottom: 1px solid var(--nutui-table-border-color, var(--nutui-black-3));
 }
 .nut-table-main-head-tr-alignleft, .nut-table-main-head-tr-align, .nut-table-main-body-tr-alignleft, .nut-table-main-body-tr-align {
   text-align: start;
@@ -127,8 +131,8 @@
   border-right: none;
 }
 .nut-table-summary {
-  color: var(--nutui-gray-7, #1a1a1a);
-  background-color: var(--nutui-gray-1, #ffffff);
+  color: var(--nutui-gray-7);
+  background-color: var(--nutui-gray-1);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -154,7 +158,7 @@
 .nut-rtl .nut-table-main-head-tr-border,
 .nut-rtl .nut-table-main-body-tr-border {
   border-right: none;
-  border-left: 1px solid var(--nutui-table-border-color, var(--nutui-black-3, rgba(0, 0, 0, 0.06)));
+  border-left: 1px solid var(--nutui-table-border-color, var(--nutui-black-3));
 }
 [dir=rtl] .nut-table-main-head-tr-alignleft, [dir=rtl] .nut-table-main-head-tr-align, [dir=rtl] .nut-table-main-body-tr-alignleft, [dir=rtl] .nut-table-main-body-tr-align,
 .nut-rtl .nut-table-main-head-tr-alignleft,

package/dist/es/packages/table/table.js

@@ -7,6 +7,7 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useRef } from "react";
 import classNames from "classnames";
 import { ArrowDown } from "@nutui/icons-react-taro";
+import { View } from "@tarojs/components";
 import { useConfig, useRtl } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
 import { usePropsValue } from "../../utils/use-props-value";
@@ -80,7 +81,7 @@ export var Table = function(props) {
     };
     var renderHeadCells = function() {
         return columns.map(function(item, index) {
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 className: classNames("".concat(headerClassPrefix, "-th"), cellClasses(item), getStickyClass(item.key)),
                 key: item.key,
                 onClick: function() {
@@ -102,51 +103,54 @@ export var Table = function(props) {
         });
     };
     var renderBodyTds = function(item, rowIndex) {
-        var rowRender = item.rowRender;
-        if (rowRender && typeof rowRender === 'function') {
-            return rowRender(item, rowIndex);
-        }
         return sortDataItem().map(function(param) {
             var _param = _sliced_to_array(param, 2), value = _param[0], render = _param[1];
-            return /*#__PURE__*/ React.createElement("div", {
+            return /*#__PURE__*/ React.createElement(View, {
                 className: classNames("".concat(bodyClassPrefix, "-td"), cellClasses(getColumnItem(value)), getStickyClass(value)),
                 key: value,
                 style: getStickyStyle(value)
-            }, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ React.createElement("div", null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
+            }, typeof item[value] === 'function' || typeof render === 'function' ? /*#__PURE__*/ React.createElement(View, null, render ? render(item, rowIndex) : item[value](item)) : item[value]);
         });
     };
     var renderBodyTrs = function() {
         return innerValue.map(function(item, index) {
-            return /*#__PURE__*/ React.createElement("div", {
+            var inner = renderBodyTds(item, index);
+            var rowRender = item.rowRender;
+            if (rowRender && typeof rowRender === 'function') {
+                return rowRender(item, index, {
+                    inner: inner
+                });
+            }
+            return /*#__PURE__*/ React.createElement(View, {
                 className: bodyClassPrefix,
                 key: index
-            }, renderBodyTds(item, index));
+            }, inner);
         });
     };
     return /*#__PURE__*/ React.createElement("div", _object_spread({
         className: cls
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-wrapper ").concat(isSticky ? "".concat(classPrefix, "-wrapper-sticky") : '')),
         style: style
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: classNames("".concat(classPrefix, "-main"), _define_property({}, "".concat(classPrefix, "-main-striped"), striped))
-    }, showHeader && /*#__PURE__*/ React.createElement("div", {
+    }, showHeader && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-main-head")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: headerClassPrefix
-    }, renderHeadCells())), /*#__PURE__*/ React.createElement("div", {
+    }, renderHeadCells())), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-main-body")
-    }, renderBodyTrs()))), isSticky ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+    }, renderBodyTrs()))), isSticky ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-sticky-left"),
         style: {
             width: stickyLeftWidth
         }
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-sticky-right"),
         style: {
             width: stickyRightWidth
         }
-    })) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ React.createElement("div", {
+    })) : null, (summary || innerValue.length === 0) && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-summary")
     }, summary || noData));
 };

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

@@ -1,9 +1,13 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-tabpane {
   width: 100%;
   flex-shrink: 0;
   display: block;
   background-color: var(--nutui-tabs-tabpane-backgroundColor, #fff);
-  color: var(--nutui-gray-7, #1a1a1a);
+  color: var(--nutui-gray-7);
   padding: var(--nutui-tabs-tabpane-padding, 24px 20px);
   box-sizing: border-box;
   overflow: auto;

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

@@ -3,21 +3,9 @@ interface TabPanelInnerProps {
     autoHeightClassName: string;
 }
 export interface TabPaneProps {
-    /**
-    * 标题
-    * @default -
-    */
-    title: string | number
-    /**
-    * 标签 Key , 匹配的标识符, 默认为索引值
-    * @default -
-    */
-    value: string | number
-    /**
-    * 是否禁用标签
-    * @default false
-    */
-    disabled: boolean
+    title: string | number;
+    value: string | number;
+    disabled: boolean;
     className: string;
     children?: React.ReactNode;
 }

package/dist/es/packages/tabpane/tabpane.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import React from "react";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 var defaultProps = {
     title: '',
     value: '',
@@ -12,7 +13,7 @@ export var TabPane = function(props) {
     var classes = classNames(classPrefix, {
         active: !disabled && props.active
     }, autoHeightClassName, className);
-    return children ? /*#__PURE__*/ React.createElement("div", {
+    return children ? /*#__PURE__*/ React.createElement(View, {
         className: classes
     }, !disabled && children) : null;
 };