@marianmeres/stuic 1.60.0 → 1.62.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 = {
@@ -183,7 +183,7 @@ $:
 			class:cursor-not-allowed={disabled}
 			class:opacity-50={disabled}
 		>
-			<div class="flex items-center">
+			<div class="flex">
 				<slot name="input_before" {id} />
 				{#if type === 'textarea'}
 					<textarea

package/dist/components/Input/FieldSelect.svelte

@@ -21,7 +21,6 @@ const _PRESET = {
   box: "mb-4 grid",
   // gap-4
   wrap: `
-			flex items-center
             rounded-md border border-gray-300
             bg-gray-100
             focus-within:border-stuic-primary
@@ -38,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 = {
@@ -175,27 +174,29 @@ $:
 			class:cursor-not-allowed={disabled}
 			class:opacity-50={disabled}
 		>
-			<slot name="input_before" {id} />
-			<select
-				class={_inputClass}
-				bind:value
-				bind:this={_inputEl}
-				{id}
-				{disabled}
-				{required}
-				{tabindex}
-				{autofocus}
-				{name}
-				use:validateAction={validate
-					? { ...(validate === true ? {} : validate), setValidationResult }
-					: undefined}
-			>
-				{#each _options as o, i}
-					<option value={o.value}>{o.label}</option>
-				{/each}
-			</select>
+			<div class="flex">
+				<slot name="input_before" {id} />
+				<select
+					class={_inputClass}
+					bind:value
+					bind:this={_inputEl}
+					{id}
+					{disabled}
+					{required}
+					{tabindex}
+					{autofocus}
+					{name}
+					use:validateAction={validate
+						? { ...(validate === true ? {} : validate), setValidationResult }
+						: undefined}
+				>
+					{#each _options as o, i}
+						<option value={o.value}>{o.label}</option>
+					{/each}
+				</select>
 
-			<slot name="input_after" {id} />
+				<slot name="input_after" {id} />
+			</div>
 		</div>
 		{#if validation && !validation?.valid}
 			<div transition:slide={{ duration: 150 }} class={_validationMessageClass}>

package/package.json

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