From 387da872915b494cf2247ccc9ba7fa7777775155 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Mon, 14 Nov 2016 03:33:04 -0200
Subject: [PATCH] Make inputs and textareas more reactive

---
 src/components/mdInputContainer/common.js     |  54 +++++++++
 src/components/mdInputContainer/mdInput.vue   | 109 +++--------------
 .../mdInputContainer/mdInputContainer.vue     |  16 ++-
 .../mdInputContainer/mdTextarea.vue           | 111 +++---------------
 4 files changed, 96 insertions(+), 194 deletions(-)
 create mode 100644 src/components/mdInputContainer/common.js

diff --git a/src/components/mdInputContainer/common.js b/src/components/mdInputContainer/common.js
new file mode 100644
index 0000000..513258f
--- /dev/null
+++ b/src/components/mdInputContainer/common.js
@@ -0,0 +1,54 @@
+export default {
+  props: {
+    value: [String, Number],
+    disabled: Boolean,
+    required: Boolean,
+    maxlength: [String, Number],
+    placeholder: [String, Number]
+  },
+  watch: {
+    disabled() {
+      this.setParentDisabled();
+    },
+    required() {
+      this.setParentRequired();
+    },
+    placeholder() {
+      this.setParentPlaceholder();
+    },
+    maxlength() {
+      this.handleMaxLength();
+    }
+  },
+  methods: {
+    handleMaxLength() {
+      this.parentContainer.enableCounter = this.maxlength > 0;
+      this.parentContainer.counterLength = this.maxlength;
+    },
+    setParentValue() {
+      this.parentContainer.setValue(this.$el.value);
+    },
+    setParentDisabled() {
+      this.parentContainer.isDisabled = this.disabled;
+    },
+    setParentRequired() {
+      this.parentContainer.isRequired = this.required;
+    },
+    setParentPlaceholder() {
+      this.parentContainer.hasPlaceholder = !!this.placeholder;
+    },
+    onFocus() {
+      this.parentContainer.isFocused = true;
+    },
+    onBlur() {
+      this.parentContainer.isFocused = false;
+      this.setParentValue();
+    },
+    onInput() {
+      this.setParentValue();
+      this.parentContainer.inputLength = this.$el.value.length;
+      this.$emit('change', this.$el.value);
+      this.$emit('input', this.$el.value);
+    }
+  }
+};
diff --git a/src/components/mdInputContainer/mdInput.vue b/src/components/mdInputContainer/mdInput.vue
index 2c313e1..11d5a79 100644
--- a/src/components/mdInputContainer/mdInput.vue
+++ b/src/components/mdInputContainer/mdInput.vue
@@ -1,14 +1,12 @@
 <template>
   <input
     class="md-input"
-    :type="type || 'text'"
+    :type="type"
     :value="value"
     :disabled="disabled"
     :required="required"
     :placeholder="placeholder"
     :maxlength="maxlength"
-    @invalid="onInvalid"
-    @valid="onValid"
     @focus="onFocus"
     @blur="onBlur"
     @input="onInput"
@@ -17,108 +15,31 @@
 </template>
 
 <script>
-  let invalidClass = 'md-input-invalid';
-  let disabledClass = 'md-input-disabled';
-  let requiredClass = 'md-input-required';
-  let placeholderClass = 'md-input-placeholder';
-  let focusedClass = 'md-input-focused';
-  let hasValueClass = 'md-has-value';
-
-  let manageDisabledClass = (state, scope) => {
-    if (state) {
-      scope.add(disabledClass);
-    } else {
-      scope.remove(disabledClass);
-    }
-  };
-
-  let manageRequiredClass = (required, scope) => {
-    if (required) {
-      scope.add(requiredClass);
-    } else {
-      scope.remove(requiredClass);
-    }
-  };
-
-  let managePlaceholderClass = (placeholder, scope) => {
-    if (placeholder) {
-      scope.add(placeholderClass);
-    } else {
-      scope.remove(placeholderClass);
-    }
-  };
-
-  let manageHasValueClass = function(value, scope) {
-    if (value.length > 0) {
-      scope.add(hasValueClass);
-    } else {
-      scope.remove(hasValueClass);
-    }
-  };
-
-  let manageMaxlength = (length, parent) => {
-    parent.enableCounter = +length > 0;
-    parent.counterLength = +length;
-  };
+  import common from './common';
+  import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
+    mixins: [common],
     props: {
-      type: String,
-      value: [String, Number],
-      disabled: Boolean,
-      required: Boolean,
-      maxlength: [String, Number],
-      placeholder: [String, Number]
-    },
-    watch: {
-      disabled(disabled) {
-        manageDisabledClass(disabled, this.parentClasses);
-      },
-      required(required) {
-        manageRequiredClass(required, this.parentClasses);
-      },
-      placeholder(placeholder) {
-        managePlaceholderClass(placeholder, this.parentClasses);
-      },
-      maxlength(maxlength) {
-        manageMaxlength(maxlength, this.$parent);
-      }
-    },
-    methods: {
-      onInvalid() {
-        this.parentClasses.add(invalidClass);
-      },
-      onValid() {
-        this.parentClasses.remove(invalidClass);
-      },
-      onFocus() {
-        this.parentClasses.add(focusedClass);
-      },
-      onBlur() {
-        this.parentClasses.remove(focusedClass);
-        manageHasValueClass(this.$el.value, this.parentClasses);
-      },
-      onInput() {
-        manageHasValueClass(this.$el.value, this.parentClasses);
-        this.$parent.inputLength = this.$el.value.length;
-        this.$emit('change', this.$el.value);
-        this.$emit('input', this.$el.value);
+      type: {
+        type: String,
+        default: 'text'
       }
     },
     mounted() {
-      if (!this.$parent.$el.classList.contains('md-input-container')) {
+      this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
+
+      if (!this.parentContainer) {
         this.$destroy();
 
         throw new Error('You should wrap the md-input in a md-input-container');
       }
 
-      this.parentClasses = this.$parent.$el.classList;
-
-      manageDisabledClass(this.disabled, this.parentClasses);
-      manageRequiredClass(this.required, this.parentClasses);
-      managePlaceholderClass(this.placeholder, this.parentClasses);
-      manageHasValueClass(this.$el.value, this.parentClasses);
-      manageMaxlength(this.maxlength, this.$parent);
+      this.setParentDisabled();
+      this.setParentRequired();
+      this.setParentPlaceholder();
+      this.setParentValue();
+      this.handleMaxLength();
     }
   };
 </script>
diff --git a/src/components/mdInputContainer/mdInputContainer.vue b/src/components/mdInputContainer/mdInputContainer.vue
index 6ea8171..3f357d9 100644
--- a/src/components/mdInputContainer/mdInputContainer.vue
+++ b/src/components/mdInputContainer/mdInputContainer.vue
@@ -26,7 +26,11 @@
         inputType: false,
         showPassword: false,
         enableCounter: false,
-        mdHasSelect: false,
+        hasSelect: false,
+        hasPlaceholder: false,
+        isDisabled: false,
+        isRequired: false,
+        isFocused: false,
         counterLength: 0,
         inputLength: 0
       };
@@ -43,8 +47,12 @@
         return {
           'md-input-inline': this.mdInline,
           'md-has-password': this.mdHasPassword,
-          'md-has-select': this.mdHasSelect,
-          'md-has-value': this.hasValue
+          'md-has-select': this.hasSelect,
+          'md-has-value': this.hasValue,
+          'md-input-placeholder': this.hasPlaceholder,
+          'md-input-disabled': this.isDisabled,
+          'md-input-required': this.isRequired,
+          'md-input-focused': this.isFocused
         };
       }
     },
@@ -67,7 +75,7 @@
       }
     },
     mounted() {
-      this.input = this.$el.querySelector('input') || this.$el.querySelector('textarea') || this.$el.querySelector('select');
+      this.input = this.$el.querySelectorAll('input, textarea, select')[0];
 
       if (!this.input) {
         this.$destroy();
diff --git a/src/components/mdInputContainer/mdTextarea.vue b/src/components/mdInputContainer/mdTextarea.vue
index 09dd80c..3001a20 100644
--- a/src/components/mdInputContainer/mdTextarea.vue
+++ b/src/components/mdInputContainer/mdTextarea.vue
@@ -1,9 +1,11 @@
 <template>
   <textarea
     class="md-input"
+    :value="value"
     :disabled="disabled"
-    @invalid="onInvalid"
-    @valid="onValid"
+    :required="required"
+    :placeholder="placeholder"
+    :maxlength="maxlength"
     @focus="onFocus"
     @blur="onBlur"
     @input="onInput"></textarea>
@@ -11,108 +13,25 @@
 
 <script>
   import autosize from 'autosize';
-
-  let invalidClass = 'md-input-invalid';
-  let disabledClass = 'md-input-disabled';
-  let requiredClass = 'md-input-required';
-  let placeholderClass = 'md-input-placeholder';
-  let focusedClass = 'md-input-focused';
-  let hasValueClass = 'md-has-value';
-
-  let manageDisabledClass = (state, scope) => {
-    if (state) {
-      scope.add(disabledClass);
-    } else {
-      scope.remove(disabledClass);
-    }
-  };
-
-  let manageRequiredClass = (required, scope) => {
-    if (required) {
-      scope.add(requiredClass);
-    } else {
-      scope.remove(requiredClass);
-    }
-  };
-
-  let managePlaceholderClass = (placeholder, scope) => {
-    if (placeholder) {
-      scope.add(placeholderClass);
-    } else {
-      scope.remove(placeholderClass);
-    }
-  };
-
-  let manageHasValueClass = function(value, scope) {
-    if (value.length > 0) {
-      scope.add(hasValueClass);
-    } else {
-      scope.remove(hasValueClass);
-    }
-  };
-
-  let manageMaxlength = (length, parent) => {
-    parent.enableCounter = length > 0;
-    parent.counterLength = length;
-  };
+  import common from './common';
+  import getClosestVueParent from '../../core/utils/getClosestVueParent';
 
   export default {
-    props: {
-      type: String,
-      disabled: Boolean,
-      required: Boolean,
-      maxlength: String,
-      placeholder: String
-    },
-    watch: {
-      disabled(disabled) {
-        manageDisabledClass(disabled, this.parentClasses);
-      },
-      required(required) {
-        manageRequiredClass(required, this.parentClasses);
-      },
-      placeholder(placeholder) {
-        managePlaceholderClass(placeholder, this.parentClasses);
-      },
-      maxlength(maxlength) {
-        manageMaxlength(maxlength, this.$parent);
-      }
-    },
-    methods: {
-      onInvalid() {
-        this.parentClasses.add(invalidClass);
-      },
-      onValid() {
-        this.parentClasses.remove(invalidClass);
-      },
-      onFocus() {
-        this.parentClasses.add(focusedClass);
-      },
-      onBlur() {
-        this.parentClasses.remove(focusedClass);
-        manageHasValueClass(this.$el.value, this.parentClasses);
-      },
-      onInput() {
-        manageHasValueClass(this.$el.value, this.parentClasses);
-        this.$parent.inputLength = this.$el.value.length;
-        this.$emit('change', this.$el.value);
-        this.$emit('input', this.$el.value);
-      }
-    },
+    mixins: [common],
     mounted() {
-      if (!this.$parent.$el.classList.contains('md-input-container')) {
+      this.parentContainer = getClosestVueParent(this.$parent, 'md-input-container');
+
+      if (!this.parentContainer) {
         this.$destroy();
 
         throw new Error('You should wrap the md-textarea in a md-input-container');
       }
 
-      this.parentClasses = this.$parent.$el.classList;
-
-      manageDisabledClass(this.disabled, this.parentClasses);
-      manageRequiredClass(this.required, this.parentClasses);
-      managePlaceholderClass(this.placeholder, this.parentClasses);
-      manageHasValueClass(this.$el.value, this.parentClasses);
-      manageMaxlength(this.maxlength, this.$parent);
+      this.setParentDisabled();
+      this.setParentRequired();
+      this.setParentPlaceholder();
+      this.setParentValue();
+      this.handleMaxLength();
 
       if (!this.$el.getAttribute('rows')) {
         this.$el.setAttribute('rows', '1');