evui 3.1.41 → 3.1.45

package/src/components/datePicker/DatePicker.vue

@@ -4,10 +4,10 @@
     v-clickoutside="clickOutsideDropbox"
     class="ev-date-picker"
     :class="{
-      disabled,
+      disabled : $props.disabled,
     }"
   >
-    <template v-if="mode === 'date' || mode === 'dateTime'">
+    <template v-if="$props.mode === 'date' || $props.mode === 'dateTime'">
       <span class="ev-date-picker-prefix-icon">
         <i class="ev-icon-calendar" />
       </span>
@@ -15,15 +15,18 @@
         v-model.trim="currentValue"
         type="text"
         class="ev-input"
-        :placeholder="placeholder"
-        :disabled="disabled"
+        :placeholder="$props.placeholder"
+        :disabled="$props.disabled"
         @click="clickSelectInput"
         @keydown.enter.prevent="validateValue(currentValue)"
         @change="validateValue(currentValue)"
       />
     </template>
     <template v-else>
-      <div class="ev-date-picker-tag-wrapper">
+      <div
+          class="ev-date-picker-tag-wrapper"
+          @click="clickSelectInput"
+      >
         <span class="ev-date-picker-prefix-icon">
           <i class="ev-icon-calendar" />
         </span>
@@ -31,23 +34,22 @@
           type="text"
           class="ev-input readonly"
           readonly
-          :placeholder="placeholder"
-          :disabled="disabled"
-          @click="clickSelectInput"
+          :placeholder="$props.placeholder"
+          :disabled="$props.disabled"
         />
         <template
-          v-if="mode === 'dateMulti'
-          && (options.multiType === 'date' || !options.tagShorten)"
+          v-if="$props.mode === 'dateMulti'
+          && ($props.options.multiType === 'date' || !$props.options.tagShorten)"
         >
           <div
             v-for="(item, idx) in mv"
             :key="`${item}_${idx}`"
             class="ev-select-tag"
-            :class="{ num: options.multiType !== 'date' }"
+            :class="{ num: $props.options.multiType !== 'date' }"
           >
             <span class="ev-tag-name"> {{ item }} </span>
             <span
-              v-if="options.multiType === 'date'"
+              v-if="$props.options.multiType === 'date'"
               class="ev-tag-suffix"
               @click.stop="[removeMv(item), changeDropboxPosition()]"
             >
@@ -68,7 +70,7 @@
         </template>
       </div>
     </template>
-    <template v-if="clearable">
+    <template v-if="$props.clearable">
       <span
         v-show="isClearableIcon"
         class="ev-input-suffix"
@@ -82,17 +84,38 @@
         v-if="isDropbox"
         ref="dropbox"
         class="ev-date-picker-dropdown"
-        :class="mode"
+        :class="$props.mode"
         :style="dropboxPosition"
       >
-        <ev-calendar
-          key="fromCalendar"
-          v-model="mv"
-          :mode="mode"
-          :month-notation="monthNotation"
-          :day-of-the-week-notation="dayOfTheWeekNotation"
-          :options="options"
+        <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__button-layout">
+          <ev-button-group>
+            <ev-button
+               v-for="button in usedShortcuts"
+               :key="button.key"
+               :type="button.isActive ? 'primary' : 'default'"
+               @click="clickShortcut(button.key)"
+            >
+              {{ button.label }}
+            </ev-button>
+          </ev-button-group>
+        </div>
+        <div
+            v-if="usedShortcuts.length"
+            class="ev-date-picker-dropbox__divider"
         />
+        <div
+            :class="{ 'ev-date-picker-dropbox__calendar':usedShortcuts.length }">
+          <ev-calendar
+            key="fromCalendar"
+            v-model="mv"
+            :mode="$props.mode"
+            :month-notation="$props.monthNotation"
+            :day-of-the-week-notation="$props.dayOfTheWeekNotation"
+            :options="$props.options"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -100,7 +123,7 @@
 
 <script>
 import { datePickerClickoutside as clickoutside } from '@/directives/clickoutside';
-import { useModel, useDropdown } from './uses';
+import { useModel, useDropdown, useShortcuts } from './uses';
 
 export default {
   name: 'EvDatePicker',
@@ -116,7 +139,8 @@ export default {
         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]/);
         if (Array.isArray(value)) {
           return value.every(v => !!(!v
-            || (v.length === 10 && dateReg.exec(v))));
+              || (v.length === 10 && dateReg.exec(v)))
+              || (v.length === 19 && dateTimeReg.exec(v)));
         }
         return !!(!value
           || (value.length === 10 && dateReg.exec(value))
@@ -138,7 +162,7 @@ export default {
     mode: {
       type: String,
       default: 'date',
-      validator: value => ['date', 'dateTime', 'dateMulti', 'dateRange']
+      validator: value => ['date', 'dateTime', 'dateMulti', 'dateRange', 'dateTimeRange']
         .indexOf(value) !== -1,
     },
     monthNotation: {
@@ -160,11 +184,33 @@ export default {
         limit: 1,
         tagShorten: false,
       }),
-      validator: ({ multiType, multiDayLimit, disabledDate, tagShorten }) =>
-        (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
+      validator: ({ multiType, multiDayLimit, disabledDate, tagShorten, timeFormat }) => {
+        const timeReg = new RegExp(/(HH|2[0-3]|[01][0-9]):(mm|[0-5][0-9]):(ss|[0-5][0-9])/);
+        return (multiType ? ['weekday', 'week', 'date'].indexOf(multiType) !== -1 : true)
         && (multiDayLimit ? typeof multiDayLimit === 'number' && multiDayLimit > 0 : true)
         && (disabledDate ? typeof disabledDate === 'function' : true)
-        && (tagShorten !== undefined ? typeof tagShorten === 'boolean' : true),
+        && (tagShorten !== undefined ? typeof tagShorten === 'boolean' : true)
+        && Array.isArray(timeFormat)
+            ? timeFormat.every(v => !!(!v || timeReg.exec(v)))
+            : !!(!timeFormat || (timeReg.exec(timeFormat)));
+      },
+    },
+    shortcuts: {
+      type: Array,
+      default: () => [],
+      validator: (value) => {
+        if (!value.length) {
+          return true;
+        }
+        return value.every(({ shortcutDate }) => {
+          if (typeof shortcutDate !== 'function') {
+            return false;
+          }
+          const date = shortcutDate();
+          return (Array.isArray(date) && date.every(d => d instanceof Date) && date[0] <= date[1])
+              || (typeof date === 'object' && date instanceof Date);
+        });
+      },
     },
   },
   emits: {
@@ -190,10 +236,20 @@ export default {
       clickSelectInput,
       clickOutsideDropbox,
       changeDropboxPosition,
-    } = useDropdown({
+    } = useDropdown();
+
+    const {
+      usedShortcuts,
+      clickShortcut,
+      setActiveShortcut,
+    } = useShortcuts({
+      mv,
       currentValue,
+      clickOutsideDropbox,
     });
 
+    setActiveShortcut();
+
     return {
       mv,
       currentValue,
@@ -211,6 +267,9 @@ export default {
       clickSelectInput,
       clickOutsideDropbox,
       changeDropboxPosition,
+
+      usedShortcuts,
+      clickShortcut,
     };
   },
 };
@@ -311,6 +370,7 @@ export default {
 
   &.num {
     padding-right: 8px;
+    cursor: pointer;
   }
 
   .ev-tag-suffix {
@@ -329,8 +389,26 @@ export default {
   }
 }
 
-.ev-date-picker-dropbox-wrapper {
-  height: 0;
-  z-index: 100;
+.ev-date-picker-dropbox {
+  &-wrapper {
+    height: 0;
+    z-index: 100;
+  }
+
+  &__button-layout {
+    margin: 5px;
+  }
+
+  &__divider {
+    width: 100%;
+    height: 2px;
+    margin: 8px 0;
+    background-color: #E5E5E5;
+  }
+
+  &__calendar {
+    height: 100%;
+    margin: 5px;
+  }
 }
 </style>

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,189 @@ 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)}`;
+  };
+
+  /**
+   * 초기 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;
+    const timeFormat = props.options?.timeFormat;
+
+    if (isRange) {
+      const [fromDate, toDate] = shortcutDate();
+      if (props.mode === 'dateTimeRange') {
+        if (timeFormat?.length) {
+          const [fromTimeFormat, toTimeFormat] = timeFormat;
+
+          mv.value = [
+            getChangedValueByTimeFormat(fromTimeFormat, formatDateTime(fromDate)),
+            getChangedValueByTimeFormat(toTimeFormat, formatDateTime(toDate)),
+          ];
+        } else {
+          mv.value = [formatDateTime(fromDate), formatDateTime(toDate)];
+        }
+      } else {
+        mv.value = [formatDate(fromDate), formatDate(toDate)];
+      }
+    } else {
+      const sDate = shortcutDate();
+      mv.value = props.mode === 'dateTime'
+          ? getChangedValueByTimeFormat(
+              timeFormat,
+              formatDateTime(sDate))
+          : formatDate(sDate);
+    }
+
+    clearShortcuts();
+    activeShortcut(targetKey);
+  };
+
+  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/treeGrid/TreeGrid.vue

@@ -94,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"
@@ -114,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>
@@ -412,6 +432,7 @@ export default {
         'min-width': render ? `${resizeInfo.rendererMinWidth}px;` : `${resizeInfo.minWidth}px`,
       };
     };
+    const getSlotName = column => `${column}Node`;
 
     return {
       ...toRefs(styleInfo),
@@ -449,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

@@ -1,5 +1,5 @@
 <template>
-  <div class="description treeGridToolbar">
+  <div class="description tree-grid-toolbar">
     <slot name="toolbarWrapper"></slot>
   </div>
 </template>
@@ -12,15 +12,15 @@ export default {
 
 <style lang="scss">
 @import '../../style/index.scss';
-.treeGridToolbar {
+.tree-grid-toolbar {
   margin-bottom: 10px;
   overflow: hidden;
 }
-.treeGridToolbar > .search {
+.tree-grid-toolbar > .search {
   float: right;
   margin-right: 0;
 }
-.treeGridToolbar > .ev-button {
+.tree-grid-toolbar > .ev-button {
   margin: 0 2px 0 2px;
 }
 </style>