lutra 0.0.19 → 0.0.33

package/dist/form/FieldContent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">import Label from "./Label.svelte";
 import FieldError from "./FieldError.svelte";
+import StringOrSnippet from "../utils/StringOrSnippet.svelte";
 let {
   id,
   contained,
@@ -7,9 +8,11 @@ let {
   suffix,
   label,
   labelTip,
+  help,
   type = "text",
   direction = "column",
   // 'row' | 'column'
+  required,
   children,
   field,
   issue
@@ -18,61 +21,67 @@ let {
 
 {#snippet _prefix()}
     <div class="Fix Prefix">
-        {#if typeof prefix === 'string'}
-            {prefix}
-        {:else}
-            {@render prefix()}
-        {/if}
+        <StringOrSnippet content={prefix} />
     </div>
 {/snippet}
 
 {#snippet _suffix()}
     <div class="Fix Suffix">
-        {#if typeof suffix === 'string'}
-            {suffix}
-        {:else}
-            {@render suffix()}
-        {/if}
+        <StringOrSnippet content={suffix} />
     </div>
 {/snippet}
 
-<div class="FieldContent {type} {direction}" class:contained>
-    <Label {label} tip={labelTip} {id} />
-    {#if contained}
-        <div
-            class="Field"
-            class:hasPrefix={prefix}
-            class:hasSuffix={suffix}
-            class:invalid={field?.tainted && issue?.code}
-        >
+<div class="FieldContentContainer">
+    <div class="FieldContent {type} {direction}" class:contained>
+        <Label {label} tip={labelTip} {id} {required} />
+        {#if contained}
+            <div
+                class="Field"
+                class:hasPrefix={prefix}
+                class:hasSuffix={suffix}
+                class:invalid={field?.tainted && issue?.code}
+            >
+                {#if prefix}
+                    {@render _prefix()}
+                {/if}
+    
+                {@render children()}
+    
+                {#if suffix}
+                    {@render _suffix()}
+                {/if}
+            </div>
+        {:else}
             {#if prefix}
                 {@render _prefix()}
             {/if}
-
+    
             {@render children()}
-
+    
             {#if suffix}
                 {@render _suffix()}
             {/if}
-        </div>
-    {:else}
-        {#if prefix}
-            {@render _prefix()}
-        {/if}
-
-        {@render children()}
-
-        {#if suffix}
-            {@render _suffix()}
         {/if}
+    
+    </div>
+    
+    {#if help}
+        <div class="Help">
+            <StringOrSnippet content={help} />
+        </div>
     {/if}
-
+    
     {#if field?.tainted && issue?.code}
         <FieldError code={issue.code} message={issue.message} />
     {/if}
 </div>
 
 <style>
+    .FieldContentContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75em;
+    }
     .FieldContent {
         display: flex;
         gap: 0.75em;
@@ -113,10 +122,14 @@ let {
     .Prefix {
         padding-inline-end: 0;
     }
-    .Field:has(input:focus-visible) {
+    .Field:has(input:focus-visible),
+    .Field:has(select:focus-visible),
+    .Field:has(textarea:focus-visible) {
         outline: var(--focus-outline);
     }
     .Field:has(input:focus-visible:user-invalid),
+    .Field:has(select:focus-visible:user-invalid),
+    .Field:has(textarea:focus-visible:user-invalid),
     .Field.invalid:has(input:focus-visible) {
         outline-color: var(--focus-color-error); 
     }
@@ -131,4 +144,10 @@ let {
         outline-offset: 3px;
         border-radius: calc(var(--field-radius) - 2px);
     }
+    .Help {
+        font-size: 0.85em;
+        color: var(--text-subtle);
+        line-height: 1.4;
+        font-weight: 400;
+    }
 </style>

package/dist/form/FieldContent.svelte.d.ts

@@ -1,59 +1,31 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
 import type { FormField, FormIssue } from "./types.js";
-declare const __propDef: {
-    props: {
-        id: string;
-        contained?: boolean | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        type?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        direction?: "row" | "column" | undefined;
-        children: Snippet;
-        field?: FormField | undefined;
-        issue?: FormIssue | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldContentProps = typeof __propDef.props;
-export type FieldContentEvents = typeof __propDef.events;
-export type FieldContentSlots = typeof __propDef.slots;
-export default class FieldContent extends SvelteComponent<FieldContentProps, FieldContentEvents, FieldContentSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        id: string;
-        contained?: boolean | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        type?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        direction?: "row" | "column" | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-        field?: FormField | undefined;
-        issue?: FormIssue | undefined;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FieldContent: $$__sveltets_2_IsomorphicComponent<{
+    id: string;
+    contained?: boolean;
+    prefix?: string | Snippet;
+    suffix?: string | Snippet;
+    help?: string | Snippet;
+    type?: string;
+    label?: string | Snippet;
+    labelTip?: string | Snippet;
+    direction?: "row" | "column";
+    required?: boolean;
+    children: Snippet;
+    field?: FormField;
+    issue?: FormIssue;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FieldContent = InstanceType<typeof FieldContent>;
+export default FieldContent;

package/dist/form/FieldError.svelte.d.ts

@@ -1,21 +1,18 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        code: string;
-        message?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldErrorProps = typeof __propDef.props;
-export type FieldErrorEvents = typeof __propDef.events;
-export type FieldErrorSlots = typeof __propDef.slots;
-export default class FieldError extends SvelteComponent<FieldErrorProps, FieldErrorEvents, FieldErrorSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        code: string;
-        message?: string | undefined;
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FieldError: $$__sveltets_2_IsomorphicComponent<{
+    code: string;
+    message?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FieldError = InstanceType<typeof FieldError>;
+export default FieldError;

package/dist/form/FieldSection.svelte.d.ts

@@ -1,34 +1,20 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        title?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldSectionProps = typeof __propDef.props;
-export type FieldSectionEvents = typeof __propDef.events;
-export type FieldSectionSlots = typeof __propDef.slots;
-export default class FieldSection extends SvelteComponent<FieldSectionProps, FieldSectionEvents, FieldSectionSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        title?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const FieldSection: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | Snippet;
+    description?: string | Snippet;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type FieldSection = InstanceType<typeof FieldSection>;
+export default FieldSection;

package/dist/form/Fieldset.svelte.d.ts

@@ -1,42 +1,31 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
-declare const __propDef: {
-    props: {
-        fullWidth?: boolean | undefined;
-        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        legend?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        columns?: number | [number] | [number, number] | [number, number, number] | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FieldsetProps = typeof __propDef.props;
-export type FieldsetEvents = typeof __propDef.events;
-export type FieldsetSlots = typeof __propDef.slots;
-export default class Fieldset extends SvelteComponent<FieldsetProps, FieldsetEvents, FieldsetSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        fullWidth?: boolean | undefined;
-        description?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        contained?: boolean | undefined;
-        rounded?: boolean | undefined;
-        legend?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        columns?: number | [number] | [number, number] | [number, number, number] | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Fieldset: $$__sveltets_2_IsomorphicComponent<{
+    /** Whether the fieldset should be full width. */
+    fullWidth?: boolean;
+    /** The description of the fieldset. */
+    description?: string | Snippet;
+    /** Whether the fieldset should be contained. */
+    contained?: boolean;
+    /** Whether the fieldset should be rounded. */
+    rounded?: boolean;
+    /** The legend of the fieldset. */
+    legend?: string | Snippet;
+    /** The number of columns to display the fieldset in. You can pass a single number or an array of numbers. The array will be used to set the number of columns at different breakpoints (lg, md, sm). */
+    columns?: number | [number] | [number, number] | [number, number, number];
+    /** Content to be rendered inside the fieldset. */
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Fieldset = InstanceType<typeof Fieldset>;
+export default Fieldset;

package/dist/form/Form.svelte

@@ -8,39 +8,52 @@ import { array } from "zod";
 import { arrayPathToStringPath, getIndividualValidators, parseFormIssues } from "./form.js";
 import { useForm } from "./client.svelte.js";
 let {
+  name = "form",
   form: _form,
   action,
   enctype = "multipart/form-data",
   method = "POST",
+  beforeSubmit,
   fullWidth = false,
+  onResult,
+  resetOnUpdate,
   children
 } = $props();
 let form = $state(_form ? useForm(_form) : null);
-setContext("form", form?.form);
-setContext("form.validators", getIndividualValidators(form?.form));
-const schema = form?.form.schema ? dezerialize(form?.form.schema) : null;
+setContext("form", form);
+setContext("form.validators", form ? getIndividualValidators(form) : null);
+const beforeSubmitFunctions = [];
+const addBeforeSubmit = (id, fn) => {
+  if (beforeSubmitFunctions.find((f) => f.id === id)) {
+    return;
+  }
+  beforeSubmitFunctions.push({ id, fn });
+};
+setContext("form.beforeSubmit", addBeforeSubmit);
+const schema = form?.schema ? dezerialize(form?.schema) : null;
 const bodyguard = new Bodyguard();
 let formEl;
 function setFormIssuesAndFields(issues, fields) {
+  console.log("setFormIssuesAndFields", issues, fields);
   if (form) {
-    form.form.issues = issues;
-    form.form.fields = fields;
+    form.issues = issues;
+    form.fields = fields;
   }
 }
 async function validate() {
   if (form && schema) {
-    form.form.tainted = true;
+    form.tainted = true;
     const req = new Request("localhost", {
       method: "POST",
       body: new FormData(formEl)
     });
     const result = await bodyguard.softForm(req, schema.parse);
     if (result.success === true) {
-      form.form.valid = true;
-      form.form.issues = [];
+      form.valid = true;
+      form.issues = [];
     } else {
-      form.form.valid = false;
-      form.form.issues = parseFormIssues(result.error.issues);
+      form.valid = false;
+      form.issues = parseFormIssues(result.error.issues);
     }
   }
 }
@@ -56,33 +69,59 @@ onMount(() => {
         {enctype}
         bind:this={formEl}
         onchange={validate}
-        use:enhance={({ formElement, formData, action, cancel, submitter }) => {
+        use:enhance={async ({ formElement, formData, action, cancel, submitter }) => {
             // `formElement` is this `<form>` element
             // `formData` is its `FormData` object that's about to be submitted
             // `action` is the URL to which the form is posted
             // calling `cancel()` will prevent the submission
             // `submitter` is the `HTMLElement` that caused the form to be submitted
-
-            return async ({ result, update }) => {
+            if(form) form.state = 'loading';
+            //await Promise.resolve(beforeSubmit(form));
+            if(beforeSubmit) await Promise.resolve(beforeSubmit({ form: formElement, data: formData, cancel: () => {
+                if(form) form.state = 'error';
+                cancel();
+            }}));
+            for(const { id, fn } of beforeSubmitFunctions) {
+                await Promise.resolve(fn({ form: formElement, data: formData, cancel: () => {
+                    if(form) form.state = 'error';
+                    cancel();
+                }}));
+            }
+            console.log('form state', form?.state);
+            return async (opts) => {
+                const { result, update } = opts;
                 // `result` is an `ActionResult` object
                 // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
-                console.log('result', result);
-                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data?.form : null;
+                console.log('form result', opts);
+                if(onResult) {
+                    console.log('calling onResult')
+                    onResult(opts);
+                }
+                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data![name] : null;
+                console.log('resultForm', resultForm, form)
                 if(result.type === "success") {
                     if(resultForm && form) {
-                        form.form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
+                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
+                    if(form) form.state = 'success';
+                    console.log('form state', form?.state);
+                    update({ reset: !!resetOnUpdate });
                 } else if(result.type === "failure") {
+                    console.log('FAILURE')
                     if(resultForm && form) {
+                        console.log('setting form issues and fields')
                         setFormIssuesAndFields(
                             Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
                             Object.assign({ fields: [] }, resultForm).fields,
                         );
                     }
+                    if(form) form.state = 'error';
                 } else if(result.type === "error") {
                     console.error('[lutra] Error from form enhance call', result.error);
+                    if(form) form.state = 'error';
                 } else if(result.type === "redirect") {
                     window.location.href = result.location;
+                    if(form) form.state = 'success';
                 }
             };
         }}

package/dist/form/Form.svelte.d.ts

@@ -1,33 +1,38 @@
-import { SvelteComponent } from "svelte";
+import type { ActionResult } from "@sveltejs/kit";
 import type { Snippet } from "svelte";
-import type { Form } from "./types.js";
-declare const __propDef: {
-    props: {
-        form?: Form<any> | undefined;
-        action?: string | undefined;
-        enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
-        method?: "GET" | "POST" | undefined;
-        fullWidth?: boolean | undefined;
-        children: Snippet;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type FormProps = typeof __propDef.props;
-export type FormEvents = typeof __propDef.events;
-export type FormSlots = typeof __propDef.slots;
-export default class Form extends SvelteComponent<FormProps, FormEvents, FormSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        form?: Form<any> | undefined;
-        action?: string | undefined;
-        enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
-        method?: "GET" | "POST" | undefined;
-        fullWidth?: boolean | undefined;
-        children: (this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        };
-    }>);
+import type { BeforeSubmitFn, LutraForm } from "./types.js";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Form: $$__sveltets_2_IsomorphicComponent<{
+    name?: string;
+    form?: LutraForm<any>;
+    action?: string;
+    enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
+    method?: "GET" | "POST";
+    beforeSubmit?: BeforeSubmitFn;
+    fullWidth?: boolean;
+    resetOnUpdate?: boolean;
+    onResult?: (args: {
+        formData: FormData;
+        formElement: HTMLFormElement;
+        action: URL;
+        result: ActionResult<Record<string, unknown> | undefined, Record<string, unknown> | undefined>;
+        update: (options?: {
+            reset?: boolean | undefined;
+            invalidateAll?: boolean | undefined;
+        } | undefined) => void;
+    }) => void;
+    children: Snippet;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type Form = InstanceType<typeof Form>;
+export default Form;