Select: make better

add props `label` for select
fix mutliple selection init
add object support for props `value`
remove useless code

Author: superluckyfir

document/docs/select.md

@@ -19,14 +19,15 @@
   }
 </script>
 <style>
-    .demo-tabs .block {
-        padding: 30px 24px;
-        overflow: hidden;
-        border-bottom: 1px solid #eff2f6;
-    }
-    .demo-tabs .block:last-child {
-        border-bottom: none;
-    }
+  .demo-tabs .block {
+    padding: 30px 24px;
+    overflow: hidden;
+    border-bottom: 1px solid #eff2f6;
+  }
+
+  .demo-tabs .block:last-child {
+    border-bottom: none;
+  }
 </style>
 ## Tabs 标签页
 

document/docs/tabs.md

@@ -1,49 +1,49 @@
 <template>
   <div class="mv-select" v-clickoutside="handleClose">
-    <div class="input-field col s12">
-      <div class="select-wrapper">
-        <span class="caret">▼</span>
-        <input type="text"
-               class="select-dropdown"
-               readonly="true"
-               :value="selectedLabel"
-               @focus="handleFocus"
-               @click="handleClick"
-               ref="mvSelect"
-        >
-        <transition
-          name="mv-top"
-          @before-enter="handleMenuEnter">
-          <ul id="select-options"
-              class="dropdown-content select-dropdown"
-              :class="{'mv-select__multiple': multiple}"
-              v-show="avisible"
-              ref="options">
-            <el-option
-              :value="placeholder"
-              created
-              v-if="placeholder"
-              disabled>
-            </el-option>
-            <slot></slot>
-          </ul>
-        </transition>
-      </div>
-      <label>Materialize Select</label>
+    <div class="select-wrapper">
+      <span class="caret">▼</span>
+      <input type="text"
+             class="select-dropdown"
+             readonly="true"
+             :value="selectedLabel"
+             @focus="handleFocus"
+             @click="handleClick">
+      <transition
+        name="mv-top"
+        @before-enter="handleMenuEnter">
+        <ul id="select-options"
+            class="dropdown-content select-dropdown"
+            :class="{'mv-select__multiple': multiple}"
+            v-show="visible"
+            ref="options">
+          <mv-option
+            v-if="placeholder"
+            :value="placeholder"
+            disabled>
+          </mv-option>
+          <slot></slot>
+        </ul>
+      </transition>
     </div>
+    <label v-if="label">{{label}}</label>
   </div>
 </template>
 
 <script>
-  import ElOption from './option.vue'
-  import Clickoutside from 'mvui/src/utils/clickoutside'
+  import MvOption from './option.vue'
+  import Clickoutside from 'main/utils/clickoutside'
+  import {getValueByPath} from 'main/utils/util'
 
   export default {
     name: 'MvSelect',
 
     componentName: 'MvSelect',
 
-    directives: { Clickoutside },
+    directives: {Clickoutside},
+
+    components: {
+      MvOption
+    },
 
     props: {
       value: {
@@ -54,32 +54,32 @@
         default: 'value'
       },
       placeholder: {
-        type: [String, Object, Number],
+        type: [String, Number, Object],
         default: ''
       },
       multiple: {
         type: Boolean
-      }
+      },
+      label: String
     },
+
     data () {
       return {
         options: [],
         cachedOptions: [],
-        avisible: false,
+        visible: false,
         isSelect: true,
-        selectedLabel: '',
-        createdLabel: '',
-        filterable: '',
-        createdSelected: '',
-        checkbox: false
+        selectedLabel: ''
       }
     },
-    components: {
-      ElOption
-    },
-    created () {
-      this.$on('handleOptionClick', this.handleOptionSelect)
+
+    watch: {
+      value (val) {
+        this.setSelected()
+        this.$emit('change', val)
+      }
     },
+
     methods: {
       handleOptionSelect (option) {
         if (this.multiple) {
@@ -93,58 +93,56 @@
           this.$emit('input', value)
         } else {
           this.$emit('input', option.value)
-          this.avisible = false
+          this.visible = false
         }
       },
       getValueIndex (arr = [], value) {
         const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
         if (!isObject) {
           return arr.indexOf(value)
+        } else {
+          const valueKey = this.valueKey
+          let index = -1
+          arr.some((item, i) => {
+            if (getValueByPath(item, valueKey) === getValueByPath(value, valueKey)) {
+              index = i
+              return true
+            }
+            return false
+          })
+          return index
         }
       },
       handleFocus () {
-        this.avisible = true
-      },
-      handleBlur () {
-        setTimeout(() => {
-          this.avisible = false
-        }, 200)
+        this.visible = true
       },
       handleClose () {
-        this.avisible = false
+        this.visible = false
       },
       setSelected () {
         if (!this.multiple) {
           let option = this.getOption(this.value)
-          if (option.created) {
-            this.createdLabel = option.currentLabel
-            this.createdSelected = true
-          } else {
-            this.createdSelected = false
-          }
           this.selectedLabel = option.currentLabel
           if (!option.currentLabel && this.placeholder) {
             this.selectedLabel = this.placeholder
           }
-          this.selected = option
-          if (this.filterable) this.query = this.selectedLabel
           return
         }
         let result = []
         if (Array.isArray(this.value)) {
           this.value.forEach(value => {
-            result.push(this.getOption(value).label)
+            result.push(this.getOption(value).currentLabel)
           })
         }
         this.selectedLabel = result
       },
       getOption (value) {
         let option
         const isObject = Object.prototype.toString.call(value).toLowerCase() === '[object object]'
-        for (let i = this.cachedOptions.length - 1; i >= 0; i--) {
+        for (let i = 0; i <= this.cachedOptions.length - 1; i++) {
           const cachedOption = this.cachedOptions[i]
           const isEqual = isObject
-            ? this.getValueByPath(cachedOption.value, this.valueKey) === this.getValueByPath(value, this.valueKey)
+            ? getValueByPath(cachedOption.value, this.valueKey) === getValueByPath(value, this.valueKey)
             : cachedOption.value === value
           if (isEqual) {
             option = cachedOption
@@ -164,38 +162,18 @@
         return newOption
       },
       handleClick () {
-        this.avisible !== this.avisible
+        this.visible !== this.visible
       },
       handleMenuEnter (el) {
         el.style.top = 0
-      },
-      getValueByPath (object, prop) {
-        prop = prop || ''
-        const paths = prop.split('.')
-        let current = object
-        let result = null
-        for (let i = 0, j = paths.length; i < j; i++) {
-          const path = paths[i]
-          if (!current) break
-
-          if (i === j - 1) {
-            result = current[path]
-            break
-          }
-          current = current[path]
-        }
-        return result
       }
     },
-    computed: {},
     mounted () {
       this.setSelected()
     },
-    watch: {
-      'value' (val) {
-        this.setSelected()
-        this.$emit('change', val)
-      }
+
+    created () {
+      this.$on('handleOptionClick', this.handleOptionSelect)
     }
   }
 </script>

packages/select/src/main.vue

@@ -8,18 +8,15 @@
 </template>
 
 <script>
-  import Emitter from 'mvui/src/mixins/emitter'
   export default {
-    mixins: [Emitter],
     name: 'MvOptionGroup',
+
+    componentName: 'MvOptionGroup',
+
     props: {
       label: String,
-      disabled: {
-        type: Boolean,
-        default: false
-      }
+      disabled: Boolean
     }
   }
-
 </script>