evui 2.0.8 → 2.1.1

package/src/components/codeview/code.vue

@@ -15,7 +15,7 @@
       ref="exampleLayer"
       class="evui-codeview-example-layer"
     >
-      <slot/>
+      <slot />
       <div
         v-if="description && isBottom"
         ref="descriptionLayer"
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div>
-      <div class="evui-codeview-split-layer"/>
+      <div class="evui-codeview-split-layer" />
       <div
         ref="codeLayer"
         class="evui-codeview-code-layer"
@@ -43,7 +43,7 @@
           :class="selectIconClasses"
           class="evui-codeview-example-bar-icon"
         >
-          <icon class="fa-sort-down"/>
+          <icon class="fa-sort-down" />
           <span
             class="evui-codeview-example-bar-span"
           >{{ txtBottomBar }}</span>
@@ -114,8 +114,8 @@
       },
     },
     mounted() {
-      const descriptionLayerHeight = this.$refs.descriptionLayer ?
-        this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
+      const descriptionLayerHeight = this.$refs.descriptionLayer
+        ? this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
       const exampleLayerHeight = this.$refs.exampleLayer.getBoundingClientRect().height;
 
       this.boxHeight = exampleLayerHeight + descriptionLayerHeight + 50;
@@ -134,8 +134,8 @@
       onBottomClick: function onBottomClick() {
         const codeLayerHeight = this.$refs.codeLayer.getBoundingClientRect().height;
         const exampleLayerHeight = this.$refs.exampleLayer.getBoundingClientRect().height;
-        const descriptionLayerHeight = this.$refs.descriptionLayer ?
-          this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
+        const descriptionLayerHeight = this.$refs.descriptionLayer
+          ? this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
         if (this.txtBottomBar === 'Expand') {
           this.txtBottomBar = 'Hide';
           this.boxHeight = codeLayerHeight + exampleLayerHeight + descriptionLayerHeight + 33;
@@ -149,64 +149,73 @@
   };
 </script>
 <style scoped>
-  .evui-codeview{
+  .evui-codeview {
     position: relative;
     width: 100%;
-    border: 1px solid #dfe6e9;
+    border: 1px solid #DFE6E9;
     margin: 5px;
     padding: 10px 10px 20px 10px;
     border-radius: 6px;
     overflow: hidden;
-    z-index: 1;
     transition: height .3s ease-in-out;
   }
-  .evui-codeview.expand{
+
+  .evui-codeview.expand {
     transition: height .3s ease-in-out;
   }
-  .evui-codeview-example-layer{
+
+  .evui-codeview-example-layer {
     position: relative;
-    padding: 0px 0px 8px 0px;
+    padding: 0 0 8px 0;
   }
-  .evui-codeview-split-layer{
+
+  .evui-codeview-split-layer {
     position: relative;
-    border-bottom: 1px solid #dfe6e9;
+    border-bottom: 1px solid #DFE6E9;
   }
-  .evui-codeview-code-layer{
+
+  .evui-codeview-code-layer {
     position: relative;
     width: 100%;
     font-size: 8px;
   }
-  .evui-codeview-example-bar{
+
+  .evui-codeview-example-bar {
     position: absolute;
-    left: 0px;
-    bottom: 0px;
+    left: 0;
+    bottom: 0;
     width: 100%;
     height: 37px;
     z-index: 10;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
     transition: background-color .2s ease-in-out;
   }
-  .evui-codeview-example-bar:hover{
+
+  .evui-codeview-example-bar:hover {
     cursor: pointer;
     background-color: rgba(255, 255, 255, 0.4);
   }
-  .evui-codeview-example:hover{
+
+  .evui-codeview-example:hover {
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   }
-  .evui-codeview-example-bar-icon{
+
+  .evui-codeview-example-bar-icon {
     width: 100%;
     height: 100%;
     line-height: 25px;
     text-align: center;
   }
-  .evui-codeview-example-bar-icon i{
+
+  .evui-codeview-example-bar-icon i {
     height: 100%;
     line-height: 30px;
     font-size: 16px;
     color: rgba(30, 101, 188, 0.5);
     transition: all .3s ease-in-out;
   }
-  .evui-codeview-example-bar-icon span{
+
+  .evui-codeview-example-bar-icon span {
     line-height: 30px;
     font-size: 13px;
     font-weight: bold;
@@ -214,21 +223,24 @@
     transition: all .3s ease-in-out;
   }
 
-  .evui-codeview-example-bar-icon:hover i, .evui-codeview-example-bar-icon:hover span{
+  .evui-codeview-example-bar-icon:hover i, .evui-codeview-example-bar-icon:hover span {
     color: rgb(30, 101, 188);
     opacity: 1;
     transform: translateX(-6px);
     transition: all .3s ease-out;
   }
-  .evui-codeview-example-bar-icon.select-down i{
+
+  .evui-codeview-example-bar-icon.select-down i {
     transform: rotate(180deg);
     transition: transform .4s ease-out;
   }
+
   .evui-codeview-example-bar-icon, .evui-codeview-example-bar-icon-span {
     user-select: none;
   }
+
   .evui-codeview-description {
-    border: 1px solid #dfe6e9;
+    border: 1px solid #DFE6E9;
     border-radius: 2px;
     padding: 5px 10px 8px 10px;
     margin: 5px 3px 5px 3px;
@@ -236,7 +248,8 @@
     text-align: left;
     line-height: 1.5;
   }
-  .evui-codeview-description span{
+
+  .evui-codeview-description span {
     font-size: 13px;
   }
 </style>

package/src/components/contextmenu/contextmenu.child.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :class="prefixEvui"
+  >
+    <context-menu
+      :depth="depth"
+      :visibility="visibility"
+      :row-index="rowIndex"
+      :items="items"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+      ContextMenu: () => import('./contextmenu'),
+    },
+    props: {
+      depth: {
+        type: Number,
+        default: 0,
+      },
+      rowKey: {
+        type: String,
+        default: '',
+      },
+      rowIndex: {
+        type: Number,
+        default: 0,
+      },
+      focusedRowKey: {
+        type: String,
+        default: '',
+      },
+      items: {
+        type: Array,
+        default() {
+          return [];
+        },
+        validator(value) {
+          return value != null && value.constructor === Array;
+        },
+      },
+    },
+    data() {
+      return {
+        prefixEvui: 'contextmenu-child',
+        visibility: 'hidden',
+      };
+    },
+    watch: {
+      focusedRowKey(value) {
+        if (value === this.rowKey) {
+          this.visibility = 'visible';
+        } else {
+          this.visibility = 'hidden';
+        }
+      },
+    },
+    methods: {
+      onClick(item) {
+        if (!item.disabled) {
+          this.$emit('click', item);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .contextmenu-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 850;
+  }
+</style>

package/src/components/contextmenu/contextmenu.vue

@@ -0,0 +1,276 @@
+<template>
+  <div
+    :style="ctxMenuStyle"
+    :class="prefixEvui"
+    @mouseleave="onMouseLeave"
+  >
+    <div
+      class="contextmenu-body"
+    >
+      <div
+        v-for="(item, rowIdx) in items"
+        :key="getRowKey(depth, rowIdx, item.text)"
+        :class="getRowCls(item)"
+        :disabled="item.disabled"
+        @click="onRowClick(item, depth, rowIdx)"
+        @mouseover="onMouseOver(depth, rowIdx, item)"
+      >
+        <ev-icon
+          v-if="item.icon"
+          :cls="`${item.icon} contextmenu-row-icon`"
+        />
+        {{ item.text }}
+        <ev-icon
+          v-if="item.items"
+          :cls="'ei-arrow-right2 menu-arrow'"
+        />
+      </div>
+    </div>
+    <context-menu-child
+      v-for="(item, rowIdx) in items"
+      v-if="item.items"
+      :key="`children_menu_${item.text}_${depth}_${rowIdx}`"
+      :depth="depth + 1"
+      :row-index="rowIdx"
+      :row-key="getRowKey(depth, rowIdx, item.text)"
+      :focused-row-key="focusedRowKey"
+      :items="item.items"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+      ContextMenuChild: () => import('./contextmenu.child'),
+    },
+    props: {
+      visibility: {
+        type: String,
+        default: 'visible',
+        validator(value) {
+          const list = ['visible', 'hidden', 'collapse', 'inherit', 'initial', 'unset'];
+          return list.indexOf(value) > -1;
+        },
+      },
+      depth: {
+        type: Number,
+        default: 0,
+      },
+      rowIndex: {
+        type: Number,
+        default: 0,
+      },
+      items: {
+        type: Array,
+        default() {
+          return [];
+        },
+        validator(value) {
+          return value != null && value.constructor === Array;
+        },
+      },
+    },
+    data() {
+      return {
+        prefixEvui: 'contextmenu',
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        clientRect: null,
+        clientRectLeft: 0,
+        isHScroll: false,
+        isVScroll: false,
+        scrollbarSize: 16,
+        directionToShow: 'right',
+        rowHeight: 29,
+        focusedRowKey: '',
+      };
+    },
+    computed: {
+      ctxMenuStyle() {
+        return this.depth === 0 ? '' : `
+            visibility: ${this.visibility};
+            top: ${this.top}px;
+            left: ${this.left}px;
+          `;
+      },
+    },
+    watch: {
+      visibility(value) {
+        if (value === 'visible') {
+          this.setPosition();
+        }
+      },
+    },
+    methods: {
+      onRowClick(item, depth, rowIdx) {
+        if (!item.disabled) {
+          this.$emit('click', {
+            ...item,
+            depth,
+            rowIdx,
+            scope: this,
+          });
+        }
+      },
+      onClick(item) {
+        if (!item.disabled) {
+          this.$emit('click', item);
+        }
+      },
+      onMouseOver(depth, rowIdx, item) {
+        if (item.disabled) {
+          this.focusedRowKey = '';
+        } else {
+          this.focusedRowKey = this.getRowKey(depth, rowIdx, item.text);
+        }
+      },
+      onMouseLeave() {
+        this.focusedRowKey = '';
+      },
+      setPosition() {
+        const parent = this.$parent.$parent;
+
+        if (!this.clientRect) {
+          this.clientRect = this.getClientRect();
+
+          if (this.clientRect) {
+            const scrollEl = document.scrollingElement
+              || document.documentElement || document.body;
+            this.isHScroll = window.innerWidth < scrollEl.scrollWidth;
+            this.isVScroll = window.innerHeight < scrollEl.scrollHeight;
+            this.width = this.clientRect.width || 0;
+            this.height = this.clientRect.height || 0;
+            this.top = this.rowIndex * this.rowHeight;
+          }
+        }
+
+        if (this.clientRect && parent) {
+          const parentClientRect = parent.getClientRect();
+          const parentClientRectLeft = parent.clientRectLeft;
+          const parentWidth = parentClientRect.width || 0;
+          const parentY = parentClientRect.y || 0;
+          const parentDirectionToShow = parent.directionToShow;
+          let top = this.top;
+          let left = 0;
+          let clientRectLeft;
+
+          if (this.depth === 1) {
+            clientRectLeft = parentWidth;
+          } else {
+            clientRectLeft = parentWidth + parentClientRectLeft;
+          }
+
+          const remainingHeight = (window.innerHeight - (top + parentY))
+            - (this.isHScroll ? this.scrollbarSize : 0);
+          const remainingWidth = (window.innerWidth - (parentClientRect.x + parentWidth))
+            - (this.isVScroll ? this.scrollbarSize : 0);
+
+          if (this.height > remainingHeight) {
+            top -= (this.height - remainingHeight);
+          }
+
+          if (parentDirectionToShow === 'left'
+            || this.width > remainingWidth) {
+            left = -this.width;
+            this.directionToShow = 'left';
+          } else {
+            left = parentWidth;
+            this.directionToShow = 'right';
+          }
+
+          this.clientRectLeft = clientRectLeft;
+          this.top = top;
+          this.left = left;
+        }
+      },
+      getClientRect() {
+        return (
+          this.$el
+          && this.$el.firstElementChild
+          && this.$el.firstElementChild.getClientRects()[0]
+        ) || {};
+      },
+      getRowCls(item) {
+        return {
+          'contextmenu-row': true,
+          'exist-arrow': !!item.items,
+          disabled: !!item.disabled,
+        };
+      },
+      getRowKey(depth, rowIndex, text) {
+        return `rowKey_${depth}_${rowIndex}_${text}`;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .contextmenu {
+    position: absolute;
+    z-index: 850;
+
+    .contextmenu-body {
+      position: relative;
+      font-size: 12px;
+
+      @include evThemify() {
+        background: evThemed('contextmenu-wrap-bg');
+        color: evThemed('contextmenu-color');
+        border: 1px solid evThemed('contextmenu-wrap-border');
+        box-shadow: 0 7px 15px 0 evThemed('contextmenu-wrap-boxshadow');
+      }
+    }
+
+    .contextmenu-row {
+      position: relative;
+      height: 29px;
+      padding: 2px 16px;
+      line-height: 22px;
+      white-space: nowrap;
+      overflow: hidden;
+
+      &:hover {
+        @include evThemify() {
+          background-color: evThemed('contextmenu-row-border');
+        }
+      }
+
+      &.disabled {
+        opacity: 0.5;
+      }
+
+      &:not(.disabled) {
+        cursor: pointer;
+      }
+
+      &.exist-arrow {
+        padding: 2px 21px 2px 16px;
+      }
+
+      .menu-arrow {
+        position: absolute;
+        top: 8px;
+        right: 4px;
+        pointer-events: none;
+      }
+
+      &:last-child {
+        border-bottom: 0;
+      }
+
+      @include evThemify() {
+        border-bottom: 1px solid evThemed('contextmenu-row-border');
+      }
+
+      &-icon {
+        padding: 0 5px 0 0;
+      }
+    }
+  }
+</style>

package/src/components/contextmenu/contextmenu.wrap.vue

@@ -0,0 +1,189 @@
+<template>
+  <div
+    v-click-outside="hide"
+    :style="ctxMenuStyle"
+    :class="prefixEvui"
+  >
+    <context-menu
+      ref="ctxMenu"
+      :depth="0"
+      :items="items"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+      ContextMenu: () => import('./contextmenu'),
+    },
+    directives: {
+      'click-outside': {
+        bind(el, binding) {
+          const contextMenuEl = el;
+          const bubble = binding.modifiers.bubble;
+          const handler = (e) => {
+            if (bubble || (contextMenuEl !== e.target && !contextMenuEl.contains(e.target))) {
+              binding.value(e);
+            }
+          };
+          contextMenuEl.vueClickOutside = handler;
+
+          document.addEventListener('mousedown', handler);
+        },
+        unbind(el) {
+          const contextMenuEl = el;
+          document.removeEventListener('mousedown', contextMenuEl.vueClickOutside);
+          contextMenuEl.vueClickOutside = null;
+        },
+      },
+    },
+    props: {
+      isUse: {
+        type: Boolean,
+        default: true,
+      },
+      x: {
+        type: Number,
+        default: 0,
+      },
+      y: {
+        type: Number,
+        default: 0,
+      },
+      items: {
+        type: Array,
+        default() {
+          return [];
+        },
+        validator(value) {
+          return value != null && value.constructor === Array;
+        },
+      },
+    },
+    data() {
+      return {
+        prefixEvui: 'ev-contextmenu',
+        top: 0,
+        left: 0,
+        width: 0,
+        height: 0,
+        visibility: 'hidden',
+      };
+    },
+    computed: {
+      ctxMenuStyle() {
+        return `
+          visibility: ${this.visibility};
+          top: ${this.top}px;
+          left: ${this.left}px;
+          `;
+      },
+    },
+    mounted() {
+      this.parentAddListener();
+      this.moveElToBody();
+
+      if (this.$el && this.$el.firstElementChild) {
+        const clientRect = this.$el.firstElementChild.getClientRects()[0] || {};
+
+        this.top = clientRect.top || 0;
+        this.left = clientRect.left || 0;
+        this.width = clientRect.width || 0;
+        this.height = clientRect.height || 0;
+      } else {
+        this.top = 0;
+        this.left = 0;
+        this.width = 0;
+        this.height = 0;
+      }
+    },
+    beforeDestroy() {
+      if (this.$el) {
+        this.$el.remove();
+      }
+      const parentEl = this.$el.parentElement;
+      if (parentEl && this.onContextMenu) {
+        parentEl.removeEventListener('contextmenu', this.onContextMenu);
+      }
+    },
+    methods: {
+      parentAddListener() {
+        const parentEl = this.$el.parentElement;
+
+        if (parentEl) {
+          parentEl.addEventListener('contextmenu', this.onContextMenu);
+        }
+      },
+      moveElToBody() {
+        document.body.appendChild(this.$el);
+      },
+      onContextMenu(e) {
+        e.preventDefault();
+        this.setPosition(e, e.clientX, e.clientY);
+        this.show();
+        this.$emit('on-context-menu');
+      },
+      onClick(item) {
+        this.$emit('click', item);
+      },
+      setPosition(e, x, y) {
+        const scrollEl = document.scrollingElement || document.documentElement || document.body;
+        const scrollbarSize = window.innerWidth - scrollEl.clientWidth;
+        const clientX = x || 0;
+        const clientY = y || 0;
+        const remainingWidth = (window.innerWidth - clientX)
+          - scrollbarSize;
+        const remainingHeight = (window.innerHeight - clientY)
+          - scrollbarSize;
+        let clientWidth = this.width;
+        let clientHeight = this.height;
+
+        const clientRects = this.$el.firstElementChild.getClientRects();
+        if (clientRects.length) {
+          const clientRect = clientRects[0];
+          clientWidth = clientRect.width;
+          clientHeight = clientRect.height;
+        }
+
+        let left = clientX + scrollEl.scrollLeft;
+        let top = clientY + scrollEl.scrollTop;
+
+        if (clientWidth > remainingWidth) {
+          left -= (clientWidth - remainingWidth);
+        }
+
+        if (clientHeight > remainingHeight) {
+          top -= (clientHeight - remainingHeight);
+        }
+
+        this.left = left;
+        this.top = top;
+      },
+      show() {
+        if (this.isUse) {
+          this.visibility = 'visible';
+        }
+      },
+      hide() {
+        const ctxMenu = this.$refs.ctxMenu;
+
+        if (ctxMenu && ctxMenu.hide) {
+          ctxMenu.hide(this.$children);
+        }
+
+        this.visibility = 'hidden';
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-contextmenu {
+    position: absolute;
+    z-index: 850;
+  }
+</style>