jails.stdlib 1.0.0 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 
 <div align="center">
-    <h1>jails.std</h1>
+    <h1>jails.stdlib</h1>
     <h4>The Jails Standard Library</h4>
 </div>
 
@@ -9,14 +9,14 @@
 ## Installing
 
 ```
-npm install jails.std
+npm install jails.stdlib
 ```
 or
 
 ```
-yarn add jails.std
+yarn add jails.stdlib
 ```
 
 <br />
 
-See more details about each module inside their respective folders.
+See more details about each module inside their respective folders.

package/cancelable/README.md

@@ -10,7 +10,7 @@ TIt ensures only the latest async call resolves, ignoring all previous ones, so
 ### Usage
 
 ```js
-import { cancelable } from 'jails.std/cancelable'
+import { cancelable } from 'jails.stdlib/cancelable'
 
 export const getService = () => {
 	return new Promise((resolve, reject) => {

package/debounce/README.md

@@ -10,7 +10,7 @@ Delays a function's execution until after a specified pause in activity.
 ### Usage
 
 ```js
-import { debounce } from 'jails.std/debounce'
+import { debounce } from 'jails.stdlib/debounce'
 
 const oninput = debounce(() => {
   console.log('debouncing input')

package/delay/README.md

@@ -8,7 +8,7 @@ Delays the next `.then` promise chain.
 ### Usage
 
 ```js
-import { delay } from 'jails.std/delay'
+import { delay } from 'jails.stdlib/delay'
 
 fetch('https://jsonplaceholder.typicode.com/todos/1')
   .then( response => response.json() )

package/form-validation/index.js

@@ -2,7 +2,7 @@ var T = Object.defineProperty, B = Object.defineProperties;
 var C = Object.getOwnPropertyDescriptors;
 var D = Object.getOwnPropertySymbols;
 var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
-var A = (a, r, e) => r in a ? T(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e, b = (a, r) => {
+var A = (a, r, e) => r in a ? T(a, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : a[r] = e, m = (a, r) => {
   for (var e in r || (r = {}))
     G.call(r, e) && A(a, e, r[e]);
   if (D)
@@ -10,85 +10,87 @@ var A = (a, r, e) => r in a ? T(a, r, { enumerable: !0, configurable: !0, writab
       H.call(r, e) && A(a, e, r[e]);
   return a;
 }, L = (a, r) => B(a, C(r));
-const M = "form-validation", v = "[data-validation]", J = "[data-mask]";
+const M = "form-validation", g = "[data-validation]", J = "[data-mask]";
 function U({
   main: a,
   elm: r,
   state: e,
   on: n,
-  emit: m,
+  emit: v,
   dependencies: y,
   trigger: F
 }) {
-  var V;
-  const { validations: g, masks: E } = y, f = (V = r.querySelector("input,select,textarea")) == null ? void 0 : V.form;
+  var k;
+  const { validations: h, masks: E } = y, f = (k = r.querySelector("input,select,textarea")) == null ? void 0 : k.form;
   let u = S(f);
   a((t) => {
-    n("input", "input, textarea, select", z), n("input", J, $), n("input", v, h("input")), n("change", v, h("change")), n("blur", v, h("blur")), n("focus", "input, textarea, select", N), n("blur", "input, textarea, select", O), f.addEventListener("reset", j), f.addEventListener("submit", _), I();
-  });
+    n("input", "input, textarea, select", z), n("input", J, $), n("input", g, p("input")), n("change", g, p("change")), n("blur", g, p("blur")), n("focus", "input, textarea, select", N), n("blur", "input, textarea, select", O), f.addEventListener("reset", j), f.addEventListener("submit", _), I();
+  }), r.setValues = (t) => {
+    e.set((s) => s.form.values = m(m({}, s.form.values), t));
+  };
   const I = () => {
-    if (!g)
+    if (!h)
       throw new Error(
         "<form-validation> - No validations provided in dependencies"
       );
-    const t = k();
-    e.set((o) => o.form.values = t);
-  }, k = () => {
+    const t = V();
+    e.set((s) => s.form.values = t);
+  }, V = () => {
     const t = {};
-    return u.forEach((o) => t[o] = ""), t;
+    return u.forEach((s) => t[s] = ""), t;
   }, N = (t) => {
-    const o = t.target.name;
-    e.set((s) => {
-      s.form.touched[o] = !0, s.form.focused[o] = !0;
+    const s = t.target.name;
+    e.set((o) => {
+      o.form.touched[s] = !0, o.form.focused[s] = !0;
     });
   }, O = (t) => {
-    const o = t.target.name;
-    e.set((s) => {
-      s.form.focused[o] = !1;
+    const s = t.target.name;
+    e.set((o) => {
+      o.form.focused[s] = !1;
     });
-  }, h = (t) => (o) => {
-    const s = o.target, l = s.name, c = w(s, f), p = s.dataset.validation.split(/\s/), d = [], x = e.get();
-    p.forEach((i) => {
-      if (i in g) {
-        const { ok: q, message: K } = g[i](
+  }, p = (t) => (s) => {
+    const o = s.target, i = o.name, c = w(o, f), b = o.dataset.validation.split(/\s/), d = [], x = e.get();
+    b.forEach((l) => {
+      if (l in h) {
+        const { ok: q, message: K } = h[l](
           c,
-          s,
+          o,
           f
         );
         q || d.push(K);
       }
-    }), d.length ? t === "input" ? (u.add(s.name), e.set((i) => {
-      i.form.isValid = !1, x.form.errors[l] && d[0] != x.form.errors[l] && (i.form.errors[l] = d[0]);
-    })) : (t === "blur" || t === "change") && (u.add(s.name), e.set((i) => {
-      i.form.errors[l] = d[0], i.form.isValid = !1;
-    })) : (u.delete(s.name), e.set((i) => {
-      delete i.form.errors[l], u.size || (i.form.isValid = !0);
+    }), d.length ? t === "input" ? (u.add(o.name), e.set((l) => {
+      l.form.isValid = !1, x.form.errors[i] && d[0] != x.form.errors[i] && (l.form.errors[i] = d[0]);
+    })) : (t === "blur" || t === "change") && (u.add(o.name), e.set((l) => {
+      l.form.errors[i] = d[0], l.form.isValid = !1;
+    })) : (u.delete(o.name), e.set((l) => {
+      delete l.form.errors[i], u.size || (l.form.isValid = !0);
     }));
   }, z = (t) => {
-    const { name: o } = t.target, s = w(t.target, f);
-    e.set((l) => l.form.values[o] = s);
+    const { name: s } = t.target, o = w(t.target, f);
+    e.set((i) => i.form.values[s] = o);
   }, _ = (t) => {
-    t.preventDefault(), F("blur", v);
-    const s = e.get().form.errors;
-    if (Object.keys(s).length)
-      m(`${M}:error`, { errors: s });
+    t.preventDefault(), F("blur", g);
+    const o = e.get().form.errors;
+    if (Object.keys(o).length)
+      v(`${M}:error`, { errors: o });
     else {
       const c = Q(t.target);
-      m(`${M}:submit`, b({}, c));
+      v(`${M}:submit`, m({}, c));
     }
   }, $ = (t) => {
-    let o = t.target.value;
-    const { mask: s } = t.target.dataset;
-    s.split(/s/).forEach((c) => {
+    let s = t.target.value;
+    const { mask: o } = t.target.dataset;
+    o.split(/s/).forEach((c) => {
       if (c && c in E) {
-        const p = E[c];
-        o = p(o, t.target, t.target.form);
+        const b = E[c];
+        s = b(s, t.target, t.target.form);
       }
-    }), e.set((c) => c.form.values[t.target.name] = o || "");
+    }), e.set((c) => c.form.values[t.target.name] = s || "");
   }, j = () => {
     u = S(f), e.set({
-      form: L(b({}, P.form), {
-        values: k()
+      form: L(m({}, P.form), {
+        values: V()
       })
     });
   };
@@ -103,8 +105,8 @@ const P = {
   }
 }, Q = (a) => {
   const r = new FormData(a), e = {};
-  for (let [n, m] of r)
-    e[n] = m;
+  for (let [n, v] of r)
+    e[n] = v;
   return { formData: r, data: e };
 }, w = (a, r) => {
   const { name: e, type: n } = a;

package/form-validation/index.ts

@@ -31,6 +31,10 @@ export default function formValidation({
 		initialValues()
 	})
 
+	elm.setValues = ( values ) => {
+		state.set(s => (s.form.values = { ...s.form.values, ...values }))
+	}
+
 	const initialValues = () => {
 		if (!validations) {
 			throw new Error(

package/form-validation/index.umd.js

@@ -1 +1 @@
-(function(o,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(o=typeof globalThis!="undefined"?globalThis:o||self,r(o["form-validation"]={}))})(this,(function(o){"use strict";var H=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var w=(o,r,n)=>r in o?H(o,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):o[r]=n,k=(o,r)=>{for(var n in r||(r={}))R.call(r,n)&&w(o,n,r[n]);if(L)for(var n of L(r))U.call(r,n)&&w(o,n,r[n]);return o},O=(o,r)=>J(o,Q(r));const r="form-validation",n="[data-validation]",T="[data-mask]";function _({main:c,elm:f,state:t,on:i,emit:p,dependencies:F,trigger:I}){var S;const{validations:h,masks:y}=F,m=(S=f.querySelector("input,select,textarea"))==null?void 0:S.form;let v=x(m);c(e=>{i("input","input, textarea, select",q),i("input",T,P),i("input",n,b("input")),i("change",n,b("change")),i("blur",n,b("blur")),i("focus","input, textarea, select",z),i("blur","input, textarea, select",$),m.addEventListener("reset",B),m.addEventListener("submit",K),N()});const N=()=>{if(!h)throw new Error("<form-validation> - No validations provided in dependencies");const e=D();t.set(a=>a.form.values=e)},D=()=>{const e={};return v.forEach(a=>e[a]=""),e},z=e=>{const a=e.target.name;t.set(s=>{s.form.touched[a]=!0,s.form.focused[a]=!0})},$=e=>{const a=e.target.name;t.set(s=>{s.form.focused[a]=!1})},b=e=>a=>{const s=a.target,u=s.name,d=M(s,m),E=s.dataset.validation.split(/\s/),g=[],A=t.get();E.forEach(l=>{if(l in h){const{ok:C,message:G}=h[l](d,s,m);C||g.push(G)}}),g.length?e==="input"?(v.add(s.name),t.set(l=>{l.form.isValid=!1,A.form.errors[u]&&g[0]!=A.form.errors[u]&&(l.form.errors[u]=g[0])})):(e==="blur"||e==="change")&&(v.add(s.name),t.set(l=>{l.form.errors[u]=g[0],l.form.isValid=!1})):(v.delete(s.name),t.set(l=>{delete l.form.errors[u],v.size||(l.form.isValid=!0)}))},q=e=>{const{name:a}=e.target,s=M(e.target,m);t.set(u=>u.form.values[a]=s)},K=e=>{e.preventDefault(),I("blur",n);const s=t.get().form.errors;if(Object.keys(s).length)p(`${r}:error`,{errors:s});else{const d=j(e.target);p(`${r}:submit`,k({},d))}},P=e=>{let a=e.target.value;const{mask:s}=e.target.dataset;s.split(/s/).forEach(d=>{if(d&&d in y){const E=y[d];a=E(a,e.target,e.target.form)}}),t.set(d=>d.form.values[e.target.name]=a||"")},B=()=>{v=x(m),t.set({form:O(k({},V.form),{values:D()})})}}const V={form:{errors:{},values:{},touched:{},isValid:!1,focused:{}}},j=c=>{const f=new FormData(c),t={};for(let[i,p]of f)t[i]=p;return{formData:f,data:t}},M=(c,f)=>{const{name:t,type:i}=c;return i=="checkbox"?c.checked?c.value:"":f[t].value},x=c=>{const f=new Set;return Array.from(c.elements).filter(t=>t.name&&t.dataset.validation).forEach(t=>f.add(t.name)),f};o.default=_,o.model=V,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(a,r){typeof exports=="object"&&typeof module!="undefined"?r(exports):typeof define=="function"&&define.amd?define(["exports"],r):(a=typeof globalThis!="undefined"?globalThis:a||self,r(a["form-validation"]={}))})(this,(function(a){"use strict";var H=Object.defineProperty,J=Object.defineProperties;var Q=Object.getOwnPropertyDescriptors;var L=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var w=(a,r,n)=>r in a?H(a,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):a[r]=n,p=(a,r)=>{for(var n in r||(r={}))R.call(r,n)&&w(a,n,r[n]);if(L)for(var n of L(r))U.call(r,n)&&w(a,n,r[n]);return a},O=(a,r)=>J(a,Q(r));const r="form-validation",n="[data-validation]",T="[data-mask]";function _({main:f,elm:c,state:t,on:i,emit:h,dependencies:F,trigger:I}){var S;const{validations:b,masks:y}=F,m=(S=c.querySelector("input,select,textarea"))==null?void 0:S.form;let v=x(m);f(e=>{i("input","input, textarea, select",q),i("input",T,P),i("input",n,E("input")),i("change",n,E("change")),i("blur",n,E("blur")),i("focus","input, textarea, select",z),i("blur","input, textarea, select",$),m.addEventListener("reset",B),m.addEventListener("submit",K),N()}),c.setValues=e=>{t.set(s=>s.form.values=p(p({},s.form.values),e))};const N=()=>{if(!b)throw new Error("<form-validation> - No validations provided in dependencies");const e=D();t.set(s=>s.form.values=e)},D=()=>{const e={};return v.forEach(s=>e[s]=""),e},z=e=>{const s=e.target.name;t.set(o=>{o.form.touched[s]=!0,o.form.focused[s]=!0})},$=e=>{const s=e.target.name;t.set(o=>{o.form.focused[s]=!1})},E=e=>s=>{const o=s.target,u=o.name,d=M(o,m),V=o.dataset.validation.split(/\s/),g=[],A=t.get();V.forEach(l=>{if(l in b){const{ok:C,message:G}=b[l](d,o,m);C||g.push(G)}}),g.length?e==="input"?(v.add(o.name),t.set(l=>{l.form.isValid=!1,A.form.errors[u]&&g[0]!=A.form.errors[u]&&(l.form.errors[u]=g[0])})):(e==="blur"||e==="change")&&(v.add(o.name),t.set(l=>{l.form.errors[u]=g[0],l.form.isValid=!1})):(v.delete(o.name),t.set(l=>{delete l.form.errors[u],v.size||(l.form.isValid=!0)}))},q=e=>{const{name:s}=e.target,o=M(e.target,m);t.set(u=>u.form.values[s]=o)},K=e=>{e.preventDefault(),I("blur",n);const o=t.get().form.errors;if(Object.keys(o).length)h(`${r}:error`,{errors:o});else{const d=j(e.target);h(`${r}:submit`,p({},d))}},P=e=>{let s=e.target.value;const{mask:o}=e.target.dataset;o.split(/s/).forEach(d=>{if(d&&d in y){const V=y[d];s=V(s,e.target,e.target.form)}}),t.set(d=>d.form.values[e.target.name]=s||"")},B=()=>{v=x(m),t.set({form:O(p({},k.form),{values:D()})})}}const k={form:{errors:{},values:{},touched:{},isValid:!1,focused:{}}},j=f=>{const c=new FormData(f),t={};for(let[i,h]of c)t[i]=h;return{formData:c,data:t}},M=(f,c)=>{const{name:t,type:i}=f;return i=="checkbox"?f.checked?f.value:"":c[t].value},x=f=>{const c=new Set;return Array.from(f.elements).filter(t=>t.name&&t.dataset.validation).forEach(t=>c.add(t.name)),c};a.default=_,a.model=k,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/form-validation/readme.md

@@ -43,7 +43,7 @@ on('form-validation:error', ({ errors }) => {})
 
 ##### main.ts
 ```ts
-import * as formValidation from 'jails.std/form-validation'
+import * as formValidation from 'jails.stdlib/form-validation'
 import rules from './my-custom-rules'
 
 jails.register('form-validation', formValidation, { ...rules })
@@ -114,4 +114,24 @@ export default {
 }
 ```
  
-To see how to inject this dependency, go back to the [usage](#usage) section.
+To see how to inject this dependency, go back to the [usage](#usage) section.
+
+
+##### element.setValues(...data)
+
+If you want to set programatically values to the fields, you just have to get the node of `form-validation` element and use the public method `setValues()` passing data with `name` and `value` pairs.
+
+
+```ts
+export default function myComponent({ main, elm }) {
+
+    const formValidation = elm.querySelector('form-validation') 
+
+    main(() => {
+        formValidation.setValues({
+            'username': 'John Doe',
+            'age': '41'
+        })
+    })
+}
+```

package/import-css/README.md

@@ -10,7 +10,7 @@ Returns a promise when Css is loaded
 ### Usage 
 
 ```ts 
-import { importCss } from 'jails.std/import-css'
+import { importCss } from 'jails.stdlib/import-css'
 
 importCss('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css')
   .then( (event) => {

package/import-html/README.md

@@ -9,7 +9,7 @@ Returns a promise when Html is loaded. It accepts options from `fetch` api.
 ### Usage 
 
 ```ts 
-import { importHtml } from 'jails.std/import-html'
+import { importHtml } from 'jails.stdlib/import-html'
 
 importHtml('https://html-mock.fly.dev/tag/table?class=table%20table-bordered')
   .then( ({ response: Response, html: string }) => {

package/import-js/README.md

@@ -10,7 +10,7 @@ Returns a promise when script is loaded
 ### Usage 
 
 ```ts 
-import { importJs } from 'jails.std/import-js'
+import { importJs } from 'jails.stdlib/import-js'
 
 importJs('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js')
   .then( (event) => {

package/is-touch/README.md

@@ -9,7 +9,7 @@ A simple version to detect if device has touch. It checks if it has `touchstart`
 ### Usage
 
 ```js
-import { isTouch } from 'jails.std/is-touch'
+import { isTouch } from 'jails.stdlib/is-touch'
 
 async function main () {
   console.log( isTouch() ) // true if there's touchstart on window, or false otherwise.

package/is-visible/README.md

@@ -11,7 +11,7 @@ It also wraps it in `Promise` so it can be used with `await` for more convinienc
 ### Usage
 
 ```js
-import { isVisible } from 'jails.std/is-visible'
+import { isVisible } from 'jails.stdlib/is-visible'
 
 async function main () {
 

package/lazyload-image/README.md

@@ -11,7 +11,7 @@ It's in fact the [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload)
 
 ```ts 
 
-import { Lazyload } from 'jails.std/lazyload-image'
+import { Lazyload } from 'jails.stdlib/lazyload-image'
 
 function main () {
 

package/messenger/README.md

@@ -28,7 +28,7 @@ The `messenger` utility provides a lightweight, secure interface for sending and
 ### Parent Page
 
 ```ts
-import { messenger } from 'jails.std/messenger'
+import { messenger } from 'jails.stdlib/messenger'
 
 const msg = messenger({
   target: document.getElementById('myIframe'), // <iframe id="myIframe" />

package/mfe/README.md

@@ -14,7 +14,7 @@ It can embed a full html, css, js from an external url.
 
 ```ts 
 
-import { mfe } from 'jails.std/mfe'
+import { mfe } from 'jails.stdlib/mfe'
 
 function main () {
 
@@ -34,7 +34,7 @@ It can also embed a single page app from a external `.js` file.
 
 ```ts 
 
-import { mfe } from 'jails.std/mfe'
+import { mfe } from 'jails.stdlib/mfe'
 
 function main () {
 
@@ -63,7 +63,7 @@ Example:
 `main.ts`
 
 ```ts
-import { Shell } from 'jails.std/mfe'
+import { Shell } from 'jails.stdlib/mfe'
 
 export const shell = Shell({
   somevariable,
@@ -79,7 +79,7 @@ export const shell = Shell({
 `main.ts`
 
 ```ts 
-import { Shell } from 'jails.std/mfe'
+import { Shell } from 'jails.stdlib/mfe'
 
 export const shell = Shell({
   somevariable,

package/outlet/README.md

@@ -17,7 +17,7 @@ render( url: string ) : Promise<target: HTMLElement>
 ```
 
 ```ts
-import { Oultet } from 'jails.std/outlet'
+import { Oultet } from 'jails.stdlib/outlet'
 
 const target = document.querySelector('[data-outlet]')
 const outlet = Outlet({ target })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jails.stdlib",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "The Jails Standard Library",
   "types": "index.d.ts",
   "repository": {

package/querystring/README.md

@@ -9,7 +9,7 @@ Returns a query string value.
 ### Usage
 
 ```js
-import { querystring } from 'jails.std/querystring'
+import { querystring } from 'jails.stdlib/querystring'
 
 // https://my-awesome-site.com?search=david
 const { search } = querystring()

package/router/README.md

@@ -11,7 +11,7 @@ Documentation : https://github.com/baseprime/grapnel
 ## Usage
 
 ```js
-import { Router } from 'jails.std/router'
+import { Router } from 'jails.stdlib/router'
 
 const router = new Router()
 

package/storage/README.md

@@ -8,7 +8,7 @@ The storage is a wrapper for the localStorage and sessionStorage global objects.
 ### For local storage
 
 ```js
-import { storage } from 'jails.std/storage'
+import { storage } from 'jails.stdlib/storage'
 
 //Save data
 storage.local.set('item', { my :'item' }); // Save data and return { my:'item' }

package/store/README.md

@@ -12,7 +12,7 @@ Store( initialState: Object , actions: Object )
 ## Usage
 
 ```js
-import { Store } from 'jails.std/store'
+import { Store } from 'jails.stdlib/store'
 
 const initialState = {
     loading: false,

package/third-party/README.md

@@ -28,7 +28,7 @@ The `thirdParty` will execute the text script code and then will load the cdn li
 This way you can have the control of third party code execution and when it should be executed inside your application flow.
 
 ```js
-import { thirdParty } from 'jails.std/third-party'
+import { thirdParty } from 'jails.stdlib/third-party'
 
 export const analytics = thirdParty('analytics')
 

package/throttle/README.md

@@ -9,7 +9,7 @@ Limits a function's execution to at most once per specified time interval.
 ### Usage
 
 ```js
-import { throttle } from 'jails.std/throttle'
+import { throttle } from 'jails.stdlib/throttle'
 
 const onscroll = throttle(() => {
   console.log('throttling scroll')