evui 3.1.38 → 3.1.42

package/src/components/datePicker/uses.js

@@ -2,12 +2,14 @@ import {
   ref, reactive, computed, watch,
   nextTick, getCurrentInstance,
 } from 'vue';
+import { getChangedValueByTimeFormat } from '../calendar/uses';
 
 const dateReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])/);
 const dateTimeReg = new RegExp(/[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1]) (2[0-3]|[01][0-9]):[0-5][0-9]:[0-5][0-9]/);
 
 export const useModel = () => {
   const { props, emit } = getCurrentInstance();
+  const timeFormat = props.options?.timeFormat;
 
   // Select 컴포넌트의 v-model 값
   const mv = computed({
@@ -15,13 +17,42 @@ export const useModel = () => {
       if (!props.modelValue) {
         return (props.mode === 'date' || props.mode === 'dateTime') ? '' : [];
       }
+      if (['dateTime', 'dateTimeRange'].includes(props.mode) && timeFormat) {
+          if (props.mode === 'dateTime') {
+            return getChangedValueByTimeFormat(timeFormat, props.modelValue);
+          } else if (props.modelValue.length) {
+            const [fromTimeFormat, toTimeFormat] = timeFormat;
+            return [
+                getChangedValueByTimeFormat(fromTimeFormat, props.modelValue[0]),
+                getChangedValueByTimeFormat(toTimeFormat, props.modelValue[1]),
+            ];
+          }
+      }
       return props.modelValue;
     },
     set: value => emit('update:modelValue', value),
   });
 
   // mode: 'date' or 'dateTime'시 input box의 입력된 텍스트값
-  const currentValue = ref(props.modelValue);
+  let currentValue;
+  if (['dateTimeRange', 'dateTime'].includes(props.mode) && timeFormat) {
+    if (props.mode === 'dateTimeRange' && props.modelValue.length) {
+      const [fromDate, toDate] = props.modelValue;
+      const [fromTimeFormat, toTimeFormat] = timeFormat;
+
+      props.modelValue = [
+        getChangedValueByTimeFormat(fromTimeFormat, fromDate),
+        getChangedValueByTimeFormat(toTimeFormat, toDate),
+      ];
+      currentValue = ref(props.modelValue);
+    } else if (props.mode === 'dateTime' && props.modelValue) {
+      currentValue = ref(getChangedValueByTimeFormat(timeFormat, props.modelValue));
+    } else {
+      currentValue = ref(props.modelValue);
+    }
+  } else {
+    currentValue = ref(props.modelValue);
+  }
 
   const validateValue = (curr) => {
     if (props.mode === 'date'
@@ -89,9 +120,8 @@ export const useModel = () => {
   };
 };
 
-export const useDropdown = (param) => {
+export const useDropdown = () => {
   const { props } = getCurrentInstance();
-  const { currentValue } = param;
 
   const isDropbox = ref(false);
   const datePicker = ref(null);
@@ -162,24 +192,6 @@ export const useDropdown = (param) => {
     isDropbox.value = false;
   };
 
-  watch(
-    () => props.modelValue,
-    (curr) => {
-      if (props.mode === 'dateMulti'
-        && props?.options?.multiType === 'date'
-        && props?.options?.multiDayLimit > curr.length
-      ) {
-        return;
-      } else if (props.mode === 'dateTime') {
-        currentValue.value = curr;
-        return;
-      } else if (props.mode === 'date') {
-        currentValue.value = curr;
-      }
-      clickOutsideDropbox();
-    },
-  );
-
   return {
     isDropbox,
     datePicker,
@@ -191,3 +203,201 @@ export const useDropdown = (param) => {
     changeDropboxPosition,
   };
 };
+
+export const useShortcuts = (param) => {
+  const { props } = getCurrentInstance();
+  const { mv, currentValue, clickOutsideDropbox } = param;
+
+  const usedShortcuts = reactive([]);
+  props.shortcuts?.forEach(({ value, label, shortcutDate }) => {
+    usedShortcuts.push({
+      key: value,
+      label,
+      shortcutDate,
+      isActive: false,
+    });
+  });
+
+  /**
+   * active 되어있는 shortcut 제거
+   */
+  const clearShortcuts = () => {
+    const targetShortcut = usedShortcuts.find(shortcut => shortcut.isActive);
+    if (targetShortcut) {
+      targetShortcut.isActive = false;
+    }
+  };
+
+  /**
+   * targetKey에 해당하는 shortcut을 active
+   * @param targetKey
+   */
+  const activeShortcut = (targetKey) => {
+    const targetShortcut = usedShortcuts.find(shortcut => shortcut.key === targetKey);
+    if (targetShortcut) {
+      targetShortcut.isActive = true;
+    }
+  };
+
+  /**
+   * 월, 일을 두자리 숫자로 보정
+   * @param num
+   * @returns {string|*}
+   */
+  const lpadToTwoDigits = (num) => {
+    if (num === null) {
+      return '00';
+    } else if (+num < 10) {
+      return `0${num}`;
+    }
+    return num;
+  };
+
+  /**
+   * 'YYYY-MM-DD' 형식으로 format
+   * @param targetDate
+   * @returns string
+   */
+  const formatDate = (targetDate) => {
+    const dateValue = targetDate ? new Date(targetDate) : new Date();
+    const year = dateValue.getFullYear();
+    const month = dateValue.getMonth() + 1;
+    const day = dateValue.getDate();
+    return `${year}-${lpadToTwoDigits(month)}-${lpadToTwoDigits(day)}`;
+  };
+
+  /**
+   * 'YYYY-MM-DD HH:mm:ss' 형식으로 format
+   * @param targetDateTime
+   * @returns string
+   */
+  const formatDateTime = (targetDateTime) => {
+    const dateTimeValue = targetDateTime ? new Date(targetDateTime) : new Date();
+    const hour = dateTimeValue.getHours();
+    const min = dateTimeValue.getMinutes();
+    const sec = dateTimeValue.getSeconds();
+    return `${formatDate(dateTimeValue)} ${lpadToTwoDigits(hour)}:${lpadToTwoDigits(min)}:${lpadToTwoDigits(sec)}`;
+  };
+
+  /**
+   * 시, 분, 초를 원하는 값으로 변환
+   * @param targetDate
+   * @param hour
+   * @param min
+   * @param sec
+   * @returns {Date}
+   */
+  const getChangedDateTime = (targetDate, hour, min, sec) => {
+    const dateTimeValue = new Date(targetDate);
+    dateTimeValue.setHours(hour);
+    dateTimeValue.setMinutes(min);
+    dateTimeValue.setSeconds(sec);
+    return dateTimeValue;
+  };
+
+  /**
+   * 초기 shortcut 세팅
+   * 해당하는 날짜면 active
+   */
+  const setActiveShortcut = () => {
+    clearShortcuts();
+
+    const isRange = ['dateRange', 'dateTimeRange'].includes(props.mode);
+
+    if (!usedShortcuts.length
+       || (props.mode === 'dateMulti' && props.options?.multiType !== 'date')
+       || (isRange && !mv.value.length)
+       || (!isRange && !mv.value)
+    ) {
+      return;
+    }
+
+    let targetKey;
+    if (isRange) {
+      const [fromDate, toDate] = mv.value;
+      const targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
+        const [sFromDate, sToDate] = shortcutDate();
+        const isCorrectFromDate = formatDate(sFromDate) === formatDate(fromDate);
+        const isCorrectToDate = formatDate(sToDate) === formatDate(toDate);
+        return isCorrectFromDate && isCorrectToDate;
+      });
+      targetKey = targetShortcut?.key;
+    } else {
+      const date = formatDate(mv.value);
+      const targetShortcut = usedShortcuts.find(({ shortcutDate }) => {
+        const sDate = formatDate(shortcutDate());
+        return sDate === formatDate(date);
+      });
+      targetKey = targetShortcut?.key;
+    }
+
+    if (targetKey) {
+      activeShortcut(targetKey);
+    }
+  };
+
+  /**
+   * shortcut을 클릭했을 때 이벤트
+   * @param targetKey
+   */
+  const clickShortcut = (targetKey) => {
+    const isRange = ['dateRange', 'dateTimeRange'].includes(props.mode);
+    const targetShortcut = usedShortcuts.find(({ key }) => key === targetKey);
+
+    if (!targetShortcut) {
+      return;
+    }
+
+    const shortcutDate = targetShortcut.shortcutDate;
+
+    if (isRange) {
+      const [fromDate, toDate] = shortcutDate();
+      if (props.mode === 'dateTimeRange') {
+        const from = getChangedDateTime(fromDate, 0, 0, 0);
+        const to = getChangedDateTime(toDate, 0, 0, 0);
+        const [fromTimeFormat, toTimeFormat] = props.options?.timeFormat;
+
+        mv.value = [
+          getChangedValueByTimeFormat(fromTimeFormat, formatDateTime(from)),
+          getChangedValueByTimeFormat(toTimeFormat, formatDateTime(to)),
+        ];
+      } else {
+        mv.value = [formatDate(fromDate), formatDate(toDate)];
+      }
+    } else {
+      const sDate = shortcutDate();
+      mv.value = props.mode === 'dateTime'
+          ? getChangedValueByTimeFormat(
+              props.options?.timeFormat,
+              formatDateTime(getChangedDateTime(sDate, 0, 0, 0)))
+          : formatDate(sDate);
+    }
+
+    clearShortcuts();
+  };
+
+  watch(
+      () => props.modelValue,
+      (curr) => {
+        setActiveShortcut();
+        if (props.mode === 'dateMulti'
+            && props?.options?.multiType === 'date'
+            && props?.options?.multiDayLimit > curr.length
+        ) {
+          return;
+        } else if (props.mode === 'dateTime' || props.mode === 'dateTimeRange') {
+          currentValue.value = curr;
+          return;
+        } else if (props.mode === 'date') {
+          currentValue.value = curr;
+        }
+        clickOutsideDropbox();
+      },
+  );
+
+  return {
+    usedShortcuts,
+    clickShortcut,
+    setActiveShortcut,
+  };
+};

package/src/components/grid/Grid.vue

@@ -469,7 +469,9 @@ export default {
       calculatedColumn();
       setStore(props.rows);
     });
-
+    const ROW_INDEX = 0;
+    const ROW_CHECK_INDEX = 1;
+    const ROW_DATA_INDEX = 2;
     watch(
       () => sortInfo.setSorting,
       (value) => {
@@ -497,15 +499,18 @@ export default {
     watch(
       () => props.checked,
       (value) => {
-        const ROW_CHECK_INDEX = 1;
-        const ROW_DATA_INDEX = 2;
+        checkInfo.checkedRows = value;
+        checkInfo.isHeaderChecked = false;
         let store = stores.originStore;
         if (filterInfo.isSearch && stores.searchStore) {
           store = stores.searchStore;
         }
-        checkInfo.checkedRows = value;
-        for (let ix = 0; ix < store.length; ix++) {
-          store[ix][ROW_CHECK_INDEX] = value.includes(store[ix][ROW_DATA_INDEX]);
+        store.forEach((row) => {
+          row[ROW_CHECK_INDEX] = checkInfo.checkedRows.includes(row[ROW_DATA_INDEX]);
+        });
+        if (checkInfo.checkedRows.length
+          && store.length === checkInfo.checkedRows.length) {
+          checkInfo.isHeaderChecked = true;
         }
       },
     );
@@ -560,7 +565,7 @@ export default {
             let isShow = false;
             for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
               const column = stores.orderedColumns[ix] || {};
-              let columnValue = row[2][ix];
+              let columnValue = row[ROW_DATA_INDEX][ix];
               let columnType = column.type;
               if (columnValue) {
                 if (typeof columnValue === 'object') {
@@ -588,10 +593,10 @@ export default {
         let store = stores.originStore;
         let checkSize = checkInfo.checkedRows.length;
         for (let ix = 0; ix < store.length; ix++) {
-          if (checkInfo.checkedIndex.has(store[ix][0])) {
-            store[ix][1] = true;
+          if (checkInfo.checkedIndex.has(store[ix][ROW_INDEX])) {
+            store[ix][ROW_CHECK_INDEX] = true;
           } else {
-            store[ix][1] = false;
+            store[ix][ROW_CHECK_INDEX] = false;
           }
         }
         if (filterInfo.isSearch && stores.searchStore) {

package/src/components/tabs/Tabs.vue

@@ -1,5 +1,10 @@
 <template>
   <section
+    v-resize="onResize"
+    v-observe-visibility="{
+      callback: onResize,
+      once: true,
+    }"
     class="ev-tabs"
     :class="{
       closable,
@@ -85,7 +90,7 @@
 import {
   ref, reactive, computed,
   provide, triggerRef,
-  onBeforeUpdate, nextTick, onUpdated,
+  onBeforeUpdate, nextTick,
 } from 'vue';
 
 export default {
@@ -215,16 +220,6 @@ export default {
       }
     });
 
-    // 최초 렌더링 시 El의 너비 확인
-    nextTick(() => {
-      observeListEl();
-    });
-
-    // 화면 업데이트 시 El의 너비 확인
-    onUpdated(() => {
-      observeListEl();
-    });
-
     /**
      *  탭 클릭 로직
      */
@@ -342,6 +337,10 @@ export default {
       tabCloneList.value.splice(0);
     };
 
+    const onResize = () => {
+      observeListEl();
+    };
+
     return {
       mv,
       computedTabList,
@@ -359,6 +358,8 @@ export default {
       dragendTab,
       dragSelectCls,
       selectIdxCls,
+
+      onResize,
     };
   },
 };

package/src/components/treeGrid/TreeGrid.vue

@@ -1,4 +1,22 @@
 <template>
+  <div
+    v-if="!!$slots.toolbar"
+    class="toolbar-wrapper"
+    :style="`width: ${gridWidth};`"
+  >
+    <!-- Toolbar -->
+    <toolbar v-if="!!$slots.toolbar" >
+      <template #toolbarWrapper>
+        <slot
+          name="toolbar"
+          :item="{
+            onSearch,
+          }"
+        >
+        </slot>
+      </template>
+    </toolbar>
+  </div>
   <div
     ref="grid-wrapper"
     v-resize="onResize"
@@ -76,10 +94,10 @@
         <table>
           <tbody>
             <tree-grid-node
-              v-for="(item, idx) in viewStore"
+              v-for="(node, idx) in viewStore"
               :key="idx"
               :selected-data="selectedRow"
-              :node-data="item"
+              :node-data="node"
               :use-checkbox="useCheckbox"
               :ordered-columns="orderedColumns"
               :expand-icon="option.expandIcon"
@@ -96,6 +114,26 @@
               @click-tree-data="onRowClick"
               @dbl-click-tree-data="onRowDblClick"
             >
+              <!-- cell renderer -->
+              <template
+                v-for="(column, cellIndex) in orderedColumns"
+                :key="cellIndex"
+                v-slot:[getSlotName(column.field)] = "{ item }"
+              >
+                <template v-if="!!$slots[column.field]">
+                  <slot
+                    :name="column.field"
+                    :item="{
+                       data: item.data,
+                       fieldName: column.field
+                    }"
+                  >
+                  </slot>
+                </template>
+                <template v-else>
+                  <span :title="node[column.field]">{{node[column.field]}}</span>
+                </template>
+              </template>
             </tree-grid-node>
             <tr v-if="!viewStore.length">
               <td class="is-empty">No records</td>
@@ -126,6 +164,7 @@
 <script>
 import { reactive, toRefs, computed, watch, nextTick } from 'vue';
 import treeGridNode from './TreeGridNode';
+import Toolbar from './treeGrid.toolbar';
 import {
   commonFunctions,
   scrollEvent,
@@ -134,12 +173,14 @@ import {
   checkEvent,
   contextMenuEvent,
   treeEvent,
+  filterEvent,
 } from './uses';
 
 export default {
   name: 'EvTreeGrid',
   components: {
     treeGridNode,
+    Toolbar,
   },
   props: {
     columns: {
@@ -287,6 +328,10 @@ export default {
       handleExpand,
     } = treeEvent({ stores, onResize });
 
+    const {
+      onSearch,
+    } = filterEvent({ stores, getConvertValue, calculatedColumn, updateVScroll });
+
     watch(
       () => props.checked,
       (value) => {
@@ -301,6 +346,12 @@ export default {
         }
       },
     );
+    watch(
+      () => props.selected,
+      (value) => {
+        selectInfo.selectedRow = value;
+      },
+    );
     watch(
       () => checkInfo.useCheckbox.mode,
       () => {
@@ -381,6 +432,7 @@ export default {
         'min-width': render ? `${resizeInfo.rendererMinWidth}px;` : `${resizeInfo.minWidth}px`,
       };
     };
+    const getSlotName = column => `${column}Node`;
 
     return {
       ...toRefs(styleInfo),
@@ -409,6 +461,7 @@ export default {
       onCheckAll,
       setContextMenu,
       onContextMenu,
+      onSearch,
       handleExpand,
       gridStyle,
       gridClass,
@@ -417,6 +470,7 @@ export default {
       isHeaderCheckbox,
       getColumnClass,
       getColumnStyle,
+      getSlotName,
       bodyStyle,
     };
   },

package/src/components/treeGrid/TreeGridNode.vue

@@ -75,7 +75,16 @@
               <i></i>
             </span>
           </span>
-          <span :title="node[column.field]">{{node[column.field]}}</span>
+          <!-- cell renderer -->
+          <template v-if="!!$slots[column.field + 'Node']">
+            <slot
+              :name="column.field + 'Node'"
+              :item="{
+                data: node.data,
+              }"
+            >
+            </slot>
+          </template>
         </div>
       </td>
     </template>

package/src/components/treeGrid/treeGrid.toolbar.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="description 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 {
+  margin-bottom: 10px;
+  overflow: hidden;
+}
+.tree-grid-toolbar > .search {
+  float: right;
+  margin-right: 0;
+}
+.tree-grid-toolbar > .ev-button {
+  margin: 0 2px 0 2px;
+}
+</style>

package/src/components/treeGrid/uses.js

@@ -572,29 +572,89 @@ export const treeEvent = (params) => {
       node.checked = false;
       node.index = index++;
       node.parent = parent;
+      node.isFilter = false;
       stores.treeStore.push(node);
-
       if (node.children && node.children.length > 0) {
         node.hasChild = true;
         setTreeStore(node.children, node.level + 1, node.show && node.expand, node);
       }
     });
   };
-  const setExpandNode = (children, isShow) => {
+  const setExpandNode = (children, isShow, isFilter) => {
     children.forEach((nodeObj) => {
       const node = nodeObj;
-      node.show = isShow;
-
+      node.show = isFilter && isShow ? node.isFilter : isShow;
       if (node.hasChild) {
-        setExpandNode(node.children, node.show && node.expand);
+        setExpandNode(node.children, node.show && node.expand, node.isFilter);
       }
     });
   };
   const handleExpand = (node) => {
     const data = node;
     data.expand = !data.expand;
-    setExpandNode(data.children, data.expand);
+    setExpandNode(data.children, data.expand, data.isFilter);
     onResize();
   };
   return { setTreeStore, handleExpand };
 };
+
+export const filterEvent = (params) => {
+  const { stores, getConvertValue, calculatedColumn, updateVScroll } = params;
+  const makeParentShow = (data) => {
+    if (!data?.parent) {
+      return;
+    }
+    const { parent } = data;
+    parent.show = true;
+    parent.expand = true;
+    parent.isFilter = true;
+    makeParentShow(parent);
+  };
+  let timer = null;
+  const onSearch = (searchWord) => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      stores.treeStore.forEach((row) => {
+        row.show = false;
+        row.isFilter = false;
+      });
+      if (searchWord) {
+        const filterStores = stores.treeStore.filter((row) => {
+          let isSameWord = false;
+          for (let ix = 0; ix < stores.orderedColumns.length; ix++) {
+            const column = stores.orderedColumns[ix] || {};
+            let columnValue = row[column.field];
+            let columnType = column.type;
+            if (columnValue) {
+              if (!columnType) {
+                columnType = 'string';
+              }
+              columnValue = getConvertValue(columnType, columnValue).toString();
+              isSameWord = columnValue.toLowerCase()
+                .includes(searchWord.toString().toLowerCase());
+              if (isSameWord) {
+                break;
+              }
+            }
+          }
+          return isSameWord;
+        });
+        filterStores.forEach((row) => {
+          row.show = true;
+          row.isFilter = true;
+          makeParentShow(row);
+        });
+      } else {
+        stores.treeStore.forEach((row) => {
+          row.show = true;
+          row.isFilter = false;
+        });
+      }
+      calculatedColumn();
+      updateVScroll();
+    }, 500);
+  };
+  return { onSearch };
+};