lutra 0.0.12 → 0.0.13

package/dist/datatable/DataTable.svelte

@@ -17,14 +17,15 @@ let {
     section {
         container-type: inline-size;
         display: grid;
-        grid-template-columns: repeat(calc(var(--dtcols) - 1), auto) 1fr;
+        grid-template-columns: repeat(var(--dtcols), minmax(min-content, 1fr));
         border-radius: var(--border-radius);
-        width: 100%;
         font-size: var(--font-size, 1em);
+        margin-inline: calc((var(--dtc) - 1) * 1em);
+        width: calc(100% + (var(--dtc) - 1 * 2em));
+        overflow-x: auto;
     }
     section.contained {
         border: var(--border);
         border-radius: var(--border-radius);
-        overflow-x: auto;
     }
 </style>

package/dist/datatable/DataTableRow.svelte

@@ -19,22 +19,21 @@ setContext("DataTableRow", { header });
 <style>
     .DataTableRow {
         display: grid;
-        grid-column: 1 / calc(var(--dtcols) + 1);
         grid-template-columns: subgrid;
+        grid-column: 1 / -1;
         gap: 1.5em;
         align-items: center;
         width: 100%;
-        overflow: none;
-        padding: 0.75em calc(1.5em * var(--dtc));
+        padding: 0.75em 1em;
         position: relative;
     }
     .DataTableRow:hover {
-        background: color-mix(in srgb, var(--bg-subtle) calc(var(--dtc) * 100%), transparent);
+        background: var(--bg-subtle);
     }
     .DataTableRow:has(.Actions) {
         padding-right: 0;
     }
-    .DataTableRow :global(*) {
+    .DataTableRow :global(> *) {
         white-space: nowrap;
     }
     .DataTableRow.header {

package/dist/display/ContextTip.svelte

@@ -7,17 +7,21 @@ let {
 </script>
 
 <Tooltip {tip}>
-    <button onclick={(e) => e.preventDefault()}>
-        <Icon icon={Help} />
-    </button>
+    <a href="#foo" onclick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
+        <Icon icon={Help} --icon-width="16px" --icon-height="16px" --cursor="help" />
+    </a>
 </Tooltip>
 
 <style>
-    button {
+    a {
         border-radius: 50%;
+        color: var(--text);
+        height: 16px;
+        width: 16px;
+        display: inline-block;
     }
-    button:focus,
-    button:active {
-        outline-offset: -3px;
+    a:focus,
+    a:active {
+        outline-offset: -2px;
     }
 </style>

package/dist/display/Icon.svelte

@@ -17,19 +17,20 @@ let {
 
 <style>
     .Icon {
-        display: inline-flex;
+        display: flex;
         align-items: center;
         justify-content: center;
         font-size: 1em;
         width: var(--icon-width, var(--font-size, 1em));
         height: var(--icon-height, var(--font-size, 1em));
         overflow: clip;
-        vertical-align: var(--vertical-align, baseline);
+        vertical-align: var(--vertical-align, text-bottom);
         cursor: var(--cursor, default);
     }
+    img,
     .Icon :global(svg) {
         width: 100%;
         height: 100%;
-        display: inline-block;
+        display: block;
     }
 </style>

package/dist/display/Tooltip.svelte

@@ -32,9 +32,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
 <style>
     .Tooltip {
         position: relative;
-        height: 100%;
         display: inline-flex;
-        align-items: center;
+        vertical-align: var(--vertical-align, text-bottom);
     }
     .TooltipContainer {
         position: absolute;
@@ -58,8 +57,8 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
         border-left: var(--border-subtle);
         border-right: var(--border-subtle);
         display: block;
-        font-size: max(0.85rem, 12px);
-        line-height: 1.4;
+        font-size: max(0.75rem, 11px);
+        line-height: 1.35;
         font-weight: 500;
         color: var(--text);
         max-width: clamp(5ch, 100%, 35ch);
@@ -72,6 +71,10 @@ const id = `tt-${Math.random().toString(36).substring(2, 15) + Math.random().toS
     .TooltipContent :global(b) {
         font-weight: 700;
     }
+    .TooltipTrigger {
+        display: inline-flex;
+        align-items: center;
+    }
     .Tooltip:has(.TooltipTrigger:hover):not(.open) .TooltipContainer {
         animation: fadeIn 0.2s var(--delay, 0.5s) ease-in-out forwards;
     }

package/dist/form/FieldActions.svelte

@@ -16,6 +16,7 @@
         gap: 1.35em;
         background: color-mix(in srgb, var(--bg-subtle) calc(var(--fcc) * 100%), transparent);
         padding: calc(1.5em * var(--fcc)) calc(1.5em * var(--fcc));
+        grid-column: 1 / -1;
     }
     @container (max-width: 400px) {
         .FieldActions {

package/dist/form/FieldContainer.svelte

@@ -13,7 +13,7 @@
         container-type: inline-size;
         display: grid;
         gap: 1.5em;
-        grid-template-columns: 1fr;
+        grid-template-columns: 250px 1fr;
         border-radius: var(--border-radius);
     }
     .FieldContainer.contained {

package/dist/form/FieldSection.svelte

@@ -36,11 +36,12 @@ let {
         padding: 0;
         display: grid;
         gap: 0rem;
-        grid-template-columns: 1fr;
+        grid-template-columns: subgrid;
     }
     .FieldSection .FieldSectionTitle {
         display: flex;
         flex-direction: column;
+        grid-column: 0 / 1;
         background-color: var(--base);
         gap: 0.25rem;
         padding: 1em 1.5em;
@@ -51,20 +52,21 @@ let {
     }
     .FieldSection .FieldSectionFields {
         padding: calc(var(--padding, 1.5em) * var(--fcc));
+        grid-column: 1 / -1;
         display: grid;
         gap: 1.5rem;
     }
     @container (min-width: 600px) {
         .FieldSection {
             gap: 3rem;
-            padding: 2rem;
-            grid-template-columns: 1fr;
+            padding: calc(2rem * var(--fcc));
+            /*grid-template-columns: 1fr;*/
             border-bottom: 1px dotted var(--border-light);
             margin-bottom: 3rem;
             border-radius: 0;
         }
         .FieldSection:has(.FieldSectionTitle) {
-            grid-template-columns: minmax(180px, 1fr) 3fr;
+            /*grid-template-columns: minmax(180px, 1fr) 3fr;*/
         }
         .FieldSection:last-child {
             border-bottom: none;
@@ -86,8 +88,8 @@ let {
     }
     @container (min-width: 1024px) {
         .FieldSection {
-            grid-template-columns: minmax(300px, 1fr) 3fr;
-            padding: 3rem;
+            /*grid-template-columns: minmax(300px, 1fr) 3fr;*/
+            padding: calc(3rem * var(--fcc));
         }
         .FieldSection:not(:first-child) {
             border-top: 0;

package/dist/form/Form.svelte

@@ -16,26 +16,30 @@ let {
 } = $props();
 setContext("form", form);
 setContext("form.validators", getIndividualValidators(form));
-const schema = dezerialize(form.schema);
+const schema = form?.schema ? dezerialize(form?.schema) : null;
 const bodyguard = new Bodyguard();
 let formEl;
 function setFormIssuesAndFields(issues, fields) {
-  form.issues = issues;
-  form.fields = fields;
+  if (form) {
+    form.issues = issues;
+    form.fields = fields;
+  }
 }
 async function validate() {
-  form.tainted = true;
-  const req = new Request("localhost", {
-    method: "POST",
-    body: new FormData(formEl)
-  });
-  const result = await bodyguard.softForm(req, schema.parse);
-  if (result.success === true) {
-    form.valid = true;
-    form.issues = [];
-  } else {
-    form.valid = false;
-    form.issues = parseFormIssues(result.error.issues);
+  if (form && schema) {
+    form.tainted = true;
+    const req = new Request("localhost", {
+      method: "POST",
+      body: new FormData(formEl)
+    });
+    const result = await bodyguard.softForm(req, schema.parse);
+    if (result.success === true) {
+      form.valid = true;
+      form.issues = [];
+    } else {
+      form.valid = false;
+      form.issues = parseFormIssues(result.error.issues);
+    }
   }
 }
 onMount(() => {
@@ -61,19 +65,20 @@ onMount(() => {
                 // `result` is an `ActionResult` object
                 // `update` is a function which triggers the default logic that would be triggered if this callback wasn't set
                 console.log('result', result);
-                const resultForm = result?.data?.form;
+                const resultForm = result.type !== "redirect" && result.type !== "error" ? result?.data?.form : null;
                 if(result.type === "success") {
-                    if(resultForm) {
-                        form.valid = resultForm.valid;
-                    }
-                } else if(result.type === "error") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        form.valid = Object.assign({ valid: false }, resultForm).valid ?? false;
                     }
                 } else if(result.type === "failure") {
-                    if(resultForm) {
-                        setFormIssuesAndFields(resultForm.issues, resultForm.fields);
+                    if(resultForm && form) {
+                        setFormIssuesAndFields(
+                            Object.assign({ issues: [] }, resultForm).issues, // Have to assign to avoid type error as we cant use `as` here
+                            Object.assign({ fields: [] }, resultForm).fields,
+                        );
                     }
+                } else if(result.type === "error") {
+                    console.error('[lutra] Error from form enhance call', result.error);
                 } else if(result.type === "redirect") {
                     window.location.href = result.location;
                 }

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

@@ -3,7 +3,7 @@ import type { Snippet } from "svelte";
 import type { Form } from "./types.js";
 declare const __propDef: {
     props: {
-        form: Form<any>;
+        form?: Form<any> | undefined;
         action?: string | undefined;
         enctype?: "application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain" | undefined;
         method?: "GET" | "POST" | undefined;

package/dist/form/Input.svelte

@@ -13,6 +13,7 @@ import { ZodType } from "zod";
 import FieldContent from "./FieldContent.svelte";
 let {
   alt,
+  attrs,
   autocapitalize,
   autocomplete,
   autocorrect,
@@ -69,7 +70,7 @@ let copyTooltipOpen = $state(false);
 let copyBtnIcon = $state(Copy);
 let viewBtnIcon = $state(Show);
 const form = getContext("form");
-const field = $derived(form.fields[name]);
+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;
@@ -115,6 +116,7 @@ function copy(e) {
 <input
     bind:this={el}
     {alt}
+    {...attrs}
     autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
     {autocomplete}
     autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
@@ -151,7 +153,7 @@ function copy(e) {
     {tabindex}
     {title}
     {type}
-    value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
+    value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     {webkitdirectory}
 />
 {/snippet}

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

@@ -4,6 +4,8 @@ declare const __propDef: {
     props: {
         /** alt attribute for the image type. Required for accessibility */
         alt?: string | undefined;
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | undefined;
         /** Whether the input should be autocapitalized. */
         autocapitalize?: boolean | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
         /** Specifies whether autocomplete is enabled for the input. */
@@ -117,7 +119,7 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {}; /** Onclick event handler */
+    slots: {};
 };
 export type InputProps = typeof __propDef.props;
 export type InputEvents = typeof __propDef.events;

package/dist/form/Select.svelte

@@ -13,27 +13,14 @@ import { getFromObjWithStringPath } from "./form.js";
 import { ZodType } from "zod";
 import FieldContent from "./FieldContent.svelte";
 let {
-  alt,
-  checked,
+  attrs,
   children,
-  contained,
-  defaultValue,
-  dirname,
   disabled,
   help,
   id = $bindable(createId()),
   label,
   labelTip,
-  list,
-  maxlength,
-  minlength,
-  max,
-  min,
-  multiple,
   name,
-  pattern,
-  placeholder,
-  suffix,
   onblur,
   onchange,
   onclick,
@@ -42,23 +29,16 @@ let {
   onkeyup,
   onkeypress,
   options,
-  prefix,
-  readonly,
+  placeholder,
   required,
   results,
-  shape = "rounded",
-  src,
+  shape = "default",
   tabindex,
   value = $bindable()
 } = $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 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;
@@ -74,6 +54,7 @@ const originalData = form?.originalData;
 >
     <select
         bind:this={el}
+        {...attrs}
         {disabled}
         {id}
         {name}
@@ -88,7 +69,7 @@ const originalData = form?.originalData;
         required={required || field?.required}
         {results}
         {tabindex}
-        value={value || getFromObjWithStringPath(Object.assign(originalData, data), name) || form?.fields?.[name]?.defaultValue || ''}
+        value={value || getFromObjWithStringPath(Object.assign(originalData ?? {}, data ?? {}), name) || form?.fields?.[name]?.defaultValue || ''}
     >
         {#if children}
             {@render children()}

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

@@ -1,20 +1,12 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        /** alt attribute for the image type. Required for accessibility */
-        alt?: string | undefined;
-        /** Whether the input should be checked. */
-        checked?: boolean | undefined;
+        /** Additional attributes to add to the input element. */
+        attrs?: Record<string, string> | 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;
-        /** 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. */
@@ -31,18 +23,6 @@ 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;
-        /** 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 */
@@ -64,8 +44,6 @@ declare const __propDef: {
             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. */
@@ -76,8 +54,6 @@ declare const __propDef: {
         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. */

package/dist/form/client.svelte.js

@@ -51,11 +51,13 @@ export function fieldValidate(form, name, el, validator) {
 export function fieldKeydown(form, name, el, validator, onkeydown) {
     return async function (e) {
         setTimeout(() => {
-            const possibleKey = e?.key;
-            if (ignoreKeys.includes(possibleKey))
-                return;
-            form.data[name] = el()?.value || '';
-            fieldValidate(form, name, el(), validator);
+            if (form) {
+                const possibleKey = e?.key;
+                if (ignoreKeys.includes(possibleKey))
+                    return;
+                form.data[name] = el()?.value || '';
+                fieldValidate(form, name, el(), validator);
+            }
         }, 0); // Wait for the key to be updated in the input.
         if (onkeydown)
             return onkeydown(e);
@@ -72,10 +74,12 @@ 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);
+        if (form) {
+            console.log('fieldChange', name, el()?.value, validator);
+            form.data[name] = el()?.value || '';
+            form.fields[name].tainted = true;
+            fieldValidate(form, name, el(), validator);
+        }
         if (onchange)
             return onchange(e);
     };

package/dist/form/form.d.ts

@@ -49,4 +49,4 @@ export declare function getFromObjWithStringPath(obj: any, path: string): string
  * @param {Form} form - The form to get the validators from.
  * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
  */
-export declare function getIndividualValidators<T extends ZodTypes>(form: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;
+export declare function getIndividualValidators<T extends ZodTypes>(form?: Form<T>): Record<keyof Infer<T>, (value: any) => boolean>;

package/dist/form/form.js

@@ -246,6 +246,8 @@ export function arrayPathToStringPath(path) {
  * @returns {string | number | Date | boolean | object | undefined} - The value from the object.
  */
 export function getFromObjWithStringPath(obj, path) {
+    if (!obj)
+        return undefined;
     const parts = path.split('.');
     let current = obj;
     for (let i = 0; i < parts.length; i++) {
@@ -301,6 +303,8 @@ export function getFromObjWithStringPath(obj, path) {
  * @returns {Record<keyof Infer<T>, (value: any) => boolean>} - The validators for each field.
  */
 export function getIndividualValidators(form) {
+    if (!form)
+        return {};
     const schema = form.schema;
     const fields = form.fields;
     if (!schema || !fields) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lutra",
-	"version": "0.0.12",
+	"version": "0.0.13",
 	"scripts": {
 		"dev": "vite dev --host 0.0.0.0",
 		"props": "node read_props.js",