tiny-components
/
validator
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases 2 Wiki Activity

adding set contraits

Browse Source
main
HerrHase 6 days ago
parent b38eee37ed
commit 76b3f2b1e6
13 changed files with 3128 additions and 30198 deletions
Show Stats Download Patch File Download Diff File

4
mix-manifest.json
Unescape View File

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

25529
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
package.json
Unescape View File

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

6
public/assets-manifest.json
Unescape View File

@ -0,0 +1,6 @@
{
"/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"
}

852
public/css/styles.css
Unescape View File

@ -0,0 +1,852 @@
/*!**************************************************************************************************************************************!*\
!*** 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 */

1
public/js/index.js
View File

File diff suppressed because one or more lines are too long

1
public/js/spritemap.js
Unescape View File

@ -0,0 +1 @@
(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}")}}]);

1
public/symbol-defs.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

8
src/formValidator.js
Unescape View File

@ -87,6 +87,14 @@ class FormValidator
this._onBeforeSubmit = onBeforeSubmit this._onBeforeSubmit = onBeforeSubmit
} }
/**
*
*/
setConstraits(rules)
{
this.rules = rules
}
/** /**
* handle submit * handle submit
* *

6
src/styles.scss
Unescape View File

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

18
webpack.config.js
Unescape View File

@ -0,0 +1,18 @@
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 ]
})

36
webpack.mix.js
Unescape View File

@ -1,36 +0,0 @@
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
})

6838
yarn.lock
View File

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