fix(MdCore): prop validator message now uses Vue.util.warn

Author: marcos-hotmart

docs/app/pages/UiElements.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script>
-export default {
-  name: 'UiElements',
-  data: () => ({
-    elements: [
+  export default {
+    name: 'UiElements',
+    data: () => ({
+      elements: [
 
-    ]
-  })
-}
+      ]
+    })
+  }
 </script>

src/components/MdChips/MdChips.vue

@@ -29,9 +29,10 @@
 
 <script>
   import MdComponent from 'core/MdComponent'
-  import MdUuid from 'core/utils/MdUuid'
   import MdField from 'components/MdField/MdField'
   import MdInput from 'components/MdField/MdInput/MdInput'
+  import MdUuid from 'core/utils/MdUuid'
+  import MdPropValidator from 'core/utils/MdPropValidator'
 
   export default new MdComponent({
     name: 'MdChips',
@@ -47,15 +48,7 @@
       },
       mdInputType: {
         type: [String, Number],
-        validator (type) {
-          if (type === 'file') {
-            console.error('The md-input-type prop cannot be \'file\'')
-
-            return false
-          }
-
-          return true
-        }
+        ...MdPropValidator('md-input-type', ['email', 'number', 'password', 'search', 'tel', 'text', 'url'])
       },
       mdPlaceholder: [String, Number],
       mdStatic: Boolean,

src/components/MdPortal/MdPortal.vue

@@ -24,18 +24,14 @@
     props: {
       mdIf: {
         type: null,
-        validator: (value) => {
-          return validator('md-if', this, value === null || typeof value === 'boolean', 'You should pass a Boolean value')
-        }
+        validator: (value) => validator('md-if', this, value === null || typeof value === 'boolean', 'You should pass a Boolean value')
       },
       mdTransitionName: String,
       mdTransitionAppear: Boolean,
       mdFollowEl: HTMLElement,
       mdTargetEl: {
         type: HTMLElement,
-        validator: (value) => {
-          return validator('md-target-el', this, value && value instanceof HTMLElement, 'You should pass a valid HTMLElement')
-        }
+        validator: (value) => validator('md-target-el', this, value && value instanceof HTMLElement, 'You should pass a valid HTMLElement')
       }
     },
     data: () => ({

src/core/utils/MdPropValidator.js

@@ -1,11 +1,13 @@
+import { util } from 'vue'
+
 export default (name, options) => {
   return {
-    validator (value) {
+    validator: value => {
       if (options.includes(value)) {
         return true
       }
 
-      console.error(`The ${name} prop is invalid. Given value: ${value}. Available options: ${options.join(', ')}.`)
+      util.warn(`The ${name} prop is invalid. Given value: ${value}. Available options: ${options.join(', ')}.`, this)
 
       return false
     }