Compare commits
No commits in common. 'main' and 'feature/field-error' have entirely different histories.
main
...
feature/fi
@ -0,0 +1 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Demo | Tiny Validator</title>
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
<link href="styles.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
<form class="form" novalidate>
|
||||
<div class="field">
|
||||
<label>
|
||||
email
|
||||
<input type="email" name="email" />
|
||||
</label>
|
||||
<field-error name="email"></field-error>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>
|
||||
password
|
||||
<input type="password" name="password" />
|
||||
</label>
|
||||
<field-error name="password"></field-error>
|
||||
</div>
|
||||
<button type="submit">Send</button>
|
||||
</form>
|
||||
<script type="text/javascript" src="demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,85 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tiny Components | Validator</title>
|
||||
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
|
||||
<link href="/example.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
@tiny-components/validator
|
||||
</h1>
|
||||
</div>
|
||||
<div class="bar__main justify-end">
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/validator" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h2>
|
||||
Form
|
||||
</h2>
|
||||
|
||||
<form class="form-html" novalidate method="post">
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
email
|
||||
<input type="email" class="field-text" name="email" />
|
||||
</label>
|
||||
<field-error name="email"></field-error>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
password
|
||||
<input type="password" class="field-text" name="password" />
|
||||
</label>
|
||||
<field-error name="password"></field-error>
|
||||
</div>
|
||||
<button class="button" type="submit">
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div id="result" class="panel color-text-contrast background-color-success hidden">
|
||||
<div class="panel__body">
|
||||
<div class="content m-bottom-last-child-0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
|
||||
<h2>
|
||||
Form - Inside a Riot Component
|
||||
</h2>
|
||||
|
||||
<form-component></form-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="/example.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"/demo/demo.js": "/demo/demo.js",
|
||||
"/demo/demo.css": "/demo/demo.css"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,24 +1,25 @@
|
||||
{
|
||||
"name": "@tiny-components/validator",
|
||||
"version": "0.3.0",
|
||||
"description": "Form Validation with Riotjs",
|
||||
"name": "@tentakelfabrik/tiny-validator",
|
||||
"version": "1.0.0",
|
||||
"description": "Form Validator with validator.js for riotjs",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@git.node001.net:tiny-components/validator.git"
|
||||
"url": "git@github.com:tentakelfabrik/tiny-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",
|
||||
"form-serialize": "^0.7.2",
|
||||
"riot": "^10.1.4",
|
||||
"riot": "^5.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": "^5.1.3",
|
||||
"@riotjs/webpack-loader": "^5.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"laravel-mix": "^6.0.5",
|
||||
"postcss": "^8.2.1",
|
||||
"sass": "^1.32.0",
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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}")}}]);
|
||||
|
Before Width: | Height: | Size: 66 KiB |
@ -0,0 +1,117 @@
|
||||
import validate from 'validate.js'
|
||||
import serialize from 'form-serialize'
|
||||
|
||||
/**
|
||||
* Form Validator with RiotJS Components
|
||||
*
|
||||
*
|
||||
*
|
||||
*
|
||||
*/
|
||||
class FormValidator
|
||||
{
|
||||
/**
|
||||
*
|
||||
* @param {[type]} formSelector [description]
|
||||
* @param {[type]} constraits [description]
|
||||
*/
|
||||
constructor(formSelector, constraits)
|
||||
{
|
||||
// getting selector to find form-element
|
||||
this.formSelector = formSelector
|
||||
|
||||
// constraits for validate.js
|
||||
this.constraits = constraits
|
||||
|
||||
// get form and elements
|
||||
this.form = document.querySelector(this.formSelector)
|
||||
this.elements = this.form.querySelectorAll('field-error')
|
||||
|
||||
// adding submit event
|
||||
this.form.addEventListener('submit', (event) => {
|
||||
this.onSubmit(event)
|
||||
})
|
||||
|
||||
// adding event if a element is updated
|
||||
this.form.addEventListener('field-update', (event) => {
|
||||
this.onFieldUpdate(event)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {[type]} event [description]
|
||||
* @return {[type]} [description]
|
||||
*/
|
||||
onSubmit(event)
|
||||
{
|
||||
let errors = validate(serialize(event.target, {
|
||||
hash: true
|
||||
}), this.constraits, {
|
||||
fullMessages: false
|
||||
})
|
||||
|
||||
if (errors) {
|
||||
event.preventDefault()
|
||||
|
||||
// send each element a event
|
||||
this.elements.forEach((element) => {
|
||||
let elementErrors = false
|
||||
|
||||
// check for errors by name
|
||||
if (errors[element.attributes.name.nodeValue]) {
|
||||
elementErrors = errors[element.attributes.name.nodeValue]
|
||||
}
|
||||
|
||||
this.dispatchCustomEvent(elementErrors, element)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {Event} event
|
||||
*
|
||||
*/
|
||||
onFieldUpdate(event)
|
||||
{
|
||||
// workaround, make sure that value for single is undefined if it is empty
|
||||
if (event.detail.value == '') {
|
||||
event.detail.value = undefined
|
||||
}
|
||||
|
||||
let errors = validate.single(event.detail.value, this.constraits[event.detail.name])
|
||||
|
||||
// search for element by name and dispatch event
|
||||
this.elements.forEach((element) => {
|
||||
if (element.attributes.name.nodeValue == event.detail.name) {
|
||||
this.dispatchCustomEvent(errors, element)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* dispatch event to single element
|
||||
*
|
||||
* @param {Array} errors
|
||||
* @param {Element} element
|
||||
*
|
||||
*/
|
||||
dispatchCustomEvent(errors, element)
|
||||
{
|
||||
let detail = false
|
||||
|
||||
if (errors) {
|
||||
detail = errors
|
||||
}
|
||||
|
||||
const formValidationEvent = new CustomEvent('form-validation', {
|
||||
'detail': detail
|
||||
})
|
||||
|
||||
element.dispatchEvent(formValidationEvent)
|
||||
}
|
||||
}
|
||||
|
||||
export default FormValidator
|
||||
@ -0,0 +1,17 @@
|
||||
import * as riot from 'riot'
|
||||
|
||||
import FormValidator from './../FormValidator'
|
||||
import FieldError from './../field-error.riot'
|
||||
|
||||
riot.register('field-error', FieldError)
|
||||
riot.mount('field-error')
|
||||
|
||||
const formValidation = new FormValidator('form', {
|
||||
'email': {
|
||||
'presence': true,
|
||||
'email': true
|
||||
},
|
||||
'password': {
|
||||
'presence': true
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,6 @@
|
||||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
|
||||
/*# sourceMappingURL=normalize.min.css.map */
|
||||
|
||||
body {
|
||||
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
import * as riot from 'riot'
|
||||
|
||||
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(document.querySelector('.form-html'), {
|
||||
'email': {
|
||||
'presence': true,
|
||||
'email': true
|
||||
},
|
||||
'password': {
|
||||
'presence': true
|
||||
}
|
||||
}, true)
|
||||
|
||||
formValidation.onSuccess((event, data) => {
|
||||
event.preventDefault()
|
||||
|
||||
// show message and content of data from form
|
||||
document.querySelector('#result .content').innerHTML = '<p>' + JSON.stringify(data) + '</p>'
|
||||
document.querySelector('#result').classList.remove('hidden')
|
||||
})
|
||||
|
||||
riot.register('form-component', FormComponent)
|
||||
riot.mount('form-component')
|
||||
@ -1,6 +0,0 @@
|
||||
@import
|
||||
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
<form-component>
|
||||
<div>
|
||||
<form class="form" novalidate method="post" onsubmit={ (event) => ( state.validator.submit(event) ) }>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
email
|
||||
<input type="email" class="field-text" name="email" />
|
||||
</label>
|
||||
<field-error name="email"></field-error>
|
||||
</div>
|
||||
<div class="field-group">
|
||||
<label class="field-label">
|
||||
password
|
||||
<input type="password" class="field-text" name="password" />
|
||||
</label>
|
||||
<field-error name="password"></field-error>
|
||||
</div>
|
||||
<button class="button" type="submit">
|
||||
Send
|
||||
</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">
|
||||
{ state.result }
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
import * as riot from 'riot'
|
||||
import FormValidator from './formValidator.js'
|
||||
|
||||
export default {
|
||||
|
||||
state:
|
||||
{
|
||||
result: undefined,
|
||||
validator: undefined,
|
||||
class: undefined
|
||||
},
|
||||
|
||||
onMounted()
|
||||
{
|
||||
// creating formValidator
|
||||
this.state.validator = new FormValidator(this.$('.form'), {
|
||||
'email': {
|
||||
'presence': true,
|
||||
'email': 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)
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {array} data
|
||||
*
|
||||
*/
|
||||
handleSuccess(event, data)
|
||||
{
|
||||
event.preventDefault()
|
||||
|
||||
this.state.class = 'background-color-success'
|
||||
this.state.result = JSON.stringify(data)
|
||||
this.update()
|
||||
},
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param {object} event
|
||||
* @param {array} errors
|
||||
* @param {array} data
|
||||
*
|
||||
*/
|
||||
handleError(event, errors, data)
|
||||
{
|
||||
this.state.class = 'background-color-danger'
|
||||
this.state.result = JSON.stringify(errors)
|
||||
this.update()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</form-component>
|
||||
@ -1,197 +0,0 @@
|
||||
import validate from 'validate.js'
|
||||
import serialize from 'form-serialize'
|
||||
|
||||
/**
|
||||
* Form Validator with RiotJS Components
|
||||
*
|
||||
*
|
||||
* @author HerrHase
|
||||
*
|
||||
*/
|
||||
|
||||
class FormValidator
|
||||
{
|
||||
/**
|
||||
*
|
||||
* @param {[type]} formSelector [description]
|
||||
* @param {[type]} constraits [description]
|
||||
*/
|
||||
constructor(formElement, constraits, addSubmitEvent = false)
|
||||
{
|
||||
// constraits for validate.js
|
||||
this.constraits = constraits
|
||||
|
||||
// get form and elements
|
||||
this.formElement = formElement
|
||||
|
||||
// if form not found
|
||||
if (!this.formElement) {
|
||||
console.error('FormValidator: form not found!')
|
||||
}
|
||||
|
||||
this.elements = this.formElement.querySelectorAll('field-error')
|
||||
|
||||
// adding event if a element is updated
|
||||
this.formElement.addEventListener('field-update', (event) => {
|
||||
this._onFieldUpdate(event)
|
||||
})
|
||||
|
||||
// adding submit event
|
||||
if (addSubmitEvent) {
|
||||
this.formElement.addEventListener('submit', (event) => {
|
||||
this._onSubmit(event)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* trigger submit
|
||||
*
|
||||
* @param {object} event
|
||||
*
|
||||
*/
|
||||
submit(event)
|
||||
{
|
||||
this._onSubmit(event)
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {function} onError
|
||||
*
|
||||
*/
|
||||
onError(onError)
|
||||
{
|
||||
this._onError = onError
|
||||
}
|
||||
|
||||
/**
|
||||
* settin onSuccess callback and add submit-event on form
|
||||
*
|
||||
* @param {function} onSuccess
|
||||
*
|
||||
*/
|
||||
onSuccess(onSuccess)
|
||||
{
|
||||
// adding onSuccess
|
||||
this._onSuccess = onSuccess
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {function} onError
|
||||
*
|
||||
*/
|
||||
onBeforeSubmit(onBeforeSubmit)
|
||||
{
|
||||
this._onBeforeSubmit = onBeforeSubmit
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
setConstraits(rules)
|
||||
{
|
||||
this.rules = rules
|
||||
}
|
||||
|
||||
/**
|
||||
* handle submit
|
||||
*
|
||||
*
|
||||
* @param {Event} event
|
||||
*
|
||||
*/
|
||||
_onSubmit(event)
|
||||
{
|
||||
// getting data from target of submit event
|
||||
const data = serialize(event.target, {
|
||||
hash: true
|
||||
})
|
||||
|
||||
// options for validate.js
|
||||
const options = {
|
||||
fullMessages: false
|
||||
}
|
||||
|
||||
if (this._onBeforeSubmit) {
|
||||
this._onBeforeSubmit()
|
||||
}
|
||||
|
||||
// check form and getting errors
|
||||
validate.async(data, this.constraits, options).then(
|
||||
() => {
|
||||
this._onSuccess(event, data)
|
||||
},
|
||||
|
||||
(errors) => {
|
||||
event.preventDefault()
|
||||
|
||||
// if onError is set, tha
|
||||
if (this._onError) {
|
||||
this._onError(event, errors, data)
|
||||
}
|
||||
|
||||
// send each element a event
|
||||
this.elements.forEach((element) => {
|
||||
let elementErrors = false
|
||||
|
||||
// check for errors by name
|
||||
if (errors[element.attributes.name.nodeValue]) {
|
||||
elementErrors = errors[element.attributes.name.nodeValue]
|
||||
}
|
||||
|
||||
this._dispatchCustomEvent(elementErrors, element)
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* send update to fields
|
||||
*
|
||||
*
|
||||
* @param {Event} event
|
||||
*
|
||||
*/
|
||||
_onFieldUpdate(event)
|
||||
{
|
||||
// workaround, make sure that value for single is undefined if it is empty
|
||||
if (event.detail.value == '') {
|
||||
event.detail.value = undefined
|
||||
}
|
||||
|
||||
let errors = validate.single(event.detail.value, this.constraits[event.detail.name])
|
||||
|
||||
// search for element by name and dispatch event
|
||||
this.elements.forEach((element) => {
|
||||
if (element.attributes.name.nodeValue == event.detail.name) {
|
||||
this._dispatchCustomEvent(errors, element)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* dispatch event to single element
|
||||
*
|
||||
* @param {Array} errors
|
||||
* @param {Element} element
|
||||
*
|
||||
*/
|
||||
_dispatchCustomEvent(errors, element)
|
||||
{
|
||||
let detail = false
|
||||
|
||||
if (errors) {
|
||||
detail = errors
|
||||
}
|
||||
|
||||
const formValidationEvent = new CustomEvent('form-validation', {
|
||||
'detail': detail
|
||||
})
|
||||
|
||||
element.dispatchEvent(formValidationEvent)
|
||||
}
|
||||
}
|
||||
|
||||
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/demo/demo.js', 'demo')
|
||||
.sass('src/demo/demo.scss', 'demo')
|
||||
.options({
|
||||
terser: {
|
||||
extractComments: false,
|
||||
},
|
||||
processCssUrls: false
|
||||
})
|
||||
Loading…
Reference in new issue