From cc162ecd7be52513602c34dd2bccc024f9db9b92 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 11 Oct 2019 10:13:33 +0800
Subject: [PATCH] feat(Dialog): add width prop (#4687)

---
 src/dialog/Dialog.js          |  4 +++-
 src/dialog/README.md          |  2 ++
 src/dialog/README.zh-CN.md    |  2 ++
 src/dialog/index.js           |  1 +
 src/dialog/test/index.spec.js | 11 +++++++++++
 types/dialog.d.ts             |  1 +
 6 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js
index d1e022a60..1ea97ce3b 100644
--- a/src/dialog/Dialog.js
+++ b/src/dialog/Dialog.js
@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import { CloseOnPopstateMixin } from '../mixins/close-on-popstate';
@@ -11,6 +11,7 @@ export default createComponent({
 
   props: {
     title: String,
+    width: [Number, String],
     message: String,
     className: null,
     callback: Function,
@@ -153,6 +154,7 @@ export default createComponent({
           role="dialog"
           aria-labelledby={this.title || message}
           class={[bem(), this.className]}
+          style={{ width: addUnit(this.width) }}
         >
           {Title}
           {Content}
diff --git a/src/dialog/README.md b/src/dialog/README.md
index d5b958c86..d871b8f2d 100644
--- a/src/dialog/README.md
+++ b/src/dialog/README.md
@@ -119,6 +119,7 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | title | Title | *string* | - | - |
+| width | Width | *string \| number* | `320px` | 2.2.7 |
 | message | Message | *string* | - | - |
 | messageAlign | Message text align，can be set to `left` `right` | *string* | `center` | - |
 | className | Custom className | *any* | - | - |
@@ -144,6 +145,7 @@ export default {
 |------|------|------|------|------|
 | v-model | Whether to show dialog | *boolean* | - | - |
 | title | Title | *string* | - | - |
+| width | Width | *string \| number* | `320px` | 2.2.7 |
 | message | Message | *string* | - | - |
 | message-align | Message align，can be set to `left` `right` | *string* | `center` | - |
 | show-confirm-button | Whether to show confirm button | *boolean* |  `true` | - |
diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md
index a1f408351..0bd5becd7 100644
--- a/src/dialog/README.zh-CN.md
+++ b/src/dialog/README.zh-CN.md
@@ -148,6 +148,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | title | 标题 | *string* | - | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 2.2.7 |
 | message | 文本内容，支持通过`\n`换行 | *string* | - | - |
 | messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
 | className | 自定义类名 | *any* | - | - |
@@ -175,6 +176,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 是否显示弹窗 | *boolean* | - | - |
 | title | 标题 | *string* | - | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 2.2.7 |
 | message | 文本内容，支持通过`\n`换行 | *string* | - | - |
 | message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
 | show-confirm-button | 是否展示确认按钮 | *boolean* |  `true` | - |
diff --git a/src/dialog/index.js b/src/dialog/index.js
index adb40482a..690ad1536 100644
--- a/src/dialog/index.js
+++ b/src/dialog/index.js
@@ -47,6 +47,7 @@ function Dialog(options) {
 Dialog.defaultOptions = {
   value: true,
   title: '',
+  width: '',
   message: '',
   overlay: true,
   className: '',
diff --git a/src/dialog/test/index.spec.js b/src/dialog/test/index.spec.js
index 124aeef3c..91b5dfb18 100644
--- a/src/dialog/test/index.spec.js
+++ b/src/dialog/test/index.spec.js
@@ -134,3 +134,14 @@ test('open & close event', () => {
   wrapper.vm.value = false;
   expect(wrapper.emitted('close')).toBeTruthy();
 });
+
+test('width prop', () => {
+  const wrapper = mount(DialogComponent, {
+    propsData: {
+      value: true,
+      width: 200
+    }
+  });
+
+  expect(wrapper.element.style.width).toEqual('200px');
+});
diff --git a/types/dialog.d.ts b/types/dialog.d.ts
index f413e972a..1b5f7b17e 100644
--- a/types/dialog.d.ts
+++ b/types/dialog.d.ts
@@ -3,6 +3,7 @@ type DialogDone = (close?: boolean) => void;
 
 export type DialogOptions = {
   title?: string;
+  width?: string | number;
   message?: string;
   overlay?: boolean;
   className?: any;