evui 3.4.9 → 3.4.11

package/src/components/treeGrid/TreeGrid.vue

@@ -54,7 +54,10 @@
           <li
             v-if="useCheckbox.use"
             :class="headerCheckboxClass"
-            :style="`width: ${minWidth}px;`"
+            :style="{
+              width: `${minWidth}px`,
+              'border-right': '1px solid #CFCFCF',
+            }"
           >
             <ev-checkbox
               v-if="isHeaderCheckbox"
@@ -92,6 +95,21 @@
               />
             </li>
           </template>
+          <!-- Row Contextmenu Column -->
+          <li
+            v-if="$props.option.customContextMenu?.length"
+            :class="{
+              column: true,
+              'non-border': !!borderStyle,
+            }"
+            :style="{
+              width: '30px',
+              'min-width': '30px',
+              'margin-right': (hasVerticalScrollBar || hasHorizontalScrollBar)
+                ? `${scrollWidth}px` : '0px',
+            }"
+          >
+          </li>
         </ul>
       </div>
       <!-- Body -->
@@ -120,6 +138,8 @@
               :collapse-icon="option.collapseIcon"
               :parent-icon="option.parentIcon"
               :child-icon="option.childIcon"
+              :custom-context-menu="customContextMenu"
+              :menu-ref="menu"
               :is-resize="isResize"
               :row-height="rowHeight"
               :min-width="minWidth"
@@ -129,6 +149,7 @@
               @expand-tree-data="handleExpand"
               @click-tree-data="onRowClick"
               @dbl-click-tree-data="onRowDblClick"
+              @context-menu="onContextMenu"
             >
               <!-- Cell Renderer -->
               <template
@@ -152,6 +173,14 @@
                   </span>
                 </template>
               </template>
+              <template
+                v-if="$slots.contextmenuIcon"
+                #contextmenuIconNode
+              >
+                <slot
+                  name="contextmenuIcon"
+                />
+              </template>
             </tree-grid-node>
             <tr v-if="!viewStore.length">
               <td class="is-empty">No records</td>
@@ -469,6 +498,7 @@ export default {
       isRenderer,
       updateVScroll,
       updateHScroll,
+      contextInfo,
     });
 
     const {
@@ -768,6 +798,7 @@ export default {
         'margin-right': (stores.orderedColumns.length - 1 === index
           && scrollInfo.hasVerticalScrollBar
           && scrollInfo.hasHorizontalScrollBar) ? `${resizeInfo.scrollWidth}px` : '0px',
+        'border-right': stores.orderedColumns.length - 1 === index ? 'none' : '1px solid #CFCFCF',
       };
     };
     const getSlotName = column => `${column}Node`;

package/src/components/treeGrid/TreeGridNode.vue

@@ -8,9 +8,11 @@
     <td
       v-if="useCheckbox.use"
       :class="checkboxClass"
-      :style="`
-        width: ${minWidth}px;
-        height: ${rowHeight}px;`"
+      :style="{
+        width: `${minWidth}px`,
+        height: `${rowHeight}px`,
+        'border-right': '1px solid #CFCFCF',
+      }"
     >
       <ev-checkbox
         v-model="node.checked"
@@ -28,9 +30,9 @@
         :data-name="column.field"
         :data-index="node.index"
         :class="getColumnClass(column, cellIndex)"
-        :style="getColumnStyle(column)"
+        :style="getColumnStyle(column, cellIndex)"
       >
-        <div class="td-content">
+        <div class="td-content__wrapper">
           <!--Level Depth-->
           <span
             v-if="cellIndex === expandColumnIdx"
@@ -76,7 +78,7 @@
               <i></i>
             </span>
           </span>
-          <div class="slot-wrapper">
+          <div class="td-content">
           <!-- cell renderer -->
           <template v-if="!!$slots[column.field + 'Node']">
             <slot
@@ -90,14 +92,52 @@
         </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/grid.optionButton.vue';
 
 export default {
   name: 'TreeGridNode',
+  components: { GridOptionButton },
   props: {
     dataIndex: {
       type: Number,
@@ -135,6 +175,14 @@ export default {
       type: String,
       default: '',
     },
+    customContextMenu: {
+      type: [Array],
+      default: () => [],
+    },
+    menuRef: {
+      type: Object,
+      default: null,
+    },
     rowHeight: {
       type: Number,
       default: 35,
@@ -157,6 +205,7 @@ export default {
     'expand-tree-data': null,
     'click-tree-data': null,
     'dbl-click-tree-data': null,
+    'context-menu': null,
   },
   setup(props, { emit }) {
     const onCheck = ($event, data) => {
@@ -171,6 +220,9 @@ export default {
     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 : '';
@@ -205,11 +257,13 @@ export default {
       [column.align]: column.align,
       'non-border': !!props.borderStyle,
     });
-    const getColumnStyle = column => ({
+    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;
@@ -228,6 +282,7 @@ export default {
       onExpand,
       onClick,
       onDblClick,
+      onContextMenu,
       expandIconClasses,
       getRowClass,
       getColumnClass,
@@ -279,7 +334,7 @@ export default {
     background: url('./tree_icon.png') no-repeat -14px -35px;
   }
 }
-.slot-wrapper {
+.td-content {
   position: relative;
   flex: 1;
 }

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

@@ -28,6 +28,10 @@
       border-bottom: 1px solid evThemed('grid-bottom-border');
     }
   }
+  .row-contextmenu__btn {
+    display: none;
+    vertical-align: middle;
+  }
 }
 
 .column-list {
@@ -134,6 +138,15 @@
       background: #5AB7FF;
       color: #FFFFFF;
     }
+    &:hover {
+      .row-contextmenu__btn {
+        display: grid;
+        &:hover {
+          cursor: pointer;
+          opacity: 0.6;
+        }
+      }
+    }
   }
 
   .cell {
@@ -184,7 +197,7 @@
     }
     &.tree-td {
       text-align: left !important;
-      .td-content {
+      .td-content__wrapper {
         display: flex;
         position: relative;
         align-items: center;

package/src/components/treeGrid/uses.js

@@ -178,6 +178,7 @@ export const resizeEvent = (params) => {
     isRenderer,
     updateVScroll,
     updateHScroll,
+    contextInfo,
   } = params;
   /**
    * 고정 너비, 스크롤 유무 등에 따른 컬럼 너비를 계산한다.
@@ -207,7 +208,7 @@ export const resizeEvent = (params) => {
         }
 
         return acc;
-      }, { totalWidth: 0, emptyCount: 0 });
+      }, { totalWidth: contextInfo.customContextMenu.length ? 30 : 0, emptyCount: 0 });
 
       if (resizeInfo.rowHeight * store.length > elHeight - resizeInfo.scrollWidth) {
         elWidth -= resizeInfo.scrollWidth;
@@ -373,7 +374,8 @@ export const clickEvent = (params) => {
   let timer = null;
   const onRowClick = (event, row) => {
     if (event.target && event.target.parentElement
-      && event.target.parentElement.classList.contains('row-checkbox-input')) {
+      && (event.target.parentElement.classList.contains('row-checkbox-input')
+        || event.target.closest('td')?.classList?.contains('row-contextmenu'))) {
       return false;
     }
     clearTimeout(timer);