adding set contraits

6 days ago · 76b3f2b1e6
parent b38eee37ed
commit 76b3f2b1e6
13 changed files with 3128 additions and 30198 deletions
--- a/mix-manifest.json
+++ b/mix-manifest.json
@ -1,4 +0,0 @@
-{
-    "/example/example.js": "/example/example.js",
-    "/example/example.css": "/example/example.css"
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,26 +1,24 @@
 {
    "name": "@tiny-components/validator",
-    "version": "0.2.0",
+    "version": "0.3.0",
    "description": "Form Validation with Riotjs",
    "repository": {
        "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",
-    "license": "MIT",
+    "author": "Björn Hase <herrhase@node001.net>",
+    "license": "GPLV3",
    "dependencies": {
-        "@tiny-components/plain-ui": "^0.5.0",
+        "@tiny-components/plain-ui": "^0.6.0",
        "form-serialize": "^0.7.2",
-        "riot": "^6.1.2",
+        "riot": "^10.1.4",
        "validate.js": "^0.13.1"
    },
    "devDependencies": {
-        "@riotjs/compiler": "^6.1.3",
-        "@riotjs/webpack-loader": "^6.0.0",
-        "cross-env": "^7.0.3",
-        "laravel-mix": "^6.0.5",
-        "postcss": "^8.4.12",
-        "sass": "^1.32.0",
-        "sass-loader": "^12.4.0"
+        "@riotjs/webpack-loader": "^10.0.0",
+        "@tiny-components/webpack": "^0.6.0"
+    },
+    "scripts": {
+        "build": "webpack --mode development --config webpack.config.js"
    }
 }
--- a/public/assets-manifest.json
+++ b/public/assets-manifest.json
@ -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"
+}
--- a/public/css/styles.css
+++ b/public/css/styles.css
@ -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 */
--- a/public/js/index.js
+++ b/public/js/index.js
--- a/public/js/spritemap.js
+++ b/public/js/spritemap.js
@ -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}")}}]);
--- a/public/symbol-defs.svg
+++ b/public/symbol-defs.svg
--- a/src/formValidator.js
+++ b/src/formValidator.js
@ -87,6 +87,14 @@ class FormValidator
        this._onBeforeSubmit = onBeforeSubmit
    }

+    /**
+     *
+     */
+    setConstraits(rules) 
+    {
+        this.rules = rules
+    }
+
    /**
     *  handle submit
     *
@ -186,4 +194,4 @@ class FormValidator
    }
 }

-export default FormValidator
+export default FormValidator
--- a/src/styles.scss
+++ b/src/styles.scss
@ -0,0 +1,6 @@
+@import
+    '../node_modules/@tiny-components/plain-ui/src/scss/plain-ui';
+
+.hidden {
+    display: none;
+}
--- a/webpack.config.js
+++ b/webpack.config.js
@ -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 ]
+    })
--- a/webpack.mix.js
+++ b/webpack.mix.js
@ -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
-    })
--- a/yarn.lock
+++ b/yarn.lock
				`@ -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}")}}]);`