[#1100] Grid > row 다중 선택 (#1105)

Co-authored-by: yell <yell@ex-em.com>

docs/views/grid/api/grid.md

@@ -43,6 +43,10 @@
 |  |  | use | 체크박스 사용 여부 | Boolean |
 |  |  | mode | 단일 및 다중 선택 설정 | 'multi', 'single' |
 |  |  | headerCheck | 헤더 체크박스 사용 여부 | Boolean |
+|  | useSelection | {} | 각 row별 선택 여부 및 단일 선택이나 다중 선택을 설정한다. |  |
+|  |  | use | Selection 사용 여부 | Boolean |
+|  |  | multiple | 다중 선택 설정 여부  | Boolean |
+|  |  | limitCount | 선택 가능한 row의 수를 제한 | Number |
 |  | style | {} | 그리드의 스타일을 설정한다. |  |
 |  |  | stripe | row의 배경색을 Stripe 스타일로 설정한다. | Boolean |
 |  |  | border | 그리드의 Border 여부를 설정한다. | 'none', 'rows' |

docs/views/grid/example/Default.vue

@@ -20,6 +20,11 @@
           mode: checkboxModeMV,
           headerCheck: headerCheckMV,
         },
+        useSelection: {
+          use: useSelectionMV,
+          multiple: isSelectionMultiple,
+          limitCount: limitMV,
+        },
         style: {
           stripe: stripeMV,
           border: borderMV,
@@ -84,6 +89,30 @@
           v-model="stripeMV"
         />
       </div>
+      <div class="form-rows">
+        <span class="badge yellow">
+          Use Selection
+        </span>
+        <ev-toggle
+          v-model="useSelectionMV"
+        />
+        <span class="badge yellow">
+          Multiple Selection
+        </span>
+        <ev-toggle
+          v-model="isSelectionMultiple"
+        />
+        <span class="badge yellow">
+          Limit Count
+        </span>
+        <ev-select
+          v-model="limitMV"
+          :items="limitItems"
+          :style="{ width: '200px' }"
+          clearable
+          placeholder="Please select value."
+        />
+      </div>
       <div class="form-rows">
         <div class="form-row">
           <span class="badge yellow">
@@ -198,17 +227,9 @@
           <ev-select
             v-model="borderMV"
             :items="items"
+            clearable
             placeholder="Please select value."
           />
-          <button
-            class="btn"
-            @click="resetBorderStyle"
-          >
-            <ev-icon
-              icon="ev-icon-trash3"
-              size="small"
-            />Reset
-          </button>
         </div>
       </div>
     </div>
@@ -237,6 +258,8 @@ export default {
     const checkedRowsMV = ref();
     const clickedRowMV = ref();
     const DbClickedRowsMV = ref();
+    const useSelectionMV = ref(true);
+    const isSelectionMultiple = ref(false);
     const menuItems = ref([
       {
         text: 'Menu1',
@@ -258,6 +281,17 @@ export default {
         value: 'rows',
       },
     ]);
+    const limitMV = ref(2);
+    const limitItems = ref([
+      {
+        name: '2',
+        value: 2,
+      },
+      {
+        name: '4',
+        value: 4,
+      },
+    ]);
     const columns = ref([
       { caption: '', field: 'user-icon', type: 'string' },
       { caption: 'Name', field: 'userName', type: 'stringNumber', width: 80 },
@@ -276,16 +310,20 @@ export default {
     };
     const onCheckedRow = () => {
       let checkedRow = '';
-      for (let i = 0; i < checked.value.length; i++) {
-        checkedRow += JSON.stringify(checked.value[i]);
-      }
+      checked.value.forEach((row) => {
+        checkedRow += JSON.stringify(row);
+      });
       checkedRowsMV.value = checkedRow;
     };
     const onDoubleClickRow = (e) => {
       DbClickedRowsMV.value = `${e.rowData}`;
     };
-    const onClickRow = (e) => {
-      clickedRowMV.value = `${e.rowData}`;
+    const onClickRow = () => {
+      let clickedRow = '';
+      selected.value.forEach((row) => {
+        clickedRow += JSON.stringify(row);
+      });
+      clickedRowMV.value = clickedRow;
     };
     const getData = (count, startIndex) => {
       const temp = [];
@@ -356,6 +394,10 @@ export default {
       borderMV,
       items,
       pageInfo,
+      isSelectionMultiple,
+      useSelectionMV,
+      limitMV,
+      limitItems,
       changeMode,
       onCheckedRow,
       onDoubleClickRow,

src/components/grid/Grid.vue

@@ -150,7 +150,7 @@
               :data-index="row[0]"
               :class="{
                 row: true,
-                selected: row[2] === selectedRow,
+                selected: row[3],
                 'non-border': !!borderStyle && borderStyle !== 'rows',
                 highlight: row[0] === highlightIdx,
               }"
@@ -323,9 +323,10 @@ export default {
     'page-change': null,
   },
   setup(props) {
-    const ROW_INDEX = 0;
+    // const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
     const ROW_DATA_INDEX = 2;
+    const ROW_SELECT_INDEX = 3;
     const {
       isRenderer,
       getComponentName,
@@ -389,7 +390,6 @@ export default {
       prevCheckedRow: [],
       isHeaderChecked: false,
       checkedRows: props.checked,
-      checkedIndex: new Set(),
       useCheckbox: computed(() => (props.option.useCheckbox || {})),
     });
     const scrollInfo = reactive({
@@ -402,8 +402,14 @@ export default {
       hasVerticalScrollBar: false,
     });
     const selectInfo = reactive({
-      useSelect: props.option.useSelect === undefined ? true : props.option.useSelect,
       selectedRow: props.selected,
+      useSelect: computed(() => props.option?.useSelection?.use ?? true),
+      limitCount: computed(() => {
+        let limit = props.option?.useSelection?.limitCount;
+        limit = !!limit && limit >= 2 ? limit : 0;
+        return limit;
+      }),
+      multiple: computed(() => props.option?.useSelection?.multiple ?? false),
     });
     const sortInfo = reactive({
       isSorting: false,
@@ -430,12 +436,17 @@ export default {
     });
     const clearCheckInfo = () => {
       checkInfo.checkedRows = [];
-      checkInfo.checkedIndex.clear();
       checkInfo.isHeaderChecked = false;
       stores.store.forEach((row) => {
         row[ROW_CHECK_INDEX] = false;
       });
     };
+    const clearSelectInfo = () => {
+      selectInfo.selectedRow = [];
+      stores.store.forEach((row) => {
+        row[ROW_SELECT_INDEX] = false;
+      });
+    };
     const {
       getPagingData,
       updatePagingInfo,
@@ -466,7 +477,7 @@ export default {
     const {
       onRowClick,
       onRowDblClick,
-    } = clickEvent(selectInfo);
+    } = clickEvent({ selectInfo });
 
     const {
       onCheck,
@@ -582,17 +593,13 @@ export default {
       (checkedList) => {
         checkInfo.checkedRows = checkedList;
         checkInfo.isHeaderChecked = false;
-        checkInfo.checkedIndex.clear();
         let store = stores.store;
         if (pageInfo.isClientPaging) {
           store = getPagingData();
         }
         if (store.length) {
           store.forEach((row) => {
             row[ROW_CHECK_INDEX] = checkedList.includes(row[ROW_DATA_INDEX]);
-            if (row[ROW_CHECK_INDEX]) {
-              checkInfo.checkedIndex.add(row[ROW_INDEX]);
-            }
           });
           checkInfo.isHeaderChecked = checkedList.length === store.length;
         }
@@ -601,8 +608,14 @@ export default {
     );
     watch(
       () => props.selected,
-      (value) => {
-        selectInfo.selectedRow = value;
+      (selectedList) => {
+        if (selectInfo.useSelect) {
+          selectInfo.selectedRow = selectedList;
+          stores.store.forEach((row) => {
+            row[ROW_SELECT_INDEX] = selectInfo.selectedRow.includes(row[ROW_DATA_INDEX]);
+          });
+          updateVScroll();
+        }
       },
     );
     watch(
@@ -611,6 +624,18 @@ export default {
         clearCheckInfo();
       },
     );
+    watch(
+      () => selectInfo.useSelect,
+      () => {
+        clearSelectInfo();
+      },
+    );
+    watch(
+      () => selectInfo.multiple,
+      () => {
+        clearSelectInfo();
+      },
+    );
     watch(
       () => props.checked.length,
       (checkedSize) => {
@@ -652,6 +677,7 @@ export default {
           onSearch(value?.value ?? value);
           if (pageInfo.isClientPaging) {
             clearCheckInfo();
+            clearSelectInfo();
           }
         }
       }, { immediate: true },
@@ -673,6 +699,7 @@ export default {
           changePage(beforeVal[0]);
           if (pageInfo.isClientPaging && currentVal[0] !== beforeVal[0]) {
             clearCheckInfo();
+            clearSelectInfo();
           }
           updateVScroll();
         });