lutra 0.0.33 → 0.1.4

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

@@ -1,18 +1,7 @@
-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;
-}
-declare const FieldError: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     code: string;
     message?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FieldError = InstanceType<typeof FieldError>;
+};
+declare const FieldError: import("svelte").Component<$$ComponentProps, {}, "">;
+type FieldError = ReturnType<typeof FieldError>;
 export default FieldError;

package/dist/form/Fieldset.svelte

@@ -1,16 +1,51 @@
-<script lang="ts">let {
-  fullWidth,
-  description,
-  contained,
-  rounded,
-  legend,
-  columns = 1,
-  children
-} = $props();
-let columnsArray = Array.isArray(columns) ? columns : [columns, columns, columns];
-let lgColumns = columnsArray[0];
-let mdColumns = columnsArray[1] || lgColumns;
-let smColumns = columnsArray[2] || mdColumns;
+<script lang="ts">
+    import { getContext, type Snippet } from "svelte";
+
+    /**
+     * @description
+     * A fieldset is a group of related form elements that can be disabled or enabled.
+     * @example
+     * <script>
+     *    import Input from "lutra/Input.svelte";
+     * <\/script>
+     * <Fieldset legend="Personal Information">
+     *    <Input label="First Name" />
+     *    <Input label="Last Name" />
+     * </Fieldset>
+     */
+
+    let {
+        fullWidth,
+        description,
+        contained,
+        rounded,
+        legend,
+        columns = 1,
+        children,
+    }: {
+        /** 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;
+    } = $props();
+
+    if(contained === undefined) { contained = getContext('lutra.form.contained') ?? getContext('lutra.contained') ?? false; }
+
+    let columnsArray = Array.isArray(columns) ? columns : [columns, columns, columns];
+    let lgColumns = columnsArray[0];
+    let mdColumns = columnsArray[1] || lgColumns;
+    let smColumns = columnsArray[2] || mdColumns;
+
 </script>
 
 <div class="FieldsetContainer">

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

@@ -1,15 +1,5 @@
-import type { Snippet } 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;
-}
-declare const Fieldset: $$__sveltets_2_IsomorphicComponent<{
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
     /** Whether the fieldset should be full width. */
     fullWidth?: boolean;
     /** The description of the fieldset. */
@@ -24,8 +14,7 @@ declare const Fieldset: $$__sveltets_2_IsomorphicComponent<{
     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>;
+};
+declare const Fieldset: import("svelte").Component<$$ComponentProps, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
 export default Fieldset;

package/dist/form/Form.svelte

@@ -1,65 +1,148 @@
-<script lang="ts">import { enhance } from "$app/forms";
-import UiContent from "../layout/UIContent.svelte";
-import { Bodyguard } from "@auth70/bodyguard";
-import { onMount, setContext } from "svelte";
-import { get } from "svelte/store";
-import { dezerialize } from "@auth70/zodex-esm";
-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);
-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.issues = issues;
-    form.fields = fields;
-  }
-}
-async function validate() {
-  if (form && schema) {
-    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.valid = true;
-      form.issues = [];
-    } else {
-      form.valid = false;
-      form.issues = parseFormIssues(result.error.issues);
+<script lang="ts">
+    import { enhance } from "$app/forms";
+    import { goto } from '$app/navigation';
+	import UiContent from "../components/UIContent.svelte";
+	import { Bodyguard, type BodyguardValidator } from "@auth70/bodyguard";
+    import type { ActionResult } from "@sveltejs/kit";
+	import { onMount, setContext } from "svelte";
+    import type { Snippet } from "svelte";
+	import { dezerialize } from "zodex";
+	import type { AddBeforeSubmitFn, BeforeSubmitFn, LutraForm } from "./types.js";
+	import { type ZodObject } from "zod";
+	import { getIndividualValidators, parseFormIssues } from "./form.js";
+	import { useForm } from "./client.svelte.js";
+
+    let {
+        name = 'form',
+        form: _form,
+        formEl = $bindable(null),
+        action,
+        enctype = "multipart/form-data",
+        method = "POST",
+        beforesubmit,
+        fullWidth = false,
+        onresult,
+        resetOnUpdate,
+        children,
+        contained,
+        spacing,
+        actionGap,
+        fieldGap,
+        labelGap,
+        titleGap,
+        sectionGap,
+        padding,
+        paddingBlock,
+        paddingInline,
+    }: {
+        name?: string;
+        form?: LutraForm<any>;
+        formEl?: HTMLFormElement | null;
+        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;
+        contained?: boolean;
+        spacing?: string;
+        actionGap?: string;
+        fieldGap?: string;
+        labelGap?: string;
+        titleGap?: string;
+        sectionGap?: string;
+        padding?: string;
+        paddingBlock?: string;
+        paddingInline?: string;
+    } = $props();
+
+    let form = $state(_form ? useForm(_form) : null);
+
+    setContext('form', form);
+    setContext('form.validators', form ? getIndividualValidators(form) : null);
+
+    const beforesubmitFunctions: { id: string, fn: BeforeSubmitFn }[] = [];
+    const addBeforeSubmit: AddBeforeSubmitFn = (id, fn) => {
+        if(beforesubmitFunctions.find((f) => f.id === id)) {
+            return;
+        }
+        beforesubmitFunctions.push({ id, fn });
     }
-  }
-}
-onMount(() => {
-  validate();
-});
+    setContext('form.beforesubmit', addBeforeSubmit);
+
+    const schema = form?.schema ? dezerialize(form?.schema) as ZodObject<any> : null;
+    const bodyguard = new Bodyguard();
+
+    function setFormIssuesAndFields(issues: any, fields: any) {
+        console.log('setFormIssuesAndFields', issues, fields)
+        if(form) {
+            form.issues = issues;
+            form.fields = fields;
+        }
+    }
+
+    async function validate() {
+        if(form && schema) {
+            form.tainted = true;
+            const req = new Request('localhost', {
+                method: 'POST',
+                body: new FormData(formEl!),
+            });
+            const result = await bodyguard.softForm(req, schema.parse as BodyguardValidator);
+            if(result.success === true) {
+                form.valid = true;
+                form.issues = [];
+            } else {
+                form.valid = false;
+                form.issues = parseFormIssues((result.error as any).issues);
+            }
+        }
+    }
+
+    onMount(() => {
+        validate();
+    });
+
+    const styleParams = {
+        actionGap,
+        fieldGap,
+        labelGap,
+        titleGap,
+        sectionGap,
+        padding,
+        paddingBlock,
+        paddingInline,
+    };
+
+    const style = `
+        ${actionGap ? `--form-action-gap: ${actionGap};` : ''}
+        ${fieldGap ? `--form-field-gap: ${fieldGap};` : ''}
+        ${labelGap ? `--form-label-gap: ${labelGap};` : ''}
+        ${titleGap ? `--form-title-gap: ${titleGap};` : ''}
+        ${sectionGap ? `--form-section-gap: ${sectionGap};` : ''}
+        ${
+            paddingBlock || paddingInline
+                ? `
+                    ${paddingBlock ? `--form-padding-block: ${paddingBlock};` : ''}
+                    ${paddingInline ? `--form-padding-inline: ${paddingInline};` : ''}
+                `
+                : padding
+                    ? `--form-padding-block: ${padding}; --form-padding-inline: ${padding};`
+                    : ''
+        }
+    `;
+
 </script>
 
 <UiContent>
@@ -67,6 +150,7 @@ onMount(() => {
         {method}
         {action}
         {enctype}
+        style={style}
         bind:this={formEl}
         onchange={validate}
         use:enhance={async ({ formElement, formData, action, cancel, submitter }) => {
@@ -76,12 +160,12 @@ onMount(() => {
             // calling `cancel()` will prevent the submission
             // `submitter` is the `HTMLElement` that caused the form to be submitted
             if(form) form.state = 'loading';
-            //await Promise.resolve(beforeSubmit(form));
-            if(beforeSubmit) await Promise.resolve(beforeSubmit({ form: formElement, data: formData, cancel: () => {
+            //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) {
+            for(const { id, fn } of beforesubmitFunctions) {
                 await Promise.resolve(fn({ form: formElement, data: formData, cancel: () => {
                     if(form) form.state = 'error';
                     cancel();
@@ -93,21 +177,21 @@ onMount(() => {
                 // `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('form result', opts);
-                if(onResult) {
-                    console.log('calling onResult')
-                    onResult(opts);
+                if(onresult) {
+                    console.log('calling onresult', opts);
+                    onresult(opts);
                 }
                 const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data![name] : null;
-                console.log('resultForm', resultForm, form)
+                console.log('resultForm', resultForm, form);
                 if(result.type === "success") {
                     if(resultForm && form) {
                         form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
                     if(form) form.state = 'success';
-                    console.log('form state', form?.state);
+                    console.log('form state', form?.state, resetOnUpdate, opts);
                     update({ reset: !!resetOnUpdate });
                 } else if(result.type === "failure") {
-                    console.log('FAILURE')
+                    console.log('FAILURE', opts);
                     if(resultForm && form) {
                         console.log('setting form issues and fields')
                         setFormIssuesAndFields(
@@ -117,11 +201,13 @@ onMount(() => {
                     }
                     if(form) form.state = 'error';
                 } else if(result.type === "error") {
-                    console.error('[lutra] Error from form enhance call', result.error);
+                    console.error('[lutra] Error from form enhance call', result.error, opts);
                     if(form) form.state = 'error';
                 } else if(result.type === "redirect") {
-                    window.location.href = result.location;
+                    console.log('redirect', opts);
+                    //window.location.href = result.location;
                     if(form) form.state = 'success';
+                    await goto(result.location);
                 }
             };
         }}
@@ -131,6 +217,4 @@ onMount(() => {
 </UiContent>
 
 <style>
-    form {
-    }
 </style>

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

@@ -1,26 +1,17 @@
 import type { ActionResult } from "@sveltejs/kit";
 import type { Snippet } 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;
-}
-declare const Form: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     name?: string;
     form?: LutraForm<any>;
+    formEl?: HTMLFormElement | null;
     action?: string;
     enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain";
     method?: "GET" | "POST";
-    beforeSubmit?: BeforeSubmitFn;
+    beforesubmit?: BeforeSubmitFn;
     fullWidth?: boolean;
     resetOnUpdate?: boolean;
-    onResult?: (args: {
+    onresult?: (args: {
         formData: FormData;
         formElement: HTMLFormElement;
         action: URL;
@@ -31,8 +22,17 @@ declare const Form: $$__sveltets_2_IsomorphicComponent<{
         } | undefined) => void;
     }) => void;
     children: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Form = InstanceType<typeof Form>;
+    contained?: boolean;
+    spacing?: string;
+    actionGap?: string;
+    fieldGap?: string;
+    labelGap?: string;
+    titleGap?: string;
+    sectionGap?: string;
+    padding?: string;
+    paddingBlock?: string;
+    paddingInline?: string;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "formEl">;
+type Form = ReturnType<typeof Form>;
 export default Form;

package/dist/form/{FieldActions.svelte → FormActions.svelte}

@@ -1,12 +1,21 @@
-<script lang="ts">import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  align = "end",
-  children,
-  info
-} = $props();
+<script lang="ts">
+	import StringOrSnippet from "../util/StringOrSnippet.svelte";
+    import { setContext, type Snippet } from "svelte";
+
+    let {
+        align = 'end',
+        children,
+        info,
+    }: {
+        align?: 'justified' | 'start' | 'center' | 'end' | 'full';
+        children: Snippet;
+        info?: string | Snippet;
+    } = $props();
+
+    setContext('form.actions.align', align);
 </script>
 
-<div class="FieldActions {align}" class:hasInfo={!!info}>
+<div class="FormActions {align}" class:hasInfo={!!info}>
     {#if info}
         <div class="Info">
             <StringOrSnippet content={info} />
@@ -18,10 +27,10 @@ let {
 </div>
 
 <style>
-    .FieldActions {
+    .FormActions {
         display: grid;
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
-        padding: calc(1.5em * var(--fcc)) calc(3em * var(--fcc));
+        background: color-mix(in srgb, var(--form-background-actions) calc(var(--fcc) * 100%), transparent);
+        padding: calc(var(--space-md) * var(--fcc)) calc(var(--space-lg) * var(--fcc));
         grid-column: 1 / -1;
         grid-template-columns: subgrid;
         border-bottom-left-radius: inherit;
@@ -33,28 +42,31 @@ let {
         flex-direction: row;
         align-items: center;
         justify-content: space-between;
-        gap: 1.35em;
+        gap: var(--space-md);
         grid-column: 2 / -1;
     }
-    .FieldActions.start .Actions {
+    .FormActions.start .Actions {
         justify-content: start;
         grid-column: 1 / -1;
     }
-    .FieldActions.middle .Actions {
+    .FormActions.center .Actions {
         justify-content: center;
         grid-column: 1 / -1;
     }
-    .FieldActions.end .Actions {
+    .FormActions.end .Actions {
         justify-content: end;
         grid-column: 1 / -1;
     }
-    .FieldActions.hasInfo .Actions {
+    .FormActions.hasInfo .Actions {
         grid-column: 2 / -1;
     }
+    .FormActions.full .Actions {
+        grid-column: 1 / -1;
+    }
     @container (max-width: 480px) {
-        .FieldActions {
+        .FormActions {
             justify-content: center;
-            gap: 1rem;
+            gap: var(--space-sm);
         }
         .Info {
             order: 1;

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

@@ -0,0 +1,9 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    align?: 'justified' | 'start' | 'center' | 'end' | 'full';
+    children: Snippet;
+    info?: string | Snippet;
+};
+declare const FormActions: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormActions = ReturnType<typeof FormActions>;
+export default FormActions;

package/dist/form/FormSection.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+    /**
+     * @description
+     * A field section is a group of related form elements.
+     */
+    let {
+        title,
+        description,
+        children,
+    }: {
+        title?: string | Snippet;
+        description?: string | Snippet;
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="FormSection" class:noTitle={!title && !description}>
+    {#if title || description}
+        <div class="FormSectionTitle">
+            {#if title}
+                {#if typeof title === "string"}
+                    <h5>{title}</h5>
+                {:else}
+                    {@render title()}
+                {/if}
+            {/if}
+            {#if description}
+                {#if typeof description === "string"}
+                    <small>{description}</small>
+                {:else}
+                    {@render description()}
+                {/if}
+            {/if}
+        </div>
+    {/if}
+    <div class="FormSectionContent">
+        {@render children()}
+    </div>
+</div>
+
+<style>
+    .FormSection {
+        padding: 0;
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        padding-block: calc(var(--fcc) * var(--form-padding-block));
+        padding-inline: calc(var(--fcc) * var(--form-padding-inline));
+        gap: var(--form-section-gap, var(--space-lg));
+    }
+    .FormSectionTitle {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--base);
+        gap: var(--form-title-gap, var(--space-md));
+        text-wrap: balance;
+    }
+    .FormSection:not(:first-child) {
+        border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
+    }
+    .FormSectionContent {
+        display: grid;
+        gap: var(--form-field-gap, var(--space-lg));
+    }
+    .FormSection.noTitle .FormSectionContent {
+        grid-column: 1 / -1;
+    }
+    @media(max-width: 1280px) {
+        .FormSection {
+            padding: var(--space-lg);
+            gap: var(--space-md);
+        }
+        .FormSectionTitle {
+            gap: var(--space-sm);
+            padding-block-end: var(--space-md);
+        }
+    }
+    @media(max-width: 640px) {
+        .FormSection {
+            padding: var(--space-md);
+            gap: var(--space-md);
+        }
+        .FormSectionTitle {
+            gap: var(--space-sm);
+            padding-block-end: var(--space-md);
+        }
+    }
+    @container (max-width: 800px) {
+        .FormSectionTitle,
+        .FormSectionContent {
+            grid-column: 1 / -1;
+        }
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    title?: string | Snippet;
+    description?: string | Snippet;
+    children: Snippet;
+};
+declare const FormSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormSection = ReturnType<typeof FormSection>;
+export default FormSection;