Skip to content

Commit 3b012cd

Browse files
committed
Merge branch 'master-origin' into feature/468-unique-ids
* master-origin: migrated VFG docs to newer GitBooks, created GitHub Repo for Docs to allow for easier maintenance, updated JSFiddle to use "latest" VFG, and created a CodePen version as well Codacy (guard-for-in) fix fixed code structure added "options" to VFG install function, appending custom "validators" to the validators object that are passed into `Vue.use(VueFormGenerator, { validators: { key: (value, field, model) => {} }) fixed single-quotes added "type" attribute to inside buttons schema, defaults to "button" when one is not provided added "item.disabled" logic, supporting both boolean values and a function that is passed a reference to the model to determine disabled logic based on the model. listen for model-updated from `fields`, and fix `debounceFormatFunction` property to match fieldInput's `debounceFormatFunc` instead. # Conflicts: # src/fields/core/fieldRadios.vue
2 parents ab1daeb + 4cc7a7a commit 3b012cd

File tree

6 files changed

+32
-10
lines changed

6 files changed

+32
-10
lines changed

README.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,10 @@ A schema-based form generator component for Vue.js.
1515

1616
## Demo
1717

18-
[JSFiddle simple example](https://jsfiddle.net/icebob/0mg1v81e/)
18+
[JSFiddle simple example](https://jsfiddle.net/zoul0813/d8excp36/)
19+
[CodePen simple example](https://codepen.io/zoul0813/pen/OrNVNw)
1920

20-
[![Screenshot](https://icebob.gitbooks.io/vueformgenerator/content/assets/vfg-example1.png)](https://jsfiddle.net/icebob/0mg1v81e/)
21+
[![Screenshot](https://github.com/vue-generators/vue-form-generator-docs/raw/master/assets/vfg-example1.png)](https://jsfiddle.net/zoul0813/d8excp36/)
2122

2223
## Features
2324

@@ -33,7 +34,7 @@ A schema-based form generator component for Vue.js.
3334

3435
## Documentation
3536

36-
[Online documentation on Gitbook](https://icebob.gitbooks.io/vueformgenerator/content/)
37+
[Online documentation on Gitbook](https://vue-generators.gitbook.io/vue-generators/)
3738

3839
## Dependencies
3940

@@ -43,7 +44,7 @@ While built-in fields don't need external dependencies, optional fields may need
4344
These dependencies fall into two camps: jQuery or Vanilla. You can find almost the same functionality in both flavors.
4445
In the end, it's your choice to depend on jQuery or not.
4546

46-
You can find details about dependencies in the official [documentation](https://icebob.gitbooks.io/vueformgenerator/content/) under each specific component.
47+
You can find details about dependencies in the official [documentation](https://vue-generators.gitbook.io/vue-generators/) under each specific component.
4748

4849
## Installation
4950

src/fields/abstractField.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default {
3131
return {
3232
errors: [],
3333
debouncedValidateFunc: null,
34-
debouncedFormatFunction: null
34+
debouncedFormatFunc: null
3535
};
3636
},
3737

src/fields/core/fieldRadios.vue

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template lang="pug">
22
.radio-list(:disabled="disabled", v-attributes="'wrapper'")
33
label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}", v-attributes="'label'")
4-
input(:id="getFieldID(schema, true)", type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", :required="schema.required", v-attributes="'input'")
4+
input(:id="getFieldID(schema, true)", type="radio", :disabled="isItemDisabled(item)", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses", :required="schema.required", v-attributes="'input'")
55
| {{ getItemName(item) }}
66

77
</template>
88

99
<script>
10-
import { isObject } from "lodash";
10+
import { isObject, isFunction, get as objGet } from "lodash";
1111
import abstractField from "../abstractField";
1212
1313
export default {
@@ -64,6 +64,16 @@ export default {
6464
isItemChecked(item) {
6565
let currentValue = this.getItemValue(item);
6666
return currentValue === this.value;
67+
},
68+
isItemDisabled(item) {
69+
if (this.disabled) {
70+
return true;
71+
}
72+
let disabled = objGet(item, "disabled", false);
73+
if (isFunction(disabled)) {
74+
return disabled(this.model);
75+
}
76+
return disabled;
6777
}
6878
}
6979
};

src/formGenerator.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
div.vue-form-generator(v-if='schema != null')
33
fieldset(v-if="schema.fields", :is='tag')
44
template(v-for='field in fields')
5-
form-group(v-if='fieldVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated")
5+
form-group(v-if='fieldVisible(field)', :vfg="vfg", :field="field", :errors="errors", :model="model", :options="options", @validated="onFieldValidated", @model-updated="onModelUpdated")
66

77
template(v-for='group in groups')
88
fieldset(:is='tag', :class='getFieldRowClasses(group)')

src/formGroup.vue

+5-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<div class="field-wrap">
1212
<component ref="child" :is="getFieldType(field)" :vfg="vfg" :disabled="fieldDisabled(field)" :model="model" :schema="field" :formOptions="options" @model-updated="onModelUpdated" @validated="onFieldValidated"></component>
1313
<div v-if="buttonVisibility(field)" class="buttons">
14-
<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label"></button>
14+
<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label" :type="getButtonType(btn)"></button>
1515
</div>
1616
</div>
1717

@@ -81,6 +81,10 @@ export default {
8181
getFieldType(fieldSchema) {
8282
return "field-" + fieldSchema.type;
8383
},
84+
// Get type of button, default to 'button'
85+
getButtonType(btn) {
86+
return objGet(btn, "type", "button");
87+
},
8488
// Child field executed validation
8589
onFieldValidated(res, errors, field) {
8690
this.$emit("validated", res, errors, field);

src/index.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,15 @@ const schema = require("./utils/schema.js");
33
const validators = require("./utils/validators.js").default;
44
const fieldComponents = require("./utils/fieldsLoader").default;
55
const abstractField = require("./fields/abstractField").default;
6-
const install = (Vue) => {
6+
const install = (Vue, options) => {
77
Vue.component("VueFormGenerator", module.exports.component);
8+
if (options && options.validators) {
9+
for (let key in options.validators) {
10+
if ({}.hasOwnProperty.call(options.validators, key)) {
11+
validators[key] = options.validators[key];
12+
}
13+
}
14+
}
815
};
916

1017
module.exports = {

0 commit comments

Comments
 (0)