feat(MdFile): Support with field variants (#1662)

* feat(MdFile): Support with field variants

* docs(MdFile): Support with field variants

Author: shafimsp

docs/app/pages/Components/File/examples/FileField.vue

@@ -1,31 +1,37 @@
 <template>
   <div>
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Single</label>
       <md-file v-model="single" />
     </md-field>
 
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Upload files</label>
       <md-file v-model="placeholder" placeholder="A nice input placeholder" />
     </md-field>
 
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Disabled</label>
       <md-file v-model="disabled" disabled/>
     </md-field>
 
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Initial value</label>
       <md-file v-model="initial" />
     </md-field>
 
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Multiple</label>
       <md-file v-model="multiple" multiple />
     </md-field>
 
     <md-field>
+      <md-icon md-file-trigger>attach_file</md-icon>
       <label>Only images</label>
       <md-file v-model="single" accept="image/*" />
     </md-field>

src/components/MdField/MdFile/MdFile.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="md-file">
-    <md-file-icon @click.native="openPicker" />
-
     <input
       class="md-input"
       readonly
@@ -31,6 +29,11 @@
       },
       name: String
     },
+    data () {
+      return {
+        triggerEl: null
+      }
+    },
     mixins: [MdFieldMixin],
     inject: ['MdField'],
     methods: {
@@ -73,8 +76,20 @@
     created () {
       this.MdField.file = true
     },
+    mounted () {
+      this.$nextTick().then(() => {
+        this.triggerEl = this.MdField.$el.querySelector('[md-file-trigger]')
+        if (this.triggerEl) {
+          this.triggerEl.addEventListener('click', this.openPicker)
+        }
+      })
+    },
     beforeDestroy () {
       this.MdField.file = false
+
+      if (this.triggerEl) {
+        this.triggerEl.removeEventListener('click', this.openPicker)
+      }
     }
   }
 </script>
@@ -99,4 +114,12 @@
       cursor: pointer;
     }
   }
+
+  .md-field {
+    &.md-has-file {
+      [md-file-trigger] {
+        cursor: pointer;
+      }
+    }
+  }
 </style>