evui 2.1.0 → 2.1.3

package/src/components/datepicker/calendar.vue

@@ -12,9 +12,6 @@
   import Calendar from '@/components/datepicker/calendar.core';
 
   export default {
-    components: {
-      Calendar,
-    },
     props: {
       value: {
         type: String,

package/src/components/datepicker/datepicker.vue

@@ -23,15 +23,12 @@
 </template>
 
 <script>
-  import Calendar from '@/components/datepicker/calendar.core';
   import moment from 'moment';
+  import Calendar from '@/components/datepicker/calendar.core';
 
-  const prefixCls = 'evui-input-text';
+  const prefixCls = 'ev-input-text';
 
   export default {
-    components: {
-      moment,
-    },
     directives: {
       // 해당 element 외의 클릭 시
       'click-outside': {
@@ -87,6 +84,7 @@
           return {
             localeType: 'YYYY-MM-DD',
             initSelectDay: this.value ? new Date(moment(this.value)) : new Date(),
+            theme: 'light',
           };
         },
       },
@@ -103,6 +101,7 @@
         inputTextMaxLength: 10, // default: YYYY-MM-DD
         inputNumberMaxLength: 8, // default: YYYYMMDD
         cursorPosition: 0,
+        onceSetDateTime: true,
       };
     },
     computed: {
@@ -127,6 +126,7 @@
           // localeType이 없는 경우 YYYY-MM-DD가 default
           localeType: this.options.localeType
             ? this.options.localeType : 'YYYY-MM-DD',
+          theme: this.options.theme,
         });
       },
       computedValue() {
@@ -179,6 +179,7 @@
             }
             let preText = '';
             let postText = '';
+            // 8칸보다 오버해서 숫자를 입력하는 경우
             if (numberValueLength > vm.inputNumberMaxLength) {
               // 인풋박스 마지막에 글씨 쓰는 경우
               if (numberValueLength - vm.inputNumberMaxLength === 1) {
@@ -197,12 +198,13 @@
                     // '-', ' ', ':' 특수문자 전에 값을 입력하면 +1칸 커서 왼쪽 자동이동 후 값이 변환됨
                     beforeSpecialSymbolTerm = 1;
                   }
-                  preText = numberValue.slice(0, numberValueCursor);
+                  preText = numberValue.slice(0, numberValueCursor + beforeSpecialSymbolTerm);
                   postText = numberValue.slice(numberValueCursor + beforeSpecialSymbolTerm + 1,
                     numberValueLength);
                   setValue = vm.addSpecialSymbols(vm.validNumber(preText + postText));
                   vm.calendar.setDateTime(moment(setValue, vm.options.localeType));
                   vm.$refs.datepickerText.value = setValue;
+                  vm.dataValue = setValue;
                   vm.$refs.datepickerText.selectionStart = (currCursor + afterSpecialSymbolTerm)
                     + beforeSpecialSymbolTerm;
                   vm.$refs.datepickerText.selectionEnd = (currCursor + afterSpecialSymbolTerm)
@@ -213,14 +215,18 @@
                   postText = numberValue.slice(numberValueCursor + 1, numberValueLength);
                   setValue = vm.addSpecialSymbols(vm.validNumber(preText + postText));
                   vm.$refs.datepickerText.value = setValue;
+                  vm.dataValue = setValue;
                   vm.$refs.datepickerText.selectionStart = currCursor;
                   vm.$refs.datepickerText.selectionEnd = currCursor;
                 }
               }
             } else {
-              // 글씨 max가 아닌경우
+              // 숫자 입력 값이 max이거나 그보다 작은 경우
               setValue = vm.addSpecialSymbols(vm.validNumber(targetValue));
               vm.$refs.datepickerText.value = setValue;
+              if (numberValueLength === vm.inputNumberMaxLength) {
+                vm.dataValue = setValue;
+              }
               vm.$refs.datepickerText.selectionStart = currCursor;
               vm.$refs.datepickerText.selectionEnd = currCursor;
               let specialSymbolTerm = 0;
@@ -238,12 +244,20 @@
               if (numberValueLength > 3 && numberValueLength !== 5 && numberValueLength !== 7) {
                 vm.calendar.setDateTime(moment(setValue, vm.options.localeType));
               }
+              if (!numberValueLength) {
+                vm.calendar.setDateTime(null);
+                vm.dataValue = null;
+              }
             }
           },
         });
       },
     },
     watch: {
+      value(v) {
+        this.calendar.setDateTime(moment(v));
+        this.dataValue = v;
+      },
       computedValue(v) {
         this.$emit('input', v);
       },
@@ -259,6 +273,7 @@
       this.inputNumberMaxLength = this.removeSpecialSymbols(this.options.localeType).length;
     },
     beforeDestroy() {
+      this.calendar.removeListeners();
       this.calendar.removeDropdown();
     },
     methods: {
@@ -591,29 +606,42 @@
   };
 </script>
 
-<style scoped>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-datepicker {
     width: 235px;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
+
   .ev-datepicker-input-wrapper {
-    width: 235px;
+    width: 100%;
     height: 32px;
   }
+
   .ev-datepicker-input {
-    width: 235px;
+    width: 100%;
     height: 32px;
     line-height: 32px;
-    border: 1px solid #DCDFE6;
-    border-radius: 4px;
-    color: #606266;
+    border-radius: $border-radius-base;
     padding: 0 5px 0 5px;
+    background-color: transparent;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('datepicker-input-border');
+    }
   }
+
   .fit10,
   .fit13,
   .fit16,
   .fit19 {
-    height: 23px;
-    line-height: 23px;
+    height: 25px;
+    line-height: 25px;
   }
   .fit10 {
     width: 85px;

package/src/components/datepicker/index.js

@@ -1,3 +1,7 @@
 import Datepicker from './datepicker';
+import Calendar from './calendar';
 
-export default Datepicker;
+export {
+  Datepicker,
+  Calendar,
+};

package/src/components/grid/grid.filter.vue

@@ -0,0 +1,290 @@
+<template>
+  <div
+    v-click-outside="onHide"
+    :style="`top: ${value.top || 0}px; left: ${value.left || 0}px;`"
+    class="evui-table-filter"
+  >
+    <div
+      class="evui-table-filter-row"
+      @mouseover.stop="showFilterCondition = false"
+      @click="$emit('sort', value.field)"
+    >
+      <ev-icon
+        :cls="'sort-icon ei-s ei-descending'"
+      />
+      <span>Sort By Descending</span>
+    </div>
+    <div
+      class="evui-table-filter-row"
+      @mouseover.stop="showFilterCondition = false"
+      @click="$emit('sort', value.field)"
+    >
+      <ev-icon
+        :cls="'sort-icon ei-s ei-ascending'"
+      />
+      <span>Sort By Ascending</span>
+    </div>
+    <div
+      class="evui-table-filter-row"
+      @mouseover.stop="onFilter"
+    >
+      <ev-checkbox
+        v-model="value.use"
+        :type="`square`"
+        :size="'small'"
+      />
+      <span>Filter</span>
+      <ev-icon
+        :cls="'ei-s ei-s-play'"
+        style="margin-left: auto; font-size: 14px"
+      />
+    </div>
+    <div
+      v-show="showFilterCondition"
+      ref="filterCondition"
+      class="filter-condition"
+    >
+      <div class="create-condition">
+        <ev-radio-group
+          v-model="value.method"
+          :size="`small`"
+        >
+          <ev-radio
+            :value="'or'"
+            style="font-size: 12px;"
+          >
+            OR
+          </ev-radio>
+          <ev-radio
+            :value="'and'"
+            style="font-size: 12px;"
+          >
+            AND
+          </ev-radio>
+        </ev-radio-group>
+        <ev-button
+          :type="'primary'"
+          :size="'small'"
+          @click="onAdd"
+        >
+          Add Condition
+        </ev-button>
+      </div>
+      <div class="condition-list">
+        <div
+          v-for="(item, index) in conditions"
+          :key="item.id"
+          class="condition-item"
+        >
+          <ev-checkbox
+            v-model="item.use"
+            :value="item.id"
+            :type="`square`"
+            :size="'small'"
+            @on-click="onClick(index)"
+          />
+          <ev-selectbox
+            v-model="item.type"
+            :items="defaultCondition[value.type]"
+            style="width: 100px;"
+          />
+          <ev-text-field
+            v-model="item.value"
+            :type="'text'"
+            style="width: 100px;"
+            @input="inputFn(index)"
+          />
+          <ev-icon
+            :cls="'ei-s-close'"
+            @click="onRemove(index)"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { cloneDeep } from 'lodash-es';
+  import debounce from '@/common/utils.debounce';
+
+  export default {
+    directives: {
+      'click-outside': {
+        bind(el, binding) {
+          const selectBoxEl = el;
+          const bubble = binding.modifiers.bubble;
+          const handler = (e) => {
+            if (bubble || (selectBoxEl !== e.target && !selectBoxEl.contains(e.target))) {
+              binding.value(e);
+            }
+          };
+          selectBoxEl.vueClickOutside = handler;
+
+          document.addEventListener('click', handler);
+        },
+        unbind(el) {
+          const selectBoxEl = el;
+          document.removeEventListener('click', selectBoxEl.vueClickOutside);
+          selectBoxEl.vueClickOutside = null;
+        },
+      },
+    },
+    props: {
+      value: {
+        type: Object,
+        default: null,
+      },
+      show: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        itemSeq: 0,
+        prefixClass: 'evui-table-filter',
+        showFilterCondition: false,
+        conditions: [],
+        defaultCondition: {
+          string: [
+            { name: 'Equal', value: 'equal' },
+            { name: 'Not equal', value: 'notEqual' },
+            { name: 'Like', value: 'like' },
+            { name: 'Not Like', value: 'notLike' },
+          ],
+          number: [
+            { name: '>', value: 'greaterThan' },
+            { name: '<', value: 'lessThan' },
+            { name: '=', value: 'equal' },
+          ],
+        },
+        inputFn: debounce(this.onInput, 250),
+      };
+    },
+    watch: {
+      conditions() {
+        this.$set(this.value, 'conditions', this.conditions.filter(condition => !condition.isInit));
+      },
+    },
+    mounted() {
+      if (this.value.conditions.length) {
+        this.conditions = cloneDeep(this.value.conditions);
+        this.itemSeq = this.conditions.reduce((maxSeq, condition) => {
+          const seq = parseInt(condition.id.split('-')[1], 10);
+          if (maxSeq < seq) {
+            maxSeq = seq; // eslint-disable-line no-param-reassign
+          }
+
+          return maxSeq;
+        }, 0);
+      } else {
+        this.conditions.push({
+          id: `item-${this.itemSeq++}`,
+          use: true,
+          type: this.value.type === 'string' ? 'like' : 'greaterThan',
+          value: '',
+          isInit: true,
+        });
+      }
+    },
+    methods: {
+      onInput(index) {
+        const condition = this.conditions[index];
+
+        if (condition.isInit) {
+          condition.isInit = false;
+          if (!this.value.use) {
+            this.value.use = true;
+          }
+        }
+
+        this.conditions.splice(index, 1, condition);
+      },
+      onHide() {
+        this.$emit('update:show', false);
+      },
+      onFilter({ currentTarget }) {
+        this.showFilterCondition = true;
+        this.$refs.filterCondition.style.cssText = `
+          top: ${currentTarget.offsetTop + 1}px;
+          left: ${currentTarget.offsetLeft + currentTarget.offsetWidth + 2}px;`;
+      },
+      onAdd() {
+        this.conditions.push({
+          id: `item-${this.itemSeq++}`,
+          use: true,
+          type: this.value.type === 'string' ? 'like' : 'greaterThan',
+          value: '',
+          isInit: true,
+        });
+      },
+      onRemove(index) {
+        if (index) {
+          this.conditions.splice(index, 1);
+        } else {
+          this.itemSeq = 0;
+          this.$set(this.conditions, 0, {
+            id: `item-${this.itemSeq++}`,
+            use: false,
+            type: this.value.type === 'string' ? 'like' : 'greaterThan',
+            value: '',
+          });
+        }
+      },
+      onClick(index) {
+          const condition = this.conditions[index];
+          condition.use = !condition.use;
+          this.conditions.splice(index, 1, condition);
+      },
+    },
+  };
+</script>
+<style scoped>
+  .evui-table-filter {
+    position: absolute;
+    background-color: #f0f0f0;
+    padding: 2px 0;
+  }
+  .evui-table-filter-row {
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+    font-size: 12px;
+    padding: 3px 5px;
+  }
+  .evui-table-filter-row:hover{
+    padding: 2px;
+    margin: 0 2px;
+    background-color: #e6e6e6;
+    border: 1px solid #9d9d9d;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  .sort-icon {
+    margin: 0 7px 0 2px;
+    font-size: 14px;
+  }
+  .filter-condition {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    background-color: white;
+    box-shadow: 1px 1px 2px 2px #9d9d9d;
+    padding: 3px;
+  }
+  .create-condition {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 3px;
+    font-size: 12px;
+  }
+  .condition-list {
+    display: flex;
+    flex-direction: column;
+  }
+  .condition-item {
+    display: flex;
+    align-items: center;
+  }
+</style>>