From 21c887668164fc27e2f4071c242fd47fa24a2bd6 Mon Sep 17 00:00:00 2001 From: Lionel Bijaoui Date: Mon, 8 Aug 2016 16:42:13 +0200 Subject: [PATCH 1/8] enhancement: extract styles to a `vue-form-generator.css` file. --- dist/vue-form-generator.css | 344 ++++ dist/vue-form-generator.js | 2779 ++++++++++---------------------- dist/vue-form-generator.min.js | 26 +- package.json | 1 + webpack.build.config.js | 16 +- 5 files changed, 1227 insertions(+), 1939 deletions(-) create mode 100644 dist/vue-form-generator.css diff --git a/dist/vue-form-generator.css b/dist/vue-form-generator.css new file mode 100644 index 00000000..e216507c --- /dev/null +++ b/dist/vue-form-generator.css @@ -0,0 +1,344 @@ +/** + * vue-form-generator v0.3.0 + * https://github.com/icebob/vue-form-generator + * Released under the MIT License. + */ + +fieldset input, fieldset select, fieldset textarea { + border-radius: 4px; + border: 1px solid #BBB; + padding: 2px 5px; } + +fieldset 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 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 span.help .helpText a { + font-weight: bold; + text-decoration: underline; } + fieldset span.help .helpText:before { + bottom: -20px; + content: " "; + display: block; + height: 20px; + left: 0; + position: absolute; + width: 100%; } + fieldset span.help:hover .helpText { + opacity: 1; + pointer-events: auto; + -webkit-transform: translateY(0px); + transform: translateY(0px); } + +fieldset .field-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + fieldset .field-wrap .buttons { + white-space: nowrap; } + fieldset .field-wrap .buttons button { + display: inline-block; + margin: 0 2px; } + +fieldset .hint { + font-style: italic; + font-size: 0.8em; } + +fieldset .form-group { + display: inline-block; + vertical-align: top; + width: 100%; + margin-bottom: 1rem; } + fieldset .form-group label { + font-weight: 400; } + fieldset .form-group.featured label { + font-weight: bold; } + fieldset .form-group.required label:after { + content: "*"; + font-weight: normal; + color: Red; + position: absolute; + padding-left: 0.2em; + font-size: 1em; } + fieldset .form-group.disabled label { + color: #666; + font-style: italic; } + fieldset .form-group.error input:not([type="checkbox"]), fieldset .form-group.error textarea, fieldset .form-group.error select { + border: 1px solid red; + background-color: rgba(255, 0, 0, 0.15); } + fieldset .form-group.error .errors { + color: red; + font-size: 0.80em; } + fieldset .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; } +input[type=checkbox][_v-2fdafcb6] { + margin-left: 12px; } +.listbox[_v-3254e498], .dropList[_v-3254e498] { + height: auto; + max-height: 150px; + overflow: auto; } + .listbox .list-row label[_v-3254e498], .dropList .list-row label[_v-3254e498] { + font-weight: initial; } + .listbox .list-row input[_v-3254e498], .dropList .list-row input[_v-3254e498] { + margin-right: 0.3em; } + +.combobox[_v-3254e498] { + height: initial; + overflow: hidden; } + .combobox .mainRow[_v-3254e498] { + cursor: pointer; + position: relative; } + .combobox .mainRow .arrow[_v-3254e498] { + 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[_v-3254e498] { + -webkit-transform: rotate(-180deg); + transform: rotate(-180deg); } + .combobox .dropList[_v-3254e498] { + -webkit-transition: height 0.5s; + transition: height 0.5s; } +span[_v-da15201e] { + margin-left: 0.3em; } +input[_v-6ef4e97d] { + width: 100%; } +input[_v-c97470ac] { + width: 100%; } +.wrapper[_v-2ee9a42e], input[_v-2ee9a42e] { + width: 100%; } + +.preview[_v-2ee9a42e] { + 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); } + .preview .remove[_v-2ee9a42e] { + /*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; } + .preview .remove[_v-2ee9a42e]:hover { + opacity: 1.0; + cursor: pointer; } +span[_v-0eace1fc] { + display: block; + width: 100%; + margin-left: 12px; } +input[_v-2b1174ed] { + width: 100%; } +input[_v-6a19b8ab] { + width: 100%; } +input[_v-6c65f47d] { + width: 100%; } +input[_v-1fd4066a] { + width: 100%; } + +.helpText[_v-1fd4066a] { + margin: auto 0.5em; } +select[_v-1ec600de] { + width: 100%; } +.bootstrap-select .dropdown-menu li.selected .text { + font-weight: bold; } +.irs { + width: 100%; } + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +img[_v-5915e81c] { + display: block; + width: auto; + max-width: 100%; } +input[_v-05b01dfa] { + width: 100%; } +label[_v-6cc6a716] { + 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; } + +input[_v-6cc6a716] { + position: absolute; + top: 0; + left: 0; + opacity: 0; } + +.label[_v-6cc6a716] { + 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); } + +.label[_v-6cc6a716]:before, .label[_v-6cc6a716]:after { + position: absolute; + top: 50%; + margin-top: -.5em; + line-height: 1; + -webkit-transition: inherit; + transition: inherit; } + +.label[_v-6cc6a716]:before { + content: attr(data-off); + right: 11px; + color: #aaaaaa; + text-shadow: 0 1px rgba(255, 255, 255, 0.5); } + +.label[_v-6cc6a716]:after { + content: attr(data-on); + left: 11px; + color: #FFFFFF; + text-shadow: 0 1px rgba(0, 0, 0, 0.2); + opacity: 0; } + +input:checked ~ .label[_v-6cc6a716] { + background: #E1B42B; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2); } + +input:checked ~ .label[_v-6cc6a716]:before { + opacity: 0; } + +input:checked ~ .label[_v-6cc6a716]:after { + opacity: 1; } + +.handle[_v-6cc6a716] { + 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); } + +.handle[_v-6cc6a716]: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); } + +input:checked ~ .handle[_v-6cc6a716] { + left: 94px; + box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2); } + +/* Transition +========================== */ +.label[_v-6cc6a716], .handle[_v-6cc6a716] { + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; } +input[_v-59b0db0f] { + width: 100%; } +textarea[_v-51662488] { + width: 100%; } diff --git a/dist/vue-form-generator.js b/dist/vue-form-generator.js index d31d76ef..07c0c03b 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 diff --git a/src/fields/fieldStaticMap.vue b/src/fields/fieldStaticMap.vue index 5f34e333..4196f8a3 100644 --- a/src/fields/fieldStaticMap.vue +++ b/src/fields/fieldStaticMap.vue @@ -17,7 +17,7 @@ }; - diff --git a/src/fields/fieldStaticMap.vue b/src/fields/fieldStaticMap.vue index 5f34e333..4196f8a3 100644 --- a/src/fields/fieldStaticMap.vue +++ b/src/fields/fieldStaticMap.vue @@ -17,7 +17,7 @@ }; - \ No newline at end of file diff --git a/src/fields/fieldColor.vue b/src/fields/fieldColor.vue index 307e5a19..698ec7c4 100644 --- a/src/fields/fieldColor.vue +++ b/src/fields/fieldColor.vue @@ -12,7 +12,7 @@ diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue index 58e771a4..7933b9e8 100644 --- a/src/fields/fieldDateTime.vue +++ b/src/fields/fieldDateTime.vue @@ -56,7 +56,4 @@ diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue index 2ebced04..285058c0 100644 --- a/src/fields/fieldEmail.vue +++ b/src/fields/fieldEmail.vue @@ -11,7 +11,4 @@ diff --git a/src/fields/fieldImage.vue b/src/fields/fieldImage.vue index 4508e47c..3ce53083 100644 --- a/src/fields/fieldImage.vue +++ b/src/fields/fieldImage.vue @@ -67,10 +67,10 @@ diff --git a/src/fields/fieldLabel.vue b/src/fields/fieldLabel.vue index 58c81488..88d1935b 100644 --- a/src/fields/fieldLabel.vue +++ b/src/fields/fieldLabel.vue @@ -11,7 +11,7 @@ diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue index 27c19a59..4c49faff 100644 --- a/src/fields/fieldNumber.vue +++ b/src/fields/fieldNumber.vue @@ -11,7 +11,4 @@ diff --git a/src/fields/fieldPassword.vue b/src/fields/fieldPassword.vue index 00512130..cf0be568 100644 --- a/src/fields/fieldPassword.vue +++ b/src/fields/fieldPassword.vue @@ -11,7 +11,4 @@ diff --git a/src/fields/fieldRange.vue b/src/fields/fieldRange.vue index fbf9296b..acd09c66 100644 --- a/src/fields/fieldRange.vue +++ b/src/fields/fieldRange.vue @@ -12,6 +12,7 @@ diff --git a/src/fields/fieldSelect.vue b/src/fields/fieldSelect.vue index f8d6dee5..d1b49609 100644 --- a/src/fields/fieldSelect.vue +++ b/src/fields/fieldSelect.vue @@ -41,7 +41,4 @@ 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/fieldStaticMap.vue b/src/fields/fieldStaticMap.vue index 4196f8a3..7d53a4e8 100644 --- a/src/fields/fieldStaticMap.vue +++ b/src/fields/fieldStaticMap.vue @@ -18,7 +18,7 @@ diff --git a/src/fields/fieldSwitch.vue b/src/fields/fieldSwitch.vue index 3789659f..49fa6f54 100644 --- a/src/fields/fieldSwitch.vue +++ b/src/fields/fieldSwitch.vue @@ -36,13 +36,14 @@ \ No newline at end of file diff --git a/src/fields/fieldText.vue b/src/fields/fieldText.vue index d827d24b..ff73d590 100644 --- a/src/fields/fieldText.vue +++ b/src/fields/fieldText.vue @@ -12,7 +12,7 @@ diff --git a/src/fields/fieldTextArea.vue b/src/fields/fieldTextArea.vue index 11ea1663..2fa32e3e 100644 --- a/src/fields/fieldTextArea.vue +++ b/src/fields/fieldTextArea.vue @@ -13,7 +13,4 @@ diff --git a/src/formGenerator.vue b/src/formGenerator.vue index ddeff89d..b31a6e8b 100644 --- a/src/formGenerator.vue +++ b/src/formGenerator.vue @@ -1,5 +1,5 @@