evui 2.0.9 → 2.1.2

package/src/components/checkbox/checkbox.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     :class="[{ disabled: disabled }, dataSize]"
-    class="ev-checkbox-wrap"
+    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"
@@ -17,19 +17,18 @@
     <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"
     >
     <label
       :for="`${checkboxId}_${value}`"
-      :class="[dataSize, dataType, dataAfterType]"
-      class="ev-checkbox-label"
+      :class="checkboxClasses"
     >
-      <slot/>
+      <slot />
     </label>
   </div>
 </template>
@@ -41,8 +40,8 @@
     },
     props: {
       value: {
-        type: String,
-        default: '',
+        type: [String, Number],
+        default: null,
       },
       disabled: {
         type: Boolean,
@@ -64,6 +63,11 @@
         type: String,
         default: '',
       },
+      // afterType: 'minus'랑 동일 속성으로 추후 afterType 삭제 필요
+      indeterminate: {
+        type: Boolean,
+        default: false,
+      },
     },
     data() {
       return {
@@ -72,7 +76,6 @@
         groupBindValue: [],
         dataSize: this.size,
         dataType: this.type,
-        // dataAfterType: this.afterType,
       };
     },
     computed: {
@@ -100,8 +103,16 @@
           this.dataType = size;
         },
       },
-      dataAfterType() {
-        return this.afterType;
+      checkboxClasses() {
+        return [
+          'ev-checkbox-label',
+          this.dataSize,
+          this.dataType,
+          this.afterType,
+          {
+            indeterminate: this.indeterminate,
+          },
+        ];
       },
     },
     created() {
@@ -110,74 +121,112 @@
     methods: {
       change(e) {
         if (this.isGroup) {
-          this.$parent.$emit('change-event', e);
+          this.$parent.$emit('on-change', e);
         } else {
-          this.$emit('change-event', e);
           this.$emit('input', e.target.checked);
+          this.$emit('on-change', e);
         }
       },
       click(e) {
         if (this.isGroup) {
-          this.$parent.$emit('click-event', e);
+          this.$parent.$emit('on-click', e);
         } else {
-          this.$emit('click-event', e);
           this.$emit('input', e.target.checked);
+          this.$emit('on-click', e);
         }
       },
     },
   };
 </script>
 
-<style scoped>
-  .ev-checkbox-wrap {
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-checkbox {
     height: 19px;
+    line-height: 19px;
     float: left;
     user-select: none;
+    font-size: $font-size-base;
+
+    &.small {
+      height: 16px;
+      line-height: 16px;
+    }
   }
-  .ev-checkbox-wrap.small{
-    height: 16px;
-  }
-  .ev-checkbox-wrap.disabled {
-    color: #C0C4CC;
-  }
+
   .ev-checkbox-label {
     position: relative;
+    display: inline-flex;
     height: 100%;
-    display: inline-block;
     padding-left: 25px;
-    line-height: 19px;
     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-label.small {
-    padding-left: 23px;
-    line-height: 16px;
-  }
-  .ev-checkbox-label:before {
-    position: absolute;
-    top: 50%;
-    left: 2px;
-    width: 16px;
-    height: 16px;
-    background: transparent;
-    border: 1px solid #B0B3B7;
-    border-radius: 100%;
-    text-align: center;
-    transform: translateY(-50%);
-    content: '';
-  }
-  .ev-checkbox-label.square:before {
-    border-radius: 0;
-  }
-  .ev-checkbox-label.small:before {
-    width: 12px;
-    height: 12px;
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-label {
-    cursor: not-allowed;
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-label:before {
-    border: 1px solid #B01012;
-  }
+
   .ev-checkbox-input {
     position: absolute;
     width: 1px;
@@ -188,89 +237,112 @@
     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;
+    }
   }
-  .ev-checkbox-input:checked + .ev-checkbox-label:before {
-    border: 1px solid #41B7FD;
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-input:checked + .ev-checkbox-label:before {
-    border: 1px solid #B01012;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label:after {
-    position: absolute;
-    top: 50%;
-    left: 7px;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    transform: translateY(-50%);
-    content: '';
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label:after {
-    background: #41B7FD;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.check:after {
-    border: solid #41B7FD;
-    border-radius: 0;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.check.small:after {
-    border: solid #41B7FD;
-    border-radius: 0;
-    border-width: 0 1.5px 1.5px 0;
-    transform: rotate(45deg);
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-input:checked + .ev-checkbox-label:after {
-    background: #B01012;
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-input:checked + .ev-checkbox-label.check:after {
-    border: solid #B01012;
-    border-radius: 0;
-    border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
-  }
-  .ev-checkbox-wrap.disabled .ev-checkbox-input:checked + .ev-checkbox-label.check.small:after {
-    border: solid #B01012;
-    border-radius: 0;
-    border-width: 0 1.5px 1.5px 0;
-    transform: rotate(45deg);
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.square:after {
-    border-radius: 0;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.check:after {
-    background: none;
-    border-radius: 0;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.small:after {
-    left: 6px;
-    width: 6px;
-    height: 6px;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.minus:after {
-    left: 5px;
-    width: 12px;
-    height: 4px;
-    border-radius: 0;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.minus.small:after {
-    width: 8px;
-    height: 2px;
-  }
-  .ev-checkbox-input:checked + .ev-checkbox-label.check:after {
-    display: block;
-    top: 4px;
-    left: 7px;
-    width: 5px;
-    height: 8px;
-    background: none;
-    content: '';
-  }
-  .ev-checkbox-input: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>

package/src/components/codeview/code.vue

@@ -15,7 +15,7 @@
       ref="exampleLayer"
       class="evui-codeview-example-layer"
     >
-      <slot/>
+      <slot />
       <div
         v-if="description && isBottom"
         ref="descriptionLayer"
@@ -25,7 +25,7 @@
       </div>
     </div>
     <div>
-      <div class="evui-codeview-split-layer"/>
+      <div class="evui-codeview-split-layer" />
       <div
         ref="codeLayer"
         class="evui-codeview-code-layer"
@@ -43,7 +43,7 @@
           :class="selectIconClasses"
           class="evui-codeview-example-bar-icon"
         >
-          <icon class="fa-sort-down"/>
+          <icon class="fa-sort-down" />
           <span
             class="evui-codeview-example-bar-span"
           >{{ txtBottomBar }}</span>
@@ -114,8 +114,8 @@
       },
     },
     mounted() {
-      const descriptionLayerHeight = this.$refs.descriptionLayer ?
-        this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
+      const descriptionLayerHeight = this.$refs.descriptionLayer
+        ? this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
       const exampleLayerHeight = this.$refs.exampleLayer.getBoundingClientRect().height;
 
       this.boxHeight = exampleLayerHeight + descriptionLayerHeight + 50;
@@ -134,8 +134,8 @@
       onBottomClick: function onBottomClick() {
         const codeLayerHeight = this.$refs.codeLayer.getBoundingClientRect().height;
         const exampleLayerHeight = this.$refs.exampleLayer.getBoundingClientRect().height;
-        const descriptionLayerHeight = this.$refs.descriptionLayer ?
-          this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
+        const descriptionLayerHeight = this.$refs.descriptionLayer
+          ? this.$refs.descriptionLayer.getBoundingClientRect().height + 14.5 : 0;
         if (this.txtBottomBar === 'Expand') {
           this.txtBottomBar = 'Hide';
           this.boxHeight = codeLayerHeight + exampleLayerHeight + descriptionLayerHeight + 33;
@@ -149,64 +149,73 @@
   };
 </script>
 <style scoped>
-  .evui-codeview{
+  .evui-codeview {
     position: relative;
     width: 100%;
-    border: 1px solid #dfe6e9;
+    border: 1px solid #DFE6E9;
     margin: 5px;
     padding: 10px 10px 20px 10px;
     border-radius: 6px;
     overflow: hidden;
-    z-index: 1;
     transition: height .3s ease-in-out;
   }
-  .evui-codeview.expand{
+
+  .evui-codeview.expand {
     transition: height .3s ease-in-out;
   }
-  .evui-codeview-example-layer{
+
+  .evui-codeview-example-layer {
     position: relative;
-    padding: 0px 0px 8px 0px;
+    padding: 0 0 8px 0;
   }
-  .evui-codeview-split-layer{
+
+  .evui-codeview-split-layer {
     position: relative;
-    border-bottom: 1px solid #dfe6e9;
+    border-bottom: 1px solid #DFE6E9;
   }
-  .evui-codeview-code-layer{
+
+  .evui-codeview-code-layer {
     position: relative;
     width: 100%;
     font-size: 8px;
   }
-  .evui-codeview-example-bar{
+
+  .evui-codeview-example-bar {
     position: absolute;
-    left: 0px;
-    bottom: 0px;
+    left: 0;
+    bottom: 0;
     width: 100%;
     height: 37px;
     z-index: 10;
-    background-color: #ffffff;
+    background-color: #FFFFFF;
     transition: background-color .2s ease-in-out;
   }
-  .evui-codeview-example-bar:hover{
+
+  .evui-codeview-example-bar:hover {
     cursor: pointer;
     background-color: rgba(255, 255, 255, 0.4);
   }
-  .evui-codeview-example:hover{
+
+  .evui-codeview-example:hover {
     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
   }
-  .evui-codeview-example-bar-icon{
+
+  .evui-codeview-example-bar-icon {
     width: 100%;
     height: 100%;
     line-height: 25px;
     text-align: center;
   }
-  .evui-codeview-example-bar-icon i{
+
+  .evui-codeview-example-bar-icon i {
     height: 100%;
     line-height: 30px;
     font-size: 16px;
     color: rgba(30, 101, 188, 0.5);
     transition: all .3s ease-in-out;
   }
-  .evui-codeview-example-bar-icon span{
+
+  .evui-codeview-example-bar-icon span {
     line-height: 30px;
     font-size: 13px;
     font-weight: bold;
@@ -214,21 +223,24 @@
     transition: all .3s ease-in-out;
   }
 
-  .evui-codeview-example-bar-icon:hover i, .evui-codeview-example-bar-icon:hover span{
+  .evui-codeview-example-bar-icon:hover i, .evui-codeview-example-bar-icon:hover span {
     color: rgb(30, 101, 188);
     opacity: 1;
     transform: translateX(-6px);
     transition: all .3s ease-out;
   }
-  .evui-codeview-example-bar-icon.select-down i{
+
+  .evui-codeview-example-bar-icon.select-down i {
     transform: rotate(180deg);
     transition: transform .4s ease-out;
   }
+
   .evui-codeview-example-bar-icon, .evui-codeview-example-bar-icon-span {
     user-select: none;
   }
+
   .evui-codeview-description {
-    border: 1px solid #dfe6e9;
+    border: 1px solid #DFE6E9;
     border-radius: 2px;
     padding: 5px 10px 8px 10px;
     margin: 5px 3px 5px 3px;
@@ -236,7 +248,8 @@
     text-align: left;
     line-height: 1.5;
   }
-  .evui-codeview-description span{
+
+  .evui-codeview-description span {
     font-size: 13px;
   }
 </style>

package/src/components/contextmenu/contextmenu.child.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    :class="prefixEvui"
+  >
+    <context-menu
+      :depth="depth"
+      :visibility="visibility"
+      :row-index="rowIndex"
+      :items="items"
+      @click="onClick"
+    />
+  </div>
+</template>
+
+<script>
+  export default {
+    components: {
+      ContextMenu: () => import('./contextmenu'),
+    },
+    props: {
+      depth: {
+        type: Number,
+        default: 0,
+      },
+      rowKey: {
+        type: String,
+        default: '',
+      },
+      rowIndex: {
+        type: Number,
+        default: 0,
+      },
+      focusedRowKey: {
+        type: String,
+        default: '',
+      },
+      items: {
+        type: Array,
+        default() {
+          return [];
+        },
+        validator(value) {
+          return value != null && value.constructor === Array;
+        },
+      },
+    },
+    data() {
+      return {
+        prefixEvui: 'contextmenu-child',
+        visibility: 'hidden',
+      };
+    },
+    watch: {
+      focusedRowKey(value) {
+        if (value === this.rowKey) {
+          this.visibility = 'visible';
+        } else {
+          this.visibility = 'hidden';
+        }
+      },
+    },
+    methods: {
+      onClick(item) {
+        if (!item.disabled) {
+          this.$emit('click', item);
+        }
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  .contextmenu-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 850;
+  }
+</style>