kh-one-ui 2.0.0

package/packages/message-box/src/main.js

@@ -0,0 +1,227 @@
+const defaults = {
+	title: null,
+	message: '',
+	type: '',
+	iconClass: '',
+	showInput: false,
+	showClose: true,
+	modalFade: true,
+	lockScroll: true,
+	closeOnClickModal: true,
+	closeOnPressEscape: true,
+	closeOnHashChange: true,
+	inputValue: null,
+	inputPlaceholder: '',
+	inputType: 'text',
+	inputMaxlength: null,
+	inputMinlength: null,
+	inputShowWordLimit: null,
+	inputRows: 2,
+	inputPattern: null,
+	inputValidator: null,
+	inputErrorMessage: '',
+	showConfirmButton: true,
+	showCancelButton: false,
+	confirmButtonPosition: 'right',
+	confirmButtonHighlight: false,
+	cancelButtonHighlight: false,
+	confirmButtonText: '',
+	cancelButtonText: '',
+	confirmButtonClass: '',
+	cancelButtonClass: '',
+	customClass: '',
+	beforeClose: null,
+	dangerouslyUseHTMLString: false,
+	center: false,
+	roundButton: false,
+	distinguishCancelAndClose: false
+};
+
+import Vue from 'vue';
+import msgboxVue from './main.vue';
+import merge from 'one-ui/src/utils/merge';
+import {
+	isVNode
+} from 'one-ui/src/utils/vdom';
+
+const MessageBoxConstructor = Vue.extend(msgboxVue);
+
+let currentMsg, instance;
+let msgQueue = [];
+
+const defaultCallback = action => {
+	if (currentMsg) {
+		let callback = currentMsg.callback;
+		if (typeof callback === 'function') {
+			if (instance.showInput) {
+				callback(instance.inputValue, action);
+			} else {
+				callback(action);
+			}
+		}
+		if (currentMsg.resolve) {
+			if (action === 'confirm') {
+				if (instance.showInput) {
+					currentMsg.resolve({
+						value: instance.inputValue,
+						action
+					});
+				} else {
+					currentMsg.resolve(action);
+				}
+			} else if (currentMsg.reject && (action === 'cancel' || action === 'close')) {
+				currentMsg.reject(action);
+			}
+		}
+	}
+};
+
+const initInstance = () => {
+	instance = new MessageBoxConstructor({
+		el: document.createElement('div')
+	});
+
+	instance.callback = defaultCallback;
+};
+
+const showNextMsg = () => {
+	if (!instance) {
+		initInstance();
+	}
+	instance.action = '';
+
+	if (!instance.visible || instance.closeTimer) {
+		if (msgQueue.length > 0) {
+			currentMsg = msgQueue.shift();
+
+			let options = currentMsg.options;
+			for (let prop in options) {
+				if (options.hasOwnProperty(prop)) {
+					instance[prop] = options[prop];
+				}
+			}
+			if (options.callback === undefined) {
+				instance.callback = defaultCallback;
+			}
+
+			let oldCb = instance.callback;
+			instance.callback = (action, instance) => {
+				oldCb(action, instance);
+				showNextMsg();
+			};
+			if (isVNode(instance.message)) {
+				instance.$slots.default = [instance.message];
+				instance.message = null;
+			} else {
+				delete instance.$slots.default;
+			}
+			['modal', 'showClose', 'closeOnClickModal', 'closeOnPressEscape', 'closeOnHashChange'].forEach(prop => {
+				if (instance[prop] === undefined) {
+					instance[prop] = true;
+				}
+			});
+			document.body.appendChild(instance.$el);
+
+			Vue.nextTick(() => {
+				instance.visible = true;
+			});
+		}
+	}
+};
+
+const MessageBox = function(options, callback) {
+	if (Vue.prototype.$isServer) return;
+	if (typeof options === 'string' || isVNode(options)) {
+		options = {
+			message: options
+		};
+		if (typeof arguments[1] === 'string') {
+			options.title = arguments[1];
+		}
+	} else if (options.callback && !callback) {
+		callback = options.callback;
+	}
+
+	if (typeof Promise !== 'undefined') {
+		return new Promise((resolve, reject) => { // eslint-disable-line
+			msgQueue.push({
+				options: merge({}, defaults, MessageBox.defaults, options),
+				callback: callback,
+				resolve: resolve,
+				reject: reject
+			});
+
+			showNextMsg();
+		});
+	} else {
+		msgQueue.push({
+			options: merge({}, defaults, MessageBox.defaults, options),
+			callback: callback
+		});
+
+		showNextMsg();
+	}
+};
+
+MessageBox.setDefaults = defaults => {
+	MessageBox.defaults = defaults;
+};
+
+MessageBox.alert = (message, title, options) => {
+	if (typeof title === 'object') {
+		options = title;
+		title = '';
+	} else if (title === undefined) {
+		title = '';
+	}
+	return MessageBox(merge({
+		title: title,
+		message: message,
+		$type: 'alert',
+		closeOnPressEscape: false,
+		closeOnClickModal: false
+	}, options));
+};
+
+MessageBox.confirm = (message, title, options) => {
+	if (typeof title === 'object') {
+		options = title;
+		title = '';
+	} else if (title === undefined) {
+		title = '';
+	}
+	return MessageBox(merge({
+		title: title,
+		message: message,
+		$type: 'confirm',
+		showCancelButton: true
+	}, options));
+};
+
+MessageBox.prompt = (message, title, options) => {
+	if (typeof title === 'object') {
+		options = title;
+		title = '';
+	} else if (title === undefined) {
+		title = '';
+	}
+	return MessageBox(merge({
+		title: title,
+		message: message,
+		showCancelButton: true,
+		showInput: true,
+		$type: 'prompt'
+	}, options));
+};
+
+MessageBox.close = () => {
+	instance.doClose();
+	instance.visible = false;
+	msgQueue = [];
+	currentMsg = null;
+};
+
+export default MessageBox;
+export {
+	MessageBox
+};

package/packages/message-box/src/main.vue

@@ -0,0 +1,340 @@
+<template>
+  <transition name="msgbox-fade">
+    <div
+      class="el-message-box__wrapper"
+      tabindex="-1"
+      v-show="visible"
+      @click.self="handleWrapperClick"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="title || 'dialog'">
+      <div class="el-message-box" :class="[customClass, center && 'el-message-box--center']">
+        <div class="el-message-box__header" v-if="title !== null">
+          <div class="el-message-box__title">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && center">
+            </div>
+            <span>{{ title }}</span>
+          </div>
+          <button
+            type="button"
+            class="el-message-box__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')"
+            @keydown.enter="handleAction(distinguishCancelAndClose ? 'close' : 'cancel')">
+            <i class="el-message-box__close el-icon-close"></i>
+          </button>
+        </div>
+        <div class="el-message-box__content">
+          <div class="el-message-box__container">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && !center && message !== ''">
+            </div>
+            <div class="el-message-box__message" v-if="message !== ''">
+              <slot>
+                <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+                <p v-else v-html="message"></p>
+              </slot>
+            </div>
+          </div>
+          <div class="el-message-box__input" v-show="showInput">
+            <el-input
+              v-model="inputValue"
+              :type="inputType"
+			  :maxlength="inputMaxlength"
+			  :minlength="inputMinlength"
+			  :show-word-limit="inputShowWordLimit"
+			  :rows="inputRows"
+              @keydown.enter.native="handleInputEnter"
+              :placeholder="inputPlaceholder"
+              ref="input"></el-input>
+            <div class="el-message-box__errormsg" :style="{ visibility: !!editorErrorMessage ? 'visible' : 'hidden' }">{{ editorErrorMessage }}</div>
+          </div>
+        </div>
+        <div class="el-message-box__btns">
+          <el-button
+            :loading="cancelButtonLoading"
+            :class="[ cancelButtonClasses ]"
+            v-if="showCancelButton"
+            :round="roundButton"
+            size="small"
+            @click.native="handleAction('cancel')"
+            @keydown.enter="handleAction('cancel')">
+            {{ cancelButtonText || t('el.messagebox.cancel') }}
+          </el-button>
+          <el-button
+            :loading="confirmButtonLoading"
+            ref="confirm"
+            :class="[ confirmButtonClasses ]"
+            v-show="showConfirmButton"
+            :round="roundButton"
+            size="small"
+            @click.native="handleAction('confirm')"
+            @keydown.enter="handleAction('confirm')">
+            {{ confirmButtonText || t('el.messagebox.confirm') }}
+          </el-button>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+  import Popup from 'one-ui/src/utils/popup';
+  import Locale from 'one-ui/src/mixins/locale';
+  import ElInput from 'one-ui/packages/input';
+  import ElButton from 'one-ui/packages/button';
+  import { addClass, removeClass } from 'one-ui/src/utils/dom';
+  import { t } from 'one-ui/src/locale';
+  import Dialog from 'one-ui/src/utils/aria-dialog';
+
+  let messageBox;
+  let typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error'
+  };
+
+  export default {
+    mixins: [Popup, Locale],
+
+    props: {
+      modal: {
+        default: true
+      },
+      lockScroll: {
+        default: true
+      },
+      showClose: {
+        type: Boolean,
+        default: true
+      },
+      closeOnClickModal: {
+        default: true
+      },
+      closeOnPressEscape: {
+        default: true
+      },
+      closeOnHashChange: {
+        default: true
+      },
+      center: {
+        default: false,
+        type: Boolean
+      },
+      roundButton: {
+        default: false,
+        type: Boolean
+      }
+    },
+
+    components: {
+      ElInput,
+      ElButton
+    },
+
+    computed: {
+      icon() {
+        const { type, iconClass } = this;
+        return iconClass || (type && typeMap[type] ? `el-icon-${ typeMap[type] }` : '');
+      },
+
+      confirmButtonClasses() {
+        return `el-button--primary ${ this.confirmButtonClass }`;
+      },
+      cancelButtonClasses() {
+        return `${ this.cancelButtonClass }`;
+      }
+    },
+
+    methods: {
+      getSafeClose() {
+        const currentId = this.uid;
+        return () => {
+          this.$nextTick(() => {
+            if (currentId === this.uid) this.doClose();
+          });
+        };
+      },
+      doClose() {
+        if (!this.visible) return;
+        this.visible = false;
+        this._closing = true;
+
+        this.onClose && this.onClose();
+        messageBox.closeDialog(); // 解绑
+        if (this.lockScroll) {
+          setTimeout(this.restoreBodyStyle, 200);
+        }
+        this.opened = false;
+        this.doAfterClose();
+        setTimeout(() => {
+          if (this.action) this.callback(this.action, this);
+        });
+      },
+
+      handleWrapperClick() {
+        if (this.closeOnClickModal) {
+          this.handleAction(this.distinguishCancelAndClose ? 'close' : 'cancel');
+        }
+      },
+
+      handleInputEnter() {
+        if (this.inputType !== 'textarea') {
+          return this.handleAction('confirm');
+        }
+      },
+
+      handleAction(action) {
+        if (this.$type === 'prompt' && action === 'confirm' && !this.validate()) {
+          return;
+        }
+        this.action = action;
+        if (typeof this.beforeClose === 'function') {
+          this.close = this.getSafeClose();
+          this.beforeClose(action, this, this.close);
+        } else {
+          this.doClose();
+        }
+      },
+
+      validate() {
+        if (this.$type === 'prompt') {
+          const inputPattern = this.inputPattern;
+          if (inputPattern && !inputPattern.test(this.inputValue || '')) {
+            this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
+            addClass(this.getInputElement(), 'invalid');
+            return false;
+          }
+          const inputValidator = this.inputValidator;
+          if (typeof inputValidator === 'function') {
+            const validateResult = inputValidator(this.inputValue);
+            if (validateResult === false) {
+              this.editorErrorMessage = this.inputErrorMessage || t('el.messagebox.error');
+              addClass(this.getInputElement(), 'invalid');
+              return false;
+            }
+            if (typeof validateResult === 'string') {
+              this.editorErrorMessage = validateResult;
+              addClass(this.getInputElement(), 'invalid');
+              return false;
+            }
+          }
+        }
+        this.editorErrorMessage = '';
+        removeClass(this.getInputElement(), 'invalid');
+        return true;
+      },
+      getFirstFocus() {
+        const btn = this.$el.querySelector('.el-message-box__btns .el-button');
+        const title = this.$el.querySelector('.el-message-box__btns .el-message-box__title');
+        return btn || title;
+      },
+      getInputElement() {
+        const inputRefs = this.$refs.input.$refs;
+        return inputRefs.input || inputRefs.textarea;
+      },
+      handleClose() {
+        this.handleAction('close');
+      }
+    },
+
+    watch: {
+      inputValue: {
+        immediate: true,
+        handler(val) {
+          this.$nextTick(_ => {
+            if (this.$type === 'prompt' && val !== null) {
+              this.validate();
+            }
+          });
+        }
+      },
+
+      visible(val) {
+        if (val) {
+          this.uid++;
+          if (this.$type === 'alert' || this.$type === 'confirm') {
+            this.$nextTick(() => {
+              this.$refs.confirm.$el.focus();
+            });
+          }
+          this.focusAfterClosed = document.activeElement;
+          messageBox = new Dialog(this.$el, this.focusAfterClosed, this.getFirstFocus());
+        }
+
+        // prompt
+        if (this.$type !== 'prompt') return;
+        if (val) {
+          setTimeout(() => {
+            if (this.$refs.input && this.$refs.input.$el) {
+              this.getInputElement().focus();
+            }
+          }, 500);
+        } else {
+          this.editorErrorMessage = '';
+          removeClass(this.getInputElement(), 'invalid');
+        }
+      }
+    },
+
+    mounted() {
+      this.$nextTick(() => {
+        if (this.closeOnHashChange) {
+          window.addEventListener('hashchange', this.close);
+        }
+      });
+    },
+
+    beforeDestroy() {
+      if (this.closeOnHashChange) {
+        window.removeEventListener('hashchange', this.close);
+      }
+      setTimeout(() => {
+        messageBox.closeDialog();
+      });
+    },
+
+    data() {
+      return {
+        uid: 1,
+        title: undefined,
+        message: '',
+        type: '',
+        iconClass: '',
+        customClass: '',
+        showInput: false,
+        inputValue: null,
+        inputPlaceholder: '',
+        inputType: 'text',
+		inputMaxlength: null,
+		inputMinlength: null,
+		inputShowWordLimit: null,
+		inputRows: 2,
+        inputPattern: null,
+        inputValidator: null,
+        inputErrorMessage: '',
+        showConfirmButton: true,
+        showCancelButton: false,
+        action: '',
+        confirmButtonText: '',
+        cancelButtonText: '',
+        confirmButtonLoading: false,
+        cancelButtonLoading: false,
+        confirmButtonClass: '',
+        confirmButtonDisabled: false,
+        cancelButtonClass: '',
+        editorErrorMessage: null,
+        callback: null,
+        dangerouslyUseHTMLString: false,
+        focusAfterClosed: null,
+        isOnComposition: false,
+        distinguishCancelAndClose: false
+      };
+    }
+  };
+</script>

package/packages/notification/index.js

@@ -0,0 +1,2 @@
+import Notification from './src/main.js';
+export default Notification;

package/packages/notification/src/main.js

@@ -0,0 +1,94 @@
+import Vue from 'vue';
+import Main from './main.vue';
+import merge from 'one-ui/src/utils/merge';
+import { PopupManager } from 'one-ui/src/utils/popup';
+import { isVNode } from 'one-ui/src/utils/vdom';
+const NotificationConstructor = Vue.extend(Main);
+
+let instance;
+let instances = [];
+let seed = 1;
+
+const Notification = function(options) {
+  if (Vue.prototype.$isServer) return;
+  options = merge({}, options);
+  const userOnClose = options.onClose;
+  const id = 'notification_' + seed++;
+  const position = options.position || 'top-right';
+
+  options.onClose = function() {
+    Notification.close(id, userOnClose);
+  };
+
+  instance = new NotificationConstructor({
+    data: options
+  });
+
+  if (isVNode(options.message)) {
+    instance.$slots.default = [options.message];
+    options.message = 'REPLACED_BY_VNODE';
+  }
+  instance.id = id;
+  instance.$mount();
+  document.body.appendChild(instance.$el);
+  instance.visible = true;
+  instance.dom = instance.$el;
+  instance.dom.style.zIndex = PopupManager.nextZIndex();
+
+  let verticalOffset = options.offset || 0;
+  instances.filter(item => item.position === position).forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16;
+  });
+  verticalOffset += 16;
+  instance.verticalOffset = verticalOffset;
+  instances.push(instance);
+  return instance;
+};
+
+['success', 'warning', 'info', 'error'].forEach(type => {
+  Notification[type] = options => {
+    if (typeof options === 'string' || isVNode(options)) {
+      options = {
+        message: options
+      };
+    }
+    options.type = type;
+    return Notification(options);
+  };
+});
+
+Notification.close = function(id, userOnClose) {
+  let index = -1;
+  const len = instances.length;
+  const instance = instances.filter((instance, i) => {
+    if (instance.id === id) {
+      index = i;
+      return true;
+    }
+    return false;
+  })[0];
+  if (!instance) return;
+
+  if (typeof userOnClose === 'function') {
+    userOnClose(instance);
+  }
+  instances.splice(index, 1);
+
+  if (len <= 1) return;
+  const position = instance.position;
+  const removedHeight = instance.dom.offsetHeight;
+  for (let i = index; i < len - 1 ; i++) {
+    if (instances[i].position === position) {
+      instances[i].dom.style[instance.verticalProperty] =
+        parseInt(instances[i].dom.style[instance.verticalProperty], 10) - removedHeight - 16 + 'px';
+    }
+  }
+};
+
+Notification.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close();
+  }
+};
+
+export default Notification;