lutra 0.0.33 → 0.1.4

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

@@ -1,25 +1,16 @@
 import type { Snippet } from "svelte";
-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 Label: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     /** 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;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type Label = InstanceType<typeof Label>;
+};
+declare const Label: import("svelte").Component<$$ComponentProps, {}, "">;
+type Label = ReturnType<typeof Label>;
 export default Label;

package/dist/form/LogoUpload.svelte

@@ -1,28 +1,43 @@
-<script lang="ts">import Theme from "../layout/Theme.svelte";
-import H5 from "../typo/H5.svelte";
-import ImageUpload from "./ImageUpload.svelte";
-import StringOrSnippet from "../utils/StringOrSnippet.svelte";
-let {
-  lightLogoInputName = "logo_light_url",
-  darkLogoInputName = "logo_dark_url",
-  lightLogoUploadUrl,
-  darkLogoUploadUrl,
-  buttonText = "Select",
-  lightLogoSrc,
-  darkLogoSrc,
-  lightHelp = "This logo will be used on a light theme background.",
-  darkHelp = "If not set, the light theme logo will be used instead.",
-  accept = "image/png,image/jpg",
-  maxSize = 1024 * 1024 * 4,
-  // 4MB
-  removable = true
-} = $props();
+<script lang="ts">
+	import Theme from "../components/Theme.svelte";
+	import ImageUpload from "./ImageUpload.svelte";
+	import type { Snippet } from "svelte";
+	import StringOrSnippet from "../util/StringOrSnippet.svelte";
+
+    let {
+        lightLogoInputName = 'logo_light_url',
+        darkLogoInputName = 'logo_dark_url',
+        lightLogoUploadUrl,
+        darkLogoUploadUrl,
+        buttonText = 'Select',
+        lightLogoSrc,
+        darkLogoSrc,
+        lightHelp = 'This logo will be used on a light theme background.',
+        darkHelp = 'If not set, the light theme logo will be used instead.',
+        accept = 'image/png,image/jpg',
+        maxSize = 1024 * 1024 * 4, // 4MB
+        removable = true
+    }: {
+        lightLogoInputName?: string;
+        darkLogoInputName?: string;
+        lightLogoUploadUrl: string;
+        darkLogoUploadUrl: string;
+        buttonText?: string;
+        lightLogoSrc?: string | null;
+        darkLogoSrc?: string | null;
+        lightHelp?: string | Snippet;
+        darkHelp?: string | Snippet;
+        accept: string;
+        maxSize?: number;
+        removable?: boolean;
+    } = $props();
+
 </script>
 
 <div class="LogoUpload">
     <Theme theme="light">
         <div class="Content">
-            <H5 hr>Light theme</H5>
+            <h5>Light theme</h5>
             <div class="Info">
                 <small><StringOrSnippet content={lightHelp} /></small>
                 <ImageUpload
@@ -41,7 +56,7 @@ let {
     </Theme>
     <Theme theme="dark">
         <div class="Content">
-            <H5 hr>Dark theme</H5>
+            <h5>Dark theme</h5>
             <div class="Info">
                 <small><StringOrSnippet content={darkHelp} /></small>
                 <ImageUpload

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

@@ -1,15 +1,5 @@
 import type { Snippet } from "svelte";
-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 LogoUpload: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     lightLogoInputName?: string;
     darkLogoInputName?: string;
     lightLogoUploadUrl: string;
@@ -22,8 +12,7 @@ declare const LogoUpload: $$__sveltets_2_IsomorphicComponent<{
     accept: string;
     maxSize?: number;
     removable?: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type LogoUpload = InstanceType<typeof LogoUpload>;
+};
+declare const LogoUpload: import("svelte").Component<$$ComponentProps, {}, "">;
+type LogoUpload = ReturnType<typeof LogoUpload>;
 export default LogoUpload;

package/dist/form/Select.svelte

@@ -1,52 +1,102 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
-import Label from "./Label.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";
-let {
-  autofocus,
-  children,
-  disabled,
-  help,
-  id = $bindable(createId()),
-  label,
-  labelTip,
-  name,
-  onblur,
-  onchange,
-  onclick,
-  onfocus,
-  onkeydown,
-  onkeyup,
-  onkeypress,
-  options,
-  placeholder,
-  required,
-  results,
-  shape = "default",
-  tabindex,
-  value = $bindable()
-} = $props();
-let el = $state();
-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 : "";
-onMount(() => {
-  if (value) fieldChange(form, name, () => el)({});
-});
+<script lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import type { LutraForm } from "./types.js";
+	import { fieldChange, fieldKeydown, ignoreKeys } from "./client.svelte.js";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
+	import FieldContent from "./FieldContent.svelte";
+
+    let {
+        autofocus,
+        children,
+        disabled,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        label,
+        labelTip,
+        name,
+        onblur,
+        onchange,
+        onclick,
+        onfocus,
+        onkeydown,
+        onkeyup,
+        onkeypress,
+        options,
+        placeholder,
+        required,
+        results,
+        shape = 'default',
+        tabindex,
+        value = $bindable(),
+    }: {
+        /** Whether the input should be autofocused. */
+        autofocus?: boolean;
+        /** Options for the select element. */
+        children?: Snippet;
+        /** Whether the input should be disabled. */
+        disabled?: boolean;
+        /** Help text to display below the input. */
+        help?: string | Snippet;
+        /** A random id is generated if not provided. */
+        id?: string;
+        /** The label for the input */
+        label?: string | Snippet
+        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | Snippet;
+        /** 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;
+        /** The options for the select element. */
+        options?: string[] | { value: string; label: 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 required. */
+        required?: boolean;
+        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
+        results?: number;
+        /** The shape of the input element. */
+        shape?: 'default' | 'rounded' | 'pill' | 'circle';
+        /** Source URL for the image type. */
+        src?: string;
+        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+        tabindex?: number;
+        /** The value of the input element. */
+        value?: string | number | boolean | null;
+    } = $props();
+
+    let el: HTMLSelectElement | undefined = $state();
+
+    // 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;
+    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);
+    });
+
 </script>
 
 <FieldContent
@@ -128,7 +178,7 @@ onMount(() => {
     }
     svg {
         display: block;
-        color: var(--field-text);
+        color: var(--field-text-color, light-dark(black, white));
     }
     select:focus-visible {
         outline: none;

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

@@ -1,15 +1,5 @@
 import { type Snippet } from "svelte";
-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 Select: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     /** Whether the input should be autofocused. */
     autofocus?: boolean;
     /** Options for the select element. */
@@ -56,15 +46,14 @@ declare const Select: $$__sveltets_2_IsomorphicComponent<{
     /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
     results?: number;
     /** The shape of the input element. */
-    shape?: "default" | "rounded" | "pill" | "circle";
+    shape?: 'default' | 'rounded' | 'pill' | 'circle';
     /** Source URL for the image type. */
     src?: string;
     /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
     tabindex?: number;
     /** The value of the input element. */
     value?: string | number | boolean | null;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "id">;
-type Select = InstanceType<typeof Select>;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "id" | "value">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/form/Textarea.svelte

@@ -1,100 +1,203 @@
-<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 lang="ts">
+	import { getContext, onMount, type Snippet } from "svelte";
+	import { IconCopy, IconDone, IconShow } from "../icons/index.js";
+	import Tooltip from "../components/Tooltip.svelte";
+	import IconButton from "../components/IconButton.svelte";
+	import type { Autocomplete, LutraForm } from "./types.js";
+	import FieldContent from "./FieldContent.svelte";
+	import { fieldChange, fieldKeydown } from "./client.svelte.js";
+	import { getFromObjWithStringPath } from "./form.js";
+	import { ZodType } from "zod";
+
+    let {
+        autofocus,
+        autocapitalize,
+        autocomplete,
+        autoresize,
+        checked,
+        contained,
+        copyable,
+        defaultValue,
+        dirname,
+        disabled,
+        enterkeyhint,
+        help,
+        id = $bindable(crypto.randomUUID()),
+        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
+    }: {
+        /** 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 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;
+    } = $props();
+
+    let el: HTMLTextAreaElement | undefined = $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);
+
+    // 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;
+
+    if(contained === undefined) { contained = getContext('lutra.form.input.contained') ?? getContext('lutra.form.contained') ?? getContext('lutra.contained') ?? false; }
+
+    if(!value) value = form ? (getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) as string) || form?.fields?.[name]?.defaultValue as string : '';
+
+    function copy(e: MouseEvent) {
+        e.preventDefault();
+        if(!el) return;
+        // try with navigator.clipboard
+        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)({} as any);
+        setTimeout(() => {
+            onresize();
+        }, 5);
+    });
 </script>
 
 <svelte:window onresize={onresize} />
@@ -115,7 +218,6 @@ onMount(() => {
         {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}