@zkwq/business 0.0.1

package/src/components/base/ui/menu/submenu.vue

@@ -0,0 +1,408 @@
+<script lang="jsx"  type="text/jsx">
+  import menuMixin from './menu-mixin';
+  import Emitter from '../mixin/emitter';
+  import Popper from '../util/vue-popper';
+  import { addClass, removeClass } from '../util/dom'
+  const poperMixins = {
+    props: {
+      transformOrigin: {
+        type: [Boolean, String],
+        default: false
+      },
+      offset: Popper.props.offset,
+      boundariesPadding: Popper.props.boundariesPadding,
+      popperOptions: Popper.props.popperOptions
+    },
+    data: Popper.data,
+    methods: Popper.methods,
+    beforeDestroy: Popper.beforeDestroy,
+    deactivated: Popper.deactivated
+  };
+
+  export default {
+    name: 'BaseSubmenu',
+
+    componentName: 'BaseSubmenu',
+
+    mixins: [menuMixin, Emitter, poperMixins],
+
+    props: {
+      index: {
+        type: String,
+        required: true
+      },
+      showTimeout: {
+        type: Number,
+        default: 300
+      },
+      hideTimeout: {
+        type: Number,
+        default: 300
+      },
+      popperClass: String,
+      disabled: Boolean,
+      popperAppendToBody: {
+        type: Boolean,
+        default: undefined
+      }
+    },
+
+    data() {
+      return {
+        popperJS: null,
+        timeout: null,
+        items: {},
+        submenus: {},
+        mouseInChild: false
+      };
+    },
+    watch: {
+      opened(val) {
+        if (this.isMenuPopup) {
+          this.$nextTick(_ => {
+            this.updatePopper();
+          });
+        }
+      }
+    },
+    computed: {
+      // popper option
+      appendToBody() {
+        return this.popperAppendToBody === undefined
+          ? this.isFirstLevel
+          : this.popperAppendToBody;
+      },
+      menuTransitionName() {
+        return this.rootMenu.collapse ? 'base-zoom-in-left' : 'base-zoom-in-top';
+      },
+      opened() {
+        return this.rootMenu.openedMenus.indexOf(this.index) > -1;
+      },
+      active() {
+        let isActive = false;
+        const submenus = this.submenus;
+        const items = this.items;
+
+        Object.keys(items).forEach(index => {
+          if (items[index].active) {
+            isActive = true;
+          }
+        });
+
+        Object.keys(submenus).forEach(index => {
+          if (submenus[index].active) {
+            isActive = true;
+          }
+        });
+
+        return isActive;
+      },
+      hoverBackground() {
+        return this.rootMenu.hoverBackground;
+      },
+      backgroundColor() {
+        return this.rootMenu.backgroundColor || '';
+      },
+      activeTextColor() {
+        return this.rootMenu.activeTextColor || '';
+      },
+      textColor() {
+        return this.rootMenu.textColor || '';
+      },
+      mode() {
+        return this.rootMenu.mode;
+      },
+      isMenuPopup() {
+        return this.rootMenu.isMenuPopup;
+      },
+      titleStyle() {
+        if (this.mode !== 'horizontal') {
+          return {
+            color: this.textColor
+          };
+        }
+        return {
+          borderBottomColor: this.active
+            ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
+            : 'transparent',
+          color: this.active
+            ? this.activeTextColor
+            : this.textColor
+        };
+      },
+      isFirstLevel() {
+        let isFirstLevel = true;
+        let parent = this.$parent;
+        while (parent && parent !== this.rootMenu) {
+          if (['BaseSubmenu', 'BaseMenuItemGroup'].indexOf(parent.$options.componentName) > -1) {
+            isFirstLevel = false;
+            break;
+          } else {
+            parent = parent.$parent;
+          }
+        }
+        return isFirstLevel;
+      }
+    },
+    methods: {
+      handleCollapseToggle(value) {
+        if (value) {
+          this.initPopper();
+        } else {
+          this.doDestroy();
+        }
+      },
+      addItem(item) {
+        this.$set(this.items, item.index, item);
+      },
+      removeItem(item) {
+        delete this.items[item.index];
+      },
+      addSubmenu(item) {
+        this.$set(this.submenus, item.index, item);
+      },
+      removeSubmenu(item) {
+        delete this.submenus[item.index];
+      },
+      handleClick() {
+        const { rootMenu, disabled } = this;
+        if (
+          (rootMenu.menuTrigger === 'hover' && rootMenu.mode === 'horizontal') ||
+          (rootMenu.collapse && rootMenu.mode === 'vertical') ||
+          disabled
+        ) {
+          return;
+        }
+        this.dispatch('BaseMenu', 'submenu-click', this);
+      },
+      handleMouseenter(event, showTimeout = this.showTimeout) {
+
+        if (!('ActiveXObject' in window) && event.type === 'focus' && !event.relatedTarget) {
+          return;
+        }
+        const { rootMenu, disabled } = this;
+        if (
+          (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
+          (!rootMenu.collapse && rootMenu.mode === 'vertical') ||
+          disabled
+        ) {
+          return;
+        }
+        this.dispatch('BaseSubmenu', 'mouse-enter-child');
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          this.rootMenu.openMenu(this.index, this.indexPath);
+        }, showTimeout);
+
+        if (this.appendToBody) {
+          this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'));
+        }
+      },
+      handleMouseleave(deepDispatch = false) {
+        const {rootMenu} = this;
+        if (
+          (rootMenu.menuTrigger === 'click' && rootMenu.mode === 'horizontal') ||
+          (!rootMenu.collapse && rootMenu.mode === 'vertical')
+        ) {
+          return;
+        }
+        this.dispatch('BaseSubmenu', 'mouse-leave-child');
+        clearTimeout(this.timeout);
+        this.timeout = setTimeout(() => {
+          !this.mouseInChild && this.rootMenu.closeMenu(this.index);
+        }, this.hideTimeout);
+
+        if (this.appendToBody && deepDispatch) {
+          if (this.$parent.$options.name === 'BaseSubmenu') {
+            this.$parent.handleMouseleave(true);
+          }
+        }
+      },
+      handleTitleMouseenter() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.hoverBackground);
+      },
+      handleTitleMouseleave() {
+        if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
+        const title = this.$refs['submenu-title'];
+        title && (title.style.backgroundColor = this.rootMenu.backgroundColor || '');
+      },
+      updatePlacement() {
+        this.currentPlacement = this.mode === 'horizontal' && this.isFirstLevel
+          ? 'bottom-start'
+          : 'right-start';
+      },
+      initPopper() {
+        this.referenceElm = this.$el;
+        this.popperElm = this.$refs.menu;
+        this.updatePlacement();
+      },
+      beforeEnter(el) {
+        addClass(el, 'collapse-transition');
+        if (!el.dataset) el.dataset = {};
+
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+
+        el.style.height = '0';
+        el.style.paddingTop = 0;
+        el.style.paddingBottom = 0;
+      },
+      enter(el) {
+        el.dataset.oldOverflow = el.style.overflow;
+        if (el.scrollHeight !== 0) {
+          el.style.height = el.scrollHeight + 'px';
+          el.style.paddingTop = el.dataset.oldPaddingTop;
+          el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        } else {
+          el.style.height = '';
+          el.style.paddingTop = el.dataset.oldPaddingTop;
+          el.style.paddingBottom = el.dataset.oldPaddingBottom;
+        }
+
+        el.style.overflow = 'hidden';
+      },
+      afterEnter(el) {
+        // for safari: remove class then reset height is necessary
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+      },
+      beforeLeave(el) {
+        if (!el.dataset) el.dataset = {};
+        el.dataset.oldPaddingTop = el.style.paddingTop;
+        el.dataset.oldPaddingBottom = el.style.paddingBottom;
+        el.dataset.oldOverflow = el.style.overflow;
+
+        el.style.height = el.scrollHeight + 'px';
+        el.style.overflow = 'hidden';
+      },
+      leave(el) {
+        if (el.scrollHeight !== 0) {
+          // for safari: add class after set height, or it will jump to zero height suddenly, weired
+          addClass(el, 'collapse-transition');
+          el.style.height = 0;
+          el.style.paddingTop = 0;
+          el.style.paddingBottom = 0;
+        }
+      },
+      afterLeave(el) {
+        removeClass(el, 'collapse-transition');
+        el.style.height = '';
+        el.style.overflow = el.dataset.oldOverflow;
+        el.style.paddingTop = el.dataset.oldPaddingTop;
+        el.style.paddingBottom = el.dataset.oldPaddingBottom;
+      }
+    },
+    created() {
+      this.$on('toggle-collapse', this.handleCollapseToggle);
+      this.$on('mouse-enter-child', () => {
+        this.mouseInChild = true;
+        clearTimeout(this.timeout);
+      });
+      this.$on('mouse-leave-child', () => {
+        this.mouseInChild = false;
+        clearTimeout(this.timeout);
+      });
+    },
+    mounted() {
+      this.parentMenu.addSubmenu(this);
+      this.rootMenu.addSubmenu(this);
+      this.initPopper();
+    },
+    beforeDestroy() {
+      this.parentMenu.removeSubmenu(this);
+      this.rootMenu.removeSubmenu(this);
+    },
+    render(h) {
+      const {
+        active,
+        opened,
+        paddingStyle,
+        titleStyle,
+        backgroundColor,
+        rootMenu,
+        currentPlacement,
+        menuTransitionName,
+        mode,
+        disabled,
+        popperClass,
+        $slots,
+        isFirstLevel
+      } = this;
+
+      const popupMenu = (
+        <transition name={menuTransitionName}>
+          <div
+            ref="menu"
+            v-show={opened}
+            class={[`base-menu--${mode}`, popperClass]}
+            on-mouseenter={($event) => this.handleMouseenter($event, 100)}
+            on-mouseleave={() => this.handleMouseleave(true)}
+            on-focus={($event) => this.handleMouseenter($event, 100)}>
+            <ul
+              role="menu"
+              class={['base-menu base-menu--popup', `base-menu--popup-${currentPlacement}`]}
+              style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+              {$slots.default}
+            </ul>
+          </div>
+        </transition>
+      );
+
+      const inlineMenu = (
+        <transition
+      on-before-enter={($el) => this.beforeEnter($el)}
+      on-enter={($el) => this.enter()}
+      on-after-enter={($el) => this.afterEnter($el)}
+      on-before-leave={($el) => this.beforeLeave($el)}
+      on-leave={($el) => this.leave($el)}
+      on-after-leave={($el) => this.afterLeave($el)}>
+          <ul
+            role="menu"
+            class="base-menu base-menu--inline"
+            v-show={opened}
+            style={{ backgroundColor: rootMenu.backgroundColor || '' }}>
+            {$slots.default}
+          </ul>
+        </transition>
+      );
+
+      const submenuTitleIcon = (
+        rootMenu.mode === 'horizontal' && isFirstLevel ||
+        rootMenu.mode === 'vertical' && !rootMenu.collapse
+      ) ? 'base-icon-arrow-down' : 'base-icon-arrow-right';
+
+      return (
+        <li
+          class={{
+            'base-submenu': true,
+            'is-active': active,
+            'is-opened': opened,
+            'is-disabled': disabled
+          }}
+          role="menuitem"
+          aria-haspopup="true"
+          aria-expanded={opened}
+          on-mouseenter={this.handleMouseenter}
+          on-mouseleave={() => this.handleMouseleave(false)}
+          on-focus={this.handleMouseenter}
+        >
+          <div
+            class="base-submenu__title"
+            ref="submenu-title"
+            on-click={this.handleClick}
+            on-mouseenter={this.handleTitleMouseenter}
+            on-mouseleave={this.handleTitleMouseleave}
+            style={[paddingStyle, titleStyle, { backgroundColor }]}
+          >
+            {$slots.title}
+            <i class={[ 'base-submenu__icon-arrow', submenuTitleIcon ]}></i>
+          </div>
+          {this.isMenuPopup ? popupMenu : inlineMenu}
+        </li>
+      );
+    }
+  };
+</script>

package/src/components/base/ui/message/index.js

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

package/src/components/base/ui/message/main.js

@@ -0,0 +1,87 @@
+import Vue from 'vue'
+import Main from './main.vue'
+import { PopupManager } from '../util/popup'
+import { isVNode } from '../util/vdom'
+let MessageConstructor = Vue.extend(Main)
+
+let instance
+let instances = []
+let seed = 1
+
+const Message = function (options) {
+  if (Vue.prototype.$isServer) return
+  options = options || {}
+  if (typeof options === 'string') {
+    options = {
+      message: options
+    }
+  }
+  let userOnClose = options.onClose
+  let id = 'message_' + seed++
+
+  options.onClose = function() {
+    Message.close(id, userOnClose)
+  };
+  instance = new MessageConstructor({
+    data: options
+  })
+  instance.id = id
+  if (isVNode(instance.message)) {
+    instance.$slots.default = [instance.message]
+    instance.message = null
+  }
+  instance.$mount()
+  document.body.appendChild(instance.$el)
+  let verticalOffset = options.offset || 20
+  instances.forEach(item => {
+    verticalOffset += item.$el.offsetHeight + 16
+  })
+  instance.verticalOffset = verticalOffset
+  instance.visible = true
+  instance.$el.style.zIndex = PopupManager.nextZIndex() + 8000
+  instances.push(instance)
+  return instance;
+};
+
+['success', 'warning', 'info', 'error'].forEach(type => {
+  Message[type] = options => {
+    if (typeof options === 'string') {
+      options = {
+        message: options
+      }
+    }
+    options.type = type
+    return Message(options)
+  }
+})
+
+Message.close = function(id, userOnClose) {
+  let len = instances.length
+  let index = -1
+  let removedHeight
+  for (let i = 0; i < len; i++) {
+    if (id === instances[i].id) {
+      removedHeight = instances[i].$el.offsetHeight
+      index = i
+      if (typeof userOnClose === 'function') {
+        userOnClose(instances[i])
+      }
+      instances.splice(i, 1)
+      break
+    }
+  }
+  if (len <= 1 || index === -1 || index > instances.length - 1) return
+  for (let i = index; i < len - 1;  i++) {
+    let dom = instances[i].$el
+    dom.style['top'] =
+      parseInt(dom.style['top'], 10) - removedHeight - 16 + 'px'
+  }
+};
+
+Message.closeAll = function() {
+  for (let i = instances.length - 1; i >= 0; i--) {
+    instances[i].close()
+  }
+};
+
+export default Message

package/src/components/base/ui/message/main.vue

@@ -0,0 +1,110 @@
+<template>
+  <transition name="base-message-fade" @after-leave="handleAfterLeave">
+    <div
+      :class="[
+        'base-message',
+        type && !iconClass ? `base-message--${ type }` : '',
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
+      :style="positionStyle"
+      v-show="visible"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+      role="alert">
+      <i :class="iconClass" v-if="iconClass"></i>
+      <i :class="typeClass" v-else></i>
+      <slot>
+        <p v-if="!dangerouslyUseHTMLString" class="base-message__content">{{ message }}</p>
+        <p v-else v-html="message" class="base-message__content"></p>
+      </slot>
+      <i v-if="showClose" class="base-message__closeBtn base-icon-close" @click="close"></i>
+    </div>
+  </transition>
+</template>
+
+<script type="text/babel">
+const typeMap = {
+    success: 'success',
+    info: 'info',
+    warning: 'warning',
+    error: 'error'
+  }
+export default {
+  data() {
+    return {
+      visible: false,
+      message: '',
+      duration: 3000,
+      type: 'info',
+      iconClass: '',
+      customClass: '',
+      onClose: null,
+      showClose: false,
+      closed: false,
+      verticalOffset: 20,
+      timer: null,
+      dangerouslyUseHTMLString: false,
+      center: false
+    }
+  },
+  computed: {
+    typeClass() {
+      return this.type && !this.iconClass
+        ? `base-message__icon base-icon-${ typeMap[this.type] }`
+        : ''
+    },
+    positionStyle() {
+      return {
+        'top': `${ this.verticalOffset }px`
+      }
+    }
+  },
+  watch: {
+    closed (newVal) {
+      if (newVal) {
+        this.visible = false
+      }
+    }
+  },
+  methods: {
+    handleAfterLeave () {
+      this.$destroy(true)
+      this.$el.parentNode.removeChild(this.$el)
+    },
+    close () {
+      this.closed = true
+      if (typeof this.onClose === 'function') {
+        this.onClose(this)
+      }
+    },
+    clearTimer () {
+      clearTimeout(this.timer)
+    },
+    startTimer () {
+      if (this.duration > 0) {
+        this.timer = setTimeout(() => {
+          if (!this.closed) {
+            this.close()
+          }
+        }, this.duration)
+      }
+    },
+    keydown (e) {
+      if (e.keyCode === 27) { // esc关闭消息
+        if (!this.closed) {
+          this.close()
+        }
+      }
+    }
+  },
+  mounted () {
+    this.startTimer()
+    document.addEventListener('keydown', this.keydown)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.keydown)
+  }
+}
+</script>