evui 3.4.25 → 3.4.27

package/src/components/grid/Grid.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    v-if="$slots.toolbar || useColumnSetting"
-    ref="toolbarWrapper"
+    v-if="$slots.toolbar || useGridSetting"
+    ref="toolbarRef"
     class="toolbar-wrapper"
     :style="`width: ${gridWidth};`"
   >
@@ -145,9 +145,9 @@
           </div>
         </div>
         <grid-option-button
-          v-if="useColumnSetting"
-          class="column-setting__icon"
-          @click="setColumnSetting"
+          v-if="useGridSetting"
+          class="grid-setting__icon"
+          @click="setGridSetting($event)"
         />
         <slot
           name="toolbar"
@@ -155,12 +155,6 @@
         />
       </template>
     </toolbar>
-    <column-setting
-      v-model:is-show="isShowColumnSetting"
-      :columns="$props.columns"
-      :hidden-column="hiddenColumn"
-      @apply-column="onApplyColumn"
-    />
   </div>
   <div
     ref="grid-wrapper"
@@ -200,6 +194,7 @@
             v-if="useCheckbox.use"
             :class="{
               'column': true,
+              'checkbox-all': true,
               'non-border': !!borderStyle,
             }"
             :style="{
@@ -210,9 +205,21 @@
             <ev-checkbox
               v-if="useCheckbox.use && useCheckbox.headerCheck && useCheckbox.mode !== 'single'"
               v-model="isHeaderChecked"
+              :disabled="isHeaderUncheckable"
               @change="onCheckAll"
             />
           </li>
+          <li
+            v-if="useRowDetail"
+            :class="{
+              'column': true,
+              'non-border': !!borderStyle,
+            }"
+            :style="{
+              width: `${minWidth}px`,
+              'border-right': '1px solid #CFCFCF'
+            }"
+          />
           <!-- Column List -->
           <template
             v-for="(column, index) in orderedColumns"
@@ -347,114 +354,148 @@
         <table ref="table">
           <tbody>
             <!-- Row List -->
-            <tr
+            <template
               v-for="(row, rowIndex) in viewStore"
               :key="rowIndex"
-              :data-index="row[0]"
-              :class="{
-                row: true,
-                selected: row[3],
-                highlight: row[0] === highlightIdx,
-                'non-border': !!borderStyle && borderStyle !== 'rows',
-              }"
-              @click="onRowClick($event, row)"
-              @contextmenu="onRowClick($event, row, true)"
-              @dblclick="onRowDblClick($event, row)"
             >
-              <!-- Row Checkbox -->
-              <td
-                v-if="useCheckbox.use"
+              <tr
+                :data-index="row[0]"
                 :class="{
-                  cell: true,
-                  'row-checkbox': true,
-                  'non-border': !!borderStyle,
-                }"
-                :style="{
-                  width: `${minWidth}px`,
-                  height: `${rowHeight}px`,
-                  'border-right': '1px solid #CFCFCF',
+                  row: true,
+                  selected: row[3],
+                  highlight: row[0] === highlightIdx,
+                  'non-border': !!borderStyle && borderStyle !== 'rows',
                 }"
+                @click="onRowClick($event, row)"
+                @contextmenu="onRowClick($event, row, true)"
+                @dblclick="onRowDblClick($event, row)"
               >
-                <ev-checkbox
-                  v-model="row[1]"
-                  class="row-checkbox-input"
-                  @change="onCheck($event, row)"
-                />
-              </td>
-              <!-- Cell -->
-              <template
-                v-for="(column, cellIndex) in orderedColumns"
-                :key="cellIndex"
-              >
+                <!-- Row Checkbox -->
                 <td
-                  v-if="!column.hide && !column.hiddenDisplay"
-                  :data-name="column.field"
-                  :data-index="column.index"
+                  v-if="useCheckbox.use"
                   :class="{
                     cell: true,
-                    render: isRenderer(column),
-                    [column.type]: column.type,
-                    [column.align]: column.align,
-                    [column.field]: column.field,
+                    'row-checkbox': true,
                     'non-border': !!borderStyle,
                   }"
                   :style="{
-                    width: `${column.width}px`,
+                    width: `${minWidth}px`,
                     height: `${rowHeight}px`,
+                    'border-right': '1px solid #CFCFCF',
+                  }"
+                >
+                  <ev-checkbox
+                    v-model="row[1]"
+                    class="row-checkbox-input"
+                    :disabled="row[5]"
+                    @change="onCheck($event, row)"
+                  />
+                </td>
+                <!-- Row Detail toggle -->
+                <td
+                  v-if="useRowDetail"
+                  :class="{
+                    cell: true,
+                    'row-detail-toggle': true,
+                    'non-border': !!borderStyle,
+                    'row-detail-toggle--expanded': row[4],
+                  }"
+                  :style="{
+                    width: `${minWidth}px`,
+                    height: `${rowHeight}px`,
+                    'border-right': '1px solid #CFCFCF',
+                  }"
+                >
+                  <ev-icon
+                    v-model="row[4]"
+                    icon="ev-icon-s-play"
+                    class="row-detail-toggle-icon"
+                    @click.stop="onExpanded($event, row)"
+                  />
+                </td>
+                <!-- Cell -->
+                <template
+                  v-for="(column, cellIndex) in orderedColumns"
+                  :key="cellIndex"
+                >
+                  <td
+                    v-if="!column.hide && !column.hiddenDisplay"
+                    :data-name="column.field"
+                    :data-index="column.index"
+                    :class="{
+                      cell: true,
+                      render: isRenderer(column),
+                      [column.type]: column.type,
+                      [column.align]: column.align,
+                      [column.field]: column.field,
+                      'non-border': !!borderStyle,
+                    }"
+                    :style="{
+                      width: `${column.width}px`,
+                      height: `${rowHeight}px`,
+                      'line-height': `${rowHeight}px`,
+                      'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
+                      'border-right': orderedColumns.length - 1 === cellIndex
+                        ? 'none' : '1px solid #CFCFCF',
+                    }"
+                  >
+                    <!-- Cell Renderer -->
+                    <div v-if="!!$slots[column.field]">
+                      <slot
+                        :name="column.field"
+                        :item="{ row, column }"
+                      />
+                    </div>
+                    <!-- Cell Value -->
+                    <template v-else>
+                      <div :title="getConvertValue(column, row[2][column.index])">
+                        {{ getConvertValue(column, row[2][column.index]) }}
+                      </div>
+                    </template>
+                  </td>
+                </template>
+                <!-- Row Contextmenu Button -->
+                <td
+                  v-if="$props.option.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`,
-                    'min-width': `${isRenderer(column) ? rendererMinWidth : minWidth}px`,
-                    'border-right': orderedColumns.length - 1 === cellIndex
-                      ? 'none' : '1px solid #CFCFCF',
                   }"
                 >
-                  <!-- Cell Renderer -->
-                  <div v-if="!!$slots[column.field]">
-                    <slot
-                      :name="column.field"
-                      :item="{ row, column }"
-                    />
-                  </div>
-                  <!-- Cell Value -->
+                  <template v-if="$slots.contextmenuIcon">
+                    <span
+                      class="row-contextmenu__btn"
+                      @click="onContextMenu($event)"
+                    >
+                      <slot name="contextmenuIcon"></slot>
+                    </span>
+                  </template>
                   <template v-else>
-                    <div :title="getConvertValue(column, row[2][column.index])">
-                      {{ getConvertValue(column, row[2][column.index]) }}
-                    </div>
+                    <grid-option-button
+                      icon="ev-icon-warning2"
+                      class="row-contextmenu__btn"
+                      @click="onContextMenu($event)"
+                    />
                   </template>
                 </td>
-              </template>
-              <!-- Row Contextmenu Button -->
-              <td
-                v-if="$props.option.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`,
-                }"
+              </tr>
+              <tr
+                v-if="useRowDetail && $slots?.rowDetail && row[4]"
               >
-                <template v-if="$slots.contextmenuIcon">
-                  <span
-                    class="row-contextmenu__btn"
-                    @click="onContextMenu($event)"
-                  >
-                    <slot name="contextmenuIcon"></slot>
-                  </span>
-                </template>
-                <template v-else>
-                  <grid-option-button
-                    icon="ev-icon-warning2"
-                    class="row-contextmenu__btn"
-                    @click="onContextMenu($event)"
-                  />
-                </template>
-              </td>
-            </tr>
+                <slot
+                  name="rowDetail"
+                  :item="{ row }"
+                />
+              </tr>
+             </template>
             <tr v-if="!viewStore.length">
               <td class="is-empty">No records</td>
             </tr>
@@ -474,6 +515,11 @@
           ref="columnMenu"
           :items="columnMenuItems"
         />
+        <ev-context-menu
+          ref="gridSettingMenu"
+          :items="gridSettingContextMenuItems"
+          :is-show-menu-on-click="isShowMenuOnClick"
+        />
       </div>
       <!-- Resize Line -->
       <div
@@ -514,6 +560,15 @@
     :position="filterSettingPosition"
     @apply-filtering="onApplyFilter"
   />
+  <!-- Column Setting -->
+  <column-setting
+    v-model:is-show="isShowColumnSetting"
+    v-model:is-show-menu-on-click="isShowMenuOnClick"
+    :columns="$props.columns"
+    :hidden-column="hiddenColumn"
+    :position="columnSettingPosition"
+    @apply-column="onApplyColumn"
+  />
 </template>
 
 <script>
@@ -527,7 +582,6 @@ import {
   onActivated,
   nextTick,
   ref,
-  provide,
   onBeforeMount, onUnmounted,
 } from 'vue';
 import { clickoutside } from '@/directives/clickoutside';
@@ -545,6 +599,7 @@ import {
   resizeEvent,
   clickEvent,
   checkEvent,
+  expandEvent,
   sortEvent,
   filterEvent,
   contextMenuEvent,
@@ -593,6 +648,14 @@ export default {
       type: [Array],
       default: () => [],
     },
+    uncheckable: {
+      type: [Array],
+      default: () => [],
+    },
+    expanded: {
+      type: [Array],
+      default: () => [],
+    },
     option: {
       type: Object,
       default: () => ({}),
@@ -607,12 +670,15 @@ export default {
     'check-all': null,
     'page-change': null,
     'sort-column': null,
+    'expand-row': null,
+    'update:expanded': null,
   },
   setup(props) {
     // const ROW_INDEX = 0;
     const ROW_CHECK_INDEX = 1;
     const ROW_DATA_INDEX = 2;
     const ROW_SELECT_INDEX = 3;
+    const ROW_EXPAND_INDEX = 4;
     const {
       isRenderer,
       getComponentName,
@@ -620,9 +686,9 @@ export default {
       getColumnIndex,
       setPixelUnit,
     } = commonFunctions();
-    const toolbarWrapper = ref(null);
+    const toolbarRef = ref(null);
+    const useGridSetting = computed(() => (props.option?.useGridSetting?.use || false));
     const showHeader = computed(() => (props.option.showHeader ?? true));
-    const useColumnSetting = computed(() => (props.option?.useColumnSetting || false));
     const useSummary = computed(() => (props.option?.useSummary || false));
     const stripeStyle = computed(() => (props.option.style?.stripe || false));
     const borderStyle = computed(() => (props.option.style?.border || ''));
@@ -654,6 +720,11 @@ export default {
       isFilteringColumn: false, // hide된 컬럼이 있는지
       visibleColumnIdx: [], // 보여지는 컬럼의 인덱스 목록
       hiddenColumn: '',
+      columnSettingPosition: {
+        top: 0,
+        left: 0,
+        columnListMenuWidth: 0,
+      },
     });
     const stores = reactive({
       viewStore: [],
@@ -695,9 +766,14 @@ export default {
     const checkInfo = reactive({
       prevCheckedRow: [],
       isHeaderChecked: false,
+      isHeaderUncheckable: false,
       checkedRows: props.checked,
       useCheckbox: computed(() => (props.option.useCheckbox || {})),
     });
+    const expandedInfo = reactive({
+      expandedRows: props.expanded,
+      useRowDetail: computed(() => props.option?.rowDetail?.use ?? false),
+    });
     const scrollInfo = reactive({
       lastScroll: {
         top: 0,
@@ -726,9 +802,15 @@ export default {
       columnMenu: null,
       columnMenuItems: [],
       customContextMenu: props.option.customContextMenu || [],
+      gridSettingMenu: null,
+      gridSettingContextMenuItems: [],
+      customGridSettingContextMenu: computed(
+        () => props.option?.useGridSetting?.customContextMenu || [],
+      ),
+      isShowMenuOnClick: false,
     });
     const resizeInfo = reactive({
-      minWidth: 80,
+      minWidth: 40,
       rendererMinWidth: 80,
       iconWidth: 42,
       showResizeLine: false,
@@ -753,6 +835,12 @@ export default {
         row[ROW_SELECT_INDEX] = false;
       });
     };
+    const clearExpandedInfo = () => {
+      stores.store.forEach((row) => {
+        row[ROW_EXPAND_INDEX] = false;
+      });
+      expandedInfo.expandedRows = [];
+    };
     const {
       getPagingData,
       updatePagingInfo,
@@ -777,6 +865,7 @@ export default {
       resizeInfo,
       pageInfo,
       summaryScroll,
+      expandedInfo,
       getPagingData,
       updatePagingInfo,
     });
@@ -786,6 +875,13 @@ export default {
       onCheckAll,
     } = checkEvent({ checkInfo, stores, pageInfo, getPagingData, updatePagingInfo });
 
+    const {
+      onExpanded,
+    } = expandEvent({
+      expandedInfo,
+      stores,
+    });
+
     const {
       onSort,
       setSort,
@@ -816,6 +912,7 @@ export default {
       sortInfo,
       elementInfo,
       filterInfo,
+      expandedInfo,
       setSort,
       updateVScroll,
       setFilter,
@@ -830,6 +927,7 @@ export default {
       resizeInfo,
       elementInfo,
       checkInfo,
+      expandedInfo,
       stores,
       filterInfo,
       isRenderer,
@@ -839,13 +937,14 @@ export default {
     });
 
     const {
-      setColumnSetting,
+      setPositionColumnSetting,
       initColumnSettingInfo,
       onApplyColumn,
       setColumnHidden,
     } = columnSettingEvent({
       stores,
       columnSettingInfo,
+      contextInfo,
       onSearch,
       onResize,
     });
@@ -854,14 +953,16 @@ export default {
       setContextMenu,
       onContextMenu,
       onColumnContextMenu,
+      onGridSettingContextMenu,
     } = contextMenuEvent({
       contextInfo,
       stores,
       selectInfo,
-      onSort,
-      setColumnHidden,
-      useColumnSetting,
+      useGridSetting,
       filterInfo,
+      columnSettingInfo,
+      setColumnHidden,
+      onSort,
     });
 
     const {
@@ -875,7 +976,14 @@ export default {
       onDrop,
     } = dragEvent({ stores });
 
-    provide('toolbarWrapper', toolbarWrapper);
+    const setGridSetting = (e) => {
+      contextInfo.gridSettingContextMenuItems.length = 0;
+      if (contextInfo.customGridSettingContextMenu.length) {
+        onGridSettingContextMenu(e);
+      } else {
+        columnSettingInfo.isShowColumnSetting = true;
+      }
+    };
 
     const onMouseWheel = (e) => {
       if (e.type === 'wheel') {
@@ -885,9 +993,11 @@ export default {
       && !e.target.offsetParent?.classList?.contains('ev-select-dropbox')
       && !e.target.offsetParent?.classList?.contains('ev-grid-column-setting')
       && !e.target.offsetParent?.classList?.contains('ev-text-field-wrapper')) {
-        contextInfo.columnMenu?.hide(e);
-        columnSettingInfo.isShowColumnSetting = false;
         filterInfo.isShowFilterSetting = false;
+        columnSettingInfo.isShowColumnSetting = false;
+        contextInfo.isShowMenuOnClick = false;
+        contextInfo.columnMenu?.hide(e);
+        contextInfo.gridSettingMenu?.hide();
       }
     };
 
@@ -911,6 +1021,14 @@ export default {
       filteringItemsWidth.value = elementInfo['grid-wrapper']?.offsetWidth / 1.5 || 0;
     });
 
+    watch(() => columnSettingInfo.isShowColumnSetting, (isShowColumnSetting) => {
+      if (!isShowColumnSetting) {
+        contextInfo.gridSettingMenu?.hide();
+        return;
+      }
+      setPositionColumnSetting(toolbarRef.value);
+    });
+
     watch(
       () => props.columns,
       () => {
@@ -947,6 +1065,10 @@ export default {
         onResize();
       }, { deep: true },
     );
+    watch(() => props.uncheckable,
+      () => {
+      setStore(props.rows);
+      }, { deep: true });
     watch(
       () => props.checked,
       (value) => {
@@ -1032,9 +1154,18 @@ export default {
         }
       },
     );
+    watch(
+      () => props.expanded.length,
+      (expendedSize) => {
+        if (!expendedSize) {
+          clearExpandedInfo();
+        }
+      },
+    );
     watch(
       () => [props.option.columnWidth, resizeInfo.gridWidth],
-      () => {
+      async () => {
+        await nextTick();
         resizeInfo.columnWidth = props.option.columnWidth;
         const gridWrapper = elementInfo['grid-wrapper'];
         gridWrapper.style.width = resizeInfo.gridWidth;
@@ -1217,15 +1348,21 @@ export default {
 
     onBeforeMount(() => initWrapperDiv());
 
+    const getWidth = (w) => {
+      console.log(w);
+      return w;
+    };
+
     return {
+      getWidth,
       summaryScroll,
       showHeader,
       stripeStyle,
       borderStyle,
       highlightIdx,
       useSummary,
-      useColumnSetting,
-      toolbarWrapper,
+      useGridSetting,
+      toolbarRef,
       stores,
       ...toRefs(elementInfo),
       ...toRefs(stores),
@@ -1235,6 +1372,7 @@ export default {
       ...toRefs(resizeInfo),
       ...toRefs(selectInfo),
       ...toRefs(checkInfo),
+      ...toRefs(expandedInfo),
       ...toRefs(sortInfo),
       ...toRefs(contextInfo),
       ...toRefs(columnSettingInfo),
@@ -1254,13 +1392,14 @@ export default {
       onRowDblClick,
       onCheck,
       onCheckAll,
+      onExpanded,
       onSort,
       setSort,
       setStore,
       setContextMenu,
       onContextMenu,
       onSearch,
-      setColumnSetting,
+      setGridSetting,
       onApplyColumn,
       onColumnContextMenu,
       // filtering