From a6165c86ae10df349bd0125e2446ba244504c5b3 Mon Sep 17 00:00:00 2001 From: Duncan Lock Date: Wed, 24 May 2017 19:39:41 -0700 Subject: [PATCH] Add support for schema.legend & field id prefixes * Add support for an optional legend for each schema/fieldset. Expects the schema to look something like this: ``` schema: { legend: "Contact Details", fields: [ { type: "input", inputType: "text", label: "Name", model: "name" }, ... ``` * Add support for field id prefixes, at the form level. So you can add a `fieldIdPrefix: 'prefix_here_'` to your `formOptions` and this will be prepended to _all_ field id's. --- dev/multipleforms/app.vue | 59 ++++++++++++++++++++++++++++++++++++ dev/multipleforms/index.html | 12 ++++++++ dev/multipleforms/main.js | 9 ++++++ src/fields/abstractField.js | 4 +-- src/formGenerator.vue | 8 +++++ webpack.dev.config.js | 17 ++++++----- 6 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 dev/multipleforms/app.vue create mode 100644 dev/multipleforms/index.html create mode 100644 dev/multipleforms/main.js diff --git a/dev/multipleforms/app.vue b/dev/multipleforms/app.vue new file mode 100644 index 00000000..2a1e7a77 --- /dev/null +++ b/dev/multipleforms/app.vue @@ -0,0 +1,59 @@ + + + diff --git a/dev/multipleforms/index.html b/dev/multipleforms/index.html new file mode 100644 index 00000000..3e4ca015 --- /dev/null +++ b/dev/multipleforms/index.html @@ -0,0 +1,12 @@ + + + + + vue-form-generator multiple forms demo + + +
+
+ + + diff --git a/dev/multipleforms/main.js b/dev/multipleforms/main.js new file mode 100644 index 00000000..88e4ffc5 --- /dev/null +++ b/dev/multipleforms/main.js @@ -0,0 +1,9 @@ +import Vue from "vue"; +import VueFormGenerator from "../../src"; +Vue.use(VueFormGenerator); + +import App from './app.vue'; + +new Vue({ + ...App +}).$mount('#app'); \ No newline at end of file diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js index 0600cd92..e4c8080f 100644 --- a/src/fields/abstractField.js +++ b/src/fields/abstractField.js @@ -167,10 +167,10 @@ export default { // then slugify it. if (typeof schema.id !== "undefined") { // If an ID's been explicitly set, use it unchanged - return schema.id; + return schema.idPrefix + schema.id; } else { // Return the slugified version of either: - return (schema.inputName || schema.label || schema.model) + return schema.idPrefix + (schema.inputName || schema.label || schema.model) // NB: This is a very simple, conservative, slugify function, // avoiding extra dependencies. .toString() diff --git a/src/formGenerator.vue b/src/formGenerator.vue index cb111129..13039ade 100644 --- a/src/formGenerator.vue +++ b/src/formGenerator.vue @@ -1,6 +1,7 @@