@marianmeres/stuic 1.61.0 → 1.63.0

package/dist/actions/pre-submit-validity-check.d.ts

@@ -0,0 +1,3 @@
+export declare const preSubmitValidityCheck: (node: HTMLFormElement) => {
+    destroy(): void;
+};

package/dist/actions/pre-submit-validity-check.js

@@ -0,0 +1,21 @@
+// this smells like a hack...
+// The problem: custom validity checks via `validate` action are registered on "input" or "change" events.
+// When a form is submitted without touching those custom validated elements, those will not be
+// validity-checked which is not desired... I'm not able to come up with better solution
+// than to manually trigger events which will then trigger the custom validation...
+export const preSubmitValidityCheck = (node) => {
+    const onSubmit = () => {
+        for (let i = 0; i < node.elements?.length; i++) {
+            let el = node.elements[i];
+            el.dispatchEvent(new Event('input', { bubbles: true }));
+            el.dispatchEvent(new Event('change', { bubbles: true }));
+            typeof el.checkValidity === 'function' && !el.checkValidity();
+        }
+    };
+    node.addEventListener('submit', onSubmit, true);
+    return {
+        destroy() {
+            node.removeEventListener('submit', onSubmit, true);
+        },
+    };
+};

package/dist/components/DismissibleMessage/DismissibleMessage.svelte.d.ts

@@ -11,10 +11,10 @@ export declare class DismissibleMessageConfig {
 declare const __propDef: {
     props: {
         class?: {
-            box?: "" | undefined;
-            content?: "" | undefined;
-            dismiss?: "" | undefined;
-            x?: "" | undefined;
+            box?: string | undefined;
+            content?: string | undefined;
+            dismiss?: string | undefined;
+            x?: string | undefined;
         } | undefined;
         duration?: number | undefined;
         message: THC;

package/dist/components/Input/Field.svelte

@@ -41,9 +41,9 @@ const _PRESET = {
 			placeholder:text-black/35 placeholder:tracking-tight
 		`,
   invalid: `border-stuic-primary`,
-  validationMessage: `mt-1 text-xs text-stuic-primary px-2 tracking-tight`,
+  validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
   description: `mx-2 mt-1 text-sm opacity-50`,
-  below: `mx-2 mt-1`,
+  below: `mx-2 my-1`,
   asterix: `after:content-['*'] after:opacity-30 after:pl-1`
 };
 const _PRESET_BY_SIZE = {

package/dist/components/Input/FieldSelect.svelte

@@ -37,9 +37,9 @@ const _PRESET = {
 			placeholder:text-black/35 placeholder:tracking-tight
 		`,
   invalid: `border-stuic-primary`,
-  validationMessage: `mt-1 text-xs text-stuic-primary px-2 tracking-tight`,
+  validationMessage: `my-1 text-xs text-stuic-primary px-2 tracking-tight`,
   description: `mx-2 mt-1 text-sm opacity-50`,
-  below: `mx-2 mt-1`,
+  below: `mx-2 my-1`,
   asterix: `after:content-['*'] after:opacity-30 after:pl-1`
 };
 const _PRESET_BY_SIZE = {

package/dist/index.d.ts

@@ -20,12 +20,13 @@ export { default as Popover } from './components/Popover/Popover.svelte';
 export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
 export { default as Thc, type THC, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 export { default as X } from './components/X/X.svelte';
+export { autogrow } from './actions/autogrow.js';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';
+export { preSubmitValidityCheck } from './actions/pre-submit-validity-check.js';
 export { tooltip, TooltipConfig, type TooltipOptions, } from './actions/tooltip/tooltip.js';
 export { validate, type ValidateOptions, type ValidationResult, } from './actions/validate.js';
 export { trim } from './actions/trim.js';
-export { autogrow } from './actions/autogrow.js';
 export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';
 export { getId } from './utils/get-id.js';

package/dist/index.js

@@ -35,12 +35,13 @@ export { default as Thc, isTHCNotEmpty } from './components/Thc/Thc.svelte';
 //
 export { default as X } from './components/X/X.svelte';
 // actions
+export { autogrow } from './actions/autogrow.js';
 export { focusTrap } from './actions/focus-trap.js';
 export { onOutside } from './actions/on-outside.js';
+export { preSubmitValidityCheck } from './actions/pre-submit-validity-check.js';
 export { tooltip, TooltipConfig, } from './actions/tooltip/tooltip.js';
 export { validate, } from './actions/validate.js';
 export { trim } from './actions/trim.js';
-export { autogrow } from './actions/autogrow.js';
 // utils
 export { calculateAlignment } from './utils/calculate-alignment.js';
 export { DevicePointer } from './utils/device-pointer.js';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "1.61.0",
+	"version": "1.63.0",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package && node ./scripts/date.js",