evui 2.1.0 → 2.1.3

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>

package/src/components/contextmenu/index.js

@@ -0,0 +1,3 @@
+import ContextMenu from './contextmenu.wrap';
+
+export default ContextMenu;