@zkwq/business 0.0.4 → 0.0.6

package/src/components/base/ui/menu/menu-item.vue

@@ -1,112 +0,0 @@
-<template>
-  <li class="base-menu-item"
-    role="menuitem"
-    tabindex="-1"
-    :style="[paddingStyle, itemStyle, { backgroundColor }]"
-    :class="{
-      'is-active': active,
-      'is-disabled': disabled
-    }"
-    @click="handleClick"
-    @mouseenter="onMouseEnter"
-    @focus="onMouseEnter"
-    @blur="onMouseLeave"
-    @mouseleave="onMouseLeave"
-  >
-    <base-tooltip
-      v-if="parentMenu.$options.componentName === 'BaseMenu' && rootMenu.collapse && $slots.title"
-      effect="dark"
-      placement="right">
-      <div slot="content"><slot name="title"></slot></div>
-      <div style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;display: inline-block;box-sizing: border-box;padding: 0 20px;">
-        <slot></slot>
-      </div>
-    </base-tooltip>
-    <template v-else>
-      <slot></slot>
-      <slot name="title"></slot>
-    </template>
-  </li>
-</template>
-<script>
-import Menu from './menu-mixin';
-import BaseTooltip from '../tooltip/tooltip';
-import Emitter from '../mixin/emitter';
-
-export default {
-  name: 'BaseMenuItem',
-
-  componentName: 'BaseMenuItem',
-
-  mixins: [Menu, Emitter],
-
-  components: { BaseTooltip },
-
-  props: {
-    index: {
-      default: null,
-      validator: val => typeof val === 'string' || val === null
-    },
-    route: [String, Object],
-    disabled: Boolean
-  },
-  computed: {
-    active() {
-      return this.index === this.rootMenu.activeIndex;
-    },
-    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;
-    },
-    itemStyle() {
-      const style = {
-        color: this.active ? this.activeTextColor : this.textColor
-      };
-      if (this.mode === 'horizontal' && !this.isNested) {
-        style.borderBottomColor = this.active
-          ? (this.rootMenu.activeTextColor ? this.activeTextColor : '')
-          : 'transparent';
-      }
-      return style;
-    },
-    isNested() {
-      return this.parentMenu !== this.rootMenu;
-    }
-  },
-  methods: {
-    onMouseEnter() {
-      if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-      this.$el.style.backgroundColor = this.hoverBackground;
-    },
-    onMouseLeave() {
-      if (this.mode === 'horizontal' && !this.rootMenu.backgroundColor) return;
-      this.$el.style.backgroundColor = this.backgroundColor;
-    },
-    handleClick() {
-      if (!this.disabled) {
-        this.dispatch('BaseMenu', 'item-click', this);
-        this.$emit('click', this);
-      }
-    }
-  },
-  mounted() {
-    this.parentMenu.addItem(this);
-    this.rootMenu.addItem(this);
-  },
-  beforeDestroy() {
-    this.parentMenu.removeItem(this);
-    this.rootMenu.removeItem(this);
-  }
-};
-</script>

package/src/components/base/ui/menu/menu-mixin.js

@@ -1,44 +0,0 @@
-export default {
-  inject: ['rootMenu'],
-  computed: {
-    indexPath() {
-      const path = [this.index];
-      let parent = this.$parent;
-      while (parent.$options.componentName !== 'BaseMenu') {
-        if (parent.index) {
-          path.unshift(parent.index);
-        }
-        parent = parent.$parent;
-      }
-      return path;
-    },
-    parentMenu() {
-      let parent = this.$parent;
-      while (
-        parent &&
-        ['BaseMenu', 'BaseSubmenu'].indexOf(parent.$options.componentName) === -1
-      ) {
-        parent = parent.$parent;
-      }
-      return parent;
-    },
-    paddingStyle() {
-      if (this.rootMenu.mode !== 'vertical') return {};
-
-      let padding = 20;
-      let parent = this.$parent;
-
-      if (this.rootMenu.collapse) {
-        padding = 20;
-      } else {
-        while (parent && parent.$options.componentName !== 'BaseMenu') {
-          if (parent.$options.componentName === 'BaseSubmenu') {
-            padding += 20;
-          }
-          parent = parent.$parent;
-        }
-      }
-      return {paddingLeft: padding + 'px'};
-    }
-  }
-};

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

@@ -1,312 +0,0 @@
-<script lang="jsx" type="text/jsx">
-import emitter from '../mixin/emitter';
-import Migrating from '../mixin/migrating';
-import Menubar from '../util/menu/aria-menubar';
-import { addClass, removeClass, hasClass } from '../util/dom';
-
-export default {
-  name: 'BaseMenu',
-
-  render (h) {
-    const component = (
-      <ul
-        role="menubar"
-        key={ +this.collapse }
-        style={{ backgroundColor: this.backgroundColor || '' }}
-        class={{
-          'base-menu--horizontal': this.mode === 'horizontal',
-          'base-menu--collapse': this.collapse,
-          "base-menu": true
-        }}
-      >
-        { this.$slots.default }
-      </ul>
-    );
-
-    if (this.collapseTransition) {
-      return (
-        <transition    on-before-enter={($el) => this.beforeEnter($el)}
-                       on-enter={($el) => this.enter($el)}
-                       on-after-enter={($el) => this.afterEnter($el)}
-                       on-before-leave={($el) => this.beforeLeave($el)}
-                       on-leave={($el) => this.leave($el)}
-                       mode="out-in">
-          { component }
-        </transition>
-      );
-    } else {
-      return component;
-    }
-  },
-
-  componentName: 'BaseMenu',
-
-  mixins: [emitter, Migrating],
-
-  provide() {
-    return {
-      rootMenu: this
-    };
-  },
-
-  components: {
-  },
-
-  props: {
-    mode: {
-      type: String,
-      default: 'vertical'
-    },
-    defaultActive: {
-      type: String,
-      default: ''
-    },
-    defaultOpeneds: Array,
-    uniqueOpened: Boolean,
-    router: Boolean,
-    menuTrigger: {
-      type: String,
-      default: 'hover'
-    },
-    collapse: Boolean,
-    backgroundColor: String,
-    textColor: String,
-    activeTextColor: String,
-    collapseTransition: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      activeIndex: this.defaultActive,
-      openedMenus: (this.defaultOpeneds && !this.collapse) ? this.defaultOpeneds.slice(0) : [],
-      items: {},
-      submenus: {}
-    };
-  },
-  computed: {
-    hoverBackground() {
-      return this.backgroundColor ? this.mixColor(this.backgroundColor, 0.2) : '';
-    },
-    isMenuPopup() {
-      return this.mode === 'horizontal' || (this.mode === 'vertical' && this.collapse);
-    }
-  },
-  watch: {
-    defaultActive(value){
-      if(!this.items[value]){
-        this.activeIndex = null
-      }
-      this.updateActiveIndex(value)
-    },
-
-    defaultOpeneds(value) {
-      if (!this.collapse) {
-        this.openedMenus = value;
-      }
-    },
-
-    collapse(value) {
-      if (value) this.openedMenus = [];
-      this.broadcast('BaseSubmenu', 'toggle-collapse', value);
-    }
-  },
-  methods: {
-    updateActiveIndex(val) {
-      const item = this.items[val] || this.items[this.activeIndex] || this.items[this.defaultActive];
-      if (item) {
-        this.activeIndex = item.index;
-        this.initOpenedMenu();
-      } else {
-        this.activeIndex = null;
-      }
-    },
-
-    getMigratingConfig() {
-      return {
-        props: {
-          'theme': 'theme is removed.'
-        }
-      };
-    },
-    getColorChannels(color) {
-      color = color.replace('#', '');
-      if (/^[0-9a-fA-F]{3}$/.test(color)) {
-        color = color.split('');
-        for (let i = 2; i >= 0; i--) {
-          color.splice(i, 0, color[i]);
-        }
-        color = color.join('');
-      }
-      if (/^[0-9a-fA-F]{6}$/.test(color)) {
-        return {
-          red: parseInt(color.slice(0, 2), 16),
-          green: parseInt(color.slice(2, 4), 16),
-          blue: parseInt(color.slice(4, 6), 16)
-        };
-      } else {
-        return {
-          red: 255,
-          green: 255,
-          blue: 255
-        };
-      }
-    },
-    mixColor(color, percent) {
-      let { red, green, blue } = this.getColorChannels(color);
-      if (percent > 0) { // shade given color
-        red *= 1 - percent;
-        green *= 1 - percent;
-        blue *= 1 - percent;
-      } else { // tint given color
-        red += (255 - red) * percent;
-        green += (255 - green) * percent;
-        blue += (255 - blue) * percent;
-      }
-      return `rgb(${ Math.round(red) }, ${ Math.round(green) }, ${ Math.round(blue) })`;
-    },
-    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];
-    },
-    openMenu(index, indexPath) {
-      let openedMenus = this.openedMenus;
-      if (openedMenus.indexOf(index) !== -1) return;
-      // 将不在该菜单路径下的其余菜单收起
-      // collapse all menu that are not under current menu item
-      if (this.uniqueOpened) {
-        this.openedMenus = openedMenus.filter(index => {
-          return indexPath.indexOf(index) !== -1;
-        });
-      }
-      this.openedMenus.push(index);
-    },
-    closeMenu(index) {
-      const i = this.openedMenus.indexOf(index);
-      if (i !== -1) {
-        this.openedMenus.splice(i, 1);
-      }
-    },
-    handleSubmenuClick(submenu) {
-      const { index, indexPath } = submenu;
-      let isOpened = this.openedMenus.indexOf(index) !== -1;
-
-      if (isOpened) {
-        this.closeMenu(index);
-        this.$emit('close', index, indexPath);
-      } else {
-        this.openMenu(index, indexPath);
-        this.$emit('open', index, indexPath);
-      }
-    },
-    handleItemClick(item) {
-      const { index, indexPath } = item;
-      const oldActiveIndex = this.activeIndex;
-      const hasIndex = item.index !== null;
-
-      if (hasIndex) {
-        this.activeIndex = item.index;
-      }
-
-      this.$emit('select', index, indexPath, item);
-
-      if (this.mode === 'horizontal' || this.collapse) {
-        this.openedMenus = [];
-      }
-
-      if (this.router && hasIndex) {
-        this.routeToItem(item, (error) => {
-          this.activeIndex = oldActiveIndex;
-          if (error) {
-            // vue-router 3.1.0+ push/replace cause NavigationDuplicated error
-            // https://github.com/ElemeFE/element/issues/17044
-            if (error.name === 'NavigationDuplicated') return
-            console.error(error)
-          }
-        });
-      }
-    },
-    // 初始化展开菜单
-    // initialize opened menu
-    initOpenedMenu() {
-      const index = this.activeIndex;
-      const activeItem = this.items[index];
-      if (!activeItem || this.mode === 'horizontal' || this.collapse) return;
-
-      let indexPath = activeItem.indexPath;
-
-      // 展开该菜单项的路径上所有子菜单
-      // expand all submenus of the menu item
-      indexPath.forEach(index => {
-        let submenu = this.submenus[index];
-        submenu && this.openMenu(index, submenu.indexPath);
-      });
-    },
-    routeToItem(item, onError) {
-      let route = item.route || item.index;
-      try {
-        this.$router.push(route, () => {}, onError);
-      } catch (e) {
-        console.error(e);
-      }
-    },
-    open(index) {
-      const { indexPath } = this.submenus[index.toString()];
-      indexPath.forEach(i => this.openMenu(i, indexPath));
-    },
-    close(index) {
-      this.closeMenu(index);
-    },
-    beforeEnter(el) {
-      el.style.opacity = 0.2;
-    },
-    enter(el) {
-      addClass(el, 'base-opacity-transition');
-      el.style.opacity = 1;
-    },
-    afterEnter(el) {
-      removeClass(el, 'base-opacity-transition');
-      el.style.opacity = '';
-    },
-    beforeLeave(el) {
-      if (!el.dataset) el.dataset = {};
-      if (hasClass(el, 'base-menu--collapse')) {
-        removeClass(el, 'base-menu--collapse');
-        el.dataset.oldOverflow = el.style.overflow;
-        el.dataset.scrollWidth = el.clientWidth;
-        addClass(el, 'base-menu--collapse');
-      } else {
-        addClass(el, 'base-menu--collapse');
-        el.dataset.oldOverflow = el.style.overflow;
-        el.dataset.scrollWidth = el.clientWidth;
-        removeClass(el, 'base-menu--collapse');
-      }
-      el.style.width = el.scrollWidth + 'px';
-      el.style.overflow = 'hidden';
-    },
-
-    leave(el) {
-      addClass(el, 'horizontal-collapse-transition');
-      el.style.width = el.dataset.scrollWidth + 'px';
-    }
-  },
-  mounted() {
-    this.initOpenedMenu();
-    this.$on('item-click', this.handleItemClick);
-    this.$on('submenu-click', this.handleSubmenuClick);
-    if (this.mode === 'horizontal') {
-      new Menubar(this.$el); // eslint-disable-line
-    }
-    this.$watch('items', this.updateActiveIndex);
-  }
-};
-</script>