lot of reworks. ready for use

Author: cklmercer

LICENSE.mit

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Cody Mercer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -1,4 +1,4 @@
-# vue-laravel-forms (NOT READY FOR USE)
+# vue-laravel-forms
 Form helpers for Laravel backed Vue.js projects.
 
 
@@ -31,7 +31,8 @@ import { Form, FormErrors, Http } from 'vue-laravel-forms'
 window.AppForm = Form;
 window.AppFormErrors = FormErrors;
 
-_.extend(App, Http)
+_.extend(App, new Http()) // Vue.http config not needed
+_.extend(App, new Http(Vue.http)) // Vue.http config needed
 ```
 
 ## Usage
@@ -110,6 +111,7 @@ _Components installed Separately_
 * `App.putForm(uri, form)`
 * `App.sendForm(method, uri, form)`
 
+
 ### Template Helpers
 ##### Check a field for errors
 ```
@@ -145,17 +147,11 @@ Vue.component('user-registration-form', {
 
     methods: {
         getFieldClass(field) {
-            return {
-                'form-group': true,
-                'email-field': this.field == 'email'
-            }
+            return `form-group ${field}`;
         },
         
         getFieldErrorClass(field) {
-            return {
-                'has-error': true,
-                'password-error': this.field == 'password'
-            }
+            return `has-error ${field}-error`;
         }
     }
 

package.json

@@ -1,19 +1,23 @@
 {
   "name": "vue-laravel-forms",
-  "version": "0.0.1-alpha",
+  "version": "1.0.0-beta",
   "description": "Form helpers for Laravel backed Vue.js projects.",
   "main": "dist/index.js",
   "scripts": {
     "compile": "babel --presets=es2015 -d dist src",
     "prepublish": "npm run compile"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cklmercer/vue-laravel-forms.git"
+  },
   "keywords": [
     "vue",
     "laravel",
     "forms"
   ],
   "author": "Cody Mercer <[email protected]>",
-  "license": "UNLICENSED",
+  "license": "MIT",
   "devDependencies": {
     "babel-cli": "^6.11.4",
     "babel-preset-es2015": "^6.13.2",

src/form.js

@@ -1,4 +1,5 @@
 import FormErrors from './form-errors';
+import { assignIn, forIn, keys, pick } from 'lodash';
 
 class Form
 {
@@ -8,8 +9,25 @@ class Form
     constructor(fields) {
         this.busy = false;
         this.errors = new FormErrors();
-        this.fields = fields;
-        this.success = false;
+        this.initialFields = fields;
+        this.successful = false;
+        assignIn(this, fields);
+    }
+
+    /*
+     * Get the form's fields.
+     */
+    get fields() {
+        let fields = pick(this, keys(this.initialFields));
+
+        // Here we unset null fields.
+        forIn(fields, function (value, key) {
+            if (value == null) {
+                delete fields[key];
+            }
+        })
+
+        return fields;
     }
 
     /*
@@ -30,6 +48,21 @@ class Form
         this.successful = true;
     }
 
+    /*
+     * Completely reset the form.
+     */
+    reset() {
+        this.resetFields();
+        this.resetStatus();
+    }
+
+    /*
+     * Reset the fields to their initial state..
+     */
+    resetFields() {
+        keys(this.initialFields).forEach((key) => this[key] = this.initialFields[key]);
+    }
+
     /*
      * Reset the errors and other state for the form.
      */

src/helpers.js

@@ -0,0 +1,9 @@
+function getFileExtension(file) {
+    return file.name.substr(file.name.lastIndexOf('.') + 1);
+}
+
+function isFile(field) {
+    return Boolean(field) && Boolean(field.size);
+}
+
+export { getFileExtension, isFile }

src/http.js

@@ -1,56 +1,66 @@
 import { forIn } from 'lodash';
+import { getFileExtension, isFile } from './helpers';
 import Vue from 'vue';
 import VueResource from 'vue-resource';
 
 Vue.use(VueResource)
 
-export default {
-    /*
-     * Helper method for submitting a form as a DELETE request.
-     */
-    deleteForm(uri, form) {
-        return this.sendForm('delete', uri, form);
-    },
-
-    /*
-     * Helper method for submitting a form as a POST request.
-     */
-    postForm(uri, form) {
-        let formData = new FormData;
-
-        forIn(form.fields, (value, key) => formData.append(key, value));
-
-        return this.sendForm('post', uri, form, formData);
-    },
-
-
-    /*
-     * Helper method for submitting a form as a PUT request.
-     */
-    putForm(uri, form) {
-        return this.sendForm('put', uri, form);
-    },
-
-    /*
-     * Helper method for submitting a form.
-     */
-    sendForm(method, uri, form, formData = null) {
-        let data = formData ? formData : JSON.parse(JSON.stringify(form.fields));
-
-        return new Promise((resolve, reject) => {
-            form.startProcessing();
-
-            Vue.http[method](uri, data)
-                .then(response => {
-                    form.finishProcessing();
-                    resolve(response.data);
-                })
-                .catch(errors => {
-                    form.setErrors(errors.data);
-                    form.busy = false;
-
-                    reject(errors.data);
-                });
-        });
-    }
+export default function (Http = null) {
+   return {
+       /*
+        * Helper method for submitting a form as a DELETE request.
+        */
+       deleteForm(uri, form) {
+           return this.sendForm('delete', uri, form);
+       },
+
+       /*
+        * Helper method for submitting a form as a POST request.
+        */
+       postForm(uri, form) {
+           let formData = new FormData;
+
+           forIn(form.fields, (value, key) => {
+               if (isFile(value)) {
+                   let ext = getFileExtension(value);
+                   formData.append(key, value, `${key}.${ext}`);
+               } else {
+                   formData.append(key, value)
+               }
+           });
+
+           return this.sendForm('post', uri, form, formData);
+       },
+
+
+       /*
+        * Helper method for submitting a form as a PUT request.
+        */
+       putForm(uri, form) {
+           return this.sendForm('put', uri, form);
+       },
+
+       /*
+        * Helper method for submitting a form.
+        */
+       sendForm(method, uri, form, formData = null) {
+           let submitter = Http || Vue.http;
+           let data = formData ? formData : JSON.parse(JSON.stringify(form.fields));
+
+           return new Promise((resolve, reject) => {
+               form.startProcessing();
+
+               submitter[method](uri, data)
+                   .then(response => {
+                       form.finishProcessing();
+                       resolve(response.data);
+                   })
+                   .catch(errors => {
+                       form.setErrors(errors.data);
+                       form.busy = false;
+                       reject(errors.data);
+                   });
+           });
+       }
+   }
 }

src/index.js

@@ -4,6 +4,13 @@ import FormErrors from './form-errors';
 
 function FormHelpers (Vue) {
 
+    if (typeof Vue.http == 'undefined') {
+        console.error('Please install vue-resource before using vue-laravel-forms')
+        return;
+    }
+
+    let formHelper = new Http(Vue.http);
+
     Object.defineProperty(Vue.prototype, '$forms', {
         get() {
             return {
@@ -25,28 +32,28 @@ function FormHelpers (Vue) {
                  * Submit the given Form to the given URI via a DELETE request.
                  */
                 delete(uri, form) {
-                    return Http.deleteForm(uri, form);
+                    return formHelper.deleteForm(uri, form);
                 },
 
                 /*
                  * Submit the given Form to the given URI via a POST request.
                  */
                 post(uri, form) {
-                    return Http.postForm(uri, form);
+                    return formHelper.postForm(uri, form);
                 },
 
                 /*
                  * Submit the given Form to the given URI via a PUT request
                  */
                 put(uri, form) {
-                    return Http.putForm(uri, form);
+                    return formHelper.putForm(uri, form);
                 },
 
                 /*
                  * Submit the given Form to the given URI using the given HTTP method.
                  */
                 submit(method, uri, form, formData = null) {
-                    return Http.sendForm(method, uri, form, formData);
+                    return formHelper.sendForm(method, uri, form, formData);
                 }
             }
         }
@@ -58,22 +65,25 @@ function FormHelpers (Vue) {
          * The 'beforeCreate' life-cycle hook.
          */
         beforeCreate() {
-            if (typeof this.$options.forms == 'object') {
-                registerForms(this.$options.forms).bind(this);
+            let forms = this.$options.forms;
+
+            if (typeof forms == 'object') {
+                let dataIsFunction = typeof this.$options.data == 'function';
+                let data = dataIsFunction ? this.$options.data() : this.$options.data || {};
+
+                for (var form in forms) {
+                    data[form] = forms[form];
+                }
+
+                this.$options.data = dataIsFunction ? function () { return data } : data;
             }
         }
 
     });
 }
 
-function registerForms(forms) {
-    for (var form in forms) {
-        Object.defineProperty(this._data, form, forms[form]);
-    }
-}
-
 if (typeof window !== 'undefined' && window.Vue) {
     window.Vue.use(FormHelpers);
 }
 
-export { FormHelpers, Http, Form, FormErrors }
+export { FormHelpers, Form, FormErrors }