evui 2.0.8 → 2.1.1

package/src/components/textfield/textfield.vue

@@ -1,11 +1,13 @@
 <template>
-  <div>
+  <div style="width: 100%; height: 100%;">
     <div
       :style="wrapStyle"
       :class="wrapClasses"
     >
       <input
-        v-if="type === 'input'"
+        v-if="type !== 'textarea'"
+        :type="type"
+        :style="wrapStyle"
         :value="currentValue"
         :class="inputClasses"
         :placeholder="placeholder"
@@ -20,6 +22,7 @@
         @blur="handleBlur"
         @input="handleInput"
         @change="handleChange"
+        @click="handleClick"
       >
       <textarea
         v-else
@@ -38,6 +41,7 @@
         @blur="handleBlur"
         @input="handleInput"
         @change="handleChange"
+        @click="handleClick"
       />
     </div>
     <div :class="wrapTextClass">
@@ -47,6 +51,12 @@
       >
         <p>{{ errorMsgWrapper }}</p>
       </div>
+      <div
+        v-show="customErrorMsg"
+        :class="errorTextClass"
+      >
+        <p>{{ customErrorMsg }}</p>
+      </div>
       <div
         v-show="useMaxLength"
         :class="maxLengthClass"
@@ -60,7 +70,7 @@
 <script>
   import { getQuantity, getSize } from '@/common/utils';
 
-  const prefixCls = 'ev-input-text';
+  const prefixCls = 'ev-input';
 
   export default {
     name: 'TextField',
@@ -87,7 +97,11 @@
       },
       type: {
         type: String,
-        default: 'input',
+        validator(value) {
+          const supportType = ['text', 'password', 'textarea'];
+          return !!supportType.filter(item => value === item).length;
+        },
+        default: 'text',
       },
       placeholder: {
         type: String,
@@ -113,6 +127,10 @@
         type: String,
         default: 'Wrong Message',
       },
+      customErrorMsg: {
+        type: String,
+        default: '',
+      },
       borderColor: {
         type: String,
         default: '#dddee1',
@@ -143,7 +161,7 @@
         return {
           width: getSize(getQuantity(this.width)),
           height: getSize(getQuantity(this.height)),
-          background: '#fff',
+          lineHeight: this.type !== 'textarea' ? getSize(getQuantity(this.height)) : null,
         };
       },
       wrapTextClass() {
@@ -166,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);
@@ -198,6 +227,9 @@
       handleChange(e) {
         this.$emit('on-change', e);
       },
+      handleClick(e) {
+        this.$emit('on-click', e);
+      },
       setCurrentValue(value) {
         if (value === this.currentValue) {
           return;
@@ -242,23 +274,17 @@
           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>
-  .ev-input-text {
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-input {
     display: inline-block;
     position: relative;
     overflow: hidden;
@@ -267,115 +293,149 @@
     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-text: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-text.focus, .ev-input-text.focus:hover {
-    border-color : #2d8cf0;
+  .ev-input.focus,
+  .ev-input.focus:hover {
     opacity: 1;
+
+    @include evThemify() {
+      border-color: evThemed('color-primary');
+    }
   }
 
-  .ev-input-text-input {
+  .ev-input-text {
     width: 100%;
+    height: 100%;
     padding: 0 7px;
     text-align: left;
     outline: 0;
     -moz-appearance: textfield;
-    color: #666;
     border: 0;
-    border-radius: 4px;
-  }
+    background-color: transparent;
 
-  .ev-input-text-input[disabled] {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #495060;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
-  .ev-input-text-disabled .ev-input-text-input {
-    background-color: #f3f3f3;
-    cursor: not-allowed;
-    color: #5f5d5d;
-  }
+  .ev-input-password {
+    width: 100%;
+    height: 100%;
+    padding: 0 7px;
+    text-align: left;
+    outline: 0;
+    -moz-appearance: textfield;
+    border: 0;
+    background-color: transparent;
 
-  .ev-input-text-disabled .ev-input-text-input.evui-input-text-textarea {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #5f5d5d;
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
-  .ev-input-text-disabled:hover, .ev-input-text:hover.error,
-  .ev-input-text.focus.error, .ev-input-text.error {
-    border-color : #d77f7f;
+  .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;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
 
-  .ev-input-text-disabled .ev-input-text {
-    opacity: .72;
+  .ev-input-disabled {
     cursor: not-allowed;
-    background-color: #f3f3f3;
-  }
 
-  .ev-input-text.ev-input-text-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-text-disabled {
-    opacity: .72;
-    color: #5f5d5d !important;
+  .ev-input-text[disabled] {
+    opacity: 1;
     cursor: not-allowed;
   }
 
-  .ev-input-text-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-text-textarea[disabled] {
-    background-color: #f3f3f3;
+  .ev-input-textarea[disabled] {
     opacity: 1;
     cursor: not-allowed;
-    color: #5f5d5d;
   }
 
-  .ev-input-text-valid-check {
+  .ev-input-disabled:hover,
+  .ev-input:hover.error,
+  .ev-input.focus.error,
+  .ev-input.error {
+    border-color: $color-not-allow;
+  }
+
+  .ev-input-valid-check {
     font-size: 12px;
   }
 
-  .ev-input-text-valid-error {
+  .ev-input-valid-error {
     padding-left: 3px;
     padding-right: 5px;
-    color: #ed1313;
-    float:left
+    color: $color-not-allow;
+    float: left;
   }
 
-  .ev-input-text-valid-max-length {
+  .ev-input-valid-max-length {
     padding-left: 5px;
     padding-right: 3px;
-    float:right
-  }
+    float: right;
 
-  .ev-input-text-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>