@marianmeres/stuic 1.61.0 → 1.62.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/dist/actions/pre-submit-validity-check.d.ts +3 -0
- package/dist/actions/pre-submit-validity-check.js +21 -0
- package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts +4 -4
- package/dist/components/Input/Field.svelte +2 -2
- package/dist/components/Input/FieldSelect.svelte +2 -2
- package/package.json +1 -1
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// this smells like a hack...
|
|
2
|
+
// The problem: custom validity checks via `validate` action are registered on "input" or "change" events.
|
|
3
|
+
// When a form is submitted without touching those custom validated elements, those will not be
|
|
4
|
+
// validity-checked which is not desired... I'm not able to come up with better solution
|
|
5
|
+
// than to manually trigger events which will then trigger the custom validation...
|
|
6
|
+
export const preSubmitValidityCheck = (node) => {
|
|
7
|
+
const onSubmit = () => {
|
|
8
|
+
for (let i = 0; i < node.elements?.length; i++) {
|
|
9
|
+
let el = node.elements[i];
|
|
10
|
+
el.dispatchEvent(new Event('input', { bubbles: true }));
|
|
11
|
+
el.dispatchEvent(new Event('change', { bubbles: true }));
|
|
12
|
+
typeof el.checkValidity === 'function' && !el.checkValidity();
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
node.addEventListener('submit', onSubmit, true);
|
|
16
|
+
return {
|
|
17
|
+
destroy() {
|
|
18
|
+
node.removeEventListener('submit', onSubmit, true);
|
|
19
|
+
},
|
|
20
|
+
};
|
|
21
|
+
};
|
|
@@ -11,10 +11,10 @@ export declare class DismissibleMessageConfig {
|
|
|
11
11
|
declare const __propDef: {
|
|
12
12
|
props: {
|
|
13
13
|
class?: {
|
|
14
|
-
box?:
|
|
15
|
-
content?:
|
|
16
|
-
dismiss?:
|
|
17
|
-
x?:
|
|
14
|
+
box?: string | undefined;
|
|
15
|
+
content?: string | undefined;
|
|
16
|
+
dismiss?: string | undefined;
|
|
17
|
+
x?: string | undefined;
|
|
18
18
|
} | undefined;
|
|
19
19
|
duration?: number | undefined;
|
|
20
20
|
message: THC;
|
|
@@ -41,9 +41,9 @@ const _PRESET = {
|
|
|
41
41
|
placeholder:text-black/35 placeholder:tracking-tight
|
|
42
42
|
`,
|
|
43
43
|
invalid: `border-stuic-primary`,
|
|
44
|
-
validationMessage: `
|
|
44
|
+
validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
|
|
45
45
|
description: `mx-2 mt-1 text-sm opacity-50`,
|
|
46
|
-
below: `mx-2
|
|
46
|
+
below: `mx-2 my-1`,
|
|
47
47
|
asterix: `after:content-['*'] after:opacity-30 after:pl-1`
|
|
48
48
|
};
|
|
49
49
|
const _PRESET_BY_SIZE = {
|
|
@@ -37,9 +37,9 @@ const _PRESET = {
|
|
|
37
37
|
placeholder:text-black/35 placeholder:tracking-tight
|
|
38
38
|
`,
|
|
39
39
|
invalid: `border-stuic-primary`,
|
|
40
|
-
validationMessage: `
|
|
40
|
+
validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
|
|
41
41
|
description: `mx-2 mt-1 text-sm opacity-50`,
|
|
42
|
-
below: `mx-2
|
|
42
|
+
below: `mx-2 my-1`,
|
|
43
43
|
asterix: `after:content-['*'] after:opacity-30 after:pl-1`
|
|
44
44
|
};
|
|
45
45
|
const _PRESET_BY_SIZE = {
|