dialog component

build/bin/build-entry.js

@@ -51,7 +51,7 @@ ComponentNames.forEach(name => {
     'Lazyload',
 
       // services
-    'MessageBox',
+    'Dialog',
     'Toast',
     'Indicator'
   ].indexOf(componentName) === -1) {

components.json

@@ -6,5 +6,6 @@
   "cell": "./packages/cell/index.js",
   "icon": "./packages/icon/index.js",
   "cell-group": "./packages/cell-group/index.js",
-  "popup": "./packages/popup/index.js"
+  "popup": "./packages/popup/index.js",
+  "dialog": "./packages/dialog/index.js"
 }

docs/examples/dialog.md

@@ -0,0 +1,40 @@
+<script>
+import { Dialog } from 'src/index';
+
+export default {
+  methods: {
+    handleAlertClick() {
+      Dialog.alert({
+        title: 'alert',
+        message: 'alert message'
+      });
+    },
+
+    handleConfirmClick() {
+      Dialog.confirm({
+        title: 'confirm',
+        message: 'confirm message'
+      });
+    }
+  }
+};
+</script>
+
+## Dialog组件
+
+### 基础用法
+
+:::demo
+```html
+<o2-button @click="handleAlertClick">alert</o2-button>
+
+<o2-button @click="handleConfirmClick">confirm</o2-button>
+```
+:::
+
+### API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| title | 标题 | String  | '' |   |
+| message | 内容 | String  | '' |   |

docs/nav.config.json

@@ -80,6 +80,10 @@
               "path": "/popup",
               "title": "Popup"
             },
+            {
+              "path": "/dialog",
+              "title": "Dialog"
+            },
             {
               "path": "/swipe",
               "title": "Swipe"

packages/dialog/CHANGELOG.md

@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版

packages/dialog/README.md

@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)

packages/dialog/index.js

@@ -0,0 +1,3 @@
+import Dialog from './src/dialog.js';
+
+export default Dialog;

packages/dialog/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}

packages/dialog/src/dialog.js

@@ -0,0 +1,98 @@
+import Vue from 'vue';
+import Dialog from './dialog.vue';
+import merge from 'src/utils/merge';
+
+const DialogConstructor = Vue.extend(Dialog);
+
+let currentDialog;
+let instance;
+let dialogQueue = [];
+
+const defaultCallback = action => {
+  if (currentDialog) {
+    let callback = currentDialog.callback;
+
+    if (typeof callback === 'function') {
+      callback(action);
+    }
+
+    if (currentDialog.resolve && action !== 'cancel') {
+      currentDialog.resolve(action);
+    } else {
+      currentDialog.reject(action);
+    }
+  }
+};
+
+var initInstance = () => {
+  instance = new DialogConstructor({
+    el: document.createElement('div')
+  });
+
+  instance.callback = defaultCallback;
+};
+
+var showNextDialog = () => {
+  if (!instance) {
+    initInstance();
+  }
+
+  if (!instance.value && dialogQueue.length > 0) {
+    currentDialog = dialogQueue.shift();
+
+    let options = currentDialog.options;
+
+    for (let prop in options) {
+      if (options.hasOwnProperty(prop)) {
+        instance[prop] = options[prop];
+      }
+    }
+    console.log(instance)
+
+    if (options.callback === undefined) {
+      instance.callback = defaultCallback;
+    }
+
+    document.body.appendChild(instance.$el);
+
+    Vue.nextTick(() => {
+      instance.value = true;
+    });
+  }
+};
+
+var DialogBox = options => {
+  console.log(options)
+  return new Promise((resolve, reject) => { // eslint-disable-line
+    dialogQueue.push({
+      options: merge({}, options),
+      callback: options.callback,
+      resolve: resolve,
+      reject: reject
+    });
+
+    showNextDialog();
+  });
+};
+
+DialogBox.alert = function(options) {
+  return DialogBox(merge({
+    type: 'alert',
+    closeOnClickOverlay: false
+  }, options));
+};
+
+DialogBox.confirm = function(options) {
+  return DialogBox(merge({
+    type: 'confirm',
+    showCancelButton: true
+  }, options));
+};
+
+DialogBox.close = function() {
+  instance.value = false;
+  dialogQueue = [];
+  currentDialog = null;
+};
+
+export default DialogBox;

packages/dialog/src/dialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <transition name="dialog-fade">
+    <div class="o2-dialog-wrapper">
+      <div class="o2-dialog" v-show="value">
+        <div class="o2-dialog-header" v-if="title">
+          <div class="o2-dialog-title" v-text="title"></div>
+        </div>
+        <div class="o2-dialog-content" v-if="message">
+          <div class="o2-dialog-message" v-html="message"></div>
+        </div>
+        <div class="o2-dialog-footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+          <button class="o2-dialog-btn o2-dialog-cancel" v-show="showCancelButton" @click="handleAction('cancel')">{{ cancelButtonText }}</button>
+          <button class="o2-dialog-btn o2-dialog-confirm" v-show="showConfirmButton" @click="handleAction('confirm')">{{ confirmButtonText }}</button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'packages/popup';
+
+const CANCEL_TEXT = '取消';
+const CONFIRM_TEXT = '确认';
+
+export default {
+  name: 'o2-dialog',
+
+  mixins: [Popup],
+
+  props: {
+    overlay: {
+      default: true
+    },
+    closeOnClickOverlay: {
+      default: true
+    },
+    lockOnScroll: {
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      title: '提示',
+      message: '',
+      type: '',
+      showConfirmButton: true,
+      showCancelButton: false,
+      confirmButtonText: CONFIRM_TEXT,
+      cancelButtonText: CANCEL_TEXT,
+      callback: null
+    };
+  },
+
+  methods: {
+    handleAction(action) {
+      this.value = false;
+      this.callback && this.callback(action);
+    }
+  }
+};
+</script>

packages/zanui/src/dialog.pcss

@@ -0,0 +1,87 @@
+@import "./mixins/border_retina.pcss";
+
+@component-namespace o2 {
+  @component dialog-wrapper {
+    position: absolute;
+  }
+
+  @component dialog {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    background-color: #fff;
+    width: 85%;
+    border-radius: 4px;
+    font-size: 16px;
+    overflow: hidden;
+    backface-visibility: hidden;
+    transition: .2s;
+
+    @descendent header {
+      padding: 15px 0 0;
+    }
+
+    @descendent content {
+      padding: 10px 20px 15px;
+      min-height: 36px;
+      position: relative;
+
+      &::after {
+        @mixin border-retina (bottom);
+      }
+    }
+
+    @descendent title {
+      text-align: center;
+      padding-left: 0;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: #333;
+    }
+
+    @descendent message {
+      color: #999;
+      margin: 0;
+      text-align: center;
+      font-size: 14px;
+      line-height: 36px;
+    }
+
+    @descendent footer {
+      font-size: 14px;
+      overflow: hidden;
+    }
+
+    .is-twobtn {
+      .o2-dialog-btn {
+        width: 50%;
+      }
+
+      .o2-dialog-cancel {
+        &::after {
+          @mixin border-retina (right);
+        }
+      }
+    }
+
+    @descendent btn {
+      line-height: 40px;
+      border: 0;
+      background-color: #fff;
+      float: left;
+      box-sizing: border-box;
+      text-align: center;
+      position: relative;
+    }
+
+    @descendent cancel {
+      color: #333;
+    }
+
+    @descendent confirm {
+      color: #00C000;
+      width: 100%;
+    }
+  }
+}

packages/zanui/src/index.pcss

@@ -3,6 +3,7 @@
  */
 @import './button.pcss';
 @import './cell.pcss';
+@import './dialog.pcss';
 @import './field.pcss';
 @import './icon.pcss';
 @import './popup.pcss';

src/index.js

@@ -6,6 +6,7 @@ import Cell from '../packages/cell/index.js';
 import Icon from '../packages/icon/index.js';
 import CellGroup from '../packages/cell-group/index.js';
 import Popup from '../packages/popup/index.js';
+import Dialog from '../packages/dialog/index.js';
 // zanui
 import '../packages/zanui/src/index.pcss';
 
@@ -20,6 +21,7 @@ const install = function(Vue) {
   Vue.component(Icon.name, Icon);
   Vue.component(CellGroup.name, CellGroup);
   Vue.component(Popup.name, Popup);
+  // Vue.component(Dialog.name, Dialog);
 };
 
 // auto install
@@ -37,5 +39,6 @@ module.exports = {
   Cell,
   Icon,
   CellGroup,
-  Popup
+  Popup,
+  Dialog
 };

src/utils/merge.js

@@ -1,6 +1,6 @@
 export default function(target, ...sources) {
-  for (let i = 1, j = sources.length; i < j; i++) {
+  for (let i = 0; i < sources.length; i++) {
-    let source = arguments[i] || {};
+    let source = sources[i] || {};
     for (let prop in source) {
       if (source.hasOwnProperty(prop)) {
         let value = source[prop];