Compare commits

..

No commits in common. 'main' and 'develop' have entirely different histories.

@ -1,4 +1,4 @@
# Tiny Components - Validator
# Tiny Validator
Created with [Riot.js](https://riot.js.org)
@ -10,13 +10,13 @@ For Validation this Component uses [Validate.js](https://validatejs.org/)
## Install
```bash
npm install @tiny-components/validator --save
npm install tiny-validator --save
```
## You can use it like this
## How to use
```javascript
<form class="form" onsubmit={ (event) => ( state.validator.submit(event) ) }>>
<form onsubmit={ (event) => { state.validator.handle(event) }} novalidate>
<div class="field">
<label>
email
@ -38,51 +38,17 @@ npm install @tiny-components/validator --save
import Validator from './validator.js'
export default {
state: {
validator: { }
},
onBeforeMount() {
// creating formValidator
this.state.validator = new FormValidator(this.$('.form'), {
'email': {
'presence': true,
'email': true
this.state.validator = new Validator({
email: {
presence: true
email: true
},
'password': {
'presence': true
password: {
presence: true
}
})
// adding on success
this.state.validator.onSuccess((event, data) => {
this.handleSuccess(event, data)
})
// adding on error
this.state.validator.onError((event, errors, data) => {
this.handleError(event, errors, data)
})
},
/**
*
*/
handleSuccess(event, data)
{
event.preventDefault()
this.update()
},
/**
*
*/
handleError(event, errors, data)
{
this.update()
}, this)
}
}
</script>
```

File diff suppressed because it is too large Load Diff

@ -10,7 +10,7 @@
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => __WEBPACK_DEFAULT_EXPORT__
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
css: null,
@ -185,7 +185,7 @@ __webpack_require__.r(__webpack_exports__);
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => __WEBPACK_DEFAULT_EXPORT__
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var _formValidator_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./formValidator.js */ "./src/formValidator.js");
@ -205,7 +205,7 @@ __webpack_require__.r(__webpack_exports__);
onMounted()
{
// creating formValidator
this.state.validator = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__.default(this.$('.form'), {
this.state.validator = new _formValidator_js__WEBPACK_IMPORTED_MODULE_0__["default"](this.$('.form'), {
'email': {
'presence': true,
'email': true
@ -263,7 +263,7 @@ __webpack_require__.r(__webpack_exports__);
bindingTypes,
getComponent
) => template(
'<div><form expr2="expr2" class="form" novalidate method="post"><div class="field-group"><label class="field-label">\n email\n <input type="email" class="field-text" name="email"/></label><field-error expr3="expr3" name="email"></field-error></div><div class="field-group"><label class="field-label">\n password\n <input type="password" class="field-text" name="password"/></label><field-error expr4="expr4" name="password"></field-error></div><button class="button" type="submit">\n Send\n </button></form><div expr5="expr5" class="loading"></div><div expr6="expr6"></div></div>',
'<div><form expr2="expr2" class="form" novalidate method="post"><div class="field-group"><label class="field-label">\n email\n <input type="email" class="field-text" name="email"/></label><field-error expr3="expr3" name="email"></field-error></div><div class="field-group"><label class="field-label">\n password\n <input type="password" class="field-text" name="password"/></label><field-error expr4="expr4" name="password"></field-error></div><button class="button" type="submit">\n Send\n </button></form><div expr5="expr5"></div></div>',
[
{
redundantAttribute: 'expr2',
@ -297,23 +297,12 @@ __webpack_require__.r(__webpack_exports__);
},
{
type: bindingTypes.IF,
evaluate: _scope => _scope.state.isLoading,
evaluate: _scope => _scope.state.result,
redundantAttribute: 'expr5',
selector: '[expr5]',
template: template(
'<span></span><span></span><span></span>',
[]
)
},
{
type: bindingTypes.IF,
evaluate: _scope => _scope.state.result,
redundantAttribute: 'expr6',
selector: '[expr6]',
template: template(
'<div class="panel__body"><div expr7="expr7" class="content m-bottom-last-child-0"> </div></div>',
'<div class="panel__body"><div expr6="expr6" class="content m-bottom-last-child-0"> </div></div>',
[
{
expressions: [
@ -331,8 +320,8 @@ __webpack_require__.r(__webpack_exports__);
]
},
{
redundantAttribute: 'expr7',
selector: '[expr7]',
redundantAttribute: 'expr6',
selector: '[expr6]',
expressions: [
{
@ -375,10 +364,10 @@ __webpack_require__.r(__webpack_exports__);
// register & mount riot component
riot__WEBPACK_IMPORTED_MODULE_3__.register('field-error', _fieldError_riot__WEBPACK_IMPORTED_MODULE_1__.default);
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'), {
var formValidation = new _formValidator__WEBPACK_IMPORTED_MODULE_0__["default"](document.querySelector('.form-html'), {
'email': {
'presence': true,
'email': true
@ -393,7 +382,7 @@ formValidation.onSuccess(function (event, data) {
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>';
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__.register('form-component', _formComponent_riot__WEBPACK_IMPORTED_MODULE_2__["default"]);
riot__WEBPACK_IMPORTED_MODULE_3__.mount('form-component');
/***/ }),
@ -407,7 +396,7 @@ riot__WEBPACK_IMPORTED_MODULE_3__.mount('form-component');
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => __WEBPACK_DEFAULT_EXPORT__
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! validate.js */ "./node_modules/validate.js/validate.js");
/* harmony import */ var validate_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(validate_js__WEBPACK_IMPORTED_MODULE_0__);
@ -417,7 +406,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@ -500,17 +489,6 @@ var FormValidator = /*#__PURE__*/function () {
// adding onSuccess
this._onSuccess = _onSuccess;
}
/**
*
* @param {function} onError
*
*/
}, {
key: "onBeforeSubmit",
value: function onBeforeSubmit(_onBeforeSubmit) {
this._onBeforeSubmit = _onBeforeSubmit;
}
/**
* handle submit
*
@ -531,12 +509,7 @@ var FormValidator = /*#__PURE__*/function () {
var options = {
fullMessages: false
};
if (this._onBeforeSubmit) {
this._onBeforeSubmit();
} // check form and getting errors
}; // check form and getting errors
validate_js__WEBPACK_IMPORTED_MODULE_0___default().async(data, this.constraits, options).then(function () {
_this2._onSuccess(event, data);
@ -908,17 +881,17 @@ __webpack_require__.r(__webpack_exports__);
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "__": () => /* binding */ __,
/* harmony export */ "component": () => /* binding */ component,
/* harmony export */ "install": () => /* binding */ install,
/* harmony export */ "mount": () => /* binding */ mount,
/* harmony export */ "pure": () => /* binding */ pure,
/* harmony export */ "register": () => /* binding */ register,
/* harmony export */ "uninstall": () => /* binding */ uninstall,
/* harmony export */ "unmount": () => /* binding */ unmount,
/* harmony export */ "unregister": () => /* binding */ unregister,
/* harmony export */ "version": () => /* binding */ version,
/* harmony export */ "withTypes": () => /* binding */ withTypes
/* harmony export */ "__": () => (/* binding */ __),
/* harmony export */ "component": () => (/* binding */ component),
/* harmony export */ "install": () => (/* binding */ install),
/* harmony export */ "mount": () => (/* binding */ mount),
/* harmony export */ "pure": () => (/* binding */ pure),
/* harmony export */ "register": () => (/* binding */ register),
/* harmony export */ "uninstall": () => (/* binding */ uninstall),
/* harmony export */ "unmount": () => (/* binding */ unmount),
/* harmony export */ "unregister": () => (/* binding */ unregister),
/* harmony export */ "version": () => (/* binding */ version),
/* harmony export */ "withTypes": () => (/* binding */ withTypes)
/* harmony export */ });
/* Riot v6.1.2, @license MIT */
/**
@ -4701,8 +4674,9 @@ const __ = {
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(__webpack_module_cache__[moduleId]) {
/******/ return __webpack_module_cache__[moduleId].exports;
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
@ -4724,9 +4698,6 @@ const __ = {
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/******/ // the startup function
/******/ // It's empty as some runtime module handles the default behavior
/******/ __webpack_require__.x = x => {}
/************************************************************************/
/******/ /* webpack/runtime/amd define */
/******/ (() => {
@ -4735,13 +4706,45 @@ const __ = {
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => module['default'] :
/******/ () => module;
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
@ -4761,7 +4764,7 @@ const __ = {
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
@ -4790,15 +4793,12 @@ const __ = {
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // Promise = chunk loading, 0 = chunk loaded
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "/example/example": 0
/******/ "/example/example": 0,
/******/ "example/example": 0
/******/ };
/******/
/******/ var deferredModules = [
/******/ ["./src/example.js"],
/******/ ["./src/example.scss"]
/******/ ];
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
@ -4809,73 +4809,46 @@ const __ = {
/******/
/******/ // no HMR manifest
/******/
/******/ var checkDeferredModules = x => {};
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var [chunkIds, moreModules, runtime, executeModules] = data;
/******/ var [chunkIds, moreModules, runtime] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0, resolves = [];
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ resolves.push(installedChunks[chunkId][0]);
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) runtime(__webpack_require__);
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ while(resolves.length) {
/******/ resolves.shift()();
/******/ }
/******/
/******/ // add entry modules from loaded chunk to deferred list
/******/ if(executeModules) deferredModules.push.apply(deferredModules, executeModules);
/******/
/******/ // run deferred modules when all chunks ready
/******/ return checkDeferredModules();
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = self["webpackChunk_tiny_components_validator"] = self["webpackChunk_tiny_components_validator"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/
/******/ function checkDeferredModulesImpl() {
/******/ var result;
/******/ for(var i = 0; i < deferredModules.length; i++) {
/******/ var deferredModule = deferredModules[i];
/******/ var fulfilled = true;
/******/ for(var j = 1; j < deferredModule.length; j++) {
/******/ var depId = deferredModule[j];
/******/ if(installedChunks[depId] !== 0) fulfilled = false;
/******/ }
/******/ if(fulfilled) {
/******/ deferredModules.splice(i--, 1);
/******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
/******/ }
/******/ }
/******/ if(deferredModules.length === 0) {
/******/ __webpack_require__.x();
/******/ __webpack_require__.x = x => {};
/******/ }
/******/ return result;
/******/ }
/******/ var startup = __webpack_require__.x;
/******/ __webpack_require__.x = () => {
/******/ // reset startup function so it can be called again when more startup code is added
/******/ __webpack_require__.x = startup || (x => {});
/******/ return (checkDeferredModules = checkDeferredModulesImpl)();
/******/ };
/******/ })();
/******/
/************************************************************************/
/******/ // run startup
/******/ return __webpack_require__.x();
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ __webpack_require__.O(undefined, ["example/example"], () => (__webpack_require__("./src/example.js")))
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["example/example"], () => (__webpack_require__("./src/example.scss")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;

@ -0,0 +1,4 @@
{
"/example/example.js": "/example/example.js",
"/example/example.css": "/example/example.css"
}

25561
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -1,24 +1,25 @@
{
"name": "@tiny-components/validator",
"version": "0.3.0",
"version": "0.1.0",
"description": "Form Validation with Riotjs",
"repository": {
"type": "git",
"url": "git@git.node001.net:tiny-components/validator.git"
"url": "git@gitea.node001.net:tiny-components/validator.git"
},
"author": "Björn Hase <herrhase@node001.net>",
"license": "GPLV3",
"author": "Björn Hase",
"license": "MIT",
"dependencies": {
"@tiny-components/plain-ui": "^0.6.0",
"@tentakelfabrik/plain-ui": "^0.3.0",
"form-serialize": "^0.7.2",
"riot": "^10.1.4",
"riot": "^6.1.2",
"validate.js": "^0.13.1"
},
"devDependencies": {
"@riotjs/webpack-loader": "^10.0.0",
"@tiny-components/webpack": "^0.6.0"
},
"scripts": {
"build": "webpack --mode development --config webpack.config.js"
"@riotjs/compiler": "^6.1.3",
"@riotjs/webpack-loader": "^6.0.0",
"cross-env": "^7.0.3",
"laravel-mix": "^6.0.5",
"sass": "^1.32.0",
"sass-loader": "^12.4.0"
}
}

@ -1,6 +0,0 @@
{
"/js/spritemap.js": "/js/spritemap.js?version=b725f521ce46904ca4235a981dcc41cc",
"/symbol-defs.svg": "/symbol-defs.svg?version=286109f83fb513b8a93efe3ce8275708",
"/js/index.js": "/js/index.js?version=fb77e305492f2775d0e8190a850d8172",
"/css/styles.css": "/css/styles.css?version=20a3f6b9e3a6fee16ca52e289f00a5af"
}

@ -1,852 +0,0 @@
/*!**************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss ***!
\**************************************************************************************************************************************/
@charset "UTF-8";
@font-face {
font-family: "IBM Plex Mono";
src: url("IBMPlexMono.eot");
src: url("IBMPlexMono.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono.woff2") format("woff2"), url("IBMPlexMono.woff") format("woff"), url("IBMPlexMono.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("IBMPlexMono-Bold.eot");
src: url("IBMPlexMono-Bold.eot?#iefix") format("embedded-opentype"), url("IBMPlexMono-Bold.woff2") format("woff2"), url("IBMPlexMono-Bold.woff") format("woff"), url("IBMPlexMono-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}
/**
* functions
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* strip unit from value
*
* @param {mixed} $value
* @return {number}
*
*/
/**
*
*
* https://css-tricks.com/snippets/sass/str-replace-function/
*
*/
/**
* get value of key "default" in map
*
* @param {map} $value
* @return {boolean|unit}
*
*/
/**
* factor
*
*
*
* @param {integer} $x
* @return {float}
*
*/
/**
* mixins
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* Clear Floats
*
*
*
*/
/**
* clear styles from list
*
*
*/
/**
* media-queries as mixins
* based on breakpoints from variables
*
*
*
*/
/**
* Set property and his value for each Breakpoint
*
* (
* $md: 10px
* )
*
*
* @param {css} $property
* @param {map} $breakpoints
* @param {Boolean} $important [false]
*
*/
/**
* Set property and his value with an factor for each Breakpoint
*
* (
* $md: 10px
* )
*
* @param {css} $property
* @param {number} $factor
* @param {map} $breakpoints
* @param {Boolean} $important [false]
*
*/
/**
* Set font-size from Breakpoints, use for calculating difference from font-size and default font-size
*
* (
* $md: 1rem
* )
*
* @param {map} $breakpoints
* @param {unit} $font-size
* @param {unit} $default
* @param {Boolean} $important [false]
*
*/
/**
* adding overlay with z-index and color
*
* @param {z-index}
* @param {color}
*
*/
/**
* variables
*
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* grid
*
*/
:root {
--grid-columns: 12;
--grid-grid-spacing: 15px;
--grid-xs: 576px;
--grid-sm: 768px;
--grid-md: 992px;
--grid-lg: 1200px;
--grid-xlg: 1600px;
--grid-xxs-max: 575px;
--grid-xs-max: 767px;
--grid-sm-max: 991px;
--grid-md-max: 1199px;
--grid-lg-max: 1599px;
}
/**
* fonts
*
*/
/**
* colors
*
*
*/
/**
* margin
*
*/
/**
* padding
*
*/
/**
* border
*
*/
/**
* normalize
*
* Thanks to https://necolas.github.io/normalize.css/, use a lot from them
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
:root {
--body: #f9f9f9;
--text: #363636;
--text-contrast: #ffffff;
--primary: #3e3e3e;
--primary-contrast: #3e3e3e;
--active: #717171;
--active-contrast: #ffffff;
--link: #363636;
--link-hover: #d95959;
--danger: #d95959;
--danger-contrast: #ecacac;
--info: #0090d4;
--info-constrast: rgb(59, 192.1320754717, 255);
--success: #64ac64;
--success-contrast: rgb(166.4285714286, 207.5714285714, 166.4285714286);
--warning: #f0ad4e;
--warning-contrast: rgb(247.96875, 216.5625, 172.03125);
--background: #3e3e3e;
--background-contrast: #ffffff;
--background-alpha: rgba(0, 0, 0, 0.7);
--border: #3e3e3e;
--border-contrast: #ffffff;
--font-family: IBM Plex Mono, sans-serif;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
/**
* form elements
*
*
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
/**
* hr
*
*/
/**
* Content
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* Heading
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* add font-size for heading as class and element
*
*
*/
/**
* <span class="badge">
* A
* </span>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* Button
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
*
*
*/
/**
*
*
*/
/**
*
*
*/
/**
*
* fields
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* field-choice
*
*
*/
/**
* radio & checkbox
*
* <div class="field">
* <label for="field__checkbox__1" class="field__label">
* <input class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
* <svg class="icon field__choice__unchecked" aria-hidden="true">
* <use xlink:href="symbol-defs.svg#icon-minus"></use>
* </svg>
* <svg class="icon field__choice__checked" aria-hidden="true">
* <use xlink:href="symbol-defs.svg#icon-checked"></use>
* </svg>
* checkbox 1
* </label>
* </div>
*
*/
/**
*
*
*/
/**
* display error for fields
*
*/
/**
*
* <div class="group">
* <span class="group__item">
* A
* </span>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <div class="hero">
* <img src="image.png" alt="image" />
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
*
* tabs
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <div class="progress">
* <div class="progress__inner" style="width: 20%"></div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
*
* table
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <div class="bar">
* <div class="bar__start">
* </div>
* <div class="bar__main">
* </div>
* <div class="bar__end">
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <figure class="media-figure">
* <img class="media__img" src="https://via.placeholder.com/150" />
* <figcaption class="media-figure__caption">
* food truck yr franzen pabst
* </figcaption>
* </figure>
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <div class="loading">
* <span></span>
* <span></span>
* <span></span>
* </div>
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
@keyframes loading-animation {
0% {
height: 60px;
}
50% {
height: 40px;
}
100% {
height: 60px;
}
}
/**
* <div class="sidebar">
* <div class="sidebar__inner">
* <div class="sidebar__body">
* </div>
* <div class="sidebar__footer">
* </div>
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* <div class="toast-wrapper">
* <div class="toast">
* <div class="toast__icon">
* <svg class="icon fill-text-contrast" aria-hidden="true">
* <use xlink:href="/symbol-defs.svg#icon-warning"></use>
* </svg>
* </div>
* <div class="toast__body">
*
* </div>
* <div class="toast__button">
* <svg class="icon fill-text-contrast" aria-hidden="true">
* <use xlink:href="/symbol-defs.svg#icon-close"></use>
* </svg>
* </div>
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* masonry
*
* <div class="masonry">
* <div class="mansonry__iten">
*
* </div>
* </div>
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* slider
*
* <div class="slider">
* <div class="slider__inner">
* <div class="slider__item w-10"></div>
* </div>
* </div>
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* grid
*
* This Grid is mainly the Reflex Grid from Lee Gordon https://reflexgrid.com/, he has
* done a great work, for i few changes it was needed to integrated
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* grid: mixin
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* order class generation mixins
*
*/
/**
* offset class generation mixins
*
*/
/**
* modifier mixins
*
*/
/**
* justify-content
*
* Uses "text-align" for the fallback inline-block grid
* "text-align" is globally supported and works on all rows except the last
* "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
*
*/
/**
* Responsible Visibility
*
*/
/**
* Breakpoint viewport sizes and media queries
*
* Breakpoints are defined as a map of (name: minimum width), order from small to large:
* (xs: 576px, sm: 768px, md: 992px)
* The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
* Name of the next breakpoint, or null for the last breakpoint.
* >> breakpoint-next(sm) -> md
* >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
* >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
*
*/
/**
* Minimum breakpoint width. Null for the smallest (first) breakpoint.
* breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
*
*/
/**
* Media of at most the maximum breakpoint width. No query for the largest breakpoint.
* Makes the @content apply to the given breakpoint and narrower.
*
*/
/**
* Media between the breakpoint's minimum and maximum widths.
* No minimum for the smallest breakpoint, and no maximum for the largest one.
* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
*
*/
/**
* grid: helpers
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* flex-direction
*
*/
/**
* align items (cross axis)
*
*/
/**
* align content (cross axis)
*
*/
/**
* align-self
*
*/
/**
* justify-content (main axis)
*
*/
/**
* cosmetic grid modifiers
*
*/
/**
* col modifiers
*
*/
/**
* col-grid contents
*
*/
/**
* Responsive visibility modifiers
*
*/
/**
* grid generation
*
*
*/
/**
* col-auto
*
*
*/
/**
* order helpers generation
*
*
*/
/**
* offset helpers generation
*
*
*/
/**
* core
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* z-index
*
*
*/
/**
* floating
*
*
*/
/**
* position
*
*
*/
/**
*
*
*/
/**
*
*
*/
/**
* Sizing
*
* Width and Height Classes,
* Sizes with percentage will calculate with the Reflex Grid
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* mixin: sizing
*
*/
/**
* mixin: sizing for each breakpoint
*
*
*/
/**
* Spacing
*
* creates margin and padding for each direction and for each breakpont
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* mixin: spacing for single padding or margin
*
*
*/
/**
* mixin: spacing for each breakpoint
*
*
*/
/**
*
*
*
*/
/**
* colors
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* typography
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* font-sizes
*
*
*/
/**
* white-space
*
*
*/
/**
* visibility
*
*
* @author Björn Hase, me@herr-hase.wtf
* @license http://opensource.org/licenses/MIT The MIT License
* @link https://gitea.node001.net/tiny-components/plain-ui.git
*
*/
/**
* display
*
*
*/
/**
* for hidden-xs etc, show https://reflexgrid.com/#visibility-helpers
*
* @TODO full integration of reflexgrid will change this part
*
*/
/**
* Visibility
*
*/
/**
* Opacity
*
*
*/
/**
*
*
*/
/*# sourceMappingURL=styles.css.map */

File diff suppressed because one or more lines are too long

@ -1 +0,0 @@
(self.webpackChunk_tiny_components_validator=self.webpackChunk_tiny_components_validator||[]).push([["spritemap"],{"?4e0c"(){eval("{\n\n//# sourceURL=webpack://@tiny-components/validator/spritemap-dummy-module?\n}")}}]);

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 66 KiB

@ -1,5 +1,5 @@
@import
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
'../node_modules/@tentakelfabrik/plain-ui/src/scss/plain-ui';
.hidden {
display: none;

@ -20,12 +20,6 @@
</button>
</form>
<div class="loading" if={ state.isLoading }>
<span></span>
<span></span>
<span></span>
</div>
<div if={ state.result } class="panel color-text-contrast { state.class }">
<div class="panel__body">
<div class="content m-bottom-last-child-0">

@ -77,24 +77,6 @@ class FormValidator
this._onSuccess = onSuccess
}
/**
*
* @param {function} onError
*
*/
onBeforeSubmit(onBeforeSubmit)
{
this._onBeforeSubmit = onBeforeSubmit
}
/**
*
*/
setConstraits(rules)
{
this.rules = rules
}
/**
* handle submit
*
@ -114,10 +96,6 @@ class FormValidator
fullMessages: false
}
if (this._onBeforeSubmit) {
this._onBeforeSubmit()
}
// check form and getting errors
validate.async(data, this.constraits, options).then(
() => {
@ -194,4 +172,4 @@ class FormValidator
}
}
export default FormValidator
export default FormValidator

@ -1,6 +0,0 @@
@import
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
.hidden {
display: none;
}

@ -1,18 +0,0 @@
const tinyComponentsWebpack = require('@tiny-components/webpack')
const riotRules = require('@tiny-components/webpack/rules/riot')
module.exports = tinyComponentsWebpack({
index: [
'./src/example.js'
],
styles: [
'./src/styles.scss'
],
}, {
svg: {
src: [
'./node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg'
]
},
rules: [ riotRules ]
})

@ -0,0 +1,36 @@
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for your application, as well as bundling up your JS files.
|
*/
mix.webpackConfig({
module: {
rules: [{
test: /\.riot$/,
exclude: '/node_modules/',
use: [{
loader: '@riotjs/webpack-loader',
options: {
hot: false
}
}]
}]
}
})
mix.js('src/example.js', 'example')
.sass('src/example.scss', 'example')
.options({
terser: {
extractComments: false,
},
processCssUrls: false
})

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save