evui 3.4.207 → 3.4.209

package/src/components/tree/Tree.vue

@@ -1,338 +0,0 @@
-<template>
-  <div class="ev-tree-view">
-    <tree-node
-      v-for="(item, i) in treeNodeData"
-      :key="i"
-      :data="item"
-      :use-checkbox="useCheckbox"
-      :expand-icon="expandIcon"
-      :collapse-icon="collapseIcon"
-      :comp="component"
-      @update-checked-info="updateCheckedInfo"
-      @click-node="clickContent"
-      @dblclick-node="dblClickContent"
-      @show-context-menu="getContextMenuFlag"
-      @contextmenu.prevent="showContextMenu"
-    />
-    <div v-if="isShowEmptyText">{{ emptyText }}</div>
-    <ev-context-menu
-      v-if="contextMenuItems.length"
-      ref="contextMenu"
-      :items="contextMenuItems"
-    />
-  </div>
-</template>
-
-<script>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from 'vue';
-import TreeNode from './TreeNode';
-
-export default {
-  name: 'EvTree',
-  components: { TreeNode },
-  props: {
-    data: {
-      type: Array,
-      default: () => [],
-    },
-    useCheckbox: {
-      type: Boolean,
-      default: false,
-    },
-    emptyText: {
-      type: String,
-      default: 'No Data',
-    },
-    expandIcon: {
-      type: String,
-      default: '',
-    },
-    collapseIcon: {
-      type: String,
-      default: '',
-    },
-    contextMenuItems: {
-      type: Array,
-      default: () => [],
-    },
-    searchWord: {
-      type: String,
-      default: '',
-    },
-    searchIncludeChildren: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    'click-node': null,
-    'dblclick-node': null,
-    check: Array,
-  },
-  setup(props, { emit }) {
-    const treeNodeData = ref(props.data);
-    let allNodeInfo = [];
-    const contextMenu = ref(null);
-    let contextMenuFlag = false; // flag for showing contextMenu or not
-    const component = TreeNode;
-
-    function updateTreeUp(nodeKey) {
-      const parentKey = allNodeInfo[nodeKey].parent;
-      if (typeof parentKey === 'undefined') {
-        return;
-      }
-      const node = allNodeInfo[nodeKey].node;
-      const parent = allNodeInfo[parentKey].node;
-      if (node.checked === parent.checked && node.indeterminate === parent.indeterminate) {
-        return; // no need to update upwards
-      }
-
-      if (node.checked) {
-        parent.checked = parent.children.every(n => n.checked);
-        parent.indeterminate = !parent.checked;
-      } else {
-        const fn = n => n.checked || node.indeterminate;
-        parent.checked = false;
-        parent.indeterminate = parent.children.some(fn);
-      }
-      updateTreeUp(parentKey);
-    }
-
-    function updateTreeDown(node, changes = {}) {
-      const keys = Object.keys(changes);
-      for (let ix = 0; ix < keys.length; ix++) {
-        node[keys[ix]] = changes[keys[ix]]; // eslint-disable-line no-param-reassign
-      }
-
-      if (node.children) {
-        node.children.forEach((child) => {
-          updateTreeDown(child, changes);
-        });
-      }
-    }
-
-    function getAllNodeInfo() { // return the array to easily search parents and children
-      let keyCounter = 0;
-      const flatTree = [];
-      const valueArr = [];
-
-      function flattenChildren(n, parent) {
-        const node = n;
-        node.nodeKey = keyCounter++;
-
-        // add 'selected' property for highlighting clicked node
-        if (!Object.hasOwnProperty.call(node, 'selected')) {
-          node.selected = false;
-        }
-
-        // add 'visible' property for filtering node
-        if (!Object.hasOwnProperty.call(node, 'visible')) {
-          node.visible = true;
-        }
-
-        // check 'value' property and add nodeKey if same value already exists
-        if ('value' in node && valueArr.includes(node.value)) {
-          console.warn('The \'value\' of data should be unique.');
-          node.value += node.nodeKey;
-        } else if (!('value' in node)) {
-          node.value = node.title + node.nodeKey;
-        }
-        valueArr.push(node.value);
-
-        flatTree[node.nodeKey] = { node, nodeKey: node.nodeKey };
-        if (typeof parent !== 'undefined') {
-          flatTree[node.nodeKey].parent = parent.nodeKey;
-          flatTree[parent.nodeKey].children.push(node.nodeKey);
-        }
-        if (node.children) {
-          flatTree[node.nodeKey].children = [];
-          node.children.forEach(child => flattenChildren(child, node));
-        }
-      }
-
-      if (treeNodeData.value.length) {
-        flattenChildren(treeNodeData.value[0]);
-      }
-      return flatTree;
-    }
-
-    allNodeInfo = getAllNodeInfo();
-
-    function getCheckedNodes() {
-      return allNodeInfo.filter(obj => obj.node.checked).map(obj => obj.node);
-    }
-
-    function rebuildTree() { // rebuild the tree through checked nodes
-      const checkedNodes = getCheckedNodes();
-      checkedNodes.forEach((node) => {
-        updateTreeDown(node, { checked: true });
-        // propagate upwards
-        const parentKey = allNodeInfo[node.nodeKey].parent;
-        if (!parentKey && parentKey !== 0) {
-          return;
-        }
-        const parent = allNodeInfo[parentKey].node;
-        const childHasCheckSetter = typeof node.checked !== 'undefined' && node.checked;
-        if (childHasCheckSetter && parent.checked !== node.checked) {
-          updateTreeUp(node.nodeKey); // update tree upwards
-        }
-      });
-    }
-
-    function updateCheckedInfo({ nodeKey, isChecked }) {
-      const node = allNodeInfo[nodeKey].node;
-      node.checked = isChecked;
-      node.indeterminate = false;
-      updateTreeUp(nodeKey); // propagate up
-      updateTreeDown(node, { checked: isChecked, indeterminate: false }); // reset `indeterminate`
-      const checkedNodes = getCheckedNodes();
-      emit('check', checkedNodes);
-      rebuildTree();
-    }
-
-    function clickContent(nodeKey) {
-      const clickedNode = allNodeInfo[nodeKey].node;
-      // reset other selected node to false
-      for (let ix = 0; ix < allNodeInfo.length; ix++) {
-        if (allNodeInfo[ix].node.nodeKey !== nodeKey) {
-          allNodeInfo[ix].node.selected = false;
-        }
-      }
-      emit('click-node', { title: clickedNode.title, value: clickedNode.value });
-    }
-
-    function dblClickContent(nodeKey) {
-      const dbClickedContent = allNodeInfo[nodeKey].node;
-      emit('dblclick-node', { title: dbClickedContent.title, value: dbClickedContent.value });
-    }
-
-    const showContextMenu = (e) => {
-      if (props.contextMenuItems.length && contextMenuFlag) {
-        contextMenu.value.show(e);
-        contextMenuFlag = false; // reset contextmenuFlag
-      }
-    };
-
-    const getContextMenuFlag = (isShow, e) => {
-      contextMenuFlag = isShow;
-      showContextMenu(e);
-    };
-
-    const isIncluded = (value, searchWord) => value.toLowerCase()
-        .includes(searchWord.toLowerCase());
-
-    const makeChildrenVisible = (node) => {
-      if (node.children) {
-        const isSearchedChildren = !!(node.children
-            .filter(child => isIncluded(child.title, props.searchWord))?.length);
-        node.children.forEach((child) => {
-          makeChildrenVisible(child);
-          child.visible = (isSearchedChildren && isIncluded(child.title, props.searchWord))
-              || !isSearchedChildren;
-        });
-      }
-    };
-
-    function makeChildrenInvisible(node) {
-      if (node.children) {
-        node.children.forEach((child) => {
-          child.visible = false; // eslint-disable-line no-param-reassign
-          makeChildrenInvisible(child);
-        });
-      }
-    }
-
-    function makeParentVisible(parentKey) {
-      if (!parentKey && parentKey !== 0) {
-        return;
-      }
-
-      const parent = allNodeInfo[parentKey];
-      parent.node.visible = true;
-      if (parent.parent !== undefined) {
-        makeParentVisible(parent.parent);
-      }
-    }
-
-    function filterNode(value) {
-      allNodeInfo.forEach((nodeObj) => {
-        const node = nodeObj.node;
-        node.visible = false;
-      });
-
-      const filteredNodes = allNodeInfo
-          .filter(nodeObj => isIncluded(nodeObj.node.title, value));
-
-      filteredNodes.forEach((nodeObj) => {
-        const node = nodeObj.node;
-        node.visible = true;
-        if (props.searchIncludeChildren) {
-          makeChildrenVisible(node);
-        } else {
-          // make children invisible, traverse down
-          makeChildrenInvisible(node);
-        }
-        // make parent visible, traverse up
-        const parentKey = allNodeInfo[node.nodeKey].parent;
-        makeParentVisible(parentKey);
-      });
-    }
-
-    const isShowEmptyText = computed(() => !treeNodeData.value.length
-        || treeNodeData.value.every(node => !node.visible));
-
-    watch(() => props.data, (newData) => {
-      treeNodeData.value = newData;
-      allNodeInfo = getAllNodeInfo();
-    }, {
-      deep: true,
-    });
-
-
-    let timer;
-    watch(() => props.searchWord, (newSearchWord) => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-      timer = setTimeout(() => {
-        if (newSearchWord) {
-          filterNode(newSearchWord);
-        } else {
-          allNodeInfo.forEach((nodeObj) => {
-            const node = nodeObj.node;
-            node.visible = true;
-          });
-        }
-      }, 200);
-    });
-
-    onMounted(() => {
-      rebuildTree();
-      const checkedNodes = getCheckedNodes();
-      if (checkedNodes.length) {
-        emit('check', checkedNodes);
-      }
-    });
-    onBeforeUnmount(() => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    });
-
-    return {
-      treeNodeData,
-      contextMenu,
-      component,
-      isShowEmptyText,
-      updateCheckedInfo,
-      clickContent,
-      dblClickContent,
-      showContextMenu,
-      getContextMenuFlag,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-</style>

package/src/components/tree/TreeNode.vue

@@ -1,293 +0,0 @@
-<template>
-  <ul
-    v-show="treeData.visible"
-    class="ev-tree-children"
-  >
-    <li>
-      <span
-        :class="{ expand: treeData.expand }"
-        class="ev-tree-toggle"
-      >
-        <ev-icon
-          v-if="showExpandIcon"
-          :icon="expandIconClasses"
-          @click="handleExpand"
-        />
-      </span>
-      <div class="ev-tree-node">
-        <ev-checkbox
-          v-if="useCheckbox"
-          v-model="treeData.checked"
-          :indeterminate="treeData.indeterminate"
-          :disabled="treeData.disabled"
-          @change="handleCheck(treeData.checked, treeData.nodeKey)"
-        />
-        <ev-icon
-          v-if="treeData.iconClass"
-          :icon="treeData.iconClass"
-          class="ev-tree-icon"
-        />
-        <span
-          :class="{
-            'ev-tree-title-selected': treeData.selected,
-            'ev-tree-title-disabled': treeData.disabled,
-          }"
-          class="ev-tree-title"
-          @contextmenu="handleContextmenu"
-          @click="clickTreeContent"
-          @dblclick="dblClickTreeContent"
-        >
-          {{ treeData.title }}
-        </span>
-      </div>
-      <transition-group name="fade">
-        <component
-          :is="comp"
-          v-for="(child, i) in childrenInfo"
-          v-if="treeData.expand"
-          :key="`${child.value}-${i}`"
-          :data="child"
-          :use-checkbox="useCheckbox"
-          :expand-icon="expandIcon"
-          :collapse-icon="collapseIcon"
-          :comp="comp"
-          @update-checked-info="emitCheckedInfo"
-          @click-node="emitClickedContent"
-          @dblclick-node="emitDblClickedContent"
-          @show-context-menu="emitContextMenuFlag"
-        />
-      </transition-group>
-    </li>
-  </ul>
-</template>
-
-<script>
-import { reactive, computed } from 'vue';
-
-export default {
-  name: 'TreeNode',
-  props: {
-    data: {
-      type: Object,
-      require: true,
-      default: () => ({}),
-    },
-    useCheckbox: {
-      type: Boolean,
-      default: false,
-    },
-    expandIcon: {
-      type: String,
-      default: '',
-    },
-    collapseIcon: {
-      type: String,
-      default: '',
-    },
-    comp: {
-      type: Object,
-      default: () => {},
-    },
-  },
-  emits: {
-    'update-checked-info': null,
-    'click-node': null,
-    'dblclick-node': null,
-    'show-context-menu': null,
-  },
-  setup(props, { emit }) {
-    const treeData = reactive(props.data);
-    const showExpandIcon = computed(() =>
-      (props.data.children && props.data.children.length));
-
-    const expandIconClasses = computed(() => {
-      const expandIcon = props.expandIcon ? props.expandIcon : 'ev-icon-s-play';
-      const collapseIcon = props.expandIcon ? props.collapseIcon : 'ev-icon-s-play';
-      return props.data.expand ? collapseIcon : expandIcon;
-    });
-
-    const childrenInfo = computed(() => props.data.children);
-
-    function handleCheck(isChecked, nodeKey) {
-      emit('update-checked-info', { nodeKey, isChecked });
-    }
-
-    function emitCheckedInfo({ nodeKey, isChecked }) {
-      emit('update-checked-info', { nodeKey, isChecked });
-    }
-
-    function handleExpand() {
-      treeData.expand = !treeData.expand;
-    }
-
-    function clickTreeContent() {
-      if (treeData.disabled) {
-        return;
-      }
-      treeData.selected = !treeData.selected; // for highlighting clicked title
-      emit('click-node', treeData.nodeKey);
-    }
-
-    function emitClickedContent(nodeKey) {
-      emit('click-node', nodeKey);
-    }
-
-    function dblClickTreeContent() {
-      if (treeData.disabled) {
-        return;
-      }
-      emit('dblclick-node', treeData.nodeKey);
-    }
-
-    function emitDblClickedContent(nodeKey) {
-      emit('dblclick-node', nodeKey);
-    }
-
-    function handleContextmenu(e) {
-      emit('show-context-menu', true, e);
-    }
-
-    const emitContextMenuFlag = (isShow, e) => {
-      emit('show-context-menu', isShow, e);
-    };
-
-    return {
-      expandIconClasses,
-      showExpandIcon,
-      treeData,
-      childrenInfo,
-      handleCheck,
-      emitCheckedInfo,
-      handleExpand,
-      clickTreeContent,
-      emitClickedContent,
-      dblClickTreeContent,
-      emitDblClickedContent,
-      handleContextmenu,
-      emitContextMenuFlag,
-    };
-  },
-};
-</script>
-
-<style lang="scss">
-$expand-toggle-icon-size: 13px;
-
-@import '../../style/index.scss';
-
-.ev-tree-view {
-  li {
-    ul {
-      padding: 0 0 0 18px;
-      margin: 0;
-    }
-  }
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    font-size: 12px;
-
-    li {
-      list-style: none;
-      padding: 3px 0;
-      margin: 0;
-      text-align: start;
-      white-space: nowrap;
-    }
-  }
-}
-
-.ev-tree-toggle {
-  display: inline-block;
-  width: $expand-toggle-icon-size; // icon font size와 동일
-  margin-right: 2px;
-  text-align: center;
-  vertical-align: middle;
-
-  .ev-icon-s-play {
-    transition-property: transform;
-    transition-duration: 0.4s;
-  }
-
-  &.expand > .ev-icon-s-play {
-    transform: rotate(90deg);
-  }
-
-  i {
-    display: inline-block;
-    position: relative;
-    cursor: pointer;
-    font-size: $expand-toggle-icon-size;
-    vertical-align: middle;
-  }
-}
-
-.ev-tree-title {
-  cursor: pointer;
-  vertical-align: middle;
-
-  &:hover, &-selected {
-    @include evThemify() {
-      color: evThemed('primary') !important;
-    }
-  }
-
-  &-disabled, &-disabled:hover {
-    cursor: not-allowed;
-    user-select: none;
-
-    @include evThemify() {
-      color: evThemed('disabled') !important;
-    }
-  }
-}
-
-.ev-tree-icon {
-  margin: 0 5px;
-  font-size: 16px;
-  vertical-align: middle;
-}
-
-.ev-tree-node {
-  display: inline-block;
-  width: calc(100% - (#{$expand-toggle-icon-size} + 3px * 2));
-  padding: 7px 0;
-  vertical-align: middle;
-
-  .ev-checkbox {
-    display: inline-block;
-    padding: 5px 5px 0;
-    margin: 0;
-    vertical-align: middle;
-  }
-}
-
-.fade {
-  &-enter-active {
-    animation: fade 0.3s ease-in-out;
-  }
-
-  &-leave-active {
-    animation: fade 0.3s ease-in-out reverse;
-  }
-
-  @keyframes fade {
-    0% {
-      opacity: 0;
-      height: 0;
-    }
-
-    50% {
-      opacity: 0.3;
-      height: 20%;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}
-
-</style>

package/src/components/tree/index.js

@@ -1,7 +0,0 @@
-import EvTree from './Tree';
-
-EvTree.install = (app) => {
-  app.component(EvTree.name, EvTree);
-};
-
-export default EvTree;