evui 2.1.0 → 2.1.3

package/src/components/radio/radio.vue

@@ -1,24 +1,25 @@
 <template>
   <div
-    :class="[{ disabled: disabled }, dataSize]"
-    class="ev-radio-wrap"
+    :class="[{ disabled: disabled }, dataSize, type]"
+    :style="{ width: buttonSize }"
+    class="ev-radio"
   >
     <input
       :id="`${radioId}_${value}`"
+      v-model="bindValue"
       :value="value"
       :name="groupName"
       :disabled="disabled"
-      v-model="bindValue"
       type="radio"
       class="ev-radio-input"
       @change="onChange"
     >
     <label
       :for="`${radioId}_${value}`"
-      :class="dataSize"
+      :class="[dataSize, type]"
       class="ev-radio-label"
     >
-      <slot/>
+      <slot />
     </label>
   </div>
 </template>
@@ -30,12 +31,12 @@ export default {
   },
   props: {
     value: {
-      type: String,
+      type: [String, Number],
       required: true,
     },
     customValue: {
-      type: String,
-      default: '',
+      type: [String, Number],
+      default: null,
     },
     groupName: {
       type: String,
@@ -49,12 +50,17 @@ export default {
       type: String,
       default: '',
     },
+    buttonSize: {
+      type: String,
+      default: '',
+    },
   },
   data() {
     return {
       bindValue: this.customValue,
       radioId: this._uid,
       dataSize: this.size,
+      type: this.$parent.type,
     };
   },
   computed: {
@@ -77,8 +83,8 @@ export default {
     onChange(e) {
       if (this.$parent.$options.componentName === 'RadioGroup') {
         // 부모 컴포넌트가 Radio Group인 경우
-        this.$parent.$emit('changeEvent', e);
         this.$parent.$emit('input', e.target.value);
+        this.$parent.$emit('on-change', e);
       }
 //      else {
 //        // 부모 컴포넌트가 Radio Group로 안감싼경우
@@ -89,52 +95,87 @@ export default {
 };
 </script>
 
-<style scoped>
-  .ev-radio-wrap {
-    height: 19px;
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-radio {
+    /* height: 19px; */
     float: left;
     user-select: none;
+
+    @include evThemify() {
+      color: evThemed('radio');
+    }
+
+    &.small {
+      height: 16px;
+    }
+
+    &.button {
+      font-size: $font-size-base;
+      height: 100%;
+    }
   }
-  .ev-radio-wrap.small{
-    height: 16px;
-  }
-  .ev-radio-wrap.disabled {
-    color: #C0C4CC;
-  }
+
   .ev-radio-label {
-    position: relative;
-    display: inline-block;
-    padding-left: 25px;
-    line-height: 19px;
-    cursor: pointer;
-  }
-  .ev-radio-label.small {
-    padding-left: 20px;
-    line-height: 16px;
-  }
-  .ev-radio-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-radio-label.small:before {
-    width: 12px;
-    height: 12px;
-  }
-  .ev-radio-wrap.disabled .ev-radio-label {
-    cursor: not-allowed;
-  }
-  .ev-radio-wrap.disabled .ev-radio-label:before {
-    border: 1px solid #B01012;
+    &:not(.button) {
+      position: relative;
+      display: inline-block;
+      padding-left: 25px;
+      line-height: 19px;
+      cursor: pointer;
+      margin-right: 10px;
+    }
+
+    &.button {
+      display: flex;
+      flex-direction: row;
+      border-radius: 4px;
+      justify-content: center;
+      cursor: pointer;
+      line-height: 19px;
+      padding: 5px;
+      margin-right: 10px;
+      background-color: $color-gray60;
+      color: $color-white;
+      border: solid 1px $color-gray60;
+      transition: opacity .2s linear;
+
+      &:hover {
+        opacity: 0.7;
+        /*
+        color: $color-primary;
+        background-color: transparent;
+        border-color: $color-primary;
+         */
+      }
+    }
+
+    &.small {
+      padding-left: 20px;
+      line-height: 16px;
+    }
+
+    &:not(.button):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: '';
+    }
+
+    &:not(.button).small:before {
+      width: 12px;
+      height: 12px;
+    }
   }
+
   .ev-radio-input {
     position: absolute;
     width: 1px;
@@ -145,32 +186,71 @@ export default {
     overflow: hidden;
     cursor: inherit;
     clip: rect(0, 0, 0, 0);
+
+    &:checked + .ev-radio-label:not(.button):before {
+      @include evThemify() {
+        border: 1px solid evThemed('color-primary');
+      }
+    }
+
+    &:checked + .ev-radio-label:not(.button):after {
+      position: absolute;
+      top: 50%;
+      left: 7px;
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      transform: translateY(-50%);
+      content: '';
+    }
+
+    &:checked + .ev-radio-label.button {
+      color: $color-white;
+
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+        border-color: evThemed('color-primary');
+      }
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+
+    &:checked + .ev-radio-label.small:after {
+      left: 6px;
+      width: 6px;
+      height: 6px;
+    }
+
+    &:checked + .ev-radio-label:after {
+      @include evThemify() {
+        background-color: evThemed('color-primary');
+      }
+    }
   }
-  .ev-radio-input:checked + .ev-radio-label:before {
-    border: 1px solid #41B7FD;
-  }
-  .ev-radio-wrap.disabled .ev-radio-input:checked + .ev-radio-label:before {
-    border: 1px solid #B01012;
-  }
-  .ev-radio-input:checked + .ev-radio-label:after {
-    position: absolute;
-    top: 50%;
-    left: 7px;
-    width: 8px;
-    height: 8px;
-    border-radius: 100%;
-    transform: translateY(-50%);
-    content: '';
-  }
-  .ev-radio-input:checked + .ev-radio-label.small:after {
-    left: 6px;
-    width: 6px;
-    height: 6px;
-  }
-  .ev-radio-input:checked + .ev-radio-label:after {
-    background: #41B7FD;
-  }
-  .ev-radio-wrap.disabled .ev-radio-input:checked + .ev-radio-label:after {
-    background: #B01012;
+
+  .disabled {
+    .ev-radio-label {
+      cursor: not-allowed;
+
+      @include evThemify() {
+        color: evThemed('radio-disabled');
+      }
+
+      &:before {
+        border: 1px solid $color-not-allow;
+      }
+    }
+
+    .ev-radio-input {
+      &:checked + .ev-radio-label:before {
+        border: 1px solid $color-not-allow;
+      }
+
+      &:checked + .ev-radio-label:after {
+        background-color: $color-not-allow;
+      }
+    }
   }
 </style>

package/src/components/selectbox/dropdown.vue

@@ -31,18 +31,21 @@
             :size="size"
             :items="item.items"
             :selected-items="selectedItems"
+            @before-select="onBeforeSelect"
             @select="onSelect"
           />
         </div>
       </div>
       <div
         v-else
+        ref="singleAreaList"
         :class="`${prefixCls}-single-area`"
       >
         <Listbox
           :style="listBoxStyle"
           :items="items"
           :selected-items="selectedItems"
+          @before-select="onBeforeSelect"
           @select="onSelect"
         />
       </div>
@@ -53,7 +56,7 @@
 <script>
   import Listbox from '@/components/selectbox/listbox';
 
-  const prefixCls = 'evui-dropdown';
+  const prefixCls = 'ev-dropdown';
 
   export default {
     components: {
@@ -104,7 +107,43 @@
         prefixCls,
       };
     },
+    updated() {
+      setTimeout(() => {
+        const index = this.items.findIndex(item => item.value === this.selectedItems[0].value
+          && item.name === this.selectedItems[0].name);
+        this.setScrollTop(index);
+      });
+    },
     methods: {
+      getClientHeight(selectedIdx) {
+        const defaultRowHeight = 30;
+        let listRowHeight = 0;
+        if (this.$refs.singleAreaList.children
+          && this.$refs.singleAreaList.children[0]
+          && this.$refs.singleAreaList.children[0].children[0]
+          && this.$refs.singleAreaList.children[0].children[0].children
+        ) {
+          let li;
+          const liList = this.$refs.singleAreaList.children[0].children[0].children;
+          if (liList.length < selectedIdx) {
+            return defaultRowHeight;
+          }
+          for (let ix = 0; ix < selectedIdx; ix++) {
+            li = liList[ix];
+            listRowHeight += li.clientHeight;
+          }
+        }
+        return listRowHeight;
+      },
+      setScrollTop(selectedIdx) {
+        if (!this.isGroup && this.$refs.singleAreaList) {
+          const listRowHeight = this.getClientHeight(selectedIdx);
+          this.$refs.singleAreaList.scrollTop = listRowHeight;
+        }
+      },
+      onBeforeSelect(item, target, index) {
+        this.$emit('before-select', item, target, index);
+      },
       onSelect(item, target, index) {
         this.$emit('select', item, target, index);
       },
@@ -115,71 +154,78 @@
   };
 </script>
 
-<style scoped>
-  /**  evui-dropdown  **/
-  /**  evui-dropdown > multiple-input-area **/
-  /**  evui-dropdown > multiple-input-area > input-text **/
+<style lang="scss">
+  @import '~@/styles/default';
+  /**  ev-dropdown  **/
+  /**  ev-dropdown > multiple-input-area **/
+  /**  ev-dropdown > multiple-input-area > input-text **/
 
-  .evui-dropdown{
+  .ev-dropdown {
     position: absolute;
     width: 100%;
     height: 35px;
-    border: 1px solid #ccc;
-    background-color: #fff;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    z-index: 11;
+    border-radius: $border-radius-base;
+    z-index: 850;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('selectbox-border');
+      background-color: evThemed('selectbox-bg');
+    }
   }
-  .evui-dropdown-multiple-input-area{
+
+  .ev-dropdown-multiple-input-area {
     width: 100%;
     height: 100%;
     padding: 3px;
   }
-  .evui-dropdown-multiple-input-area .input-text{
+
+  .ev-dropdown-multiple-input-area .input-text {
     width: 100%;
     height: 100%;
-    border: 1px solid #ccc;
+    border: 1px solid #CCCCCC;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
   }
 
-  /**  evui-dropdown > evui-dropdown-listbox-wrap **/
-  /**  evui-dropdown > evui-dropdown-listbox-wrap > evui-dropdown-group-area **/
-  /**  evui-dropdown > evui-dropdown-listbox-wrap > evui-dropdown-single-area **/
+  /**  ev-dropdown > ev-dropdown-listbox-wrap **/
+  /**  ev-dropdown > ev-dropdown-listbox-wrap > ev-dropdown-group-area **/
+  /**  ev-dropdown > ev-dropdown-listbox-wrap > ev-dropdown-single-area **/
 
-  .evui-dropdown-listbox-wrap {
+  .ev-dropdown-listbox-wrap {
     width: 100%;
   }
-  .evui-dropdown-group-area {
+
+  .ev-dropdown-group-area {
     list-style-type: none;
     width: 100%;
     max-height: 150px;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    background: #FFFFFF;
-    -webkit-box-shadow: 0 6px 12px #ccc;
-    box-shadow: 0 6px 12px #ccc;
+    border-radius: $border-radius-base;
     overflow: auto;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('selectbox-border');
+      background-color: evThemed('selectbox-bg');
+    }
+
+    .title {
+      padding: 7px 10px;
+    }
   }
-  .evui-dropdown-group-area .title {
-    padding: 7px 10px;
-    color:#999;
-  }
-  .evui-dropdown-single-area {
+
+  .ev-dropdown-single-area {
     position: absolute;
-    min-width: 100%;
+    width: 100%;
     max-height: 150px;
-    border: 1px solid #ccc;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
-    background: #FFFFFF;
-    -webkit-box-shadow: 0 6px 12px #ccc;
-    box-shadow: 0 6px 12px #ccc;
+    border-radius: $border-radius-base;
     overflow: auto;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('selectbox-border');
+      background-color: evThemed('selectbox-bg');
+    }
   }
 </style>

package/src/components/selectbox/listbox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="prefixCls">
+  <div :class="prefixCls">
     <ul
       :class="ulClasses"
       @click.stop="onClick"
@@ -8,8 +8,13 @@
         v-for="(item, index) in items"
         :key="index"
         :data-index="index"
+        :title="item.name"
         :class="getLiClasses(item)"
       >
+        <ev-icon
+          v-if="item.icon"
+          :cls="`${item.icon} ${prefixCls}-li-custom-icon`"
+        />
         {{ item.name }}
       </li>
     </ul>
@@ -17,7 +22,7 @@
 </template>
 
 <script>
-  const prefixCls = 'evui-listbox';
+  const prefixCls = 'ev-listbox';
 
   export default {
     props: {
@@ -82,35 +87,59 @@
   };
 </script>
 
-<style scoped>
-  .evui-listbox{
-    width: 100%;
+<style lang="scss">
+  @import '~@/styles/default';
+
+  .ev-listbox {
     height: 100%;
+    word-break: break-all;
+    text-align: start;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
   }
-  .evui-listbox-ul{
+
+  .ev-listbox-ul {
     list-style-type: none;
     padding: 2px 0;
   }
-  .evui-listbox-ul-group{
+
+  .ev-listbox-ul-group {
     height: 100%;
   }
-  .evui-listbox-li{
+
+  .ev-listbox-li {
     display: block;
     list-style: none;
-    color: #495060;
-    white-space: nowrap;
     cursor: pointer;
     transition: background .1s ease-in-out;
+
+    &-custom-icon {
+      padding: 0 5px 0 0;
+    }
   }
-  .evui-listbox-li:hover:not(.evui-listbox-li-selected){
-    background-color: #eeeeee;
+
+  .ev-listbox-li:hover:not(.ev-listbox-li-selected) {
+    @include evThemify() {
+      background-color: evThemed('selectbox-select-bg');
+    }
+  }
+
+  .ev-listbox-li-selected {
+    color: $color-gray8;
+
+    @include evThemify() {
+      background-color: evThemed('color-selected');
+    }
   }
-  .evui-listbox-li-selected {
-    color: #fff;
-    background-color: #337ab6;
+
+  .ev-selectbox-size-small .ev-listbox-li,
+  .ev-selectbox-size-medium .ev-listbox-li {
+    padding: 7px;
   }
 
-  .evui-selectbox-size-small .evui-listbox-li { padding: 7px; }
-  .evui-selectbox-size-medium .evui-listbox-li { padding: 7px; }
-  .evui-selectbox-size-large .evui-listbox-li { padding: 7px 10px; }
+  .ev-selectbox-size-large .ev-listbox-li {
+    padding: 7px 10px;
+  }
 </style>

package/src/components/selectbox/option.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="evui-selectbox-item"
+    class="ev-selectbox-item"
   ><slot/>
   </li>
 </template>