add Modal component

examples/pages/modal/index.js

@@ -1,3 +1,140 @@
+const { $Message } = require('../../dist/base/index');
+
 Page({
+    data: {
+        visible1: false,
+        visible2: false,
+        visible3: false,
+        visible4: false,
+        visible5: false,
+        actions3: [
+            {
+                name: '现金支付',
+                color: '#2d8cf0',
+            },
+            {
+                name: '微信支付',
+                color: '#19be6b'
+            },
+            {
+                name: '取消'
+            }
+        ],
+        actions4: [
+            {
+                name: '按钮1'
+            },
+            {
+                name: '按钮2',
+                color: '#ff9900'
+            },
+            {
+                name: '按钮3',
+                icon: 'search'
+            }
+        ],
+        actions5: [
+            {
+                name: '取消'
+            },
+            {
+                name: '删除',
+                color: '#ed3f14',
+                loading: false
+            }
+        ]
+    },
+
+    handleOpen1 () {
+        this.setData({
+            visible1: true
+        });
+    },
+
+    handleClose1 () {
+        this.setData({
+            visible1: false
+        });
+    },
+
+    handleOpen2 () {
+        this.setData({
+            visible2: true
+        });
+    },
+
+    handleClose2 () {
+        this.setData({
+            visible2: false
+        });
+    },
+
+    handleOpen3 () {
+        this.setData({
+            visible3: true
+        });
+    },
+
+    handleClick3 ({ detail }) {
+        const index = detail.index;
+
+        if (index === 0) {
+            $Message({
+                content: '点击了现金支付'
+            });
+        } else if (index === 1) {
+            $Message({
+                content: '点击了微信支付'
+            });
+        }
+
+        this.setData({
+            visible3: false
+        });
+    },
+
+    handleOpen4 () {
+        this.setData({
+            visible4: true
+        });
+    },
+
+    handleClick4 () {
+        this.setData({
+            visible4: false
+        });
+    },
+
+    handleOpen5 () {
+        this.setData({
+            visible5: true
+        });
+    },
+
+    handleClick5 ({ detail }) {
+        if (detail.index === 0) {
+            this.setData({
+                visible5: false
+            });
+        } else {
+            const action = [...this.data.actions5];
+            action[1].loading = true;
+
+            this.setData({
+                actions5: action
+            });
 
+            setTimeout(() => {
+                action[1].loading = false;
+                this.setData({
+                    visible5: false,
+                    actions5: action
+                });
+                $Message({
+                    content: '删除成功！',
+                    type: 'success'
+                });
+            }, 2000);
+        }
+    }
 });

examples/pages/modal/index.json

@@ -1,6 +1,8 @@
 {
   "navigationBarTitleText": "Modal 对话框",
   "usingComponents": {
-    "i-modal": "../../dist/modal/index"
+    "i-modal": "../../dist/modal/index",
+    "i-button": "../../dist/button/index",
+    "i-message": "../../dist/message/index"
   }
 }

examples/pages/modal/index.wxml

@@ -0,0 +1,37 @@
+<view style="margin-top: 100px;">
+    <i-button bind:click="handleOpen1">普通对话框</i-button>
+    <i-button bind:click="handleOpen2">无标题对话框</i-button>
+    <i-button bind:click="handleOpen3">自定义按钮对话框</i-button>
+    <i-button bind:click="handleOpen4">纵向按钮，自定义颜色及图标</i-button>
+    <i-button bind:click="handleOpen5">异步操作</i-button>
+</view>
+
+<i-modal title="标题" visible="{{ visible1 }}" bind:ok="handleClose1" bind:cancel="handleClose1">
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+    <view>一些文本</view>
+</i-modal>
+
+<i-modal visible="{{ visible2 }}" bind:ok="handleClose2" bind:cancel="handleClose2">
+    <view>这是一个无标题的对话框</view>
+</i-modal>
+
+<i-modal title="支付" visible="{{ visible3 }}" actions="{{ actions3 }}" bind:click="handleClick3">
+    <view>请选择支付方式</view>
+</i-modal>
+
+<i-modal title="纵向排列的按钮" visible="{{ visible4 }}" actions="{{ actions4 }}" action-mode="{{ vertical }}" bind:click="handleClick4">
+
+</i-modal>
+
+<i-modal title="删除确认" visible="{{ visible5 }}" actions="{{ actions5 }}" bind:click="handleClick5">
+    <view>删除后无法恢复哦</view>
+</i-modal>
+
+<i-message id="message" />

src/action-sheet/index.less

@@ -88,4 +88,13 @@
             margin-right: 4px;
         }
     }
+}
+
+@keyframes btn-spin {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
 }

src/grid/index.js

@@ -19,22 +19,28 @@ Component({
     methods: {
         setGridItemWidth () {
             const nodes = this.getRelationNodes('../grid-item/index');
-            const len = nodes.length;
 
-            if (len < 3) {
-                nodes.forEach(item => {
-                    item.setData({
-                        'width': '33.33%'
-                    });
+            // const len = nodes.length;
+            // if (len < 3) {
+            //     nodes.forEach(item => {
+            //         item.setData({
+            //             'width': '33.33%'
+            //         });
+            //     });
+            // } else {
+            //     const width = 100 / nodes.length;
+            //     nodes.forEach(item => {
+            //         item.setData({
+            //             'width': width + '%'
+            //         });
+            //     });
+            // }
+            const width = 100 / nodes.length;
+            nodes.forEach(item => {
+                item.setData({
+                    'width': width + '%'
                 });
-            } else {
-                const width = 100 / nodes.length;
-                nodes.forEach(item => {
-                    item.setData({
-                        'width': width + '%'
-                    });
-                });
-            }
+            });
         }
     },
 

src/modal/index.js

@@ -1,4 +1,54 @@
 Component({
-    externalClasses: ['i-class'],
+    externalClasses: ['i-class', 'i-class-mask'],
 
+    properties: {
+        visible: {
+            type: Boolean,
+            value: false
+        },
+        title: {
+            type: String,
+            value: ''
+        },
+        showOk: {
+            type: Boolean,
+            value: true
+        },
+        showCancel: {
+            type: Boolean,
+            value: true
+        },
+        okText: {
+            type: String,
+            value: '确定'
+        },
+        cancelText: {
+            type: String,
+            value: '取消'
+        },
+        // 按钮组，有此值时，不显示 ok 和 cancel 按钮
+        actions: {
+            type: Array,
+            value: []
+        },
+        // horizontal || vertical
+        actionMode: {
+            type: String,
+            value: 'horizontal'
+        }
+    },
+
+    methods: {
+        handleClickItem ({ currentTarget = {} }) {
+            const dataset = currentTarget.dataset || {};
+            const { index } = dataset;
+            this.triggerEvent('click', { index });
+        },
+        handleClickOk () {
+            this.triggerEvent('ok');
+        },
+        handleClickCancel () {
+            this.triggerEvent('cancel');
+        }
+    }
 });

src/modal/index.json

@@ -1,3 +1,9 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "i-grid": "../grid/index",
+    "i-grid-item": "../grid-item/index",
+    "i-button": "../button/index",
+    "i-icon": "../icon/index"
+  }
 }