fix(MdInput): avoid InputEvent object from @input event (#1196)

* fix(MdInput): Avoid InputEvent object from @input event

fix #1160

* fix(MdField): `$emit` missing `this`

* fix(MdSelect): declare all MdSelect properties in `data()` and make `MdSelect.modelValue` synced wit

* feat(MdField): make 'v-model'/'value' in MdFile, MdInput, MdSelect, MdTextarea optional

`MdSelect` could be switched between single and multiple

fix #1150

* feat(MdSelect): one way update with `value`

* fix(MdOption): let value avaiable to be `0`

fix #1203

* fix(MdField): set value default as null

* fix(MdField): Remove value default

#1196 (comment)

* style(MdSelect): brackets for if statement execute block

#1196 (comment)

Author: VdustR

src/components/MdField/MdFieldMixin.js

@@ -1,27 +1,28 @@
 export default {
   props: {
-    value: {
-      required: true
-    },
+    value: {},
     placeholder: String,
     maxlength: [String, Number],
     readonly: Boolean,
     required: Boolean,
     disabled: Boolean,
     mdCounter: [String, Number]
   },
-  data: () => ({
-    textareaHeight: false
-  }),
+  data () {
+    return {
+      localValue: this.value,
+      textareaHeight: false
+    }
+  },
   computed: {
     model: {
       get () {
-        return this.value
+        return this.localValue
       },
       set (value) {
         if (value.constructor.name.toLowerCase() !== 'inputevent') {
           this.$nextTick(() => {
-            this.$emit('input', value)
+            this.localValue = value
           })
         }
       }
@@ -66,6 +67,12 @@ export default {
     },
     mdCounter () {
       this.setMaxlength()
+    },
+    localValue (val) {
+      this.$emit('input', val)
+    },
+    value (val) {
+      this.localValue = val
     }
   },
   methods: {
@@ -87,7 +94,7 @@ export default {
         }
       }
     },
-    setFieldValue (value) {
+    setFieldValue () {
       this.MdField.value = this.model
     },
     setPlaceholder () {

src/components/MdField/MdInput/MdInput.vue

@@ -3,7 +3,7 @@
     class="md-input"
     v-model="model"
     v-bind="attributes"
-    v-on="$listeners"
+    v-on="listeners"
     @focus="onFocus"
     @blur="onBlur">
 </template>
@@ -33,6 +33,12 @@
       },
       isPassword () {
         return this.type === 'password'
+      },
+      listeners () {
+        return {
+          ...this.$listeners,
+          input: event => this.$emit('input', event.target.value)
+        }
       }
     },
     watch: {

src/components/MdField/MdSelect/MdOption.vue

@@ -39,7 +39,8 @@
         return this.MdOptgroup.disabled || this.disabled
       },
       key () {
-        return this.value || this.uniqueId
+        let isSet = (this.value || this.value === 0)
+        return isSet ? this.value : this.uniqueId
       },
       inputLabel () {
         return this.MdSelect.label

src/components/MdField/MdSelect/MdSelect.vue

@@ -16,7 +16,7 @@
       :disabled="disabled"
       :required="required"
       :placeholder="placeholder"
-      v-on="$listeners"
+      v-on="inputListeners"
       v-bind="$attrs"
       @focus.prevent="onFocus"
       @blur.prevent="removeHighlight"
@@ -75,35 +75,43 @@
       name: String
     },
     inject: ['MdField'],
-    data: () => ({
-      uniqueId: 'md-select-menu-' + MdUuid(),
-      menuStyles: {},
-      offset: {
-        x: defaultOffset.x,
-        y: 0
-      },
-      showSelect: true,
-      didMount: false,
-      MdSelect: {
-        items: {},
-        label: null,
-        multiple: false,
-        modelValue: null
+    data () {
+      return {
+        uniqueId: 'md-select-menu-' + MdUuid(),
+        menuStyles: {},
+        offset: {
+          x: defaultOffset.x,
+          y: 0
+        },
+        showSelect: true,
+        didMount: false,
+        MdSelect: {
+          items: {},
+          label: null,
+          multiple: false,
+          modelValue: this.model,
+          setValue: this.setValue,
+          setContent: this.setContent,
+          setMultipleValue: this.setMultipleValue,
+          setMultipleContent: this.setMultipleContent
+        }
       }
-    }),
+    },
     provide () {
       const MdSelect = this.MdSelect
 
-      MdSelect.setValue = this.setValue
-      MdSelect.setContent = this.setContent
-      MdSelect.setMultipleValue = this.setMultipleValue
-      MdSelect.setMultipleContent = this.setMultipleContent
-      MdSelect.modelValue = this.model
-
       return { MdSelect }
     },
+    computed: {
+      inputListeners () {
+        return {
+          ...this.$listeners,
+          input: undefined
+        }
+      }
+    },
     watch: {
-      value: {
+      localValue: {
         immediate: true,
         handler () {
           this.setFieldContent()
@@ -113,7 +121,11 @@
         immediate: true,
         handler (isMultiple) {
           this.MdSelect.multiple = isMultiple
+          this.$nextTick(() => this.initialLocalValueByDefault())
         }
+      },
+      model () {
+        this.MdSelect.modelValue = this.model
       }
     },
     methods: {
@@ -180,14 +192,19 @@
           this.showSelect = true
         }
       },
-      toggleArrayValue (array, value) {
-        if (array.includes(value)) {
-          const index = array.indexOf(value)
-
-          array.splice(index, 1)
-        } else {
-          array.push(value)
+      arrayAccessorRemove (arr, index) {
+        let before = arr.slice(0, index)
+        let after = arr.slice(index + 1, arr.length)
+        return before.concat(after)
+      },
+      toggleArrayValue (value) {
+        let index = this.localValue.indexOf(value)
+        let includes = index > -1
+        if (!includes) {
+          this.localValue = this.localValue.concat([value])
+          return
         }
+        this.localValue = this.arrayAccessorRemove(this.localValue, index)
       },
       setValue (newValue) {
         this.model = newValue
@@ -198,7 +215,7 @@
         this.MdSelect.label = newLabel
       },
       setContentByValue () {
-        const textContent = this.MdSelect.items[this.value]
+        const textContent = this.MdSelect.items[this.localValue]
 
         if (textContent) {
           this.setContent(textContent)
@@ -209,13 +226,16 @@
       setMultipleValue (value) {
         const newValue = value
 
-        this.toggleArrayValue(this.model, newValue)
+        this.toggleArrayValue(newValue)
         this.setFieldValue()
       },
       setMultipleContentByValue () {
+        if (!this.localValue) {
+          this.initialLocalValueByDefault()
+        }
         let content = []
 
-        this.value.forEach(item => {
+        this.localValue.forEach(item => {
           const textContent = this.MdSelect.items[item]
 
           if (textContent) {
@@ -231,6 +251,17 @@
         } else {
           this.setContentByValue()
         }
+      },
+      initialLocalValueByDefault () {
+        let isArray = Array.isArray(this.localValue)
+        if (this.multiple && !isArray) {
+          let isSet = this.localValue !== undefined && this.localValue !== null
+          this.localValue = isSet ? [this.localValue] : []
+          return
+        }
+        if (!this.multiple && isArray) {
+          this.localValue = this.localValue.length > 0 ? this.localValue[0] : null
+        }
       }
     },
     async mounted () {