lutra 0.0.20 → 0.1.0

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

@@ -1,59 +0,0 @@
-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;
-    }>);
-}
-export {};

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,21 +0,0 @@
-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;
-    }>);
-}
-export {};

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,34 +0,0 @@
-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\"";
-        };
-    }>);
-}
-export {};

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,42 +0,0 @@
-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\"";
-        };
-    }>);
-}
-export {};

package/dist/form/Form.svelte

@@ -1,98 +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 {
-  form: _form,
-  action,
-  enctype = "multipart/form-data",
-  method = "POST",
-  fullWidth = false,
-  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;
-const bodyguard = new Bodyguard();
-let formEl;
-function setFormIssuesAndFields(issues, fields) {
-  if (form) {
-    form.form.issues = issues;
-    form.form.fields = fields;
-  }
-}
-async function validate() {
-  if (form && schema) {
-    form.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 = [];
-    } else {
-      form.form.valid = false;
-      form.form.issues = parseFormIssues(result.error.issues);
-    }
-  }
-}
-onMount(() => {
-  validate();
-});
-</script>
-
-<UiContent>
-    <form
-        {method}
-        {action}
-        {enctype}
-        bind:this={formEl}
-        onchange={validate}
-        use:enhance={({ 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 }) => {
-                // `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;
-                if(result.type === "success") {
-                    if(resultForm && form) {
-                        form.form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
-                    }
-                    update();
-                } else if(result.type === "failure") {
-                    if(resultForm && form) {
-                        setFormIssuesAndFields(
-                            Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
-                            Object.assign({ fields: [] }, resultForm).fields,
-                        );
-                    }
-                } else if(result.type === "error") {
-                    console.error('[lutra] Error from form enhance call', result.error);
-                } else if(result.type === "redirect") {
-                    window.location.href = result.location;
-                }
-            };
-        }}
-    >
-        {@render children()}
-    </form>
-</UiContent>
-
-<style>
-    form {
-    }
-</style>

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

@@ -1,33 +0,0 @@
-import { SvelteComponent } from "svelte";
-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\"";
-        };
-    }>);
-}
-export {};