@v2coding/ui 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@v2coding/ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "",
 
   "main": "dist/v2coding-ui.ssr.js",

package/src/components/head-menu/head-menu.vue

@@ -1,188 +0,0 @@
-<template>
-  <el-menu
-    class="head-menu"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :mode="mode"
-    :router="router"
-    :default-active="active"
-  >
-    <menu-item v-for="item in displayMenus" :item="item" :key="item.id"/>
-  </el-menu>
-</template>
-
-<script>
-  import {mapState} from 'vuex';
-  import MenuItem from './menu-item';
-
-  export default {
-    name: 'ui-head-menu',
-    components: {MenuItem},
-    provide() {
-      return {
-        headMenu: this,
-      };
-    },
-    props: {
-      router: {
-        type: Boolean,
-        default: true,
-      },
-      defaultActive: String,
-      mode: {
-        default: 'horizontal',
-      },
-    },
-    data() {
-      return {
-        packUpWidth: 0,
-      };
-    },
-    computed: {
-      ...mapState(['menus']),
-      headMenu() {
-        // eslint-disable-next-line
-        return this.menus.filter(menu => [1, 2].includes(menu.type)).map(({children, ...menu}) => menu);
-      },
-      active() {
-        if (!this.router) {
-          return this.defaultActive;
-        }
-        const currentPath = this.$route.path;
-        const isHeadRoute = this.headMenu.some(menu => menu.url === currentPath);
-        if (isHeadRoute) {
-          return currentPath;
-        }
-        const currentHeadMenu = this.getCurrentHeadMenu(currentPath, this.menus);
-        return currentHeadMenu && (currentHeadMenu.path || currentHeadMenu.url);
-      },
-      menuWidth() {
-        return this.headMenu.reduce((total, item) => {
-          return total + (item.name || '').split('').length * 16 + 25 * 2; // 16:字体大小值; 25:左右padding/margin值
-        }, 60); // 100:菜单左边的margin值
-      },
-      packUpIndex() {
-        if (this.packUpWidth <= 0) {
-          return -1;
-        }
-        let index = -1;
-        let width = this.packUpWidth + 130; // 50:更多下拉菜单所占宽度
-        for(let i = this.headMenu.length - 1; i >= 0; i--) {
-          const item = this.headMenu[i];
-          const currentWidth = (item.name || '').split('').length * 16 + 25 * 2;
-          if (currentWidth >= width) {
-            index = i - 1;
-            break;
-          }
-          width = width - currentWidth;
-        }
-        return Math.max(0, index);
-      },
-      displayMenus() {
-        if (this.packUpIndex === -1) {
-          return this.headMenu;
-        }
-        const menus = this.headMenu.slice(0, this.packUpIndex);
-        const moreMenus = this.headMenu.slice(this.packUpIndex);
-        menus.push({
-          id: 'more',
-          name: '更多菜单',
-          children: moreMenus,
-        });
-        return menus;
-      },
-    },
-    mounted() {
-      window.addEventListener('resize', this.onResize);
-      this.onResize();
-
-      const logo = document.querySelector('.page-header > .logo');
-      logo && logo.addEventListener('load', () => this.onResize());
-    },
-    beforeDestroy() {
-      window.removeEventListener('resize', this.onResize);
-    },
-    methods: {
-      onResize() {
-        clearTimeout(this.timer);
-        this.timer = setTimeout(() => {
-          const headerWidth = document.documentElement.clientWidth;
-          const logoEl = document.querySelector('.page-header > .logo');
-          const titleEl = document.querySelector('.page-header > .title');
-          const messageEl = document.querySelector('.page-header > .screen');
-          const usernameEl = document.querySelector('.page-header > .username');
-          const logoWidth = (logoEl && logoEl.offsetWidth || 0) + 20; // 20 margin
-          const titleWidth = titleEl && titleEl.offsetWidth || 0;
-          const messageElWidth = messageEl && messageEl.offsetWidth || 0;
-          const usernameWidth = usernameEl && usernameEl.offsetWidth || 0;
-          const allowedMenuWidth = headerWidth - 60 - logoWidth - titleWidth - messageElWidth - usernameWidth;
-          this.packUpWidth = Math.max(0, this.menuWidth - allowedMenuWidth);
-        }, 50);
-      },
-      getCurrentHeadMenu(path, menus) {
-        if (!Array.isArray(menus) || menus.length <= 0) {
-          return undefined;
-        }
-        return menus.find(menu => {
-          const isMatched = (menu.children || []).some(childMenu => (childMenu.path || childMenu.url) === path);
-          if (isMatched) {
-            return true;
-          }
-          return this.getCurrentHeadMenu(path, menu.children);
-        });
-      },
-    },
-  };
-</script>
-
-<style lang="scss">
-
-  .head-menu.el-menu {
-    background-color: transparent;
-    border-bottom: none;
-
-    > .el-menu-item,
-    > .el-submenu .el-submenu__title {
-      font-size: 16px;
-      font-weight: 400;
-      color: inherit;
-      height: var(--header-height);
-      line-height: var(--header-height);
-      padding: 0 25px;
-      border: none;
-      box-sizing: border-box;
-      transition: all 0.2s ease-in-out;
-
-      span {
-        vertical-align: unset;
-      }
-
-      i {
-        width: 20px;
-        font-size: 14px;
-      }
-    }
-
-    > .el-menu-item:not(.is-disabled):not(.is-active):hover,
-    > .el-menu-item:not(.is-disabled):not(.is-active):focus,
-    > .el-submenu:not(.is-disabled):not(.is-active):hover .el-submenu__title,
-    > .el-submenu:not(.is-disabled):not(.is-active):focus .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.3);
-    }
-
-    > .el-menu-item.is-active,
-    > .el-submenu.is-active .el-submenu__title {
-      color: inherit;
-      background-color: rgba(0, 146, 63, 0.6);
-    }
-
-    .el-submenu__title i {
-      color: inherit;
-    }
-
-    .el-menu--popup {
-
-    }
-  }
-</style>

package/src/components/head-menu/menu-item.vue

@@ -1,80 +0,0 @@
-<script type="text/jsx">
-  export default {
-    name: 'head-menu-submenu',
-    inject: ['headMenu'],
-    props: {
-      item: Object,
-    },
-    computed: {
-      isLeaf() {
-        const {children} = this.item;
-        return !Array.isArray(children) || children.length <= 0;
-      },
-      index() {
-        const {url, id} = this.item;
-        if (this.isRouter) {
-          return url || id + '';
-        }
-        return id + '';
-      },
-      route() {
-        const {url} = this.item;
-        return url;
-      },
-      isRouter() {
-        return this.headMenu.router;
-      },
-      theme() {
-        return this.headMenu.theme;
-      },
-      popperClass() {
-        return ['nav-menu-submenu-popup', this.theme].join(' ');
-      },
-    },
-    render(createElement) {
-      if (this.isLeaf) {
-        return createElement('el-menu-item', {props: {index: this.index, route: this.route}}, [
-            createElement('template', {slot: 'title'}, [this.item.name]),
-        ]);
-      }
-      return createElement('el-submenu', {props: {index: this.index, popperClass: this.popperClass, popperAppendToBody: false}}, [
-          createElement('template', {slot: 'title'}, [this.item.name]),
-          ...this.item.children.map(child => createElement('head-menu-submenu', {key: child.id, props: {item: child}})),
-      ]);
-    },
-  };
-</script>
-<style lang="less">
-  .el-menu--collapse .el-menu-item [class^=el-icon-],
-  .el-menu--collapse .el-submenu .el-submenu__title [class^=el-icon-] {
-    margin: 0;
-    vertical-align: middle;
-    width: 24px;
-    text-align: center
-  }
-
-  .el-menu--collapse .el-menu-item .el-submenu__icon-arrow,
-  .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
-    display: none
-  }
-
-  .el-menu--collapse .el-menu-item span,
-  .el-menu--collapse .el-submenu .el-submenu__title span {
-    height: 0;
-    width: 0;
-    overflow: hidden;
-    visibility: hidden;
-    display: inline-block
-  }
-
-  .nav-menu-submenu-popup {
-
-    .el-menu-item,
-    .el-submenu__title {
-      height: 40px;
-      line-height: 40px;
-      font-size: 12px;
-    }
-  }
-
-</style>