lutra 0.0.33 → 0.1.0

package/dist/form/Textarea.svelte

@@ -1,163 +0,0 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
-import { createId } from "../utils/id.js";
-import { IconCopy, IconDone, IconShow } from "../icons/index.js";
-import { Tooltip, IconButton } from "../display/index.js";
-import { FieldContent, fieldChange, fieldKeydown, ignoreKeys, getFromObjWithStringPath } from "../form/index.js";
-import { ZodType } from "zod";
-let {
-  autofocus,
-  autocapitalize,
-  autocomplete,
-  autocorrect,
-  autoresize,
-  checked,
-  contained,
-  copyable,
-  defaultValue,
-  dirname,
-  disabled,
-  enterkeyhint,
-  help,
-  id = $bindable(createId()),
-  inputmode,
-  label,
-  labelTip,
-  list,
-  maxlength,
-  minlength,
-  name,
-  pattern,
-  placeholder,
-  suffix,
-  onblur,
-  onchange,
-  onclick,
-  onfocus,
-  onkeydown,
-  onkeyup,
-  onkeypress,
-  prefix,
-  readonly,
-  required,
-  resize = true,
-  shape = "rounded",
-  step,
-  style,
-  tabindex,
-  title,
-  value = $bindable(),
-  ...rest
-} = $props();
-let el = $state();
-let copyTitle = $state("Copy");
-let viewTitle = $state("Show");
-let copyTooltipOpen = $state(false);
-let copyBtnIcon = $state(IconCopy);
-let viewBtnIcon = $state(IconShow);
-let resizeClass = $derived(resize === true ? "resize" : resize === false ? "" : resize);
-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;
-if (!value) value = form ? getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue : "";
-function copy(e) {
-  e.preventDefault();
-  if (!el) return;
-  if (navigator.clipboard) {
-    navigator.clipboard.writeText(value);
-  } else {
-    el.focus();
-    el.select();
-    document.execCommand("copy");
-  }
-  copyBtnIcon = IconDone;
-  copyTitle = "Copied!";
-  copyTooltipOpen = true;
-  setTimeout(() => {
-    copyBtnIcon = IconCopy;
-    copyTitle = "Copy";
-    copyTooltipOpen = false;
-  }, 1500);
-  el.focus();
-}
-function onresize() {
-  if (!autoresize || !el || !value) return;
-  setTimeout(() => {
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight + 2}px`;
-  }, 0);
-}
-onMount(() => {
-  if (value) fieldChange(form, name, () => el)({});
-  setTimeout(() => {
-    onresize();
-  }, 5);
-});
-</script>
-
-<svelte:window onresize={onresize} />
-
-<FieldContent
-    {id}
-    {label}
-    {labelTip}
-    {field}
-    {issue}
-    {help}
-    {suffix}
-    {required}
->
-    <textarea 
-        class="{resizeClass}"
-        bind:this={el}
-        {autofocus}
-        autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
-        {autocomplete}
-        autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
-        {dirname}
-        {disabled}
-        {enterkeyhint}
-        {id}
-        maxlength={maxlength ? maxlength : field?.maxlength}
-        minlength={minlength ? minlength : field?.minlength}
-        {name}
-        {onblur}
-        {onclick}
-        onchange={fieldChange(form, name, () => el, validator, onchange)}
-        {onfocus}
-        onkeydown={() => { onresize(); return fieldKeydown(form, name, () => el, validator, onkeydown) }}
-        {onkeyup}
-        {onkeypress}
-        {placeholder}
-        {readonly}
-        required={required || field?.required}
-        {tabindex}
-        {title}
-        bind:value={value}
-        {style}
-        {...rest}
-    ></textarea>
-
-    {#if copyable}
-        <Tooltip tip={copyTitle} open={copyTooltipOpen}>
-            <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
-        </Tooltip>
-    {/if}
-</FieldContent>
-
-<style>
-    textarea {
-        resize: none;
-    }
-    textarea.resize {
-        resize: both;
-    }
-    textarea.resize.horizontal {
-        resize: horizontal;
-    }
-    textarea.resize.vertical {
-        resize: vertical;
-    }
-</style>

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

@@ -1,108 +0,0 @@
-import { type Snippet } from "svelte";
-import type { Autocomplete } from "../form/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 Textarea: $$__sveltets_2_IsomorphicComponent<{
-    /** Whether the input should be autofocused. */
-    autofocus?: boolean;
-    /** Whether the input should be autocapitalized. */
-    autocapitalize?: boolean | "off" | "none" | "on" | "sentences" | "words" | "characters";
-    /** Specifies whether autocomplete is enabled for the input. */
-    autocomplete?: Autocomplete;
-    /** Whether the input should be autocorrected. (Safari only) */
-    autocorrect?: boolean;
-    /** Whether the input should resize automatically. */
-    autoresize?: boolean;
-    /** A hint to the browser for which capture method to use. */
-    capture?: "user" | "environment";
-    /** Whether the input should be checked. */
-    checked?: boolean;
-    /** Whether the input should be contained. */
-    contained?: boolean;
-    /** Whether the input should be copyable. */
-    copyable?: boolean;
-    /** The default value of the input element. */
-    defaultValue?: string;
-    /** Form field name for the directionality of the element's text content during form submission */
-    dirname?: string;
-    /** Whether the input should be disabled. */
-    disabled?: boolean;
-    /** A hint to the browser for which enter key to display for the input. */
-    enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
-    /** The height of the input element. Valid for image inputs. */
-    height?: number;
-    /** Help text to display below the input. */
-    help?: string | Snippet;
-    /** A random id is generated if not provided. */
-    id?: string;
-    /** Whether the input should be indeterminate. */
-    indeterminate?: boolean;
-    /** A hint to the browser for which keyboard to display. This is only used for type="text" inputs. Strongly consider using type="email" or type="url" etc. instead */
-    inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-    /** The label for the input */
-    label?: string | Snippet;
-    /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
-    labelTip?: string | Snippet;
-    /** The id of a datalist element that contains pre-defined options for the input element. */
-    list?: string;
-    /** The maximum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
-    maxlength?: number;
-    /** The minimum number of characters (as UTF-16 code units) the user can enter into the input. Valid for text, search, url, tel, email, and password. */
-    minlength?: number;
-    /** The name of the input element. */
-    name: string;
-    /** The onblur event handler */
-    onblur?: (e: FocusEvent) => void;
-    /** Onchange event handler */
-    onchange?: (e: Event) => void;
-    /** Onclick event handler */
-    onclick?: (e: MouseEvent) => void;
-    /** Onfocus event handler */
-    onfocus?: (e: FocusEvent) => void;
-    /** Keyup event handler */
-    onkeyup?: (e: KeyboardEvent) => void;
-    /** Keydown event handler */
-    onkeydown?: (e: KeyboardEvent) => void;
-    /** Keypress event handler */
-    onkeypress?: (e: KeyboardEvent) => void;
-    /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
-    pattern?: string;
-    /** Placeholder text to display when the input is empty. */
-    placeholder?: string;
-    /** Suffix content, to display after the input. */
-    suffix?: string | Snippet;
-    /** Prefix content, to display before the input. */
-    prefix?: string | Snippet;
-    /** Whether the input should be read-only. */
-    readonly?: boolean;
-    /** Whether the input should be required. */
-    required?: boolean;
-    /** Whether the textarea is resizable. */
-    resize?: boolean | "both" | "horizontal" | "vertical" | "none";
-    /** The shape of the input element. */
-    shape?: "default" | "rounded" | "pill" | "circle";
-    /** Spellcheck the input. */
-    spellcheck?: boolean;
-    /** A number that specifies the granularity that the value must adhere to. Valid for date, month, week, time, datetime-local, number, and range. */
-    step?: number;
-    /** Inline styles to apply to the input element. */
-    style?: string;
-    /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
-    tabindex?: number;
-    /** A string that defines the title of the input element. */
-    title?: string;
-    /** The value of the input element. */
-    value?: string | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "id">;
-type Textarea = InstanceType<typeof Textarea>;
-export default Textarea;

package/dist/form/Toggle.svelte

@@ -1,2 +0,0 @@
-<script lang="ts"></script>
-

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

@@ -1,15 +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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports;
-    z_$$bindings?: Bindings;
-}
-declare const Toggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toggle = InstanceType<typeof Toggle>;
-export default Toggle;

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

@@ -1,44 +0,0 @@
-import type { ZodType } from "zod";
-import type { LutraForm } from "./types.js";
-/**
- * Use a form in a Svelte component.
- * @param {Form} form - The form to use.
- * @returns
- */
-export declare function useForm(form: LutraForm<any>): LutraForm<any> & {
-    originalData: any;
-    data: any;
-    state: string;
-};
-/**
- * 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: LutraForm<any>, name: string, el?: HTMLInputElement | HTMLTextAreaElement | 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: LutraForm<any>, name: string, el: () => HTMLInputElement | HTMLTextAreaElement | 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: LutraForm<any>, name: string, el: () => HTMLInputElement | HTMLTextAreaElement | 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

@@ -1,98 +0,0 @@
-/**
- * Use a form in a Svelte component.
- * @param {Form} form - The form to use.
- * @returns
- */
-export function useForm(form) {
-    let _form = Object.assign(form, {
-        originalData: JSON.parse(JSON.stringify(form.data ?? {})),
-        data: form.data ?? {},
-        state: 'idle',
-    });
-    // 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;
-}
-/**
- * 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(getTypedValue(el));
-    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, // Include the path of the field.
-            ...((result.error?.issues?.length ? result.error.issues : [])?.[0]), // Include the first issue as we only care about one at a time.
-        });
-    }
-}
-/**
- * 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(() => {
-            if (form) {
-                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);
-    };
-}
-function getTypedValue(el) {
-    if (el?.type === 'number')
-        return parseFloat(el.value);
-    if (el?.type === 'checkbox')
-        return el.checked;
-    return el?.value;
-}
-/**
- * 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) {
-        if (form && form.fields[name]) {
-            console.log('fieldChange', name, el()?.value, form.data[name]);
-            // Update the form data with the new value.
-            form.data[name] = getTypedValue(el());
-            // if the value is the same as the original value, then the field is not tainted
-            form.fields[name].tainted = form.data[name] !== form.originalData[name];
-            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,54 +0,0 @@
-import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type GenericIssue, type JSONLike } from "@auth70/bodyguard";
-import type { RequestEvent } from "@sveltejs/kit";
-import type { ZodType, infer as Infer } from "zod";
-import type { LutraForm, FormField, FormIssue, ZodTypes } from "./types.js";
-export declare const bodyguard: Bodyguard;
-/**
- * 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 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 | string} objOrName - The default object to populate the form with, or the name of the object in locals.
- * @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, objOrName?: JSONLike | string, obj?: JSONLike): Promise<LutraForm<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: GenericIssue[]): 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 | string} optsOrName - The options for the form validation, or the name of the form in locals.
- * @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, optsOrName?: BodyguardFormConfig | string, opts?: BodyguardFormConfig): Promise<LutraForm<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?: LutraForm<T>): Record<keyof Infer<T>, (value: any) => boolean>;