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

package/dist/es/packages/searchbar/searchbar.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import React, { useEffect, useRef, useState } from "react";
-import { View } from "@tarojs/components";
+import { View, Input as TaroInput } from "@tarojs/components";
 import { MaskClose, Search, ArrowLeft } from "@nutui/icons-react-taro";
 import { useConfig } from "../configprovider/configprovider";
 import { ComponentDefaults } from "../../utils/typings";
@@ -34,21 +34,23 @@ export var SearchBar = function(props) {
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.focus();
     };
-    var change = function(event) {
-        if (value === event.target.value) return;
-        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(event.target.value, event));
-        setValue(event.target.value);
-        event.target.value === '' && forceFocus();
+    var onInput = function(event) {
+        var _event_detail;
+        var eventValue = event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value;
+        if (value === eventValue) return;
+        onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(eventValue, event));
+        setValue(eventValue);
+        eventValue === '' && forceFocus();
     };
     var focus = function(event) {
-        var value = event.target.value;
-        onFocus && (onFocus === null || onFocus === void 0 ? void 0 : onFocus(value, event));
+        var _event_detail;
+        onFocus && onFocus(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     var blur = function(event) {
+        var _event_detail;
         var searchSelf = searchRef.current;
         searchSelf && searchSelf.blur();
-        var value = event.target.value;
-        onBlur && (onBlur === null || onBlur === void 0 ? void 0 : onBlur(value, event));
+        onBlur && onBlur(event === null || event === void 0 ? void 0 : (_event_detail = event.detail) === null || _event_detail === void 0 ? void 0 : _event_detail.value, event);
     };
     useEffect(function() {
         setValue(outerValue || '');
@@ -61,28 +63,21 @@ export var SearchBar = function(props) {
         autoFocus
     ]);
     var renderField = function() {
-        return /*#__PURE__*/ React.createElement("input", {
+        return /*#__PURE__*/ React.createElement(TaroInput, {
             className: "".concat(classPrefix, "-input ").concat(clearable ? "".concat(classPrefix, "-input-clear") : ''),
             ref: searchRef,
             style: style,
             value: value || '',
             placeholder: placeholder || locale.placeholder,
-            disabled: disabled,
-            readOnly: readOnly,
-            maxLength: maxLength,
-            onKeyPress: onKeypress,
-            onChange: function(e) {
-                return change(e);
-            },
-            onFocus: function(e) {
-                return focus(e);
-            },
-            onBlur: function(e) {
-                return blur(e);
-            },
-            onClick: function(e) {
-                return clickInput(e);
-            }
+            disabled: disabled || readOnly,
+            maxlength: maxLength,
+            // @ts-ignore
+            // onKeyDown={onKeypress}
+            onInput: onInput,
+            onFocus: focus,
+            onBlur: blur,
+            onClick: clickInput,
+            onConfirm: onConfirm
         });
     };
     var clickInput = function(e) {
@@ -133,13 +128,16 @@ export var SearchBar = function(props) {
         onChange && (onChange === null || onChange === void 0 ? void 0 : onChange(''));
         onClear && onClear(event);
     };
-    var onKeypress = function(e) {
-        if (e.key === 'Enter' || e.keyCode === 13) {
-            if (typeof e.cancelable !== 'boolean' || e.cancelable) {
-                e.preventDefault();
-            }
-            onSearch && onSearch(value);
-        }
+    //   const onKeypress = (event: any) => {
+    //     if (event?.detail?.keyCode === 13) {
+    //       if (typeof event.cancelable !== 'boolean' || event.cancelable) {
+    //         event.preventDefault()
+    //       }
+    //       onSearch && onSearch(value as string)
+    //     }
+    //   }
+    var onConfirm = function() {
+        onSearch && onSearch(value);
     };
     return /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, " ").concat(disabled ? "".concat(classPrefix, "-disabled") : '', "  ").concat(className || ''),

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

@@ -35,7 +35,8 @@
 
   &-left,
   &-right {
-    display: flex;
+    display: inline-flex;
+    align-items: center;
 
     &.nut-icon {
       width: 20px;
@@ -48,7 +49,9 @@
 
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-right: $searchbar-gap;
 
       &:last-child {
@@ -59,10 +62,11 @@
 
   &-right {
     margin-left: $searchbar-gap;
-
     & > div,
     & > span,
-    & > svg {
+    & > i,
+    & > svg,
+    .nut-icon {
       margin-left: $searchbar-gap;
 
       &:first-child {
@@ -89,7 +93,8 @@
     }
   }
 
-  &-input-box {
+  &-input-box,
+  &-input {
     display: flex;
     align-items: center;
     flex: 1;
@@ -100,8 +105,6 @@
     outline: 0;
     box-sizing: border-box;
     width: 100%;
-    height: $searchbar-input-height;
-    line-height: $searchbar-input-height;
     padding: $searchbar-input-padding;
     font-size: $searchbar-font-size;
     color: $searchbar-input-text-color;

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

@@ -1,11 +1,15 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
 .nut-searchbar {
   display: flex;
   align-items: center;
   width: var(--nutui-searchbar-width, 100%);
   padding: var(--nutui-searchbar-padding, 6px 16px);
-  background: var(--nutui-searchbar-background, var(--nutui-gray-3, #f5f6fa));
-  color: var(--nutui-searchbar-color, var(--nutui-gray-7, #1a1a1a));
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));
+  background: var(--nutui-searchbar-background, var(--nutui-gray-3));
+  color: var(--nutui-searchbar-color, var(--nutui-gray-7));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
   box-sizing: border-box;
   justify-content: center;
 }
@@ -16,7 +20,7 @@
   justify-content: center;
   padding: var(--nutui-searchbar-content-padding, 0 12px);
   height: var(--nutui-searchbar-input-height, 32px);
-  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1, #ffffff));
+  background: var(--nutui-searchbar-content-background, var(--nutui-gray-1));
   border-radius: var(--nutui-searchbar-content-border-radius, 4px);
 }
 .nut-searchbar-icon {
@@ -30,7 +34,8 @@
   color: var(--nutui-black-5);
 }
 .nut-searchbar-left, .nut-searchbar-right {
-  display: flex;
+  display: inline-flex;
+  align-items: center;
 }
 .nut-searchbar-left.nut-icon, .nut-searchbar-right.nut-icon {
   width: 20px;
@@ -39,19 +44,23 @@
 .nut-searchbar-left {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > svg {
+.nut-searchbar-left > div, .nut-searchbar-left > span, .nut-searchbar-left > i, .nut-searchbar-left > svg,
+.nut-searchbar-left .nut-icon {
   margin-right: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > svg:last-child {
+.nut-searchbar-left > div:last-child, .nut-searchbar-left > span:last-child, .nut-searchbar-left > i:last-child, .nut-searchbar-left > svg:last-child,
+.nut-searchbar-left .nut-icon:last-child {
   margin-right: 0;
 }
 .nut-searchbar-right {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > svg {
+.nut-searchbar-right > div, .nut-searchbar-right > span, .nut-searchbar-right > i, .nut-searchbar-right > svg,
+.nut-searchbar-right .nut-icon {
   margin-left: var(--nutui-searchbar-gap, 16px);
 }
-.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > svg:first-child {
+.nut-searchbar-right > div:first-child, .nut-searchbar-right > span:first-child, .nut-searchbar-right > i:first-child, .nut-searchbar-right > svg:first-child,
+.nut-searchbar-right .nut-icon:first-child {
   margin-left: 0;
 }
 .nut-searchbar-left > text, .nut-searchbar-left > view {
@@ -66,7 +75,7 @@
 .nut-searchbar-right > text:first-child, .nut-searchbar-right > view:first-child {
   margin-left: 0;
 }
-.nut-searchbar-input-box {
+.nut-searchbar-input-box, .nut-searchbar-input {
   display: flex;
   align-items: center;
   flex: 1;
@@ -76,12 +85,10 @@
   outline: 0;
   box-sizing: border-box;
   width: 100%;
-  height: var(--nutui-searchbar-input-height, 32px);
-  line-height: var(--nutui-searchbar-input-height, 32px);
   padding: var(--nutui-searchbar-input-padding, 0 4px);
-  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-3, 14px));
-  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7, #1a1a1a));
-  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7, #1a1a1a));
+  font-size: var(--nutui-searchbar-font-size, var(--nutui-font-size-base, 14px));
+  color: var(--nutui-searchbar-input-text-color, var(--nutui-gray-7));
+  caret-color: var(--nutui-searchbar-input-curror-color, var(--nutui-gray-7));
   background: transparent;
   text-align: var(--nutui-searchbar-input-text-align, left);
 }

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

@@ -0,0 +1,3 @@
+import { Segmented } from "./segmented";
+export type { SegmentedProps, SegmentedItem } from './types';
+export default Segmented;

package/dist/es/packages/segmented/index.js

@@ -0,0 +1,2 @@
+import { Segmented } from "./segmented";
+export default Segmented;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SegmentedProps } from './types';
+export declare const Segmented: (props: Partial<SegmentedProps>) => React.JSX.Element;

package/dist/es/packages/segmented/segmented.js

@@ -0,0 +1,64 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
+import React, { useCallback } from "react";
+import classNames from "classnames";
+import { View } from "@tarojs/components";
+import { usePropsValue } from "../../utils/use-props-value";
+import { mergeProps } from "../../utils/merge-props";
+var defaultProps = {
+    options: [],
+    onChange: function(value) {}
+};
+export var Segmented = function(props) {
+    var classPrefix = 'nut-segmented';
+    var itemClassPrefix = 'nut-segmented-item';
+    var mergedProps = mergeProps(defaultProps, props);
+    var options = mergedProps.options, onChange = mergedProps.onChange;
+    var _usePropsValue = _sliced_to_array(usePropsValue({
+        value: mergedProps.value,
+        defaultValue: mergedProps.defaultValue,
+        finalValue: 0,
+        onChange: mergedProps.onChange
+    }), 2), value = _usePropsValue[0], setValue = _usePropsValue[1];
+    var renderItems = useCallback(function(options, value) {
+        return options.map(function(option, index) {
+            var optionType = typeof option === "undefined" ? "undefined" : _type_of(option);
+            switch(optionType){
+                case 'object':
+                    // eslint-disable-next-line no-case-declarations
+                    var opt = option;
+                    var _obj;
+                    return /*#__PURE__*/ React.createElement(View, {
+                        className: classNames(itemClassPrefix, (_obj = {}, _define_property(_obj, "".concat(itemClassPrefix, "-active"), opt.value === value), _define_property(_obj, "".concat(opt.className), !!opt.className), _obj)),
+                        key: opt.value,
+                        onClick: function() {
+                            if (opt.disabled) return;
+                            setValue(option.value);
+                        }
+                    }, opt.icon ? /*#__PURE__*/ React.createElement(View, {
+                        className: "nut-segmented-icon"
+                    }, opt.icon) : null, opt.label);
+                default:
+                    {
+                        if (typeof option !== 'string' && typeof option !== 'number') {
+                            console.warn('Unsupported option type:', optionType);
+                        }
+                        return /*#__PURE__*/ React.createElement(View, {
+                            className: classNames(itemClassPrefix, _define_property({}, "".concat(itemClassPrefix, "-active"), index === value)),
+                            key: option.toString(),
+                            onClick: function() {
+                                setValue(index);
+                            }
+                        }, option);
+                    }
+            }
+        });
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ React.createElement(View, {
+        className: classNames(classPrefix),
+        style: mergedProps.style
+    }, renderItems(options, value));
+};

package/dist/es/packages/segmented/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/es/packages/segmented/style/index.js

@@ -0,0 +1 @@
+import './segmented.scss';

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

@@ -0,0 +1,38 @@
+.nut-segmented {
+  display: inline-flex;
+  height: $segmented-height;
+  min-width: 24px;
+  padding: $segmented-padding;
+  align-items: center;
+  border-radius: $segmented-border-radius;
+  background: $color-mask-part;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: $segmented-item-height;
+  align-items: center;
+  justify-content: center;
+  padding: $segmented-item-padding;
+  border-radius: $segmented-item-radius;
+  color: $segmented-item-color;
+  font-size: $segmented-item-fontsize;
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: $segmented-active-background;
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: $segmented-icon-margin-right;
+  .nut-icon {
+    height: 10px;
+    width: 10px;
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,42 @@
+/* #ifdef harmony */
+/* #endif */
+/* #ifndef harmony */
+/* #endif */
+.nut-segmented {
+  display: inline-flex;
+  height: var(--nutui-segmented-height, 24px);
+  min-width: 24px;
+  padding: var(--nutui-segmented-padding, var(--nutui-spacing-xxxs, 2px));
+  align-items: center;
+  border-radius: var(--nutui-segmented-radius, var(--nutui-radius-xs, 4px));
+  background: var(--nutui-black-7);
+  box-sizing: border-box;
+}
+
+.nut-segmented-item {
+  display: flex;
+  height: var(--nutui-segmented-height, 20px);
+  align-items: center;
+  justify-content: center;
+  padding: var(--nutui-segmented-item-padding, 0 var(--nutui-spacing-xs, 6px));
+  border-radius: var(--nutui-segmented-item-radius, var(--nutui-radius-xs, 4px));
+  color: var(--nutui-segmented-item-color, #ffffff);
+  font-size: var(--nutui-segmented-item-fontsize, var(--nutui-font-size-s, 12px));
+  line-height: 1;
+  box-sizing: border-box;
+}
+
+.nut-segmented-item-active {
+  background: var(--nutui-segmented-active-background, var(--nutui-black-7));
+}
+
+.nut-segmented-icon {
+  height: 10px;
+  width: 10px;
+  margin-right: var(--nutui-segmented-icon-margin-right, var(--nutui-spacing-xxxs, 2px));
+}
+.nut-segmented-icon .nut-icon {
+  height: 10px;
+  width: 10px;
+  font-size: 10px;
+}

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

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { BasicComponent } from "../../utils/typings";
+export interface SegmentedItem {
+    label: ReactNode;
+    value: string | number;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+export interface SegmentedProps extends BasicComponent {
+    options: string[] | number[] | SegmentedItem[];
+    value: string | number;
+    defaultValue: string | number;
+    onChange: (value: string | number) => void;
+}

package/dist/es/packages/segmented/types.js

@@ -0,0 +1 @@
+export { };

package/dist/es/packages/shortpassword/shortpassword.js

@@ -6,6 +6,7 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import React, { useEffect, useImperativeHandle, useMemo } from "react";
 import { Tips } from "@nutui/icons-react-taro";
 import classNames from "classnames";
+import { View } from "@tarojs/components";
 import Popup from "../popup/index";
 import { useConfig } from "../configprovider/index";
 import { ComponentDefaults } from "../../utils/typings";
@@ -106,42 +107,42 @@ export var InternalShortPassword = function(props, ref) {
         closeable: true,
         onOverlayClick: onClose,
         onCloseIconClick: onClose
-    }, rest), /*#__PURE__*/ React.createElement("div", {
+    }, rest), /*#__PURE__*/ React.createElement(View, {
         className: classNames(classPrefix, className),
         style: style
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-title")
-    }, title || locale.shortpassword.title), /*#__PURE__*/ React.createElement("div", {
+    }, title || locale.shortpassword.title), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-description")
-    }, description || locale.shortpassword.description), /*#__PURE__*/ React.createElement("div", {
+    }, description || locale.shortpassword.description), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-input"),
         onClick: onFocus
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-input-site")
-    }), /*#__PURE__*/ React.createElement("div", {
+    }), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-input-fake")
     }, _to_consumable_array(new Array(comLen).keys()).map(function(item, index) {
-        return /*#__PURE__*/ React.createElement("div", {
+        return /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-input-fake-li"),
             key: index
-        }, inputValue.length > index && /*#__PURE__*/ React.createElement(React.Fragment, null, plain ? inputValue[index] : /*#__PURE__*/ React.createElement("div", {
+        }, inputValue.length > index && /*#__PURE__*/ React.createElement(React.Fragment, null, plain ? inputValue[index] : /*#__PURE__*/ React.createElement(View, {
             className: "".concat(classPrefix, "-input-fake-li-icon")
         })));
-    }))), /*#__PURE__*/ React.createElement("div", {
+    }))), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-message")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-message-error")
-    }, error), /*#__PURE__*/ React.createElement("div", {
+    }, error), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-message-forget"),
         onClick: onTips
     }, tips || /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Tips, {
         size: 11
-    }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ React.createElement("div", {
+    }), locale.shortpassword.tips))), !hideFooter && /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-footer")
-    }, /*#__PURE__*/ React.createElement("div", {
+    }, /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-footer-cancel"),
         onClick: onCancel
-    }, locale.cancel), /*#__PURE__*/ React.createElement("div", {
+    }, locale.cancel), /*#__PURE__*/ React.createElement(View, {
         className: "".concat(classPrefix, "-footer-sure"),
         onClick: sure
     }, locale.confirm))));

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

@@ -1,7 +1,7 @@
 .nut-shortpassword {
   &-title {
     line-height: 1;
-    font-size: $font-size-large;
+    font-size: $font-size-l;
     color: $color-title;
   }
 
@@ -9,7 +9,7 @@
     margin-top: 12px;
     margin-bottom: 24px;
     line-height: 1;
-    font-size: $font-size-small;
+    font-size: $font-size-s;
     color: $color-text;
   }
 
@@ -80,7 +80,7 @@
 
     &-forget {
       line-height: 1;
-      font-size: $font-size-small;
+      font-size: $font-size-s;
       color: $shortpassword-forget;
       display: flex;
       align-items: center;