eoss-ui 0.3.97

package/packages/menu/src/main.vue

@@ -0,0 +1,401 @@
+<script>
+export default {
+  name: 'EsMenu',
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    titleIcons: {
+      type: Boolean,
+      default: true
+    },
+    deep: {
+      type: Boolean,
+      default: true
+    },
+    subNav: {
+      type: Boolean,
+      default: false
+    },
+    width: String,
+    height: String,
+    mode: {
+      type: String,
+      default: 'vertical'
+    },
+    collapse: Boolean,
+    defaultActive: String,
+    uniqueOpened: {
+      type: Boolean,
+      default: true
+    },
+    popperClass: String,
+    biserial: Boolean,
+    isDefault: Boolean,
+    paddingLeft: {
+      type: Number,
+      default: 14
+    }
+  },
+  computed: {
+    maxHeight() {
+      return this.height === undefined ? this.maxH : this.height;
+    },
+    maxWidth() {
+      if (this.mode === 'vertical') {
+        return this.width;
+      }
+      return this.maxW;
+    },
+    active() {
+      if (this.isDefault || !this.defaultActive) {
+        return '';
+      }
+      return this.defaultActive;
+    }
+  },
+  watch: {
+    data: {
+      immediate: true,
+      deep: true,
+      handler() {
+        if (this.mode === 'vertical') {
+          this.$nextTick(() => {
+            this.maxH = this.$refs.esMenu.$el.offsetHeight + 'px';
+          });
+        } else {
+          this.$nextTick(() => {
+            let w = 0;
+            Array.from(this.$refs.menu.$el.children).forEach(item => {
+              w += item.offsetWidth;
+            });
+            const styles = window.getComputedStyle(this.$refs.menu.$el);
+            w +=
+              parseFloat(styles.paddingLeft) + parseFloat(styles.paddingRight);
+            if (w > this.$refs.esMenu.$el.offsetWidth) {
+              this.maxW = w + 'px';
+            }
+          });
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      maxH: '',
+      maxW: '',
+      menuId: null
+    };
+  },
+  mounted() {},
+  methods: {
+    getFirst(arry) {
+      let item = arry[0];
+      if (
+        Object.prototype.hasOwnProperty.call(item, 'children') &&
+        item.children.length
+      ) {
+        return this.getFirst(item.children);
+      } else {
+        this.$emit('select', {
+          node: item,
+          mode: this.mode,
+          auto: true
+        });
+        return item.id;
+      }
+    },
+    handleSelect(key, keyPath, item) {
+      if (this.menuId !== null && keyPath.indexOf(this.menuId) == -1) {
+        this.$refs.menu.close(this.menuId);
+      } else {
+        let openedMenus = item.rootMenu.openedMenus;
+        openedMenus.forEach(item => {
+          if (keyPath.indexOf(item) == -1) {
+            this.$refs.menu.close(item);
+          }
+        });
+      }
+      this.$emit('select', {
+        key: key,
+        path: keyPath,
+        node: item.$attrs.data,
+        item: item,
+        mode: this.mode
+      });
+    },
+    handleOpen(key, keyPath) {
+      this.menuId = key;
+      this.$emit('open', { key: key, path: keyPath });
+    },
+    handleClose(key, keyPath) {
+      this.menuId = null;
+      this.$emit('close', { key: key, path: keyPath });
+    },
+    getSub(item, h, popper) {
+      if (popper) {
+        popper +=
+          this.popperClass !== undefined
+            ? ' ' + this.popperClass
+            : ` es-menu-popper-${this.mode}`;
+      } else {
+        popper =
+          this.popperClass !== undefined
+            ? this.popperClass
+            : ` es-menu-popper-${this.mode}`;
+      }
+      const title = [
+        h('i', {
+          class: [
+            item.icons
+              ? this.unicode(item.icons)
+                ? item.icons
+                : 'es-icons iconfont'
+              : 'es-icon-application',
+            'es-menu-item-icon'
+          ],
+          domProps:
+            item.icons === '' || this.unicode(item.icons)
+              ? {}
+              : { innerHTML: item.icons }
+        }),
+        h(
+          'div',
+          {
+            class: `es-menu-title-text es-menu-title-${this.mode}`
+          },
+          [
+            h(
+              'el-badge',
+              {
+                class: [
+                  'es-badge',
+                  {
+                    'es-badge-right':
+                      item.tips && typeof item.tips !== 'boolean',
+                    'es-dot-right': item.tips && typeof item.tips === 'boolean'
+                  }
+                ],
+                props:
+                  typeof item.tips === 'boolean' && item.tips
+                    ? {
+                        isDot: true
+                        //hidden: item.tips
+                      }
+                    : {
+                        value: item.tips,
+                        max: 99,
+                        hidden: !item.tips
+                      }
+              },
+              [item.text]
+            )
+          ]
+        )
+      ];
+      let doms = [
+        h('template', { slot: 'title' }, this.titleIcons ? title : [title[1]])
+      ];
+      if (this.deep && item.children && item.children.length) {
+        doms = doms.concat(
+          item.children.map((ele, index) => {
+            if (!ele) {
+              console.error(`对象子数据中第[${index}]条数据错误`, item);
+            } else {
+              return this.getSub(ele, h, popper);
+            }
+          })
+        );
+        return [
+          h(
+            'el-submenu',
+            {
+              class: ['es-submenu', `es-submenu-${this.mode}`],
+              props: {
+                popperClass: popper,
+                popperAppendToBody: true,
+                maxHeight: this.maxHeight,
+                paddingLeft: this.paddingLeft
+              },
+              attrs: { index: item.id, key: item.id }
+            },
+            doms
+          )
+        ];
+      } else if (
+        this.deep &&
+        this.mode === 'horizontal' &&
+        item.fourthTabs &&
+        item.fourthTabs.length
+      ) {
+        doms = doms.concat(
+          item.fourthTabs.map((ele, index) => {
+            if (!ele) {
+              console.error(`对象子数据中第[${index}]条数据错误`, item);
+            } else {
+              return this.getSub(ele, h, popper);
+            }
+          })
+        );
+        return [
+          h(
+            'el-submenu',
+            {
+              class: ['es-submenu', `es-submenu-${this.mode}`],
+              props: {
+                popperClass: popper,
+                popperAppendToBody: true,
+                maxHeight: this.maxHeight,
+                paddingLeft: this.paddingLeft
+              },
+              attrs: { index: item.id, key: item.id }
+            },
+            doms
+          )
+        ];
+      } else {
+        return [
+          h(
+            'el-menu-item',
+            {
+              class:
+                'es-menu-item ' + (this.deep ? '' : `es-item-${this.mode}`),
+              props: {
+                paddingLeft: this.paddingLeft
+              },
+              attrs: {
+                data: item,
+                index: item.id,
+                key: item.id
+              }
+            },
+            this.titleIcons ? title : [title[1]]
+          )
+        ];
+      }
+    },
+    unicode(res) {
+      if (!res) {
+        return false;
+      }
+      var reg = new RegExp(/^es-\S+/, 'g');
+      return res.match(reg) ? res.match(reg).length : 0;
+    }
+  },
+  render(h) {
+    let doms = [];
+    this.data.forEach(item => {
+      if (item.children && item.children.length) {
+        doms = doms.concat(this.getSub(item, h, 'es-sub-menu'));
+      } else {
+        const title = [
+          h('i', {
+            class: item.icons
+              ? this.unicode(item.icons)
+                ? item.icons
+                : 'es-icons iconfont'
+              : 'es-icon-application',
+            domProps:
+              item.icons === '' || this.unicode(item.icons)
+                ? {}
+                : { innerHTML: item.icons }
+          }),
+          h(
+            'div',
+            {
+              class: `es-menu-title-text es-menu-title-${this.mode}`
+            },
+            [
+              h(
+                'el-badge',
+                {
+                  class: [
+                    'es-badge',
+                    {
+                      'es-badge-right':
+                        item.tips && typeof item.tips !== 'boolean',
+                      'es-dot-right':
+                        item.tips && typeof item.tips === 'boolean'
+                    }
+                  ],
+                  props:
+                    typeof item.tips === 'boolean' && item.tips
+                      ? {
+                          isDot: true
+                          //hidden: item.tips
+                        }
+                      : {
+                          value: item.tips,
+                          max: 99,
+                          hidden: !item.tips
+                        }
+                },
+                [item.text]
+              )
+            ]
+          )
+        ];
+        doms.push(
+          h(
+            'el-menu-item',
+            {
+              props: {
+                paddingLeft: this.paddingLeft
+              },
+              attrs: {
+                data: item,
+                index: item.id,
+                key: item.id
+              }
+            },
+            this.titleIcons ? title : [title[1]]
+          )
+        );
+      }
+    });
+    return h(
+      'el-scrollbar',
+      {
+        ref: 'esMenu',
+        props: {
+          horizontal: this.mode === 'horizontal'
+        },
+        class: `es-menu-${this.mode}-scrollbar`
+      },
+      [
+        h(
+          'el-menu',
+          {
+            class: [
+              'es-menu',
+              `es-menu-${this.mode}`,
+              { 'es-menu-collapse': this.collapse },
+              { 'es-menu-nav': this.subNav }
+            ],
+            ref: 'menu',
+            props: {
+              defaultActive: this.active,
+              collapse: this.collapse,
+              mode: this.mode,
+              uniqueOpened: this.uniqueOpened
+            },
+            style: { width: this.maxWidth },
+            attrs: { ...this.$attrs },
+            on: {
+              ...this.$listeners,
+              open: this.handleOpen,
+              close: this.handleClose,
+              select: this.handleSelect
+            }
+          },
+          doms
+        )
+      ]
+    );
+  }
+};
+</script>

package/packages/nav/index.js

@@ -0,0 +1,5 @@
+import EsNav from './src/main';
+
+EsNav.install = Vue => Vue.component(EsNav.name, EsNav);
+
+export default EsNav;

package/packages/nav/src/main.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    ref="esNav"
+    class="es-nav"
+    :class="biserial ? 'es-nav-biserial' : ''"
+    :style="{ width: boxWidth, height: height }"
+  >
+    <div class="es-nav-initial" v-if="biserial">
+      <es-menu
+        v-bind="$attrs"
+        sub-nav
+        :data="menu"
+        :is-default="isDefault"
+        :deep="false"
+        :default-active="subActive"
+        :biserial="biserial"
+        @select="handleTrigger"
+      ></es-menu>
+    </div>
+    <div
+      class="es-nav-main"
+      :style="{ width: biserial ? width : '' }"
+      v-show="biserial ? subMenu.length : menu.length"
+    >
+      <div class="es-nav-title" v-if="showTitle">
+        <span v-show="!isCollapse">{{ headline }}</span>
+        <template v-if="showCollapse">
+          <i
+            v-show="!isCollapse"
+            class="es-icon-indent es-collapse-handle"
+            @click="handleChange"
+          ></i>
+          <i
+            v-show="isCollapse"
+            class="es-icon-increase es-collapse-handle"
+            @click="handleChange"
+          ></i>
+        </template>
+      </div>
+      <es-menu
+        v-bind="$attrs"
+        :class="biserial ? 'es-nav-biserial' : ''"
+        :data="biserial ? subMenu : menu"
+        :collapse="isCollapse"
+        :default-active="menuActive"
+        :width="menuWidth"
+        :style="{ height: menuHeight }"
+        :is-default="isDefault"
+        :biserial="biserial"
+        @select="handleSelect"
+        @open="handleOpen"
+        @close="handleClose"
+      ></es-menu>
+    </div>
+  </div>
+</template>
+<script>
+import util from 'eoss-ui/src/utils/util';
+export default {
+  name: 'EsNav',
+  inheritAttrs: false,
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+    title: {
+      type: [String, Boolean],
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '200px'
+    },
+    showCollapse: {
+      type: Boolean,
+      default: true
+    },
+    collapse: {
+      type: Boolean,
+      default: false
+    },
+    //是否双列导航
+    biserial: Boolean,
+    defaultActive: [String, Array],
+    isDefault: Boolean
+  },
+  computed: {
+    menu() {
+      return this.data;
+    },
+    showTitle() {
+      if (this.title === false && this.showCollapse === false) {
+        return false;
+      }
+      return true;
+    },
+    subActive() {
+      return this.biserial && this.defaultActive && this.defaultActive[0]
+        ? this.defaultActive[0]
+        : '';
+    },
+    menuActive() {
+      let active = '';
+      active =
+        typeof this.defaultActive === 'string'
+          ? this.defaultActive
+          : this.defaultActive &&
+            this.defaultActive[this.defaultActive.length - 1];
+      return active;
+    },
+    boxWidth() {
+      if (!this.biserial) {
+        if (this.isShow) {
+          return this.width;
+        } else {
+          return '70px';
+        }
+      }
+
+      return this.subMenu.length && this.isShow
+        ? parseInt(this.width, 10) + 70 + 'px'
+        : '70px';
+    }
+  },
+  watch: {
+    collapse(val) {
+      this.isCollapse = this.biserial ? false : val;
+    },
+    title(val) {
+      if (typeof val === 'string' && val) {
+        this.headline = val;
+      }
+    },
+    defaultActive: {
+      immediate: true,
+      deep: true,
+      handler(val) {
+        if (val && val.length) {
+          if (typeof val !== 'string' && val.length) {
+            this.isShow = true;
+            if (this.biserial) {
+              this.active = val[0];
+            } else {
+              this.active = val[val.length - 1];
+            }
+            this.menu.forEach(item => {
+              if (item.id === this.active) {
+                this.subMenu = item.children;
+                this.headline = this.title ? this.title : item.text;
+                return;
+              }
+            });
+          }
+        }
+      }
+    },
+    menu(val) {
+      if (val && val.length) {
+        if (
+          this.defaultActive &&
+          typeof this.defaultActive !== 'string' &&
+          this.defaultActive.length
+        ) {
+          this.isShow = true;
+          if (this.biserial) {
+            this.active = this.defaultActive[0];
+          } else {
+            this.active = this.defaultActive[this.defaultActive.length - 1];
+          }
+          val.forEach(item => {
+            if (item.id === this.active) {
+              this.subMenu = item.children;
+              this.headline = this.title ? this.title : item.text;
+              return;
+            }
+          });
+        }
+      } else {
+        this.subMenu = [];
+      }
+    }
+  },
+  data() {
+    return {
+      menuWidth: this.width,
+      height: '',
+      menuHeight: '',
+      active: '',
+      isCollapse: this.biserial ? false : this.collapse,
+      isShow: this.biserial ? false : true,
+      headline: this.title,
+      subMenu: []
+    };
+  },
+  mounted() {
+    this.resetHeight();
+  },
+  methods: {
+    handleChange() {
+      if (this.biserial) {
+        this.isShow = !this.isShow;
+      } else {
+        this.isCollapse = !this.isCollapse;
+        if (this.isCollapse) {
+          this.isShow = false;
+          this.menuWidth = '70px';
+        } else {
+          this.isShow = true;
+          this.menuWidth = this.width;
+        }
+      }
+    },
+    handleTrigger(res) {
+      let { node } = res;
+      if (node.children && node.children.length) {
+        this.subMenu = node.children;
+        this.headline = node.text;
+        this.isShow = true;
+      }
+      this.$emit('trigger', res);
+    },
+    handleSelect(res) {
+      this.$emit('select', res);
+    },
+    handleOpen(key, keyPath) {
+      this.$emit('open', { key: key, path: keyPath });
+    },
+    handleClose(key, keyPath) {
+      this.$emit('close', { key: key, path: keyPath });
+    },
+    resetHeight() {
+      this.$nextTick(() => {
+        let height = this.$refs.esNav.parentNode.offsetHeight;
+        Array.from(this.$refs.esNav.parentNode.children).forEach(item => {
+          if (item !== this.$refs.esNav) {
+            let mt = util.getStyle(item, 'margin-top');
+            let mb = util.getStyle(item, 'margin-bottom');
+            mt = mt ? parseInt(mt, 10) : 0;
+            mb = mb ? parseInt(mb, 10) : 0;
+            height -= item.offsetHeight + mt + mb;
+          }
+        });
+        this.height = height + 'px';
+        this.menuHeight = this.showTitle ? height - 49 + 'px' : height + 'px';
+      });
+    }
+  }
+};
+</script>

package/packages/notify/index.js

@@ -0,0 +1,5 @@
+import EsNotify from './src/main';
+
+EsNotify.install = Vue => Vue.component(EsNotify.name, EsNotify);
+
+export default EsNotify;