lutra 0.0.10 → 0.0.12

package/dist/form/FieldContent.svelte

@@ -1,4 +1,5 @@
 <script>import Label from "./Label.svelte";
+import FieldError from "./FieldError.svelte";
 let {
   id,
   contained,
@@ -7,12 +8,16 @@ let {
   label,
   labelTip,
   type = "text",
-  children
+  direction = "column",
+  // 'row' | 'column'
+  children,
+  field,
+  issue
 } = $props();
 </script>
 
 
-<div class="FieldContent {type}" class:contained>
+<div class="FieldContent {type} {direction}" class:contained>
     <Label {label} tip={labelTip} {id} />
     {#if contained}
         <div class="Field">
@@ -27,6 +32,10 @@ let {
     {:else}
         {@render children()}
     {/if}
+
+    {#if field?.tainted && issue?.code}
+        <FieldError code={issue.code} message={issue.message} />
+    {/if}
 </div>
 
 <style>
@@ -75,4 +84,10 @@ let {
         outline-offset: 3px;
         border-radius: calc(var(--field-radius) - 2px);
     }
+    /**
+     * Row
+     */ 
+    .FieldContent.row {
+        flex-direction: row;
+    }
 </style>

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

@@ -1,5 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Snippet } from "svelte";
+import type { FormField, FormIssue } from "./types.js";
 declare const __propDef: {
     props: {
         id: string;
@@ -17,7 +18,10 @@ declare const __propDef: {
         labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
+        direction?: "row" | "column" | undefined;
         children: Snippet;
+        field?: FormField | undefined;
+        issue?: FormIssue | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/form/FieldSection.svelte

@@ -56,7 +56,7 @@ let {
     }
     @container (min-width: 600px) {
         .FieldSection {
-            gap: 1.5rem;
+            gap: 3rem;
             padding: 2rem;
             grid-template-columns: 1fr;
             border-bottom: 1px dotted var(--border-light);

package/dist/form/Input.svelte

@@ -1,5 +1,4 @@
-<script>import { getContext, unstate } from "svelte";
-import Label from "./Label.svelte";
+<script>import { getContext } from "svelte";
 import { createId } from "../utils/id.js";
 import Copy from "../icons/Copy.svelte";
 import Done from "../icons/Done.svelte";
@@ -11,6 +10,7 @@ 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,
   autocapitalize,
@@ -136,9 +136,9 @@ function copy(e) {
     {name}
     {onblur}
     {onclick}
-    onchange={fieldChange(form, name, () => el, validator)}
+    onchange={fieldChange(form, name, () => el, validator, onchange)}
     {onfocus}
-    onkeydown={fieldKeydown(form, name, () => el, validator)}
+    onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
     {onkeyup}
     {onkeypress}
     pattern={pattern ? pattern : field?.pattern}
@@ -155,12 +155,15 @@ function copy(e) {
     {webkitdirectory}
 />
 {/snippet}
-<div
-    class="FieldContainer {type}"
-    class:checkOrRadio={type === "checkbox" || type === "radio"}
->
 
-    <Label {id} {label} tip={labelTip} />
+<FieldContent
+    {id}
+    {label}
+    {labelTip}
+    direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
+    {field}
+    {issue}
+>
 
     {#if type === "checkbox" || type === "radio"}
         {@render input()}
@@ -206,11 +209,8 @@ function copy(e) {
                 </div>
             {/if}
         </div>
-        {#if field?.tainted && issue?.code}
-            <FieldError code={issue.code} message={issue.message} />
-        {/if}
     {/if}
-</div>
+</FieldContent>
 
 <style>
     .FieldContainer {

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

@@ -117,7 +117,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {}; /** Onclick event handler */
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;

package/dist/form/Select.svelte

@@ -1,22 +1,106 @@
-<script>import FieldContent from "./FieldContent.svelte";
+<script>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 {
+  alt,
+  checked,
+  children,
+  contained,
+  defaultValue,
+  dirname,
+  disabled,
+  help,
+  id = $bindable(createId()),
   label,
   labelTip,
-  help,
-  options
+  list,
+  maxlength,
+  minlength,
+  max,
+  min,
+  multiple,
+  name,
+  pattern,
+  placeholder,
+  suffix,
+  onblur,
+  onchange,
+  onclick,
+  onfocus,
+  onkeydown,
+  onkeyup,
+  onkeypress,
+  options,
+  prefix,
+  readonly,
+  required,
+  results,
+  shape = "rounded",
+  src,
+  tabindex,
+  value = $bindable()
 } = $props();
-let id = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
+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;
 </script>
 
-<FieldContent {id} {label} {labelTip}>
-    <select>
-        {#each options as option}
-            {#if typeof option === "string"}
-                <option value={option}>{option}</option>
-            {:else}
-                <option value={option.value}>{option.label}</option>
-            {/if}
-        {/each}
+<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>
 

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

@@ -1,19 +1,95 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+        /** alt attribute for the image type. Required for accessibility */
+        alt?: string | undefined;
+        /** Whether the input should be checked. */
+        checked?: boolean | undefined;
+        /** Options for the select element. */
+        children?: ((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 & {
+        /** Whether the input should be contained. */
+        contained?: boolean | undefined;
+        /** The default value of the input element. */
+        defaultValue?: string | undefined;
+        /** Form field name for the directionality of the element's text content during form submission */
+        dirname?: string | undefined;
+        /** Whether the input should be disabled. */
+        disabled?: boolean | undefined;
+        /** Help text to display below the input. */
+        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        help?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+        /** A random id is generated if not provided. */
+        id?: string | undefined;
+        /** The label for the input */
+        label?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Context tooltip for a label. Renders with a questionmark using ContextTip. */
+        labelTip?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
             _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
         }) | undefined;
-        options: string[] | {
+        /** The id of a datalist element that contains pre-defined options for the input element. */
+        list?: string | undefined;
+        /** 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 | undefined;
+        /** 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 | undefined;
+        /** The maximum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        max?: number | undefined;
+        /** The minimum value of the input element. Valid for date, month, week, time, datetime-local, number, and range. */
+        min?: number | undefined;
+        /** Whether the input should allow multiple values. Valid for email and file inputs. */
+        multiple?: boolean | undefined;
+        /** The name of the input element. */
+        name: string;
+        /** The onblur event handler */
+        onblur?: ((e: FocusEvent) => void) | undefined;
+        /** Onchange event handler */
+        onchange?: ((e: Event) => void) | undefined;
+        /** Onclick event handler */
+        onclick?: ((e: MouseEvent) => void) | undefined;
+        /** Onfocus event handler */
+        onfocus?: ((e: FocusEvent) => void) | undefined;
+        /** Keyup event handler */
+        onkeyup?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keydown event handler */
+        onkeydown?: ((e: KeyboardEvent) => void) | undefined;
+        /** Keypress event handler */
+        onkeypress?: ((e: KeyboardEvent) => void) | undefined;
+        /** The options for the select element. */
+        options?: string[] | {
             value: string;
             label: string;
-        }[];
+        }[] | undefined;
+        /** A regular expression that the input's value is checked against. Valid for text, search, url, tel, email, and password. */
+        pattern?: string | undefined;
+        /** Placeholder text to display when the input is empty. */
+        placeholder?: string | undefined;
+        /** Suffix content, to display after the input. */
+        suffix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Prefix content, to display before the input. */
+        prefix?: string | ((this: void) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        /** Whether the input should be read-only. */
+        readonly?: boolean | undefined;
+        /** Whether the input should be required. */
+        required?: boolean | undefined;
+        /** The maximum number of items that should be displayed in the drop-down list of previous search queries. Safari only. */
+        results?: number | undefined;
+        /** The shape of the input element. */
+        shape?: "default" | "circle" | "rounded" | "pill" | undefined;
+        /** Source URL for the image type. */
+        src?: string | undefined;
+        /** An integer attribute indicating if the element can take input focus (is focusable), if it should participate to sequential keyboard navigation. */
+        tabindex?: number | undefined;
+        /** The value of the input element. */
+        value?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/form/client.svelte.js

@@ -34,8 +34,8 @@ export function fieldValidate(form, name, el, validator) {
         form.valid = false;
         form.issues = (form.issues || []).filter((issue) => issue.name !== name);
         form.issues?.push({
-            name,
-            ...result.error.issues[0],
+            name, // Include the path of the field.
+            ...((result.error?.issues?.length ? result.error.issues : [])?.[0]), // Include the first issue as we only care about one at a time.
         });
     }
 }
@@ -72,6 +72,7 @@ export function fieldKeydown(form, name, el, validator, onkeydown) {
  */
 export function fieldChange(form, name, el, validator, onchange) {
     return async function (e) {
+        console.log('fieldChange', name, el()?.value, validator);
         form.data[name] = el()?.value || '';
         form.fields[name].tainted = true;
         fieldValidate(form, name, el(), validator);

package/dist/form/form.d.ts

@@ -1,6 +1,6 @@
-import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type JSONLike } from "@auth70/bodyguard";
+import { Bodyguard, type BodyguardFormConfig, type BodyguardResult, type GenericIssue, type JSONLike } from "@auth70/bodyguard";
 import type { RequestEvent } from "@sveltejs/kit";
-import type { ZodType, infer as Infer, ZodIssue, ZodIssueBase } from "zod";
+import type { ZodType, infer as Infer } from "zod";
 import type { Form, FormField, FormIssue, ZodTypes } from "./types.js";
 export declare const bodyguard: Bodyguard;
 /**
@@ -22,7 +22,7 @@ export declare function loadForm<Z extends ZodTypes>(schema: Z, event: RequestEv
  * @param {ZodIssue[]} issues - The issues to parse.
  * @returns {FormIssue[]} - The parsed issues.
  */
-export declare function parseFormIssues(issues: (ZodIssue & ZodIssueBase)[]): FormIssue[];
+export declare function parseFormIssues(issues: GenericIssue[]): FormIssue[];
 /**
  * Parse a form using a schema.
  * @param {ZodType} schema - The schema to parse the form with.

package/dist/form/types.d.ts

@@ -1,3 +1,4 @@
+import type { GenericIssue } from "@auth70/bodyguard";
 import type { ZodType, infer as Infer, ZodTuple, ZodBigInt, ZodNaN, ZodSet, ZodVoid, ZodUndefined, ZodNull, ZodAny, ZodUnknown, ZodNever, ZodRecord, ZodMap, ZodDiscriminatedUnion, ZodUnion, ZodIntersection, ZodNativeEnum, ZodEnum, ZodFunction, ZodLazy, ZodLiteral, ZodCatch, ZodPipeline, ZodBranded, ZodPromise, ZodArray, ZodNullable, ZodOptional, ZodEffects, ZodObject, ZodDefault, ZodString, ZodNumber, ZodBoolean, ZodDate } from "zod";
 export type Autocomplete = 'on' | 'off' | AutocompleteSingleToken | AutocompleteBilling | AutocompleteShipping;
 export type AutocompleteBilling = 'billing' | `billing ${AutocompleteSingleToken}`;
@@ -12,14 +13,8 @@ export type ADTs = ZodUnion<readonly [ZodTypes, ...ZodTypes[]]> | ZodDiscriminat
 }>[]> | ZodIntersection<ZodTypes, ZodTypes> | ZodNativeEnum<any> | ZodEnum<any>;
 export type ZodTypes = Modifiers | Primitives | ListCollections | KVCollections | ADTs | ZodFunction<any, ZodTypes> | ZodLazy<ZodTypes> | ZodLiteral<any> | ZodEffects<any, any> | ZodCatch<ZodTypes> | ZodPromise<ZodTypes> | ZodBranded<ZodTypes, any> | ZodPipeline<ZodTypes, ZodTypes>;
 export type ZTypeName<T extends ZodTypes> = T["_def"]["typeName"];
-export type FormIssue = {
+export type FormIssue = GenericIssue & {
     name: string;
-    code: string;
-    message?: string;
-    minimum?: number;
-    maximum?: number;
-    exact?: boolean;
-    validation?: string;
 };
 export type Form<T extends ZodType<any, any>> = {
     /** Whether the form is valid. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.10",
+	"version": "0.0.12",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",
@@ -90,7 +90,7 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"@auth70/bodyguard": "^1.5.2",
+		"@auth70/bodyguard": "^1.6.2",
 		"@auth70/zodex-esm": "^0.7.3",
 		"zod": "^3.22.4"
 	}