jails.stdlib 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +22 -0
- package/build.js +34 -0
- package/cancelable/README.md +41 -0
- package/cancelable/index.d.ts +1 -0
- package/cancelable/index.js +16 -0
- package/cancelable/index.ts +18 -0
- package/cancelable/index.umd.js +1 -0
- package/debounce/README.md +21 -0
- package/debounce/index.d.ts +1 -0
- package/debounce/index.js +11 -0
- package/debounce/index.ts +8 -0
- package/debounce/index.umd.js +1 -0
- package/delay/README.md +17 -0
- package/delay/index.d.ts +1 -0
- package/delay/index.js +6 -0
- package/delay/index.ts +6 -0
- package/delay/index.umd.js +1 -0
- package/form-validation/index.d.ts +18 -0
- package/form-validation/index.js +119 -0
- package/form-validation/index.ts +198 -0
- package/form-validation/index.umd.js +1 -0
- package/form-validation/readme.md +117 -0
- package/import-css/README.md +22 -0
- package/import-css/index.d.ts +1 -0
- package/import-css/index.js +7 -0
- package/import-css/index.ts +11 -0
- package/import-css/index.umd.js +1 -0
- package/import-html/README.md +18 -0
- package/import-html/index.d.ts +4 -0
- package/import-html/index.js +4 -0
- package/import-html/index.ts +4 -0
- package/import-html/index.umd.js +1 -0
- package/import-js/README.md +22 -0
- package/import-js/index.d.ts +5 -0
- package/import-js/index.js +7 -0
- package/import-js/index.ts +15 -0
- package/import-js/index.umd.js +1 -0
- package/is-touch/README.md +18 -0
- package/is-touch/index.d.ts +1 -0
- package/is-touch/index.js +4 -0
- package/is-touch/index.ts +4 -0
- package/is-touch/index.umd.js +1 -0
- package/is-visible/README.md +24 -0
- package/is-visible/index.d.ts +7 -0
- package/is-visible/index.js +11 -0
- package/is-visible/index.ts +20 -0
- package/is-visible/index.umd.js +1 -0
- package/lazyload-image/README.md +28 -0
- package/lazyload-image/index.d.ts +1 -0
- package/lazyload-image/index.js +235 -0
- package/lazyload-image/index.ts +3 -0
- package/lazyload-image/index.umd.js +1 -0
- package/messenger/README.md +109 -0
- package/messenger/index.d.ts +9 -0
- package/messenger/index.js +39 -0
- package/messenger/index.ts +38 -0
- package/messenger/index.umd.js +1 -0
- package/mfe/README.md +90 -0
- package/mfe/index.d.ts +11 -0
- package/mfe/index.js +99 -0
- package/mfe/index.ts +141 -0
- package/mfe/index.umd.js +1 -0
- package/outlet/README.md +46 -0
- package/outlet/index.d.ts +6 -0
- package/outlet/index.js +550 -0
- package/outlet/index.ts +101 -0
- package/outlet/index.umd.js +1 -0
- package/package.json +25 -0
- package/querystring/README.md +19 -0
- package/querystring/index.d.ts +1 -0
- package/querystring/index.js +9 -0
- package/querystring/index.ts +9 -0
- package/querystring/index.umd.js +1 -0
- package/router/README.md +23 -0
- package/router/index.d.ts +1 -0
- package/router/index.js +134 -0
- package/router/index.ts +3 -0
- package/router/index.umd.js +1 -0
- package/storage/README.md +34 -0
- package/storage/index.d.ts +12 -0
- package/storage/index.js +39 -0
- package/storage/index.ts +45 -0
- package/storage/index.umd.js +1 -0
- package/store/README.md +44 -0
- package/store/index.d.ts +1 -0
- package/store/index.js +50 -0
- package/store/index.ts +1 -0
- package/store/index.umd.js +1 -0
- package/third-party/README.md +44 -0
- package/third-party/index.d.ts +8 -0
- package/third-party/index.js +15 -0
- package/third-party/index.ts +30 -0
- package/third-party/index.umd.js +1 -0
- package/throttle/README.md +21 -0
- package/throttle/index.d.ts +1 -0
- package/throttle/index.js +9 -0
- package/throttle/index.ts +10 -0
- package/throttle/index.umd.js +1 -0
- package/tsconfig.json +14 -0
- package/vite-env.d.ts +1 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2023 Jails.org
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
|
|
2
|
+
<div align="center">
|
|
3
|
+
<h1>jails.std</h1>
|
|
4
|
+
<h4>The Jails Standard Library</h4>
|
|
5
|
+
</div>
|
|
6
|
+
|
|
7
|
+
<br />
|
|
8
|
+
|
|
9
|
+
## Installing
|
|
10
|
+
|
|
11
|
+
```
|
|
12
|
+
npm install jails.std
|
|
13
|
+
```
|
|
14
|
+
or
|
|
15
|
+
|
|
16
|
+
```
|
|
17
|
+
yarn add jails.std
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
<br />
|
|
21
|
+
|
|
22
|
+
See more details about each module inside their respective folders.
|
package/build.js
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
const { globSync } = require('glob')
|
|
2
|
+
const { build } = require('vite')
|
|
3
|
+
const path = require('path')
|
|
4
|
+
|
|
5
|
+
const files = globSync('./**/index.ts')
|
|
6
|
+
.map( file => {
|
|
7
|
+
|
|
8
|
+
const dirname = path.dirname(file)
|
|
9
|
+
const filename = path.basename(file)
|
|
10
|
+
const name = path.basename(dirname)
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
emptyOutDir: false,
|
|
14
|
+
target: 'es2015',
|
|
15
|
+
outDir: path.resolve(`./${dirname}`),
|
|
16
|
+
lib: {
|
|
17
|
+
name,
|
|
18
|
+
entry: `./${dirname}/${filename}`,
|
|
19
|
+
formats:['umd', 'esm'],
|
|
20
|
+
fileName: (type) => {
|
|
21
|
+
return type == 'umd' ? 'index.umd.js' : 'index.js'
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
rollupOptions: {
|
|
25
|
+
output: {
|
|
26
|
+
exports: 'named'
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
})
|
|
31
|
+
|
|
32
|
+
files.forEach( async (library) => {
|
|
33
|
+
await build({ build: library })
|
|
34
|
+
})
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
|
|
2
|
+
# cancelable
|
|
3
|
+
```ts
|
|
4
|
+
cancelable( fn: Function ) : Promise<any>
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
TIt ensures only the latest async call resolves, ignoring all previous ones, so `.then` runs only for the most recent success and `.catch` only for real errors.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Usage
|
|
11
|
+
|
|
12
|
+
```js
|
|
13
|
+
import { cancelable } from 'jails.std/cancelable'
|
|
14
|
+
|
|
15
|
+
export const getService = () => {
|
|
16
|
+
return new Promise((resolve, reject) => {
|
|
17
|
+
setTimeout(() => {
|
|
18
|
+
Math.random() < 0.5
|
|
19
|
+
? reject({ message: 'Got an error!' })
|
|
20
|
+
: resolve({ message: 'Success!' })
|
|
21
|
+
}, 5000)
|
|
22
|
+
})
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
const cancelableGetService = cancelable(getService)
|
|
26
|
+
|
|
27
|
+
cancelableGetService()
|
|
28
|
+
.then((result) => console.log(result))
|
|
29
|
+
.catch((err) => { console.log(err) })
|
|
30
|
+
|
|
31
|
+
cancelableGetService()
|
|
32
|
+
.then((result) => console.log(result))
|
|
33
|
+
.catch((err) => { console.log(err) })
|
|
34
|
+
|
|
35
|
+
cancelableGetService()
|
|
36
|
+
.then((result) => console.log(result))
|
|
37
|
+
.catch((err) => { console.log(err) })
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Only the last `cancelableGetService()` callback will be called, ignoring the other calls.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const cancelable: (fn: any) => (...args: any[]) => Promise<unknown>;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
|
|
2
|
+
export const cancelable = (fn) => {
|
|
3
|
+
let callId = 0
|
|
4
|
+
|
|
5
|
+
return (...args) => {
|
|
6
|
+
const thisCall = ++callId
|
|
7
|
+
|
|
8
|
+
return new Promise((resolve, reject) => {
|
|
9
|
+
fn(...args)
|
|
10
|
+
.then((val) => {
|
|
11
|
+
if (thisCall === callId) resolve(val) // only last call resolves
|
|
12
|
+
})
|
|
13
|
+
.catch((err) => {
|
|
14
|
+
if (thisCall === callId) reject(err) // only last call rejects on real error
|
|
15
|
+
})
|
|
16
|
+
})
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,n){typeof exports=="object"&&typeof module!="undefined"?n(exports):typeof define=="function"&&define.amd?define(["exports"],n):(e=typeof globalThis!="undefined"?globalThis:e||self,n(e.cancelable={}))})(this,(function(e){"use strict";const n=o=>{let t=0;return(...c)=>{const l=++t;return new Promise((f,d)=>{o(...c).then(i=>{l===t&&f(i)}).catch(i=>{l===t&&d(i)})})}};e.cancelable=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
|
|
2
|
+
# debounce
|
|
3
|
+
```ts
|
|
4
|
+
debounce( fn: Function, timeInterval? = 250 )
|
|
5
|
+
```
|
|
6
|
+
|
|
7
|
+
Delays a function's execution until after a specified pause in activity.
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
### Usage
|
|
11
|
+
|
|
12
|
+
```js
|
|
13
|
+
import { debounce } from 'jails.std/debounce'
|
|
14
|
+
|
|
15
|
+
const oninput = debounce(() => {
|
|
16
|
+
console.log('debouncing input')
|
|
17
|
+
})
|
|
18
|
+
|
|
19
|
+
input.addEventListener('oninput', oninput)
|
|
20
|
+
|
|
21
|
+
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const debounce: (func: Function, timeout?: number) => (...args: any[]) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.debounce={}))})(this,(function(e){"use strict";const t=(o,i=250)=>{let n;return(...d)=>{clearTimeout(n),n=setTimeout(()=>{o.apply(void 0,d)},i)}};e.debounce=t,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
package/delay/README.md
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
## delay
|
|
2
|
+
```ts
|
|
3
|
+
delay( milliseconds? = 100 ) => ( data: any? ) : Promise<any>
|
|
4
|
+
```
|
|
5
|
+
|
|
6
|
+
Delays the next `.then` promise chain.
|
|
7
|
+
|
|
8
|
+
### Usage
|
|
9
|
+
|
|
10
|
+
```js
|
|
11
|
+
import { delay } from 'jails.std/delay'
|
|
12
|
+
|
|
13
|
+
fetch('https://jsonplaceholder.typicode.com/todos/1')
|
|
14
|
+
.then( response => response.json() )
|
|
15
|
+
.then( delay(2000) )
|
|
16
|
+
.then( data => console.log( data ) )
|
|
17
|
+
```
|
package/delay/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const delay: (milisseconds?: number) => (data?: any) => any;
|
package/delay/index.js
ADDED
package/delay/index.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports):typeof define=="function"&&define.amd?define(["exports"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.delay={}))})(this,(function(e){"use strict";const t=(n=100)=>i=>new Promise(o=>{setTimeout(()=>o(i),n)});e.delay=t,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default function formValidation({ main, elm, state, on, emit, dependencies, trigger, }: {
|
|
2
|
+
main: any;
|
|
3
|
+
elm: any;
|
|
4
|
+
state: any;
|
|
5
|
+
on: any;
|
|
6
|
+
emit: any;
|
|
7
|
+
dependencies: any;
|
|
8
|
+
trigger: any;
|
|
9
|
+
}): void;
|
|
10
|
+
export declare const model: {
|
|
11
|
+
form: {
|
|
12
|
+
errors: {};
|
|
13
|
+
values: {};
|
|
14
|
+
touched: {};
|
|
15
|
+
isValid: boolean;
|
|
16
|
+
focused: {};
|
|
17
|
+
};
|
|
18
|
+
};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
var T = Object.defineProperty, B = Object.defineProperties;
|
|
2
|
+
var C = Object.getOwnPropertyDescriptors;
|
|
3
|
+
var D = Object.getOwnPropertySymbols;
|
|
4
|
+
var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
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) => {
|
|
6
|
+
for (var e in r || (r = {}))
|
|
7
|
+
G.call(r, e) && A(a, e, r[e]);
|
|
8
|
+
if (D)
|
|
9
|
+
for (var e of D(r))
|
|
10
|
+
H.call(r, e) && A(a, e, r[e]);
|
|
11
|
+
return a;
|
|
12
|
+
}, L = (a, r) => B(a, C(r));
|
|
13
|
+
const M = "form-validation", v = "[data-validation]", J = "[data-mask]";
|
|
14
|
+
function U({
|
|
15
|
+
main: a,
|
|
16
|
+
elm: r,
|
|
17
|
+
state: e,
|
|
18
|
+
on: n,
|
|
19
|
+
emit: m,
|
|
20
|
+
dependencies: y,
|
|
21
|
+
trigger: F
|
|
22
|
+
}) {
|
|
23
|
+
var V;
|
|
24
|
+
const { validations: g, masks: E } = y, f = (V = r.querySelector("input,select,textarea")) == null ? void 0 : V.form;
|
|
25
|
+
let u = S(f);
|
|
26
|
+
a((t) => {
|
|
27
|
+
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();
|
|
28
|
+
});
|
|
29
|
+
const I = () => {
|
|
30
|
+
if (!g)
|
|
31
|
+
throw new Error(
|
|
32
|
+
"<form-validation> - No validations provided in dependencies"
|
|
33
|
+
);
|
|
34
|
+
const t = k();
|
|
35
|
+
e.set((o) => o.form.values = t);
|
|
36
|
+
}, k = () => {
|
|
37
|
+
const t = {};
|
|
38
|
+
return u.forEach((o) => t[o] = ""), t;
|
|
39
|
+
}, N = (t) => {
|
|
40
|
+
const o = t.target.name;
|
|
41
|
+
e.set((s) => {
|
|
42
|
+
s.form.touched[o] = !0, s.form.focused[o] = !0;
|
|
43
|
+
});
|
|
44
|
+
}, O = (t) => {
|
|
45
|
+
const o = t.target.name;
|
|
46
|
+
e.set((s) => {
|
|
47
|
+
s.form.focused[o] = !1;
|
|
48
|
+
});
|
|
49
|
+
}, h = (t) => (o) => {
|
|
50
|
+
const s = o.target, l = s.name, c = w(s, f), p = s.dataset.validation.split(/\s/), d = [], x = e.get();
|
|
51
|
+
p.forEach((i) => {
|
|
52
|
+
if (i in g) {
|
|
53
|
+
const { ok: q, message: K } = g[i](
|
|
54
|
+
c,
|
|
55
|
+
s,
|
|
56
|
+
f
|
|
57
|
+
);
|
|
58
|
+
q || d.push(K);
|
|
59
|
+
}
|
|
60
|
+
}), d.length ? t === "input" ? (u.add(s.name), e.set((i) => {
|
|
61
|
+
i.form.isValid = !1, x.form.errors[l] && d[0] != x.form.errors[l] && (i.form.errors[l] = d[0]);
|
|
62
|
+
})) : (t === "blur" || t === "change") && (u.add(s.name), e.set((i) => {
|
|
63
|
+
i.form.errors[l] = d[0], i.form.isValid = !1;
|
|
64
|
+
})) : (u.delete(s.name), e.set((i) => {
|
|
65
|
+
delete i.form.errors[l], u.size || (i.form.isValid = !0);
|
|
66
|
+
}));
|
|
67
|
+
}, z = (t) => {
|
|
68
|
+
const { name: o } = t.target, s = w(t.target, f);
|
|
69
|
+
e.set((l) => l.form.values[o] = s);
|
|
70
|
+
}, _ = (t) => {
|
|
71
|
+
t.preventDefault(), F("blur", v);
|
|
72
|
+
const s = e.get().form.errors;
|
|
73
|
+
if (Object.keys(s).length)
|
|
74
|
+
m(`${M}:error`, { errors: s });
|
|
75
|
+
else {
|
|
76
|
+
const c = Q(t.target);
|
|
77
|
+
m(`${M}:submit`, b({}, c));
|
|
78
|
+
}
|
|
79
|
+
}, $ = (t) => {
|
|
80
|
+
let o = t.target.value;
|
|
81
|
+
const { mask: s } = t.target.dataset;
|
|
82
|
+
s.split(/s/).forEach((c) => {
|
|
83
|
+
if (c && c in E) {
|
|
84
|
+
const p = E[c];
|
|
85
|
+
o = p(o, t.target, t.target.form);
|
|
86
|
+
}
|
|
87
|
+
}), e.set((c) => c.form.values[t.target.name] = o || "");
|
|
88
|
+
}, j = () => {
|
|
89
|
+
u = S(f), e.set({
|
|
90
|
+
form: L(b({}, P.form), {
|
|
91
|
+
values: k()
|
|
92
|
+
})
|
|
93
|
+
});
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
const P = {
|
|
97
|
+
form: {
|
|
98
|
+
errors: {},
|
|
99
|
+
values: {},
|
|
100
|
+
touched: {},
|
|
101
|
+
isValid: !1,
|
|
102
|
+
focused: {}
|
|
103
|
+
}
|
|
104
|
+
}, Q = (a) => {
|
|
105
|
+
const r = new FormData(a), e = {};
|
|
106
|
+
for (let [n, m] of r)
|
|
107
|
+
e[n] = m;
|
|
108
|
+
return { formData: r, data: e };
|
|
109
|
+
}, w = (a, r) => {
|
|
110
|
+
const { name: e, type: n } = a;
|
|
111
|
+
return n == "checkbox" ? a.checked ? a.value : "" : r[e].value;
|
|
112
|
+
}, S = (a) => {
|
|
113
|
+
const r = /* @__PURE__ */ new Set();
|
|
114
|
+
return Array.from(a.elements).filter((e) => e.name && e.dataset.validation).forEach((e) => r.add(e.name)), r;
|
|
115
|
+
};
|
|
116
|
+
export {
|
|
117
|
+
U as default,
|
|
118
|
+
P as model
|
|
119
|
+
};
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
const NAME = 'form-validation'
|
|
2
|
+
const DVALIDATION = `[data-validation]`
|
|
3
|
+
const DMASK = '[data-mask]'
|
|
4
|
+
|
|
5
|
+
export default function formValidation({
|
|
6
|
+
main,
|
|
7
|
+
elm,
|
|
8
|
+
state,
|
|
9
|
+
on,
|
|
10
|
+
emit,
|
|
11
|
+
dependencies,
|
|
12
|
+
trigger,
|
|
13
|
+
}) {
|
|
14
|
+
//
|
|
15
|
+
const { validations, masks } = dependencies
|
|
16
|
+
const form = elm.querySelector('input,select,textarea')?.form
|
|
17
|
+
let fields = getFields(form)
|
|
18
|
+
|
|
19
|
+
main((_) => {
|
|
20
|
+
on('input', 'input, textarea, select', update)
|
|
21
|
+
on('input', DMASK, handleMask)
|
|
22
|
+
on('input', DVALIDATION, validate('input'))
|
|
23
|
+
on('change', DVALIDATION, validate('change'))
|
|
24
|
+
on('blur', DVALIDATION, validate('blur'))
|
|
25
|
+
on('focus', 'input, textarea, select', onfocus)
|
|
26
|
+
on('blur', 'input, textarea, select', onblur)
|
|
27
|
+
|
|
28
|
+
form.addEventListener('reset', reset)
|
|
29
|
+
form.addEventListener('submit', onsubmit)
|
|
30
|
+
|
|
31
|
+
initialValues()
|
|
32
|
+
})
|
|
33
|
+
|
|
34
|
+
const initialValues = () => {
|
|
35
|
+
if (!validations) {
|
|
36
|
+
throw new Error(
|
|
37
|
+
'<form-validation> - No validations provided in dependencies'
|
|
38
|
+
)
|
|
39
|
+
}
|
|
40
|
+
const fields = getInitialValues()
|
|
41
|
+
state.set((s) => (s.form.values = fields))
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
const getInitialValues = () => {
|
|
45
|
+
const fields_ = {}
|
|
46
|
+
fields.forEach((name:string) => (fields_[name] = ''))
|
|
47
|
+
return fields_
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
const onfocus = (e) => {
|
|
51
|
+
const name = e.target.name
|
|
52
|
+
state.set((s) => {
|
|
53
|
+
s.form.touched[name] = true
|
|
54
|
+
s.form.focused[name] = true
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const onblur = (e) => {
|
|
59
|
+
const name = e.target.name
|
|
60
|
+
state.set((s) => {
|
|
61
|
+
s.form.focused[name] = false
|
|
62
|
+
})
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
const validate = (type) => (e) => {
|
|
66
|
+
const input = e.target
|
|
67
|
+
const name = input.name
|
|
68
|
+
const value = getValueOfField(input, form)
|
|
69
|
+
const validationList = input.dataset.validation.split(/\s/)
|
|
70
|
+
const errorsList = []
|
|
71
|
+
const currentState = state.get()
|
|
72
|
+
|
|
73
|
+
validationList.forEach((validation) => {
|
|
74
|
+
if (validation in validations) {
|
|
75
|
+
const { ok, message } = validations[validation](
|
|
76
|
+
value,
|
|
77
|
+
input,
|
|
78
|
+
form
|
|
79
|
+
)
|
|
80
|
+
if (!ok) {
|
|
81
|
+
errorsList.push(message)
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
})
|
|
85
|
+
|
|
86
|
+
if (errorsList.length) {
|
|
87
|
+
if (type === 'input') {
|
|
88
|
+
fields.add(input.name)
|
|
89
|
+
state.set((s) => {
|
|
90
|
+
s.form.isValid = false
|
|
91
|
+
if (
|
|
92
|
+
currentState.form.errors[name] &&
|
|
93
|
+
errorsList[0] != currentState.form.errors[name]
|
|
94
|
+
) {
|
|
95
|
+
s.form.errors[name] = errorsList[0]
|
|
96
|
+
}
|
|
97
|
+
})
|
|
98
|
+
} else if (type === 'blur' || type === 'change') {
|
|
99
|
+
fields.add(input.name)
|
|
100
|
+
state.set((s) => {
|
|
101
|
+
s.form.errors[name] = errorsList[0]
|
|
102
|
+
s.form.isValid = false
|
|
103
|
+
})
|
|
104
|
+
}
|
|
105
|
+
} else {
|
|
106
|
+
fields.delete(input.name)
|
|
107
|
+
state.set((s) => {
|
|
108
|
+
delete s.form.errors[name]
|
|
109
|
+
if (!fields.size) {
|
|
110
|
+
s.form.isValid = true
|
|
111
|
+
}
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
const update = (e) => {
|
|
117
|
+
const { name } = e.target
|
|
118
|
+
const value = getValueOfField(e.target, form)
|
|
119
|
+
state.set((s) => (s.form.values[name] = value))
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
const onsubmit = (e) => {
|
|
123
|
+
e.preventDefault()
|
|
124
|
+
trigger('blur', DVALIDATION)
|
|
125
|
+
|
|
126
|
+
const data = state.get()
|
|
127
|
+
const errors = data.form.errors
|
|
128
|
+
const hasErrors = Object.keys(errors).length
|
|
129
|
+
|
|
130
|
+
if (!hasErrors) {
|
|
131
|
+
const data = serialize(e.target)
|
|
132
|
+
emit(`${NAME}:submit`, { ...data })
|
|
133
|
+
} else {
|
|
134
|
+
emit(`${NAME}:error`, { errors })
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
const handleMask = (e) => {
|
|
139
|
+
let value = e.target.value
|
|
140
|
+
const { mask } = e.target.dataset
|
|
141
|
+
const allMasks = mask.split(/s/)
|
|
142
|
+
|
|
143
|
+
allMasks.forEach((mask) => {
|
|
144
|
+
if (mask && mask in masks) {
|
|
145
|
+
const fn = masks[mask]
|
|
146
|
+
value = fn(value, e.target, e.target.form)
|
|
147
|
+
}
|
|
148
|
+
})
|
|
149
|
+
|
|
150
|
+
state.set((s) => (s.form.values[e.target.name] = value || ''))
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
const reset = () => {
|
|
154
|
+
fields = getFields(form)
|
|
155
|
+
state.set({
|
|
156
|
+
form: {
|
|
157
|
+
...model.form,
|
|
158
|
+
values: getInitialValues()
|
|
159
|
+
}
|
|
160
|
+
})
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
export const model = {
|
|
165
|
+
form: {
|
|
166
|
+
errors: {},
|
|
167
|
+
values: {},
|
|
168
|
+
touched: {},
|
|
169
|
+
isValid: false,
|
|
170
|
+
focused: {}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
const serialize = (form) => {
|
|
175
|
+
const formData = new FormData(form)
|
|
176
|
+
const data = {}
|
|
177
|
+
for (let [key, value] of formData) {
|
|
178
|
+
data[key] = value
|
|
179
|
+
}
|
|
180
|
+
return { formData, data }
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
const getValueOfField = (field, form) => {
|
|
184
|
+
const { name, type } = field
|
|
185
|
+
if (type == 'checkbox') {
|
|
186
|
+
return field.checked ? field.value : ''
|
|
187
|
+
} else {
|
|
188
|
+
return form[name].value
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
const getFields = (form) => {
|
|
193
|
+
const list = new Set()
|
|
194
|
+
Array.from(form.elements)
|
|
195
|
+
.filter((field:any) => field.name && field.dataset.validation)
|
|
196
|
+
.forEach((field:any) => list.add(field.name))
|
|
197
|
+
return list
|
|
198
|
+
}
|
|
@@ -0,0 +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"}})}));
|