lutra 0.1.0 → 0.1.5

package/dist/form/Fieldset.svelte

@@ -0,0 +1,103 @@
+<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">
+    <fieldset class:fullWidth class:rounded class:contained class="cols-{columns}" style="--lg-cols: {lgColumns}; --md-cols: {mdColumns}; --sm-cols: {smColumns}">
+        {#if legend}
+            <legend>
+                {#if typeof legend === 'string'}
+                    {legend}
+                {:else}
+                    {@render legend()}
+                {/if}
+            </legend>
+        {/if}
+        {#if description}
+            {#if typeof description === 'string'}
+                <small>{description}</small>
+            {:else}
+                {@render description()}
+            {/if}
+        {/if}
+        {@render children()}
+    </fieldset>
+</div>
+
+<style>
+    .FieldsetContainer {
+        container-type: inline-size;
+    }
+    fieldset {
+        display: grid;
+        width: var(--width, fit-content);
+        grid-template-columns: repeat(var(--lg-cols), 1fr);
+        gap: var(--gap, 1.5em);
+    }
+    legend {
+        font-weight: 500;
+        font-size: var(--font-size, 1em);
+    }
+    fieldset.contained {
+        padding: 1.5em;
+    }
+    fieldset.fullWidth {
+        width: 100%;
+    }
+    @container(max-width: 960px) {
+        fieldset {
+            grid-template-columns: repeat(var(--md-cols), 1fr);
+        }
+    }
+    @container(max-width: 640px) {
+        fieldset {
+            grid-template-columns: repeat(var(--sm-cols), 1fr);
+        }
+    }
+</style>

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

@@ -0,0 +1,20 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    /** 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;
+};
+declare const Fieldset: import("svelte").Component<$$ComponentProps, {}, "">;
+type Fieldset = ReturnType<typeof Fieldset>;
+export default Fieldset;

package/dist/form/Form.svelte

@@ -0,0 +1,220 @@
+<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 });
+    }
+    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>
+    <form
+        {method}
+        {action}
+        {enctype}
+        style={style}
+        bind:this={formEl}
+        onchange={validate}
+        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
+            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('form result', 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);
+                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, resetOnUpdate, opts);
+                    update({ reset: !!resetOnUpdate });
+                } else if(result.type === "failure") {
+                    console.log('FAILURE', opts);
+                    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, opts);
+                    if(form) form.state = 'error';
+                } else if(result.type === "redirect") {
+                    console.log('redirect', opts);
+                    //window.location.href = result.location;
+                    if(form) form.state = 'success';
+                    await goto(result.location);
+                }
+            };
+        }}
+    >
+        {@render children()}
+    </form>
+</UiContent>
+
+<style>
+</style>

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

@@ -0,0 +1,38 @@
+import type { ActionResult } from "@sveltejs/kit";
+import type { Snippet } from "svelte";
+import type { BeforeSubmitFn, LutraForm } from "./types.js";
+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;
+    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;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "formEl">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/form/FormActions.svelte

@@ -0,0 +1,80 @@
+<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="FormActions {align}" class:hasInfo={!!info}>
+    {#if info}
+        <div class="Info">
+            <StringOrSnippet content={info} />
+        </div>
+    {/if}
+    <div class="Actions">
+        {@render children()}
+    </div>
+</div>
+
+<style>
+    .FormActions {
+        display: grid;
+        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;
+        border-bottom-right-radius: inherit;
+        align-items: center;
+    }
+    .Actions {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        grid-column: 2 / -1;
+    }
+    .FormActions.start .Actions {
+        justify-content: start;
+        grid-column: 1 / -1;
+    }
+    .FormActions.center .Actions {
+        justify-content: center;
+        grid-column: 1 / -1;
+    }
+    .FormActions.end .Actions {
+        justify-content: end;
+        grid-column: 1 / -1;
+    }
+    .FormActions.hasInfo .Actions {
+        grid-column: 2 / -1;
+    }
+    .FormActions.full .Actions {
+        grid-column: 1 / -1;
+    }
+    @container (max-width: 480px) {
+        .FormActions {
+            justify-content: center;
+            gap: var(--space-sm);
+        }
+        .Info {
+            order: 1;
+            text-align: center;
+        }
+        .Actions {
+            order: -1;
+            flex-direction: column;
+        }
+    }
+</style>

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;