From 38041f7c2ba6c248f4f0fa22832789531900e8e4 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Sun, 6 Feb 2022 19:57:52 +0100 Subject: [PATCH] adding --- dist/demo.js | 199 ++++++++++++++++++++++++++++++++--------- dist/index.html | 21 ++++- src/demo.js | 10 ++- src/formComponent.riot | 66 ++++++++++++++ src/formValidator.js | 7 +- 5 files changed, 251 insertions(+), 52 deletions(-) create mode 100644 src/formComponent.riot diff --git a/dist/demo.js b/dist/demo.js index c2f7e18..5addb29 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -1,10 +1,10 @@ /******/ (() => { // webpackBootstrap /******/ var __webpack_modules__ = ({ -/***/ "./src/field-error.riot": -/*!******************************!*\ - !*** ./src/field-error.riot ***! - \******************************/ +/***/ "./src/fieldError.riot": +/*!*****************************!*\ + !*** ./src/fieldError.riot ***! + \*****************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { "use strict"; @@ -176,9 +176,156 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "./src/FormValidator.js": +/***/ "./src/formComponent.riot": +/*!********************************!*\ + !*** ./src/formComponent.riot ***! + \********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var _formValidator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./formValidator.js */ "./src/formValidator.js"); + + + + +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({ + css: null, + + exports: { + state: + { + result: undefined + }, + + onMounted() + { + // creating formValidation + const formValidation = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.$('.form'), { + 'email': { + 'presence': true, + 'email': true + }, + 'password': { + 'presence': true + } + }, (event, data) => { + event.preventDefault() + + this.state.result = JSON.stringify(data) + this.update() + }) + } + }, + + template: ( + template, + expressionTypes, + bindingTypes, + getComponent + ) => template( + '
', + [ + { + type: bindingTypes.TAG, + getComponent: getComponent, + evaluate: _scope => 'field-error', + slots: [], + attributes: [], + redundantAttribute: 'expr2', + selector: '[expr2]' + }, + { + type: bindingTypes.TAG, + getComponent: getComponent, + evaluate: _scope => 'field-error', + slots: [], + attributes: [], + redundantAttribute: 'expr3', + selector: '[expr3]' + }, + { + type: bindingTypes.IF, + evaluate: _scope => _scope.state.result, + redundantAttribute: 'expr4', + selector: '[expr4]', + + template: template( + '
', + [ + { + redundantAttribute: 'expr5', + selector: '[expr5]', + + expressions: [ + { + type: expressionTypes.TEXT, + childNodeIndex: 0, + + evaluate: _scope => [ + _scope.state.result + ].join( + '' + ) + } + ] + } + ] + ) + } + ] + ), + + name: 'form-component' +}); + +/***/ }), + +/***/ "./src/demo.js": +/*!*********************!*\ + !*** ./src/demo.js ***! + \*********************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +"use strict"; +__webpack_require__.r(__webpack_exports__); +/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); +/* harmony import */ var _formValidator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./formValidator */ "./src/formValidator.js"); +/* harmony import */ var _fieldError_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fieldError.riot */ "./src/fieldError.riot"); +/* harmony import */ var _formComponent_riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./formComponent.riot */ "./src/formComponent.riot"); + + + + // register & mount riot component + +riot__WEBPACK_IMPORTED_MODULE_3__.register('field-error', _fieldError_riot__WEBPACK_IMPORTED_MODULE_1__["default"]); +riot__WEBPACK_IMPORTED_MODULE_3__.mount('field-error'); // creating formValidation + +var formValidation = new _formValidator__WEBPACK_IMPORTED_MODULE_0__["default"](document.querySelector('.form-html'), { + 'email': { + 'presence': true, + 'email': true + }, + 'password': { + 'presence': true + } +}, function (event, data) { + event.preventDefault(); // show message and content of data from form + + document.querySelector('#result .content').innerHTML = '

' + JSON.stringify(data) + '

'; + document.querySelector('#result').classList.remove('hidden'); +}); +riot__WEBPACK_IMPORTED_MODULE_3__.register('form-component', _formComponent_riot__WEBPACK_IMPORTED_MODULE_2__["default"]); +riot__WEBPACK_IMPORTED_MODULE_3__.mount('form-component'); + +/***/ }), + +/***/ "./src/formValidator.js": /*!******************************!*\ - !*** ./src/FormValidator.js ***! + !*** ./src/formValidator.js ***! \******************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { @@ -214,14 +361,12 @@ var FormValidator = /*#__PURE__*/function () { * @param {[type]} formSelector [description] * @param {[type]} constraits [description] */ - function FormValidator(formSelector, constraits, onSuccess) { + function FormValidator(formElement, constraits, onSuccess) { var _this = this; _classCallCheck(this, FormValidator); - // getting selector to find form-element - this.formSelector = formSelector; // constraits for validate.js - + // constraits for validate.js this.constraits = constraits; // adding onSuccess this._onSuccess = onSuccess; // if form not found @@ -231,7 +376,7 @@ var FormValidator = /*#__PURE__*/function () { } // get form and elements - this.form = document.querySelector(this.formSelector); // if form not found + this.form = formElement; // if form not found if (!this.form) { console.error('FormValidator: form not found!'); @@ -344,38 +489,6 @@ var FormValidator = /*#__PURE__*/function () { /***/ }), -/***/ "./src/demo.js": -/*!*********************!*\ - !*** ./src/demo.js ***! - \*********************/ -/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { - -"use strict"; -__webpack_require__.r(__webpack_exports__); -/* harmony import */ var riot__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! riot */ "./node_modules/riot/riot.esm.js"); -/* harmony import */ var _FormValidator__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FormValidator */ "./src/FormValidator.js"); -/* harmony import */ var _field_error_riot__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./field-error.riot */ "./src/field-error.riot"); - - - -riot__WEBPACK_IMPORTED_MODULE_2__.register('field-error', _field_error_riot__WEBPACK_IMPORTED_MODULE_1__["default"]); -riot__WEBPACK_IMPORTED_MODULE_2__.mount('field-error'); -var formValidation = new _FormValidator__WEBPACK_IMPORTED_MODULE_0__["default"]('form', { - 'email': { - 'presence': true, - 'email': true - }, - 'password': { - 'presence': true - } -}, function (event, data) { - event.preventDefault(); - document.querySelector('#result .content').innerHTML = '

' + JSON.stringify(data) + '

'; - document.querySelector('#result').classList.remove('hidden'); -}); - -/***/ }), - /***/ "./node_modules/form-serialize/index.js": /*!**********************************************!*\ !*** ./node_modules/form-serialize/index.js ***! diff --git a/dist/index.html b/dist/index.html index 475dd79..8515302 100644 --- a/dist/index.html +++ b/dist/index.html @@ -31,7 +31,12 @@
-
+ +

+ Form +

+ +
+ +
+
+
+ +

+ Form - Inside a Riot Component +

+ + +
+
+
+ diff --git a/src/demo.js b/src/demo.js index 62d24b9..afd5abc 100644 --- a/src/demo.js +++ b/src/demo.js @@ -1,14 +1,15 @@ import * as riot from 'riot' -import FormValidator from './FormValidator' +import FormValidator from './formValidator' import FieldError from './fieldError.riot' +import FormComponent from './formComponent.riot' // register & mount riot component riot.register('field-error', FieldError) riot.mount('field-error') // creating formValidation -const formValidation = new FormValidator('form', { +const formValidation = new FormValidator(document.querySelector('.form-html'), { 'email': { 'presence': true, 'email': true @@ -22,4 +23,7 @@ const formValidation = new FormValidator('form', { // show message and content of data from form document.querySelector('#result .content').innerHTML = '

' + JSON.stringify(data) + '

' document.querySelector('#result').classList.remove('hidden') -}) \ No newline at end of file +}) + +riot.register('form-component', FormComponent) +riot.mount('form-component') \ No newline at end of file diff --git a/src/formComponent.riot b/src/formComponent.riot new file mode 100644 index 0000000..146aa66 --- /dev/null +++ b/src/formComponent.riot @@ -0,0 +1,66 @@ + +
+ +
+ + +
+
+ + +
+ + + +
+
+
+ { state.result } +
+
+
+
+ + + \ No newline at end of file diff --git a/src/formValidator.js b/src/formValidator.js index 4805b9b..35dd1c6 100644 --- a/src/formValidator.js +++ b/src/formValidator.js @@ -17,11 +17,8 @@ class FormValidator * @param {[type]} formSelector [description] * @param {[type]} constraits [description] */ - constructor(formSelector, constraits, onSuccess) + constructor(formElement, constraits, onSuccess) { - // getting selector to find form-element - this.formSelector = formSelector - // constraits for validate.js this.constraits = constraits @@ -34,7 +31,7 @@ class FormValidator } // get form and elements - this.form = document.querySelector(this.formSelector) + this.form = formElement // if form not found if (!this.form) {