evui 2.1.0 → 2.1.1

package/src/components/menu/index.js

@@ -1,5 +1,3 @@
 import NavMenu from './menu.nav';
-import ContextMenu from './menu.context';
-import ContextMenuChildren from './menu.context.children';
 
-export { NavMenu, ContextMenu, ContextMenuChildren };
+export default NavMenu;

package/src/components/menu/menu.nav.item.vue

@@ -0,0 +1,115 @@
+<template>
+  <div
+    v-if="!hidden"
+    :class="{ first: depth === 1 }"
+  >
+    <div
+      :class="classes"
+      @click="onClick"
+    >
+      <ev-icon
+        v-if="firstIcon"
+        :cls="firstIcon"
+        style="margin-right: 5px;"
+      />
+      {{ name }}
+      <ev-icon
+        v-if="lastIcon"
+        :cls="lastIcon"
+        style="margin-left: auto;"
+      />
+      <template v-if="children.length">
+        <ev-icon
+          v-if="isExpanded"
+          :key="'down'"
+          :cls="'ei-s ei-arrow-down'"
+          style="margin-left: auto; opacity: .5;"
+        />
+        <ev-icon
+          v-else
+          :key="'up'"
+          :cls="'ei-s ei-arrow-up'"
+          style="margin-left: auto; opacity: .5;"
+        />
+      </template>
+    </div>
+    <template v-if="isExpanded">
+      <sub-menu
+        v-if="children.length"
+        :menu="children"
+        :depth="depth + 1"
+        :selected-name="selectedName"
+        @menu-click="onEmitClick"
+      />
+    </template>
+  </div>
+</template>
+<script>
+  export default {
+    components: {
+      SubMenu: () => import('./menu.nav.sub'),
+    },
+    props: {
+      name: {
+        type: String,
+        default: '',
+      },
+      firstIcon: {
+        type: String,
+        default: '',
+      },
+      lastIcon: {
+        type: String,
+        default: '',
+      },
+      children: {
+        type: Array,
+        default: () => [],
+      },
+      selectedName: {
+        type: String,
+        default: '',
+      },
+      active: {
+        type: Boolean,
+        default: true,
+      },
+      depth: {
+        type: Number,
+        default: 1,
+      },
+      hidden: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        isExpanded: true,
+      };
+    },
+    computed: {
+      classes() {
+        return {
+          'ev-menu-item': true,
+          // bold: this.children.length,
+          first: this.depth === 1,
+          active: this.active,
+          selected: !this.children.length && this.name === this.selectedName,
+        };
+      },
+    },
+    methods: {
+      onClick() {
+        if (this.children.length) {
+          this.isExpanded = !this.isExpanded;
+        } else {
+          this.$emit('menu-click', this.name);
+        }
+      },
+      onEmitClick(name) {
+        this.$emit('menu-click', name);
+      },
+    },
+  };
+</script>

package/src/components/menu/menu.nav.sub.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul>
+    <li
+      v-for="menuItem in menu"
+      :key="menuItem.name"
+      class="ev-menu-sub"
+    >
+      <menu-item
+        v-bind="menuItem"
+        :depth="depth"
+        :selected-name="selectedName"
+        @menu-click="onClick"
+      />
+    </li>
+  </ul>
+</template>
+<script>
+  export default {
+    components: {
+      MenuItem: () => import('./menu.nav.item.vue'),
+    },
+    props: {
+      menu: {
+        type: Array,
+        default: () => [],
+      },
+      depth: {
+        type: Number,
+        default: 1,
+      },
+      selectedName: {
+        type: String,
+        default: '',
+      },
+    },
+    methods: {
+      onClick(selectedName) {
+        this.$emit('menu-click', selectedName);
+      },
+    },
+  };
+</script>

package/src/components/menu/menu.nav.vue

@@ -1,123 +1,96 @@
 <template>
-  <div class="evui-left-navigation">
-    <ul class="evui-menu">
-      <li
-        v-for="(menu, index) in store"
-        :key="menu.name + index"
-        class="evui-menu-group"
-      >
-        <div
-          class="evui-menu-group-title"
-        >
-          <i
-            v-show="menu.cls"
-            :class="menu.cls"
-          /> {{ menu.name }}
-        </div>
-        <ul
-          v-for="(submenu, index) in menu.children"
-          v-show="menu.children"
-          :key="submenu.name + index"
-          class="evui-menu-group-sub"
-        >
-          <li
-            :class="selectedMenu.name === submenu.name ? 'active' : ''"
-            class="evui-menu-item"
-            @click="setSelectedMenu(menu.name, submenu.name, index)"
-          >
-            {{ submenu.name }}
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
+  <ul
+    :style="`width: ${width}`"
+    class="ev-menu"
+  >
+    <li
+      v-for="menuItem in menu"
+      :key="menuItem.name"
+      :class="{split: menuItem.hidden === true ? false : true, 'ev-menu-sub': true}"
+    >
+      <menu-item
+        v-bind="menuItem"
+        :depth="1"
+        :selected-name="value"
+        @menu-click="onClick"
+      />
+    </li>
+  </ul>
 </template>
-
 <script>
   export default {
-    model: {
+    components: {
+      MenuItem: () => import('./menu.nav.item.vue'),
     },
     props: {
-      store: {
+      menu: {
         type: Array,
         default: () => [],
       },
+      value: {
+        type: String,
+        default: '',
+      },
+      width: {
+        type: String,
+        default: '240px',
+      },
     },
     data() {
-      return {
-        selectedMenu: {
-          parentName: '',
-          name: '',
-          index: '',
-        },
-      };
-    },
-    computed: {
+      return {};
     },
     methods: {
-      initSelectedMenu() {
-        this.selectedMenu.parentName = '';
-        this.selectedMenu.name = '';
-        this.selectedMenu.index = '';
-      },
-      setSelectedMenu(parentMenu, childMenu, childIndex) {
-        this.selectedMenu.parentName = parentMenu;
-        this.selectedMenu.name = childMenu;
-        this.selectedMenu.index = childIndex;
+      onClick(selectedName) {
+        this.$emit('input', selectedName);
       },
     },
   };
 </script>
+<style lang="scss">
+  @import '~@/styles/default';
 
-<style scoped>
-  .evui-left-navigation {
-    width: 240px;
-    border-right: 1px solid #dddee0;
-  }
-  .evui-menu {
-    display: block;
-    width: 100%;
-    background: #fff;
-    z-index: 900;
+  .ev-menu {
+    @include evThemify() {
+      color: evThemed('menu-color');
+    }
   }
-  .evui-menu-group {
-    list-style-type: none;
-  }
-  .evui-menu-group-sub {
+
+  .ev-menu-sub {
     list-style-type: none;
+
+    @include evThemify() {
+      color: evThemed('menu-color');
+    }
+
+    &.split:not(:first-child) {
+      @include evThemify() {
+        padding-top: 18px;
+        border-top: 1px solid evThemed('menu-sub-split');
+      }
+    }
+
+    & > .first {
+      padding: 0 18px;
+    }
   }
-  .evui-menu-group-title {
-    height: 48px;
-    line-height: 48px;
-    padding-left: 20px;
-    font-weight: bold;
+
+  .ev-menu-item {
+    display: flex;
+    align-items: center;
     user-select: none;
-  }
-  .evui-menu-group-title > i {
-    margin-right: 10px;
-  }
-  .evui-menu-item {
-    height: 35px;
-    line-height: 35px;
-    padding-left: 30px;
-    border-right: 2px solid transparent;
-    color: #888888;
-    background-color: #ffffff;
-    z-index: 1;
     cursor: pointer;
-  }
-  .evui-menu-item:hover {
-    border-right: 4px solid #2D89EF;
-    color: #2d8cf0;
-  }
-  .evui-menu-item.active {
-    border-right: 4px solid #2D89EF;
-    color: #f1f1f1;
-    background-color: #2D89EF;
-    transition: background-color 600ms ease;
-    z-index: 2;
-  }
-  a:hover {
-    color: #2D89EF;
+    list-style-type: none;
+    padding-bottom: 18px;
+    font-size: 13px;
+
+    &.first {
+      font-size: 16px;
+    }
+
+    &.selected {
+      @include evThemify() {
+        color: evThemed('menu-selected-bg');
+      }
+    }
   }
 </style>

package/src/components/message/index.js

@@ -0,0 +1,3 @@
+import Message from './message';
+
+export default Message;

package/src/components/message/message.js

@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import MessageVue from './message.vue';
+
+const MsgVue = Vue.extend(MessageVue);
+
+let seq = 1;
+const root = document.createElement('div');
+root.classList.add('ev-message-root');
+document.body.appendChild(root);
+
+const messageManager = {
+  items: [],
+  increaseOffsetVal: 10,
+  boxHeight: 0,
+  lastOffset: {
+    x: 0,
+    y: 0,
+  },
+  getNextOffset() {
+    return {
+      x: this.lastOffset.x,
+      y: this.lastOffset.y,
+    };
+  },
+  pushItem(item) {
+    this.items.push(item);
+    if (this.boxHeight === 0) {
+      this.boxHeight = item.height + this.increaseOffsetVal;
+    }
+    this.lastOffset.y += this.boxHeight;
+  },
+  removeItem() {
+    this.lastOffset.y -= this.boxHeight;
+  },
+  onBeforeClosed() {
+    this.removeItem();
+    let el;
+    for (let ix = 0; ix < this.items.length; ix++) {
+      el = this.items[ix].$el;
+      el.style.top = `${parseInt(el.style.top, 10) - this.boxHeight}px`;
+    }
+  },
+  closeAll() {
+    for (let ix = 0; ix < this.items.length; ix++) {
+      this.items[ix].close();
+    }
+  },
+};
+
+export default function message(options = {}) {
+  const instance = new MsgVue({
+    data: options,
+    methods: {
+      onBeforeClosed: messageManager.onBeforeClosed.bind(messageManager),
+    },
+  });
+  instance.id = `ev-message-${seq++}`;
+  instance.$mount();
+  root.appendChild(instance.$el);
+  instance.visible = true;
+  messageManager.pushItem(instance);
+  instance.offset = messageManager.getNextOffset();
+}

package/src/components/message/message.vue

@@ -0,0 +1,191 @@
+<template>
+  <transition
+    name="ev-message-fade"
+    @after-leave="onAfterLeave"
+  >
+    <div
+      v-show="visible"
+      :class="[
+        'ev-message',
+        `ev-message-${ type }`,
+        center ? 'is-center' : '',
+        showClose ? 'is-closable' : '',
+        customClass
+      ]"
+      :style="positionStyle"
+      role="alert"
+      @mouseenter="clearTimer"
+      @mouseleave="startTimer"
+    >
+      <i
+        v-if="iconClass"
+        :class="iconClass"
+      />
+      <slot>
+        <p
+          v-if="!useHTMLString"
+          class="el-message-content"
+        >
+          {{ message }}
+        </p>
+        <p
+          v-else
+          class="el-message-content"
+          v-html="message"
+        />
+      </slot>
+      <i
+        v-if="showClose"
+        class="ei ei-close"
+        @click="close"
+      />
+    </div>
+  </transition>
+</template>
+<script>
+  // const typeMap = {
+  //   info: 'info',
+  //   success: 'success',
+  //   warning: 'warning',
+  //   error: 'error',
+  // };
+  export default {
+    data() {
+      return {
+        type: 'info',
+        visible: false,
+        height: 60,
+        offset: {
+          x: 0,
+          y: 0,
+        },
+        message: '',
+        duration: 3000,
+        iconClass: '',
+        customClass: '',
+        onClose: null,
+        showClose: false,
+        closed: false,
+        timer: null,
+        useHTMLString: false,
+        center: false,
+      };
+    },
+    computed: {
+      positionStyle() {
+        return {
+          top: `${this.offset.y}px`,
+          height: `${this.height}px`,
+        };
+      },
+    },
+    watch: {
+      closed(newVal) {
+        if (newVal) {
+          this.visible = false;
+        }
+      },
+    },
+    mounted() {
+      this.startTimer();
+      document.addEventListener('keydown', this.keydown);
+    },
+    beforeDestroy() {
+      document.removeEventListener('keydown', this.keydown);
+    },
+    methods: {
+      onAfterLeave() {
+        this.$destroy(true);
+        this.$el.parentNode.removeChild(this.$el);
+      },
+      close() {
+        this.closed = true;
+        if (this.onClose) {
+          this.onClose(this);
+        }
+        if (this.onBeforeClosed) {
+          this.onBeforeClosed(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) {
+          if (!this.closed) {
+            this.close();
+          }
+        }
+      },
+    },
+  };
+</script>
+<style>
+  .ev-message-root {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .ev-message {
+    display: flex;
+    position: fixed;
+    left: 50%;
+    top: 20px;
+    z-index: 900;
+    min-width: 380px;
+    padding: 15px 15px 15px 20px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    border: 1px solid #EBEEF5;
+    background-color: #EDF2FC;
+    align-items: center;
+    overflow: hidden;
+    transform: translateX(-50%);
+    transition: opacity .3s, transform .3s, top .3s;
+  }
+  .ev-message-fade-enter,
+  .ev-message-fade-leave-active {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+  }
+  .ev-message-info {
+    background-color: #FDFDFD;
+    border-color: #EEEEEE;
+  }
+  .ev-message-success {
+    background-color: #F0F9EB;
+    border-color: #E1F3D8;
+  }
+  .ev-message-warning {
+    background-color: #FDF6EC;
+    border-color: #FAECD8;
+  }
+  .ev-message-error {
+    background-color: #FEF0F0;
+    border-color: #FDE2E2;
+  }
+  .ev-message-info .el-message-content {
+    color: #111111;
+  }
+  .ev-message-success .el-message-content {
+    color: #67C23A;
+  }
+  .ev-message-warning .el-message-content {
+    color: #E6A23C;
+  }
+  .ev-message-error .el-message-content {
+    color: #F56C6C;
+  }
+  .el-message-content {
+    width: 100%;
+  }
+</style>

package/src/components/message-box/index.js

@@ -0,0 +1,3 @@
+import MessageBox from './message-box';
+
+export default MessageBox;

package/src/components/message-box/message-box.js

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import MessageBoxVue from './message-box.vue';
+
+const MsgVue = Vue.extend(MessageBoxVue);
+
+const root = document.createElement('div');
+root.classList.add('ev-message-box-root');
+document.body.appendChild(root);
+
+let instance;
+export default function messageBox(options = {}) {
+  const dataOptions = Object.assign(
+    {
+      title: '',
+      message: '',
+      type: 'info',
+      onClosed: null,
+    },
+    options,
+  );
+
+  if (!instance) {
+    instance = new MsgVue({
+      data: dataOptions,
+    });
+    instance.$mount();
+    root.appendChild(instance.$el);
+  }
+  Object.assign(instance._data, dataOptions);
+  instance.visible = true;
+}