lutra 0.0.20 → 0.1.0

package/dist/form/Input.svelte

@@ -1,287 +0,0 @@
-<script lang="ts">import { getContext } from "svelte";
-import { createId } from "../utils/id.js";
-import Copy from "../icons/Copy.svelte";
-import Done from "../icons/Done.svelte";
-import Show from "../icons/Show.svelte";
-import Hide from "../icons/Hide.svelte";
-import Tooltip from "../display/Tooltip.svelte";
-import IconButton from "../display/IconButton.svelte";
-import { 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 {
-  alt,
-  attrs,
-  autocapitalize,
-  autocomplete,
-  autocorrect,
-  capture,
-  checked,
-  contained,
-  copyable,
-  defaultValue,
-  dirname,
-  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,
-  results,
-  shape = "rounded",
-  size,
-  src,
-  step,
-  tabindex,
-  title,
-  type,
-  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));
-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);
-  } else {
-    el.focus();
-    el.select();
-    document.execCommand("copy");
-  }
-  copyBtnIcon = Done;
-  copyTitle = "Copied!";
-  copyTooltipOpen = true;
-  setTimeout(() => {
-    copyBtnIcon = Copy;
-    copyTitle = "Copy";
-    copyTooltipOpen = false;
-  }, 1500);
-  el.focus();
-}
-</script>
-
-{#snippet input()} 
-<input
-    bind:this={el}
-    {alt}
-    autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
-    {autocomplete}
-    autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
-    {capture}
-    {checked}
-    {dirname}
-    {disabled}
-    {enterkeyhint}
-    {height}
-    {id}
-    {indeterminate}
-    {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}
-    {onclick}
-    onchange={fieldChange(form, name, () => el, validator, onchange)}
-    {onfocus}
-    onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
-    {onkeyup}
-    {onkeypress}
-    pattern={pattern ? pattern : field?.pattern}
-    {placeholder}
-    {readonly}
-    required={required || field?.required}
-    {results}
-    {size}
-    {src}
-    {step}
-    {tabindex}
-    {title}
-    {type}
-    value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
-    {webkitdirectory}
-    {...rest}
-/>
-{/snippet}
-
-<FieldContent
-    {id}
-    {label}
-    {labelTip}
-    contained={type === "checkbox" || type === "radio" ? false : true}
-    direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
-    {field}
-    {issue}
-    {prefix}
-    {suffix}
->
-
-    {#if type === "checkbox" || type === "radio"}
-        {@render input()}
-    {: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>
-
-<style>
-    .FieldContainer {
-        display: flex;
-        gap: 0.75em;
-        flex-direction: column;
-        font-size: var(--font-size, 1em);
-    }
-    .Field {
-        background-color: var(--field-bg);
-        border: var(--field-border-size) var(--field-border-style) var(--field-border-color);
-        border-radius: var(--field-radius);
-        display: flex;
-        padding-inline: 0.15em;
-    }
-    .Field:has(input:user-invalid),
-    .Field.invalid {
-        border-color: var(--field-border-color-error);
-    }
-    .Field > *:not(input) {
-        flex-grow: 0;
-        flex-shrink: 0;
-    }
-    .Fix {
-        display: flex;
-        align-items: center;
-        padding-inline: 0.65em;
-        font-size: 1em;
-        line-height: 1.5;
-        color: var(--text-subtle);
-    }
-    .Suffix {
-        padding-inline-start: 0;
-    }
-    .Prefix {
-        padding-inline-end: 0;
-    }
-    .Field:has(input:focus-visible) {
-        outline: var(--focus-outline);
-    }
-    .Field:has(input:focus-visible:user-invalid),
-    .Field.invalid:has(input:focus-visible) {
-        outline-color: var(--focus-color-error); 
-    }
-    /**
-     * Input element
-     */
-    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;
-    }
-    .Field.hasPrefix input {
-        padding-inline-start: 0.35em;
-    }
-    /**
-     * Buttons
-     */
-    .Field :global(button:focus-visible) {
-        outline: var(--focus-outline);
-        outline-offset: 3px;
-        border-radius: calc(var(--field-radius) - 2px);
-    }
-    /**
-     * Checkbox and radio
-     */
-    input[type="checkbox"] {
-        border-radius: 6px;
-    }
-
-    .FieldContainer.checkOrRadio {
-        flex-direction: row-reverse;
-        align-items: center;
-        justify-content: start;
-        gap: 1em;
-        width: fit-content;
-    }
-    .FieldContainer.checkOrRadio .Field {
-        display: flex;
-        align-items: center;
-        border: none;
-    }
-    .FieldContainer.checkOrRadio input:focus-visible,
-    .FieldContainer.checkOrRadio input:hover {
-        outline: var(--focus-outline);
-    }
-</style>

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

@@ -1,142 +0,0 @@
-import { SvelteComponent } from "svelte";
-import type { Autocomplete } from "./types.js";
-declare const __propDef: {
-    props: {
-        alt?: string | undefined;
-        attrs?: Record<string, string> | undefined;
-        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-        autocomplete?: Autocomplete | undefined;
-        autocorrect?: boolean | undefined;
-        capture?: "user" | "environment" | undefined;
-        checked?: boolean | undefined;
-        contained?: boolean | undefined;
-        copyable?: boolean | undefined;
-        defaultValue?: string | undefined;
-        dirname?: string | undefined;
-        disabled?: boolean | undefined;
-        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
-        height?: number | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        indeterminate?: boolean | undefined;
-        inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        multiple?: boolean | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        pattern?: string | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        size?: number | undefined;
-        src?: string | undefined;
-        spellcheck?: boolean | undefined;
-        step?: number | undefined;
-        tabindex?: number | undefined;
-        title?: string | undefined;
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-        viewable?: boolean | undefined;
-        webkitdirectory?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputProps = typeof __propDef.props;
-export type InputEvents = typeof __propDef.events;
-export type InputSlots = typeof __propDef.slots;
-export default class Input extends SvelteComponent<InputProps, InputEvents, InputSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        alt?: string | undefined;
-        attrs?: Record<string, string> | undefined;
-        autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
-        autocomplete?: Autocomplete | undefined;
-        autocorrect?: boolean | undefined;
-        capture?: "user" | "environment" | undefined;
-        checked?: boolean | undefined;
-        contained?: boolean | undefined;
-        copyable?: boolean | undefined;
-        defaultValue?: string | undefined;
-        dirname?: string | undefined;
-        disabled?: boolean | undefined;
-        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
-        height?: number | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        id?: import("svelte").Bindable<string | undefined>;
-        indeterminate?: boolean | undefined;
-        inputmode?: "none" | "search" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        list?: string | undefined;
-        maxlength?: number | undefined;
-        minlength?: number | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        multiple?: boolean | undefined;
-        name: string;
-        onblur?: ((e: FocusEvent) => void) | undefined;
-        onchange?: ((e: Event) => void) | undefined;
-        onclick?: ((e: MouseEvent) => void) | undefined;
-        onfocus?: ((e: FocusEvent) => void) | undefined;
-        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
-        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
-        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
-        pattern?: string | undefined;
-        placeholder?: string | undefined;
-        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        readonly?: boolean | undefined;
-        required?: boolean | undefined;
-        results?: number | undefined;
-        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
-        size?: number | undefined;
-        src?: string | undefined;
-        spellcheck?: boolean | undefined;
-        step?: number | undefined;
-        tabindex?: number | undefined;
-        title?: string | undefined;
-        type?: "number" | "color" | "button" | "search" | "time" | "image" | "text" | "submit" | "email" | "tel" | "url" | "date" | "checkbox" | "radio" | "hidden" | "password" | "file" | "range" | "datetime-local" | "month" | "week" | undefined;
-        value?: import("svelte").Bindable<string | undefined>;
-        viewable?: boolean | undefined;
-        webkitdirectory?: boolean | undefined;
-    }>);
-}
-export {};

package/dist/form/InputLength.svelte

@@ -1,32 +0,0 @@
-<script lang="ts">let {
-  value,
-  maxlength
-} = $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-warn);
-    }
-</style>

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

@@ -1,21 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        value: string;
-        maxlength: number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type InputLengthProps = typeof __propDef.props;
-export type InputLengthEvents = typeof __propDef.events;
-export type InputLengthSlots = typeof __propDef.slots;
-export default class InputLength extends SvelteComponent<InputLengthProps, InputLengthEvents, InputLengthSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        value: string;
-        maxlength: number;
-    }>);
-}
-export {};

package/dist/form/Label.svelte

@@ -1,27 +0,0 @@
-<script lang="ts">import ContextTip from "../display/ContextTip.svelte";
-let {
-  id,
-  label,
-  tip
-} = $props();
-</script>
-
-{#if label}
-    <label for={id}>
-        {#if typeof label === 'string'}
-            {label}
-        {:else}
-            {@render label()}
-        {/if}
-        {#if tip}
-            <ContextTip {tip} />
-        {/if}
-    </label>
-{/if}
-
-<style>
-    label {
-        cursor: var(--cursor, default);
-        text-wrap: balance;
-    }
-</style>

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

@@ -1,31 +0,0 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        id?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type LabelProps = typeof __propDef.props;
-export type LabelEvents = typeof __propDef.events;
-export type LabelSlots = typeof __propDef.slots;
-export default class Label extends SvelteComponent<LabelProps, LabelEvents, LabelSlots> {
-    constructor(options?: import("svelte").ComponentConstructorOptions<{
-        id?: string | undefined;
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        tip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    }>);
-}
-export {};

package/dist/form/Select.svelte

@@ -1,88 +0,0 @@
-<script lang="ts">import { getContext } from "svelte";
-import Label from "./Label.svelte";
-import { createId } from "../utils/id.js";
-import Copy from "../icons/Copy.svelte";
-import Done from "../icons/Done.svelte";
-import Show from "../icons/Show.svelte";
-import Hide from "../icons/Hide.svelte";
-import Tooltip from "../display/Tooltip.svelte";
-import IconButton from "../display/IconButton.svelte";
-import { 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 {
-  attrs,
-  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;
-</script>
-
-<FieldContent
-    {id}
-    {label}
-    {labelTip}
-    {field}
-    {issue}
->
-    <select
-        bind:this={el}
-        {disabled}
-        {id}
-        {name}
-        {onblur}
-        {onclick}
-        onchange={fieldChange(form, name, () => el, validator, onchange)}
-        {onfocus}
-        onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
-        {onkeyup}
-        {onkeypress}
-        {placeholder}
-        required={required || field?.required}
-        {results}
-        {tabindex}
-        value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
-    >
-        {#if children}
-            {@render children()}
-        {:else if options}
-            {#each options as option}
-                {#if typeof option === 'string'}
-                    <option value={option}>{option}</option>
-                {:else}
-                    <option value={option.value}>{option.label}</option>
-                {/if}
-            {/each}
-        {/if}
-    </select>
-</FieldContent>
-
-<style>
-</style>