diff --git a/package.json b/package.json index fa81d54..36789c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@human-connection/styleguide", - "version": "0.5.16", + "version": "0.5.17", "private": false, "scripts": { "serve": "http-server ./docs -o -s", @@ -71,7 +71,8 @@ "authors": [ "appinteractive", "roschaefer", - "visualjerk" + "visualjerk", + "ulfgebhardt" ], "main": "./dist/system.umd.min.js", "files": [ diff --git a/src/system/components/data-input/Form/Form.vue b/src/system/components/data-input/Form/Form.vue index 780167e..958b26d 100755 --- a/src/system/components/data-input/Form/Form.vue +++ b/src/system/components/data-input/Form/Form.vue @@ -14,6 +14,8 @@ import Schema from 'async-validator' import cloneDeep from 'clone-deep' import dotProp from 'dot-prop' +// Disable warnings to console +Schema.warning = function() {} /** * Used for handling complex user input. @@ -72,11 +74,6 @@ export default { }, validate(cb) { const validator = new Schema(this.schema) - // Prevent validator from printing to console - // eslint-disable-next-line - const warn = console.warn - // eslint-disable-next-line - console.warn = () => {} validator.validate(this.newData, errors => { if (errors) { this.errors = errors.reduce((errorObj, error) => { @@ -87,8 +84,6 @@ export default { } else { this.errors = null } - // eslint-disable-next-line - console.warn = warn this.notify(this.newData, this.errors) if (!errors && cb && typeof cb === 'function') { cb() @@ -114,14 +109,24 @@ export default { }, async update(model, value) { dotProp.set(this.newData, model, value) + /** + * Fires after user input. + * Receives the current form data. + * The form data is not validated and can be invalid. + * This event is fired before the input-valid event. + * + * @event input + */ + await this.$emit('input', cloneDeep(this.newData)) this.validate(() => { /** * Fires after user input. * Receives the current form data. + * This is only called if the form data is successfully validated. * - * @event input + * @event input-valid */ - this.$emit('input', cloneDeep(this.newData)) + this.$emit('input-valid', cloneDeep(this.newData)) }) }, reset() { diff --git a/src/system/components/data-input/Form/demo.md b/src/system/components/data-input/Form/demo.md index da84f2e..c89eb68 100755 --- a/src/system/components/data-input/Form/demo.md +++ b/src/system/components/data-input/Form/demo.md @@ -52,6 +52,7 @@ Use a schema to provide validation for the form inputs. Use scoped slots to get v-model="formData" @submit="handleSubmit" @input="handleInput" + @input-valid="handleInputValid" @reset="handleReset" :schema="formSchema">