Install as vue component

.gitignore

@@ -1,2 +1,3 @@
 /nbproject/
-/node_modules/
+/node_modules/
+/dist/

README.md

@@ -39,8 +39,8 @@ This project use Javascript and :
   - [ ] Rename / Move
   - [ ] Delete
 - [x] Context menu
-- [ ] vuejs component
-- [ ] npm package
+- [x] vuejs component
+- [x] npm package
 - [ ] Integration :
   - [ ] CKEditor plugin
   - [ ] TinyMCE plugin
@@ -55,13 +55,25 @@ This project use Javascript and :
 <script src="mm.min.js"></script>
 ```
 
+or
+```
+npm install mm
+```
+
+and
+
+```
+import { MM } from 'mm'
+require('mm/dist/style.css')
+```
+
 ### Server
 
 Media Manager is a client side tool, it will display files located on a server, it needs a web service to communicate with :
 - you can use a simple server : [mm-server](https://github.com/iutbay/mm-server),
 - or you can build your own, take a look at [API doc](doc/API.md).
 
-## Usage
+## Usage in pure JavaScript
 
 **HTML**
 ```html
@@ -97,19 +109,39 @@ new MM({
         baseUrl: 'https://server.com/api/',
         listUrl: 'list'
     },
-    input: {
-        el: '#file-input',
-        multiple: false
-    }
+    multipleSelection: false,
+    input: '#file-input'
 });
 ```
 
+## Usage in a VueJS project
+
+**Vue**
+```html
+<vue-media-manager :opts="options"></vue-media-manager>
+```
+
+```javascript
+var api = {
+    baseUrl: 'https://server.com/api/',
+    listUrl: 'list'
+};
+
+this.options = {
+    api: api,
+    multipleSelection: true,
+    onSelect: function ({selected}) {
+        console.log(selected)
+    }
+}
+```
+
 ## Options
 
 ### `el`
 
 - Type : String
-- Details : CSS selector string.
+- Details : CSS selector string. Only in pure JavaScript.
 
 ### `basePath`
 
@@ -142,26 +174,28 @@ new MM({
 - Type : String
 - Default : null
 
-#### `api.options`
+#### `api.requestConfig`
+
+- Type : Object or Function
+- Default : null
+- Details : Will be used on each request to override the config passed to axios.
+
+#### `api.axiosOptions`
 
 - Type : Object
 - Default : {}
 - Details : Will be used to create an [axios instance](https://github.com/mzabriskie/axios#creating-an-instance).
 
 ### `input`
 
-- Type : Object
-- Default : false
-- Details : Input config.
-
-#### `input.el`
-
 - Type : String
 - Details : CSS selector string.
+- Default : empty string
 
-#### `input.multiple`
+### `multipleSelection`
 
 - Type : Boolean
+- Default : false
 
 ### `selected`
 

index.html

@@ -18,7 +18,7 @@
     <div class="container">
         <p></p>
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-4">
                 <h3>Single</h3>
                 <div class="form-group">
                     <div id="media-manager-1"></div>
@@ -27,7 +27,7 @@ <h3>Single</h3>
                     <input id="file-input-1" type="text" class="form-control" placeholder="File">
                 </div>
             </div>
-            <div class="col-md-6">
+            <div class="col-md-4">
                 <h3>Multiple</h3>
                 <div class="form-group">
                     <div id="media-manager-3"></div>
@@ -36,6 +36,12 @@ <h3>Multiple</h3>
                     <textarea id="file-input-3" class="form-control" placeholder="Files"></textarea>
                 </div>
             </div>
+            <div class="col-md-4">
+                <h3>VueApp</h3>
+                <div class="form-group">
+                    <vue-app></vue-app>
+                </div>
+            </div>
         </div>
         <div class="row">
             <div class="col-md-push-3 col-md-6">
@@ -75,6 +81,7 @@ <h4 class="modal-title">Media Manager</h4>
         integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
     <script src="/dist/mm.js"></script>
+    <script src="https://cdn.bootcss.com/vue/2.2.4/vue.js"></script>
 
     <script type="text/javascript">
         /* global MM, $ */
@@ -90,20 +97,16 @@ <h4 class="modal-title">Media Manager</h4>
         mm1 = new MM({
             el: '#media-manager-1',
             api: api,
-            input: {
-                el: '#file-input-1',
-                multiple: false
-            }
+            input: '#file-input-1',
+            multipleSelection: false
         });
 
         mm3 = new MM({
             el: '#media-manager-3',
             basePath: '/',
             api: api,
-            input: {
-                el: '#file-input-3',
-                multiple: true
-            },
+            input: '#file-input-3',
+            multipleSelection: true,
             height: '400px'
         }); 
 
@@ -112,20 +115,40 @@ <h4 class="modal-title">Media Manager</h4>
                 el: '#media-manager-2',
                 path: '/',
                 api: api,
-                input: {
-                    el: '#file-input-2',
-                    multiple: false
-                },
-                height: '400px',
-                onSelect: function(e) {
-                    $('#media-manager-modal').modal('hide');
-                }
+                input: '#file-input-2',
+                multipleSelection: false,
+                height: '400px'
             });
         });
         $('#media-manager-modal').on('hide.bs.modal', function (e) {
             mm2.destroy();
         });
 
+        Vue.use(MM);
+
+        new Vue({
+            el: 'vue-app',
+            render: h => h({
+                template: `<vue-media-manager :opts="options"></vue-media-manager>`,
+                created() {
+                    var api = {
+                        baseUrl: 'http://localhost:8081/',
+                        listUrl: 'list.json',
+                        downloadUrl: 'download',
+                        uploadUrl: 'upload'
+                    };
+
+                    this.options = {
+                        api: api,
+                        multipleSelection: true,
+                        onSelect: function ({selected}) {
+                            console.log(selected)
+                        }
+                    }
+                },
+            })
+        });
+
     </script>
 
 </body>

package.json

@@ -4,13 +4,20 @@
   "version": "0.0.1",
   "author": "Kevin LEVRON <[email protected]>",
   "private": false,
+  "license": "BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iutbay/mm.git"
+  },
+  "main": "dist/mm.min.js",
   "scripts": {
     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
     "vue": "^2.2.4",
     "vuex": "^3.0.1",
+    "es6-promise": "^4.1.1",
     "axios": "^0.15.3"
   },
   "devDependencies": {
@@ -20,10 +27,11 @@
     "babel-preset-stage-3": "^6.24.1",
     "cross-env": "^5.0.5",
     "css-loader": "^0.28.7",
-    "es6-promise": "^4.1.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.4",
     "node-sass": "^4.5.3",
+    "postcss-import": "^11.1.0",
+    "postcss-url": "^7.3.0",
     "sass-loader": "^6.0.6",
     "vue-loader": "^13.0.5",
     "vue-template-compiler": "^2.4.4",

src/Store.js

@@ -0,0 +1,73 @@
+export default class Store {
+    static create(component, options) {
+        /*
+         * Init selected
+         */
+        let selected = options.selected;
+        if (selected) {
+            if (Array.isArray(selected)) {
+                selected = selected.map(function(e){
+                    return { path: e };
+                });
+            } else {
+                selected = { path: selected };
+            }
+        }
+
+        return {
+            state: {
+                mm: component,
+                options: options,
+                path: options.basePath + options.path,
+                selected: selected
+            },
+            mutations: {
+                resetSelected(state) {
+                    state.selected = null;
+                },
+                addSelected(state, file) {
+                    if (state.options.multipleSelection) {
+                        if (!Array.isArray(state.selected)) {
+                            state.selected = [];
+                        } else {
+                            let index = state.selected.findIndex(element => { return element.path === file.path; });
+                            if (index>-1) return;
+                        }
+                        state.selected.push(file);
+                    } else {
+                        state.selected = file;
+                    }
+                    state.mm.onSelect({ selected: state.selected });
+                },
+                removeSelected(state, file) {
+                    if (state.options.multipleSelection) {
+                        if (!Array.isArray(state.selected)) return;
+                        let index = state.selected.findIndex(element => { return element.path === file.path; });
+                        if (index>-1)
+                            state.selected.splice(index, 1);
+                    } else {
+                        state.selected = null;
+                    }
+                    state.mm.onSelect({ selected: state.selected });
+                }
+            },
+            getters: {
+                isSelected: (state, getters) => (file) => {
+                    //if (!state.options.input) return false;
+                    if (state.options.multipleSelection) {
+                        if (!Array.isArray(state.selected)) return;
+                        let index = state.selected.findIndex(element => { return element.path === file.path; });
+                        return index > -1;
+                    } else {
+                        return (state.selected && state.selected.path === file.path);
+                    }
+                },
+                nbSelected: (state, getters) => {
+                    if (Array.isArray(state.selected)) return state.selected.length;
+                    if (state.selected) return 1;
+                    return 0;
+                }
+            }
+        }
+    }
+}

src/api.js

@@ -23,11 +23,24 @@ export default class Api {
     }
 
     list(path) {
-        return this.axios.get(this.options.listUrl, { params: { path: this.path } });
+        var conf = this.computeConfig({ params: { path: path } });
+        return this.axios.get(this.options.listUrl, conf);
     }
 
     upload(data, config) {
-        return this.axios.post(this.options.uploadUrl, data, config);
+        var conf = this.computeConfig(config);
+        return this.axios.post(this.options.uploadUrl, data, conf);
+    }
+
+    computeConfig(conf) {
+        if (!this.options.requestConfig) {
+            return conf
+        }
+        var overrideConf = this.options.requestConfig
+        if (overrideConf instanceof Function) {
+            overrideConf = overrideConf()
+        }
+        return { ...conf, ...overrideConf }
     }
 
     downloadUrl(file) {