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 @@