From fbf6d2a8e68859152fe9f8958336341e021345c8 Mon Sep 17 00:00:00 2001
From: Muhammed Shafi P <shafimsp@gmail.com>
Date: Sun, 13 May 2018 22:30:52 +0530
Subject: [PATCH] feat(MdFile): Support with field variants (#1662)

* feat(MdFile): Support with field variants

* docs(MdFile): Support with field variants
---
 .../Components/File/examples/FileField.vue    |  6 +++++
 src/components/MdField/MdFile/MdFile.vue      | 27 +++++++++++++++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/docs/app/pages/Components/File/examples/FileField.vue b/docs/app/pages/Components/File/examples/FileField.vue
index bd97dc32a..7e0979cf9 100644
--- a/docs/app/pages/Components/File/examples/FileField.vue
+++ b/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>
diff --git a/src/components/MdField/MdFile/MdFile.vue b/src/components/MdField/MdFile/MdFile.vue
index ba9459291..5a90a8078 100644
--- a/src/components/MdField/MdFile/MdFile.vue
+++ b/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>