evui 2.0.8 → 2.1.1

package/src/components/chart/scale/scale.time.category.js

@@ -0,0 +1,204 @@
+import moment from 'moment';
+import { TIME_INTERVALS } from '../helpers/helpers.constant';
+import Scale from './scale';
+import Util from '../helpers/helpers.util';
+
+class TimeCategoryScale extends Scale {
+  constructor(type, opt, ctx, labels) {
+    super(type, opt, ctx);
+    this.labels = labels;
+  }
+
+  /**
+   * Transforming label by designated format
+   * @param {number} value       label value
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value) {
+    return moment(value).format(this.timeFormat);
+  }
+
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
+  getInterval(range) {
+    const max = range.maxValue;
+    const min = range.minValue;
+    const step = range.maxSteps;
+
+    if (this.interval) {
+      if (typeof this.interval === 'string') {
+        return TIME_INTERVALS[this.interval].size;
+      } else if (typeof this.interval === 'object') {
+        return this.interval.time * TIME_INTERVALS[this.interval.unit].size;
+      } else if (typeof this.interval === 'number') {
+        return this.interval;
+      }
+    }
+    return Math.ceil((max - min) / step);
+  }
+
+  /**
+   * With range information, calculate how many labels in axis
+   * @param {object} range    min/max information
+   *
+   * @returns {object} steps, interval, min/max graph value
+   */
+  calculateSteps(range) {
+    const { maxValue, minValue, maxSteps } = range;
+    const rawInterval = this.getInterval(range);
+
+    let interval = rawInterval;
+    let increase = minValue;
+    let numberOfSteps;
+
+    while (increase < maxValue) {
+      increase += interval;
+    }
+
+    const graphMax = increase > maxValue ? maxValue : increase;
+    const graphMin = minValue;
+    const graphRange = graphMax - graphMin;
+
+    numberOfSteps = Math.round(graphRange / interval) + 1;
+    const oriSteps = numberOfSteps;
+
+    if (maxValue === 1) {
+      interval = 0.2;
+      numberOfSteps = 5;
+    }
+
+    while (numberOfSteps > maxSteps) {
+      interval *= 2;
+      numberOfSteps = Math.round(graphRange / interval);
+      interval = Math.ceil(graphRange / numberOfSteps);
+    }
+
+    if (graphMax - graphMin > (numberOfSteps * interval)) {
+      interval = Math.ceil((graphMax - graphMin) / numberOfSteps);
+    }
+
+
+    return {
+      steps: numberOfSteps,
+      oriSteps,
+      interval,
+      rawInterval,
+      graphMin,
+      graphMax,
+    };
+  }
+
+  /**
+   * Draw axis
+   * @param {object} chartRect      min/max information
+   * @param {object} labelOffset    label offset information
+   * @param {object} stepInfo       label steps information
+   *
+   * @returns {undefined}
+   */
+  draw(chartRect, labelOffset, stepInfo) {
+    const ctx = this.ctx;
+    const labels = this.labels;
+    const aPos = {
+      x1: chartRect.x1 + labelOffset.left,
+      x2: chartRect.x2 - labelOffset.right,
+      y1: chartRect.y1 + labelOffset.top,
+      y2: chartRect.y2 - labelOffset.bottom,
+    };
+
+    const steps = stepInfo.steps;
+    const axisMin = stepInfo.graphMin;
+    const axisMax = stepInfo.graphMax;
+    const stepValue = stepInfo.rawInterval;
+    const oriSteps = stepInfo.oriSteps;
+    const count = Math.round(oriSteps / steps);
+
+    let startPoint = aPos[this.units.rectStart];
+    const endPoint = aPos[this.units.rectEnd];
+    const offsetPoint = aPos[this.units.rectOffset(this.position)];
+    const offsetCounterPoint = aPos[this.units.rectOffsetCounter(this.position)];
+
+    // label font 설정
+    ctx.font = Util.getLabelStyle(this.labelStyle);
+
+    if (this.type === 'x') {
+      ctx.textAlign = 'center';
+      ctx.textBaseline = this.position === 'top' ? 'bottom' : 'top';
+    } else {
+      ctx.textAlign = this.position === 'left' ? 'right' : 'left';
+      ctx.textBaseline = 'middle';
+    }
+
+    ctx.fillStyle = this.labelStyle.color;
+    ctx.lineWidth = 1;
+    const aliasPixel = Util.aliasPixel(ctx.lineWidth);
+
+    ctx.beginPath();
+    ctx.strokeStyle = this.axisLineColor;
+    if (this.type === 'x') {
+      ctx.moveTo(startPoint, offsetPoint + aliasPixel);
+      ctx.lineTo(endPoint, offsetPoint + aliasPixel);
+    } else {
+      ctx.moveTo(offsetPoint + aliasPixel, startPoint);
+      ctx.lineTo(offsetPoint + aliasPixel, endPoint);
+    }
+    ctx.stroke();
+    ctx.closePath();
+
+    if (steps === 0 || axisMin === null) {
+      return;
+    }
+
+    const graphGap = (endPoint - startPoint) / (labels.length || 1);
+    if (this.categoryMode) {
+      startPoint += Math.ceil(graphGap / 2) - 2;
+    }
+
+    const ticks = [];
+    let labelCenter = null;
+    let linePosition = null;
+
+    ctx.beginPath();
+    ctx.strokeStyle = this.gridLineColor;
+
+    let labelText;
+    for (let ix = 0; ix < oriSteps; ix += count) {
+      ticks[ix] = axisMin + (ix * stepValue);
+
+      labelCenter = Math.round(startPoint + (graphGap * ix));
+      linePosition = labelCenter + aliasPixel;
+      labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+
+      let labelPoint;
+
+      if (this.type === 'x') {
+        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+        ctx.fillText(labelText, labelCenter, labelPoint);
+
+        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+          ctx.moveTo(linePosition, offsetPoint);
+          ctx.lineTo(linePosition, offsetCounterPoint);
+        }
+      } else {
+        labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+        ctx.fillText(labelText, labelPoint, labelCenter);
+
+        if ((ix !== 0 && ix < oriSteps && this.showGrid)) {
+          ctx.moveTo(offsetPoint, linePosition);
+          ctx.lineTo(offsetCounterPoint, linePosition);
+        }
+      }
+
+      ctx.stroke();
+    }
+
+    ctx.closePath();
+  }
+}
+
+export default TimeCategoryScale;

package/src/components/chart/scale/scale.time.js

@@ -0,0 +1,40 @@
+import moment from 'moment';
+import { TIME_INTERVALS } from '../helpers/helpers.constant';
+import Scale from './scale';
+
+class TimeScale extends Scale {
+  /**
+   * Transforming label by designated format
+   * @param {number} value       label value
+   *
+   * @returns {string} formatted label
+   */
+  getLabelFormat(value) {
+    return moment(value).format(this.timeFormat);
+  }
+
+  /**
+   * Calculate interval
+   * @param {object} range    range information
+   *
+   * @returns {number} interval
+   */
+  getInterval(range) {
+    const max = range.maxValue;
+    const min = range.minValue;
+    const step = range.maxSteps;
+
+    if (this.interval) {
+      if (typeof this.interval === 'string') {
+        return TIME_INTERVALS[this.interval].size;
+      } else if (typeof this.interval === 'object') {
+        return this.interval.time * TIME_INTERVALS[this.interval.unit].size;
+      } else if (typeof this.interval === 'number') {
+        return this.interval;
+      }
+    }
+    return Math.ceil((max - min) / step);
+  }
+}
+
+export default TimeScale;

package/src/components/checkbox/checkbox-group.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <slot/>
+    <slot />
   </div>
 </template>
 
@@ -13,6 +13,18 @@
           return [];
         },
       },
+      size: {
+        type: String,
+        default() {
+          return '';
+        },
+      },
+      type: {
+        type: String,
+        default() {
+          return '';
+        },
+      },
     },
     data() {
       return {
@@ -29,26 +41,33 @@
     },
     mounted() {
       this.initValue();
-      const bindValue = this.bindValue;
-      this.$on('change-event', (e) => {
-        const targetValue = e.target.value;
-        if (e.currentTarget.checked && bindValue.indexOf(targetValue) === -1) {
-          bindValue.push(targetValue);
-        } else if (!e.currentTarget.checked && bindValue.indexOf(targetValue) > -1) {
-          bindValue.splice(bindValue.indexOf(targetValue), 1);
-        }
-        this.$parent.$emit('input', bindValue);
-      });
+      this.$on('on-change', this.onChange);
+    },
+    beforeDestroy() {
+      this.$off('on-change', this.onChange);
     },
     methods: {
       initValue(array) {
         if (this.$children && this.$children instanceof Array) {
+          const self = this;
           this.$children.forEach((c) => {
             const child = c;
-            child.bindValue = array || this.value;
+            child.bindValue = array || self.value;
+            child.bindSize = self.size;
+            child.bindType = self.type;
           });
         }
       },
+      onChange(e) {
+        const bindValue = this.bindValue;
+        const targetValue = e.target.value;
+        if (e.currentTarget.checked && bindValue.indexOf(targetValue) === -1) {
+          bindValue.push(targetValue);
+        } else if (!e.currentTarget.checked && bindValue.indexOf(targetValue) > -1) {
+          bindValue.splice(bindValue.indexOf(targetValue), 1);
+        }
+        this.$parent.$emit('input', bindValue);
+      },
     },
   };
 </script>

package/src/components/checkbox/checkbox.vue

@@ -1,31 +1,36 @@
 <template>
-  <label
-    :for="`${checkboxId}_${value}`"
-    :class="{ disabled: disabled }"
-    class="ev-checkbox-label"
+  <div
+    :class="[{ disabled: disabled }, dataSize]"
+    class="ev-checkbox"
   >
     <input
       v-if="!isGroup"
       :id="`${checkboxId}_${value}`"
+      v-model="bindValue"
       :value="value"
       :disabled="disabled"
-      v-model="bindValue"
       type="checkbox"
       class="ev-checkbox-input"
       @change="change"
+      @click="click"
     >
     <input
       v-else
       :id="`${checkboxId}_${value}`"
+      v-model="groupBindValue"
       :value="value"
       :disabled="disabled"
-      v-model="groupBindValue"
       type="checkbox"
       class="ev-checkbox-input group"
       @change="change"
     >
-    <slot/>
-  </label>
+    <label
+      :for="`${checkboxId}_${value}`"
+      :class="checkboxClasses"
+    >
+      <slot />
+    </label>
+  </div>
 </template>
 
 <script>
@@ -35,8 +40,8 @@
     },
     props: {
       value: {
-        type: String,
-        default: '',
+        type: [String, Number],
+        default: null,
       },
       disabled: {
         type: Boolean,
@@ -46,12 +51,31 @@
         type: [Boolean, Array],
         default: null,
       },
+      size: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: '',
+      },
+      afterType: {
+        type: String,
+        default: '',
+      },
+      // afterType: 'minus'랑 동일 속성으로 추후 afterType 삭제 필요
+      indeterminate: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
         checkboxId: this._uid,
         isGroup: false, // group태그가 존재하는 경우 true
         groupBindValue: [],
+        dataSize: this.size,
+        dataType: this.type,
       };
     },
     computed: {
@@ -63,6 +87,33 @@
           this.groupBindValue = list;
         },
       },
+      bindSize: {
+        get() {
+          return this.size;
+        },
+        set(size) {
+          this.dataSize = size;
+        },
+      },
+      bindType: {
+        get() {
+          return this.type;
+        },
+        set(size) {
+          this.dataType = size;
+        },
+      },
+      checkboxClasses() {
+        return [
+          'ev-checkbox-label',
+          this.dataSize,
+          this.dataType,
+          this.afterType,
+          {
+            indeterminate: this.indeterminate,
+          },
+        ];
+      },
     },
     created() {
       this.isGroup = this.$parent.$options.componentName === 'CheckboxGroup';
@@ -70,29 +121,228 @@
     methods: {
       change(e) {
         if (this.isGroup) {
-          this.$parent.$emit('change-event', e);
+          this.$parent.$emit('on-change', e);
+        } else {
+          this.$emit('input', e.target.checked);
+          this.$emit('on-change', e);
+        }
+      },
+      click(e) {
+        if (this.isGroup) {
+          this.$parent.$emit('on-click', e);
         } else {
-          this.$emit('change-event', e);
           this.$emit('input', e.target.checked);
+          this.$emit('on-click', e);
         }
       },
     },
   };
 </script>
 
-<style scoped>
-  .ev-checkbox-label {
-    vertical-align: middle;
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-checkbox {
+    height: 19px;
+    line-height: 19px;
     float: left;
     user-select: none;
-    cursor: pointer;
+    font-size: $font-size-base;
+
+    &.small {
+      height: 16px;
+      line-height: 16px;
+    }
   }
-  .ev-checkbox-label.disabled {
-    color: #C0C4CC;
-    cursor: not-allowed;
+
+  .ev-checkbox-label {
+    position: relative;
+    display: inline-flex;
+    height: 100%;
+    padding-left: 25px;
+    cursor: pointer;
+
+    @include evThemify() {
+      color: evThemed('checkbox');
+    }
+
+    &:before {
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background-color: transparent;
+      border-radius: 50%;
+      text-align: center;
+      transform: translateY(-50%);
+      content: '';
+
+      @include evThemify() {
+        border: $border-solid evThemed('checkbox-border');
+      }
+    }
+
+    &:after {
+      display: block;
+      content: '';
+    }
+
+    /* unchecked -- type: small */
+    &.small {
+      padding-left: 23px;
+
+      &:before {
+        width: 12px;
+        height: 12px;
+      }
+    }
+
+    /* unchecked -- type: square */
+    &.square:before {
+      border-radius: 0;
+    }
+    &.indeterminate:before {
+      @include evThemify() {
+        border-color: evThemed('color-primary');
+      }
+    }
+
+    &.indeterminate:after {
+      left: 5px;
+      width: 12px;
+      height: 4px;
+      border-radius: 0;
+    }
+    &.small.indeterminate:after {
+      width: 8px;
+      height: 2px;
+      display: block;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
   }
+
   .ev-checkbox-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
     vertical-align: middle;
+    overflow: hidden;
     cursor: inherit;
+    clip: rect(0, 0, 0, 0);
+
+    /* checked */
+    &:checked + .ev-checkbox-label:before {
+      @include evThemify() {
+        border-color: evThemed('color-primary');
+      }
+    }
+
+    &:checked + .ev-checkbox-label:after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 50%;
+      left: 7px;
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      transform: translateY(-50%);
+
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
+
+    /* checked -- type: check */
+    &:checked + .ev-checkbox-label.check:before {
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
+
+    &:checked + .ev-checkbox-label.check:after {
+      position: absolute;
+      top: 4px;
+      left: 8px;
+      width: 5px;
+      height: 8px;
+      border: solid $color-white;
+      border-radius: 0;
+      border-width: 0 1px 1px 0;
+      transform: rotate(45deg);
+      content: '';
+    }
+
+    /* checked -- type: square */
+    &:checked + .ev-checkbox-label.square:after {
+      border-radius: 0;
+    }
+
+    /* checked -- type: small */
+    &:checked + .ev-checkbox-label.small:after {
+      left: 6px;
+      width: 6px;
+      height: 6px;
+    }
+
+    /* checked -- type: minus */
+    &:checked + .ev-checkbox-label.minus:after {
+      left: 5px;
+      width: 12px;
+      height: 4px;
+      border-radius: 0;
+    }
+
+    /* checked -- type: minus + small */
+    &:checked + .ev-checkbox-label.minus.small:after {
+      width: 8px;
+      height: 2px;
+    }
+
+    /* checked -- type: check + small */
+    &:checked + .ev-checkbox-label.check.small:after {
+      top: 3px;
+      left: 6px;
+      width: 4px;
+      height: 6px;
+      background: none;
+    }
+  }
+
+
+  /* disabled */
+  .disabled {
+    .ev-checkbox-label {
+      cursor: not-allowed;
+
+      @include evThemify() {
+        color: evThemed('checkbox-disabled');
+      }
+
+      &:before {
+        border: $border-solid $color-not-allow;
+      }
+    }
+
+    .ev-checkbox-input:checked + .ev-checkbox-label:before {
+      border-color: $color-not-allow;
+    }
+
+    .ev-checkbox-input:checked + .ev-checkbox-label:after {
+      background-color: $color-not-allow;
+    }
+
+    /* checked -- type: check */
+    .ev-checkbox-input:checked + .ev-checkbox-label.check:before {
+      background-color: $color-not-allow;
+    }
   }
 </style>