lutra 0.0.19 → 0.0.33

package/dist/form/Input.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">import { getContext } from "svelte";
+<script lang="ts">import { getContext, onMount } 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 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";
@@ -11,9 +11,12 @@ 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,
-  attrs,
+  autofocus,
   autocapitalize,
   autocomplete,
   autocorrect,
@@ -22,7 +25,6 @@ let {
   contained,
   copyable,
   defaultValue,
-  dirname,
   disabled,
   enterkeyhint,
   height,
@@ -52,15 +54,14 @@ let {
   prefix,
   readonly,
   required,
-  results,
   shape = "rounded",
   size,
   src,
   step,
-  tabindex,
   title,
   type,
-  value = $bindable(),
+  unit,
+  value = $bindable(""),
   viewable,
   webkitdirectory,
   ...rest
@@ -74,13 +75,15 @@ 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) return;
   if (el.type === "password") {
     el.type = "text";
     viewBtnIcon = Hide;
@@ -94,10 +97,9 @@ function view(e) {
 }
 function copy(e) {
   e.preventDefault();
-  if (!el)
-    return;
+  if (!el) return;
   if (navigator.clipboard) {
-    navigator.clipboard.writeText(value);
+    navigator.clipboard.writeText(value.toString());
   } else {
     el.focus();
     el.select();
@@ -113,131 +115,163 @@ function copy(e) {
   }, 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>
 
-{#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 input()}
+    {#if type === 'checkbox'}
+        <input
+            type="checkbox"
+            bind:this={el}
+            {alt}
+            {autofocus}
+            {disabled}
+            {enterkeyhint}
+            {height}
+            {id}
+            {indeterminate}
+            {inputmode}
+            {name}
+            onblur={blur}
+            {onclick}
+            onchange={fieldChange(form, name, () => el, validator, onchange)}
+            onfocus={focus}
+            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+            {onkeyup}
+            {onkeypress}
+            {readonly}
+            required={required || field?.required}
+            {title}
+            bind:checked={value}
+            {...rest}
+        />
+    {:else}
+        <input
+            bind:this={el}
+            {alt}
+            {autofocus}
+            autocapitalize={typeof autocapitalize === 'string' ? autocapitalize : (typeof autocapitalize === 'boolean' ? (autocapitalize ? 'on' : 'off') : undefined)}
+            {autocomplete}
+            autocorrect={typeof autocorrect === 'boolean' ? (autocorrect ? 'on' : 'off') : undefined}
+            {capture}
+            {checked}
+            {disabled}
+            {enterkeyhint}
+            {height}
+            {id}
+            {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={blur}
+            {onclick}
+            onchange={fieldChange(form, name, () => el, validator, onchange)}
+            onfocus={focus}
+            onkeydown={fieldKeydown(form, name, () => el, validator, onkeydown)}
+            {onkeyup}
+            {onkeypress}
+            pattern={pattern ? pattern : field?.pattern}
+            {placeholder}
+            {readonly}
+            required={required || field?.required}
+            {size}
+            {src}
+            {step}
+            {title}
+            {type}
+            bind:value={value}
+            {webkitdirectory}
+            {...rest}
+        />
+    {/if}
 {/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 === 'hidden'}
+    {@render input()}
+{:else}
+    <FieldContent
+        {id}
+        {label}
+        {labelTip}
+        contained={type === "checkbox" || type === "radio" || type === "color" || type === "range" ? false : true}
+        direction={(type === "checkbox" || type === "radio") ? 'row' : 'column'}
+        {field}
+        {issue}
+        {type}
+        {help}
+        {prefix}
+        {suffix}
+        {required}
+    >
 
-    {#if type === "checkbox" || type === "radio"}
-        {@render input()}
-    {:else}
+        {#if type === "checkbox" || type === "radio"}
+            {@render input()}
+        {:else if type === "range"}
+            <div class="Range">
+                {#if min?.toString().length}
+                    <span>{min}{unit}</span>
+                {/if}
+                <div class="RangeInput">
+                    {@render input()}
+                    {#if focused && min?.toString().length && max?.toString().length}
+                        <Theme theme="invert">
+                            <div
+                                class="RangeValue"
+                                in:fade={{ duration: 100 }}
+                                out:fade={{ duration: 100 }}
+                                style="left: {rangeValueLeft}%"
+                            >
+                                {value}{unit}
+                            </div>
+                        </Theme>
+                    {/if}
+                </div>
+                {#if max?.toString().length}
+                    <span>{max}{unit}</span>
+                {/if}
+            </div>
+        {:else}
 
-        {@render input()}
+            {@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 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>
+        {/if}
+    </FieldContent>
+{/if}
 
 <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
      */
@@ -250,16 +284,8 @@ function copy(e) {
     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);
+    input[type="range"] {
+        display: block;
     }
     /**
      * Checkbox and radio
@@ -267,21 +293,34 @@ function copy(e) {
     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 {
+    .Range {
         display: flex;
+        gap: 0.5em;
         align-items: center;
-        border: none;
     }
-    .FieldContainer.checkOrRadio input:focus-visible,
-    .FieldContainer.checkOrRadio input:hover {
-        outline: var(--focus-outline);
+    .RangeValue {
+        position: absolute;
+        top: 0;
+        font-size: max(0.85em, 9px);
+        color: var(--text-subtle);
+        background: var(--bg-app);
+        padding: 0.15em 0.35em;
+        border-radius: var(--border-radius);
+        transform: translate(-50%, -125%);
+        border: var(--border);
+        min-inline-size: 1em;
+        box-shadow: 0 0.5rem 1rem var(--shadow);
+        font-weight: 600;
+    }
+    .Range span {
+        font-size: 0.75em;
+        color: var(--text-subtle);
+    }
+    .RangeInput {
+        position: relative;
+        flex-grow: 1;
+    }
+    .RangeInput :global(input) {
+        width: 100%;
     }
 </style>