diff --git a/.gitignore b/.gitignore index 7c3d3f8f..5d1c8644 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ docs/_book/ npm-debug.log selenium-debug.log test/unit/coverage -test/e2e/reports \ No newline at end of file +test/e2e/reports +stats.json diff --git a/dev/index.html b/dev/index.html index 5987ae71..f6d32c4d 100644 --- a/dev/index.html +++ b/dev/index.html @@ -10,18 +10,27 @@ - + + + + - + + + - + + + + +
diff --git a/dev/schema.js b/dev/schema.js index 237665a9..3ae9c6f8 100644 --- a/dev/schema.js +++ b/dev/schema.js @@ -191,6 +191,39 @@ module.exports = { styleClasses: "half-width" //validator: validators.regexp }, { + type: "cleave", + label: "Mobile (Cleave.js field)", + model: "mobile", + cleaveOptions: { + // Credit Card + creditCard: false, + onCreditCardTypeChanged(type){ + console.log("onCreditCardTypeChanged", type); + }, + // Phone + phone: false, + phoneRegionCode: 'AU', + // Date + date: false, + datePattern: ['d', 'm', 'Y'], + // Numerals + numeral: false, + numeralThousandsGroupStyle: 'thousand', + numeralDecimalScale: 2, + numeralDecimalMark: '.', + // General + blocks: [0, 2, 3, 4], + delimiter: ' ', + delimiters: ['(', ') ', '-', '-'], + // prefix: '(', + numericOnly: true, + uppercase: false, + lowercase: false + }, + + styleClasses: "half-width", + validator: validators.required + }, { type: "masked", label: "Mobile (masked field)", model: "mobile", @@ -255,9 +288,57 @@ module.exports = { model.age = moment().year() - moment(newVal).year(); } - }, + }, { + type: "pikaday", + label: "DOB (pikaday field)", + model: "dob", + required: true, + placeholder: "User's birth of date", + min: moment("1900-01-01").toDate(), + max: moment("2016-01-01").toDate(), + validator: [ + validators.date + ], + pikadayOptions: { + bound: true, + position: 'bottom left', + reposition: true, + // container: , + format: 'YYYY-MM-DD HH:mm:ss', + // formatStrict: , + // defaultDate: , + // setDefaultDate: , + firstDay: 1, + // minDate: , + // maxDate: , + disableWeekends: false, + // disableDayFn: , + // yearRange: , + showWeekNumber: false, + isRTL: false, + i18n: { + previousMonth : 'Previous Month', + nextMonth : 'Next Month', + months : ['January','February','March','April','May','June','July','August','September','October','November','December'], + weekdays : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'], + weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'] + }, + // yearSuffix: , + showMonthAfterYear: false, + showDaysInNextAndPreviousMonths: false, + // numberOfMonths: , + // mainCalendar: , + theme: null, + // onSelect: , + // onOpen: , + // onClose: , + // onDraw: , + }, + onChanged(model, newVal, oldVal, field) { + model.age = moment().year() - moment(newVal).year(); + } - { + },{ type: "dateTime", label: "DT", model: "dt", @@ -298,6 +379,27 @@ module.exports = { valueOff: "male" }, + { + type: "noUiSlider", + label: "Rank (noUiSlider field)", + model: "rank", + multi: true, + min: 1, + max: 10, + required: true, + sliderOptions: { + // connect: "lower", // "lower", "upper", true, false + // margin: 2 //number + // limit: 2 //number + step:1, + // orientation:"horizontal", //"vertical", "horizontal" + // direction: "ltr", //"ltr", "rtl" + // tooltips: false, // false, true, formatter, array[formatter or false] + // animate: true, + }, + // validator: validators.integer + }, + { type: "slider", label: "Rank (slider field)", @@ -309,7 +411,7 @@ module.exports = { sliderOptions: { grid: true }, - validator: validators.integer + // validator: validators.integer }, { diff --git a/dist/vue-form-generator.css b/dist/vue-form-generator.css index 5a9c4da8..481dff4a 100644 --- a/dist/vue-form-generator.css +++ b/dist/vue-form-generator.css @@ -4,536 +4,4 @@ * Released under the MIT License. */ -fieldset.vue-form-generator .form-control { - display: block; - width: 100%; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } - -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 */ } - 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; - margin-left: 4px; } - fieldset.vue-form-generator .field-wrap button, fieldset.vue-form-generator .field-wrap input[type=submit] { - display: inline-block; - padding: 6px 12px; - margin: 0px; - font-size: 14px; - font-weight: normal; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - color: #333; - background-color: #fff; - border: 1px solid #ccc; - border-radius: 4px; } - fieldset.vue-form-generator .field-wrap button:not(:last-child), fieldset.vue-form-generator .field-wrap input[type=submit]:not(:last-child) { - margin-right: 4px; } - fieldset.vue-form-generator .field-wrap button:hover, fieldset.vue-form-generator .field-wrap input[type=submit]:hover { - color: #333; - background-color: #e6e6e6; - border-color: #adadad; } - fieldset.vue-form-generator .field-wrap button:active, fieldset.vue-form-generator .field-wrap input[type=submit]:active { - color: #333; - background-color: #d4d4d4; - border-color: #8c8c8c; - outline: 0; - box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); } - -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 input { - margin-left: 12px; } -.vue-form-generator .field-checklist .listbox, .vue-form-generator .field-checklist .dropList { - height: auto; - max-height: 150px; - overflow: auto; } - .vue-form-generator .field-checklist .listbox .list-row label, .vue-form-generator .field-checklist .dropList .list-row label { - font-weight: initial; } - .vue-form-generator .field-checklist .listbox .list-row input, .vue-form-generator .field-checklist .dropList .list-row input { - margin-right: 0.3em; } - -.vue-form-generator .field-checklist .combobox { - height: initial; - overflow: hidden; } - .vue-form-generator .field-checklist .combobox .mainRow { - cursor: pointer; - position: relative; } - .vue-form-generator .field-checklist .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; } - .vue-form-generator .field-checklist .combobox .mainRow.expanded .arrow { - -webkit-transform: rotate(-180deg); - transform: rotate(-180deg); } - .vue-form-generator .field-checklist .combobox .dropList { - -webkit-transition: height 0.5s; - transition: height 0.5s; } -.vue-form-generator .field-color input { - width: 60px; } - -.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 span { - 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 { - color: #fff !important; - background-color: #337ab7 !important; - border-color: #2e6da4 !important; } -.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: 0; - margin: 0 10px 10px 0; - border-radius: 15px; - 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: 1px; - left: 1px; - 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: 91px; - left: calc(100% - ($field-switch-height - 1px)); - 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; } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +fieldset.vue-form-generator .form-control{display:block;width:100%;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}fieldset.vue-form-generator span.help{margin-left:.3em;position:relative}fieldset.vue-form-generator span.help .helpText{background-color:#444;bottom:30px;color:#fff;display:block;left:0;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,.5);border-radius:6px}fieldset.vue-form-generator span.help .helpText a{font-weight:700;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(0);transform:translateY(0)}fieldset.vue-form-generator .field-wrap{display:-webkit-box;display:-ms-flexbox;display:flex}fieldset.vue-form-generator .field-wrap .buttons{white-space:nowrap;margin-left:4px}fieldset.vue-form-generator .field-wrap button,fieldset.vue-form-generator .field-wrap input[type=submit]{display:inline-block;padding:6px 12px;margin:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#333;background-color:#fff;border:1px solid #ccc;border-radius:4px}fieldset.vue-form-generator .field-wrap button:not(:last-child),fieldset.vue-form-generator .field-wrap input[type=submit]:not(:last-child){margin-right:4px}fieldset.vue-form-generator .field-wrap button:hover,fieldset.vue-form-generator .field-wrap input[type=submit]:hover{color:#333;background-color:#e6e6e6;border-color:#adadad}fieldset.vue-form-generator .field-wrap button:active,fieldset.vue-form-generator .field-wrap input[type=submit]:active{color:#333;background-color:#d4d4d4;border-color:#8c8c8c;outline:0;box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}fieldset.vue-form-generator .hint{font-style:italic;font-size:.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:700}fieldset.vue-form-generator .form-group.required label:after{content:"*";font-weight:400;color:red;position:absolute;padding-left:.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 select,fieldset.vue-form-generator .form-group.error textarea{border:1px solid red;background-color:rgba(255,0,0,.15)}fieldset.vue-form-generator .form-group.error .errors{color:red;font-size:.8em}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:0;margin-top:.2em;font-weight:600}.vue-form-generator .field-checkbox input{margin-left:12px}.vue-form-generator .field-checklist .dropList,.vue-form-generator .field-checklist .listbox{height:auto;max-height:150px;overflow:auto}.vue-form-generator .field-checklist .dropList .list-row label,.vue-form-generator .field-checklist .listbox .list-row label{font-weight:initial}.vue-form-generator .field-checklist .dropList .list-row input,.vue-form-generator .field-checklist .listbox .list-row input{margin-right:.3em}.vue-form-generator .field-checklist .combobox{height:initial;overflow:hidden}.vue-form-generator .field-checklist .combobox .mainRow{cursor:pointer;position:relative}.vue-form-generator .field-checklist .combobox .mainRow .arrow{position:absolute;right:-6px;top:4px;width:16px;height:16px;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;transition:transform .5s;transition:transform .5s,-webkit-transform .5s;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAGdJREFUOI3tzjsOwjAURNGDUqSgTxU5K2AVrJtswjUsgHSR0qdxAZZFPrS+3ZvRzBsqf9MUtBtazJk+oMe0VTriiZCFX8nbpENMgfARjsn74vKj5IFruhfc8d6zIF9S/Hyk5HS4spMVeFcOjszaOwMAAAAASUVORK5CYII=");background-repeat:no-repeat}.vue-form-generator .field-checklist .combobox .mainRow.expanded .arrow{-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}.vue-form-generator .field-checklist .combobox .dropList{-webkit-transition:height .5s;transition:height .5s}.vue-form-generator .field-color input{width:60px}.vue-form-generator .field-color .helper{margin-left:.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:50%;border:1px solid #ccc;border-radius:3px;box-shadow:inset 0 1px 1px rgba(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:.2em;bottom:.2em;opacity:.7}.vue-form-generator .field-image .preview .remove:hover{opacity:1;cursor:pointer}.vue-form-generator .field-label span{display:block;width:100%;margin-left:12px}.vue-form-generator .field-noUiSlider .field-wrap{display:block}.vue-form-generator .field-range input{width:100%}.vue-form-generator .field-range .helpText{margin:auto .5em}.vue-form-generator .field-selectEx .bootstrap-select .dropdown-menu li.selected .text{font-weight:700}.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{color:#fff!important;background-color:#337ab7!important;border-color:#2e6da4!important}.vue-form-generator .field-switch .field-wrap label{position:relative;display:block;vertical-align:top;width:120px;height:30px;padding:0;margin:0 10px 10px 0;border-radius:15px;box-shadow:inset 0 -1px #fff,inset 0 1px 1px rgba(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,.12),inset 0 0 2px rgba(0,0,0,.15)}.vue-form-generator .field-switch .label:after,.vue-form-generator .field-switch .label:before{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:#aaa;text-shadow:0 1px hsla(0,0%,100%,.5)}.vue-form-generator .field-switch .label:after{content:attr(data-on);left:11px;color:#fff;text-shadow:0 1px rgba(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,.15),inset 0 0 3px rgba(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:1px;left:1px;width:28px;height:28px;background:-webkit-linear-gradient(top,#fff 40%,#f0f0f0);background:linear-gradient(180deg,#fff 40%,#f0f0f0);background-image:-webkit-linear-gradient(top,#fff 40%,#f0f0f0);border-radius:100%;box-shadow:1px 1px 5px rgba(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,#eee,#fff);background:linear-gradient(180deg,#eee,#fff);background-image:-webkit-linear-gradient(top,#eee,#fff);border-radius:6px;box-shadow:inset 0 1px rgba(0,0,0,.02)}.vue-form-generator .field-switch input:checked~.handle{left:91px;left:calc(100% - ($field-switch-height - 1px));box-shadow:-1px 1px 5px rgba(0,0,0,.2)}.vue-form-generator .field-switch .handle,.vue-form-generator .field-switch .label{-webkit-transition:all .3s ease;transition:all .3s ease} \ No newline at end of file diff --git a/dist/vue-form-generator.js b/dist/vue-form-generator.js index fce0c694..eb7ec8cd 100644 --- a/dist/vue-form-generator.js +++ b/dist/vue-form-generator.js @@ -1,43714 +1,17 @@ -/** - * vue-form-generator v0.3.0 - * https://github.com/icebob/vue-form-generator - * Released under the MIT License. - */ - -(function webpackUniversalModuleDefinition(root, factory) { - if(typeof exports === 'object' && typeof module === 'object') - module.exports = factory(); - else if(typeof define === 'function' && define.amd) - define([], factory); - else if(typeof exports === 'object') - exports["VueFormGenerator"] = factory(); - else - root["VueFormGenerator"] = factory(); -})(this, function() { -return /******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; - -/******/ // The require function -/******/ function __webpack_require__(moduleId) { - -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) -/******/ return installedModules[moduleId].exports; - -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ exports: {}, -/******/ id: moduleId, -/******/ loaded: false -/******/ }; - -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); - -/******/ // Flag the module as loaded -/******/ module.loaded = true; - -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } - - -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; - -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; - -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; - -/******/ // Load entry module and return exports -/******/ return __webpack_require__(0); -/******/ }) -/************************************************************************/ -/******/ ((function(modules) { - // Check all modules for deduplicated modules - for(var i in modules) { - if(Object.prototype.hasOwnProperty.call(modules, i)) { - switch(typeof modules[i]) { - case "function": break; - case "object": - // Module can be created from a template - modules[i] = (function(_m) { - var args = _m.slice(1), fn = modules[_m[0]]; - return function (a,b,c) { - fn.apply(this, [a,b,c].concat(args)); - }; - }(modules[i])); - break; - default: - // Module is a copy of another module - modules[i] = modules[modules[i]]; - break; - } - } - } - return modules; -}([ -/* 0 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - module.exports = { - component: __webpack_require__(1), - schema: __webpack_require__(253), - validators: __webpack_require__(254), - - install: function install(Vue) { - Vue.component("VueFormGenerator", module.exports.component); - } - }; - -/***/ }, -/* 1 */ -/***/ function(module, exports, __webpack_require__) { - - var __vue_script__, __vue_template__ - __webpack_require__(2) - __vue_script__ = __webpack_require__(3) - 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__(252) - module.exports = __vue_script__ || {} - if (module.exports.__esModule) module.exports = module.exports.default - if (__vue_template__) { - (typeof module.exports === "function" ? (module.exports.options || (module.exports.options = {})) : module.exports).template = __vue_template__ - } - if (false) {(function () { module.hot.accept() - var hotAPI = require("vue-hot-reload-api") - hotAPI.install(require("vue"), false) - if (!hotAPI.compatible) return - var id = "_v-00e1475f/formGenerator.vue" - if (!module.hot.data) { - hotAPI.createRecord(id, module.exports) - } else { - hotAPI.update(id, module.exports, __vue_template__) - } - })()} - -/***/ }, -/* 2 */ -/***/ function(module, exports) { - - // removed by extract-text-webpack-plugin - -/***/ }, -/* 3 */ -/***/ function(module, exports, __webpack_require__) { - - "use strict"; - - Object.defineProperty(exports, "__esModule", { - value: true - }); - - var _vue = __webpack_require__(4); - - var _vue2 = _interopRequireDefault(_vue); - - var _lodash = __webpack_require__(5); - - function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - - var Fields = __webpack_require__(7); - var fieldComponents = {}; - (0, _lodash.each)(Fields.keys(), function (key) { - var compName = _vue2.default.util.classify(key.replace(/^\.\//, "").replace(/\.vue/, "")); - fieldComponents[compName] = Fields(key); - }); - - exports.default = { - components: fieldComponents, - - props: ["schema", "options", "model", "multiple", "isNewModel"], - - data: function data() { - return { - errors: [] }; - }, - - - computed: { - fields: function fields() { - var _this = this; - - var res = []; - if (this.schema) { - (0, _lodash.each)(this.schema.fields, function (field) { - if (!_this.multiple || field.multi === true) res.push(field); - }); - } - - return res; - } - }, - - watch: { - model: function model(newModel, oldModel) { - if (oldModel == newModel) return; - - if (this.options.validateAfterLoad === true && this.isNewModel !== true) this.validate();else this.clearValidationErrors(); - } - }, - - compiled: function compiled() { - if (this.options && this.options.validateAfterLoad === true && this.isNewModel !== true) this.validate();else this.clearValidationErrors(); - }, - - - methods: { - getFieldRowClasses: function getFieldRowClasses(field) { - var baseClasses = { - error: field.errors && field.errors.length > 0, - disabled: this.fieldDisabled(field), - readonly: field.readonly, - featured: field.featured, - required: field.required - }; - - if ((0, _lodash.isArray)(field.styleClasses)) { - (0, _lodash.each)(field.styleClasses, function (c) { - return baseClasses[c] = true; - }); - } else if ((0, _lodash.isString)(field.styleClasses)) { - baseClasses[field.styleClasses] = true; - } - - baseClasses["field-" + field.type] = true; - - return baseClasses; - }, - getFieldType: function getFieldType(fieldSchema) { - return "field-" + fieldSchema.type; - }, - fieldDisabled: function fieldDisabled(field) { - if ((0, _lodash.isFunction)(field.disabled)) return field.disabled(this.model); - - if ((0, _lodash.isNil)(field.disabled)) return false; - - return field.disabled; - }, - fieldVisible: function fieldVisible(field) { - if ((0, _lodash.isFunction)(field.visible)) return field.visible(this.model); - - if ((0, _lodash.isNil)(field.visible)) return true; - - return field.visible; - }, - validate: function validate() { - var _this2 = this; - - this.clearValidationErrors(); - - (0, _lodash.each)(this.$children, function (child) { - if ((0, _lodash.isFunction)(child.validate)) { - var err = child.validate(); - (0, _lodash.each)(err, function (err) { - _this2.errors.push({ - field: child.schema, - error: err - }); - }); - } - }); - - return this.errors.length == 0; - }, - clearValidationErrors: function clearValidationErrors() { - this.errors.splice(0); - - (0, _lodash.each)(this.$children, function (child) { - child.clearValidationErrors(); - }); - } - } - }; - -/***/ }, -/* 4 */ -/***/ function(module, exports, __webpack_require__) { - - /* WEBPACK VAR INJECTION */(function(global) {/*! +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VueFormGenerator=t():e.VueFormGenerator=t()}(this,function(){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}(function(e){for(var t in e)if(Object.prototype.hasOwnProperty.call(e,t))switch(typeof e[t]){case"function":break;case"object":e[t]=function(t){var n=t.slice(1),r=e[t[0]];return function(e,t,i){r.apply(this,[e,t,i].concat(n))}}(e[t]);break;default:e[t]=e[e[t]]}return e}([function(e,t,n){"use strict";e.exports={component:n(265),schema:n(133),validators:n(134),install:function(t){t.component("VueFormGenerator",e.exports.component)}}},function(e,t,n){(function(e){!function(t,n){e.exports=n()}(this,function(){"use strict";function t(){return mr.apply(null,arguments)}function r(e){mr=e}function i(e){return e instanceof Array||"[object Array]"===Object.prototype.toString.call(e)}function a(e){return"[object Object]"===Object.prototype.toString.call(e)}function s(e){var t;for(t in e)return!1;return!0}function o(e){return e instanceof Date||"[object Date]"===Object.prototype.toString.call(e)}function u(e,t){var n,r=[];for(n=0;n