evui 2.0.9 → 2.1.2

package/src/components/textfield/textfield.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="width: 100%; height: 100%;">
     <div
       :style="wrapStyle"
       :class="wrapClasses"
@@ -51,6 +51,12 @@
       >
         <p>{{ errorMsgWrapper }}</p>
       </div>
+      <div
+        v-show="customErrorMsg"
+        :class="errorTextClass"
+      >
+        <p>{{ customErrorMsg }}</p>
+      </div>
       <div
         v-show="useMaxLength"
         :class="maxLengthClass"
@@ -121,6 +127,10 @@
         type: String,
         default: 'Wrong Message',
       },
+      customErrorMsg: {
+        type: String,
+        default: '',
+      },
       borderColor: {
         type: String,
         default: '#dddee1',
@@ -151,7 +161,7 @@
         return {
           width: getSize(getQuantity(this.width)),
           height: getSize(getQuantity(this.height)),
-          background: this.disabled ? '#f3f3f3' : '#fff',
+          lineHeight: this.type !== 'textarea' ? getSize(getQuantity(this.height)) : null,
         };
       },
       wrapTextClass() {
@@ -174,6 +184,17 @@
       value(val) {
         this.setCurrentValue(val);
       },
+      useRegExp(val) {
+        if (val) {
+          this.validateError(this.currentValue);
+        }
+      },
+      regExp() {
+        this.validateError(this.currentValue);
+      },
+      errorMsg(val) {
+        this.errorMsgWrapper = val;
+      },
     },
     created() {
       this.validateError(this.currentValue);
@@ -253,22 +274,16 @@
           this.cssError = false;
           return false;
         }
-
-        const filteredValue = checked[0];
-        if (filteredValue.length !== 0) {
-          this.textError = true;
-          this.cssError = true;
-          return true;
-        }
-
-        this.textError = false;
-        this.cssError = false;
-        return false;
+        this.textError = true;
+        this.cssError = true;
+        return true;
       },
     },
   };
 </script>
-<style>
+<style lang="scss">
+  @import '~@/styles/default';
+
   .ev-input {
     display: inline-block;
     position: relative;
@@ -278,23 +293,27 @@
     padding: 0;
     width: 100%;
     height: 100%;
-    border-radius: 4px;
-    border: 2px solid #dddee1;
-    color: #495060;
+    border-radius: $border-radius-base;
     font-size: 12px;
     line-height: 2;
     cursor: text;
     background-image: none;
     transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  }
 
-  .ev-input:hover {
-    border-color : #adaeb1;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('textfield-input-border');
+      background-color: evThemed('textfield-input-background');
+    }
   }
 
-  .ev-input.focus, .ev-input.focus:hover {
-    border-color : #2d8cf0;
+  .ev-input.focus,
+  .ev-input.focus:hover {
     opacity: 1;
+
+    @include evThemify() {
+      border-color: evThemed('color-primary');
+    }
   }
 
   .ev-input-text {
@@ -304,29 +323,12 @@
     text-align: left;
     outline: 0;
     -moz-appearance: textfield;
-    color: #666;
     border: 0;
-    border-radius: 4px;
-  }
-
-  .ev-input-text[disabled] {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #495060;
-  }
+    background-color: transparent;
 
-  .ev-input-disabled .ev-input-text {
-    background-color: #f3f3f3;
-    cursor: not-allowed;
-    color: #5f5d5d;
-  }
-
-  .ev-input-disabled .ev-input-text.evui-input-textarea.ev-input-password {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #5f5d5d;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
   .ev-input-password {
@@ -336,62 +338,80 @@
     text-align: left;
     outline: 0;
     -moz-appearance: textfield;
-    color: #666;
     border: 0;
-    border-radius: 4px;
-  }
+    background-color: transparent;
 
-  .ev-input-password[disabled] {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #495060;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
-  .ev-input-disabled .ev-input-password {
-    background-color: #f3f3f3;
-    cursor: not-allowed;
-    color: #5f5d5d;
-  }
+  .ev-input-textarea {
+    display: block;
+    text-align: left;
+    line-height: 1.5;
+    padding: 4px 7px;
+    outline: 0;
+    border: 0;
+    overflow: hidden;
+    border-radius: 4px;
+    background-color: transparent;
+    resize: none;
 
-  .ev-input-disabled:hover, .ev-input:hover.error,
-  .ev-input.focus.error, .ev-input.error {
-    border-color : #d77f7f;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
-  .ev-input-disabled .ev-input {
-    opacity: .72;
+  .ev-input-disabled {
     cursor: not-allowed;
-    background-color: #f3f3f3;
-  }
 
-  .ev-input.ev-input-disabled {
-    background-color: #f3f3f3;
+    @include evThemify() {
+      color: evThemed('textfield-input-disabled');
+      background-color: evThemed('textfield-input-disabled-background');
+    }
+
+    input,
+    textarea {
+      opacity: .72;
+      cursor: not-allowed;
+
+      @include evThemify() {
+        color: evThemed('textfield-input-disabled');
+      }
+    }
+
+    .ev-input,
+    .ev-input-text {
+      opacity: .72;
+      cursor: not-allowed;
+    }
+
+    .ev-input-text.evui-input-textarea.ev-input-password {
+      opacity: 1;
+    }
   }
 
-  .ev-input-disabled {
-    opacity: .72;
-    color: #5f5d5d !important;
+  .ev-input-text[disabled] {
+    opacity: 1;
     cursor: not-allowed;
   }
 
-  .ev-input-textarea {
-    display: block;
-    text-align: left;
-    line-height: 1.5;
-    padding: 4px 7px;
-    outline: 0;
-    color: #666;
-    border: 0;
-    overflow: hidden;
-    border-radius: 4px;
+  .ev-input-password[disabled] {
+    opacity: 1;
+    cursor: not-allowed;
   }
 
   .ev-input-textarea[disabled] {
-    background-color: #f3f3f3;
     opacity: 1;
     cursor: not-allowed;
-    color: #5f5d5d;
+  }
+
+  .ev-input-disabled:hover,
+  .ev-input:hover.error,
+  .ev-input.focus.error,
+  .ev-input.error {
+    border-color: $color-not-allow;
   }
 
   .ev-input-valid-check {
@@ -401,18 +421,21 @@
   .ev-input-valid-error {
     padding-left: 3px;
     padding-right: 5px;
-    color: #ed1313;
-    float:left
+    color: $color-not-allow;
+    float: left;
   }
 
   .ev-input-valid-max-length {
     padding-left: 5px;
     padding-right: 3px;
-    float:right
-  }
+    float: right;
 
-  .ev-input-valid-max-length.error {
-    color: #ed1313;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
+
+    &.error {
+      color: $color-not-allow;
+    }
   }
 </style>
-

package/src/components/timepicker/index.js

@@ -1,3 +1,3 @@
-import Timepicker from './timepicker';
+import timepicker from './timepicker';
 
-export default Timepicker;
+export default timepicker;

package/src/components/timepicker/spinner.vue

@@ -100,8 +100,7 @@
           const idx = this.findIndexToValue(clickedNumber);
           if (idx !== null) {
             // move scroll
-            this.$refs.spinnerContent.scrollTop
-              = this.$refs.spinnerLi[idx].offsetTop - 76;
+            this.$refs.spinnerContent.scrollTop = this.$refs.spinnerLi[idx].offsetTop - 76;
             this.initAllClass();
             this.activeClass(clickedNumber);
             if (clickFlag) {
@@ -149,31 +148,29 @@
     max-height: 185px;
   }
 
-  .evui-timepicker-spinner-content{
+  .evui-timepicker-spinner-content {
     overflow: scroll;
     height: 100%;
     max-height: inherit;
-    font-size: 0px; /*width 33.3% inline-block 시 필요*/
+    font-size: 0; /* width 33.3% inline-block 시 필요 */
   }
-  .evui-timepicker-spinner-content::-webkit-scrollbar
-  {
+  .evui-timepicker-spinner-content::-webkit-scrollbar {
     width: 5px;
-    height: 0px;
+    height: 0;
     background-color: rgba(0,0,0,0);
   }
 
-  .evui-timepicker-spinner-content:hover
-  {
+  .evui-timepicker-spinner-content:hover {
     overflow: scroll;
   }
-  .evui-timepicker-spinner-content:hover::-webkit-scrollbar
-  {
+
+  .evui-timepicker-spinner-content:hover::-webkit-scrollbar {
     width: 5px;
-    height: 0px;
-    background-color: #ffffff;
+    height: 0;
+    background-color: #FFFFFF;
   }
-  .evui-timepicker-spinner-content:hover::-webkit-scrollbar-thumb
-  {
+
+  .evui-timepicker-spinner-content:hover::-webkit-scrollbar-thumb {
     border-radius: 4px;
     background-color: rgba(0,0,0,.1);
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
@@ -186,6 +183,7 @@
     text-align: center;
     cursor: pointer;
   }
+
   .evui-timepicker-spinner-list .evui-timepicker-spinner-item {
     display: list-item;
     height: 32px;
@@ -195,11 +193,11 @@
   }
 
   .evui-timepicker-spinner-list .evui-timepicker-spinner-item:hover {
-    background-color: #f5f7fa;
+    background-color: #F5F7FA;
   }
   .evui-timepicker-spinner-list .evui-timepicker-spinner-item.active,
   .evui-timepicker-spinner-list .evui-timepicker-spinner-item.active:hover {
     background-color: #41B883;
-    color: #ffffff;
+    color: #FFFFFF;
   }
 </style>

package/src/components/timepicker/timepicker.vue

@@ -1,21 +1,20 @@
 <template>
   <div
-    v-click-outside="hideTimePicker"
     ref="timePickerDiv"
-    class="evui-timepicker"
+    v-click-outside="hideTimePicker"
+    class="ev-timepicker"
     @click="showTimePicker"
     @mouseover="suffixFadeFlag = true"
     @mouseleave="suffixFadeFlag = false"
   >
     <div
-      class="evui-timepicker-prefix"
+      class="ev-timepicker-prefix"
     />
     <div
       v-show="suffixShowFlag"
-      ref="suffix"
       :class="suffixFadeFlag ? 'suffix-fadein' : 'suffix-fadeout'"
-      class="evui-timepicker-suffix"
-      @click.stop="hideTimePicker"
+      class="ev-timepicker-suffix"
+      @click.stop="initSuffix"
     />
     <div
       :class="wrapClasses"
@@ -31,18 +30,19 @@
     </div>
     <div
       ref="timePickerPanel"
-      class="evui-timepicker-panel"
+      :class="{ excludeFooter: !showFooter }"
+      class="ev-timepicker-panel"
     >
-      <div class="evui-timepicker-content">
-        <div class="evui-timepicker-spinner">
-          <spinner
+      <div class="ev-timepicker-content">
+        <div class="ev-timepicker-spinner">
+          <ev-spinner
             v-for="(item, index) in dataSpinnerArr"
             v-show="dataSpinnerArr"
             ref="timePickerSpinner"
             :key="index"
             :from="item.from"
             :to="item.to"
-            :mid="(index === 0 || index === dataSpinnerArr.length - 1) ? false : true"
+            :mid="(!(index === 0 || index === dataSpinnerArr.length - 1))"
             :selected-number="lpad10(item.initNumber)"
             :selection-start-index="index"
             @setInput="setInputText"
@@ -51,22 +51,34 @@
           />
         </div>
       </div>
-      <div class="evui-timepicker-footer">
-        <button class="evui-timepicker-btn-cancel">Cancel</button>
-        <button class="evui-timepicker-btn-ok">OK</button>
+      <div
+        v-if="showFooter"
+        class="ev-timepicker-footer"
+      >
+        <button
+          class="ev-timepicker-btn-cancel"
+          @click.prevent="clickCancel"
+        >
+          Cancel
+        </button>
+        <button
+          class="ev-timepicker-btn-ok"
+        >
+          OK
+        </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-  import spinner from '@/components/timepicker/spinner';
+  import EvSpinner from './spinner';
 
-  const prefixCls = 'evui-input-text';
+  const prefixCls = 'ev-input-text';
 
   export default {
     components: {
-      spinner,
+      EvSpinner,
     },
     directives: {
       // 해당 element 외의 클릭 시
@@ -100,12 +112,22 @@
       },
       spinnerArr: {
         type: Array,
-        default: null,
+        default() {
+          return [
+            { from: 0, to: 23 },
+            { from: 0, to: 59 },
+            { from: 0, to: 59 },
+          ];
+        },
       },
       disabled: {
         type: Boolean,
         default: false,
       },
+      showFooter: {
+        type: Boolean,
+        default: true,
+      },
     },
     data() {
       return {
@@ -117,7 +139,6 @@
         selectedLiIndex: null, // 선택된 spinner의 index(ul의 index cf> 0, 1, 2)
         cursorPosition: 0,
         suffixFadeFlag: false,
-        timePickerFadeFlag: false,
         suffixShowFlag: false,
       };
     },
@@ -171,8 +192,8 @@
 
           // maxLength만큼 hhmiss가 모두 있는 경우 숫자를 입력 시 insert Mode처럼 덮어씌우기
           const postText = numberText.slice(
-            numberText.length > this.inputNumberMaxLength ?
-              changedCursorPosition + +1 : changedCursorPosition,
+            numberText.length > this.inputNumberMaxLength
+              ? changedCursorPosition + +1 : changedCursorPosition,
           );
 
           this.formattedText = null; // 필수
@@ -228,15 +249,16 @@
           for (let ix = 0, ixLen = this.$refs.timePickerSpinner.length; ix < ixLen; ix++) {
             this.$refs.timePickerSpinner[ix].liClick(true);
           }
-          this.timePickerFadeFlag = true;
         }
       },
       hideTimePicker() {
         this.$refs.timePickerPanel.style.display = 'none';
-        this.timePickerFadeFlag = false;
+      },
+      initSuffix() {
+        this.timeText = '000000';
       },
       removeColon(val) {
-        return val.replace(/:/gi, '');
+        return val ? val.replace(/:/gi, '') : '';
       },
       addColon(val) {
         const number = this.removeColon(val);
@@ -388,34 +410,53 @@
           this.dataSpinnerArr[index].initNumber = number;
         }
       },
+      clickCancel() {
+        this.hideTimePicker();
+        this.initSuffix();
+      },
     },
   };
 </script>
 
-<style scoped>
+<style lang="scss">
+  @import '~@/styles/default';
 
-  .evui-timepicker {
+  .ev-timepicker {
+    position: relative;
     width: 220px;
     height: 40px;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
+
+    .ev-input-text {
+      height: 100%;
+      padding: 0;
+    }
   }
 
-  .evui-timepicker input[type=text]{
+  .ev-timepicker input[type=text] {
     display: inline-block;
     width: 100%;
     height: 100%;
     padding: 0 30px 0 30px;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
-    background-color: #ffffff;
+    border-radius: $border-radius-base;
+    background-color: transparent;
     background-image: none;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('datepicker-input-border');
+    }
   }
 
-  .evui-timepicker input[type=text]:focus,
-  .evui-timepicker input[type=text]:hover{
+  .ev-timepicker input[type=text]:focus,
+  .ev-timepicker input[type=text]:hover {
     outline: none;
   }
 
-  .evui-timepicker div.evui-timepicker-prefix {
+  .ev-timepicker div.ev-timepicker-prefix {
     position: absolute;
     width: 26px;
     height: 26px;
@@ -424,7 +465,7 @@
     background-position: -196px -102px;
   }
 
-  .evui-timepicker div.evui-timepicker-suffix {
+  .ev-timepicker div.ev-timepicker-suffix {
     position: absolute;
     left: 190px;
     width: 26px;
@@ -433,59 +474,63 @@
     background-image: url(../../images/evui_icon.png);
     background-position: 7px -362px;
   }
-  .evui-timepicker div.evui-timepicker-suffix.suffix-fadein {
-    display: block;
+  .ev-timepicker div.ev-timepicker-suffix.suffix-fadein {
+    display: block !important;
     cursor: pointer;
   }
-  .evui-timepicker div.evui-timepicker-suffix.suffix-fadeout {
-    display: none;
+  .ev-timepicker div.ev-timepicker-suffix.suffix-fadeout {
+    display: none !important;
     cursor: default;
   }
 
-  .evui-timepicker-panel {
+  .ev-timepicker-panel {
     display: none;
     position: absolute;
-    z-index: 300;
+    z-index: 850;
     width: 180px;
     height: 224px;
     margin: 12px 0 0 0;
-    border: 1px solid #dcdfe6;
+    border: 1px solid #DCDFE6;
     border-radius: 4px;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
     box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
   }
+  .ev-timepicker-panel.excludeFooter {
+    height: 190px;
+  }
 
-  .evui-timepicker-content {
+  .ev-timepicker-content {
     display: block;
     overflow: hidden;
     position: relative;
     height: 188px;
   }
-  .evui-timepicker-content .evui-timepicker-spinner {
+  .ev-timepicker-content .ev-timepicker-spinner {
     width: 100%;
     height: 100%;
     padding-left: 5px;
-    font-size: 0; /*필수 width:33.3%*/
+    font-size: 0; /* 필수 width:33.3% */
     white-space: nowrap;
   }
-  .evui-timepicker-footer {
-    display: block;
+  .ev-timepicker-footer {
+    display: flex;
     height: 34px;
-    background-color: #f5f7fa;
+    background-color: #F5F7FA;
     text-align: right;
+    justify-content: flex-end;
   }
-  .evui-timepicker-footer .evui-timepicker-btn-cancel {
-    padding: 8px 8px 0 0;
+  .ev-timepicker-footer .ev-timepicker-btn-cancel {
+    padding: 0 8px;
     border: none;
     background-color: transparent;
     font-size: 12px;
     cursor: pointer;
   }
-  .evui-timepicker-footer .evui-timepicker-btn-ok {
-    padding: 8px 8px 0 0;
+  .ev-timepicker-footer .ev-timepicker-btn-ok {
+    padding: 0 8px;
     border: none;
     background-color: transparent;
-    color: #409eff;
+    color: #409EFF;
     font-size: 12px;
     cursor: pointer;
   }