evui 3.4.206 → 3.4.208

package/src/components/treeGrid/TreeGridNode.vue

@@ -1,349 +0,0 @@
-<template>
-  <tr
-    :data-index="node.index"
-    :class="getRowClass(node)"
-    @click="onClick($event, node)"
-    @dblclick="onDblClick($event, node)"
-  >
-    <td
-      v-if="useCheckbox.use"
-      :class="checkboxClass"
-      :style="{
-        width: `${minWidth}px`,
-        height: `${rowHeight}px`,
-        'border-right': '1px solid #CFCFCF',
-      }"
-    >
-      <ev-checkbox
-        v-model="node.checked"
-        :disabled="node.uncheckable"
-        :indeterminate="node.indeterminate"
-        class="row-checkbox-input"
-        @change="onCheck($event, node)"
-      />
-    </td>
-    <template
-      v-for="(column, cellIndex) in orderedColumns"
-      :key="cellIndex"
-    >
-      <td
-        v-if="!column.hide && !column.hiddenDisplay"
-        :data-name="column.field"
-        :data-index="node.index"
-        :class="getColumnClass(column, cellIndex)"
-        :style="getColumnStyle(column, cellIndex)"
-      >
-        <div class="td-content__wrapper">
-          <!--Level Depth-->
-          <span
-            v-if="cellIndex === expandColumnIdx"
-            :style="getDepthStyle(node.level)"
-          >
-          </span>
-          <!--Expand Icon-->
-          <span
-            v-if="cellIndex === expandColumnIdx"
-            :class="{
-              expand: node.expand,
-              'ev-tree-toggle': true
-            }"
-          >
-            <template v-if="node.hasChild">
-              <ev-icon
-                v-if="expandIconClasses(node)"
-                :icon="expandIconClasses(node)"
-                style="display: block;"
-                @click="onExpand(node)"
-              />
-              <button
-                v-else
-                class="tree-expand-icon"
-                @click.stop="onExpand(node)"
-              >
-                <i></i>
-              </button>
-            </template>
-          </span>
-          <!--Data Icon-->
-          <span
-            v-if="cellIndex === expandColumnIdx && isDataIcon"
-            :title="node[column.field]"
-            :class="{
-              expand: node.expand,
-              'ev-tree-toggle': true,
-            }"
-          >
-            <span
-              :class="node.hasChild ? parentIconMV : childIconMV"
-            >
-              <i></i>
-            </span>
-          </span>
-          <div class="td-content">
-          <!-- cell renderer -->
-          <template v-if="!!$slots[column.field + 'Node']">
-            <slot
-              :name="column.field + 'Node'"
-              :item="{
-                data: node.data,
-              }"
-            />
-          </template>
-          </div>
-        </div>
-      </td>
-    </template>
-    <!-- Row Contextmenu Button -->
-    <td
-      v-if="customContextMenu?.length"
-      :class="{
-        'row-contextmenu': true,
-        'non-border': !!borderStyle,
-      }"
-      :style="{
-        position: 'sticky',
-        right: 0,
-        width: '30px',
-        height: `${rowHeight}px`,
-        'min-width': '30px',
-        'line-height': `${rowHeight}px`,
-      }"
-    >
-      <template v-if="$slots.contextmenuIconNode">
-        <span
-          class="row-contextmenu__btn"
-          @click="onContextMenu($event)"
-          @click.prevent="menuRef.show"
-        >
-          <slot
-            name="contextmenuIconNode"
-          />
-        </span>
-      </template>
-      <template v-else>
-        <grid-option-button
-          icon="ev-icon-warning2"
-          class="row-contextmenu__btn"
-          @click="onContextMenu($event)"
-          @click.prevent="menuRef.show"
-        />
-      </template>
-    </td>
-  </tr>
-</template>
-
-<script>
-import { computed } from 'vue';
-import GridOptionButton from '@/components/grid/icon/icon-option-button.vue';
-
-export default {
-  name: 'TreeGridNode',
-  components: { GridOptionButton },
-  props: {
-    dataIndex: {
-      type: Number,
-      default: 0,
-    },
-    nodeData: {
-      type: Object,
-      default: () => ({}),
-    },
-    selectedData: {
-      type: Object,
-      default: () => ({}),
-    },
-    useCheckbox: {
-      type: Object,
-      default: () => ({}),
-    },
-    orderedColumns: {
-      type: [Array],
-      default: () => [],
-    },
-    expandIcon: {
-      type: String,
-      default: '',
-    },
-    collapseIcon: {
-      type: String,
-      default: '',
-    },
-    parentIcon: {
-      type: String,
-      default: '',
-    },
-    childIcon: {
-      type: String,
-      default: '',
-    },
-    customContextMenu: {
-      type: [Array],
-      default: () => [],
-    },
-    menuRef: {
-      type: Object,
-      default: null,
-    },
-    rowHeight: {
-      type: Number,
-      default: 35,
-    },
-    minWidth: {
-      type: Number,
-      default: 40,
-    },
-    borderStyle: {
-      type: String,
-      default: '',
-    },
-    highlightIndex: {
-      type: Number,
-      default: -1,
-    },
-  },
-  emits: {
-    'check-tree-data': null,
-    'expand-tree-data': null,
-    'click-tree-data': null,
-    'dbl-click-tree-data': null,
-    'context-menu': null,
-  },
-  setup(props, { emit }) {
-    const onCheck = ($event, data) => {
-      emit('check-tree-data', $event, data);
-    };
-    const onExpand = (data) => {
-      emit('expand-tree-data', data);
-    };
-    const onClick = ($event, data) => {
-      emit('click-tree-data', $event, data);
-    };
-    const onDblClick = ($event, data) => {
-      emit('dbl-click-tree-data', $event, data);
-    };
-    const onContextMenu = ($event) => {
-      emit('context-menu', $event);
-    };
-    const expandIconClasses = (node) => {
-      const expandIcon = props.expandIcon ? props.expandIcon : '';
-      const collapseIcon = props.expandIcon ? props.collapseIcon : '';
-      return node.expand ? collapseIcon : expandIcon;
-    };
-    const node = computed(() => (props.nodeData || {}));
-    const parentIconMV = computed(() => (props.parentIcon || 'tree-parent-icon'));
-    const childIconMV = computed(() => (props.childIcon || 'tree-child-icon'));
-    const isDataIcon = computed(() => ((parentIconMV.value !== 'none' || childIconMV.value !== 'none')));
-
-    const expandColumnIdx = computed(() => {
-      const columns = props.orderedColumns || [];
-      const visibleExpandIdx = columns.findIndex(column =>
-        column.expandColumn && !column.hide && !column.hiddenDisplay);
-      if (visibleExpandIdx !== -1) {
-        return visibleExpandIdx;
-      }
-      const firstVisibleIdx = columns.findIndex(column => !column.hide && !column.hiddenDisplay);
-      return firstVisibleIdx !== -1 ? firstVisibleIdx : 0;
-    });
-    const getRowClass = nodeInfo => ({
-      row: true,
-      'tree-row': true,
-      [`tree-row--level-${nodeInfo?.level}`]: true,
-      highlight: nodeInfo?.index === props.highlightIndex,
-      selected: nodeInfo.selected,
-      'non-border': !!props.borderStyle && props.borderStyle !== 'rows',
-    });
-    const checkboxClass = computed(() => ({
-      cell: true,
-      'row-checkbox': true,
-      'non-border': !!props.borderStyle,
-    }));
-    const getColumnClass = (column, cellIndex) => ({
-      cell: true,
-      'tree-td': cellIndex === 0,
-      [column.type]: column.type,
-      [column.align]: column.align,
-      [column.field]: column.field,
-      'non-border': !!props.borderStyle,
-    });
-    const getColumnStyle = (column, cellIndex) => ({
-      width: `${column.width}px`,
-      height: `${props.rowHeight}px`,
-      'line-height': `${props.rowHeight}px`,
-      'min-width': `${props.minWidth}px`,
-      'border-right': props.orderedColumns.length - 1 === cellIndex
-        ? 'none' : '1px solid #CFCFCF',
-    });
-    const getDepthStyle = (nodeLevel) => {
-      const depthSize = nodeLevel * 13;
-      return {
-        'margin-left': `${depthSize}px`,
-      };
-    };
-    return {
-      parentIconMV,
-      childIconMV,
-      node,
-      isDataIcon,
-      checkboxClass,
-      expandColumnIdx,
-      onCheck,
-      onExpand,
-      onClick,
-      onDblClick,
-      onContextMenu,
-      expandIconClasses,
-      getRowClass,
-      getColumnClass,
-      getColumnStyle,
-      getDepthStyle,
-    };
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-@import './style/treeGrid.scss';
-.ev-tree-toggle {
-  display: inline-block;
-  width: 13px;
-  margin-right: 4px;
-  text-align: center;
-  vertical-align: middle;
-  .tree-expand-icon {
-    border: none;
-    background: transparent;
-    outline: none;
-    cursor: pointer;
-  }
-  .tree-expand-icon i {
-    display: inline-block;
-    top: -3px;
-    width: 11px;
-    height: 10px;
-    background: url('icon/icon-tree.png') no-repeat -43px -61px;
-  }
-  &.expand > .tree-expand-icon i {
-    height: 8px;
-    background-position: -15px -63px;
-  }
-  .tree-parent-icon i, .tree-child-icon i {
-    display: inline-block;
-    top: -3px;
-    width: 14px;
-    height: 14px;
-  }
-  .tree-parent-icon i {
-    background: url('icon/icon-tree.png') no-repeat -39px -35px;
-  }
-  &.expand > .tree-parent-icon i {
-    background-position: -65px -35px;
-  }
-  .tree-child-icon i {
-    background: url('icon/icon-tree.png') no-repeat -14px -35px;
-  }
-}
-.td-content {
-  position: relative;
-  flex: 1;
-}
-</style>

package/src/components/treeGrid/TreeGridToolbar.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="tree-grid-toolbar">
-    <slot name="toolbarWrapper"></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EvTreeGridToolbar',
-};
-</script>
-
-<style lang="scss">
-@import '../../style/index.scss';
-.tree-grid-toolbar {
-  height: 30px;
-  margin-bottom: 10px;
-}
-.tree-grid-toolbar > .search {
-  float: right;
-  width: auto !important;
-  margin-right: 0 !important;
-}
-.tree-grid-toolbar > .ev-button {
-  margin: 0 2px 0 2px;
-}
-.tree-grid-toolbar > .grid-setting__icon {
-  float: right;
-  margin: 10px 5px;
-  cursor: pointer;
-  &:hover {
-    opacity: 0.6;
-  }
-}
-</style>

package/src/components/treeGrid/index.js

@@ -1,9 +0,0 @@
-import ObserveVisibility from 'vue3-observe-visibility';
-import EvTreeGrid from './TreeGrid';
-
-EvTreeGrid.install = (app) => {
-  app.component(EvTreeGrid.name, EvTreeGrid);
-  app.use(ObserveVisibility);
-};
-
-export default EvTreeGrid;

package/src/components/treeGrid/style/treeGrid.scss

@@ -1,277 +0,0 @@
-@import '../../../style/index.scss';
-
-.ev-tree-grid {
-  $header-height: 33px;
-  position: relative;
-  width: 100%;
-  height: 100%;
-  padding-top: $header-height;
-
-  &--empty {
-    overflow: auto;
-    .table-header {
-      display: table;
-    }
-  }
-  &.non-header {
-    padding-top: 0;
-  }
-  .table-header {
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: $header-height;
-
-    @include evThemify() {
-      border-top: 2px solid evThemed('grid-header-border');
-      border-bottom: 1px solid evThemed('grid-bottom-border');
-    }
-  }
-  .row-contextmenu__btn {
-    display: none;
-    vertical-align: middle;
-  }
-}
-
-.column-list {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;
-  list-style-type: none;
-}
-
-.column {
-  display: inline-flex;
-  position: relative;
-  height: 100%;
-  padding: 0 10px;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  vertical-align: top;
-  user-select: none;
-
-  @include evThemify() {
-    border-right: 1px solid evThemed('grid-bottom-border');
-  }
-  &:nth-last-child(1) {
-    border-right: 0;
-  }
-  .sort-icon {
-    display: inline-block;
-    float: right;
-    font-size: 14px;
-    line-height: 30px;
-
-    @include evThemify() {
-      color: evThemed('font-color-base');
-    }
-  }
-  &.checkbox-all {
-    padding: 0;
-    .ev-checkbox {
-      display: inline-flex;
-      width: 100%;
-      height: 100%;
-      justify-content: center;
-      align-items: center;
-    }
-  }
-  .column-sort__icon {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    width: 24px;
-    height: 24px;
-    background-size: contain;
-    transform: translateY(-50%);
-    &:hover {
-      cursor: pointer;
-    }
-    &--basic {
-      visibility: hidden;
-    }
-  }
-  :hover {
-    .column-sort__icon--basic {
-      visibility: visible;
-    }
-  }
-}
-
-.column-name {
-  display: inline-block;
-  float: left;
-  width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-weight: bold;
-  font-size: 14px;
-  &--click {
-    cursor: pointer;
-  }
-
-  @include evThemify() {
-    color: evThemed('font-color-base');
-  }
-}
-
-.column-resize {
-  position: absolute;
-  bottom: 0;
-  right: -5px;
-  width: 10px;
-  height: 100%;
-  &:hover {
-    cursor: col-resize;
-  }
-}
-
-.table-body {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  overflow-anchor: none;
-  table {
-    clear: both;
-    width: inherit;
-    border-spacing: 0;
-    border-collapse: collapse;
-  }
-  &.stripe tr:nth-child(even) {
-    @include evThemify() {
-      background: evThemed('grid-row-stripe');
-    }
-  }
-  &.bottom-border {
-    @include evThemify() {
-      border-bottom: 1px solid evThemed('grid-bottom-border');
-    }
-  }
-  .row {
-    white-space: nowrap;
-
-    @include evThemify() {
-      border-bottom: 1px solid evThemed('grid-bottom-border');
-    }
-    &.selected {
-      @include evThemify() {
-        background: evThemed('grid-row-selected') !important;
-        color: inherit !important;
-      }
-    }
-    &.highlight {
-      background: #5AB7FF;
-      color: #FFFFFF;
-    }
-    &:hover {
-      .row-contextmenu__btn {
-        display: grid;
-        &:hover {
-          cursor: pointer;
-          opacity: 0.6;
-        }
-      }
-    }
-  }
-
-  .cell {
-    display: inline-block;
-    padding: 0 10px;
-    text-align: center;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    @include evThemify() {
-      border-right: 1px solid evThemed('grid-bottom-border');
-    }
-    &.row-checkbox {
-      padding: 0;
-      .ev-checkbox {
-        display: inline-flex;
-        width: 100%;
-        height: 100%;
-        justify-content: center;
-        align-items: center;
-      }
-    }
-    &.render {
-      overflow: initial;
-    }
-    &.number,
-    &.float {
-      text-align: right;
-    }
-    &.string,
-    &.stringNumber {
-      text-align: left;
-    }
-    &.center {
-      text-align: center;
-    }
-    &.left {
-      text-align: left;
-      .wrap {
-        justify-content: flex-start;
-      }
-    }
-    &.right {
-      text-align: right;
-      .wrap {
-        justify-content: flex-end;
-      }
-    }
-    &:last-child {
-      border-right: 0;
-    }
-    &.tree-td {
-      text-align: left !important;
-      .td-content__wrapper {
-        display: flex;
-        position: relative;
-        align-items: center;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
-
-.table-resize-line {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1px;
-
-  @include evThemify() {
-    border-right: 1px solid evThemed('grid-bottom-border');
-  }
-}
-
-.vscroll-spacer {
-  opacity: 0;
-  clear: both;
-}
-
-[v-cloak] {
-  display: none;
-}
-
-.ev-checkbox {
-  margin: 0;
-}
-
-.non-border {
-  border: none !important;
-}
-
-.is-empty {
-  height: 30px;
-  text-align: center;
-}