evui 2.1.0 → 2.1.3

package/src/components/selectbox/selectbox.vue

@@ -4,26 +4,26 @@
     :class="selectboxClass"
   >
     <div
-      class="evui-selectbox-select-field"
+      class="ev-selectbox-select-field"
       @click="onClick"
     >
       <div
         v-if="multiple"
-        class="evui-selectbox-multiple-tag-view"
+        class="ev-selectbox-multiple-tag-view"
       >
         <div
           v-if="selectedItems.length"
           :class="`${prefixCls}-select-tag ${selectedItems.length > 1 ? 'max-width' : ''}`"
         >
           <div :class="`${prefixCls}-text-wrap`">
-            <span :class="`${prefixCls}-text`">{{ selectedItems[0].name }}</span>
+            <span :class="`${prefixCls}-text`">{{ multipleFieldFirstItem.name }}</span>
           </div>
           <div
             :class="`${prefixCls}-tag-close`"
-            @click="removeTag(selectedItems[0], $event)"
+            @click="removeTag(multipleFieldFirstItem, $event)"
           >
             <div :class="`${prefixCls}-tag-close-scale`">
-              <span :class="`ei ei-close`"/>
+              <span :class="`ei ei-close`" />
             </div>
           </div>
         </div>
@@ -42,11 +42,12 @@
         :readonly="readOnly"
         :class="inputFieldClass"
         :value="inputFieldValue"
+        :placeholder="placeholder"
         type="text"
         @keyup="onKeyUpInputField"
         @blur="onBlurInputField"
       >
-      <i :class="arrowIconClass"/>
+      <i :class="arrowIconClass" />
     </div>
     <transition name="fade">
       <Dropdown
@@ -68,11 +69,10 @@
 </template>
 
 <script>
-  import '@/styles/all.css';
-  import '@/styles/evui.css';
+  import '@/styles/lib/fontawesome.css';
   import Dropdown from '@/components/selectbox/dropdown';
 
-  const prefixCls = 'evui-selectbox';
+  const prefixCls = 'ev-selectbox';
 
   export default {
     components: {
@@ -100,7 +100,7 @@
       },
     },
     model: {
-      prop: 'selectedValue',
+      prop: 'vModelSelectedValue',
       event: 'change-selected-value',
     },
     props: {
@@ -142,78 +142,103 @@
       },
       readOnly: {
         type: Boolean,
-        default: false,
-      },
-      selectedValue: {
-        type: [String, Number, Array],
-        default: null,
+        default: true,
       },
-      initSelectValue: {
+      vModelSelectedValue: {
         type: [String, Number, Array],
         default: null,
       },
-      initSelectIdx: {
-        type: [Number, Array],
-        default: null,
-      },
       items: {
         type: Array,
         default() {
           return [];
         },
       },
+      placeholder: {
+        type: String,
+        default: '',
+      },
     },
     data() {
       return {
         prefixCls,
-        selectboxClass: this.getSelectboxClass(),
-        inputFieldClass: this.getInputFieldClass(),
+        isUseVModel: this.$vnode.data && this.$vnode.data.model,
         dropDownState: false,
-        clickedValue: '',
-        inputFieldValue: '',
         listBoxItems: [],
-        selectedItems: [],
+        selectedValueList: [],
+        inputFieldValue: '',
       };
     },
     computed: {
       arrowIconClass() {
         return {
-          'evui-selectbox-arrow-icon': true,
-          'evui-selectbox-arrow-icon-rotate-180': this.dropDownState,
-          'evui-selectbox-arrow-icon-disabled': this.disabled,
+          'ev-selectbox-arrow-icon': true,
+          'ev-selectbox-arrow-icon-rotate-180': this.dropDownState,
+          'ev-selectbox-arrow-icon-disabled': this.disabled,
         };
       },
-    },
-    watch: {
-      items: {
-        deep: true,
-        handler(newItems) {
-          if (newItems.length > 0) {
-            this.listBoxItems = newItems.slice();
-            this.initSelect();
-          }
-        },
+      selectboxClass() {
+        return {
+          [`${prefixCls}`]: true,
+          [`${prefixCls}-size-${this.size}`]: true,
+          [`${prefixCls}-disabled`]: this.disabled,
+        };
       },
-      selectedItems(items) {
-        let value = null;
+      inputFieldClass() {
+        return {
+          [`${prefixCls}-input-text`]: true,
+          [`${prefixCls}-input-text-readonly`]: this.readOnly,
+          [`${prefixCls}-input-text-disabled`]: this.disabled,
+        };
+      },
+      selectedItems() {
+        let items = [];
 
         if (this.multiple) {
-          value = [];
-          items.map(obj => value.push(obj.value));
+          items = this.selectedValueList.map(v => this.findItemByValue(v));
         } else {
-          value = items[0] ? items[0].value : null;
+          const foundItem = this.findItemByValue(this.selectedValueList[0]);
+
+          if (foundItem) {
+            items.push(foundItem);
+          }
         }
 
-        this.$emit('change-selected-value', value);
+        return items;
+      },
+      multipleFieldFirstItem() {
+        const firstItem = (this.selectedItems.length && this.selectedItems[0]) || {};
+        return this.findItemByValue(firstItem.value);
+      },
+    },
+    watch: {
+      items: {
+        deep: true,
+        handler() {
+          this.initSettings();
+        },
+      },
+      vModelSelectedValue() {
+        this.syncSelectedValue();
       },
     },
     created() {
-      this.listBoxItems = this.items.slice();
-
       this.dropdownStyle.border = this.multiple ? 1 : 0;
-      this.initSelect();
+    },
+    mounted() {
+      this.syncSelectedValue();
     },
     methods: {
+      initSettings() {
+        this.listBoxItems = this.items.slice() || [];
+
+        if (this.multiple) {
+          this.inputFieldValue = '';
+        } else {
+          const selectedItem = this.items.find(obj => obj.value === this.vModelSelectedValue) || {};
+          this.inputFieldValue = selectedItem.name;
+        }
+      },
       onClick() {
         if (this.disabled) {
           return;
@@ -225,9 +250,9 @@
 
         this.listBoxItems = this.items.slice();
 
-        if (!this.dropDownState &&
-          this.$refs.dropdown &&
-          this.$refs.dropdown.$refs.filterInputField) {
+        if (!this.dropDownState
+          && this.$refs.dropdown
+          && this.$refs.dropdown.$refs.filterInputField) {
           this.$refs.dropdown.$refs.filterInputField.value = '';
         }
 
@@ -250,108 +275,99 @@
         this.$emit('keyup', e);
       },
       onBlurInputField(e) {
-        this.inputFieldValue = this.clickedValue;
+        const text = e.target.value;
+        const foundItem = this.items.find(o => o.name === text);
+
+        if (foundItem) {
+          this.setVModel(foundItem.value);
+        } else {
+          this.inputFieldValue = '';
+          this.setVModel('');
+        }
+
         this.$emit('blur', e);
       },
       onKeyUpDropDownInputField(e) {
         this.listBoxItems = this.getFilteredListBoxItems(e.target.value);
         this.$emit('keyup', e);
       },
-      initSelect() {
-        let item;
-        let value;
+      selectItem(item) {
+        if (!item) {
+          return;
+        }
 
-        this.selectedItems.length = 0;
+        const itemValue = item.value;
+        let existValue = false;
+        let selectedValue;
 
-        if (this.initSelectValue != null) {
-          if (this.initSelectValue.constructor === Array) {
-            for (let ix = 0; ix < this.initSelectValue.length; ix++) {
-              value = this.initSelectValue[ix];
-              item = this.getItemByValue(value);
+        if (this.multiple) {
+          selectedValue = [];
 
-              if (item) {
-                this.selectedItems.push(item);
-              }
-            }
-          } else {
-            item = this.getItemByValue(this.initSelectValue);
+          for (let ix = 0; ix < this.selectedValueList.length; ix++) {
+            const value = this.selectedValueList[ix];
 
-            if (item) {
-              this.selectedItems.push(item);
+            if (value === itemValue) {
+              existValue = true;
+            } else {
+              selectedValue.push(value);
             }
           }
-        } else if (this.initSelectIdx != null) {
-          if (this.initSelectIdx.constructor === Array) {
-            for (let ix = 0; ix < this.initSelectIdx.length; ix++) {
-              value = this.initSelectIdx[ix];
-              item = this.getItemByIndex(value);
-
-              if (item) {
-                this.selectedItems.push(item);
-              }
-            }
-          } else {
-            item = this.getItemByIndex(this.initSelectIdx);
 
-            if (item) {
-              this.selectedItems.push(item);
-            }
+          if (!existValue) {
+            selectedValue.push(itemValue);
           }
+        } else {
+          selectedValue = itemValue;
         }
 
-        if (!this.multiple) {
-          this.inputFieldValue = this.selectedItems.length ? this.selectedItems[0].name : '';
-          this.clickedValue = this.inputFieldValue;
-        }
+        this.setVModel(selectedValue);
       },
-      select(value) {
-        const item = this.getItemByValue(value);
-
-        if (item) {
-          this.selectItem(item);
+      removeTag(item, event) {
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
         }
-      },
-      selectIndex(idx) {
-        const item = this.getItemByIndex(idx);
 
-        if (item) {
-          this.selectItem(item);
-        }
+        this.setVModel(this.selectedValueList.filter(v => v !== item.value));
       },
-      selectItem(item) {
-        if (!item) {
-          return;
+      hideDropdown() {
+        this.dropDownState = false;
+      },
+      setVModel(value) {
+        if (this.isUseVModel) {
+          this.$emit('change-selected-value', value);
+        } else {
+          this.syncSelectedValue(value);
         }
-
-        let foundItem;
-        const itemName = item.name;
+      },
+      syncSelectedValue(value) {
+        const selectedValue = this.isUseVModel ? this.vModelSelectedValue : value;
 
         if (this.multiple) {
-          foundItem = this.selectedItems.find(obj => obj.name === itemName);
-
-          if (foundItem) {
-            this.selectedItems = this.selectedItems.filter(obj => obj.name !== itemName);
-          } else {
-            this.selectedItems.push(item);
-          }
+          this.selectedValueList = selectedValue;
         } else {
-          this.clickedValue = itemName;
-          this.inputFieldValue = itemName;
-          this.selectedItems.length = 0;
-          this.selectedItems.push(item);
-        }
+          this.selectedValueList = [selectedValue];
 
-        if (!this.multiple) {
+          const foundItem = this.findItemByValue(selectedValue);
           this.dropDownState = false;
+          this.inputFieldValue = foundItem.name;
         }
       },
-      removeTag(item, event) {
-        if (event) {
-          event.preventDefault();
-          event.stopPropagation();
+      findItemByValue(value) {
+        let foundItem = {};
+
+        if (value != null) {
+          if (this.isGroup) {
+            this.items.some((groupItem) => {
+              foundItem = groupItem.items.find(item => item && item.value === value);
+              return foundItem != null;
+            });
+          } else {
+            foundItem = this.items.find(obj => obj && obj.value === value);
+          }
         }
 
-        this.selectedItems = this.selectedItems.filter(obj => obj.name !== item.name);
+        return foundItem || {};
       },
       getFilteredListBoxItems(value) {
         let filteredItems;
@@ -384,139 +400,77 @@
 
         return listBoxItems;
       },
-      hideDropdown() {
-        this.dropDownState = false;
-      },
-      getSelectboxClass() {
-        return {
-          [`${prefixCls}`]: true,
-          [`${prefixCls}-size-${this.size}`]: true,
-          [`${prefixCls}-disabled`]: this.disabled,
-        };
-      },
-      getInputFieldClass() {
-        return {
-          [`${prefixCls}-input-text`]: true,
-          [`${prefixCls}-input-text-readonly`]: this.readOnly,
-          [`${prefixCls}-input-text-disabled`]: this.disabled,
-        };
-      },
-      getItemByValue(value) {
-        let groupObj;
-        let groupItems;
-        let foundItem;
-
-        if (this.isGroup) {
-          for (let ix = 0, ixLen = this.items.length; ix < ixLen; ix++) {
-            groupObj = this.items[ix];
-            groupItems = groupObj.items || [];
-            foundItem = groupItems.find(item => item.value === value);
-
-            if (foundItem) {
-              break;
-            }
-          }
-        } else {
-          foundItem = this.items.find(item => item.value === value);
-        }
-
-        if (foundItem) {
-          foundItem = JSON.parse(JSON.stringify(foundItem));
-        }
-
-        return foundItem;
-      },
-      getItemByIndex(idx) {
-        let groupObj;
-        let groupItems;
-        let foundItem;
-        let item;
-
-        if (this.isGroup) {
-          let itemRowIdx = 0;
-
-          for (let ix = 0; ix < this.items.length; ix++) {
-            groupObj = this.items[ix];
-            groupItems = groupObj.items || [];
-
-            for (let jx = 0; jx < groupItems.length; jx++) {
-              item = groupItems[jx];
-
-              if (item && itemRowIdx === idx) {
-                foundItem = item;
-                break;
-              }
-
-              itemRowIdx++;
-            }
-
-            if (foundItem || itemRowIdx > idx) {
-              break;
-            }
-          }
-        } else {
-          foundItem = this.items[idx];
-        }
-
-        if (foundItem) {
-          foundItem = JSON.parse(JSON.stringify(foundItem));
-        }
-
-        return foundItem;
-      },
     },
   };
 </script>
 
-<style>
-  /************************************************************************************
-   Selectbox
-  ************************************************************************************/
-
-  /** evui-selectbox **/
+<style lang="scss">
+  @import '~@/styles/default';
 
-  .evui-selectbox {
+  .ev-selectbox {
     display: inline-block;
     position: relative;
-    border: 1px solid #dddeee;
-    border-radius: 4px;
+    border-radius: $border-radius-base;
     vertical-align: middle;
     line-height: normal;
     cursor: pointer;
-    transition: border-color ease-in-out .15s;
+    transition: border-color $animate-fast;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+      border: $border-solid evThemed('selectbox-border');
+      background-color: evThemed('selectbox-bg');
+    }
+
+    &:focus {
+      @include evThemify() {
+        box-shadow: inset 0 1px 1px rgba($color-black, 0.075),
+          0 0 8px rgba(evThemed('color-primary'), 0.6);
+      }
+    }
+
+    &:hover {
+      @include evThemify() {
+        background-color: evThemed('selectbox-bg-hover');
+      }
+    }
   }
-  .evui-selectbox-disabled{
+
+  .ev-selectbox-disabled {
     cursor: not-allowed;
   }
-  .evui-selectbox:focus{
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
-  }
-  .evui-selectbox-select-field {
+
+  .ev-selectbox-select-field {
     display: inline-block;
     width: 100%;
     height: 100%;
   }
-  .evui-selectbox-select-field:hover{
-    background-color: #eeeeee;
-    border-color: #bbb;
-  }
-  .evui-selectbox-input-text{
+
+  .ev-selectbox-input-text {
     width: 100%;
     height: 100%;
     padding: 6px 10px;
     border: 0;
     background: transparent;
+
+    @include evThemify() {
+      color: evThemed('font-color-base');
+    }
+
+    &:focus {
+      outline: 0;
+    }
   }
-  .evui-selectbox-input-text:focus{
-    outline: 0;
-  }
-  .evui-selectbox-input-text-readonly{
+
+  .ev-selectbox-input-text-readonly {
     cursor: default;
   }
-  .evui-selectbox-input-text-disabled{
+
+  .ev-selectbox-input-text-disabled {
     cursor: not-allowed;
   }
-  .evui-selectbox-arrow-icon{
+
+  .ev-selectbox-arrow-icon {
     position: absolute;
     top: 50%;
     width: 10px;
@@ -526,152 +480,186 @@
     font-family: Font Awesome\ 5 Free;
     font-style: normal;
     font-variant: normal;
-    color: #888888;
-    transition: all .2s ease-in-out;
-  }
-  .evui-selectbox-arrow-icon:before {
-    content: "\F0DD"
+    color: $color-gray40;
+    transition: all $animate-fast;
+
+    &:before {
+      content: '\F0DD';
+    }
   }
-  .evui-selectbox-arrow-icon-disabled{
+
+  .ev-selectbox-arrow-icon-disabled {
     cursor: not-allowed;
   }
-  .evui-selectbox-arrow-icon-rotate-180{
+
+  .ev-selectbox-arrow-icon-rotate-180 {
     transform: rotate(180deg);
   }
-  .evui-selectbox-multiple-tag-view{
+
+  .ev-selectbox-multiple-tag-view {
     width: 100%;
     height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
   }
-  .evui-selectbox-select-tag {
+
+  .ev-selectbox-select-tag {
     display: inline-flex;
     height: 100%;
     max-width: 100%;
     padding: 0 5px;
-    border: 1px solid #e9eaec;
     border-radius: 3px;
-    background: #f0f2f5;
     justify-content: center;
     align-items: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     cursor: pointer;
+
+    @include evThemify() {
+      background-color: evThemed('selectbox-select-bg');
+    }
+
+    &:hover {
+      opacity: 0.85;
+    }
+
+    &.max-width {
+      max-width: calc(100% - 40px);
+    }
   }
-  .evui-selectbox-select-tag:hover {
-    opacity:.85;
-  }
-  .evui-selectbox-select-tag.max-width {
-    max-width: calc(100% - 40px);
-  }
-  .evui-selectbox-text-wrap{
+
+  .ev-selectbox-text-wrap {
     display: inline-block;
-    max-width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .evui-selectbox-text {
-    color: #495060;
+
+    @include truncate(100%);
   }
-  .evui-selectbox-tag-close {
+
+  .ev-selectbox-tag-close {
     margin-left: 5px;
     border-radius: 50%;
-    background-color: rgba(0,0,0,0.4);
-    opacity: .66;
+    background-color: rgba($color-black, 0.4);
+    opacity: 0.66;
     cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
   }
-  .evui-selectbox-tag-close:hover{
-    opacity: 1
-  }
-  .evui-selectbox-tag-close-scale {
-    color: #fff;
+
+  .ev-selectbox-tag-close-scale {
+    color: $color-white;
   }
-  .evui-select-search:focus{
-    border-color: #66afe8;
+
+  .ev-select-search:focus {
     outline: 0;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+
+    @include evThemify() {
+      border-color: evThemed('color-primary');
+      box-shadow: inset 0 1px 1px rgba($color-black, 0.075),
+        0 0 8px rgba(evThemed('color-primary'), 0.6);
+    }
   }
-  .evui-selectbox-select-count-tag {
+
+  .ev-selectbox-select-count-tag {
     display: inline-flex;
     width: 35px;
     height: 100%;
     padding: 0 2px;
-    border: 1px solid #e9eaec;
     border-radius: 3px;
-    background: #f0f2f5;
     justify-content: center;
     align-items: center;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    @include evThemify() {
+      background-color: darken(evThemed('selectbox-select-bg'), 3%);
+    }
   }
 
   /** size **/
-  .evui-selectbox-size-small {
+  .ev-selectbox-size-small {
     width: 90px;
     height: 18px;
     font-size: 11px;
+
+    .ev-selectbox-select-field {
+      padding: 1px 12px 1px 2px;
+    }
+
+    .ev-selectbox-arrow-icon {
+      right: 1px;
+      margin-top: -3px;
+    }
+
+    .ev-selectbox-arrow-icon-rotate-180 {
+      right: 4px;
+      margin-top: -7px;
+    }
+
+    .ev-selectbox-tag-close {
+      font-size: 10px;
+      transform: scale(0.9);
+    }
+
+    .ev-selectbox-tag-close-scale {
+      transform: scale(0.6);
+    }
   }
-  .evui-selectbox-size-medium {
+
+  .ev-selectbox-size-medium {
     width: 140px;
     height: 25px;
     font-size: 12px;
+
+    .ev-selectbox-select-field {
+      padding: 2px 19px 2px 3px;
+    }
+
+    .ev-selectbox-arrow-icon {
+      right: 4px;
+      margin-top: -4px;
+    }
+
+    .ev-selectbox-arrow-icon-rotate-180 {
+      right: 7px;
+      margin-top: -6px;
+    }
+
+    .ev-selectbox-tag-close {
+      transform: scale(0.8);
+    }
+
+    .ev-selectbox-tag-close-scale {
+      transform: scale(0.5);
+    }
   }
-  .evui-selectbox-size-large {
+
+  .ev-selectbox-size-large {
     width: 180px;
     height: 30px;
-    font-size: 14px;
-  }
+    font-size: $font-size-medium;
 
-  .evui-selectbox-size-small .evui-selectbox-select-field { padding: 1px 12px 1px 2px; }
-  .evui-selectbox-size-medium .evui-selectbox-select-field { padding: 2px 19px 2px 3px; }
-  .evui-selectbox-size-large .evui-selectbox-select-field { padding: 2px 23px 2px 4px; }
+    .ev-selectbox-select-field {
+      padding: 2px 23px 2px 4px;
+    }
 
-  .evui-selectbox-size-small .evui-selectbox-arrow-icon{
-    right: 1px;
-    margin-top: -3px;
-  }
-  .evui-selectbox-size-medium .evui-selectbox-arrow-icon{
-    right: 4px;
-    margin-top: -4px;
-  }
-  .evui-selectbox-size-large .evui-selectbox-arrow-icon{
-    right: 7px;
-    margin-top: -4px;
-  }
+    .ev-selectbox-arrow-icon {
+      right: 7px;
+      margin-top: -4px;
+    }
 
-  .evui-selectbox-size-small .evui-selectbox-arrow-icon-rotate-180{
-    right: 4px;
-    margin-top: -7px;
-  }
-  .evui-selectbox-size-medium .evui-selectbox-arrow-icon-rotate-180{
-    right: 7px;
-    margin-top: -6px;
-  }
-  .evui-selectbox-size-large .evui-selectbox-arrow-icon-rotate-180{
-    right: 8px;
-  }
+    .ev-selectbox-arrow-icon-rotate-180 {
+      right: 8px;
+    }
 
-  .evui-selectbox-size-small .evui-selectbox-tag-close{
-    font-size: 10px;
-    transform: scale(0.9);
-  }
-  .evui-selectbox-size-medium .evui-selectbox-tag-close{
-    transform: scale(0.8);
-  }
-  .evui-selectbox-size-large .evui-selectbox-tag-close{
-    transform: scale(0.8);
-  }
+    .ev-selectbox-tag-close {
+      transform: scale(0.8);
+    }
 
-  .evui-selectbox-size-small .evui-selectbox-tag-close-scale{
-     transform: scale(0.6);
-   }
-  .evui-selectbox-size-medium .evui-selectbox-tag-close-scale{
-    transform: scale(0.5);
-  }
-  .evui-selectbox-size-large .evui-selectbox-tag-close-scale{
-    transform: scale(0.45);
+    .ev-selectbox-tag-close-scale {
+      transform: scale(0.45);
+    }
   }
 </style>