@zkwq/business 0.0.4 → 0.0.6

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

@@ -1,408 +0,0 @@
-<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

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

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

@@ -1,87 +0,0 @@
-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

@@ -1,110 +0,0 @@
-<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>