lutra 0.0.33 → 0.1.4

package/dist/form/Input.svelte

@@ -1,138 +1,255 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
-import { createId } from "../utils/id.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 "../display/Tooltip.svelte";
-import IconButton from "../display/IconButton.svelte";
-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 "../layout/Theme.svelte";
-let {
-  alt,
-  autofocus,
-  autocapitalize,
-  autocomplete,
-  autocorrect,
-  capture,
-  checked,
-  contained,
-  copyable,
-  defaultValue,
-  disabled,
-  enterkeyhint,
-  height,
-  help,
-  id = $bindable(createId()),
-  indeterminate,
-  inputmode,
-  label,
-  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
-} = $props();
-let el = $state();
-let copyTitle = $state("Copy");
-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));
-$effect(() => {
-  console.log("issue", issue);
-});
-const validator = getContext("form.validators")?.[name];
-const data = form?.data;
-const originalData = form?.originalData;
-function view(e) {
-  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) {
-  e.preventDefault();
-  if (!el) return;
-  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) || form?.fields?.[name]?.defaultValue : "";
-onMount(() => {
-  if (value) fieldChange(form, name, () => el)({});
-});
-let focused = $state(false);
-let rangeValueLeft = $derived.by(() => {
-  if (!el) return 0;
-  value;
-  return (el.valueAsNumber - min) / (max - min) * 100;
-});
-function focus(e) {
-  focused = true;
-  if (onfocus) return onfocus(e);
-}
-function blur(e) {
-  focused = false;
-  if (onblur) return onblur(e);
-}
+<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()}
@@ -159,7 +276,7 @@ function blur(e) {
             {readonly}
             required={required || field?.required}
             {title}
-            bind:checked={value}
+            bind:checked={value as boolean}
             {...rest}
         />
     {:else}
@@ -213,6 +330,7 @@ function blur(e) {
     <FieldContent
         {id}
         {label}
+        {labelHelp}
         {labelTip}
         contained={type === "checkbox" || type === "radio" || type === "color" || type === "range" ? false : true}
         direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}

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

@@ -1,28 +1,18 @@
 import { type Snippet } from "svelte";
 import type { Autocomplete } 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 Input: $$__sveltets_2_IsomorphicComponent<{
+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";
+    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";
+    capture?: 'user' | 'environment';
     /** Whether the input should be checked. */
     checked?: boolean;
     /** Whether the input should be contained. */
@@ -34,7 +24,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     /** 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";
+    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. */
@@ -44,9 +34,11 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     /** 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";
+    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. */
@@ -91,7 +83,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     /** Whether the input should be required. */
     required?: boolean;
     /** The shape of the input element. */
-    shape?: "default" | "rounded" | "pill" | "circle";
+    shape?: 'default' | 'rounded' | 'pill' | 'circle';
     /** The size of the input element. */
     size?: number;
     /** Source URL for the image type. */
@@ -101,7 +93,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     /** A string that defines the title of the input element. */
     title?: string;
     /** The type of input to display. */
-    type?: "button" | "submit" | "checkbox" | "radio" | "hidden" | "text" | "password" | "file" | "image" | "email" | "number" | "tel" | "url" | "range" | "search" | "date" | "time" | "datetime-local" | "month" | "week" | "color";
+    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. */
@@ -110,8 +102,7 @@ declare const Input: $$__sveltets_2_IsomorphicComponent<{
     viewable?: boolean;
     /** Whether the input should only accept directory uploads. */
     webkitdirectory?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "id">;
-type Input = InstanceType<typeof Input>;
+};
+declare const Input: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Input = ReturnType<typeof Input>;
 export default Input;

package/dist/form/InputLength.svelte

@@ -1,7 +1,17 @@
-<script lang="ts">let {
-  value,
-  maxlength
-} = $props();
+<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}
@@ -27,6 +37,6 @@
         gap: 0.25rem;
     }
     .InputLength .Length.warn {
-        color: var(--text-warn);
+        color: var(--text-color-warn, light-dark(red, red));
     }
 </style>

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

@@ -1,20 +1,9 @@
-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 InputLength: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     /** The value of the input. */
     value: string;
     /** The maximum length of the input. */
     maxlength: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type InputLength = InstanceType<typeof InputLength>;
+};
+declare const InputLength: import("svelte").Component<$$ComponentProps, {}, "">;
+type InputLength = ReturnType<typeof InputLength>;
 export default InputLength;

package/dist/form/Label.svelte

@@ -1,14 +1,40 @@
-<script lang="ts">import ContextTip from "../display/ContextTip.svelte";
-let {
-  id,
-  label,
-  tip,
-  required
-} = $props();
+<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}>
+    <label for={id} class:hasTip={!!tip} class:hasHelp={!!help}>
         {#if typeof label === 'string'}
             <span>
                 {label} {#if required}<span aria-hidden="true">*</span>{/if}
@@ -18,6 +44,11 @@ let {
                 {@render label()}
             </span>
         {/if}
+        {#if help}
+            <span class="Help">
+                <StringOrSnippet content={help} />
+            </span>
+        {/if}
         {#if tip}
             <ContextTip {tip} />
         {/if}
@@ -30,15 +61,28 @@ let {
         text-wrap: balance;
         display: inline-grid;
         grid-template-columns: 1fr;
-        gap: 0.5em;
+        gap: var(--form-label-gap, var(--space-md));
         align-items: center;
     }
-    label.hasTip {
+    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-warn);
+        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>