evui 2.0.9 → 2.0.10

package/src/components/splitter/splitter.vue

@@ -1,284 +0,0 @@
-<template>
-  <div>
-    <div
-      :class="`${type} ev-splitter ${isDragging ? 'hide' : ''}`"
-      @mousedown="onMouseDown"
-    />
-    <div
-      v-show="isDragging"
-      ref="guideline"
-      :class="`${type} ev-splitter-guideline`"
-    />
-  </div>
-</template>
-<script>
-  export default {
-    name: 'Splitter',
-    props: {
-      type: {
-        type: String,
-        default: 'hbox',
-      },
-    },
-    data() {
-      return {
-        top: 0,
-        left: 0,
-        width: 0,
-        height: 0,
-        topPad: 0,
-        leftPad: 0,
-        prevOffset: {},
-        leftItemInfo: {},
-        rightItemInfo: {},
-        isDragging: false,
-      };
-    },
-    created() {
-    },
-    mounted() {
-      this.updateItemInfo();
-    },
-    methods: {
-      updateItemInfo() {
-        const el = this.$el;
-        const rect = this.$el.getBoundingClientRect();
-        const leftEl = el.previousElementSibling;
-        const rightEl = el.nextElementSibling;
-
-        this.top = el.offsetTop;
-        this.left = el.offsetLeft;
-        this.width = rect.width;
-        this.height = rect.height;
-        this.topPad = rect.top - this.top;
-        this.leftPad = rect.left - this.left;
-
-        this.leftItemInfo.el = leftEl;
-        this.rightItemInfo.el = rightEl;
-
-        this.leftItemInfo.top = leftEl.offsetTop;
-        this.leftItemInfo.left = leftEl.offsetLeft;
-        this.leftItemInfo.width = leftEl.offsetWidth;
-        this.leftItemInfo.height = leftEl.offsetHeight;
-
-        this.rightItemInfo.top = rightEl.offsetTop;
-        this.rightItemInfo.left = rightEl.offsetLeft;
-        this.rightItemInfo.width = rightEl.offsetWidth;
-        this.rightItemInfo.height = rightEl.offsetHeight;
-      },
-      onResize(id, type) {
-        if (!type && this.uid !== id) {
-          return;
-        }
-
-        let top;
-        let left;
-
-        this.updateItemInfo();
-
-        if (this.type === 'hbox') {
-          top = this.leftItemInfo.top;
-          left = this.leftItemInfo.left + this.leftItemInfo.width;
-        } else {
-          top = this.leftItemInfo.top + this.leftItemInfo.height;
-          left = this.leftItemInfo.left;
-        }
-
-        this.$el.style.cssText += `top: ${top}px; left: ${left}px;`;
-      },
-      getBounds() {
-        const leftItemInfo = this.leftItemInfo;
-        const rightItemInfo = this.rightItemInfo;
-        let min = 0;
-        let max = 0;
-        let leftWh;
-        let rightWh;
-        let leftOffset;
-        let rightOffset;
-
-        if (this.type === 'hbox') {
-          leftWh = leftItemInfo.width;
-          rightWh = rightItemInfo.width;
-          leftOffset = leftItemInfo.left;
-          rightOffset = rightItemInfo.left;
-        } else {
-          leftWh = leftItemInfo.height;
-          rightWh = rightItemInfo.height;
-          leftOffset = leftItemInfo.top;
-          rightOffset = rightItemInfo.top;
-        }
-
-        min = Math.floor(leftWh * 0.1);
-        min = min < 60 ? 60 : min;
-        min += leftOffset;
-
-        max = Math.floor(rightWh * 0.1);
-        max = max < 60 ? 60 : max;
-        max = (rightOffset + rightWh) - max;
-
-        return {
-          min,
-          max,
-        };
-      },
-      resizeForNeighbor(changeValue) {
-        const leftItemInfo = this.leftItemInfo;
-        const rightItemInfo = this.rightItemInfo;
-        // const leftId = leftItemInfo.el.dataset.id;
-        // const rightId = rightItemInfo.el.dataset.id;
-        let leftWh;
-        let rightWh;
-        let rightOffset;
-
-        if (this.type === 'hbox') {
-          leftWh = leftItemInfo.width - changeValue;
-          rightWh = rightItemInfo.width + changeValue;
-          rightOffset = rightItemInfo.left - changeValue;
-
-          leftItemInfo.el.style.cssText += `width: ${leftWh}px; height: ${leftItemInfo.height}px`;
-          rightItemInfo.el.style.cssText += `width: ${rightWh}px; height: ${rightItemInfo.height}px`;
-
-          leftItemInfo.width = leftWh;
-          rightItemInfo.width = rightWh;
-          rightItemInfo.left = rightOffset;
-        } else {
-          leftWh = leftItemInfo.height - changeValue;
-          rightWh = rightItemInfo.height + changeValue;
-          rightOffset = rightItemInfo.top - changeValue;
-
-          leftItemInfo.el.style.cssText += `width: ${leftItemInfo.width}px; height: ${leftWh}px`;
-          rightItemInfo.el.style.cssText += `width: ${rightItemInfo.width}px; height: ${rightWh}px`;
-
-          leftItemInfo.height = leftWh;
-          rightItemInfo.height = rightWh;
-          rightItemInfo.top = rightOffset;
-        }
-
-        // if (leftId) {
-        //   this.$resizeBus.$emit('resize', leftId, this.type, leftItemInfo);
-        // }
-        //
-        // if (rightId) {
-        //   this.$resizeBus.$emit('resize', rightId, this.type, rightItemInfo);
-        // }
-      },
-      onMouseDown({ pageX: prevLeft, pageY: prevTop }) {
-        const rootEl = this.$el.parentElement;
-        const guideEl = this.$refs.guideline;
-
-        this.prevOffset = { prevLeft, prevTop };
-        this.updateItemInfo();
-
-        rootEl.addEventListener('mousemove', this.onMouseMove);
-        window.addEventListener('mouseup', this.onMouseUp);
-
-        this.isDragging = true;
-
-        guideEl.style.cssText = `top: ${this.top}px; left: ${this.left}px;`;
-      },
-      onMouseMove({ pageX: xPos, pageY: yPos }) {
-        const guideEl = this.$refs.guideline;
-        const { min, max } = this.getBounds();
-        const width = this.width;
-        const height = this.height;
-        let left = this.left;
-        let top = this.top;
-
-        if (this.type === 'hbox') {
-          left = xPos - width - this.leftPad;
-          if (min > left) {
-            left = min;
-          } else if (max < left) {
-            left = max;
-          }
-        } else {
-          top = yPos - height - this.topPad;
-          if (min > top) {
-            top = min;
-          } else if (max < top) {
-            top = max;
-          }
-        }
-
-        this.isDragging = true;
-
-        guideEl.style.cssText = `top: ${top}px; left: ${left}px;`;
-      },
-      onMouseUp({ pageX: xPos, pageY: yPos }) {
-        const rootEl = this.$el.parentElement;
-        const { min, max } = this.getBounds();
-        const { prevLeft, prevTop } = this.prevOffset;
-        let left;
-        let top;
-        let changeValue;
-        let cssText;
-
-        if (this.type === 'hbox') {
-          left = xPos - this.width - this.leftPad;
-          if (min > left) {
-            left = min;
-          } else if (max < left) {
-            left = max;
-          }
-
-          changeValue = prevLeft - xPos;
-          cssText = `left: ${left}px;`;
-        } else {
-          top = yPos - this.height - this.topPad;
-          if (min > top) {
-            top = min;
-          } else if (max < top) {
-            top = max;
-          }
-
-          changeValue = prevTop - yPos;
-          cssText = `top: ${top}px;`;
-        }
-
-        rootEl.removeEventListener('mousemove', this.onMouseMove);
-        window.removeEventListener('mouseup', this.onMouseUp);
-
-        this.isDragging = false;
-
-        this.resizeForNeighbor(changeValue);
-
-        this.$el.style.cssText += cssText;
-      },
-    },
-  };
-</script>
-<style>
-  .ev-splitter {
-    top: 0;
-    background: #dadada;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    display: block;
-  }
-  .ev-splitter-guideline {
-    position: absolute;
-    z-index: 10000;
-    background: #dadada;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  .ev-splitter.hide {
-    background: transparent;
-  }
-  .ev-splitter.hbox,
-  .ev-splitter-guideline.hbox {
-    width: 4px;
-    height: 100%;
-    cursor: col-resize;
-  }
-  .ev-splitter.vbox,
-  .ev-splitter-guideline.vbox {
-    width: 100%;
-    height: 4px;
-    cursor: row-resize;
-  }
-</style>

package/src/components/summary/index.js

@@ -1,3 +0,0 @@
-import Summary from './summary';
-
-export default Summary;

package/src/components/summary/summary.vue

@@ -1,138 +0,0 @@
-<template>
-  <div class="evui-summary-content">
-    <div
-      v-for="(menu, index) in totalStore"
-      v-show="menu.routerLink !== '/'"
-      :key="menu+index"
-      class="evui-summary-thumbnail-content"
-    >
-      <div
-        class="evui-summary-thumbnail-title"
-      >
-        <i class="fas fa-angle-down"/> &nbsp; {{ menu.name }}
-      </div>
-      <ul class="evui-summary-thumbnail-ul">
-        <li
-          v-for="(submenu, index) in menu.children"
-          :key="submenu+index"
-          class="evui-summary-thumbnail-li"
-          @click.stop="$emit('clickSummary', menu.name, submenu.name, index)"
-        >
-          <router-link :to="submenu.routerLink">
-            <div class="evui-summary-thumbnail-box-image">
-              <img
-                :alt="submenu.name"
-                :src="submenu.imgUrl || '../static/images/noImage.png'"
-                class="evui-summary-thumbnail-img"
-              >
-            </div>
-            <div>
-              <h3> {{ submenu.name }} </h3>
-              <h4> {{ submenu.content }} </h4>
-            </div>
-          </router-link>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    components: {
-    },
-    props: {
-      totalStore: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    data() {
-      return {
-      };
-    },
-    computed: {
-    },
-    methods: {
-    },
-  };
-</script>
-
-<style>
-  a, span {
-    text-decoration: none !important;
-  }
-  a:visited, a:any-link {
-    color: #000;
-  }
-  .evui-summary-content {
-    margin-top: 50px;
-  }
-  .evui-summary-thumbnail-content {
-    margin-bottom: 25px;
-  }
-  .evui-summary-thumbnail-title {
-    height: 25px;
-    width: calc(100% - 150px);
-    margin-bottom: 10px;
-    border-bottom: 2px solid #EBF4FE;
-    font-size: 16px;
-    font-weight: 800;
-    cursor: pointer;
-  }
-  .evui-summary-thumbnail-ul {
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 150px 0 10px;
-    margin: 0;
-  }
-  .evui-summary-thumbnail-ul:after {
-    flex: auto;
-  }
-  .evui-summary-thumbnail-li {
-    list-style: none;
-    float: left;
-    width: calc(16.6% - 23px);
-    margin: 10px;
-    box-shadow: 0 0 4px 4px rgba(0,0,0,0.1);
-    word-wrap: break-word;
-  }
-  .evui-summary-thumbnail-li:hover {
-    -webkit-transform: scale(1.05);
-    transform: scale(1.05);
-    cursor: pointer;
-  }
-  .evui-summary-thumbnail-li h3 {
-    padding: 5px 10px 5px 10px;
-  }
-  .evui-summary-thumbnail-li h4 {
-    padding: 5px 10px 5px 10px;
-  }
-  .evui-summary-thumbnail-box-image img {
-    width: 100%;
-    height: 150px;
-    border: 1px solid #eeeeee;
-  }
-
-  @media all and (max-width: 1400px) {
-    .evui-summary-thumbnail-li{
-      list-style: none;
-      width: calc(25% - 23px);
-      margin: 10px;
-    }
-  }
-  @media all and (max-width: 900px) {
-    .evui-summary-thumbnail-li{
-      list-style: none;
-      width: calc(50% - 23px);
-      margin: 10px;
-    }
-  }
-  @media all and (max-width: 600px) {
-    .evui-summary-thumbnail-li{
-      list-style: none;
-      width: calc(100% - 23px);
-    }
-  }
-</style>
-