cbvirtua 1.0.57 → 1.0.58

package/src/packages/menu/src/menu-item-group.vue

@@ -1,45 +0,0 @@
-<template>
-  <li class="el-menu-item-group">
-    <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
-      <template v-if="!$slots.title">{{title}}</template>
-      <slot v-else name="title"></slot>
-    </div>
-    <ul>
-      <slot></slot>
-    </ul>
-  </li>
-</template>
-<script>
-  export default {
-    name: 'ElMenuItemGroup',
-
-    componentName: 'ElMenuItemGroup',
-
-    inject: ['rootMenu'],
-    props: {
-      title: {
-        type: String
-      }
-    },
-    data() {
-      return {
-        paddingLeft: 20
-      };
-    },
-    computed: {
-      levelPadding() {
-        let padding = 20;
-        let parent = this.$parent;
-        if (this.rootMenu.collapse) return 20;
-        while (parent && parent.$options.componentName !== 'ElMenu') {
-          if (parent.$options.componentName === 'ElSubmenu') {
-            padding += 20;
-          }
-          parent = parent.$parent;
-        }
-        return padding;
-      }
-    }
-  };
-</script>
-

package/src/packages/menu/src/menu-item.vue

@@ -1,112 +0,0 @@
-<template>
-  <li class="el-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"
-  >
-    <el-tooltip
-      v-if="parentMenu.$options.componentName === 'ElMenu' && 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>
-    </el-tooltip>
-    <template v-else>
-      <slot></slot>
-      <slot name="title"></slot>
-    </template>
-  </li>
-</template>
-<script>
-  import Menu from './menu-mixin';
-  import ElTooltip from 'element-ui/packages/tooltip';
-  import Emitter from 'element-ui/src/mixins/emitter';
-
-  export default {
-    name: 'ElMenuItem',
-
-    componentName: 'ElMenuItem',
-
-    mixins: [Menu, Emitter],
-
-    components: { ElTooltip },
-
-    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('ElMenu', '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/packages/menu/src/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 !== 'ElMenu') {
-        if (parent.index) {
-          path.unshift(parent.index);
-        }
-        parent = parent.$parent;
-      }
-      return path;
-    },
-    parentMenu() {
-      let parent = this.$parent;
-      while (
-        parent &&
-        ['ElMenu', 'ElSubmenu'].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 !== 'ElMenu') {
-          if (parent.$options.componentName === 'ElSubmenu') {
-            padding += 20;
-          }
-          parent = parent.$parent;
-        }
-      }
-      return {paddingLeft: padding + 'px'};
-    }
-  }
-};

package/src/packages/menu/src/menu.vue

@@ -1,325 +0,0 @@
-<script type="text/jsx">
-  import emitter from 'element-ui/src/mixins/emitter';
-  import Migrating from 'element-ui/src/mixins/migrating';
-  import Menubar from 'element-ui/src/utils/menu/aria-menubar';
-  import { addClass, removeClass, hasClass } from 'element-ui/src/utils/dom';
-
-  export default {
-    name: 'ElMenu',
-
-    render (h) {
-      const component = (
-        <ul
-          role="menubar"
-          key={ +this.collapse }
-          style={{ backgroundColor: this.backgroundColor || '' }}
-          class={{
-            'el-menu--horizontal': this.mode === 'horizontal',
-            'el-menu--collapse': this.collapse,
-            "el-menu": true
-          }}
-        >
-          { this.$slots.default }
-        </ul>
-      );
-
-      if (this.collapseTransition) {
-        return (
-          <el-menu-collapse-transition>
-            { component }
-          </el-menu-collapse-transition>
-        );
-      } else {
-        return component;
-      }
-    },
-
-    componentName: 'ElMenu',
-
-    mixins: [emitter, Migrating],
-
-    provide() {
-      return {
-        rootMenu: this
-      };
-    },
-
-    components: {
-      'el-menu-collapse-transition': {
-        functional: true,
-        render(createElement, context) {
-          const data = {
-            props: {
-              mode: 'out-in'
-            },
-            on: {
-              beforeEnter(el) {
-                el.style.opacity = 0.2;
-              },
-
-              enter(el) {
-                addClass(el, 'el-opacity-transition');
-                el.style.opacity = 1;
-              },
-
-              afterEnter(el) {
-                removeClass(el, 'el-opacity-transition');
-                el.style.opacity = '';
-              },
-
-              beforeLeave(el) {
-                if (!el.dataset) el.dataset = {};
-
-                if (hasClass(el, 'el-menu--collapse')) {
-                  removeClass(el, 'el-menu--collapse');
-                  el.dataset.oldOverflow = el.style.overflow;
-                  el.dataset.scrollWidth = el.clientWidth;
-                  addClass(el, 'el-menu--collapse');
-                } else {
-                  addClass(el, 'el-menu--collapse');
-                  el.dataset.oldOverflow = el.style.overflow;
-                  el.dataset.scrollWidth = el.clientWidth;
-                  removeClass(el, 'el-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';
-              }
-            }
-          };
-          return createElement('transition', data, context.children);
-        }
-      }
-    },
-
-    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('ElSubmenu', '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);
-      }
-    },
-    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>