lutra 0.0.33 → 0.1.0

package/dist/form/ImageUpload.svelte

@@ -1,259 +0,0 @@
-<script lang="ts">import { getContext, onMount } from "svelte";
-import imageCompression from "browser-image-compression";
-import { fade } from "svelte/transition";
-import { addNotification } from "../display/index.js";
-let {
-  src,
-  uploadUrl,
-  name,
-  id = `ImageUpload-${name}`,
-  title = name,
-  button,
-  maxSize = 256e3,
-  compressSize = 0.5,
-  // MB
-  compressMaxWidth = 512,
-  // px
-  accept = "image/png,image/svg+xml,image/jpg",
-  removable = false,
-  shape = "square",
-  onFile,
-  children
-} = $props();
-let files = $state(null);
-let el = $state(null);
-let urlEl = $state(null);
-let error = $state(null);
-let resizeProgress = $state(0);
-let uploadState = $state("idle");
-const beforeSubmit = getContext("form.beforeSubmit");
-beforeSubmit(id, async ({ data, cancel }) => {
-  if (!files || !files[0]) {
-    return;
-  }
-  try {
-    uploadState = "resizing";
-    resizeProgress = 0;
-    const compressedFile = await imageCompression(files[0], {
-      maxSizeMB: compressSize,
-      maxWidthOrHeight: compressMaxWidth,
-      useWebWorker: true,
-      onProgress: (progress) => resizeProgress = progress
-    });
-    console.log("compressedFile instanceof Blob", compressedFile instanceof Blob);
-    console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`);
-    uploadState = "uploading";
-    const response = await fetch(uploadUrl, {
-      method: "PUT",
-      headers: {
-        "Content-Type": files[0].type
-      },
-      body: compressedFile
-    });
-    uploadState = "idle";
-    if (!response.ok) {
-      addNotification({ content: "Something went wrong. Please try again.", autoClose: 3e3 });
-      cancel();
-    }
-    console.log("setting", name, new URL(response.url).href.split("?")[0]);
-    const imgUrl = new URL(response.url).href.split("?")[0];
-    data.set(name, imgUrl);
-    src = imgUrl;
-    console.log("response", response, response.url);
-    console.log("data", data.forEach((v, k) => console.log(k, v)));
-  } catch (err) {
-    console.error("error", err);
-    addNotification({ content: "Something went wrong. Please try again.", autoClose: 3e3 });
-    cancel();
-  }
-});
-function handleFile(event) {
-  error = null;
-  const file = files ? files[0] : null;
-  if (file && file.type.startsWith("image/") && file.size < maxSize) {
-    if (onFile) onFile(file);
-    src = URL.createObjectURL(file);
-  } else if (file && file.type.startsWith("image/") && file.size > maxSize) {
-    error = `Image must be less than ${maxSize / 1024 / 1024}MB.`;
-  } else {
-    error = `File must be an image.`;
-  }
-}
-function remove(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  src = "";
-  files = null;
-}
-function pick(e) {
-  e.preventDefault();
-  e.stopPropagation();
-  el.click();
-}
-let jsEnabled = $state(false);
-onMount(() => {
-  jsEnabled = true;
-});
-</script>
-
-<div class="ImageUpload {shape}">
-    <div class="Image" class:hasSrc={!!src}>
-        {#if src}
-            <img src={src} alt="{title} logo" />
-        {/if}
-        {#if uploadState !== 'idle'}
-            <div class="Loading" in:fade={{ duration: 100 }} out:fade={{ duration: 100 }}>
-                {#if uploadState === 'resizing'}
-                    <small>Resizing.. {resizeProgress}%</small>
-                {:else if uploadState === 'uploading'}
-                    <small>Uploading..</small>
-                {/if}
-            </div>
-        {/if}
-    </div>
-    <div class="ImageUploadActions" style="{!jsEnabled ? 'display: none;' : ''}">
-        {#if children}
-            <div class="description">
-                {@render children()}
-            </div>
-        {/if}
-        <button type="button" class="button outlined" onclick={pick}>
-            {button}
-        </button>
-        {#if removable && src}
-            <button type="button" class="button warn" onclick={remove}>
-                Remove
-            </button>
-        {/if}
-        {#if error}
-            <div class="error">
-                <small>{error}</small>
-            </div>
-        {/if}
-        <input
-            type="file"
-            {accept}
-            {id}
-            bind:files
-            onchange={handleFile}
-            bind:this={el}
-        />
-        <input type="hidden" {name} value={src} bind:this={urlEl} />
-    </div>
-    <noscript>
-        <small>Sorry, you need to enable Javascript to upload images.</small>
-    </noscript>
-</div>
-
-<style>
-    .ImageUpload {
-        display: grid;
-        grid-template-columns: 1fr;
-        align-items: center;
-        gap: 1rem;
-        container-type: inline-size;
-    }
-    .Image {
-        border: 1px solid var(--border-light);
-        pointer-events: none;
-        position: relative;
-        display: none;
-    }
-    .Image.hasSrc {
-        display: block;
-    }
-    .Image img {
-        display: block;
-        object-fit: contain;
-        width: 100%;
-        height: 100%;
-    }
-    .ImageUpload.square .Image img {
-        object-fit: cover;
-    }
-    .ImageUpload.circle .Image {
-        border-radius: 50%;
-        overflow: hidden;
-    }
-    .ImageUpload.circle .Image img {
-        object-fit: cover;
-    }
-    .placeholder {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 100%;
-        object-fit: contain;
-        padding: 1rem;
-        text-align: center;
-        border: 1px dashed var(--border-color);
-        border-radius: var(--border-radius);
-    }
-    .Loading {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: 5;
-        backdrop-filter: blur(5px);
-        background: var(--bg-overlay);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        gap: 1rem;
-        padding: 1rem;
-    }
-    input {
-        display: none;
-    }
-    .error {
-        margin-top: 0.75rem;
-    }
-    .ImageUpload.banner {
-        grid-template-areas: "image";
-        width: 100%;
-    }
-    .ImageUpload.banner .Image {
-        height: 100%;
-        grid-area: image;
-        overflow: hidden;
-        object-fit: cover;
-        height: 15rem;
-        aspect-ratio: initial !important;
-    }
-    .ImageUpload.banner .Image img {
-        object-fit: cover;
-    }
-    .ImageUpload.banner .ImageUploadActions {
-        display: flex;
-        grid-area: image;
-        flex-direction: column;
-        justify-content: center;
-        padding: 1rem;
-    }
-    .ImageUpload.banner:hover .ImageUploadActions {
-        background: var(--bg-overlay);
-    }
-    .ImageUploadActions {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 0.75rem;
-        align-items: start;
-    }
-    @container (min-width: 320px) {
-        .ImageUpload:not(.banner) {
-            grid-template-columns: minmax(auto, var(--max-image-width)) 1fr;
-            gap: 2rem;
-        }
-        .ImageUpload.banner .ImageUploadActions {
-            padding: 3rem;
-        }
-        .ImageUploadActions {
-            grid-template-columns: 1fr;
-            gap: 1rem;
-        }
-    }
-</style>

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

@@ -1,31 +0,0 @@
-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 ImageUpload: $$__sveltets_2_IsomorphicComponent<{
-    src?: string | null;
-    uploadUrl: string;
-    name: string;
-    id?: string;
-    title?: string;
-    button: string;
-    maxSize?: number;
-    compressSize?: number;
-    compressMaxWidth?: number;
-    accept?: string;
-    removable?: boolean;
-    shape?: "square" | "circle" | "banner";
-    onFile?: (file: File) => void;
-    children?: Snippet;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type ImageUpload = InstanceType<typeof ImageUpload>;
-export default ImageUpload;

package/dist/form/Input.svelte

@@ -1,326 +0,0 @@
-<script lang="ts">import { getContext, onMount } from "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";
-import { on } from "svelte/events";
-import { fade } from "svelte/transition";
-import Theme from "../layout/Theme.svelte";
-let {
-  alt,
-  autofocus,
-  autocapitalize,
-  autocomplete,
-  autocorrect,
-  capture,
-  checked,
-  contained,
-  copyable,
-  defaultValue,
-  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,
-  shape = "rounded",
-  size,
-  src,
-  step,
-  title,
-  type,
-  unit,
-  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));
-$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.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.toString());
-  } else {
-    el.focus();
-    el.select();
-    document.execCommand("copy");
-  }
-  copyBtnIcon = Done;
-  copyTitle = "Copied!";
-  copyTooltipOpen = true;
-  setTimeout(() => {
-    copyBtnIcon = Copy;
-    copyTitle = "Copy";
-    copyTooltipOpen = false;
-  }, 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()}
-    {#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}
-
-{#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 === "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()}
-
-            {#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}
-
-<style>
-    /**
-     * 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;
-    }
-    input[type="range"] {
-        display: block;
-    }
-    /**
-     * Checkbox and radio
-     */
-    input[type="checkbox"] {
-        border-radius: 6px;
-    }
-    .Range {
-        display: flex;
-        gap: 0.5em;
-        align-items: center;
-    }
-    .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>