lutra 0.1.0 → 0.1.4

package/dist/form/Input.svelte

@@ -0,0 +1,444 @@
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import type { Autocomplete } from "./types.js";
+	import Copy from "../icons/IconCopy.svelte";
+	import Done from "../icons/IconDone.svelte";
+	import Show from "../icons/IconShow.svelte";
+	import Hide from "../icons/IconHide.svelte";
+	import Tooltip from "../components/Tooltip.svelte";
+	import IconButton from "../components/IconButton.svelte";
+	import type { LutraForm } from "./types.js";
+	import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
+	import FieldError from "./FieldError.svelte";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
+	import FieldContent from "./FieldContent.svelte";
+	import { on } from "svelte/events";
+	import { fade } from "svelte/transition";
+	import Theme from "../components/Theme.svelte";
+
+    let {
+        alt,
+        autofocus,
+        autocapitalize,
+        autocomplete,
+        autocorrect,
+        capture,
+        checked,
+        contained,
+        copyable,
+        defaultValue,
+        disabled,
+        enterkeyhint,
+        height,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        indeterminate,
+        inputmode,
+        label,
+        labelHelp,
+        labelTip,
+        list,
+        maxlength,
+        minlength,
+        max,
+        min,
+        multiple,
+        name,
+        pattern,
+        placeholder,
+        suffix,
+        onblur,
+        onchange,
+        onclick,
+        onfocus,
+        onkeydown,
+        onkeyup,
+        onkeypress,
+        prefix,
+        readonly,
+        required,
+        shape = 'rounded',
+        size,
+        src,
+        step,
+        title,
+        type,
+        unit,
+        value = $bindable(''),
+        viewable,
+        webkitdirectory,
+        ...rest
+    }: {
+        /** alt attribute for the image type. Required for accessibility */
+        alt?: string;
+        /** 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;
+        /** 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;
+        /** 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
+        /** Help text to display below the input. */
+        labelHelp?: 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;
+        /** Allow multiple f
+        /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        max?: number
+        /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        min?: number;
+        /** Whether the input should allow multiple values. Valid for email and file inputs. */
+        multiple?: boolean;
+        /** 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;
+        /** The shape of the input element. */
+        shape?: 'default' | 'rounded' | 'pill' | 'circle';
+        /** The size of the input element. */
+        size?: number;
+        /** Source URL for the image type. */
+        src?: string;
+        /** 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;
+        /** A string that defines the title of the input element. */
+        title?: string;
+        /** The type of input to display. */
+        type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+        /** Unit of measurement for range inputs. */
+        unit?: string;
+        /** The value of the input element. */
+        value?: string | number | boolean | null;
+        /** Whether the input should be viewable. Valid for password inputs. */
+        viewable?: boolean;
+        /** Whether the input should only accept directory uploads. */
+        webkitdirectory?: boolean;
+    } = $props();
+
+    if(contained === undefined) { contained = getContext('lutra.form.input.contained') ?? getContext('lutra.form.contained') ?? getContext('lutra.contained') ?? false; }
+
+    let el: HTMLInputElement | undefined = $state();
+    let copyTitle = $state('Copy');
+    let viewTitle = $state('Show');
+    let copyTooltipOpen = $state(false);
+    let copyBtnIcon = $state(Copy);
+    let viewBtnIcon = $state(Show);
+
+    // Set defaults from form context
+    const form = getContext<LutraForm<any>>('form');
+    const field = $derived(form?.fields[name]);
+    const issue = $derived(form?.issues?.find((issue) => issue.name === name));
+    const validator = getContext<Record<string, ZodType>>('form.validators')?.[name];
+    const data = form?.data;
+    const originalData = form?.originalData;
+
+    function view(e: MouseEvent) {
+        e.preventDefault();
+        if(!el) return;
+        if(el.type === 'password') {
+            el.type = 'text';
+            viewBtnIcon = Hide;
+            viewTitle = 'Hide';
+        } else {
+            el.type = 'password';
+            viewBtnIcon = Show;
+            viewTitle = 'Show';
+        }
+        el.focus();
+    }
+
+    function copy(e: MouseEvent) {
+        e.preventDefault();
+        if(!el) return;
+        // try with navigator.clipboard
+        if(navigator.clipboard) {
+            navigator.clipboard.writeText(value!.toString());
+        } else {
+            el.focus();
+            el.select();
+            document.execCommand('copy');
+        }
+        copyBtnIcon = Done;
+        copyTitle = 'Copied!';
+        copyTooltipOpen = true;
+        setTimeout(() => {
+            copyBtnIcon = Copy;
+            copyTitle = 'Copy';
+            copyTooltipOpen = false;
+        }, 1500);
+        el!.focus();
+    }
+
+    if(!value) value = form ? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as string) || form?.fields?.[name]?.defaultValue as string : '';
+
+    onMount(() => {
+        if(value) fieldChange(form, name, () => el)({} as any);
+    });
+
+    let focused = $state(false);
+    let rangeValueLeft = $derived.by(() => {
+        if(!el) return 0;
+        value;
+        return (el.valueAsNumber - min!) / (max! - min!) * 100;
+    });
+
+    function focus(e: FocusEvent) {
+        focused = true;
+        if(onfocus) return onfocus(e);
+    }
+
+    function blur(e: FocusEvent) {
+        focused = false;
+        if(onblur) return onblur(e);
+    }
+
+</script>
+
+{#snippet input()}
+    {#if type === 'checkbox'}
+        <input
+            type="checkbox"
+            bind:this={el}
+            {alt}
+            {autofocus}
+            {disabled}
+            {enterkeyhint}
+            {height}
+            {id}
+            {indeterminate}
+            {inputmode}
+            {name}
+            onblur={blur}
+            {onclick}
+            onchange={fieldChange(form, name, () => el, validator, onchange)}
+            onfocus={focus}
+            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+            {onkeyup}
+            {onkeypress}
+            {readonly}
+            required={required || field?.required}
+            {title}
+            bind:checked={value as boolean}
+            {...rest}
+        />
+    {:else}
+        <input
+            bind:this={el}
+            {alt}
+            {autofocus}
+            autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
+            {autocomplete}
+            autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
+            {capture}
+            {checked}
+            {disabled}
+            {enterkeyhint}
+            {height}
+            {id}
+            {inputmode}
+            {list}
+            maxlength={maxlength ? maxlength : field?.maxlength}
+            minlength={minlength ? minlength : field?.minlength}
+            max={max ? max : field?.max}
+            min={min ? min : field?.min}
+            {multiple}
+            {name}
+            onblur={blur}
+            {onclick}
+            onchange={fieldChange(form, name, () => el, validator, onchange)}
+            onfocus={focus}
+            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+            {onkeyup}
+            {onkeypress}
+            pattern={pattern ? pattern : field?.pattern}
+            {placeholder}
+            {readonly}
+            required={required || field?.required}
+            {size}
+            {src}
+            {step}
+            {title}
+            {type}
+            bind:value={value}
+            {webkitdirectory}
+            {...rest}
+        />
+    {/if}
+{/snippet}
+
+{#if type === 'hidden'}
+    {@render input()}
+{:else}
+    <FieldContent
+        {id}
+        {label}
+        {labelHelp}
+        {labelTip}
+        contained={type === "checkbox" || type === "radio" || type === "color" || type === "range" ? false : true}
+        direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
+        {field}
+        {issue}
+        {type}
+        {help}
+        {prefix}
+        {suffix}
+        {required}
+    >
+
+        {#if type === "checkbox" || type === "radio"}
+            {@render input()}
+        {:else if type === "range"}
+            <div class="Range">
+                {#if min?.toString().length}
+                    <span>{min}{unit}</span>
+                {/if}
+                <div class="RangeInput">
+                    {@render input()}
+                    {#if focused && min?.toString().length && max?.toString().length}
+                        <Theme theme="invert">
+                            <div
+                                class="RangeValue"
+                                in:fade={{ duration: 100 }}
+                                out:fade={{ duration: 100 }}
+                                style="left: {rangeValueLeft}%"
+                            >
+                                {value}{unit}
+                            </div>
+                        </Theme>
+                    {/if}
+                </div>
+                {#if max?.toString().length}
+                    <span>{max}{unit}</span>
+                {/if}
+            </div>
+        {:else}
+
+            {@render input()}
+
+            {#if copyable}
+                <Tooltip tip={copyTitle} open={copyTooltipOpen}>
+                    <IconButton icon={copyBtnIcon} onclick={copy} disabled={copyTooltipOpen} />
+                </Tooltip>
+            {/if}
+        
+            {#if type === "password" && viewable}
+                <Tooltip tip={viewTitle}>
+                    <IconButton icon={viewBtnIcon} onclick={view} />
+                </Tooltip>
+            {/if}
+
+        {/if}
+    </FieldContent>
+{/if}
+
+<style>
+    /**
+     * Input element
+     */
+    input:not([type="checkbox"]):not([type="radio"]) {
+        border: none;
+        flex-grow: 1;
+        flex-shrink: 0;
+    }
+    input:not([type="checkbox"]):not([type="radio"]):focus-visible,
+    input:not([type="checkbox"]):not([type="radio"]):active {
+        outline: none;
+    }
+    input[type="range"] {
+        display: block;
+    }
+    /**
+     * Checkbox and radio
+     */
+    input[type="checkbox"] {
+        border-radius: 6px;
+    }
+    .Range {
+        display: flex;
+        gap: 0.5em;
+        align-items: center;
+    }
+    .RangeValue {
+        position: absolute;
+        top: 0;
+        font-size: max(0.85em, 9px);
+        color: var(--text-subtle);
+        background: var(--bg-app);
+        padding: 0.15em 0.35em;
+        border-radius: var(--border-radius);
+        transform: translate(-50%, -125%);
+        border: var(--border);
+        min-inline-size: 1em;
+        box-shadow: 0 0.5rem 1rem var(--shadow);
+        font-weight: 600;
+    }
+    .Range span {
+        font-size: 0.75em;
+        color: var(--text-subtle);
+    }
+    .RangeInput {
+        position: relative;
+        flex-grow: 1;
+    }
+    .RangeInput :global(input) {
+        width: 100%;
+    }
+</style>

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

@@ -0,0 +1,108 @@
+import { type Snippet } from "svelte";
+import type { Autocomplete } from "./types.js";
+type $$ComponentProps = {
+    /** alt attribute for the image type. Required for accessibility */
+    alt?: string;
+    /** 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;
+    /** 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;
+    /** 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;
+    /** Help text to display below the input. */
+    labelHelp?: 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;
+    /** Allow multiple f
+    /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+    max?: number;
+    /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+    min?: number;
+    /** Whether the input should allow multiple values. Valid for email and file inputs. */
+    multiple?: boolean;
+    /** 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;
+    /** The shape of the input element. */
+    shape?: 'default' | 'rounded' | 'pill' | 'circle';
+    /** The size of the input element. */
+    size?: number;
+    /** Source URL for the image type. */
+    src?: string;
+    /** 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;
+    /** A string that defines the title of the input element. */
+    title?: string;
+    /** The type of input to display. */
+    type?: 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    /** Unit of measurement for range inputs. */
+    unit?: string;
+    /** The value of the input element. */
+    value?: string | number | boolean | null;
+    /** Whether the input should be viewable. Valid for password inputs. */
+    viewable?: boolean;
+    /** Whether the input should only accept directory uploads. */
+    webkitdirectory?: boolean;
+};
+declare const Input: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/form/InputLength.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    /**
+     * @description
+     * Internal: A component that displays the length of an input field. Used by the Input and Textarea components.
+     */
+    let {
+        value,
+        maxlength,
+    }: {
+        /** The value of the input. */
+        value: string;
+        /** The maximum length of the input. */
+        maxlength: number;
+    } = $props();
+</script>
+
+{#if maxlength}
+    <div class="InputLength">
+        <div class="Length" class:warn={(value?.length || 0) > maxlength - 5}>
+            {value?.length || 0}/{maxlength}
+        </div>
+    </div>
+{/if}
+
+<style>
+    .InputLength {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        font-size: 0.8rem;
+        font-weight: 500;
+        color: var(--text-subtle);
+    }
+    .InputLength .Length {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+    }
+    .InputLength .Length.warn {
+        color: var(--text-color-warn, light-dark(red, red));
+    }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    /** The value of the input. */
+    value: string;
+    /** The maximum length of the input. */
+    maxlength: number;
+};
+declare const InputLength: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputLength = ReturnType<typeof InputLength>;
+export default InputLength;

package/dist/form/Label.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import ContextTip from "../components/ContextTip.svelte";
+  import StringOrSnippet from "../util/StringOrSnippet.svelte";
+    import type { Snippet } from "svelte";
+
+    /**
+     * @description
+     * The label component is used to create a label for an input element.
+     * @example
+     * <Label label="Name" />
+     * {#snippet l()}
+     * <Label label={l} />
+     * {/snippet}
+     */
+    let {
+        id,
+        label,
+        help,
+        tip,
+        required,
+    }: {
+        /** The id of the input element */
+        id?: string;
+        /** The label for the input */
+        label?: string | Snippet;
+        /** The help text for the input */
+        tip?: string | Snippet;
+        /** The help text for the input */
+        help?: string | Snippet;
+        /** Whether the input is required */
+        required?: boolean;
+    } = $props();
+
+</script>
+
+{#if label}
+    <label for={id} class:hasTip={!!tip} class:hasHelp={!!help}>
+        {#if typeof label === 'string'}
+            <span>
+                {label} {#if required}<span aria-hidden="true">*</span>{/if}
+            </span>
+        {:else}
+            <span>
+                {@render label()}
+            </span>
+        {/if}
+        {#if help}
+            <span class="Help">
+                <StringOrSnippet content={help} />
+            </span>
+        {/if}
+        {#if tip}
+            <ContextTip {tip} />
+        {/if}
+    </label>
+{/if}
+
+<style>
+    label {
+        cursor: var(--cursor, default);
+        text-wrap: balance;
+        display: inline-grid;
+        grid-template-columns: 1fr;
+        gap: var(--form-label-gap, var(--space-md));
+        align-items: center;
+    }
+    label.hasTip,
+    label.hasHelp {
+        grid-template-columns: 1fr auto;
+    }
+    label.hasHelp.hasTip {
+        grid-template-columns: 1fr auto auto;
+    }
+    label > span > span {
+        font-weight: 600;
+        color: var(--text-color-warn, light-dark(red, red));
+        padding-inline: 0.175em;
+    }
+    .Help {
+        font-weight: var(--font-weight-normal);
+    }
+    .Help :global(a) {
+        color: var(--link-color);
+    }
+    .Help :global(a:hover) {
+        color: var(--link-color-hover);
+    }
+</style>