lutra 0.0.33 → 0.1.0

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

@@ -1,31 +0,0 @@
-import type { Snippet } from "svelte";
-import type { FormField, FormIssue } 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 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

@@ -1,14 +0,0 @@
-<script lang="ts">let {
-  code,
-  message
-} = $props();
-</script>
-
-<p class="Error">{message ? message : code}</p>
-
-<style>
-    .Error {
-        color: var(--text-warn);
-        font-size: max(0.85em, 11px);
-    }
-</style>

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

@@ -1,18 +0,0 @@
-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<{
-    code: string;
-    message?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type FieldError = InstanceType<typeof FieldError>;
-export default FieldError;

package/dist/form/FieldSection.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">import H5 from "../typo/H5.svelte";
-import P from "../typo/P.svelte";
-let {
-  title,
-  description,
-  children
-} = $props();
-</script>
-
-<div class="FieldSection" class:noTitle={!title && !description}>
-    {#if title || description}
-        <div class="FieldSectionTitle">
-            {#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="FieldSectionFields">
-        {@render children()}
-    </div>
-</div>
-
-<style>
-    .FieldSection {
-        padding: 0;
-        display: grid;
-        grid-template-columns: subgrid;
-        grid-column: 1 / -1;
-        padding: calc(var(--fcc) * 3em);
-        gap: 3em;
-    }
-    .FieldSectionTitle {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--base);
-        gap: 1.25em;
-        text-wrap: balance;
-    }
-    .FieldSection:not(:first-child) {
-        border-top: calc(var(--fcc) * var(--border-size)) var(--border-style) var(--border-color);
-    }
-    .FieldSectionFields {
-        display: grid;
-        gap: var(--gap, 1.5em);
-    }
-    .FieldSection.noTitle .FieldSectionFields {
-        grid-column: 1 / -1;
-    }
-    @media(max-width: 1280px) {
-        .FieldSection {
-            padding: 2em;
-            gap: 1.5em;
-        }
-        .FieldSectionTitle {
-            gap: 0.5em;
-            padding-block-end: 1.5em;
-        }
-    }
-    @media(max-width: 640px) {
-        .FieldSection {
-            padding: 1em;
-            gap: 1.5em;
-        }
-        .FieldSectionTitle {
-            gap: 0.5em;
-            padding-block-end: 1.5em;
-        }
-    }
-    @container (max-width: 800px) {
-        .FieldSectionTitle,
-        .FieldSectionFields {
-            grid-column: 1 / -1;
-        }
-    }
-</style>

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

@@ -1,20 +0,0 @@
-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 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

@@ -1,68 +0,0 @@
-<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>
-
-<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

@@ -1,31 +0,0 @@
-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<{
-    /** 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

@@ -1,136 +0,0 @@
-<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);
-    }
-  }
-}
-onMount(() => {
-  validate();
-});
-</script>
-
-<UiContent>
-    <form
-        {method}
-        {action}
-        {enctype}
-        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')
-                    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);
-                    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';
-                }
-            };
-        }}
-    >
-        {@render children()}
-    </form>
-</UiContent>
-
-<style>
-    form {
-    }
-</style>

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

@@ -1,38 +0,0 @@
-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<{
-    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;