evui 2.0.8 → 2.0.10

package/src/components/icon/icon.vue

@@ -1,31 +0,0 @@
-<template>
-  <i :class="preCls"/>
-</template>
-<script>
-  import '@/styles/all.css';
-  import '@/styles/icon.css';
-
-  const prefixCls = 'ei';
-
-  export default {
-    props: {
-      type: {
-        type: String,
-        default: null,
-      },
-      size: {
-        type: [Number, String],
-        default: null,
-      },
-      cls: {
-        type: String,
-        default: null,
-      },
-    },
-    data() {
-      return {
-        preCls: `${prefixCls} ${this.cls}`,
-      };
-    },
-  };
-</script>

package/src/components/icon/index.js

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

package/src/components/input/index.js

@@ -1,3 +0,0 @@
-import inputNumber from './input.number';
-
-export default inputNumber;

package/src/components/input/input.number.vue

@@ -1,440 +0,0 @@
-<template>
-  <div
-    :style="styleObject"
-    :class="wrapClasses"
-  >
-    <div :class="handlerClasses">
-      <a
-        :class="upClasses"
-        @click="up"
-        @mousedown="preventDefault"
-      >
-        <span
-          :class="innerUpClasses"
-          @click="preventDefault"
-        />
-        <icon
-          class="fa-sort-up"
-        />
-      </a>
-      <a
-        :class="downClasses"
-        @click="down"
-        @mousedown="preventDefault"
-      >
-        <span
-          :class="innerDownClasses"
-          @click="preventDefault"
-        />
-        <icon class="fa-sort-down"/>
-      </a>
-    </div>
-    <div
-      :class="inputWrapClasses"
-    >
-      <input
-        :min="min"
-        :max="max"
-        :step="step"
-        :disabled="disabled"
-        :readonly="readonly"
-        :precision="precision"
-        :value="formatterValue"
-        :class="inputClasses"
-        @keydown.stop="keyDownEvent"
-        @focus="focus"
-        @blur="blur"
-        @mousewheel="wheelEvent"
-        @change="change"
-        @input="change"
-      >
-    </div>
-  </div>
-</template>
-
-<script>
-  import icon from '@/components/icon/icon';
-
-  const prefixCls = 'evui-input-number';
-
-  function parsedStyle(value) {
-    const mark = value.toString();
-    let result = mark;
-    if (!mark.match(/^(([1-9]+(?:\.\d+)?)(px|%+))$/g)) {
-      result = mark.concat('px');
-    }
-    return result;
-  }
-  function addNum(num1, num2) {
-    let sq1;
-    let sq2;
-    try {
-      sq1 = num1.toString().split('.')[1].length;
-    } catch (e) {
-      sq1 = 0;
-    }
-    try {
-      sq2 = num2.toString().split('.')[1].length;
-    } catch (e) {
-      sq2 = 0;
-    }
-    const sf = 10 ** Math.max(sq1, sq2);
-    return (Math.round(num1 * sf) + Math.round(num2 * sf)) / sf;
-  }
-  export default {
-      components: {
-        icon,
-      },
-      props: {
-        max: {
-          type: Number,
-          default: Infinity,
-        },
-        min: {
-          type: Number,
-          default: -Infinity,
-        },
-        step: {
-          type: Number,
-          default: 0.1,
-        },
-        width: {
-          type: [String, Number],
-          default: '100%',
-        },
-        height: {
-          type: [String, Number],
-          default: '100%',
-        },
-        value: {
-          type: Number,
-          default: null,
-        },
-        disabled: {
-          type: Boolean,
-          default: false,
-        },
-        precision: {
-          type: Number,
-          default: 1,
-          validator(value) {
-            return !isNaN(Number(value)) && value >= 0 && value <= 100;
-          },
-        },
-        formatter: {
-          type: Function,
-          default: null,
-        },
-        readonly: {
-          type: Boolean,
-          default: false,
-        },
-      },
-      data() {
-        return {
-          focused: false,
-          upDisabled: false,
-          downDisabled: false,
-          currentValue: this.setValue(this.value),
-        };
-      },
-      computed: {
-        styleObject: function styleObject() {
-          return {
-            width: parsedStyle(this.width),
-            height: parsedStyle(this.height),
-          };
-        },
-        formatterValue: function formatterValue() {
-          if (this.formatter) {
-            return this.formatter(this.currentValue);
-          }
-          return this.currentValue;
-        },
-        wrapClasses: function wrapClasses() {
-          return [
-            `${prefixCls}`,
-            {
-              [`${prefixCls}-disabled`]: this.disabled,
-            },
-          ];
-        },
-        handlerClasses: function handlerClasses() {
-          return `${prefixCls}-handler-wrap`;
-        },
-        upClasses: function upClasses() {
-          return [
-            `${prefixCls}-handler`,
-            `${prefixCls}-handler-up`,
-          ];
-        },
-        innerUpClasses: function innerUpClasses() {
-          return `${prefixCls}-handler-up-inner icon`;
-        },
-        downClasses: function downClasses() {
-          return [
-            `${prefixCls}-handler`,
-            `${prefixCls}-handler-down`,
-          ];
-        },
-        innerDownClasses: function innerDownClasses() {
-          return `${prefixCls}-handler-down-inner icon`;
-        },
-        inputWrapClasses: function inputWrapClasses() {
-          return `${prefixCls}-input-wrap`;
-        },
-        inputClasses: function inputClasses() {
-          return `${prefixCls}-input`;
-        },
-      },
-      watch: {
-        value(updatedValue) {
-          this.currentValue = updatedValue;
-        },
-      },
-      methods: {
-        preventDefault(e) {
-          e.preventDefault();
-        },
-        up(e) {
-          const targetValue = Number(e.target.value);
-          if (this.upDisabled && isNaN(targetValue)) {
-            return false;
-          }
-          this.changeStep('up', e);
-          return true;
-        },
-        down(e) {
-          const targetValue = Number(e.target.value);
-          if (this.downDisabled && isNaN(targetValue)) {
-            return false;
-          }
-          this.changeStep('down', e);
-          return true;
-        },
-        changeStep(type, e) {
-          if (this.disabled || this.readonly) {
-            return false;
-          }
-          const step = Number(this.step);
-          const targetValue = Number(e.target.value);
-          let updatedValue = Number(this.currentValue);
-
-          if (isNaN(updatedValue)) {
-            return false;
-          }
-          if (!isNaN(targetValue) && type !== null) {
-              if (addNum(targetValue, updatedValue) <= this.max ||
-                addNum(targetValue, -updatedValue) >= this.min) {
-                updatedValue = targetValue;
-              } else {
-                return false;
-              }
-          }
-          if (type === 'up') {
-            updatedValue = addNum(updatedValue, step);
-          } else if (type === 'down') {
-            updatedValue = addNum(updatedValue, -step);
-          }
-          this.setValue(updatedValue);
-          return true;
-        },
-        setValue(value) {
-          const updatedValue = Number(Number(value).toFixed(this.precision));
-          this.$nextTick(() => {
-              this.currentValue = updatedValue;
-            });
-          return updatedValue;
-        },
-        change(e) {
-          let updatedValue;
-          const max = this.max;
-          const min = this.min;
-          const value = e.target.value.trim();
-          const isEmptyString = value.length === 0;
-          if (isEmptyString) {
-            this.setValue(null);
-            return false;
-          }
-          if (this.validateValue(e.type, value)) {
-            return false;
-          }
-          if (isNaN(value)) {
-            e.target.value = this.setValue(this.currentValue);
-            return false;
-          }
-          if (!isNaN(value)) {
-            updatedValue = Number(value);
-            if (e.type === 'input' && value < min) {
-              return false;
-            }
-            if (value > max || value < min) {
-              updatedValue = value > max ? max : min;
-            } else {
-              updatedValue = value;
-            }
-            this.setValue(updatedValue);
-          }
-          this.setValue(updatedValue);
-          this.currentValue = value;
-          return true;
-        },
-        validateValue(type, value) {
-          let result = false;
-          if (type === 'input'
-            && value.match(/^-?\.?$|\.$/)) {
-            result = true;
-          }
-          if (type === 'change'
-            && value === this.currentValue) {
-            result = true;
-          }
-          return result;
-        },
-        focus() {
-          this.focused = true;
-        },
-        blur() {
-          this.focused = false;
-        },
-        keyDownEvent(e) {
-          if (e.keyCode === 38) {
-            e.preventDefault();
-            this.up(e);
-          } else if (e.keyCode === 40) {
-            e.preventDefault();
-            this.down(e);
-          }
-        },
-        wheelEvent(e) {
-          e.preventDefault();
-          if (e.wheelDeltaY === 120) {
-            this.up(e);
-          } else if (e.wheelDeltaY === -120) {
-            this.down(e);
-          }
-        },
-      },
-      init() {
-      },
-    };
-</script>
-<style scoped>
-  /*base class*/
-  .evui-input-number {
-    display: inline-block;
-    width: 100%;
-    line-height: 1.5;
-    padding: 0px;
-    font-size: 12px;
-    color: #495060;
-    background-color: #fff;
-    background-image: none;
-    position: relative;
-    cursor: text;
-    margin: 0;
-    height: 32px;
-    vertical-align: middle;
-    border: 1px solid #dddee1;
-    border-radius: 4px;
-    overflow: hidden;
-    transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
-  }
-  .evui-input-number-handler-wrap {
-    width: 22px;
-    height: 100%;
-    border-left: 1px solid #dddee1;
-    border-radius: 0 4px 4px 0;
-    background: #fff;
-    position: absolute;
-    top: 0;
-    right: 0;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-  }
-  /*border color when mouse hover*/
-  .evui-input-number:hover {
-    border-color : #2d8cf0;
-  }
-  .evui-input-number:hover .evui-input-number-handler-wrap {
-    border-color : #2d8cf0;
-    opacity: 1;
-  }
-
-  .evui-input-number:hover i{
-    color : #2d8cf0;
-  }
-
-  /*inner input div class*/
-  .evui-input-number-input-wrap {
-    overflow: hidden;
-    height: 32px;
-  }
-  .evui-input-number-input {
-    width: 100%;
-    height: 32px;
-    line-height: 32px;
-    padding: 0 7px;
-    text-align: left;
-    outline: 0;
-    -moz-appearance: textfield;
-    color: #666;
-    border: 0;
-    border-radius: 4px;
-  }
-  /*handler line class*/
-  .evui-input-number-handler  {
-    display: block;
-    width: 100%;
-    height: 16px;
-    line-height: 0;
-    text-align: center;
-    overflow: hidden;
-    color: #999;
-    position: relative;
-  }
-  .evui-input-number-handler-up {
-    cursor: pointer;
-  }
-  .evui-input-number-handler-down {
-    border-top: 1px solid #dddee1;
-    top: -1px;
-    cursor: pointer;
-  }
-  /*disable base class*/
-  .evui-input-number-disabled {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #ccc;
-  }
-  /*use border color when mouse hover*/
-  .evui-input-number-disabled:hover {
-    border-color : #D77F7F;
-  }
-  /*inner input div class*/
-  .evui-input-number-disabled .evui-input-number {
-    opacity: .72;
-    cursor: not-allowed;
-    background-color: #f3f3f3;
-  }
-  /*handler line class*/
-  .evui-input-number-disabled .evui-input-number-handler-wrap {
-    display: none;
-  }
-  .evui-input-number-disabled .evui-input-number-handler {
-    opacity: .72;
-    color: #ccc!important;
-    cursor: not-allowed;
-  }
-  .evui-input-number-input[disabled] {
-    background-color: #f3f3f3;
-    opacity: 1;
-    cursor: not-allowed;
-    color: #ccc;
-  }
-  /*TODO SET ICON CLASS*/
-  .fa-sort-up {
-    margin-top: 4px;
-  }
-</style>

package/src/components/label/index.js

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

package/src/components/label/label.vue

@@ -1,86 +0,0 @@
-<template>
-  <label
-    ref="label"
-    :class="labelClass"
-    :style="labelStyle"
-  >
-    {{ labelText }}
-  </label>
-</template>
-<script>
-  const prefixCls = 'ev-label';
-  export default{
-    props: {
-      value: {
-        type: String,
-        default: '',
-      },
-      size: {
-        type: String,
-        default: 'medium',
-      },
-      userCls: {
-        type: String,
-        default: '',
-      },
-      textAlign: {
-        type: String,
-        default: 'center',
-      },
-    },
-    data() {
-      return {
-        labelSize: this.size,
-      };
-    },
-    computed: {
-      labelText() {
-        return this.value;
-      },
-      hAlign() {
-        let align;
-
-        switch (this.textAlign) {
-          case 'left':
-          case 'center':
-          case 'right':
-            align = this.textAlign;
-            break;
-          default:
-            align = 'center';
-            break;
-        }
-
-        return align;
-      },
-      labelStyle() {
-        return {
-          textAlign: this.hAlign,
-        };
-      },
-      labelClass() {
-        return [
-          `${prefixCls}`,
-          `${prefixCls}-${this.labelSize}`,
-          `${this.userCls}`,
-        ];
-      },
-    },
-    methods: {
-    },
-  };
-</script>
-<style>
-  .ev-label {
-    display: inline-block;
-  }
-  .ev-label-small {
-    font-size: 12px;
-  }
-  .ev-label-medium {
-    font-size: 14px;
-  }
-  .ev-label-large {
-    font-size: 16px;
-  }
-</style>

package/src/components/loadingmask/index.js

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

package/src/components/loadingmask/loadingmask.vue

@@ -1,142 +0,0 @@
-<template>
-  <div
-    v-show="isShow"
-    class="ev-loadingmask"
-    style="display: none;"
-  >
-    <div
-      v-show="barCount"
-      ref="contents"
-      class="ev-loadingmask-center"
-    >
-      <div
-        v-for="(item, index) in barData"
-        :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,
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-  export default {
-    props: {
-      width: { // 바 너비
-        type: String,
-        default: '30px',
-      },
-      height: { // 바 높이
-        type: String,
-        default: '10px',
-      },
-      borderRadius: { // 바 테두리 둥근정도
-        type: String,
-        default: '20px',
-      },
-      barColor: { // 바 색상
-        type: String,
-        default: 'rgba(200, 200, 200, 0.7)',
-      },
-      barCount: { // 로딩 바의 개수
-        type: Number,
-        default: 13,
-      },
-      fadebarRadius: { // 중앙점에서부터 로딩 바까지의 반지름
-        type: String,
-        default: '45px',
-      },
-      animInterval: { // css animation seconds during 1-time
-        type: Number,
-        default: 1,
-      },
-      isShow: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    data() {
-      return {
-        barData: [],
-      };
-    },
-    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.barColor = this.barColor;
-        obj.transform = `rotate(${deg}deg) translate(${this.fadebarRadius}, 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);
-      }
-    },
-    mounted() {
-      setTimeout(this.updatePosition.bind(this), 1);
-    },
-    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;`;
-      },
-    },
-  };
-</script>
-
-<style>
-  .ev-loadingmask
-  {
-    position: absolute;
-    z-index: 18000;
-  }
-  .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;
-      opacity: 0.2;
-    }
-    100%
-    {
-      -webkit-opacity: 0.9;
-      opacity: 0.9;
-    }
-  }
-</style>