evui 2.0.8 → 2.1.1

package/src/components/label/label.vue

@@ -9,10 +9,10 @@
 </template>
 <script>
   const prefixCls = 'ev-label';
-  export default{
+  export default {
     props: {
       value: {
-        type: String,
+        type: [String, Number],
         default: '',
       },
       size: {

package/src/components/loadingmask/loadingmask.vue

@@ -1,12 +1,10 @@
 <template>
   <div
-    v-show="isShow"
     class="ev-loadingmask"
-    style="display: none;"
   >
     <div
       v-show="barCount"
-      ref="contents"
+      ref="loadingCenter"
       class="ev-loadingmask-center"
     >
       <div
@@ -14,13 +12,13 @@
         :key="index"
         :style="{
           position: 'absolute',
-          width: item.width,
-          height: item.height,
-          borderRadius: item.borderRadius,
-          background: item.barColor,
-          transform: item.transform,
-          animation: item.animation,
-          animationDelay: item.animDelay,
+          width: `${item.barWidth}px`,
+          height: `${item.barHeight}px`,
+          borderRadius: `${item.barBorderRadius}px`,
+          background: `${item.barColor}`,
+          transform: `${item.transform}`,
+          animation: `${item.animation}`,
+          animationDelay: `${item.animDelay}`,
         }"
       />
     </div>
@@ -30,17 +28,17 @@
 <script>
   export default {
     props: {
-      width: { // 바 너비
-        type: String,
-        default: '30px',
+      barWidth: { // 바 너비
+        type: Number,
+        default: 30,
       },
-      height: { // 바 높이
-        type: String,
-        default: '10px',
+      barHeight: { // 바 높이
+        type: Number,
+        default: 10,
       },
-      borderRadius: { // 바 테두리 둥근정도
-        type: String,
-        default: '20px',
+      barBorderRadius: { // 바 테두리 둥근정도
+        type: Number,
+        default: 20,
       },
       barColor: { // 바 색상
         type: String,
@@ -50,39 +48,34 @@
         type: Number,
         default: 13,
       },
-      fadebarRadius: { // 중앙점에서부터 로딩 바까지의 반지름
-        type: String,
-        default: '45px',
+      spinnerRadius: { // 중앙점에서부터 로딩 바까지의 반지름
+        type: Number,
+        default: 30,
       },
       animInterval: { // css animation seconds during 1-time
         type: Number,
         default: 1,
       },
-      isShow: {
-        type: Boolean,
-        default: false,
-      },
     },
     data() {
       return {
         barData: [],
       };
     },
+    computed: {
+    },
     watch: {
-      isShow() {
-        setTimeout(this.updatePosition.bind(this), 1);
-      },
     },
     created() {
       for (let ix = 0, ixLen = this.barCount; ix < ixLen; ix++) {
         const obj = {};
         const deg = Math.round(360 * (ix / ixLen));
         obj.position = 'absolute';
-        obj.width = this.width;
-        obj.height = this.height;
-        obj.borderRadius = this.borderRadius;
+        obj.barWidth = this.barWidth;
+        obj.barHeight = this.barHeight;
+        obj.barBorderRadius = this.barBorderRadius;
         obj.barColor = this.barColor;
-        obj.transform = `rotate(${deg}deg) translate(${this.fadebarRadius}, 0px)`;
+        obj.transform = `rotate(${deg}deg) translate(${this.spinnerRadius + (this.barWidth / 2)}px, 0px)`;
         obj.animation = `ev-loadingmask-fadedelay ${this.animInterval}s infinite ease-in-out`;
         obj.animDelay = `${(this.animInterval * (ix / ixLen)).toFixed(3)}s`;
         this.barData.push(obj);
@@ -93,49 +86,45 @@
     },
     methods: {
       updatePosition() {
-        if (!this.isShow) {
-          this.$el.style.display = 'none';
-          return;
-        }
-
         const element = this.$el;
-        const parentRect = element.parentElement.getBoundingClientRect();
-        const contentsRect = this.$refs.contents.getBoundingClientRect();
-
-        element.style.cssText = `
-          display: block;
-          top: ${(parentRect.height / 2) - (contentsRect.height / 2)}px;
-          left: ${(parentRect.width / 2) - (contentsRect.width / 2)}px;
-          width: ${contentsRect}px;
-          height: ${contentsRect}px;`;
+        const parentEl = element.parentElement;
+        if (parentEl) {
+          const getComputedParent = getComputedStyle(parentEl);
+          if (getComputedParent) {
+            const parentPaddingTop = getComputedParent.getPropertyValue('padding-top');
+            const parentPaddingLeft = getComputedParent.getPropertyValue('padding-left');
+            const parentBorder = getComputedParent.getPropertyValue('border-width');
+            const parentElRect = parentEl.getBoundingClientRect();
+            const parentWidth = parentElRect.width - (parseInt(parentBorder, 10) * 2);
+            const parentHeight = parentElRect.height - (parseInt(parentBorder, 10) * 2);
+            const wrapperTransform = `translate(-${parentPaddingLeft}, -${parentPaddingTop})`;
+            this.$el.setAttribute('style',
+              `width: ${parentWidth}px; height: ${parentHeight}px; transform: ${wrapperTransform}`);
+            const centerTransform = `translate(-${(this.barWidth / 2)}px, -${(this.barHeight / 2)}px)`;
+            this.$refs.loadingCenter.setAttribute('style',
+              `top: ${parentHeight / 2}px; left: ${parentWidth / 2}px; transform: ${centerTransform}`);
+          }
+        }
       },
     },
   };
 </script>
 
 <style>
-  .ev-loadingmask
-  {
+  .ev-loadingmask {
     position: absolute;
-    z-index: 18000;
+    overflow: hidden;
+    z-index: 300;
   }
-  .ev-loadingmask-center
-  {
+  .ev-loadingmask-center {
     position: relative;
-    top: 45%;
-    left: calc(50% - 15px);
-    transform: translate3d(0px, 0px, 0px);
   }
-  @keyframes ev-loadingmask-fadedelay
-  {
-    80%
-    {
-      -webkit-opacity: 0.2;
+
+  @keyframes ev-loadingmask-fadedelay {
+    80% {
       opacity: 0.2;
     }
-    100%
-    {
-      -webkit-opacity: 0.9;
+    100% {
       opacity: 0.9;
     }
   }

package/src/components/loginfield/index.js

@@ -0,0 +1,3 @@
+import loginField from './loginfield';
+
+export default loginField;

package/src/components/loginfield/loginfield.vue

@@ -0,0 +1,339 @@
+<template>
+  <div
+    :style="wrapStyle"
+    :class="wrapClasses"
+  >
+    <input
+      v-if="type !== 'textarea'"
+      :type="type"
+      :style="wrapStyle"
+      :value="currentValue"
+      :class="inputClasses"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="maxLength"
+      spellcheck="false"
+      autocomplete="autoComplete"
+      required
+      @keyup.enter="handleEnter"
+      @keyup="handleKeyUp"
+      @keydown="handleKeyDown"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInput"
+      @change="handleChange"
+    >
+    <textarea
+      v-else
+      :style="wrapStyle"
+      :value="currentValue"
+      :class="inputClasses"
+      :disabled="disabled"
+      :readonly="readonly"
+      :maxlength="maxLength"
+      spellcheck="false"
+      required
+      @keyup.enter="handleEnter"
+      @keyup="handleKeyUp"
+      @keydown="handleKeyDown"
+      @focus="handleFocus"
+      @blur="handleBlur"
+      @input="handleInput"
+      @change="handleChange"
+    />
+    <label class="loginLabel">{{ placeholder }}</label>
+    <div :class="wrapTextClass">
+      <div
+        v-show="useRegExp && textError"
+        :class="errorTextClass"
+      >
+        <p>{{ errorMsgWrapper }}</p>
+      </div>
+      <div
+        v-show="useMaxLength"
+        :class="maxLengthClass"
+      >
+        <p>{{ currentLength }} / {{ totalLength }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getQuantity, getSize } from '@/common/utils';
+
+  const prefixCls = 'ev-login';
+
+  export default {
+    name: 'TextField',
+    props: {
+      width: {
+        type: [String, Number],
+        default: '100%',
+      },
+      height: {
+        type: [String, Number],
+        default: '100%',
+      },
+      value: {
+        type: String,
+        default: '',
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      type: {
+        type: String,
+        validator(value) {
+          const supportType = ['text', 'password', 'textarea'];
+          return !!supportType.filter(item => value === item).length;
+        },
+        default: 'text',
+      },
+      placeholder: {
+        type: String,
+        default: '',
+      },
+      maxLength: {
+        type: Number,
+        default: Infinity,
+      },
+      useRegExp: {
+        type: Boolean,
+        default: false,
+      },
+      useMaxLength: {
+        type: Boolean,
+        default: false,
+      },
+      regExp: {
+        type: RegExp,
+        default: null,
+      },
+      errorMsg: {
+        type: String,
+        default: 'Wrong Message',
+      },
+      borderColor: {
+        type: String,
+        default: '#dddee1',
+      },
+    },
+    data() {
+      return {
+        currentValue: this.value,
+        currentLength: this.value.length,
+        totalLength: this.maxLength,
+        focus: false,
+        cssError: false,
+        maxError: false,
+        textError: false,
+        errorMsgWrapper: this.errorMsg,
+        autoComplete: this.type === 'password' ? 'new-password' : null,
+      };
+    },
+    computed: {
+      wrapClasses() {
+        return [
+          `${prefixCls}`,
+          { [`${prefixCls}-disabled`]: this.disabled },
+          { focus: this.focus },
+          { error: this.cssError },
+        ];
+      },
+      wrapStyle() {
+        return {
+          width: getSize(getQuantity(this.width)),
+          height: getSize(getQuantity(this.height)),
+          background: this.disabled ? '#f3f3f3' : '#fff',
+        };
+      },
+      wrapTextClass() {
+        return `${prefixCls}-valid-check`;
+      },
+      errorTextClass() {
+        return `${prefixCls}-valid-error`;
+      },
+      maxLengthClass() {
+        return [
+          `${prefixCls}-valid-max-length`,
+          { error: this.maxError },
+        ];
+      },
+      inputClasses() {
+        return `${prefixCls}-${this.type}`;
+      },
+    },
+    watch: {
+      value(val) {
+        this.setCurrentValue(val);
+      },
+    },
+    created() {
+      this.validateError(this.currentValue);
+    },
+    methods: {
+      handleEnter(e) {
+        this.$emit('on-enter', e);
+      },
+      handleKeyDown(e) {
+        this.$emit('on-keydown', e);
+      },
+      handleKeyUp(e) {
+        this.$emit('on-keyup', e);
+      },
+      handleFocus(e) {
+        this.focus = true;
+        this.$emit('on-focus', e);
+      },
+      handleBlur(e) {
+        this.focus = false;
+        this.$emit('on-blur', e);
+      },
+      handleInput(e) {
+        const value = e.target.value;
+
+        this.$emit('input', value);
+        this.setCurrentValue(value);
+        this.$emit('on-input-change', e);
+      },
+      handleChange(e) {
+        this.$emit('on-change', e);
+      },
+      setCurrentValue(value) {
+        if (value === this.currentValue) {
+          return;
+        }
+
+        this.validateError(value);
+      },
+      validateError(value) {
+        this.textError = false;
+        this.cssError = false;
+        this.maxError = false;
+
+        if (this.useRegExp) {
+          this.validateRegExp(value);
+        }
+
+        if (this.useMaxLength) {
+          this.validateTextLength(value);
+        }
+
+        this.currentValue = value;
+        this.currentLength = value.length;
+      },
+      validateTextLength(value) {
+        if (value.length >= this.maxLength) {
+          this.maxError = true;
+          this.cssError = true;
+          return true;
+        }
+
+        return false;
+      },
+      validateRegExp(value) {
+        const validValue = value;
+        if (this.regExp === null) {
+          return false;
+        }
+
+        const checked = this.regExp.exec(validValue);
+        if (checked === null) {
+          this.textError = false;
+          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;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-login {
+    font-family: 'NanumGothic';
+    display: inline-block;
+    position: relative;
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    color: $color-gray75;
+    font-size: 12px;
+    line-height: 2;
+    cursor: text;
+    background-image: none;
+  }
+
+  .ev-login.focus,
+  .ev-login.focus:hover {
+    opacity: 1;
+
+    @include evThemify() {
+      background-color: evThemed('color-primary');
+    }
+  }
+
+  .ev-login-text,
+  .ev-login-password {
+    width: 100%;
+    height: 100%;
+    font-size: 18px;
+    padding: 10px 10px 10px 12px;
+    display: block;
+    border: 1px solid #DCE1E5;
+    border-radius: 1px;
+    transition: border $animate-fast;
+  }
+
+  .ev-login-text:focus,
+  .ev-login-password:focus {
+    outline: none;
+
+    @include evThemify() {
+      border-bottom: 3px solid evThemed('color-primary');
+    }
+  }
+
+  /* LABEL ======================================= */
+  .loginLabel {
+    color: $color-gray80;
+    font-size: 12px;
+    position: absolute;
+    pointer-events: none;
+    height: 22px;
+    top: -22px;
+    font-family: Roboto;
+    font-weight: 600;
+    transition: color $animate-fast;
+  }
+  /* active state */
+  .ev-login-text:focus ~ .loginLabel,
+  .ev-login-text:valid ~ .loginLabel,
+  .ev-login-password:focus ~ .loginLabel,
+  .ev-login-password:valid ~ .loginLabel {
+    @include evThemify() {
+      color: evThemed('color-primary');
+    }
+  }
+</style>

package/src/components/markdown/index.js

@@ -0,0 +1,3 @@
+import markdown from './markdown';
+
+export default markdown;