├── .gitignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── dist
    ├── vue.form.js
    └── vue.form.min.js
├── package.json
├── src
    └── vue.form.js
└── tests
    ├── test1.html
    └── test2.html


/.gitignore:
--------------------------------------------------------------------------------
1 | # Dependencies
2 | /bower_components
3 | /node_modules
4 | 
5 | # Tmp files
6 | package-lock.json
7 | npm-debug.log


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Grunt tasks.
 3 |  *
 4 |  * @author Alejandro Mostajo <http://about.me/amostajo>
 5 |  * @copyright 10Quality <http://www.10quality.com>
 6 |  * @license MIT
 7 |  * @version 1.0.0
 8 |  */
 9 | module.exports = function(grunt)
10 | {
11 |     // Project configuration.
12 |     grunt.initConfig({
13 |         pkg: grunt.file.readJSON('package.json'),
14 |         uglify: {
15 |             dist: {
16 |                 files: {
17 |                     'dist/vue.form.min.js': [
18 |                         'src/vue.form.js'
19 |                     ],
20 |                 }
21 |             },
22 |         },
23 |         copy: {
24 |             dist: {
25 |                 files: [
26 |                     {
27 |                         src: 'src/vue.form.js',
28 |                         dest: 'dist/vue.form.js'
29 |                     },
30 |                 ],
31 |             },
32 |         },
33 |     });
34 | 
35 |     // Load
36 |     grunt.loadNpmTasks('grunt-contrib-uglify');
37 |     grunt.loadNpmTasks('grunt-contrib-copy');
38 | 
39 |     // Default task(s).
40 |     grunt.registerTask('default', [
41 |         'copy',
42 |         'uglify',
43 |     ]);
44 | };
45 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Form Component (for [Vue](http://vuejs.org/))
  2 | 
  3 | [![GitHub version](https://badge.fury.io/gh/10quality%2Fvue-form.svg)](https://badge.fury.io/gh/10quality%2Fvue-form)
  4 | [![Bower version](https://badge.fury.io/bo/10q-vue-form.svg)](https://badge.fury.io/bo/10q-vue-form)
  5 | 
  6 | Form handler component for [Vue](http://vuejs.org/) v2.
  7 | 
  8 | **NOTE** Use [v1.0 branch](https://github.com/10quality/vue-form/tree/v1.0) to use this with Vue v1.
  9 | 
 10 | View [DEMO](http://codepen.io/amostajo/pen/vKdPbj).
 11 | 
 12 | ## Package index
 13 | - [Installation](#installation)
 14 | - [Usage](#usage)
 15 |     - [Props](#props)
 16 |     - [Request](#request)
 17 |     - [Response](#response)
 18 |         - [Redirection](#redirection)
 19 |     - [Results](#results)
 20 |         - [Props](#props-1)
 21 |     - [Input handling](#input-handling)
 22 |         - [Props](#props-2)
 23 |         - [Validations](#validations)
 24 |     - [Events](#events)
 25 | - [License](#license)
 26 | 
 27 | ## Installation
 28 | 
 29 | Several installation options are available:
 30 | 
 31 | - [Download the latest release](https://github.com/10quality/vue-form/releases).
 32 | - Install with [Bower](http://bower.io): `bower install 10q-vue-form`.
 33 | 
 34 | ## Usage
 35 | 
 36 | Add the following resources for the component to function correctly.
 37 | 
 38 | ```html
 39 | <!-- Required Javascript -->
 40 | <script src="vue.js"></script>
 41 | <script src="vue-resource.js"></script>
 42 | <script src="[component path]/dist/vue.form.min.js"></script>
 43 | ```
 44 | 
 45 | Add the component in your vue view.
 46 | 
 47 | ```html
 48 | <!-- Assuming your view app is APP. -->
 49 | <div id="app">
 50 | 
 51 |     <vform inline-template
 52 |         action="http://some.url.com"
 53 |         method="POST"
 54 |     >
 55 | 
 56 |         <input type="email" v-model="request.email">
 57 | 
 58 |         <button @click="submit">Submit</button>
 59 | 
 60 |         <span v-if="isLoading">Loading...</span>
 61 | 
 62 |     </vform>
 63 | 
 64 | </div>
 65 | ```
 66 | 
 67 | *NOTE:* `inline-template` must be present.
 68 | 
 69 | ### Props
 70 | 
 71 | List of available props to use in component:
 72 | 
 73 | Prop            | Data Type  | Default  | Description
 74 | --------------- | ---------- | -------- | -----------
 75 | `action`        | String     |          | Action URL where to send form data.
 76 | `method`        | String     | POST     | Request method (i.e. GET or POST).
 77 | `headers`       | Object     |          | Request headers ([reference](https://github.com/vuejs/vue-resource/blob/master/docs/http.md#options)).
 78 | `timeout`       | Number     |          | Request headers ([reference](https://github.com/vuejs/vue-resource/blob/master/docs/http.md#options)).
 79 | `credentials`   | Boolean    |          | Flag that indicates if request has credentials ([reference](https://github.com/vuejs/vue-resource/blob/master/docs/http.md#options)).
 80 | `emulate-http`  | Boolean    |          | Flag that indicates if request should emulate HTTP ([reference](https://github.com/vuejs/vue-resource/blob/master/docs/http.md#options)).
 81 | `emulate-json`  | Boolean    |          | Flag that indicates if request should emulate JSON ([reference](https://github.com/vuejs/vue-resource/blob/master/docs/http.md#options)).
 82 | `errors`        | Object     | Object   | List of default validation rules error messages.
 83 | `id`            | String     |          | Form given ID.
 84 | `key`           | String     |          | Form given loop key (i.e. in case of being used inside a v-for).
 85 | `response-json` | Boolean    | false    | Forces response to be returned and parsed as JSON.
 86 | `response-blob` | Boolean    | false    | Forces response to be returned as Blob.
 87 | 
 88 | ### Request
 89 | 
 90 | Data sent by form should be binded to the `request` data model. In other words, all the inputs within the form should be binded to request.
 91 | 
 92 | As reference, a basic contact form sample:
 93 | 
 94 | ```html
 95 | <div id="app">
 96 | 
 97 |     <vform inline-template action="http://some.url.com">
 98 | 
 99 |         <label for="name">Name:</label>
100 |         <input type="text"
101 |             id="name"
102 |             v-model="request.name"
103 |         />
104 | 
105 |         <label for="email">Email:</label>
106 |         <input type="email"
107 |             id="email"
108 |             v-model="request.email"
109 |         />
110 | 
111 |         <label for="message">Textarea:</label>
112 |         <textarea id="message"
113 |             v-model="request.message"
114 |         ></textarea>
115 | 
116 |         <button @click="submit">Submit</button>
117 | 
118 |     </vform>
119 | 
120 | </div>
121 | ```
122 | 
123 | ### Response
124 | 
125 | Any response obtained from a request is set to the `response` data model.
126 | 
127 | If the following data is found, the form will *auto-process* the response (json) to facilitate its handling:
128 | 
129 | ```json
130 | {
131 |     "error": true,
132 |     "message": "Contact information not sent."
133 | }
134 | ```
135 | 
136 | This response can be displayed in the template like:
137 | 
138 | ```html
139 | <div id="app">
140 | 
141 |     <vform inline-template>
142 | 
143 |         <div v-if="hasMessage"
144 |             :class="{'with-error': hasError}"
145 |         >
146 |             {{response.message}}
147 |         </div>
148 | 
149 |     </vform>
150 | 
151 | </div>
152 | ```
153 | 
154 | Computed properties to use in template:
155 | 
156 | Property       | Data Type  | Description
157 | -------------- | ---------- | -------------------
158 | `isLoading`    | Boolean    | Flag that indicates if form is loading, processing or waiting for response.
159 | `hasMessage`   | Boolean    | Flag that indicates if form response returned a message to display.
160 | `hasError`     | Boolean    | Flag that indicates if form response returned as error.
161 | 
162 | Another example using Bootstrap:
163 | 
164 | ```html
165 | <div id="app">
166 | 
167 |     <vform inline-template>
168 | 
169 |         <div v-show="hasMessage"
170 |             class="alert"
171 |             :class="{'alert-danger': hasError, 'alert-success': !hasError}"
172 |         >
173 |             {{response.message}}
174 |         </div>
175 | 
176 |     </vform>
177 | 
178 | </div>
179 | ```
180 | 
181 | #### Redirection
182 | 
183 | If the following data is found, the form will redirect the current window to the value set in `response.redirect`:
184 | 
185 | ```json
186 | {
187 |     "error": false,
188 |     "message": "Information sent.",
189 |     "redirect": "http://some.url.com"
190 | }
191 | ```
192 | 
193 | ### Results
194 | 
195 | Form comes with a child component called `results`. This component will facilitate the handling of data returned by request (thought for searches).
196 | 
197 | ```html
198 | <div id="app">
199 | 
200 |     <vform inline-template>
201 | 
202 |         <label>Search:</label>
203 |         <input type="text"
204 |             v-model="request.q"
205 |             @keyup.enter="submit"
206 |         />
207 | 
208 |         <results inline-template
209 |             v-model="response"
210 |             fetch-on-ready="true"
211 |             clear-on-fetch="false"
212 |         >
213 |             
214 |             <div v-show="hasRecords">
215 |                 <div v-for="record in records">
216 |                     {{record | json}}
217 |                 </div>
218 |             </div>
219 | 
220 |         </results>
221 | 
222 |     </vform>
223 | 
224 | </div>
225 | ```
226 | 
227 | In the example above, `results` child component is handling search results returned by the response (assuming `response` contains only results) and it is computing them into a property called `records`.
228 | 
229 | *NOTE:* Results will compute records only if the model is an array.
230 | *NOTE:* `inline-template` must be present.
231 | 
232 | #### Props
233 | 
234 | List of available props to use in child component:
235 | 
236 | Prop             | Data Type  | Default  | Description
237 | ---------------- | ---------- | -------- | -----------
238 | `model`          | Array      |          | Data to compute for results (mostly required).
239 | `request`        | Object     |          | If form request is needed to be binded to results.
240 | `fetch-onready`  | Boolean    | false    | Flag that forces form to submit and return response when `document` is *ready*.
241 | `clear-on-fetch` | Boolean    | true     | Flag that indicates if records should stack on every submission or not. (used for eager loading)
242 | 
243 | Another example:
244 | 
245 | ```html
246 | <div id="app">
247 | 
248 |     <vform inline-template>
249 | 
250 |         <results inline-template v-model="response.results">
251 |             
252 |                 <div v-for="record in records">
253 |                     {{record | json}}
254 |                 </div>
255 | 
256 |         </results>
257 | 
258 |     </vform>
259 | 
260 | </div>
261 | ```
262 | 
263 | ### Input handling
264 | 
265 | Form comes with a second child component called `input-handler`. This component will facilitate the display of errors per input, improving UX.
266 | 
267 | Example using Bootstrap:
268 | 
269 | Response:
270 | 
271 | ```json
272 | {
273 |     "errors": [
274 |         "email": [
275 |             "Email is invalid.",
276 |             "Fields is required."
277 |         ],
278 |         "name": [
279 |             "Too short".
280 |         ]
281 |     ]
282 | }
283 | ```
284 | 
285 | In template:
286 | 
287 | ```html
288 | <div id="app">
289 | 
290 |     <vform inline-template>
291 | 
292 |         <input-handler class="form-group"
293 |             class-error="has-error"
294 |             listen="name"
295 |             v-model="response"
296 |         >
297 |             <label for="name">Name</label>
298 |             <input type="text"
299 |                 class="form-control"
300 |                 id="name"
301 |                 v-model="request.name"
302 |             />
303 |         </input-handler>
304 | 
305 |         <input-handler class="form-group"
306 |             class-error="has-error"
307 |             listen="email"
308 |             v-model="response"
309 |         >
310 |             <label for="email">Email</label>
311 |             <input type="email"
312 |                 class="form-control"
313 |                 id="email"
314 |                 v-model="request.email"
315 |             />
316 |         </input-handler>
317 | 
318 |     </vform>
319 | 
320 | </div>
321 | ```
322 | 
323 | In the example above, the response returned a list of errors per input. `input-handler` will process the response and if errors are found (response must be passed as `v-model`), it will add an error class to the input wrapper and will list the erros under the input using a `<ul class="errors">` HTML tag.
324 | 
325 | #### Props
326 | 
327 | List of available props to use in child component:
328 | 
329 | Prop             | Data Type  | Default  | Description
330 | ---------------- | ---------- | -------- | -----------
331 | `listen`         | String     |          | Name of the error key (in response) to listen to.
332 | `class`          | String     |          | CSS class to apply to wrapper. (`<div>`)
333 | `class-error`    | String     |          | CSS class to apply to wrapper when errors are available.
334 | `response`       | Object     |          | Response to process. (required)
335 | `validations`    | String     |          | List of validation rules to apply to input.
336 | 
337 | #### Validations
338 | 
339 | Form comes with a set of validation rules that can be applied to input values prior request. This are set in the `validations` prop, separated by `|`.
340 | 
341 | In the following example, the input will validate that name is not empty (is a required field) and that it has at least 8 characters:
342 | 
343 | ```html
344 | <div id="app">
345 | 
346 |     <vform inline-template>
347 | 
348 |         <input-handler class="form-group"
349 |             class-error="has-error"
350 |             listen="name"
351 |             v-model="response"
352 |             validations="required|min:8"
353 |         >
354 |             <label for="name">Name</label>
355 |             <input type="text"
356 |                 class="form-control"
357 |                 id="name"
358 |                 v-model="request.name"
359 |             />
360 |         </input-handler>
361 | 
362 |     </vform>
363 | 
364 | </div>
365 | ```
366 | 
367 | List of available rules to use:
368 | 
369 | Rule             | Params                                            | Sample                 | Description
370 | ---------------- | ------------------------------------------------  | ---------------------- | -----------
371 | `required`       |                                                   | `required`             | Validates if value is not empty.
372 | `required_if`    | 1) comparison field                               | `required_if:email`    | Validates if value is not empty only if comparison field is not empty.
373 | `email`          |                                                   | `email`                | Validates if value has a valid email format.
374 | `number`         |                                                   | `number`               | Validates if value is numeric.
375 | `min`            | 1) minimum string length                          | `min:2`                | Validates if value's length is not lower than the minimum value set.
376 | `min_number`     | 1) minimum number                                 | `min_number:10`        | Validates if value is not lower than the minimum value set.
377 | `max`            | 1) maximum string length                          | `max:10`               | Validates if value's length is not bigger than the maximum value set.
378 | `max_number`     | 1) maximum number length                          | `max_number:15`        | Validates if value is not bigger than the maximum value set.
379 | `between`        | 1) minimum string length 2) maximum string length | `between:5:10`         | Validates if value's length is in between the number range set.
380 | `between_number` | 1) minimum number 2) maximum number               | `between_number:1:100` | Validates if value is in between the number range set.
381 | `equals`         | 1) comparison field                               | `equals:password`      | Validates if value is the same as comparison field's value.
382 | `url`            |                                                   | `url`                  | Validates if value has a valid url format.
383 | 
384 | ### Events
385 | 
386 | Events dispatched by form:
387 | 
388 | Event      | Data sent                    | Description
389 | ---------- | ---------------------------- | -------------------
390 | `success`  |                              | Emitted once response is returned and assigned to model `response`.
391 | `error`    | `e` Error response returned. | Emitted on request error. (Error is thrown to console too).
392 | `complete` |                              | Emitted after request completed. (Success or error)
393 | `invalid`  | `errors` List of errors.     | Emitted and broadcasted when a validation ocurred.
394 | 
395 | Usage example:
396 | ```html
397 | <div id="app">
398 |     <vform inline-template
399 |         @success="eventHandlerMethod"
400 |         @error="eventHandlerMethod"
401 |         @complete="eventHandlerMethod"
402 |         @invalid="eventHandlerMethod"
403 |     ></vform>
404 | </div>
405 | ```
406 | 
407 | ## License
408 | 
409 | Copyright (c) 2017 [10Quality](http://www.10quality.com/). Under MIT License.


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "10q-vue-form",
 3 |   "description": "Social network sharing component for Vue JS.",
 4 |   "main": [
 5 |     "dist/vue.form.js"
 6 |   ],
 7 |   "homepage": "https://github.com/10quality/vue-form",
 8 |   "license": "MIT",
 9 |   "keywords": [
10 |     "vue",
11 |     "vuejs",
12 |     "form",
13 |     "input",
14 |     "results",
15 |     "handler"
16 |   ],
17 |   "authors": [
18 |     "Alejandro Mostajo <amostajo@gmail.com>",
19 |     "10Quality <info@10quality.com>"
20 |   ],
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "git://github.com/10quality/vue-form.git"
24 |   },
25 |   "private": false,
26 |   "dependencies": {
27 |     "vue": "^2.3.4",
28 |     "vue-resource": "^1.3.4"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/dist/vue.form.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | /*!
  3 |  * Form.
  4 |  * Vue componenet.
  5 |  *
  6 |  * @author Alejandro Mostajo <http://about.me/amostajo>
  7 |  * @copyright 10Quality <http://www.10quality.com>
  8 |  * @license MIT
  9 |  * @version 2.0.3
 10 |  */
 11 | Vue.component('vform', Vue.extend({
 12 |     props:
 13 |     {
 14 |         /**
 15 |          * Request action url.
 16 |          * @since 1.0.0
 17 |          * @var string
 18 |          */
 19 |         action:
 20 |         {
 21 |             type: String,
 22 |             default: '',
 23 |         },
 24 |         /**
 25 |          * Request method.
 26 |          * @since 1.0.0
 27 |          * @var string
 28 |          */
 29 |         method:
 30 |         {
 31 |             type: String,
 32 |             default: 'POST',
 33 |         },
 34 |         /**
 35 |          * Request headers.
 36 |          * @since 1.0.1
 37 |          * @var object
 38 |          */
 39 |         headers:
 40 |         {
 41 |             type: Object,
 42 |             default: function() { return undefined; },
 43 |         },
 44 |         /**
 45 |          * Request timeout.
 46 |          * @since 1.0.1
 47 |          * @var int
 48 |          */
 49 |         timeout:
 50 |         {
 51 |             type: [String, Number],
 52 |             default: undefined,
 53 |         },
 54 |         /**
 55 |          * Flag that indicates if request has credentials.
 56 |          * @since 1.0.1
 57 |          * @var int
 58 |          */
 59 |         credentials:
 60 |         {
 61 |             type: [String, Boolean],
 62 |             default: undefined,
 63 |         },
 64 |         /**
 65 |          * Flag that indicates if request should emulate HTTP.
 66 |          * @since 1.0.1
 67 |          * @var bool
 68 |          */
 69 |         emulateHttp:
 70 |         {
 71 |             type: [String, Boolean],
 72 |             default: undefined,
 73 |         },
 74 |         /**
 75 |          * Flag that indicates if request should emulate JSON.
 76 |          * @since 1.0.1
 77 |          * @var bool
 78 |          */
 79 |         emulateJson:
 80 |         {
 81 |             type: [String, Boolean],
 82 |             default: undefined,
 83 |         },
 84 |         /**
 85 |          * List of default errors.
 86 |          * @since 1.0.2
 87 |          * @since 1.0.7 Added equal,required_if,url
 88 |          * @var object
 89 |          */
 90 |         errors:
 91 |         {
 92 |             type: Object,
 93 |             default: function() {
 94 |                 return {
 95 |                     required: 'Required field.',
 96 |                     number: 'Value must be numeric.',
 97 |                     email: 'Email value is invalid.',
 98 |                     min: 'Value must have at least %1% character(s).',
 99 |                     min_number: 'Value must be at least %1%.',
100 |                     max: 'Value must have no more than %1% character(s).',
101 |                     max_number: 'Value must be no more than %1%.',
102 |                     between: 'Value must have between %1% to %2% characters.',
103 |                     between_number: 'Value must be between %1% to %2%.',
104 |                     equals: 'Value must be equal to %1%.',
105 |                     required_if: 'Required field.',
106 |                     url: 'Url value is invalid.',
107 |                 };
108 |             },
109 |         },
110 |         /**
111 |          * Form given ID.
112 |          * @since 1.0.5
113 |          * @var string
114 |          */
115 |         id:
116 |         {
117 |             type: [String, Number],
118 |             default: undefined,
119 |         },
120 |         /**
121 |          * Form loop key (in case it its used inside a v-for).
122 |          * @since 1.0.5
123 |          * @since 2.0.0 Refactored due to be a reserved name.
124 |          * @var string
125 |          */
126 |         index:
127 |         {
128 |             type: [String, Number],
129 |             default: undefined,
130 |         },
131 |         /**
132 |          * Flag that indicates if response needs to be converted to json.
133 |          * @since 1.0.9
134 |          * @var bool
135 |          */
136 |         responseJson:
137 |         {
138 |             type: [String, Boolean],
139 |             default: false,
140 |         },
141 |         /**
142 |          * Flag that indicates if response needs to be converted to json.
143 |          * @since 1.0.9
144 |          * @var bool
145 |          */
146 |         responseBlob:
147 |         {
148 |             type: [String, Boolean],
149 |             default: false,
150 |         },
151 |     },
152 |     data: function() {
153 |         return {
154 |             /**
155 |              * Request data.
156 |              * @since 1.0.0
157 |              * @var object
158 |              */
159 |             request: {},
160 |             /**
161 |              * Flag that indicates if component is loading.
162 |              * @since 1.0.0
163 |              * @var bool
164 |              */
165 |             isLoading: false,
166 |             /**
167 |              * Response data.
168 |              * @since 1.0.0
169 |              * @var object
170 |              */
171 |             response: {},
172 |         };
173 |     },
174 |     computed:
175 |     {
176 |         /** 
177 |          * Returns flag indicating if response has a message.
178 |          * @since 1.0.0
179 |          * @return bool
180 |          */
181 |         hasMessage: function()
182 |         {
183 |             return this.response.message != undefined;
184 |         },
185 |         /** 
186 |          * Returns flag indicating if response has an error or not.
187 |          * @since 1.0.0
188 |          * @return bool
189 |          */
190 |         hasError: function()
191 |         {
192 |             return this.response.error != undefined
193 |                 && this.response.error;
194 |         },
195 |     },
196 |     methods:
197 |     {
198 |         /**
199 |          * Submits form.
200 |          * @since 1.0.0
201 |          * @since 1.0.1 Options generated based on method.
202 |          * @since 1.0.2 Validations added.
203 |          * @since 2.0.0 Use $emit and remove $set.
204 |          */
205 |         submit: function()
206 |         {
207 |             // Input validations
208 |             var isValid = true;
209 |             this.response = {};
210 |             for (var i in this.$children) {
211 |                 if (typeof(this.$children[i].validate) === 'function')
212 |                     isValid = this.$children[i].validate() && isValid;
213 |             }
214 |             if (isValid) {
215 |                 this.isLoading = true;
216 |                 this.$http(this.getOptions()).then(this.onSubmit, this.onError);
217 |             } else {
218 |                 this.$emit('invalid', this.response.errors);
219 |             }
220 |         },
221 |         /**
222 |          * Handles submission response.
223 |          * @since 1.0.0
224 |          * @since 1.0.1 Added event dispatch.
225 |          * @since 1.0.3 Added event broadcast.
226 |          * @since 1.0.4 Response errors triggers invalid event.
227 |          * @since 1.0.9 Forces response conversion to jsob or blob.
228 |          * @since 2.0.0 Use $emit and remove $set.
229 |          * @since 2.0.2 Fixes response redirect.
230 |          *
231 |          * @param object response Response
232 |          */
233 |         onSubmit: function(response)
234 |         {
235 |             this.response = this.responseJson
236 |                 ? response.json()
237 |                 : (this.responseBlob
238 |                     ? response.blob()
239 |                     : response.data
240 |                 );
241 |             this.$emit('success', response);
242 |             if (this.response.errors !== undefined && Object.keys(this.response.errors).length > 0) {
243 |                 this.$emit('invalid', this.response.errors);
244 |             }
245 |             if (this.response.redirect !== undefined)
246 |                 return window.location = this.response.redirect;
247 |             this.onComplete();
248 |         },
249 |         /**
250 |          * Handles on complete submission
251 |          * @since 1.0.0
252 |          * @since 1.0.1 Added event dispatch.
253 |          * @since 1.0.3 Added event broadcast.
254 |          * @since 2.0.0 Use $emit and remove $set.
255 |          */
256 |         onComplete: function()
257 |         {
258 |             this.isLoading = false;
259 |             this.$emit('complete');
260 |         },
261 |         /** 
262 |          * Handles submission error.
263 |          * @since 1.0.0
264 |          * @since 1.0.1 Added event dispatch.
265 |          * @since 1.0.3 Added event broadcast.
266 |          * @since 2.0.0 Use $emit instead.
267 |          *
268 |          * @param object e Error
269 |          */
270 |         onError: function(e)
271 |         {
272 |             this.$emit('error', e);
273 |             this.onComplete();
274 |         },
275 |         /**
276 |          * Returns request options based on method.
277 |          * @since 1.0.1
278 |          *
279 |          * @return object
280 |          */
281 |         getOptions: function()
282 |         {
283 |             var options = {
284 |                 url: this.action,
285 |                 method: this.method,
286 |             };
287 |             if (this.headers !== undefined)
288 |                 options.headers = this.headers;
289 |             if (this.timeout !== undefined)
290 |                 options.timeout = this.timeout;
291 |             if (this.credentials !== undefined)
292 |                 options.credentials = typeof(this.credentials) === 'boolean'
293 |                     ? this.credentials
294 |                     : this.credentials === 'true';
295 |             if (this.emulateHttp !== undefined)
296 |                 options.emulateHTTP = typeof(this.emulateHttp) === 'boolean'
297 |                     ? this.emulateHttp
298 |                     : this.emulateHttp === 'true';
299 |             if (this.emulateJson !== undefined)
300 |                 options.emulateJSON = typeof(this.emulateJson) === 'boolean'
301 |                     ? this.emulateJson
302 |                     : this.emulateJson === 'true';
303 |             switch (this.method) {
304 |                 case 'post':
305 |                 case 'POST':
306 |                 case 'put':
307 |                 case 'PUT':
308 |                 case 'patch':
309 |                 case 'PATCH':
310 |                     options.body = this.request;
311 |                     break;
312 |                 default:
313 |                     options.params = this.request;
314 |                     break;
315 |             }
316 |             return options;
317 |         },
318 |     },
319 |     components:
320 |     {
321 |         /**
322 |          * Input Handler.
323 |          * Handles input errors.
324 |          * Vue sub component.
325 |          * @since 1.0.0
326 |          * @since 2.0.0 Refactored to Vue2.
327 |          */
328 |         'input-handler': {
329 |             template: '<div :class="[cssClass,errorCss]"><slot></slot><div class="errors"><ul><li v-for="(error, index) in inputErrors" track-by="$index" v-html="error"></li></ul></div></div>',
330 |             props:
331 |             {
332 |                 /**
333 |                  * Name of the error key to listen to.
334 |                  * @since 1.0.0
335 |                  * @var string
336 |                  */
337 |                 listen:
338 |                 {
339 |                     type: String,
340 |                     default: '',
341 |                 },
342 |                 /**
343 |                  * CSS class to apply to wrapper.
344 |                  * @since 1.0.0
345 |                  * @since 2.0.0 Refactored to cssClass
346 |                  * @var string
347 |                  */
348 |                 cssClass:
349 |                 {
350 |                     type: String,
351 |                     default: '',
352 |                 },
353 |                 /**
354 |                  * CSS class to apply to wrapper when errors are available.
355 |                  * @since 1.0.0
356 |                  * @var string
357 |                  */
358 |                 classError:
359 |                 {
360 |                     type: String,
361 |                     default: undefined,
362 |                 },
363 |                 /**
364 |                  * Input errors to listen to.
365 |                  * @since 1.0.0
366 |                  * @since 2.0.0 Refactored to "value" in order to use v-model directive.
367 |                  * @var object
368 |                  */
369 |                 value:
370 |                 {
371 |                     type: [Object, Array],
372 |                     default: function() {
373 |                         return {};
374 |                     },
375 |                 },
376 |                 /**
377 |                  * List of validation rules to perform before request is sent.
378 |                  * @since 1.0.2
379 |                  * @var string
380 |                  */
381 |                 validations:
382 |                 {
383 |                     type: String,
384 |                     default: '',
385 |                 },
386 |             },
387 |             computed:
388 |             {
389 |                 /**
390 |                  * Input specific errors.
391 |                  * @since 1.0.0
392 |                  * @return array
393 |                  */
394 |                 inputErrors: function()
395 |                 {
396 |                     var errors = [];
397 |                     if (this.value.errors !== undefined
398 |                         && this.value.errors[this.listen] !== undefined
399 |                     ) {
400 |                         errors = this.value.errors[this.listen];
401 |                     }
402 |                     return errors;
403 |                 },
404 |                 /**
405 |                  * Flag that indicates if there are errors.
406 |                  * @since 1.0.0
407 |                  * @return bool
408 |                  */
409 |                 hasErrors: function()
410 |                 {
411 |                     return this.inputErrors.length > 0;
412 |                 },
413 |                 /**
414 |                  * Erros css to apply to wrapper.
415 |                  * @since 1.0.0
416 |                  * @since 1.0.2 Fix for when error class is not present.
417 |                  * @return object
418 |                  */
419 |                 errorCss: function()
420 |                 {
421 |                     var css = {};
422 |                     if (this.classError !== undefined)
423 |                         css[this.classError] = this.hasErrors;
424 |                     return css;
425 |                 }
426 |             },
427 |             methods:
428 |             {
429 |                 /**
430 |                  * Validates input.
431 |                  * @since 1.0.2
432 |                  * @since 1.0.7 Added equal,required_if,url
433 |                  * @since 1.0.8 Bug fixes.
434 |                  *
435 |                  * @return bool
436 |                  */
437 |                 validate: function()
438 |                 {
439 |                     var success = true;
440 |                     var rules = this.validations.split('|');
441 |                     for (var i in rules) {
442 |                         var options = rules[i].split(':');
443 |                         switch (options[0]) {
444 |                             case 'required':
445 |                                 if (this.$parent.request[this.listen] === undefined
446 |                                     || this.$parent.request[this.listen].length === 0
447 |                                 ) {
448 |                                     this.addError(options);
449 |                                     success = false;
450 |                                 }
451 |                                 break;
452 |                             case 'number':
453 |                                 if (this.$parent.request[this.listen] !== undefined
454 |                                     && this.$parent.request[this.listen].length > 0
455 |                                     && isNaN(this.$parent.request[this.listen])
456 |                                 ) {
457 |                                     this.addError(options);
458 |                                     success = false;
459 |                                 }
460 |                                 break;
461 |                             case 'min':
462 |                                 if (options.length < 2)
463 |                                     throw 'Minimum value is not defined in validation rules';
464 |                                 if (this.$parent.request[this.listen] !== undefined
465 |                                     && this.$parent.request[this.listen].length > 0
466 |                                     && this.$parent.request[this.listen].length < parseInt(options[1])
467 |                                 ) {
468 |                                     this.addError(options);
469 |                                     success = false;
470 |                                 }
471 |                                 break;
472 |                             case 'min_number':
473 |                                 if (options.length < 2)
474 |                                     throw 'Minimum value is not defined in validation rules';
475 |                                 if (this.$parent.request[this.listen] !== undefined
476 |                                     && parseInt(this.$parent.request[this.listen]) < parseInt(options[1])
477 |                                 ) {
478 |                                     this.addError(options);
479 |                                     success = false;
480 |                                 }
481 |                                 break;
482 |                             case 'max':
483 |                                 if (options.length < 2)
484 |                                     throw 'Maximum value is not defined in validation rules';
485 |                                 if (this.$parent.request[this.listen] !== undefined
486 |                                     && this.$parent.request[this.listen].length > 0
487 |                                     && this.$parent.request[this.listen].length > parseInt(options[1])
488 |                                 ) {
489 |                                     this.addError(options);
490 |                                     success = false;
491 |                                 }
492 |                                 break;
493 |                             case 'max_number':
494 |                                 if (options.length < 2)
495 |                                     throw 'Minimum value is not defined in validation rules';
496 |                                 if (this.$parent.request[this.listen] !== undefined
497 |                                     && parseInt(this.$parent.request[this.listen]) > parseInt(options[1])
498 |                                 ) {
499 |                                     this.addError(options);
500 |                                     success = false;
501 |                                 }
502 |                                 break;
503 |                             case 'between':
504 |                                 if (options.length < 3)
505 |                                     throw 'One or all between values are not defined in validation rules';
506 |                                 if (this.$parent.request[this.listen] !== undefined
507 |                                     && this.$parent.request[this.listen].length > 0
508 |                                     && (this.$parent.request[this.listen].length < parseInt(options[1])
509 |                                         || this.$parent.request[this.listen].length > parseInt(options[2])
510 |                                     )
511 |                                 ) {
512 |                                     this.addError(options);
513 |                                     success = false;
514 |                                 }
515 |                                 break;
516 |                             case 'between_number':
517 |                                 if (options.length < 3)
518 |                                     throw 'One or all between values are not defined in validation rules';
519 |                                 if (this.$parent.request[this.listen] !== undefined
520 |                                     && (parseInt(this.$parent.request[this.listen]) < parseInt(options[1])
521 |                                         || parseInt(this.$parent.request[this.listen]) > parseInt(options[2])
522 |                                     )
523 |                                 ) {
524 |                                     this.addError(options);
525 |                                     success = false;
526 |                                 }
527 |                                 break;
528 |                             case 'email':
529 |                                 var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
530 |                                 if (this.$parent.request[this.listen] !== undefined
531 |                                     && this.$parent.request[this.listen].length > 0
532 |                                     && !regex.test(this.$parent.request[this.listen])
533 |                                 ) {
534 |                                     this.addError(options);
535 |                                     success = false;
536 |                                 }
537 |                                 break;
538 |                             case 'equals':
539 |                                 if (options.length < 2)
540 |                                     throw 'Comparison field is not defined in validation rules';
541 |                                 if (this.$parent.request[this.listen] !== undefined
542 |                                     && this.$parent.request[this.listen] !== this.$parent.request[options[1]]
543 |                                 ) {
544 |                                     this.addError(options);
545 |                                     success = false;
546 |                                 }
547 |                                 break;
548 |                             case 'required_if':
549 |                                 if (options.length < 2)
550 |                                     throw 'Comparison field is not defined in validation rules';
551 |                                 if (this.$parent.request[options[1]] !== undefined
552 |                                     && this.$parent.request[options[1]].length > 0
553 |                                     && (this.$parent.request[this.listen] === undefined
554 |                                         || this.$parent.request[this.listen].length === 0
555 |                                     )
556 |                                 ) {
557 |                                     this.addError(options);
558 |                                     success = false;
559 |                                 }
560 |                                 break;
561 |                             case 'url':
562 |                                 var regex = /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
563 |                                 if (this.$parent.request[this.listen] !== undefined
564 |                                     && this.$parent.request[this.listen].length > 0
565 |                                     && !regex.test(this.$parent.request[this.listen])
566 |                                 ) {
567 |                                     this.addError(options);
568 |                                     success = false;
569 |                                 }
570 |                                 break;
571 |                         }
572 |                     }
573 |                     return success;
574 |                 },
575 |                 /**
576 |                  * Adds error to response.
577 |                  * @since 1.0.2
578 |                  * @since 2.0.0 Remove $set.
579 |                  *
580 |                  * @param object options
581 |                  */
582 |                 addError: function(options)
583 |                 {
584 |                     if (this.$parent.response === undefined)
585 |                         this.$parent.response = {};
586 |                     if (this.$parent.response.errors === undefined)
587 |                         this.$parent.response.errors = {};
588 |                     if (this.$parent.response.errors[this.listen] === undefined)
589 |                         this.$parent.response.errors[this.listen] = [];
590 |                     var message = this.$parent.errors[options[0]];
591 |                     if (options.length > 1)
592 |                         message = message.replace(/\%1\%/, options[1]);
593 |                     if (options.length > 2)
594 |                         message = message.replace(/\%2\%/, options[2]);
595 |                     this.$parent.response.errors[this.listen].push(message);
596 |                 },
597 |             },
598 |         },
599 |         /**
600 |          * Results.
601 |          * Handles response results.
602 |          * Vue sub component.
603 |          * @since 1.0.0
604 |          * @since 2.0.0 Refactored to Vue2.
605 |          */
606 |         'results': {
607 |             props:
608 |             {
609 |                 /**
610 |                  * Results model.
611 |                  * @since 1.0.0
612 |                  * @since 2.0.0 Refactored to "value" to use v-model directive.
613 |                  * @var mixed
614 |                  */
615 |                 value:
616 |                 {
617 |                     type: [Array, Object, String],
618 |                     default: function()
619 |                     {
620 |                         return [];
621 |                     },
622 |                 },
623 |                 /**
624 |                  * Form request.
625 |                  * @since 1.0.0
626 |                  * @var mixed
627 |                  */
628 |                 request:
629 |                 {
630 |                     type: Object,
631 |                     default: function()
632 |                     {
633 |                         return {};
634 |                     },
635 |                 },
636 |                 /**
637 |                  * Flag that indicates if results should be fetched on ready.
638 |                  * @since 1.0.0
639 |                  * @var bool
640 |                  */
641 |                 fetchOnready:
642 |                 {
643 |                     type: [String, Boolean],
644 |                     default: false,
645 |                 },
646 |                 /**
647 |                  * Flag that indicates if results should clear on fetch or not.
648 |                  * @since 1.0.0
649 |                  * @var bool
650 |                  */
651 |                 clearOnFetch:
652 |                 {
653 |                     type: [String, Boolean],
654 |                     default: true,
655 |                 },
656 |             },
657 |             data: function()
658 |             {
659 |                 return {
660 |                     /**
661 |                      * Records to display.
662 |                      * @since 1.0.0
663 |                      * @var array
664 |                      */
665 |                     buffer: [],
666 |                 };
667 |             },
668 |             computed:
669 |             {
670 |                 /**
671 |                  * Returns computed records.
672 |                  * @since 1.0.0
673 |                  * @since 2.0.0 Remove $set.
674 |                  *
675 |                  * @return array
676 |                  */
677 |                 records: function()
678 |                 {
679 |                     if (!this.$parent.hasMessage && Array.isArray(this.value)) {
680 |                         if (this.clearOnFetch) {
681 |                             this.buffer = this.value;
682 |                         } else {
683 |                             for (var i in this.value) {
684 |                                 if (this.value[i] !== undefined && this.value[i] !== null)
685 |                                     this.buffer.push(this.value[i]);
686 |                             }
687 |                         }
688 |                     }
689 |                     return this.buffer;
690 |                 },
691 |                 /**
692 |                  * Returns flag indicating if records are present.
693 |                  * @since 1.0.0
694 |                  *
695 |                  * @return bool
696 |                  */
697 |                 hasRecords: function()
698 |                 {
699 |                     return this.records.length > 0;
700 |                 },
701 |             },
702 |             /**
703 |              * @since 2.0.3 "ready" replaced with "mounted".
704 |              */
705 |             mounted: function()
706 |             {
707 |                 if (this.fetchOnready)
708 |                     this.$parent.submit();
709 |             },
710 |         },
711 |     },
712 | }));


--------------------------------------------------------------------------------
/dist/vue.form.min.js:
--------------------------------------------------------------------------------
1 | "use strict";Vue.component("vform",Vue.extend({props:{action:{type:String,"default":""},method:{type:String,"default":"POST"},headers:{type:Object,"default":function(){}},timeout:{type:[String,Number],"default":void 0},credentials:{type:[String,Boolean],"default":void 0},emulateHttp:{type:[String,Boolean],"default":void 0},emulateJson:{type:[String,Boolean],"default":void 0},errors:{type:Object,"default":function(){return{required:"Required field.",number:"Value must be numeric.",email:"Email value is invalid.",min:"Value must have at least %1% character(s).",min_number:"Value must be at least %1%.",max:"Value must have no more than %1% character(s).",max_number:"Value must be no more than %1%.",between:"Value must have between %1% to %2% characters.",between_number:"Value must be between %1% to %2%.",equals:"Value must be equal to %1%.",required_if:"Required field.",url:"Url value is invalid."}}},id:{type:[String,Number],"default":void 0},index:{type:[String,Number],"default":void 0},responseJson:{type:[String,Boolean],"default":!1},responseBlob:{type:[String,Boolean],"default":!1}},data:function(){return{request:{},isLoading:!1,response:{}}},computed:{hasMessage:function(){return void 0!=this.response.message},hasError:function(){return void 0!=this.response.error&&this.response.error}},methods:{submit:function(){var a=!0;this.response={};for(var b in this.$children)"function"==typeof this.$children[b].validate&&(a=this.$children[b].validate()&&a);a?(this.isLoading=!0,this.$http(this.getOptions()).then(this.onSubmit,this.onError)):this.$emit("invalid",this.response.errors)},onSubmit:function(a){return this.response=this.responseJson?a.json():this.responseBlob?a.blob():a.data,this.$emit("success",a),void 0!==this.response.errors&&Object.keys(this.response.errors).length>0&&this.$emit("invalid",this.response.errors),void 0!==this.response.redirect?window.location=this.response.redirect:void this.onComplete()},onComplete:function(){this.isLoading=!1,this.$emit("complete")},onError:function(a){this.$emit("error",a),this.onComplete()},getOptions:function(){var a={url:this.action,method:this.method};switch(void 0!==this.headers&&(a.headers=this.headers),void 0!==this.timeout&&(a.timeout=this.timeout),void 0!==this.credentials&&(a.credentials="boolean"==typeof this.credentials?this.credentials:"true"===this.credentials),void 0!==this.emulateHttp&&(a.emulateHTTP="boolean"==typeof this.emulateHttp?this.emulateHttp:"true"===this.emulateHttp),void 0!==this.emulateJson&&(a.emulateJSON="boolean"==typeof this.emulateJson?this.emulateJson:"true"===this.emulateJson),this.method){case"post":case"POST":case"put":case"PUT":case"patch":case"PATCH":a.body=this.request;break;default:a.params=this.request}return a}},components:{"input-handler":{template:'<div :class="[cssClass,errorCss]"><slot></slot><div class="errors"><ul><li v-for="(error, index) in inputErrors" track-by="$index" v-html="error"></li></ul></div></div>',props:{listen:{type:String,"default":""},cssClass:{type:String,"default":""},classError:{type:String,"default":void 0},value:{type:[Object,Array],"default":function(){return{}}},validations:{type:String,"default":""}},computed:{inputErrors:function(){var a=[];return void 0!==this.value.errors&&void 0!==this.value.errors[this.listen]&&(a=this.value.errors[this.listen]),a},hasErrors:function(){return this.inputErrors.length>0},errorCss:function(){var a={};return void 0!==this.classError&&(a[this.classError]=this.hasErrors),a}},methods:{validate:function(){var a=!0,b=this.validations.split("|");for(var c in b){var d=b[c].split(":");switch(d[0]){case"required":void 0!==this.$parent.request[this.listen]&&0!==this.$parent.request[this.listen].length||(this.addError(d),a=!1);break;case"number":void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&isNaN(this.$parent.request[this.listen])&&(this.addError(d),a=!1);break;case"min":if(d.length<2)throw"Minimum value is not defined in validation rules";void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&this.$parent.request[this.listen].length<parseInt(d[1])&&(this.addError(d),a=!1);break;case"min_number":if(d.length<2)throw"Minimum value is not defined in validation rules";void 0!==this.$parent.request[this.listen]&&parseInt(this.$parent.request[this.listen])<parseInt(d[1])&&(this.addError(d),a=!1);break;case"max":if(d.length<2)throw"Maximum value is not defined in validation rules";void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&this.$parent.request[this.listen].length>parseInt(d[1])&&(this.addError(d),a=!1);break;case"max_number":if(d.length<2)throw"Minimum value is not defined in validation rules";void 0!==this.$parent.request[this.listen]&&parseInt(this.$parent.request[this.listen])>parseInt(d[1])&&(this.addError(d),a=!1);break;case"between":if(d.length<3)throw"One or all between values are not defined in validation rules";void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&(this.$parent.request[this.listen].length<parseInt(d[1])||this.$parent.request[this.listen].length>parseInt(d[2]))&&(this.addError(d),a=!1);break;case"between_number":if(d.length<3)throw"One or all between values are not defined in validation rules";void 0!==this.$parent.request[this.listen]&&(parseInt(this.$parent.request[this.listen])<parseInt(d[1])||parseInt(this.$parent.request[this.listen])>parseInt(d[2]))&&(this.addError(d),a=!1);break;case"email":var e=/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&!e.test(this.$parent.request[this.listen])&&(this.addError(d),a=!1);break;case"equals":if(d.length<2)throw"Comparison field is not defined in validation rules";void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen]!==this.$parent.request[d[1]]&&(this.addError(d),a=!1);break;case"required_if":if(d.length<2)throw"Comparison field is not defined in validation rules";void 0!==this.$parent.request[d[1]]&&this.$parent.request[d[1]].length>0&&(void 0===this.$parent.request[this.listen]||0===this.$parent.request[this.listen].length)&&(this.addError(d),a=!1);break;case"url":var e=/(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;void 0!==this.$parent.request[this.listen]&&this.$parent.request[this.listen].length>0&&!e.test(this.$parent.request[this.listen])&&(this.addError(d),a=!1)}}return a},addError:function(a){void 0===this.$parent.response&&(this.$parent.response={}),void 0===this.$parent.response.errors&&(this.$parent.response.errors={}),void 0===this.$parent.response.errors[this.listen]&&(this.$parent.response.errors[this.listen]=[]);var b=this.$parent.errors[a[0]];a.length>1&&(b=b.replace(/\%1\%/,a[1])),a.length>2&&(b=b.replace(/\%2\%/,a[2])),this.$parent.response.errors[this.listen].push(b)}}},results:{props:{value:{type:[Array,Object,String],"default":function(){return[]}},request:{type:Object,"default":function(){return{}}},fetchOnready:{type:[String,Boolean],"default":!1},clearOnFetch:{type:[String,Boolean],"default":!0}},data:function(){return{buffer:[]}},computed:{records:function(){if(!this.$parent.hasMessage&&Array.isArray(this.value))if(this.clearOnFetch)this.buffer=this.value;else for(var a in this.value)void 0!==this.value[a]&&null!==this.value[a]&&this.buffer.push(this.value[a]);return this.buffer},hasRecords:function(){return this.records.length>0}},mounted:function(){this.fetchOnready&&this.$parent.submit()}}}}));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-form-10q",
 3 |   "version": "2.0.3",
 4 |   "description": "Form component for Vue JS.",
 5 |   "main": "dist/vue.form.min.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/10quality/vue-form.git"
 9 |   },
10 |   "keywords": [
11 |     "vue",
12 |     "vuejs",
13 |     "form",
14 |     "input",
15 |     "results",
16 |     "handler"
17 |   ],
18 |   "author": "10Quality <info@10quality.com>",
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/10quality/vue-form/issues"
22 |   },
23 |   "homepage": "https://github.com/10quality/vue-form",
24 |   "devDependencies": {
25 |     "grunt": "^0.4.5",
26 |     "grunt-contrib-copy": "^0.8.2",
27 |     "grunt-contrib-uglify": "^0.11.0"
28 |   },
29 |   "dependencies": {
30 |     "vue": "^2.3.4",
31 |     "vue-resource": "^1.3.4"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/vue.form.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | /*!
  3 |  * Form.
  4 |  * Vue componenet.
  5 |  *
  6 |  * @author Alejandro Mostajo <http://about.me/amostajo>
  7 |  * @copyright 10Quality <http://www.10quality.com>
  8 |  * @license MIT
  9 |  * @version 2.0.3
 10 |  */
 11 | Vue.component('vform', Vue.extend({
 12 |     props:
 13 |     {
 14 |         /**
 15 |          * Request action url.
 16 |          * @since 1.0.0
 17 |          * @var string
 18 |          */
 19 |         action:
 20 |         {
 21 |             type: String,
 22 |             default: '',
 23 |         },
 24 |         /**
 25 |          * Request method.
 26 |          * @since 1.0.0
 27 |          * @var string
 28 |          */
 29 |         method:
 30 |         {
 31 |             type: String,
 32 |             default: 'POST',
 33 |         },
 34 |         /**
 35 |          * Request headers.
 36 |          * @since 1.0.1
 37 |          * @var object
 38 |          */
 39 |         headers:
 40 |         {
 41 |             type: Object,
 42 |             default: function() { return undefined; },
 43 |         },
 44 |         /**
 45 |          * Request timeout.
 46 |          * @since 1.0.1
 47 |          * @var int
 48 |          */
 49 |         timeout:
 50 |         {
 51 |             type: [String, Number],
 52 |             default: undefined,
 53 |         },
 54 |         /**
 55 |          * Flag that indicates if request has credentials.
 56 |          * @since 1.0.1
 57 |          * @var int
 58 |          */
 59 |         credentials:
 60 |         {
 61 |             type: [String, Boolean],
 62 |             default: undefined,
 63 |         },
 64 |         /**
 65 |          * Flag that indicates if request should emulate HTTP.
 66 |          * @since 1.0.1
 67 |          * @var bool
 68 |          */
 69 |         emulateHttp:
 70 |         {
 71 |             type: [String, Boolean],
 72 |             default: undefined,
 73 |         },
 74 |         /**
 75 |          * Flag that indicates if request should emulate JSON.
 76 |          * @since 1.0.1
 77 |          * @var bool
 78 |          */
 79 |         emulateJson:
 80 |         {
 81 |             type: [String, Boolean],
 82 |             default: undefined,
 83 |         },
 84 |         /**
 85 |          * List of default errors.
 86 |          * @since 1.0.2
 87 |          * @since 1.0.7 Added equal,required_if,url
 88 |          * @var object
 89 |          */
 90 |         errors:
 91 |         {
 92 |             type: Object,
 93 |             default: function() {
 94 |                 return {
 95 |                     required: 'Required field.',
 96 |                     number: 'Value must be numeric.',
 97 |                     email: 'Email value is invalid.',
 98 |                     min: 'Value must have at least %1% character(s).',
 99 |                     min_number: 'Value must be at least %1%.',
100 |                     max: 'Value must have no more than %1% character(s).',
101 |                     max_number: 'Value must be no more than %1%.',
102 |                     between: 'Value must have between %1% to %2% characters.',
103 |                     between_number: 'Value must be between %1% to %2%.',
104 |                     equals: 'Value must be equal to %1%.',
105 |                     required_if: 'Required field.',
106 |                     url: 'Url value is invalid.',
107 |                 };
108 |             },
109 |         },
110 |         /**
111 |          * Form given ID.
112 |          * @since 1.0.5
113 |          * @var string
114 |          */
115 |         id:
116 |         {
117 |             type: [String, Number],
118 |             default: undefined,
119 |         },
120 |         /**
121 |          * Form loop key (in case it its used inside a v-for).
122 |          * @since 1.0.5
123 |          * @since 2.0.0 Refactored due to be a reserved name.
124 |          * @var string
125 |          */
126 |         index:
127 |         {
128 |             type: [String, Number],
129 |             default: undefined,
130 |         },
131 |         /**
132 |          * Flag that indicates if response needs to be converted to json.
133 |          * @since 1.0.9
134 |          * @var bool
135 |          */
136 |         responseJson:
137 |         {
138 |             type: [String, Boolean],
139 |             default: false,
140 |         },
141 |         /**
142 |          * Flag that indicates if response needs to be converted to json.
143 |          * @since 1.0.9
144 |          * @var bool
145 |          */
146 |         responseBlob:
147 |         {
148 |             type: [String, Boolean],
149 |             default: false,
150 |         },
151 |     },
152 |     data: function() {
153 |         return {
154 |             /**
155 |              * Request data.
156 |              * @since 1.0.0
157 |              * @var object
158 |              */
159 |             request: {},
160 |             /**
161 |              * Flag that indicates if component is loading.
162 |              * @since 1.0.0
163 |              * @var bool
164 |              */
165 |             isLoading: false,
166 |             /**
167 |              * Response data.
168 |              * @since 1.0.0
169 |              * @var object
170 |              */
171 |             response: {},
172 |         };
173 |     },
174 |     computed:
175 |     {
176 |         /** 
177 |          * Returns flag indicating if response has a message.
178 |          * @since 1.0.0
179 |          * @return bool
180 |          */
181 |         hasMessage: function()
182 |         {
183 |             return this.response.message != undefined;
184 |         },
185 |         /** 
186 |          * Returns flag indicating if response has an error or not.
187 |          * @since 1.0.0
188 |          * @return bool
189 |          */
190 |         hasError: function()
191 |         {
192 |             return this.response.error != undefined
193 |                 && this.response.error;
194 |         },
195 |     },
196 |     methods:
197 |     {
198 |         /**
199 |          * Submits form.
200 |          * @since 1.0.0
201 |          * @since 1.0.1 Options generated based on method.
202 |          * @since 1.0.2 Validations added.
203 |          * @since 2.0.0 Use $emit and remove $set.
204 |          */
205 |         submit: function()
206 |         {
207 |             // Input validations
208 |             var isValid = true;
209 |             this.response = {};
210 |             for (var i in this.$children) {
211 |                 if (typeof(this.$children[i].validate) === 'function')
212 |                     isValid = this.$children[i].validate() && isValid;
213 |             }
214 |             if (isValid) {
215 |                 this.isLoading = true;
216 |                 this.$http(this.getOptions()).then(this.onSubmit, this.onError);
217 |             } else {
218 |                 this.$emit('invalid', this.response.errors);
219 |             }
220 |         },
221 |         /**
222 |          * Handles submission response.
223 |          * @since 1.0.0
224 |          * @since 1.0.1 Added event dispatch.
225 |          * @since 1.0.3 Added event broadcast.
226 |          * @since 1.0.4 Response errors triggers invalid event.
227 |          * @since 1.0.9 Forces response conversion to jsob or blob.
228 |          * @since 2.0.0 Use $emit and remove $set.
229 |          * @since 2.0.2 Fixes response redirect.
230 |          *
231 |          * @param object response Response
232 |          */
233 |         onSubmit: function(response)
234 |         {
235 |             this.response = this.responseJson
236 |                 ? response.json()
237 |                 : (this.responseBlob
238 |                     ? response.blob()
239 |                     : response.data
240 |                 );
241 |             this.$emit('success', response);
242 |             if (this.response.errors !== undefined && Object.keys(this.response.errors).length > 0) {
243 |                 this.$emit('invalid', this.response.errors);
244 |             }
245 |             if (this.response.redirect !== undefined)
246 |                 return window.location = this.response.redirect;
247 |             this.onComplete();
248 |         },
249 |         /**
250 |          * Handles on complete submission
251 |          * @since 1.0.0
252 |          * @since 1.0.1 Added event dispatch.
253 |          * @since 1.0.3 Added event broadcast.
254 |          * @since 2.0.0 Use $emit and remove $set.
255 |          */
256 |         onComplete: function()
257 |         {
258 |             this.isLoading = false;
259 |             this.$emit('complete');
260 |         },
261 |         /** 
262 |          * Handles submission error.
263 |          * @since 1.0.0
264 |          * @since 1.0.1 Added event dispatch.
265 |          * @since 1.0.3 Added event broadcast.
266 |          * @since 2.0.0 Use $emit instead.
267 |          *
268 |          * @param object e Error
269 |          */
270 |         onError: function(e)
271 |         {
272 |             this.$emit('error', e);
273 |             this.onComplete();
274 |         },
275 |         /**
276 |          * Returns request options based on method.
277 |          * @since 1.0.1
278 |          *
279 |          * @return object
280 |          */
281 |         getOptions: function()
282 |         {
283 |             var options = {
284 |                 url: this.action,
285 |                 method: this.method,
286 |             };
287 |             if (this.headers !== undefined)
288 |                 options.headers = this.headers;
289 |             if (this.timeout !== undefined)
290 |                 options.timeout = this.timeout;
291 |             if (this.credentials !== undefined)
292 |                 options.credentials = typeof(this.credentials) === 'boolean'
293 |                     ? this.credentials
294 |                     : this.credentials === 'true';
295 |             if (this.emulateHttp !== undefined)
296 |                 options.emulateHTTP = typeof(this.emulateHttp) === 'boolean'
297 |                     ? this.emulateHttp
298 |                     : this.emulateHttp === 'true';
299 |             if (this.emulateJson !== undefined)
300 |                 options.emulateJSON = typeof(this.emulateJson) === 'boolean'
301 |                     ? this.emulateJson
302 |                     : this.emulateJson === 'true';
303 |             switch (this.method) {
304 |                 case 'post':
305 |                 case 'POST':
306 |                 case 'put':
307 |                 case 'PUT':
308 |                 case 'patch':
309 |                 case 'PATCH':
310 |                     options.body = this.request;
311 |                     break;
312 |                 default:
313 |                     options.params = this.request;
314 |                     break;
315 |             }
316 |             return options;
317 |         },
318 |     },
319 |     components:
320 |     {
321 |         /**
322 |          * Input Handler.
323 |          * Handles input errors.
324 |          * Vue sub component.
325 |          * @since 1.0.0
326 |          * @since 2.0.0 Refactored to Vue2.
327 |          */
328 |         'input-handler': {
329 |             template: '<div :class="[cssClass,errorCss]"><slot></slot><div class="errors"><ul><li v-for="(error, index) in inputErrors" track-by="$index" v-html="error"></li></ul></div></div>',
330 |             props:
331 |             {
332 |                 /**
333 |                  * Name of the error key to listen to.
334 |                  * @since 1.0.0
335 |                  * @var string
336 |                  */
337 |                 listen:
338 |                 {
339 |                     type: String,
340 |                     default: '',
341 |                 },
342 |                 /**
343 |                  * CSS class to apply to wrapper.
344 |                  * @since 1.0.0
345 |                  * @since 2.0.0 Refactored to cssClass
346 |                  * @var string
347 |                  */
348 |                 cssClass:
349 |                 {
350 |                     type: String,
351 |                     default: '',
352 |                 },
353 |                 /**
354 |                  * CSS class to apply to wrapper when errors are available.
355 |                  * @since 1.0.0
356 |                  * @var string
357 |                  */
358 |                 classError:
359 |                 {
360 |                     type: String,
361 |                     default: undefined,
362 |                 },
363 |                 /**
364 |                  * Input errors to listen to.
365 |                  * @since 1.0.0
366 |                  * @since 2.0.0 Refactored to "value" in order to use v-model directive.
367 |                  * @var object
368 |                  */
369 |                 value:
370 |                 {
371 |                     type: [Object, Array],
372 |                     default: function() {
373 |                         return {};
374 |                     },
375 |                 },
376 |                 /**
377 |                  * List of validation rules to perform before request is sent.
378 |                  * @since 1.0.2
379 |                  * @var string
380 |                  */
381 |                 validations:
382 |                 {
383 |                     type: String,
384 |                     default: '',
385 |                 },
386 |             },
387 |             computed:
388 |             {
389 |                 /**
390 |                  * Input specific errors.
391 |                  * @since 1.0.0
392 |                  * @return array
393 |                  */
394 |                 inputErrors: function()
395 |                 {
396 |                     var errors = [];
397 |                     if (this.value.errors !== undefined
398 |                         && this.value.errors[this.listen] !== undefined
399 |                     ) {
400 |                         errors = this.value.errors[this.listen];
401 |                     }
402 |                     return errors;
403 |                 },
404 |                 /**
405 |                  * Flag that indicates if there are errors.
406 |                  * @since 1.0.0
407 |                  * @return bool
408 |                  */
409 |                 hasErrors: function()
410 |                 {
411 |                     return this.inputErrors.length > 0;
412 |                 },
413 |                 /**
414 |                  * Erros css to apply to wrapper.
415 |                  * @since 1.0.0
416 |                  * @since 1.0.2 Fix for when error class is not present.
417 |                  * @return object
418 |                  */
419 |                 errorCss: function()
420 |                 {
421 |                     var css = {};
422 |                     if (this.classError !== undefined)
423 |                         css[this.classError] = this.hasErrors;
424 |                     return css;
425 |                 }
426 |             },
427 |             methods:
428 |             {
429 |                 /**
430 |                  * Validates input.
431 |                  * @since 1.0.2
432 |                  * @since 1.0.7 Added equal,required_if,url
433 |                  * @since 1.0.8 Bug fixes.
434 |                  *
435 |                  * @return bool
436 |                  */
437 |                 validate: function()
438 |                 {
439 |                     var success = true;
440 |                     var rules = this.validations.split('|');
441 |                     for (var i in rules) {
442 |                         var options = rules[i].split(':');
443 |                         switch (options[0]) {
444 |                             case 'required':
445 |                                 if (this.$parent.request[this.listen] === undefined
446 |                                     || this.$parent.request[this.listen].length === 0
447 |                                 ) {
448 |                                     this.addError(options);
449 |                                     success = false;
450 |                                 }
451 |                                 break;
452 |                             case 'number':
453 |                                 if (this.$parent.request[this.listen] !== undefined
454 |                                     && this.$parent.request[this.listen].length > 0
455 |                                     && isNaN(this.$parent.request[this.listen])
456 |                                 ) {
457 |                                     this.addError(options);
458 |                                     success = false;
459 |                                 }
460 |                                 break;
461 |                             case 'min':
462 |                                 if (options.length < 2)
463 |                                     throw 'Minimum value is not defined in validation rules';
464 |                                 if (this.$parent.request[this.listen] !== undefined
465 |                                     && this.$parent.request[this.listen].length > 0
466 |                                     && this.$parent.request[this.listen].length < parseInt(options[1])
467 |                                 ) {
468 |                                     this.addError(options);
469 |                                     success = false;
470 |                                 }
471 |                                 break;
472 |                             case 'min_number':
473 |                                 if (options.length < 2)
474 |                                     throw 'Minimum value is not defined in validation rules';
475 |                                 if (this.$parent.request[this.listen] !== undefined
476 |                                     && parseInt(this.$parent.request[this.listen]) < parseInt(options[1])
477 |                                 ) {
478 |                                     this.addError(options);
479 |                                     success = false;
480 |                                 }
481 |                                 break;
482 |                             case 'max':
483 |                                 if (options.length < 2)
484 |                                     throw 'Maximum value is not defined in validation rules';
485 |                                 if (this.$parent.request[this.listen] !== undefined
486 |                                     && this.$parent.request[this.listen].length > 0
487 |                                     && this.$parent.request[this.listen].length > parseInt(options[1])
488 |                                 ) {
489 |                                     this.addError(options);
490 |                                     success = false;
491 |                                 }
492 |                                 break;
493 |                             case 'max_number':
494 |                                 if (options.length < 2)
495 |                                     throw 'Minimum value is not defined in validation rules';
496 |                                 if (this.$parent.request[this.listen] !== undefined
497 |                                     && parseInt(this.$parent.request[this.listen]) > parseInt(options[1])
498 |                                 ) {
499 |                                     this.addError(options);
500 |                                     success = false;
501 |                                 }
502 |                                 break;
503 |                             case 'between':
504 |                                 if (options.length < 3)
505 |                                     throw 'One or all between values are not defined in validation rules';
506 |                                 if (this.$parent.request[this.listen] !== undefined
507 |                                     && this.$parent.request[this.listen].length > 0
508 |                                     && (this.$parent.request[this.listen].length < parseInt(options[1])
509 |                                         || this.$parent.request[this.listen].length > parseInt(options[2])
510 |                                     )
511 |                                 ) {
512 |                                     this.addError(options);
513 |                                     success = false;
514 |                                 }
515 |                                 break;
516 |                             case 'between_number':
517 |                                 if (options.length < 3)
518 |                                     throw 'One or all between values are not defined in validation rules';
519 |                                 if (this.$parent.request[this.listen] !== undefined
520 |                                     && (parseInt(this.$parent.request[this.listen]) < parseInt(options[1])
521 |                                         || parseInt(this.$parent.request[this.listen]) > parseInt(options[2])
522 |                                     )
523 |                                 ) {
524 |                                     this.addError(options);
525 |                                     success = false;
526 |                                 }
527 |                                 break;
528 |                             case 'email':
529 |                                 var regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
530 |                                 if (this.$parent.request[this.listen] !== undefined
531 |                                     && this.$parent.request[this.listen].length > 0
532 |                                     && !regex.test(this.$parent.request[this.listen])
533 |                                 ) {
534 |                                     this.addError(options);
535 |                                     success = false;
536 |                                 }
537 |                                 break;
538 |                             case 'equals':
539 |                                 if (options.length < 2)
540 |                                     throw 'Comparison field is not defined in validation rules';
541 |                                 if (this.$parent.request[this.listen] !== undefined
542 |                                     && this.$parent.request[this.listen] !== this.$parent.request[options[1]]
543 |                                 ) {
544 |                                     this.addError(options);
545 |                                     success = false;
546 |                                 }
547 |                                 break;
548 |                             case 'required_if':
549 |                                 if (options.length < 2)
550 |                                     throw 'Comparison field is not defined in validation rules';
551 |                                 if (this.$parent.request[options[1]] !== undefined
552 |                                     && this.$parent.request[options[1]].length > 0
553 |                                     && (this.$parent.request[this.listen] === undefined
554 |                                         || this.$parent.request[this.listen].length === 0
555 |                                     )
556 |                                 ) {
557 |                                     this.addError(options);
558 |                                     success = false;
559 |                                 }
560 |                                 break;
561 |                             case 'url':
562 |                                 var regex = /(https?:\/\/(?:www\.|(?!www))[^\s\.]+\.[^\s]{2,}|www\.[^\s]+\.[^\s]{2,})/;
563 |                                 if (this.$parent.request[this.listen] !== undefined
564 |                                     && this.$parent.request[this.listen].length > 0
565 |                                     && !regex.test(this.$parent.request[this.listen])
566 |                                 ) {
567 |                                     this.addError(options);
568 |                                     success = false;
569 |                                 }
570 |                                 break;
571 |                         }
572 |                     }
573 |                     return success;
574 |                 },
575 |                 /**
576 |                  * Adds error to response.
577 |                  * @since 1.0.2
578 |                  * @since 2.0.0 Remove $set.
579 |                  *
580 |                  * @param object options
581 |                  */
582 |                 addError: function(options)
583 |                 {
584 |                     if (this.$parent.response === undefined)
585 |                         this.$parent.response = {};
586 |                     if (this.$parent.response.errors === undefined)
587 |                         this.$parent.response.errors = {};
588 |                     if (this.$parent.response.errors[this.listen] === undefined)
589 |                         this.$parent.response.errors[this.listen] = [];
590 |                     var message = this.$parent.errors[options[0]];
591 |                     if (options.length > 1)
592 |                         message = message.replace(/\%1\%/, options[1]);
593 |                     if (options.length > 2)
594 |                         message = message.replace(/\%2\%/, options[2]);
595 |                     this.$parent.response.errors[this.listen].push(message);
596 |                 },
597 |             },
598 |         },
599 |         /**
600 |          * Results.
601 |          * Handles response results.
602 |          * Vue sub component.
603 |          * @since 1.0.0
604 |          * @since 2.0.0 Refactored to Vue2.
605 |          */
606 |         'results': {
607 |             props:
608 |             {
609 |                 /**
610 |                  * Results model.
611 |                  * @since 1.0.0
612 |                  * @since 2.0.0 Refactored to "value" to use v-model directive.
613 |                  * @var mixed
614 |                  */
615 |                 value:
616 |                 {
617 |                     type: [Array, Object, String],
618 |                     default: function()
619 |                     {
620 |                         return [];
621 |                     },
622 |                 },
623 |                 /**
624 |                  * Form request.
625 |                  * @since 1.0.0
626 |                  * @var mixed
627 |                  */
628 |                 request:
629 |                 {
630 |                     type: Object,
631 |                     default: function()
632 |                     {
633 |                         return {};
634 |                     },
635 |                 },
636 |                 /**
637 |                  * Flag that indicates if results should be fetched on ready.
638 |                  * @since 1.0.0
639 |                  * @var bool
640 |                  */
641 |                 fetchOnready:
642 |                 {
643 |                     type: [String, Boolean],
644 |                     default: false,
645 |                 },
646 |                 /**
647 |                  * Flag that indicates if results should clear on fetch or not.
648 |                  * @since 1.0.0
649 |                  * @var bool
650 |                  */
651 |                 clearOnFetch:
652 |                 {
653 |                     type: [String, Boolean],
654 |                     default: true,
655 |                 },
656 |             },
657 |             data: function()
658 |             {
659 |                 return {
660 |                     /**
661 |                      * Records to display.
662 |                      * @since 1.0.0
663 |                      * @var array
664 |                      */
665 |                     buffer: [],
666 |                 };
667 |             },
668 |             computed:
669 |             {
670 |                 /**
671 |                  * Returns computed records.
672 |                  * @since 1.0.0
673 |                  * @since 2.0.0 Remove $set.
674 |                  *
675 |                  * @return array
676 |                  */
677 |                 records: function()
678 |                 {
679 |                     if (!this.$parent.hasMessage && Array.isArray(this.value)) {
680 |                         if (this.clearOnFetch) {
681 |                             this.buffer = this.value;
682 |                         } else {
683 |                             for (var i in this.value) {
684 |                                 if (this.value[i] !== undefined && this.value[i] !== null)
685 |                                     this.buffer.push(this.value[i]);
686 |                             }
687 |                         }
688 |                     }
689 |                     return this.buffer;
690 |                 },
691 |                 /**
692 |                  * Returns flag indicating if records are present.
693 |                  * @since 1.0.0
694 |                  *
695 |                  * @return bool
696 |                  */
697 |                 hasRecords: function()
698 |                 {
699 |                     return this.records.length > 0;
700 |                 },
701 |             },
702 |             /**
703 |              * @since 2.0.3 "ready" replaced with "mounted".
704 |              */
705 |             mounted: function()
706 |             {
707 |                 if (this.fetchOnready)
708 |                     this.$parent.submit();
709 |             },
710 |         },
711 |     },
712 | }));


--------------------------------------------------------------------------------
/tests/test1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <body>
 4 |         <div id="app">
 5 | 
 6 |             <vform inline-template
 7 |                 action="https://restcountries.eu/rest/v1/alpha"
 8 |                 method="GET"
 9 |                 ref="form"
10 |             >
11 |                 <div class="form">
12 |                     <h1>Country search sample</h1>
13 |                     Provided by: <a href="http://restcountries.eu/">http://restcountries.eu/</a>
14 |                     <p>
15 |                         <div><b>Alpha code 2</b></div>
16 |                         <input-handler v-model="response"
17 |                             validations="required|min:2|max:2"
18 |                             listen="codes"
19 |                         >
20 |                             <input type="text"
21 |                                 v-model="request.codes"
22 |                                 @keyup.enter="submit"
23 |                                 placeholder="i.e. us or uk"
24 |                             />
25 |                         </input-handler>
26 | 
27 |                         <input type="checkbox"
28 |                             v-model="request.clearOnFetch"
29 |                             value="1"
30 |                             checked
31 |                         /> Clear results on submit?
32 |                     </p>
33 | 
34 |                     <div v-if="request.codes">
35 |                         <button @click="submit">
36 |                             Submit
37 |                         </button>
38 |                         <span v-if="isLoading"> Loading...</span>
39 |                     </div>
40 | 
41 |                     <results inline-template
42 |                         v-model="response"
43 |                         :clear-on-fetch="request.clearOnFetch"
44 |                         ref="results"
45 |                     >
46 |                         <div v-show="hasRecords">
47 |                             <hr>
48 |                             <div v-for="country in records" track-by="$index" v-if="country != null">
49 |                                 <b>{{country.name}}</b>
50 |                                 <i>Capital: {{country.capital}} | {{country.alpha2Code}} | {{country.region}}</i>
51 |                             </div>
52 |                             <div v-if="records.length > 0 && records[0] == null">
53 |                                 <i style="color:#d10000;">No country found.</i>
54 |                             </div>
55 |                         </div>
56 |                     </results>
57 |                 </div>
58 |             </vform>
59 | 
60 |         </div>
61 |         <script src="../node_modules/vue/dist/vue.js" type="text/javascript"></script>
62 |         <script src="../node_modules/vue-resource/dist/vue-resource.js" type="text/javascript"></script>
63 |         <script src="../src/vue.form.js" type="text/javascript"></script>
64 |         <script type="text/javascript">
65 |             Vue.config.debug = true;
66 |             Vue.config.devtools = true;
67 |             Vue.http.options.emulateJSON = true;
68 |             var app = new Vue({
69 |                 el: '#app',
70 |             });
71 |         </script>
72 |     </body>
73 | </html>


--------------------------------------------------------------------------------
/tests/test2.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  5 |     </head>
  6 |     <body>
  7 |         <div id="app">
  8 | 
  9 |             <vform inline-template
 10 |                 ref="form"
 11 |                 @invalid="onInvalid"
 12 |                 @error="onError"
 13 |             >
 14 |                 <div class="container">
 15 |                     <input-handler v-model="response"
 16 |                         validations="required|min:8"
 17 |                         listen="password"
 18 |                         class="form-group"
 19 |                         class-error="has-error"
 20 |                     >
 21 |                         <label for="password">Password</label>
 22 |                         <input type="password"
 23 |                             v-model="request.password"
 24 |                             @keyup.enter="submit"
 25 |                             placeholder="Password"
 26 |                             class="form-control"
 27 |                         />
 28 |                     </input-handler>
 29 | 
 30 |                     <input-handler v-model="response"
 31 |                         validations="required_if:password|min:8|equals:password"
 32 |                         listen="password2"
 33 |                         class="form-group"
 34 |                         class-error="has-error"
 35 |                     >
 36 |                         <label for="password">Password (repeat)</label>
 37 |                         <input type="password"
 38 |                             v-model="request.password2"
 39 |                             @keyup.enter="submit"
 40 |                             placeholder="Repeat password"
 41 |                             class="form-control"
 42 |                         />
 43 |                     </input-handler>
 44 |                     <input-handler v-model="response"
 45 |                         validations="required_if:password"
 46 |                         listen="passwordQuestion"
 47 |                         class="form-group"
 48 |                         class-error="has-error"
 49 |                     >
 50 |                         <label for="password">Password remember question?</label>
 51 |                         <input type="text"
 52 |                             v-model="request.passwordQuestion"
 53 |                             @keyup.enter="submit"
 54 |                             placeholder="Remember the answer"
 55 |                             class="form-control"
 56 |                         />
 57 |                     </input-handler>
 58 |                     <input-handler v-model="response"
 59 |                         validations="url"
 60 |                         listen="url"
 61 |                         class="form-group"
 62 |                         class-error="has-error"
 63 |                     >
 64 |                         <label for="password">Url</label>
 65 |                         <input type="url"
 66 |                             v-model="request.url"
 67 |                             @keyup.enter="submit"
 68 |                             class="form-control"
 69 |                         />
 70 |                     </input-handler>
 71 | 
 72 |                     <div>
 73 |                         <button @click="submit" class="btn btn-primary">
 74 |                             Submit
 75 |                         </button>
 76 |                         <span v-if="isLoading"> Loading...</span>
 77 |                     </div>
 78 |                 </div>
 79 |             </vform>
 80 | 
 81 |         </div>
 82 |         <script src="../node_modules/vue/dist/vue.js" type="text/javascript"></script>
 83 |         <script src="../node_modules/vue-resource/dist/vue-resource.js" type="text/javascript"></script>
 84 |         <script src="../src/vue.form.js" type="text/javascript"></script>
 85 |         <script type="text/javascript">
 86 |             Vue.config.debug = true;
 87 |             Vue.config.devtools = true;
 88 |             Vue.http.options.emulateJSON = true;
 89 |             var app = new Vue({
 90 |                 el: '#app',
 91 |                 methods:
 92 |                 {
 93 |                     onInvalid: function(errors)
 94 |                     {
 95 |                         console.log('Invalid form:');
 96 |                         console.log(errors);
 97 |                     },
 98 |                     onError: function(e)
 99 |                     {
100 |                         console.log('Fatal error:');
101 |                         console.log(e);
102 |                     },
103 |                 },
104 |             });
105 |         </script>
106 |     </body>
107 | </html>


--------------------------------------------------------------------------------