evui 2.0.8 → 2.1.1

package/src/components/tree/tree-node.vue

@@ -0,0 +1,214 @@
+<template>
+  <ul :class="classes">
+    <li>
+      <span
+        :class="[`${prefixCls}-arrow`, {[`${prefixCls}-arrow-disabled`]: data.disabled}]"
+        @click="handleExpand"
+      >
+        <ev-icon v-if="showArrow" :cls="arrowClasses"/>
+        <ev-loading-mask v-if="showLoading"/>
+      </span>
+      <div :class="selectedCls">
+        <ev-checkbox
+          v-if="useCheckbox"
+          v-model="data.checked"
+          type="square"
+          size="small"
+          after-type="check"
+          :indeterminate.sync="data.indeterminate"
+          :disabled="data.disabled || data.disableCheckbox"
+          @on-click="handleCheck"
+        />
+        <Render v-if="data.render" :render="data.render" :data="data" :node="node"/>
+        <Render v-else-if="isParentRender" :render="parentRender" :data="data" :node="node"/>
+        <template v-else>
+          <ev-icon
+            v-if="data.icon"
+            :class="`${prefixCls}-icon`"
+            :cls="data.icon"
+          />
+          <span
+            :class="titleClasses"
+            @contextmenu="handleContextmenu"
+            @click="handleSelect"
+            @dblclick="handleDblclick"
+          >
+            {{ data[titleKey] }}
+          </span>
+        </template>
+      </div>
+      <tree-node
+        v-for="(item, i) in children"
+        v-if="data.expand"
+        :key="i"
+        :data="item"
+        :use-checkbox="useCheckbox"
+        :children-key="childrenKey"
+        :title-key="titleKey"
+        :expand-icon="expandIcon"
+        :collapse-icon="collapseIcon"
+      />
+    </li>
+  </ul>
+</template>
+
+<script>
+import { findComponentUpward } from '@/common/utils.tree';
+import Emitter from '@/common/emitter';
+import Render from './render';
+
+const prefixCls = 'ev-tree';
+
+export default {
+  name: 'TreeNode',
+  components: {
+    Render,
+  },
+  mixins: [Emitter],
+  props: {
+    data: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    childrenKey: {
+      type: String,
+      default: 'children',
+    },
+    useCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    titleKey: {
+      type: String,
+      default: 'title',
+    },
+    expandIcon: {
+      type: String,
+      default: '',
+    },
+    collapseIcon: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      prefixCls,
+    };
+  },
+  computed: {
+    classes() {
+      return [
+        `${prefixCls}-children`,
+      ];
+    },
+    selectedCls() {
+      return [
+        `${prefixCls}-node`,
+        {
+          [`${prefixCls}-node-selected`]: this.data.selected,
+        },
+      ];
+    },
+    arrowClasses() {
+      // return this.data.expand ? 'ei-arrow-down' : 'ei-arrow-right';
+      const expandIcon = this.expandIcon ? this.expandIcon : 'ei-arrow-right';
+      const collapseIcon = this.expandIcon ? this.collapseIcon : 'ei-arrow-down';
+      return this.data.expand ? collapseIcon : expandIcon;
+    },
+    titleClasses() {
+      return [
+        `${prefixCls}-title`,
+        {
+          [`${prefixCls}-title-selected`]: this.data.selected,
+        },
+      ];
+    },
+    showArrow() {
+      return (this.data[this.childrenKey] && this.data[this.childrenKey].length) || ('loading' in this.data && !this.data.loading);
+    },
+    showLoading() {
+      return 'loading' in this.data && this.data.loading;
+    },
+    isParentRender() {
+      const Tree = findComponentUpward(this, 'Tree');
+      return Tree && Tree.render;
+    },
+    parentRender() {
+      const Tree = findComponentUpward(this, 'Tree');
+      if (Tree && Tree.render) {
+        return Tree.render;
+      }
+      return null;
+    },
+    node() {
+      const Tree = findComponentUpward(this, 'Tree');
+      if (Tree) {
+        return [Tree.flatState, Tree.flatState.find(item => item.nodeKey === this.data.nodeKey)];
+      }
+      return [];
+    },
+    children() {
+      return this.data[this.childrenKey];
+    },
+  },
+  methods: {
+    handleExpand() {
+      const item = this.data;
+      if (item.disabled) {
+        return;
+      }
+      // async loading
+      if (!item[this.childrenKey].length) {
+        const tree = findComponentUpward(this, 'Tree');
+        if (tree && tree.loadData) {
+          this.$set(this.data, 'loading', true);
+          tree.loadData(item, (children) => {
+            this.$set(this.data, 'loading', false);
+            if (children.length) {
+              this.$set(this.data, this.childrenKey, children);
+              this.$nextTick(() => this.handleExpand());
+            }
+          });
+          return;
+        }
+      }
+      if (item[this.childrenKey] && item[this.childrenKey].length) {
+        this.$set(this.data, 'expand', !this.data.expand);
+        this.dispatch('Tree', 'toggle-expand', this.data);
+      }
+    },
+    handleSelect() {
+      if (this.data.disabled) {
+        return;
+      }
+      this.dispatch('Tree', 'on-selected', this.data.nodeKey);
+    },
+    handleDblclick() {
+      if (this.data.disabled) {
+        return;
+      }
+      this.dispatch('Tree', 'on-dbl-click', this.data.nodeKey);
+    },
+    handleCheck() {
+      if (this.data.disabled) {
+        return;
+      }
+      const changes = {
+        checked: this.data.checked,
+        nodeKey: this.data.nodeKey,
+      };
+      this.dispatch('Tree', 'on-click-checkbox', changes);
+    },
+    handleContextmenu() {
+      this.dispatch('Tree', 'on-context-menu', this.data.nodeKey);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/components/tree/tree.vue

@@ -0,0 +1,296 @@
+<template>
+  <div :class="prefixCls">
+    <tree-node
+      v-for="(item, i) in stateTree"
+      :key="i"
+      :data="item"
+      :use-checkbox="useCheckbox"
+      :children-key="childrenKey"
+      :title-key="titleKey"
+      :expand-icon="expandIcon"
+      :collapse-icon="collapseIcon"
+    />
+    <div v-if="!stateTree.length" :class="[prefixCls + '-empty']">
+      {{ emptyText }}
+    </div>
+    <ev-context-menu
+      ref="contextmenu"
+      :is-use="showContextmenu"
+      :items="menuItems"
+      @click="selectContextmenu"
+      @on-context-menu="initShowContextmenu"
+    />
+  </div>
+</template>
+<script>
+import TreeNode from './tree-node';
+
+const prefixCls = 'ev-tree';
+
+export default {
+  name: 'Tree',
+  components: {
+    TreeNode,
+  },
+  props: {
+    data: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    useCheckbox: {
+      type: Boolean,
+      default: false,
+    },
+    emptyText: {
+      type: String,
+      default: 'No Data',
+    },
+    childrenKey: {
+      type: String,
+      default: 'children',
+    },
+    loadData: {
+      type: Function,
+      default: null,
+    },
+    render: {
+      type: Function,
+      default: null,
+    },
+    menuItems: {
+      type: Array,
+      default() {
+         return [];
+      },
+    },
+    titleKey: {
+      type: String,
+      default: 'title',
+    },
+    expandIcon: {
+      type: String,
+      default: '',
+    },
+    collapseIcon: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      prefixCls,
+      stateTree: this.data,
+      flatState: [],
+      showContextmenu: false,
+    };
+  },
+  watch: {
+    data: {
+      deep: true,
+      handler() {
+        this.stateTree = this.data;
+        this.flatState = this.compileFlatState();
+        this.rebuildTree();
+      },
+    },
+  },
+  created() {
+    this.flatState = this.compileFlatState();
+    this.rebuildTree();
+  },
+  mounted() {
+    this.$on('on-click-checkbox', this.handleCheck);
+    this.$on('on-selected', this.handleSelect);
+    this.$on('on-dbl-click', this.handleDblclick);
+    this.$on('on-context-menu', this.handleContextmenu);
+    this.$on('toggle-expand', node => this.$emit('on-toggle-expand', node));
+  },
+  methods: {
+    compileFlatState() { // so we have always a relation parent/children of each node
+      let keyCounter = 0;
+      const childrenKey = this.childrenKey;
+      const flatTree = [];
+      function flattenChildren(n, parent) {
+        const node = n;
+        node.nodeKey = keyCounter++;
+        flatTree[node.nodeKey] = { node, nodeKey: node.nodeKey };
+        if (typeof parent !== 'undefined') {
+          flatTree[node.nodeKey].parent = parent.nodeKey;
+          flatTree[parent.nodeKey][childrenKey].push(node.nodeKey);
+        }
+        if (node[childrenKey]) {
+          flatTree[node.nodeKey][childrenKey] = [];
+          node[childrenKey].forEach(child => flattenChildren(child, node));
+        }
+      }
+      this.stateTree.forEach((rootNode) => {
+        flattenChildren(rootNode);
+      });
+      return flatTree;
+    },
+    rebuildTree() { // only called when `data` prop changes
+      const checkedNodes = this.getCheckedNodes();
+      checkedNodes.forEach((node) => {
+        this.updateTreeDown(node, { checked: true });
+        // propagate upwards
+        const parentKey = this.flatState[node.nodeKey].parent;
+        if (!parentKey && parentKey !== 0) {
+          return;
+        }
+        const parent = this.flatState[parentKey].node;
+        const childHasCheckSetter = typeof node.checked !== 'undefined' && node.checked;
+        if (childHasCheckSetter && parent.checked !== node.checked) {
+          this.updateTreeUp(node.nodeKey); // update tree upwards
+        }
+      });
+    },
+    updateTreeUp(nodeKey) {
+      const parentKey = this.flatState[nodeKey].parent;
+      if (typeof parentKey === 'undefined') {
+        return;
+      }
+      const node = this.flatState[nodeKey].node;
+      const parent = this.flatState[parentKey].node;
+      if (node.checked === parent.checked && node.indeterminate === parent.indeterminate) {
+        return; // no need to update upwards
+      }
+      if (node.checked === true) {
+        this.$set(parent, 'checked', parent[this.childrenKey].every(n => n.checked));
+        this.$set(parent, 'indeterminate', !parent.checked);
+      } else {
+        this.$set(parent, 'checked', false);
+        this.$set(parent, 'indeterminate', parent[this.childrenKey].some(n => n.checked || node.indeterminate));
+      }
+      this.updateTreeUp(parentKey);
+    },
+    updateTreeDown(node, changes = {}) {
+      /* eslint-disable */
+      for (const key in changes) {
+        this.$set(node, key, changes[key]);
+      }
+      /* eslint-enable */
+      if (node[this.childrenKey]) {
+        node[this.childrenKey].forEach((child) => {
+          this.updateTreeDown(child, changes);
+        });
+      }
+    },
+    getSelectedNodes() {
+      /* public API */
+      return this.flatState.filter(obj => obj.node.selected).map(obj => obj.node);
+    },
+    getCheckedNodes() {
+      /* public API */
+      return this.flatState.filter(obj => obj.node.checked).map(obj => obj.node);
+    },
+    handleSelect(nodeKey) {
+      const node = this.flatState[nodeKey].node;
+      const currentSelectedKey = this.flatState.findIndex(obj => obj.node.selected);
+      let beforeSelectedNode = null;
+      if (currentSelectedKey >= 0 && currentSelectedKey !== nodeKey) {
+        beforeSelectedNode = this.flatState[currentSelectedKey].node;
+        this.$set(beforeSelectedNode, 'selected', false);
+      }
+      this.$set(node, 'selected', !node.selected);
+      this.$emit('on-select', this.getSelectedNodes(), beforeSelectedNode);
+      this.$emit('on-click', node);
+    },
+    handleDblclick(nodeKey) {
+      const node = this.flatState[nodeKey].node;
+      this.$emit('on-dblclick', node);
+    },
+    handleCheck({ checked, nodeKey }) {
+      const node = this.flatState[nodeKey].node;
+      this.$set(node, 'checked', checked);
+      this.$set(node, 'indeterminate', false);
+      this.updateTreeUp(nodeKey); // propagate up
+      this.updateTreeDown(node, { checked, indeterminate: false }); // reset `indeterminate`
+      this.$emit('on-check-change', this.getCheckedNodes());
+    },
+    handleContextmenu(nodeKey) {
+      const node = this.flatState[nodeKey].node;
+      this.$emit('before-contextmenu', node);
+      this.showContextmenu = true;
+    },
+    selectContextmenu(item) {
+      this.$emit('select-contextmenu', item);
+      this.$refs.contextmenu.hide();
+    },
+    initShowContextmenu() {
+      this.showContextmenu = false;
+    },
+  },
+};
+</script>
+<style lang="scss">
+.ev-tree {
+  li {
+    ul {
+      margin: 0;
+      padding: 0 0 0 18px;
+    }
+  }
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    li {
+      list-style: none;
+      margin: 8px 0;
+      padding: 0;
+      white-space: nowrap;
+      outline: 0;
+      text-align: start;
+      user-select: none;
+    }
+  }
+}
+.ev-tree-arrow {
+  display: inline-block;
+  text-align: center;
+  margin-right: 2px;
+  vertical-align: middle;
+  i {
+    position: relative;
+    cursor: pointer;
+    transition: all .2s ease-in-out;
+    font-size: 14px;
+    vertical-align: middle;
+  }
+}
+.ev-tree-title {
+  border-radius: 3px;
+  cursor: pointer;
+  vertical-align: middle;
+  user-select: none;
+  &:hover {
+    background-color: #eaf4fe;
+  }
+}
+.ev-tree-title-selected, .ev-tree-title-selected:hover {
+  background-color: #d5e8fc;
+}
+.ev-tree-icon {
+  vertical-align: middle;
+  font-size: 16px;
+}
+.ev-tree-node {
+  display: inline-block;
+  width: calc(100% - 21px);
+  vertical-align: middle;
+  .ev-checkbox {
+    display: inline-block;
+    float: none;
+    .ev-checkbox-label {
+      display: inline;
+      padding-left: 20px;
+    }
+  }
+  .ev-tree-node-selected, .ev-tree-node-selected:hover {
+    background-color: #d5e8fc;
+  }
+}
+</style>

package/src/components/tree-table/index.js

@@ -0,0 +1,7 @@
+import TreeTable from './tree.table';
+import util from './tree.util';
+
+export {
+  TreeTable,
+  util,
+};

package/src/components/{tree → tree-table}/tree.table.grey.css

@@ -545,8 +545,8 @@ button {
   /*display: inline-block;*/
   float: left;
   overflow: hidden;
-  background: url('../../images/evui_icon.png') no-repeat -114px -554px;
-  width: 16px;
+  background: url('../../images/evui_icon.png') no-repeat -119px -554px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -557,8 +557,8 @@ button {
   /*display: inline-block;*/
   float: left;
   overflow: hidden;
-  background: url('../../images/evui_icon.png') no-repeat -114px -570px;
-  width: 16px;
+  background: url('../../images/evui_icon.png') no-repeat -119px -570px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -570,7 +570,7 @@ button {
   float: left;
   overflow: hidden;
   /*background: url('../../images/evui_icon.png') no-repeat -114px -575px;*/
-  width: 16px;
+  width: 11px;
   height: 19px;
   margin: 0;
   /*vertical-align: middle;*/
@@ -582,7 +582,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -190px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -594,7 +594,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -349px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -606,7 +606,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -240px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   margin: 0;
   /*vertical-align: middle;*/
@@ -617,7 +617,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -268px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   margin: 0;
   /*vertical-align: middle;*/
@@ -628,7 +628,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -294px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -640,7 +640,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -217px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   cursor: pointer;
   margin: 0;
@@ -652,7 +652,7 @@ button {
   float: left;
   overflow: hidden;
   background: url('../../images/evui_icon.png') no-repeat -319px -261px;
-  width: 16px;
+  width: 11px;
   height: 19px;
   margin: 0;
   /*vertical-align: middle;*/