feat: dialog v15 adaption

migrate-from-v2.md

@@ -152,12 +152,7 @@ plugins: [
 
 #### Button
 
-- 移除 `plain`，通过 `fill="outline"` 实现
-- 增加 `ref`，对外暴露组件内 `button` 元素
-- CSS 变量中，对 `type` 类型对应的色值的定义，不在暴露到文档中，建议使用默认值，或修改主题变量
-- 增加 `fill` 模式类型，`dashed`，修改 `fill` 默认值为 `outline`。
-- 增加 `rightIcon`，可满足同时设置左右两个icon的情况。
-- 修改 `size` 为 `large` 时的默认 `width` 为 `100%` 的值，如果使用通栏的 `button`，可搭配 `block` 来使用。
+- 去掉一些样式变量。如 `$button-default-font-weight` `$button-large-font-weight` 等。
 
 #### Cell
 
@@ -550,21 +545,9 @@ plugins: [
 
 #### Dialog
 
-- `okText` 重命名为 `confirmText`，规范命名。
-- `mask` 重命名为 `overlay`，组件库中统一使用 Overlay 组件作为遮罩层，并使用 overlay 作为是否展示遮罩层的属性值。
-- `closeOnClickOverlay` 重命名为 `closeOnOverlayClick`，组件库统一到该属性。
-- `noOkBtn` 重命名为 `hideConfirmButton`，初始值不变，依然表示是否隐藏确认按钮，主要是为了语义化更强。
-- `noCancelBtn` 重命名为 `hideCancelButton`，初始值不变，依然表示是否隐藏取消按钮，主要是为了语义化更强。
-- `okBtnDisabled` 重命名为 `disableConfirmButton`，初始值不变，依然表示是否禁用确认按钮，主要是为了语义化更强。
-- 移除 `noFooter`，使用 footer 统一处理，当 footer 为空时，及可替代该值。目前 noFooter 也需要手动声明是否为 noFooter；修改后需手动指出 footer={null}
-- 移除 `textAlign`，改用样式变量 `--nutui-dialog-content-text-align` 或 SCSS 变量 `$dialog-content-text-align` 控制，默认值为 center。
-- 移除 `cancelAutoClose`，改为 `beforeCancel` 和 `beforeClose` 来实现，在点击关闭或取消时，可先触发这两个方法，以确定是否要关闭弹框，如返回true，则关闭；否则不关闭。
-- `onOk` 重命名为 `onConfirm`，规范命名。
-- `onClosed` 重命名为 `onClose`，规范命名，关闭时触发。
-- `onClickSelf` 重命名为 `onClick`，语义不变，仍表示点击弹框自身时触发事件。
-- 增加 `overlayStyle` 和 `overlayClassName`，用来配置 Overlay 组件样式。
-- 增加 `onOverlayClick`，支持点击overlay时，触发事件。
-- `onCancel` 回调不会自动关闭弹层，需主动调用 `Dialog.close(xx)`
+- 修改了操作按钮上下布局的样式；
+- 当只有一个主操作按钮时，主操作按钮样式撑开；
+- 增加了底部icon的大小设置的样式变量；修改右侧按钮的默认值为 16 px；
 
 #### Drag
 

src/config.json

@@ -817,6 +817,7 @@
           "sort": 12,
           "show": true,
           "taro": true,
+          "v15": true,
           "author": "yangjinjun3",
           "dd": true
         },

src/packages/button/button.scss

@@ -17,7 +17,7 @@
   padding: 0;
   height: $button-default-height;
   font-size: $button-default-font-size;
-  font-weight: $button-default-font-weight;
+  font-weight: $font-weight;
   text-align: center;
   cursor: pointer;
   transition: $button-transition;
@@ -155,7 +155,6 @@
     height: $button-xlarge-height;
     padding: $button-xlarge-padding;
     font-size: $button-xlarge-font-size;
-    font-weight: $button-large-font-weight;
     border-radius: $radius-base;
 
     .nut-button-text {
@@ -172,15 +171,13 @@
     }
     &-children {
       font-size: $button-xlarge-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 
   &-large {
     height: $button-large-height;
     padding: $button-large-padding;
     font-size: $button-large-font-size;
-    font-weight: $button-large-font-weight;
     border-radius: $radius-s;
 
     .nut-button-text {
@@ -198,7 +195,6 @@
 
     &-children {
       font-size: $button-large-font-size;
-      font-weight: $button-large-font-weight;
     }
   }
 

src/packages/button/doc.en-US.md

@@ -136,7 +136,6 @@ The component provides the following CSS variables, which can be used to customi
 | \--nutui-button-default-disabled-color | Disabled text color for buttons of type default | `$color-text-help` |
 | \--nutui-button-default-padding | Padding for buttons of type default | `0 12px` |
 | \--nutui-button-default-font-size | The font size of the button with type default | `$font-size-s` |
-| \--nutui-button-default-font-weight | The font weight of the button with type default | `$font-weight` |
 | \--nutui-button-large-height | The height of the button with size large | `40px` |
 | \--nutui-button-large-font-size | The font size of the button with size large | `$font-size-base` |
 | \--nutui-button-large-border-radius | Rounded corners for buttons with size large | `12px` |

src/packages/button/doc.md

@@ -135,7 +135,6 @@ import { Button } from '@nutui/nutui-react'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |

src/packages/button/doc.taro.md

@@ -148,7 +148,6 @@ import { Button } from '@nutui/nutui-react-taro'
 | \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0 12px` |
 | \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 为 default 的按钮的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 为 large 的按钮的高度 | `40px` |
 | \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `12px` |

src/packages/button/doc.zh-TW.md

@@ -136,7 +136,6 @@ import { Button } from '@nutui/nutui-react'
 | \--nutui-button-default-disabled-color | type 為 default 的按鈕的停用文字色 | `$color-text-help` |
 | \--nutui-button-default-padding | type 為 default 的按鈕的內邊距 | `0 12px` |
 | \--nutui-button-default-font-size | type 為 default 的按鈕的字號 | `$font-size-s` |
-| \--nutui-button-default-font-weight | type 為 default 的按鈕的字重 | `$font-weight` |
 | \--nutui-button-large-height | size 為 large 的按鈕的高度 | `40px` |
 | \--nutui-button-large-font-size | size 為 large 的按鈕的字號 | `$font-size-base` |
 | \--nutui-button-large-border-radius | size 為 large 的按鈕的圓角 | `12px` |

src/packages/dialog/demos/taro/demo2.tsx

@@ -19,7 +19,7 @@ const Demo2 = () => {
 
       <Cell title="提示弹框" onClick={() => setVisible2(true)} />
       <Dialog
-        title="提示弹框"
+        title="标题"
         visible={visible2}
         confirmText="确认"
         hideCancelButton

src/packages/dialog/dialog.scss

@@ -7,7 +7,8 @@
   flex-direction: column;
   align-items: center;
   width: $dialog-width;
-  // max-height: 67%;
+  min-width: $dialog-min-width;
+  max-height: 67%;
   min-height: $dialog-min-height;
   padding: $dialog-padding;
   box-sizing: border-box;
@@ -60,11 +61,17 @@
     }
 
     &-bottom {
-      bottom: -56px;
+      bottom: -64px;
+      width: $dialog-bottom-close-icon-size;
+      height: $dialog-bottom-close-icon-size;
       left: 50%;
-      transform: translateY(-50%);
+      transform: translateX(-50%);
       .nut-icon {
-        color: $dialog-close-color;
+        color: $color-text-disabled;
+        background-color: $color-mask-part;
+        border-radius: 50%;
+        width: $dialog-bottom-close-icon-size;
+        height: $dialog-bottom-close-icon-size;
       }
     }
 
@@ -88,7 +95,7 @@
     max-height: $dialog-content-max-height;
     line-height: $dialog-content-line-height;
     font-size: $font-size-base;
-    color: $color-text;
+    color: $color-title;
     word-wrap: break-word;
     word-break: break-all;
     white-space: pre-wrap;
@@ -107,20 +114,20 @@
 
       .nut-button {
         min-width: 100%;
-        margin: 0;
+      }
 
-        &.nut-dialog-footer-ok {
-          order: 1;
-        }
-
-        &.nut-dialog-footer-cancel {
-          border: 0;
-          color: $color-text;
-          order: 2;
-          display: flex;
-          align-items: flex-end;
-          margin-top: $dialog-vertical-footer-ok-margin-top;
-        }
+      .nut-dialog-footer-ok {
+        order: 1;
+      }
+
+      .nut-dialog-footer-cancel {
+        margin: 0;
+        color: $color-text;
+        font-size: $font-size-base;
+        order: 2;
+        display: flex;
+        justify-content: center;
+        margin-top: $dialog-vertical-footer-ok-margin-top;
       }
     }
 
@@ -134,6 +141,12 @@
 
     &-ok {
       max-width: $dialog-footer-ok-max-width;
+      font-weight: $font-weight-bold;
+    }
+    &-block {
+      &.nut-button {
+        min-width: 100%;
+      }
     }
   }
 }

src/packages/dialog/dialog.taro.tsx

@@ -3,7 +3,7 @@ import type { MouseEvent } from 'react'
 import classNames from 'classnames'
 import { CSSTransition } from 'react-transition-group'
 import { View } from '@tarojs/components'
-import { Close } from '@nutui/icons-react-taro'
+import { Failure, Close } from '@nutui/icons-react-taro'
 import Button from '@/packages/button/index.taro'
 import { DialogBasicProps } from './config'
 import { Content } from './content.taro'
@@ -115,22 +115,36 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       }
     }
 
+    const btnClass =
+      hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
+
     return (
       footer || (
         <>
-          {!hideCancelButton && (
-            <Button
-              type="default"
-              className={`${classPrefix}-footer-cancel`}
-              onClick={(e) => handleCancel(e)}
-            >
-              {cancelText || locale.cancel}
-            </Button>
-          )}
+          {!hideCancelButton &&
+            (footerDirection === 'vertical' ? (
+              <View
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e as any)}
+              >
+                {cancelText || locale.cancel}
+              </View>
+            ) : (
+              <Button
+                type="default"
+                size="large"
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </Button>
+            ))}
+
           {!hideConfirmButton && (
             <Button
+              size="large"
               type="primary"
-              className={classNames(`${classPrefix}-footer-ok`, {
+              className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
                 disabled: disableConfirmButton,
               })}
               disabled={disableConfirmButton}
@@ -157,9 +171,10 @@ export const BaseDialog: FunctionComponent<Partial<DialogProps>> & {
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
+    const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
       <View className={closeClasses} onClick={handleCancel}>
-        {React.isValidElement(closeIcon) ? closeIcon : <Close />}
+        {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </View>
     )
   }

src/packages/dialog/dialog.tsx

@@ -1,7 +1,7 @@
 import React, { ForwardRefRenderFunction, forwardRef, useState } from 'react'
 import type { MouseEvent } from 'react'
 import classNames from 'classnames'
-import { Close } from '@nutui/icons-react'
+import { Failure, Close } from '@nutui/icons-react'
 import Button from '@/packages/button'
 import confirm from './confirm'
 import { DialogWrap } from './dialogwrap'
@@ -50,6 +50,7 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
     cancelText,
     closeIconPosition,
     closeIcon,
+    footerDirection,
     onClose,
     onCancel,
     onConfirm,
@@ -63,7 +64,9 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
   const renderFooter = () => {
     if (footer === null) return ''
 
-    const handleCancel = (e: MouseEvent<HTMLButtonElement>) => {
+    const handleCancel = (
+      e: MouseEvent<HTMLButtonElement | HTMLDivElement>
+    ) => {
       e.stopPropagation()
       if (!beforeCancel?.()) return
       if (!beforeClose?.()) return
@@ -83,22 +86,35 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
       }
     }
 
+    const btnClass =
+      hideCancelButton || hideConfirmButton ? `${classPrefix}-footer-block` : ''
+
     return (
       footer || (
         <>
-          {!hideCancelButton && (
-            <Button
-              type="default"
-              className={`${classPrefix}-footer-cancel`}
-              onClick={(e) => handleCancel(e)}
-            >
-              {cancelText || locale.cancel}
-            </Button>
-          )}
+          {!hideCancelButton &&
+            (footerDirection === 'vertical' ? (
+              <div
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </div>
+            ) : (
+              <Button
+                type="default"
+                size="large"
+                className={`${classPrefix}-footer-cancel ${btnClass}`}
+                onClick={(e) => handleCancel(e)}
+              >
+                {cancelText || locale.cancel}
+              </Button>
+            ))}
           {!hideConfirmButton && (
             <Button
               type="primary"
-              className={classNames(`${classPrefix}-footer-ok`, {
+              size="large"
+              className={classNames(`${classPrefix}-footer-ok ${btnClass}`, {
                 disabled: disableConfirmButton,
               })}
               disabled={disableConfirmButton}
@@ -125,9 +141,10 @@ const BaseDialog: ForwardRefRenderFunction<unknown, Partial<DialogProps>> = (
       [`${classPrefix}-close`]: true,
       [`${classPrefix}-close-${closeIconPosition}`]: true,
     })
+    const systomIcon = closeIconPosition !== 'bottom' ? <Close /> : <Failure />
     return (
       <div className={closeClasses} onClick={handleCancel}>
-        {React.isValidElement(closeIcon) ? closeIcon : <Close />}
+        {React.isValidElement(closeIcon) ? closeIcon : systomIcon}
       </div>
     )
   }