@nutui/nutui-react 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/style.scss

@@ -2,104 +2,105 @@
 @import './styles/variables.scss';
 @import './styles/mixins/index.scss';
 @import './styles/animation/index.scss';
-@import './es/packages/video/style/video.scss';
-@import './es/packages/uploader/style/uploader.scss';
 @import './es/packages/virtuallist/style/virtuallist.scss';
 @import './es/packages/watermark/style/watermark.scss';
+@import './es/packages/video/style/video.scss';
+@import './es/packages/uploader/style/uploader.scss';
+@import './es/packages/toast/style/toast.scss';
 @import './es/packages/tour/style/tour.scss';
 @import './es/packages/trendarrow/style/trendarrow.scss';
-@import './es/packages/timeselect/style/timeselect.scss';
-@import './es/packages/textarea/style/textarea.scss';
-@import './es/packages/toast/style/toast.scss';
 @import './es/packages/timedetail/style/timedetail.scss';
+@import './es/packages/timeselect/style/timeselect.scss';
 @import './es/packages/tag/style/tag.scss';
+@import './es/packages/textarea/style/textarea.scss';
 @import './es/packages/tabs/style/tabs.scss';
 @import './es/packages/tabpane/style/tabpane.scss';
 @import './es/packages/table/style/table.scss';
 @import './es/packages/tabbaritem/style/tabbaritem.scss';
 @import './es/packages/tabbar/style/tabbar.scss';
-@import './es/packages/swiperitem/style/swiperitem.scss';
 @import './es/packages/switch/style/switch.scss';
 @import './es/packages/swiper/style/swiper.scss';
-@import './es/packages/swipe/style/swipe.scss';
-@import './es/packages/sticky/style/sticky.scss';
+@import './es/packages/swiperitem/style/swiperitem.scss';
 @import './es/packages/subsidenavbar/style/subsidenavbar.scss';
+@import './es/packages/swipe/style/swipe.scss';
 @import './es/packages/steps/style/steps.scss';
-@import './es/packages/step/style/step.scss';
+@import './es/packages/sticky/style/sticky.scss';
 @import './es/packages/space/style/space.scss';
 @import './es/packages/skeleton/style/skeleton.scss';
 @import './es/packages/signature/style/signature.scss';
+@import './es/packages/step/style/step.scss';
 @import './es/packages/sidenavbaritem/style/sidenavbaritem.scss';
 @import './es/packages/sidebaritem/style/sidebaritem.scss';
 @import './es/packages/sidenavbar/style/sidenavbar.scss';
-@import './es/packages/shortpassword/style/shortpassword.scss';
 @import './es/packages/sidebar/style/sidebar.scss';
 @import './es/packages/segmented/style/segmented.scss';
+@import './es/packages/shortpassword/style/shortpassword.scss';
 @import './es/packages/searchbar/style/searchbar.scss';
-@import './es/packages/rate/style/rate.scss';
-@import './es/packages/row/style/row.scss';
 @import './es/packages/safearea/style/safearea.scss';
+@import './es/packages/row/style/row.scss';
 @import './es/packages/resultpage/style/resultpage.scss';
 @import './es/packages/range/style/range.scss';
-@import './es/packages/radiogroup/style/radiogroup.scss';
+@import './es/packages/rate/style/rate.scss';
 @import './es/packages/radio/style/radio.scss';
+@import './es/packages/radiogroup/style/radiogroup.scss';
 @import './es/packages/pulltorefresh/style/pulltorefresh.scss';
-@import './es/packages/progress/style/progress.scss';
 @import './es/packages/price/style/price.scss';
-@import './es/packages/popover/style/popover.scss';
-@import './es/packages/picker/style/picker.scss';
+@import './es/packages/progress/style/progress.scss';
 @import './es/packages/popup/style/popup.scss';
+@import './es/packages/popover/style/popover.scss';
+@import './es/packages/pickerview/style/pickerview.scss';
 @import './es/packages/pagination/style/pagination.scss';
-@import './es/packages/numberkeyboard/style/numberkeyboard.scss';
+@import './es/packages/picker/style/picker.scss';
 @import './es/packages/overlay/style/overlay.scss';
-@import './es/packages/notify/style/notify.scss';
+@import './es/packages/numberkeyboard/style/numberkeyboard.scss';
 @import './es/packages/noticebar/style/noticebar.scss';
-@import './es/packages/navbar/style/navbar.scss';
+@import './es/packages/notify/style/notify.scss';
 @import './es/packages/menuitem/style/menuitem.scss';
+@import './es/packages/navbar/style/navbar.scss';
 @import './es/packages/menu/style/menu.scss';
-@import './es/packages/loading/style/loading.scss';
-@import './es/packages/layout/style/layout.scss';
 @import './es/packages/lottie/style/lottie.scss';
-@import './es/packages/inputnumber/style/inputnumber.scss';
+@import './es/packages/layout/style/layout.scss';
+@import './es/packages/loading/style/loading.scss';
 @import './es/packages/input/style/input.scss';
+@import './es/packages/inputnumber/style/inputnumber.scss';
 @import './es/packages/infiniteloading/style/infiniteloading.scss';
 @import './es/packages/indicator/style/indicator.scss';
-@import './es/packages/image/style/image.scss';
 @import './es/packages/imagepreview/style/imagepreview.scss';
 @import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
+@import './es/packages/image/style/image.scss';
 @import './es/packages/hoverbutton/style/hoverbutton.scss';
 @import './es/packages/grid/style/grid.scss';
 @import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/formitem/style/formitem.scss';
 @import './es/packages/form/style/form.scss';
-@import './es/packages/empty/style/empty.scss';
 @import './es/packages/fixednav/style/fixednav.scss';
-@import './es/packages/elevator/style/elevator.scss';
+@import './es/packages/empty/style/empty.scss';
 @import './es/packages/ellipsis/style/ellipsis.scss';
-@import './es/packages/divider/style/divider.scss';
+@import './es/packages/elevator/style/elevator.scss';
 @import './es/packages/drag/style/drag.scss';
-@import './es/packages/countup/style/countup.scss';
+@import './es/packages/divider/style/divider.scss';
+@import './es/packages/datepicker/style/datepicker.scss';
 @import './es/packages/dialog/style/dialog.scss';
 @import './es/packages/countdown/style/countdown.scss';
-@import './es/packages/datepicker/style/datepicker.scss';
-@import './es/packages/configprovider/style/configprovider.scss';
+@import './es/packages/countup/style/countup.scss';
 @import './es/packages/collapseitem/style/collapseitem.scss';
+@import './es/packages/configprovider/style/configprovider.scss';
 @import './es/packages/collapse/style/collapse.scss';
-@import './es/packages/col/style/col.scss';
 @import './es/packages/circleprogress/style/circleprogress.scss';
+@import './es/packages/col/style/col.scss';
 @import './es/packages/checkboxgroup/style/checkboxgroup.scss';
 @import './es/packages/checkbox/style/checkbox.scss';
 @import './es/packages/cellgroup/style/cellgroup.scss';
-@import './es/packages/card/style/card.scss';
 @import './es/packages/cell/style/cell.scss';
 @import './es/packages/cascader/style/cascader.scss';
 @import './es/packages/calendaritem/style/calendaritem.scss';
-@import './es/packages/calendar/style/calendar.scss';
+@import './es/packages/card/style/card.scss';
 @import './es/packages/calendarcard/style/calendarcard.scss';
-@import './es/packages/button/style/button.scss';
-@import './es/packages/barrage/style/barrage.scss';
+@import './es/packages/calendar/style/calendar.scss';
 @import './es/packages/badge/style/badge.scss';
 @import './es/packages/backtop/style/backtop.scss';
+@import './es/packages/barrage/style/barrage.scss';
+@import './es/packages/button/style/button.scss';
 @import './es/packages/avatargroup/style/avatargroup.scss';
 @import './es/packages/avatar/style/avatar.scss';
 @import './es/packages/avatarcropper/style/avatarcropper.scss';

package/dist/styles/variables.scss

@@ -1,12 +1,18 @@
 // ----------------------------------------------------
 // 主色调 // done
-$color-primary: var(--nutui-brand-6) !default;
+$color-primary: var(--nutui-color-primary, #ff0f23) !default;
 $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default;
 $color-primary-stop-2: var(--nutui-color-primary-stop-2, #ff0f23) !default;
 $color-primary-pressed: var(--nutui-color-primary-pressed, #e53029) !default;
 $color-primary-disabled: var(--nutui-color-primary-disabled, #c2c4cc) !default;
-$color-primary-disabled-special: var(--nutui-brand-3) !default;
-$color-primary-light-pressed: var(--nutui-brand-1) !default;
+$color-primary-disabled-special: var(
+  --nutui-color-primary-disabled-special,
+  #ffadbe
+) !default;
+$color-primary-light-pressed: var(
+  --nutui-color-primary-light-pressed,
+  #ffebf1
+) !default;
 $color-primary-gradient-1: linear-gradient(
   135deg,
   $color-primary-stop-1 0%,
@@ -40,61 +46,91 @@ $color-info-background: var(
 $color-info-text: var(--nutui-color-info, #0073ff) !default; // done
 
 // 成功色
-$color-success: var(--nutui-green-2) !default; // done
-$color-success-pressed: var(--nutui-green-3) !default; // done
+$color-success: var(--nutui-color-success, #00d900) !default; // done
+$color-success-pressed: var(
+  --nutui-color-success-pressed,
+  #2aa32a
+) !default; // done
 $color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
-$color-success-light: var(--nutui-green-1) !default; // done
-$color-success-background: var(--nutui-green-2) !default; // done
-$color-success-text: var(--nutui-green-3) !default; // done
+$color-success-light: var(
+  --nutui-color-success-light,
+  #ebfbeb
+) !default; // done
+$color-success-background: var(
+  --nutui-color-success-background,
+  #00d900
+) !default; // done
+$color-success-text: var(--nutui-color-success-text, #2aa32a) !default; // done
 
 // 警告色
-$color-warning: var(--nutui-yellow-2) !default; // done
-$color-warning-pressed: var(--nutui-yellow-3) !default; // done
+$color-warning: var(--nutui-color-warning, #ffbf00) !default; // done
+$color-warning-pressed: var(
+  --nutui-color-warning-pressed,
+  #c47600
+) !default; // done
 $color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
-$color-warning-light: var(--nutui-yellow-1) !default; // done
-$color-warning-background: var(--nutui-yellow-2) !default; // done
-$color-warning-text: var(--nutui-yellow-3) !default; // done
+$color-warning-light: var(
+  --nutui-color-warning-light,
+  #fff5cc
+) !default; // done
+$color-warning-background: var(
+  --nutui-color-warning-background,
+  #ffbf00
+) !default; // done
+$color-warning-text: var(--nutui-color-warning-text, #c47600) !default; // done
 
 // 危险色
-$color-danger: var(--nutui-red-2) !default; //done
-$color-danger-pressed: var(--nutui-color-danger-pressed) !default;
+$color-danger: var(--nutui-color-danger, #ff0f23) !default; //done
+$color-danger-pressed: var(--nutui-color-danger-pressed, #ff3333) !default;
 $color-danger-disabled: var(
   --nutui-color-danger-disabled,
   $color-primary-disabled-special
 ) !default;
-$color-danger-light: var(--nutui-red-1) !default; //done
-$color-danger-background: var(--nutui-color-danger-background) !default; //done
-$color-danger-text: var(--nutui-red-2) !default; //done
+$color-danger-light: var(--nutui-color-danger-light, #ffebef) !default; //done
+$color-danger-background: var(
+  --nutui-color-danger-background,
+  #ff0f23
+) !default; //done
+$color-danger-text: var(--nutui-color-danger-text, #ff0f23) !default; //done
 
 // 背景色
-$color-background: var(--nutui-gray-3) !default; //done
+$color-background: var(--nutui-color-background, #f2f3f5) !default; //done
 // 卡片背景色
-$color-background-overlay: var(--nutui-gray-1) !default;
+$color-background-overlay: var(
+  --nutui-color-background-overlay,
+  #ffffff
+) !default;
 // 卡片内嵌背景色
 $color-background-sunken: var(
   --nutui-color-background-sunken,
-  var(--nutui-gray-2)
+  #f7f8fc
 ) !default;
 
 // 蒙层颜色
 // 页面全局蒙层
-$color-mask: var(--nutui-black-10) !default;
+$color-mask: var(--nutui-color-mask, rgba(0, 0, 0, 0.7)) !default;
 // 局部蒙层
-$color-mask-part: var(--nutui-black-7) !default;
+$color-mask-part: var(--nutui-color-mask-part, rgba(0, 0, 0, 0.4)) !default;
 // 容错蒙层
-$color-mask-fault-toleran: var(--nutui-black-2) !default;
+$color-mask-fault-toleran: var(
+  --nutui-color-mask-fault-toleran,
+  rgba(0, 0, 0, 0.02)
+) !default;
 
 // 边框色
-$color-border: var(--nutui-black-3) !default;
-$color-border-disabled: var(--nutui-gray-4) !default;
+$color-border: var(--nutui-color-border, rgba(0, 0, 0, 0.06)) !default;
+$color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
 
 // 文本色
-$color-title: var(--nutui-gray-7) !default;
-$color-text: var(--nutui-gray-6) !default;
-$color-text-help: var(--nutui-gray-5) !default;
-$color-text-disabled: var(--nutui-gray-4) !default;
-$color-text-dark: var(--nutui-white-12) !default;
-$color-text-link: var(--nutui-blue-2) !default;
+$color-title: var(--nutui-color-title, #1a1a1a) !default;
+$color-text: var(--nutui-color-text, #505259) !default;
+$color-text-help: var(--nutui-color-text-help, #888b94) !default;
+$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
+$color-text-dark: var(
+  --nutui-color-text-dark,
+  rgba(255, 255, 255, 0.9)
+) !default;
+$color-text-link: var(--nutui-color-text-link, #0073ff) !default;
 
 // 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
 $color-primary-text: #ffffff !default;
@@ -523,8 +559,10 @@ $picker-title-ok-font-size: var(
   --nutui-picker-title-ok-font-size,
   $font-size-base
 ) !default;
-$picker-list-height: var(--nutui-picker-list-height, 252px) !default;
+
+// picker-view（✅）
 $picker-item-height: var(--nutui-picker-item-height, 36px) !default;
+$picker-list-height: calc($picker-item-height * 7) !default;
 $picker-item-text-color: var(
   --nutui-picker-item-text-color,
   $color-title

package/package.json

@@ -1,80 +1 @@
-{
-  "name": "@nutui/nutui-react",
-  "version": "3.0.0-beta.11",
-  "style": "dist/style.css",
-  "main": "dist/nutui.react.umd.js",
-  "module": "dist/es/packages/nutui.react.build.js",
-  "typings": "dist/es/packages/nutui.react.build.d.ts",
-  "sideEffects": [
-    "*.scss",
-    "dist/es/**/style/*",
-    "dist/cjs/**/style/*",
-    "dist/style.css",
-    "dist/styles/font/*",
-    "dist/styles/font-jmapp/*"
-  ],
-  "description": "京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序",
-  "keywords": [
-    "nutui",
-    "nutui2",
-    "nutui3",
-    "react",
-    "nutui-react",
-    "webpack",
-    "react component",
-    "vite",
-    "jdc",
-    "jdcfe",
-    "taro"
-  ],
-  "author": "jdcfe",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/jdf2e/nutui-react.git"
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "package.json",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "scripts": {
-    "postpublish": "node scripts/postpublish.js"
-  },
-  "lint-staged": {
-    "*.{scss,md}": "prettier --write",
-    "*.{ts,tsx,js}": "eslint"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.23.9",
-    "@nutui/icons-react": "^3.0.0-beta.2",
-    "@nutui/jdesign-icons-react-taro": "1.0.6-beta.2",
-    "@nutui/touch-emulator": "^1.0.0",
-    "@react-spring/web": "~9.6.1",
-    "@swc/helpers": "^0.5.7",
-    "@use-gesture/react": "10.2.20",
-    "async-validator": "^4.2.5",
-    "classnames": "^2.5.1",
-    "lodash.isequal": "^4.5.0",
-    "lodash.kebabcase": "^4.1.1",
-    "lottie-miniprogram": "^1.0.12",
-    "lottie-react": "^2.4.0",
-    "react-transition-group": "^4.4.5"
-  },
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
-  "resolutions": {
-    "@types/react": "^18.2.57",
-    "@types/react-dom": "^18.2.19",
-    "sass": "1.77.6",
-    "@tarojs/api": "4.0.8-beta.1",
-    "@tarojs/components": "4.0.8-beta.1"
-  }
-}
+{"name":"@nutui/nutui-react","version":"3.0.0-beta.13","style":"dist/style.css","main":"dist/nutui.react.umd.js","module":"dist/es/packages/nutui.react.build.js","typings":"dist/es/packages/nutui.react.build.d.ts","sideEffects":["*.scss","dist/es/**/style/*","dist/cjs/**/style/*","dist/style.css","dist/styles/font/*","dist/styles/font-jmapp/*"],"description":"京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序","keywords":["nutui","nutui2","nutui3","react","nutui-react","webpack","react component","vite","jdc","jdcfe","taro"],"author":"jdcfe","license":"MIT","repository":{"type":"git","url":"git+https://github.com/jdf2e/nutui-react.git"},"files":["dist","README.md","package.json","LICENSE","CHANGELOG.md"],"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"dependencies":{"@babel/runtime":"^7.23.9","@nutui/icons-react":"^3.0.0-beta.2","@nutui/jdesign-icons-react-taro":"1.0.6-beta.2","@nutui/touch-emulator":"^1.0.0","@react-spring/web":"~9.6.1","@swc/helpers":"^0.5.7","@use-gesture/react":"10.2.20","async-validator":"^4.2.5","classnames":"^2.5.1","react-fast-compare":"^3.2.2","lodash.kebabcase":"^4.1.1","lottie-miniprogram":"^1.0.12","lottie-react":"^2.4.0","react-transition-group":"^4.4.5"},"peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"}}

package/dist/cjs/packages/dialog/config.d.ts

@@ -1,50 +0,0 @@
-import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react';
-import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type DialogConfigType = {
-    prefixCls?: string;
-    simple?: boolean;
-};
-export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom';
-export interface DialogBasicProps extends BasicComponent {
-    visible?: boolean;
-    title?: ReactNode;
-    content?: ReactNode;
-    header?: ReactNode;
-    footer?: ReactNode;
-    confirmText?: ReactNode;
-    cancelText?: ReactNode;
-    overlay?: boolean;
-    hideConfirmButton?: boolean;
-    hideCancelButton?: boolean;
-    disableConfirmButton?: boolean;
-    closeOnOverlayClick?: boolean;
-    footerDirection?: string;
-    lockScroll?: boolean;
-    closeIconPosition?: DialogCloseIconPosition;
-    closeIcon?: boolean | ReactNode;
-    beforeClose?: () => boolean;
-    beforeCancel?: () => boolean;
-    onClose?: () => void;
-    onConfirm?: (e?: MouseEvent<HTMLButtonElement>) => PromiseLike<any> | void;
-    onCancel?: () => void;
-    onClick?: () => void;
-    onOverlayClick?: () => void;
-}
-export type DialogReturnProps = {
-    update: (newConfig: DialogConfirmProps) => void;
-    close: () => void;
-};
-export interface DialogConfirmProps extends DialogBasicProps {
-    content?: ReactNode;
-    icon?: ReactNode | null;
-    isNotice?: boolean;
-    noticeType?: string;
-}
-export interface DialogComponent extends ForwardRefExoticComponent<PropsWithChildren<DialogBasicProps>> {
-    confirm: (props: DialogConfirmProps) => DialogReturnProps;
-    alert: (props: DialogConfirmProps) => DialogReturnProps;
-    config: (config: DialogConfigType) => void;
-    destroyAll: () => void;
-}
-export declare const destroyList: Array<() => void>;

package/dist/es/packages/dialog/config.d.ts

@@ -1,50 +0,0 @@
-import { ReactNode, ForwardRefExoticComponent, PropsWithChildren } from 'react';
-import type { MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export type DialogConfigType = {
-    prefixCls?: string;
-    simple?: boolean;
-};
-export type DialogCloseIconPosition = 'top-right' | 'top-left' | 'bottom';
-export interface DialogBasicProps extends BasicComponent {
-    visible?: boolean;
-    title?: ReactNode;
-    content?: ReactNode;
-    header?: ReactNode;
-    footer?: ReactNode;
-    confirmText?: ReactNode;
-    cancelText?: ReactNode;
-    overlay?: boolean;
-    hideConfirmButton?: boolean;
-    hideCancelButton?: boolean;
-    disableConfirmButton?: boolean;
-    closeOnOverlayClick?: boolean;
-    footerDirection?: string;
-    lockScroll?: boolean;
-    closeIconPosition?: DialogCloseIconPosition;
-    closeIcon?: boolean | ReactNode;
-    beforeClose?: () => boolean;
-    beforeCancel?: () => boolean;
-    onClose?: () => void;
-    onConfirm?: (e?: MouseEvent<HTMLButtonElement>) => PromiseLike<any> | void;
-    onCancel?: () => void;
-    onClick?: () => void;
-    onOverlayClick?: () => void;
-}
-export type DialogReturnProps = {
-    update: (newConfig: DialogConfirmProps) => void;
-    close: () => void;
-};
-export interface DialogConfirmProps extends DialogBasicProps {
-    content?: ReactNode;
-    icon?: ReactNode | null;
-    isNotice?: boolean;
-    noticeType?: string;
-}
-export interface DialogComponent extends ForwardRefExoticComponent<PropsWithChildren<DialogBasicProps>> {
-    confirm: (props: DialogConfirmProps) => DialogReturnProps;
-    alert: (props: DialogConfirmProps) => DialogReturnProps;
-    config: (config: DialogConfigType) => void;
-    destroyAll: () => void;
-}
-export declare const destroyList: Array<() => void>;