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

package/dist/styles/variables.scss

@@ -1,20 +1,32 @@
 // ----------------------------------------------------
 // 主色调 // 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%,
   $color-primary-stop-2 100%
 ) !default;
-$color-primary-icon: var(--nutui-red-6) !default;
-$color-primary-icon-disabled: var(--nutui-gray-8) !default;
-$color-primary-specialdisabled: var(--nutui-red-3) !default;
+$color-primary-icon: var(--nutui-color-primary-icon, #ff3333) !default;
+$color-primary-icon-disabled: var(
+  --nutui-color-primary-icon-disabled,
+  #dadce0
+) !default;
+$color-primary-specialdisabled: var(
+  --nutui-color-primary-specialdisabled,
+  #ffadbe
+) !default;
 
 // 默认色
 $color-default: var(--nutui-color-default) !default;
@@ -34,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;
@@ -173,7 +215,7 @@ $button-square-border-radius: var(
   0
 ) !default;
 $button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
-$button-border-width: var(--nutui-button-border-width, 1px) !default;
+$button-border-width: var(--nutui-button-border-width, 0.5px) !default;
 $button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default;
 $button-default-height: var(--nutui-button-default-height, 32px) !default;
 $button-default-color: var(--nutui-button-default-color, $color-title) !default;
@@ -183,7 +225,7 @@ $button-default-background-color: var(
 ) !default;
 $button-default-border-color: var(
   --nutui-button-default-border-color,
-  $color-text
+  $color-text-disabled
 ) !default;
 $button-default-disabled: var(
   --nutui-button-default-disabled,
@@ -198,10 +240,6 @@ $button-default-font-size: var(
   --nutui-button-default-font-size,
   $font-size-base
 ) !default;
-$button-default-font-weight: var(
-  --nutui-button-default-font-weight,
-  $font-weight
-) !default;
 
 $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
 $button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
@@ -224,13 +262,9 @@ $button-large-font-size: var(
   --nutui-button-large-font-size,
   $font-size-l
 ) !default;
-$button-large-font-weight: var(
-  --nutui-button-large-font-weight,
-  $font-weight-bold
-) !default;
 $button-large-border-radius: var(
   --nutui-button-large-border-radius,
-  $radius-s
+  $radius-base
 ) !default;
 
 $button-small-font-size: var(
@@ -241,7 +275,7 @@ $button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default;
 $button-small-height: var(--nutui-button-small-height, 28px) !default;
 $button-small-border-radius: var(
   --nutui-button-small-border-radius,
-  $radius-xs
+  $radius-s
 ) !default;
 
 $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
@@ -525,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
@@ -556,6 +592,7 @@ $input-border-bottom-width: var(
 //   $color-text-disabled
 // ) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-base) !default;
+$input-lineheight: var(--nutui-input-lineheight, $font-size-l) !default;
 $input-border-radius: var(--nutui-input-border-radius, $radius-s) !default;
 // $input-color: var(--nutui-input-color, $color-title) !default;
 $input-background-color: var(
@@ -1305,17 +1342,15 @@ $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
 $dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
+$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(--nutui-dialog-padding, 24px) !default;
+$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default;
 $dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
-$dialog-border-radius: var(--nutui-dialog-border-radius, 16px) !default;
-$dialog-footer-justify-content: var(
-  --nutui-dialog-footer-justify-content,
-  space-around
-) !default;
+$dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
-  5px 0 24px 0
+  12px 0 16px 0
 ) !default;
 $dialog-content-max-height: var(
   --nutui-dialog-content-max-height,
@@ -1347,15 +1382,19 @@ $dialog-header-font-size: var(
 ) !default;
 $dialog-header-font-weight: var(
   --nutui-dialog-header-font-weight,
-  normal
+  $font-weight-bold
 ) !default;
 $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
-  5px
+  16px
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, 18px) !default;
-$dialog-close-height: var(--nutui-dialog-close-height, 18px) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default;
+$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default;
+$dialog-bottom-close-icon-size: var(
+  --nutui-dialog-bottom-close-icon-size,
+  24px
+) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;
 $dialog-close-left: var(--nutui-dialog-close-left, 16px) !default;
 $dialog-close-right: var(--nutui-dialog-close-right, 16px) !default;
@@ -1816,10 +1855,7 @@ $indicator-border-radius: var(
   --nutui-indicator-border-radius,
   $radius-xxs
 ) !default;
-$indicator-dot-margin: var(
-  --nutui-indicator-dot-margin,
-  $spacing-xxxs
-) !default;
+$indicator-dot-margin: var(--nutui-indicator-dot-margin, $spacing-xxs) !default;
 
 // menu（✅）
 $menu-scroll-fixed-top: var(--nutui-menu-scroll-fixed-top, 0) !default;
@@ -2167,7 +2203,33 @@ $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
   $color-title
 ) !default;
-
+// sidebar（✅）
+$sidebar-background-color: var(
+  --nutui-sidebar-background-color,
+  $color-background
+) !default;
+$sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default;
+$sidebar-width: var(--nutui-sidebar-width, 104px) !default;
+$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default;
+$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default;
+$sidebar-inactive-font-size: var(
+  --nutui-sidebar-inactive-font-size,
+  $font-size-base
+) !default;
+$sidebar-active-font-size: var(
+  --nutui-sidebar-active-font-size,
+  $font-size-l
+) !default;
+$sidebar-active-font-weight: var(
+  --nutui-sidebar-active-font-weight,
+  $font-weight-bold
+) !default;
+$sidebar-active-color: var(
+  --nutui-sidebar-active-color,
+  $color-primary
+) !default;
+$sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default;
+$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default;
 // sidenavbar（✅）
 $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,

package/package.json

@@ -1,80 +1 @@
-{
-  "name": "@nutui/nutui-react",
-  "version": "3.0.0-beta.9",
-  "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","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","scripts":{"publish:beta":"npm publish --tag=beta --access public --no-git-checks","publish:latest":"npm publish --access public --no-git-checks"},"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/cjs/packages/picker/pickerpanel.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { PickerOption } from './types';
-interface PickerPanelProps {
-    keyIndex?: number;
-    defaultValue?: string | number;
-    options?: PickerOption[];
-    threeDimensional: boolean;
-    duration: number | string;
-    chooseItem?: (val: PickerOption, idx: number) => void;
-}
-declare const PickerPanel: React.ForwardRefExoticComponent<Partial<PickerPanelProps> & React.RefAttributes<{
-    stopMomentum: () => void;
-    moving: boolean;
-}>>;
-export default PickerPanel;