Merge branch '2.0' into gh-pages

README.md

@@ -8,7 +8,7 @@
 ## Install
 
 ``` bash
-    npm install vue-upload-component@next --save
+    npm install vue-upload-component --save
 ```
 
 ### CommonJS
@@ -37,6 +37,24 @@
 ```
 
 
+### SSR (Server)
+```js
+import FileUpload from 'vue-upload-component/src'
+```
+
+#### webpack.config.js
+```js
+var nodeExternals = require('webpack-node-externals');
+{
+    //.....
+    externals: [
+        nodeExternals({whitelist:[/^vue-upload-component/]})
+    ]
+    //.....
+}
+
+```
+
 ## Examples
 
 https://lian-yue.github.io/vue-upload-component/

example/App.vue

@@ -1,3 +1,24 @@
+<template>
+<div id="app">
+  <header id="header">
+    <h1>Upload test</h1>
+    <nav>
+      <h2>Navigation</h2>
+      <h3>Please click on the navigation</h3>
+      <ul>
+        <li><router-link to="/">Home</router-link></li>
+        <li><router-link to="/multi">Multi components</router-link></li>
+        <li><router-link to="/cross-router">Cross router</router-link></li>
+        <li><router-link to="/vuex">Vuex</router-link></li>
+      </ul>
+    </nav>
+  </header>
+  <router-view id="main"></router-view>
+  <footer id="footer">
+    <div>Powered by:<a href="//www.lianyue.org">LianYue</a></div>
+  </footer>
+</div>
+</template>
 <style>
 nav {
   margin-bottom: 1em
@@ -5,28 +26,5 @@ nav {
 </style>
 <script>
 export default {
-  render(h) {
-    return (
-      <div id="app">
-        <header id="header">
-          <h1>Upload test</h1>
-          <nav>
-            <h2>Navigation</h2>
-            <h3>Please click on the navigation</h3>
-            <ul>
-              <li><router-link to="/">Home</router-link></li>
-              <li><router-link to="/multi">Multi components</router-link></li>
-              <li><router-link to="/cross-router">Cross router</router-link></li>
-              <li><router-link to="/vuex">Vuex</router-link></li>
-            </ul>
-          </nav>
-        </header>
-        <router-view id="main"></router-view>
-        <footer id="footer">
-          <div>Powered by:<a href="//www.lianyue.org">LianYue</a></div>
-        </footer>
-      </div>
-    )
-  }
 }
 </script>

example/index.js

@@ -71,7 +71,5 @@ const router = new VueRouter({
 new Vue({
   router,
   store,
-  render(h) {
-    return h(App)
-  }
+  ...App
 }).$mount('#app')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-upload-component",
   "description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9",
-  "version": "2.3.0-beta.2",
+  "version": "2.3.2",
   "author": "LianYue",
   "scripts": {
     "dev": "webpack-dev-server --inline --hot",
@@ -33,11 +33,8 @@
   "dependencies": {},
   "devDependencies": {
     "babel-core": "^6.0.0",
-    "babel-helper-vue-jsx-merge-props": "^2.0.2",
     "babel-loader": "^6.0.0",
-    "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-runtime": "^6.0.0",
-    "babel-plugin-transform-vue-jsx": "^3.3.0",
     "babel-preset-es2015": "^6.0.0",
     "babel-preset-stage-0": "^6.5.0",
     "babel-runtime": "^6.0.0",
@@ -47,13 +44,12 @@
     "file-loader": "^0.8.4",
     "json-loader": "^0.5.4",
     "url-loader": "^0.5.7",
-    "vue": "^2.2.1",
-    "vue-hot-reload-api": "^1.2.0",
-    "vue-html-loader": "^1.0.0",
-    "vue-loader": "^9.5.0",
-    "vue-router": "^2.3.0",
-    "vue-style-loader": "^1.0.0",
-    "vuex": "^2.2.1",
+    "vue": "^2.2.6",
+    "vue-hot-reload-api": "^1.3.3",
+    "vue-loader": "^11.1.4",
+    "vue-router": "^2.4.0",
+    "vue-template-compiler": "^2.2.6",
+    "vuex": "^2.3.1",
     "webpack": "^1.12.2",
     "webpack-dev-server": "^1.12.0"
   }

src/FileUpload.vue

@@ -1,3 +1,11 @@
+<template>
+  <label class="file-uploads" :class="mode === 'html5' ? 'file-uploads-html5' : 'file-uploads-html4'">
+      <span class="file-uploads-title" v-html="title"></span>
+      <slot></slot>
+      <input-file></input-file>
+  </label>
+</template>
+
 <style>
 .file-uploads {
     overflow: hidden;
@@ -89,10 +97,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    drop: {
-      type: Boolean,
-      default: false,
-    },
     files: {
       type: Array,
       default: () => [],
@@ -140,22 +144,6 @@ export default {
     this.files.splice(0, this.files.length);
   },
 
-  render (h) {
-    return (
-      <label class={{
-        'file-uploads': true,
-        'file-uploads-html5': this.mode == 'html5',
-        'file-uploads-html4': this.mode == 'html4'
-      }} >
-          <span>{this.title}</span>
-          <input-file></input-file>
-      </label>
-    )
-  },
-
-
-
-
   watch: {
     drop(value) {
       this._drop(value);
@@ -406,7 +394,7 @@ export default {
 
       var inputFile = new Component({
         parent: this,
-        el: el,
+        el: el.parentNode,
       });
     },
 

src/InputFile.vue

@@ -1,24 +1,22 @@
+<template>
+  <span class="file-uploads-input">
+    <input
+      type="file"
+      :name="$parent.name"
+      :id="$parent.id || $parent.name"
+      :accept="$parent.accept"
+      @change="change"
+      :multiple="$parent.multiple && $parent.mode === 'html5'"
+    />
+  </span>
+</template>
 <script>
 export default {
   methods: {
     change(e) {
-      this.$destroy();
-      this.$parent._addInputFileElement(e.target);
-    },
-  },
-
-  render(h) {
-    const parent = this.$parent;
-    return (
-      <input
-        type="file"
-        name={parent.name}
-        id={parent.id|| parent.name}
-        accept={parent.accept}
-        on-change={this.change}
-        multiple={parent.multiple && parent.mode == 'html5'}
-      />
-    )
+      this.$destroy()
+      this.$parent._addInputFileElement(e.target)
+    }
   }
 }
 </script>

webpack.config.build.js

@@ -9,4 +9,4 @@ module.exports.entry = {
 }
 
 module.exports.output.library = 'VueUploadComponent';
-module.exports.output.libraryTarget = 'umd';
+module.exports.output.libraryTarget = 'commonjs2';

webpack.config.js

@@ -10,13 +10,12 @@ module.exports = {
     path: './dist',
     publicPath: '/dist/',
     filename: "[name].js",
+    // target: 'node',
   },
 
 
   resolve: {
     root: path.join(__dirname, 'node_modules'),
-    alias: {
-    },
     extensions: ['', '.js', '.vue', '.json'],
   },
 
@@ -52,7 +51,7 @@ module.exports = {
 
   babel: {
     presets: ['es2015', 'stage-0'],
-    plugins: ['transform-runtime', 'transform-vue-jsx'],
+    plugins: ['transform-runtime'],
   },
 
   devServer: {