diff --git a/dev/schema.js b/dev/schema.js
index 200eb499..237665a9 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -198,6 +198,15 @@ module.exports = {
styleClasses: "half-width",
validator: validators.required
}, {
+ type: "color",
+ label: "Color (basic)",
+ model: "favoriteColor",
+ required: true,
+ colorOptions: {
+ //preferredFormat: "rgb"
+ },
+ validator: validators.required
+ }, {
type: "spectrum",
label: "Color (spectrum field)",
model: "favoriteColor",
diff --git a/dist/vue-form-generator.css b/dist/vue-form-generator.css
new file mode 100644
index 00000000..caf9508d
--- /dev/null
+++ b/dist/vue-form-generator.css
@@ -0,0 +1,495 @@
+/**
+ * vue-form-generator v0.3.0
+ * https://github.com/icebob/vue-form-generator
+ * Released under the MIT License.
+ */
+
+fieldset.vue-form-generator input, fieldset.vue-form-generator select, fieldset.vue-form-generator textarea {
+ border-radius: 4px;
+ border: 1px solid #BBB;
+ padding: 2px 5px; }
+
+fieldset.vue-form-generator span.help {
+ margin-left: 0.3em;
+ position: relative;
+ /* This bridges the gap so you can mouse into the tooltip without it disappearing */
+ /* CSS Triangles - see Trevor's post */
+ /*.helpText:after {
+ border-left: solid transparent 10px;
+ border-right: solid transparent 10px;
+ border-top: solid #1496bb 10px;
+ bottom: -10px;
+ content: " ";
+ height: 0;
+ left: 50%;
+ margin-left: -13px;
+ position: absolute;
+ width: 0;
+ }*/ }
+ fieldset.vue-form-generator span.help .helpText {
+ background-color: #444;
+ bottom: 30px;
+ color: #fff;
+ display: block;
+ left: 0px;
+ opacity: 0;
+ padding: 20px;
+ pointer-events: none;
+ position: absolute;
+ text-align: justify;
+ width: 300px;
+ -webkit-transition: all .25s ease-out;
+ transition: all .25s ease-out;
+ box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
+ border-radius: 6px; }
+ fieldset.vue-form-generator span.help .helpText a {
+ font-weight: bold;
+ text-decoration: underline; }
+ fieldset.vue-form-generator span.help .helpText:before {
+ bottom: -20px;
+ content: " ";
+ display: block;
+ height: 20px;
+ left: 0;
+ position: absolute;
+ width: 100%; }
+ fieldset.vue-form-generator span.help:hover .helpText {
+ opacity: 1;
+ pointer-events: auto;
+ -webkit-transform: translateY(0px);
+ transform: translateY(0px); }
+
+fieldset.vue-form-generator .field-wrap {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; }
+ fieldset.vue-form-generator .field-wrap .buttons {
+ white-space: nowrap; }
+ fieldset.vue-form-generator .field-wrap .buttons button {
+ display: inline-block;
+ margin: 0 2px; }
+
+fieldset.vue-form-generator .hint {
+ font-style: italic;
+ font-size: 0.8em; }
+
+fieldset.vue-form-generator .form-group {
+ display: inline-block;
+ vertical-align: top;
+ width: 100%;
+ margin-bottom: 1rem; }
+ fieldset.vue-form-generator .form-group label {
+ font-weight: 400; }
+ fieldset.vue-form-generator .form-group.featured label {
+ font-weight: bold; }
+ fieldset.vue-form-generator .form-group.required label:after {
+ content: "*";
+ font-weight: normal;
+ color: Red;
+ position: absolute;
+ padding-left: 0.2em;
+ font-size: 1em; }
+ fieldset.vue-form-generator .form-group.disabled label {
+ color: #666;
+ font-style: italic; }
+ fieldset.vue-form-generator .form-group.error input:not([type="checkbox"]), fieldset.vue-form-generator .form-group.error textarea, fieldset.vue-form-generator .form-group.error select {
+ border: 1px solid red;
+ background-color: rgba(255, 0, 0, 0.15); }
+ fieldset.vue-form-generator .form-group.error .errors {
+ color: red;
+ font-size: 0.80em; }
+ fieldset.vue-form-generator .form-group.error .errors span {
+ display: block;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAiklEQVR4Xt2TMQoCQQxF3xdhu72MpZU3GU/meBFLOztPYrVWsQmEWSaMsIXgK8P8RyYkMjO2sAN+K9gTIAmDAlzoUzE7p4IFytvDCQWJKSStYB2efcAvqZFM0BcstMx5naSDYFzfLhh/4SmRM+6Agw/xIX0tKEDFufeDNRUc4XqLRz3qabVIf3BMHwl6Ktexn3nmAAAAAElFTkSuQmCC");
+ background-repeat: no-repeat;
+ padding-left: 17px;
+ padding-top: 0px;
+ margin-top: 0.2em;
+ font-weight: 600; }
+.vue-form-generator .field-checkbox {
+ margin-left: 12px; }
+.listbox, .dropList {
+ height: auto;
+ max-height: 150px;
+ overflow: auto; }
+ .listbox .list-row label, .dropList .list-row label {
+ font-weight: initial; }
+ .listbox .list-row input, .dropList .list-row input {
+ margin-right: 0.3em; }
+
+.combobox {
+ height: initial;
+ overflow: hidden; }
+ .combobox .mainRow {
+ cursor: pointer;
+ position: relative; }
+ .combobox .mainRow .arrow {
+ position: absolute;
+ right: -6px;
+ top: 4px;
+ width: 16px;
+ height: 16px;
+ -webkit-transform: rotate(0deg);
+ transform: rotate(0deg);
+ -webkit-transition: -webkit-transform 0.5s;
+ transition: -webkit-transform 0.5s;
+ transition: transform 0.5s;
+ transition: transform 0.5s, -webkit-transform 0.5s;
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=");
+ background-repeat: no-repeat; }
+ .combobox .mainRow.expanded .arrow {
+ -webkit-transform: rotate(-180deg);
+ transform: rotate(-180deg); }
+ .combobox .dropList {
+ -webkit-transition: height 0.5s;
+ transition: height 0.5s; }
+.vue-form-generator .field-color .helper {
+ margin-left: 0.3em; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.vue-form-generator .field-image.wrapper {
+ width: 100%; }
+
+.vue-form-generator .field-image .preview {
+ position: relative;
+ margin-top: 5px;
+ height: 100px;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center center;
+ border: 1px solid #ccc;
+ border-radius: 3px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); }
+ .vue-form-generator .field-image .preview .remove {
+ /*background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAXUlEQVR42u2SwQoAIAhD88vVLy8KBlaS0i1oJwP3piGVg0Skmpq8HjqZrWl9uwCbGAmwKYGZs/6iqgMyAdJuM8W2QmYKpLt/0AG9ASCv/oAnANd3AEjmAlFT1BypAV+PnRH5YehvAAAAAElFTkSuQmCC');
+ width: 16px;
+ height: 16px;
+ */
+ font-size: 1.2em;
+ position: absolute;
+ right: 0.2em;
+ bottom: 0.2em;
+ opacity: 0.7; }
+ .vue-form-generator .field-image .preview .remove:hover {
+ opacity: 1.0;
+ cursor: pointer; }
+.vue-form-generator .field-label {
+ display: block;
+ width: 100%;
+ margin-left: 12px; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.vue-form-generator .field-range input {
+ width: 100%; }
+
+.vue-form-generator .field-range .helpText {
+ margin: auto 0.5em; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.vue-form-generator .field-selectEx .bootstrap-select .dropdown-menu li.selected .text {
+ font-weight: bold; }
+.vue-form-generator .field-slider .irs {
+ width: 100%; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+.vue-form-generator .field-staticMap img {
+ display: block;
+ width: auto;
+ max-width: 100%; }
+.vue-form-generator .field-submit input {
+ width: 100%; }
+.vue-form-generator .field-switch {
+ /* Transition
+ ========================== */ }
+ .vue-form-generator .field-switch .field-wrap label {
+ position: relative;
+ display: block;
+ vertical-align: top;
+ width: 120px;
+ height: 30px;
+ padding: 3px;
+ margin: 0 10px 10px 0;
+ background: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
+ background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
+ background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
+ border-radius: 18px;
+ box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
+ cursor: pointer; }
+ .vue-form-generator .field-switch input {
+ position: absolute;
+ top: 0;
+ left: 0;
+ opacity: 0; }
+ .vue-form-generator .field-switch .label {
+ position: relative;
+ display: block;
+ height: inherit;
+ font-size: 10px;
+ text-transform: uppercase;
+ background: #eceeef;
+ border-radius: inherit;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15); }
+ .vue-form-generator .field-switch .label:before, .vue-form-generator .field-switch .label:after {
+ position: absolute;
+ top: 50%;
+ margin-top: -.5em;
+ line-height: 1;
+ -webkit-transition: inherit;
+ transition: inherit; }
+ .vue-form-generator .field-switch .label:before {
+ content: attr(data-off);
+ right: 11px;
+ color: #aaaaaa;
+ text-shadow: 0 1px rgba(255, 255, 255, 0.5); }
+ .vue-form-generator .field-switch .label:after {
+ content: attr(data-on);
+ left: 11px;
+ color: #FFFFFF;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.2);
+ opacity: 0; }
+ .vue-form-generator .field-switch input:checked ~ .label {
+ background: #E1B42B;
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); }
+ .vue-form-generator .field-switch input:checked ~ .label:before {
+ opacity: 0; }
+ .vue-form-generator .field-switch input:checked ~ .label:after {
+ opacity: 1; }
+ .vue-form-generator .field-switch .handle {
+ position: absolute;
+ top: 4px;
+ left: 4px;
+ width: 28px;
+ height: 28px;
+ background: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
+ background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
+ background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
+ border-radius: 100%;
+ box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2); }
+ .vue-form-generator .field-switch .handle:before {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -6px 0 0 -6px;
+ width: 12px;
+ height: 12px;
+ background: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
+ background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
+ background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
+ border-radius: 6px;
+ box-shadow: inset 0 1px rgba(0, 0, 0, 0.02); }
+ .vue-form-generator .field-switch input:checked ~ .handle {
+ left: 88px;
+ left: calc(100% - 32px);
+ box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); }
+ .vue-form-generator .field-switch .label, .vue-form-generator .field-switch .handle {
+ -webkit-transition: all 0.3s ease;
+ transition: all 0.3s ease; }
+.vue-form-generator .field-text input {
+ width: 100%; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/dist/vue-form-generator.js b/dist/vue-form-generator.js
index d31d76ef..2cb50e7e 100644
--- a/dist/vue-form-generator.js
+++ b/dist/vue-form-generator.js
@@ -87,8 +87,8 @@ return /******/ (function(modules) { // webpackBootstrap
module.exports = {
component: __webpack_require__(1),
- schema: __webpack_require__(276),
- validators: __webpack_require__(277),
+ schema: __webpack_require__(254),
+ validators: __webpack_require__(255),
install: function install(Vue) {
Vue.component("VueFormGenerator", module.exports.component);
@@ -101,12 +101,12 @@ return /******/ (function(modules) { // webpackBootstrap
var __vue_script__, __vue_template__
__webpack_require__(2)
- __vue_script__ = __webpack_require__(6)
+ __vue_script__ = __webpack_require__(4)
if (__vue_script__ &&
__vue_script__.__esModule &&
Object.keys(__vue_script__).length > 1) {
console.warn("[vue-loader] src\\formGenerator.vue: named exports in *.vue files are ignored.")}
- __vue_template__ = __webpack_require__(275)
+ __vue_template__ = __webpack_require__(253)
module.exports = __vue_script__ || {}
if (module.exports.__esModule) module.exports = module.exports.default
if (__vue_template__) {
@@ -116,7 +116,7 @@ return /******/ (function(modules) { // webpackBootstrap
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
- var id = "_v-9c7f8788/formGenerator.vue"
+ var id = "_v-79fa53d4/formGenerator.vue"
if (!module.hot.data) {
hotAPI.createRecord(id, module.exports)
} else {
@@ -126,324 +126,13 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ },
/* 2 */
-/***/ function(module, exports, __webpack_require__) {
-
- // style-loader: Adds some css to the DOM by adding a
\ No newline at end of file
diff --git a/src/fields/fieldChecklist.vue b/src/fields/fieldChecklist.vue
index 9afb712d..a293d318 100644
--- a/src/fields/fieldChecklist.vue
+++ b/src/fields/fieldChecklist.vue
@@ -84,7 +84,7 @@
-
diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue
index 17fc716c..7933b9e8 100644
--- a/src/fields/fieldDateTime.vue
+++ b/src/fields/fieldDateTime.vue
@@ -55,8 +55,5 @@
-
diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue
index bd6f033f..285058c0 100644
--- a/src/fields/fieldEmail.vue
+++ b/src/fields/fieldEmail.vue
@@ -10,8 +10,5 @@
-
diff --git a/src/fields/fieldImage.vue b/src/fields/fieldImage.vue
index 5efd64d7..3ce53083 100644
--- a/src/fields/fieldImage.vue
+++ b/src/fields/fieldImage.vue
@@ -66,11 +66,11 @@
};
-
diff --git a/src/fields/fieldLabel.vue b/src/fields/fieldLabel.vue
index 64b06809..88d1935b 100644
--- a/src/fields/fieldLabel.vue
+++ b/src/fields/fieldLabel.vue
@@ -10,8 +10,8 @@
};
-
diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
index 6a041014..4c49faff 100644
--- a/src/fields/fieldNumber.vue
+++ b/src/fields/fieldNumber.vue
@@ -10,8 +10,5 @@
-
diff --git a/src/fields/fieldPassword.vue b/src/fields/fieldPassword.vue
index 49c58b78..cf0be568 100644
--- a/src/fields/fieldPassword.vue
+++ b/src/fields/fieldPassword.vue
@@ -10,8 +10,5 @@
};
-
diff --git a/src/fields/fieldRange.vue b/src/fields/fieldRange.vue
index ea3618ba..acd09c66 100644
--- a/src/fields/fieldRange.vue
+++ b/src/fields/fieldRange.vue
@@ -11,7 +11,8 @@
-
diff --git a/src/fields/fieldSelect.vue b/src/fields/fieldSelect.vue
index 309b093b..d1b49609 100644
--- a/src/fields/fieldSelect.vue
+++ b/src/fields/fieldSelect.vue
@@ -40,8 +40,5 @@
-
diff --git a/src/fields/fieldSelectEx.vue b/src/fields/fieldSelectEx.vue
index 0ed6c81a..3834c7be 100644
--- a/src/fields/fieldSelectEx.vue
+++ b/src/fields/fieldSelectEx.vue
@@ -56,7 +56,7 @@
diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue
index 45c2501b..da4cb095 100644
--- a/src/fields/fieldSpectrum.vue
+++ b/src/fields/fieldSpectrum.vue
@@ -36,5 +36,5 @@
-
diff --git a/src/fields/fieldStaticMap.vue b/src/fields/fieldStaticMap.vue
index 5f34e333..7d53a4e8 100644
--- a/src/fields/fieldStaticMap.vue
+++ b/src/fields/fieldStaticMap.vue
@@ -17,8 +17,8 @@
};
-
diff --git a/src/fields/fieldSwitch.vue b/src/fields/fieldSwitch.vue
index 63b6c87a..0c75fa9e 100644
--- a/src/fields/fieldSwitch.vue
+++ b/src/fields/fieldSwitch.vue
@@ -34,15 +34,16 @@
};
-
\ No newline at end of file
diff --git a/src/fields/fieldText.vue b/src/fields/fieldText.vue
index b172eb29..ff73d590 100644
--- a/src/fields/fieldText.vue
+++ b/src/fields/fieldText.vue
@@ -11,8 +11,8 @@
-
diff --git a/src/fields/fieldTextArea.vue b/src/fields/fieldTextArea.vue
index b84414c6..2fa32e3e 100644
--- a/src/fields/fieldTextArea.vue
+++ b/src/fields/fieldTextArea.vue
@@ -12,8 +12,5 @@
-
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
index ddeff89d..a1bc6c72 100644
--- a/src/formGenerator.vue
+++ b/src/formGenerator.vue
@@ -1,5 +1,5 @@
- fieldset(v-if="schema != null")
+ fieldset.vue-form-generator(v-if="schema != null")
.form-group(v-for="field in fields", v-if="fieldVisible(field)", :class="getFieldRowClasses(field)")
label {{ field.label }}
span.help(v-if="field.help")
@@ -162,7 +162,7 @@
$errorColor: lighten(#F00, 0%);
- fieldset {
+ fieldset.vue-form-generator {
input, select, textarea {
border-radius: 4px;
diff --git a/webpack.build.config.js b/webpack.build.config.js
index aa15f75e..14471b67 100644
--- a/webpack.build.config.js
+++ b/webpack.build.config.js
@@ -1,6 +1,7 @@
var webpack = require("webpack");
var version = require("./package.json").version;
var banner = "/**\n" + " * vue-form-generator v" + version + "\n" + " * https://github.com/icebob/vue-form-generator\n" + " * Released under the MIT License.\n" + " */\n";
+var ExtractTextPlugin = require("extract-text-webpack-plugin");
var loaders = [
{
@@ -33,13 +34,26 @@ module.exports = [
}),
new webpack.BannerPlugin(banner, {
raw: true
- })
+ }),
+ new ExtractTextPlugin('vue-form-generator.css'),
],
module: {
loaders: loaders
},
+ vue: {
+ loaders: {
+ css: ExtractTextPlugin.extract('css'),
+ postcss: ExtractTextPlugin.extract('css'),
+ // less: ExtractTextPlugin.extract('css!less'),
+ // sass: ExtractTextPlugin.extract('css!sass?indentedSyntax'),
+ sass: ExtractTextPlugin.extract('css!sass'),
+ // stylus: ExtractTextPlugin.extract('css!stylus'),
+ // styl: ExtractTextPlugin.extract('css!stylus')
+ }
+ },
+
resolve: {
packageAlias: 'browser'
}