zabi-components 8.1.0 → 9.0.0

package/dist/molecules/ImageUpload.svelte

@@ -7,6 +7,7 @@
     import { cn } from "../util/cn.js";
     import { isVideoPath, isVideoUrl } from "../util/media.js";
     import { generateId } from "../util/ssr-safe.js";
+    import type { ButtonSize, ButtonVariant } from "../types/variants.js";
 
     export type ImageUploadFileDetail = {
         /** Selected file, or `null` when the image is removed. */
@@ -19,6 +20,14 @@
 
     export type ImageUploadActionsPlacement = "overlay" | "strip";
 
+    export type ImageUploadVariant = "dropzone" | "button";
+
+    /**
+     * Why a file was turned away: `accept` does not allow it, it is over
+     * `maxSize`, or (only with `multiple` and `maxFiles`) it is one too many.
+     */
+    export type ImageUploadRejectReason = "type" | "size" | "count";
+
     export type ImageUploadPreviewDetail = {
         /** The current `value`. */
         url: string;
@@ -30,9 +39,35 @@
     type Props = Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "onclick" | "id"> & {
         /** Extra classes for the host element. */
         class?: string;
+        /**
+         * `dropzone` (default): the drop area, and the preview with Change and
+         * Remove once there is a value. `button`: only a button that opens the
+         * file chooser, for a row of choices; no drop area, no preview and no
+         * Remove. The picked file comes through `onfileselect` and `bind:value`,
+         * and the app shows it where it wants.
+         */
+        variant?: ImageUploadVariant;
+        /** `variant="button"`: the trigger's `Button` variant. */
+        buttonVariant?: ButtonVariant;
+        /** `variant="button"`: the trigger's `Button` size. */
+        buttonSize?: ButtonSize;
+        /** The largest file taken, in bytes. A larger one goes to `onfilereject` with `"size"`. */
+        maxSize?: number;
+        /**
+         * The chooser and a drop take several files, handed over together
+         * through `onfiles`, in the order they were chosen. The component
+         * then keeps none of them: no preview, `value` is not set and
+         * `onfileselect` is not called. The page shows them where it wants
+         * (a `PhotoGrid`, say).
+         */
+        multiple?: boolean;
+        /** With `multiple`: the most files taken in one go. The rest go to `onfilereject` with `"count"`. */
+        maxFiles?: number;
+        /** `variant="button"`: the trigger's content, in place of `label`. */
+        children?: Snippet;
         /** Id of the control the label points at; generated when omitted. */
         id?: string;
-        /** Visible label, associated with the dropzone. */
+        /** Visible label, associated with the dropzone. With `variant="button"` it is the button's text. */
         label?: string;
         /** Preview URL; `bind:value` to read it. */
         value?: string | null;
@@ -75,12 +110,20 @@
         onbrowse?: (event: Event) => void;
         /** Selected file and preview URL; `{ file: null, url: null }` on remove. */
         onfileselect?: (detail: ImageUploadFileDetail) => void;
-        /** A dropped file that `accept` does not allow. */
-        onfilereject?: (file: File) => void;
+        /** A dropped file that `accept` does not allow, or a dropped or chosen file over `maxSize`. */
+        onfilereject?: (file: File, reason: ImageUploadRejectReason) => void;
+        /** With `multiple`: every file that was taken, in order. Not called with none. */
+        onfiles?: (files: File[]) => void;
     };
 
     let {
         class: className = "",
+        variant = "dropzone",
+        buttonVariant = "secondary",
+        buttonSize = "md",
+        maxSize,
+        multiple = false,
+        maxFiles,
         id: idProp,
         label = "",
         value = $bindable<Exclude<Props["value"], undefined>>(),
@@ -106,7 +149,8 @@
         onbrowse,
         onfileselect,
         onfilereject,
-        children: _children,
+        onfiles,
+        children,
         ...restProps
     }: Props = $props();
 
@@ -244,13 +288,45 @@
         const input = event.target as HTMLInputElement;
         if (!input.files || input.files.length === 0) return;
 
+        if (multiple) {
+            const files = Array.from(input.files);
+            onchange?.(event);
+            // Nothing here holds the files: cleared so the same ones can be chosen again.
+            input.value = "";
+            takeFiles(files, false);
+            return;
+        }
+
         const file = input.files[0];
+        if (tooLarge(file)) {
+            // Cleared so the same file can be chosen again after the app has said why.
+            input.value = "";
+            onfilereject?.(file, "size");
+            return;
+        }
         const url = selectFile(file);
 
         onchange?.(event);
         onfileselect?.({ file, url });
     }
 
+    /**
+     * `multiple`: the files that pass go to `onfiles` together; each of the
+     * others goes to `onfilereject` with why. A drop is checked against
+     * `accept` here, as the chooser has already done for its own.
+     */
+    function takeFiles(files: File[], checkType: boolean) {
+        const limit = maxFiles !== undefined && maxFiles >= 0 ? Math.floor(maxFiles) : Infinity;
+        const taken: File[] = [];
+        for (const file of files) {
+            if (checkType && !matchesAccept(file)) onfilereject?.(file, "type");
+            else if (tooLarge(file)) onfilereject?.(file, "size");
+            else if (taken.length >= limit) onfilereject?.(file, "count");
+            else taken.push(file);
+        }
+        if (taken.length > 0) onfiles?.(taken);
+    }
+
     function removeImage() {
         if (disabled) return;
 
@@ -273,6 +349,10 @@
         fileInput?.click();
     }
 
+    function tooLarge(file: File) {
+        return maxSize !== undefined && file.size > maxSize;
+    }
+
     /** Same rules the browser applies to the `accept` attribute. */
     function matchesAccept(file: File) {
         const tokens = accept
@@ -319,10 +399,19 @@
         event.preventDefault();
         if (disabled) return;
 
+        if (multiple) {
+            takeFiles(Array.from(event.dataTransfer?.files ?? []), true);
+            return;
+        }
+
         const file = event.dataTransfer?.files?.[0];
         if (!file) return;
         if (!matchesAccept(file)) {
-            onfilereject?.(file);
+            onfilereject?.(file, "type");
+            return;
+        }
+        if (tooLarge(file)) {
+            onfilereject?.(file, "size");
             return;
         }
 
@@ -337,137 +426,158 @@
     });
 </script>
 
-<div bind:this={host} class={cn("space-y-3", className)} {...restProps}>
-    {#if label}
-        <label
-            id={labelId}
-            for={controlId}
-            class={cn("block text-sm font-medium text-label", disabled && "opacity-60")}
+<div
+    bind:this={host}
+    class={cn(variant === "button" ? "inline-block space-y-2" : "space-y-3", className)}
+    data-variant={variant}
+    {...restProps}
+>
+    {#if variant === "button"}
+        <!-- Only the trigger: one choice in a row of others. The value is kept
+             and announced as in the dropzone, but nothing is drawn for it. -->
+        <Button
+            id={controlId}
+            variant={buttonVariant}
+            size={buttonSize}
+            onclick={triggerFileSelect}
+            aria-describedby={errorMessage ? errorId : undefined}
+            {disabled}
         >
-            {label}
-        </label>
-    {/if}
-
-    <!-- Wraps both states so a drop is handled the same over either. -->
-    <div
-        role="presentation"
-        class={disabled ? "cursor-not-allowed" : undefined}
-        ondragenter={handleDragEnter}
-        ondragover={handleDragOver}
-        ondragleave={handleDragLeave}
-        ondrop={handleDrop}
-        data-drag-over={isDragOver ? "" : undefined}
-    >
-        {#if value}
-            <div
-                class="relative group"
-                role={label ? "group" : undefined}
-                aria-labelledby={label ? labelId : undefined}
+            {#if children}{@render children()}{:else}{label || browseText}{/if}
+        </Button>
+    {:else}
+        {#if label}
+            <label
+                id={labelId}
+                for={controlId}
+                class={cn("block text-sm font-medium text-label", disabled && "opacity-60")}
             >
-                {#if preview}
-                    {@render preview({ url: value, type: resolvedPreviewType, alt })}
-                {:else if resolvedPreviewType === "video"}
-                    <!-- Never autoplays, so there is no motion to reduce; muted
-                         until the viewer unmutes it from the native controls. -->
-                    <video
-                        src={value}
-                        controls
-                        muted
-                        playsinline
-                        preload="metadata"
-                        aria-label={alt || undefined}
-                        class="w-full h-32 object-cover rounded-container border-0"
-                    ></video>
-                {:else}
-                    <img
-                        src={value}
-                        {alt}
-                        class="w-full h-32 object-cover rounded-container border-0"
-                    />
-                {/if}
-                <!-- Hover cannot reveal the actions on a touch screen, so there
-                     they stay visible as a strip that leaves the preview in
-                     view. The layer itself never takes the pointer: only the
-                     plate under the buttons does, so a video beneath stays
-                     operable. The plate is opaque so the labels keep their
-                     contrast whatever the image behind them. -->
+                {label}
+            </label>
+        {/if}
+
+        <!-- Wraps both states so a drop is handled the same over either. -->
+        <div
+            role="presentation"
+            class={disabled ? "cursor-not-allowed" : undefined}
+            ondragenter={handleDragEnter}
+            ondragover={handleDragOver}
+            ondragleave={handleDragLeave}
+            ondrop={handleDrop}
+            data-drag-over={isDragOver ? "" : undefined}
+        >
+            {#if value}
                 <div
-                    class={cn(
-                        "absolute inset-0 p-1 border border-border-overlay bg-surface-overlay/60 backdrop-blur-md opacity-0 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 transition-opacity motion-reduce:transition-none rounded-container flex items-center justify-center pointer-events-none",
-                        "pointer-coarse:opacity-100 [@media(hover:none)]:opacity-100",
-                        actionsInStrip
-                            ? "bottom-auto"
-                            : "pointer-coarse:bottom-auto [@media(hover:none)]:bottom-auto",
-                        isDragOver && "opacity-100 border-action-primary",
-                    )}
-                    data-testid="image-upload-actions"
+                    class="relative group"
+                    role={label ? "group" : undefined}
+                    aria-labelledby={label ? labelId : undefined}
                 >
+                    {#if preview}
+                        {@render preview({ url: value, type: resolvedPreviewType, alt })}
+                    {:else if resolvedPreviewType === "video"}
+                        <!-- Never autoplays, so there is no motion to reduce; muted
+                             until the viewer unmutes it from the native controls. -->
+                        <video
+                            src={value}
+                            controls
+                            muted
+                            playsinline
+                            preload="metadata"
+                            aria-label={alt || undefined}
+                            class="w-full h-32 object-cover rounded-container border-0"
+                        ></video>
+                    {:else}
+                        <img
+                            src={value}
+                            {alt}
+                            class="w-full h-32 object-cover rounded-container border-0"
+                        />
+                    {/if}
+                    <!-- Hover cannot reveal the actions on a touch screen, so there
+                         they stay visible as a strip that leaves the preview in
+                         view. The layer itself never takes the pointer: only the
+                         plate under the buttons does, so a video beneath stays
+                         operable. The plate is opaque so the labels keep their
+                         contrast whatever the image behind them. -->
                     <div
-                        class="pointer-events-auto flex min-w-0 flex-wrap justify-center gap-2 rounded-control bg-surface-overlay p-1"
+                        class={cn(
+                            "absolute inset-0 p-1 border border-border-overlay material-thin opacity-0 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 transition-opacity motion-reduce:transition-none rounded-container flex items-center justify-center pointer-events-none",
+                            "pointer-coarse:opacity-100 [@media(hover:none)]:opacity-100",
+                            actionsInStrip
+                                ? "bottom-auto"
+                                : "pointer-coarse:bottom-auto [@media(hover:none)]:bottom-auto",
+                            isDragOver && "opacity-100 border-action-primary",
+                        )}
+                        data-testid="image-upload-actions"
                     >
-                        <Button
-                            id={controlId}
-                            variant="secondary"
-                            size="sm"
-                            class="min-w-0"
-                            onclick={triggerFileSelect}
-                            aria-label={changeName}
-                            aria-describedby={errorMessage ? errorId : undefined}
-                            {disabled}
+                        <div
+                            class="pointer-events-auto flex min-w-0 flex-wrap justify-center gap-2 rounded-control bg-surface-overlay p-1"
                         >
-                            <span class="truncate">{changeText}</span>
-                        </Button>
-                        <Button
-                            variant="danger"
-                            size="sm"
-                            class="min-w-0"
-                            onclick={removeImage}
-                            aria-label={removeName}
-                            {disabled}
-                        >
-                            <span class="truncate">{removeText}</span>
-                        </Button>
+                            <Button
+                                id={controlId}
+                                variant="secondary"
+                                size="sm"
+                                class="min-w-0"
+                                onclick={triggerFileSelect}
+                                aria-label={changeName}
+                                aria-describedby={errorMessage ? errorId : undefined}
+                                {disabled}
+                            >
+                                <span class="truncate">{changeText}</span>
+                            </Button>
+                            <Button
+                                variant="danger"
+                                size="sm"
+                                class="min-w-0"
+                                onclick={removeImage}
+                                aria-label={removeName}
+                                {disabled}
+                            >
+                                <span class="truncate">{removeText}</span>
+                            </Button>
+                        </div>
                     </div>
                 </div>
-            </div>
-        {:else}
-            <button
-                type="button"
-                id={controlId}
-                class={cn(
-                    "focus-ring block w-full border-2 border-dashed border-input-border rounded-container p-6 text-center enabled:hover:border-action-primary enabled:active:bg-surface-active transition-colors",
-                    // Disabled form controls can swallow pointer events; let a
-                    // drag land on the wrapper, which cancels it.
-                    disabled ? "pointer-events-none opacity-50" : "cursor-pointer",
-                    isDragOver && "border-action-primary bg-action-primary-subtle",
-                )}
-                onclick={triggerFileSelect}
-                {disabled}
-                aria-describedby={[label ? hintId : "", errorMessage ? errorId : ""]
-                    .filter(Boolean)
-                    .join(" ") || undefined}
-            >
-                <span class="block space-y-3">
-                    <span
-                        class="w-12 h-12 mx-auto bg-action-secondary rounded-control flex items-center justify-center"
-                    >
-                        <Image size={24} class="text-description" aria-hidden="true" />
-                    </span>
-                    <span id={hintId} class="block">
-                        <span class="block font-medium text-headline">{placeholder}</span>
-                        <span class="block text-sm text-description">
-                            {browseText}
+            {:else}
+                <button
+                    type="button"
+                    id={controlId}
+                    class={cn(
+                        "focus-ring block w-full border-2 border-dashed border-input-border rounded-container p-6 text-center enabled:hover:border-action-primary enabled:active:bg-surface-active transition-colors",
+                        // Disabled form controls can swallow pointer events; let a
+                        // drag land on the wrapper, which cancels it.
+                        disabled ? "pointer-events-none opacity-50" : "cursor-pointer",
+                        isDragOver && "border-action-primary bg-action-primary-subtle",
+                    )}
+                    onclick={triggerFileSelect}
+                    {disabled}
+                    aria-describedby={[label ? hintId : "", errorMessage ? errorId : ""]
+                        .filter(Boolean)
+                        .join(" ") || undefined}
+                >
+                    <span class="block space-y-3">
+                        <span
+                            class="w-12 h-12 mx-auto bg-action-secondary rounded-control flex items-center justify-center"
+                        >
+                            <Image size={24} class="text-description" aria-hidden="true" />
+                        </span>
+                        <span id={hintId} class="block">
+                            <span class="block font-medium text-headline">{placeholder}</span>
+                            <span class="block text-sm text-description">
+                                {browseText}
+                            </span>
                         </span>
                     </span>
-                </span>
-            </button>
-        {/if}
-    </div>
+                </button>
+            {/if}
+        </div>
+    {/if}
 
     <input
         bind:this={fileInput}
         type="file"
         {accept}
+        {multiple}
         onchange={handleFileSelect}
         {disabled}
         class="hidden"

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

@@ -1,5 +1,6 @@
 import { type Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
+import type { ButtonSize, ButtonVariant } from "../types/variants.js";
 export type ImageUploadFileDetail = {
     /** Selected file, or `null` when the image is removed. */
     file: File | null;
@@ -8,6 +9,12 @@ export type ImageUploadFileDetail = {
 };
 export type ImageUploadPreviewType = "image" | "video";
 export type ImageUploadActionsPlacement = "overlay" | "strip";
+export type ImageUploadVariant = "dropzone" | "button";
+/**
+ * Why a file was turned away: `accept` does not allow it, it is over
+ * `maxSize`, or (only with `multiple` and `maxFiles`) it is one too many.
+ */
+export type ImageUploadRejectReason = "type" | "size" | "count";
 export type ImageUploadPreviewDetail = {
     /** The current `value`. */
     url: string;
@@ -18,9 +25,35 @@ export type ImageUploadPreviewDetail = {
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "onclick" | "id"> & {
     /** Extra classes for the host element. */
     class?: string;
+    /**
+     * `dropzone` (default): the drop area, and the preview with Change and
+     * Remove once there is a value. `button`: only a button that opens the
+     * file chooser, for a row of choices; no drop area, no preview and no
+     * Remove. The picked file comes through `onfileselect` and `bind:value`,
+     * and the app shows it where it wants.
+     */
+    variant?: ImageUploadVariant;
+    /** `variant="button"`: the trigger's `Button` variant. */
+    buttonVariant?: ButtonVariant;
+    /** `variant="button"`: the trigger's `Button` size. */
+    buttonSize?: ButtonSize;
+    /** The largest file taken, in bytes. A larger one goes to `onfilereject` with `"size"`. */
+    maxSize?: number;
+    /**
+     * The chooser and a drop take several files, handed over together
+     * through `onfiles`, in the order they were chosen. The component
+     * then keeps none of them: no preview, `value` is not set and
+     * `onfileselect` is not called. The page shows them where it wants
+     * (a `PhotoGrid`, say).
+     */
+    multiple?: boolean;
+    /** With `multiple`: the most files taken in one go. The rest go to `onfilereject` with `"count"`. */
+    maxFiles?: number;
+    /** `variant="button"`: the trigger's content, in place of `label`. */
+    children?: Snippet;
     /** Id of the control the label points at; generated when omitted. */
     id?: string;
-    /** Visible label, associated with the dropzone. */
+    /** Visible label, associated with the dropzone. With `variant="button"` it is the button's text. */
     label?: string;
     /** Preview URL; `bind:value` to read it. */
     value?: string | null;
@@ -63,8 +96,10 @@ type Props = Omit<HTMLAttributes<HTMLDivElement>, "onchange" | "onclick" | "id">
     onbrowse?: (event: Event) => void;
     /** Selected file and preview URL; `{ file: null, url: null }` on remove. */
     onfileselect?: (detail: ImageUploadFileDetail) => void;
-    /** A dropped file that `accept` does not allow. */
-    onfilereject?: (file: File) => void;
+    /** A dropped file that `accept` does not allow, or a dropped or chosen file over `maxSize`. */
+    onfilereject?: (file: File, reason: ImageUploadRejectReason) => void;
+    /** With `multiple`: every file that was taken, in order. Not called with none. */
+    onfiles?: (files: File[]) => void;
 };
 declare const ImageUpload: import("svelte").Component<Props, {}, "value">;
 type ImageUpload = ReturnType<typeof ImageUpload>;