lutra 0.0.5 → 0.0.7

package/dist/datatable/DataTable.svelte

@@ -1,16 +1,10 @@
 <script>import UiContent from "../layout/UIContent.svelte";
 import { setContext } from "svelte";
 let {
+  columns,
   contained,
   children
 } = $props();
-let columns = $state(0);
-setContext("DataTableColumns", {
-  addColumn: () => {
-    console.log("addColumn");
-    columns++;
-  }
-});
 </script>
 
 <UiContent>
@@ -31,6 +25,6 @@ setContext("DataTableColumns", {
     section.contained {
         border: var(--border);
         border-radius: var(--border-radius);
-        overflow: clip;
+        overflow-x: auto;
     }
 </style>

package/dist/datatable/DataTable.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponent } from "svelte";
 import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
+        columns: number;
         /** The number of columns to display the data in. */
         contained?: boolean | undefined;
         children: Snippet;

package/dist/datatable/DataTableRow.svelte

@@ -1,6 +1,7 @@
 <script>import { setContext } from "svelte";
 let {
   children,
+  actions,
   header = false
 } = $props();
 setContext("DataTableRow", { header });
@@ -8,6 +9,11 @@ setContext("DataTableRow", { header });
 
 <svelte:element this={header ? "header" : "section"} class="DataTableRow" class:header>
     {@render children()}
+    {#if actions}
+        <div class="Actions">
+            {@render actions()}
+        </div>
+    {/if}
 </svelte:element>
 
 <style>
@@ -17,7 +23,19 @@ setContext("DataTableRow", { header });
         grid-template-columns: subgrid;
         gap: 1.5em;
         align-items: center;
+        width: 100%;
+        overflow: none;
         padding: 0.75em calc(1.5em * var(--dtc));
+        position: relative;
+    }
+    .DataTableRow:hover {
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+    }
+    .DataTableRow:has(.Actions) {
+        padding-right: 0;
+    }
+    .DataTableRow :global(*) {
+        white-space: nowrap;
     }
     .DataTableRow.header {
         background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
@@ -25,4 +43,18 @@ setContext("DataTableRow", { header });
     section:not(:first-child) {
         border-top: var(--border);
     }
+    .Actions {
+        display: flex;
+        gap: 0.75em;
+        justify-self: end;
+        position: sticky;
+        top: 0;
+        right: 0;
+        padding-left: 0.75em;
+        padding-right: calc(1em * var(--dtc));
+        background: var(--bg-app);
+    }
+    .DataTableRow:hover .Actions {
+        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+    }
 </style>

package/dist/datatable/DataTableRow.svelte.d.ts

@@ -3,6 +3,9 @@ import { type Snippet } from "svelte";
 declare const __propDef: {
     props: {
         header?: boolean | undefined;
+        actions?: ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
         children: Snippet;
     };
     events: {

package/dist/form/FieldError.svelte

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

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

package/dist/form/Form.svelte

@@ -1,14 +1,85 @@
-<script>import { enhance as enhanceAction } from "$app/forms";
+<script>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";
 let {
+  form,
+  action,
+  enctype = "multipart/form-data",
+  method = "POST",
   fullWidth = false,
   children
 } = $props();
+setContext("form", form);
+setContext("form.validators", getIndividualValidators(form));
+const schema = dezerialize(form.schema);
+const bodyguard = new Bodyguard();
+let formEl;
+function setFormIssuesAndFields(issues, fields) {
+  form.issues = issues;
+  form.fields = fields;
+}
+async function validate() {
+  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>
+    <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 as any).data.form;
+                if(result.type === "success") {
+                    if(resultForm) {
+                        form.valid = resultForm.valid;
+                    }
+                } else if(result.type === "error") {
+                    if(resultForm) {
+                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    }
+                } else if(result.type === "failure") {
+                    if(resultForm) {
+                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    }
+                } else if(result.type === "redirect") {
+                    window.location.href = result.location;
+                }
+            };
+        }}
+    >
         {@render children()}
     </form>
 </UiContent>

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

@@ -1,7 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
+import type { Form } from "./types.js";
 declare const __propDef: {
     props: {
+        form: Form<any>;
+        action?: string | undefined;
+        enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
+        method?: "GET" | "POST" | undefined;
         fullWidth?: boolean | undefined;
         children: Snippet;
     };

package/dist/form/Input.svelte

@@ -1,4 +1,5 @@
-<script>import Label from "./Label.svelte";
+<script>import { getContext, unstate } from "svelte";
+import Label from "./Label.svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -6,7 +7,10 @@ import Show from "../icons/Show.svelte";
 import Hide from "../icons/Hide.svelte";
 import Tooltip from "../display/Tooltip.svelte";
 import IconButton from "../display/IconButton.svelte";
-import Icon from "../display/Icon.svelte";
+import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
+import FieldError from "./FieldError.svelte";
+import { getFromObjWithStringPath } from "./form.js";
+import { ZodType } from "zod";
 let {
   alt,
   autocapitalize,
@@ -37,6 +41,13 @@ let {
   pattern,
   placeholder,
   suffix,
+  onblur,
+  onchange,
+  onclick,
+  onfocus,
+  onkeydown,
+  onkeyup,
+  onkeypress,
   prefix,
   readonly,
   required,
@@ -46,8 +57,8 @@ let {
   step,
   tabindex,
   title,
-  type = "text",
-  value = $bindable(""),
+  type,
+  value = $bindable(),
   viewable,
   webkitdirectory
 } = $props();
@@ -57,6 +68,12 @@ let viewTitle = $state("Show");
 let copyTooltipOpen = $state(false);
 let copyBtnIcon = $state(Copy);
 let viewBtnIcon = $state(Show);
+const form = getContext("form");
+const field = $derived(form.fields[name]);
+const issue = $derived(form?.issues?.find((issue2) => issue2.name === name));
+const validator = getContext("form.validators")?.[name];
+const data = form?.data;
+const originalData = form?.originalData;
 function view(e) {
   e.preventDefault();
   if (!el)
@@ -111,28 +128,37 @@ function copy(e) {
     {indeterminate}
     {inputmode}
     {list}
-    {maxlength}
-    {minlength}
-    {max}
-    {min}
+    maxlength={maxlength ? maxlength : field?.maxlength}
+    minlength={minlength ? minlength : field?.minlength}
+    max={max ? max : field?.max}
+    min={min ? min : field?.min}
     {multiple}
     {name}
-    {pattern}
+    {onblur}
+    {onclick}
+    onchange={fieldChange(form, name, () => el, validator)}
+    {onfocus}
+    onkeydown={fieldKeydown(form, name, () => el, validator)}
+    {onkeyup}
+    {onkeypress}
+    pattern={pattern ? pattern : field?.pattern}
     {placeholder}
     {readonly}
-    {required}
+    required={required || field?.required}
     {results}
     {src}
     {step}
     {tabindex}
     {title}
     {type}
-    {value}
+    value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
 />
 {/snippet}
-
-<div class="FieldContainer {type}" class:checkOrRadio={type === "checkbox" || type === "radio"}>
+<div
+    class="FieldContainer {type}"
+    class:checkOrRadio={type === "checkbox" || type === "radio"}
+>
 
     <Label {id} {label} tip={labelTip} />
 
@@ -144,6 +170,7 @@ function copy(e) {
             class="Field {type}"
             class:hasPrefix={!!prefix}
             class:hasSuffix={!!suffix}
+            class:invalid={field?.tainted && issue?.code}
         >
             {#if prefix}
                 <div class="Fix Prefix">
@@ -179,6 +206,9 @@ function copy(e) {
                 </div>
             {/if}
         </div>
+        {#if field?.tainted && issue?.code}
+            <FieldError code={issue.code} message={issue.message} />
+        {/if}
     {/if}
 </div>
 
@@ -191,11 +221,15 @@ function copy(e) {
     }
     .Field {
         background-color: var(--field-bg);
-        border: var(--border-size) var(--border-style) var(--border-color);
+        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
         border-radius: var(--field-radius);
         display: flex;
         padding-inline: 0.15em;
     }
+    .Field:has(input:user-invalid),
+    .Field.invalid {
+        border-color: var(--field-border-color-error);
+    }
     .Field > *:not(input) {
         flex-grow: 0;
         flex-shrink: 0;
@@ -217,6 +251,10 @@ function copy(e) {
     .Field:has(input:focus-visible) {
         outline: var(--focus-outline);
     }
+    .Field:has(input:focus-visible:user-invalid),
+    .Field.invalid:has(input:focus-visible) {
+        outline-color: var(--focus-color-error); 
+    }
     /**
      * Input element
      */

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

@@ -25,7 +25,7 @@ declare const __propDef: {
         /** Whether the input should be disabled. */
         disabled?: boolean | undefined;
         /** A hint to the browser for which enter key to display for the input. */
-        enterkeyhint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
         /** The height of the input element. Valid for image inputs. */
         height?: number | undefined;
         /** Help text to display below the input. */
@@ -60,7 +60,21 @@ declare const __propDef: {
         /** Whether the input should allow multiple values. Valid for email and file inputs. */
         multiple?: boolean | undefined;
         /** The name of the input element. */
-        name?: string | undefined;
+        name: string;
+        /** The onblur event handler */
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        /** Onchange event handler */
+        onchange?: ((e: Event) => void) | undefined;
+        /** Onclick event handler */
+        onclick?: ((e: MouseEvent) => void) | undefined;
+        /** Onfocus event handler */
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        /** Keyup event handler */
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keydown event handler */
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keypress event handler */
+        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
         /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
         pattern?: string | undefined;
         /** Placeholder text to display when the input is empty. */
@@ -92,7 +106,7 @@ declare const __propDef: {
         /** A string that defines the title of the input element. */
         title?: string | undefined;
         /** The type of input to display. */
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "date" | "datetime-local" | "month" | "week" | undefined;
+        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
         /** The value of the input element. */
         value?: string | undefined;
         /** Whether the input should be viewable. Valid for password inputs. */

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

@@ -0,0 +1,45 @@
+import type { ZodType } from "zod";
+import type { Form } from "./types.js";
+/**
+ * Use a form in a Svelte component.
+ * @param {Form} form - The form to use.
+ * @returns
+ */
+export declare function useForm(form: Form<any>): {
+    form: {
+        originalData: any;
+        data: any;
+    } & Form<any>;
+};
+/**
+ * Validate a single field.
+ * @param {Form} form - The form to validate.
+ * @param {string} name - The name of the field to validate.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ */
+export declare function fieldValidate(form: Form<any>, name: string, el?: HTMLInputElement | HTMLSelectElement, validator?: ZodType<any, any>): void;
+/**
+ * Keydown event handler for a field.
+ * @param {KeyboardEvent} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
+ */
+export declare function fieldKeydown(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onkeydown?: (e: KeyboardEvent) => void): (e: KeyboardEvent) => Promise<void>;
+/**
+ * Change event handler for a field.
+ * @param {Event} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: Event) => void} onchange - The onchange event handler.
+ */
+export declare function fieldChange(form: Form<any>, name: string, el: () => HTMLInputElement | HTMLSelectElement | undefined, validator?: ZodType<any, any>, onchange?: (e: Event) => void): (e: Event) => Promise<void>;
+/**
+ * Keys that should be ignored when marking a field as tainted.
+ */
+export declare const ignoreKeys: string[];

package/dist/form/client.svelte.js

@@ -0,0 +1,85 @@
+/**
+ * Use a form in a Svelte component.
+ * @param {Form} form - The form to use.
+ * @returns
+ */
+export function useForm(form) {
+    let _form = Object.assign({
+        originalData: JSON.parse(JSON.stringify(form.data ?? {})),
+        data: form.data ?? {},
+    }, form);
+    // Have to declare a variable separately to use in the return object
+    // as the compiler is looking for a declaration.
+    let __form = $state(_form);
+    return {
+        form: __form,
+    };
+}
+/**
+ * Validate a single field.
+ * @param {Form} form - The form to validate.
+ * @param {string} name - The name of the field to validate.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ */
+export function fieldValidate(form, name, el, validator) {
+    if (!validator)
+        return;
+    const result = validator.safeParse(el?.value);
+    if (result.success) {
+        form.issues = (form.issues || []).filter((issue) => issue.name !== name);
+        form.valid = form.issues.length === 0;
+    }
+    else {
+        form.valid = false;
+        form.issues = (form.issues || []).filter((issue) => issue.name !== name);
+        form.issues?.push({
+            name,
+            ...result.error.issues[0],
+        });
+    }
+}
+/**
+ * Keydown event handler for a field.
+ * @param {KeyboardEvent} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: KeyboardEvent) => void} onkeydown - The onkeydown event handler.
+ */
+export function fieldKeydown(form, name, el, validator, onkeydown) {
+    return async function (e) {
+        setTimeout(() => {
+            const possibleKey = e?.key;
+            if (ignoreKeys.includes(possibleKey))
+                return;
+            form.data[name] = el()?.value || '';
+            fieldValidate(form, name, el(), validator);
+        }, 0); // Wait for the key to be updated in the input.
+        if (onkeydown)
+            return onkeydown(e);
+    };
+}
+/**
+ * Change event handler for a field.
+ * @param {Event} e - The event.
+ * @param {Form} form - The form to use.
+ * @param {string} name - The name of the field.
+ * @param {HTMLInputElement | HTMLSelectElement} el - The element to validate.
+ * @param {ZodType} validator - The validator to use.
+ * @param {(e: Event) => void} onchange - The onchange event handler.
+ */
+export function fieldChange(form, name, el, validator, onchange) {
+    return async function (e) {
+        form.data[name] = el()?.value || '';
+        form.fields[name].tainted = true;
+        fieldValidate(form, name, el(), validator);
+        if (onchange)
+            return onchange(e);
+    };
+}
+/**
+ * Keys that should be ignored when marking a field as tainted.
+ */
+export const ignoreKeys = ['Tab', 'Shift', 'Control', 'Alt', 'Meta', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageUp', 'PageDown', 'Escape', 'CapsLock', 'NumLock', 'ScrollLock', 'Pause', 'ContextMenu', 'PrintScreen', 'Help', 'Clear', 'OS', 'F1', 'F2', 'F3', 'F4', 'F5', 'F6', 'F7', 'F8', 'F9', 'F10', 'F12'];

package/dist/form/form.d.ts

@@ -1,34 +1,52 @@
-/// <reference types="svelte" />
-import { type Writable } from 'svelte/store';
-export declare const FormItems: Writable<Record<string, FormElement | FormElement[]>>;
-export type FormElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-export type SuccessType = {
-    success: true;
-    value: any;
-};
-export type ErrorType = {
-    success: false;
-    error: string;
-};
-export type FormRegistry = {
-    items: Record<string, FormElement | FormElement[]>;
-    getValues(): Record<string, string>;
-    register(name: string, el: FormElement | FormElement[]): void;
-    updateFormValues(): void;
-    validate(): boolean;
-    validateField(nameOrElement: string): SuccessType | ErrorType;
-    validateField(nameOrElement: FormElement): SuccessType | ErrorType;
-    validateField(nameOrElement: FormElement[]): SuccessType | ErrorType;
-    validateSingleField(nameOrElement: string | FormElement): SuccessType | ErrorType;
-};
-export type BeforeSubmitFn = (opts: {
-    form: HTMLFormElement;
-    data: FormData;
-    cancel: () => void;
-}) => void | Promise<void>;
-export type AddBeforeSubmitFn = (id: string, fn: BeforeSubmitFn) => void;
-export declare const getPropertyPaths: (schema: ZodType) => string[];
+import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type JSONLike } from "@auth70/bodyguard";
+import type { RequestEvent } from "@sveltejs/kit";
+import type { ZodType, infer as Infer, ZodIssue, ZodIssueBase } from "zod";
+import type { Form, FormField, FormIssue, ZodTypes } from "./types.js";
+export declare const bodyguard: Bodyguard;
 /**
- * Keys that should be ignored when marking a field as changed.
+ * Get fields from a Zod schema.
+ * @param {ZodObject<any>} schema - The schema to get fields from.
+ * @returns {Record<string, any>} - The fields from the schema.
  */
-export declare const ignoreChangeKeys: string[];
+export declare function getFieldsFromSchema(schema: ZodType, data?: BodyguardResult<any>, parents?: string[]): Record<string, FormField>;
+/**
+ * Server page load call. Optionally with a default object to populate the form with from locals.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {RequestEvent} event - The event to load the (possible) form from.
+ * @param {JSONLike} obj - The default object to populate the form with.
+ * @returns {Promise<Form<Z>>} - The form to use.
+ */
+export declare function loadForm<Z extends ZodTypes>(schema: Z, event: RequestEvent, obj?: JSONLike): Promise<Form<Z>>;
+/**
+ * Parse zod issues into form issues (with a path string).
+ * @param {ZodIssue[]} issues - The issues to parse.
+ * @returns {FormIssue[]} - The parsed issues.
+ */
+export declare function parseFormIssues(issues: (ZodIssue & ZodIssueBase)[]): FormIssue[];
+/**
+ * Parse a form using a schema.
+ * @param {ZodType} schema - The schema to parse the form with.
+ * @param {Request} request - The request to parse.
+ * @param {BodyguardFormConfig} opts - The options for the form validation.
+ * @returns {Promise<{ valid: false } | { valid: true, data: Infer<Z> }>} - The result of the form validation.
+ */
+export declare function parseForm<Z extends ZodType>(schema: Z, event: RequestEvent, opts?: BodyguardFormConfig): Promise<Form<Z>>;
+/**
+ * Convert an array path from a Zod issue to a string path for a form field.
+ * @param {(string | number)[]} path - The path to convert.
+ * @returns {string} - The string path.
+ */
+export declare function arrayPathToStringPath(path: (string | number)[]): string;
+/**
+ * Get a value from an object using a string path.
+ * @param {any} obj - The object to get the value from.
+ * @param {string} path - The path to get the value from.
+ * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
+ */
+export declare function getFromObjWithStringPath(obj: any, path: string): string | number | Date | boolean | object | undefined;
+/**
+ * Get individual validators for each field in a form.
+ * @param {Form} form - The form to get the validators from.
+ * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
+ */
+export declare function getIndividualValidators<T extends ZodTypes>(form: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;