@groundbrick/svelte-ui 0.1.1

package/dist/components/PhotoUpload.svelte

@@ -0,0 +1,529 @@
+<script lang="ts">
+    // Headless photo uploader: owns the UI (preview, dropzone/tiles, drag & drop,
+    // file selection and basic validation) but delegates all I/O to callbacks so
+    // it stays app-agnostic. The consuming app performs the actual upload/remove
+    // (HTTP, storage) and optional image compression.
+
+    interface PhotoUploadProps {
+        /** Folder/bucket hint passed back to the upload callback. */
+        folder?: string;
+        /** Current photo URL to preview (alias: currentPhoto). */
+        currentPhotoUrl?: string | null;
+        /** Current photo URL to preview (alias of currentPhotoUrl). */
+        currentPhoto?: string | null;
+        /** Max accepted size in MB (validated after optional compression). */
+        maxSizeMB?: number;
+        /** Accepted MIME types. */
+        acceptedTypes?: string[];
+        /** Disable the whole control. */
+        disabled?: boolean;
+        /** Wrap the content in a Bootstrap card with a header. */
+        uiCardWrapped?: boolean;
+        /** Upload-in-progress flag (bindable). */
+        uploading?: boolean;
+        /** Longest edge passed to the compress callback. */
+        maxDimension?: number;
+        /** Mobile camera capture mode; false disables the camera tile. */
+        capture?: "environment" | "user" | false;
+        /** Presentation: wide dropzone or square tiles. */
+        layout?: "dropzone" | "tiles";
+
+        /** Perform the actual upload and return the resulting URL (or null). */
+        onUpload?: (file: File, opts: { folder: string }) => Promise<string | null>;
+        /** Perform the actual removal of the current photo. */
+        onRemove?: () => Promise<void>;
+        /** Optional image compression hook applied before preview/upload. */
+        compress?: (file: File, opts: { maxSizeMB: number; maxDimension: number }) => Promise<File>;
+        /** Called with a validation/processing/upload error message. */
+        onError?: (message: string) => void;
+        /** Called when a (valid, processed) file is selected. */
+        onFileSelected?: (file: File) => void;
+        /** Called after a successful upload with the resulting URL. */
+        onUploaded?: (url: string | null) => void;
+        /** Called after the current photo is removed. */
+        onRemoved?: () => void;
+    }
+
+    let {
+        folder = "pets",
+        currentPhotoUrl = null,
+        currentPhoto = null,
+        maxSizeMB = 5,
+        acceptedTypes = ["image/jpeg", "image/jpg", "image/png"],
+        disabled = false,
+        uiCardWrapped = true,
+        uploading = $bindable(false),
+        maxDimension = 1200,
+        capture = false,
+        layout = "dropzone",
+        onUpload,
+        onRemove,
+        compress,
+        onError,
+        onFileSelected,
+        onUploaded,
+        onRemoved
+    }: PhotoUploadProps = $props();
+
+    // Support both currentPhoto and currentPhotoUrl for backward compatibility
+    const effectiveCurrentPhotoUrl = $derived(currentPhoto || currentPhotoUrl);
+
+    let selectedFile = $state<File | null>(null);
+    let previewUrl = $state<string | null>(null);
+    let hasChanges = $state(false);
+    let processing = $state(false);
+    let dragOver = $state(false);
+    let galleryInput: HTMLInputElement | null = null;
+    let cameraInput: HTMLInputElement | null = null;
+
+    const dropzoneDisabled = $derived(disabled || uploading || processing);
+
+    $effect(() => {
+        if (!hasChanges) {
+            previewUrl = effectiveCurrentPhotoUrl;
+        }
+    });
+
+    function reportError(message: string) {
+        onError?.(message);
+    }
+
+    async function onFileSelect(event: Event) {
+        const input = event.target as HTMLInputElement;
+        const file = input?.files?.[0];
+
+        if (!file) {
+            clearSelection();
+            return;
+        }
+
+        await processFile(file);
+    }
+
+    function openGallery() {
+        if (dropzoneDisabled) return;
+        galleryInput?.click();
+    }
+
+    function openCamera() {
+        if (dropzoneDisabled) return;
+        cameraInput?.click();
+    }
+
+    function onDropzoneKeydown(event: KeyboardEvent) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            openGallery();
+        }
+    }
+
+    function onDragOver(event: DragEvent) {
+        event.preventDefault();
+        if (dropzoneDisabled) return;
+        dragOver = true;
+    }
+
+    function onDragLeave(event: DragEvent) {
+        event.preventDefault();
+        dragOver = false;
+    }
+
+    async function onDrop(event: DragEvent) {
+        event.preventDefault();
+        dragOver = false;
+        if (dropzoneDisabled) return;
+        const file = event.dataTransfer?.files?.[0];
+        if (file) {
+            await processFile(file);
+        }
+    }
+
+    function exceedsMaxSize(file: File, limitMB: number): boolean {
+        return file.size > limitMB * 1024 * 1024;
+    }
+
+    async function processFile(file: File) {
+        if (!acceptedTypes.includes(file.type)) {
+            reportError(`Tipo de ficheiro inválido. Use: ${acceptedTypes.join(", ")}`);
+            clearSelection();
+            return;
+        }
+
+        try {
+            processing = true;
+            let processedFile = file;
+
+            // Compress image if a compressor was provided
+            if (compress) {
+                processedFile = await compress(file, { maxSizeMB, maxDimension });
+            }
+
+            // Validate size after (optional) compression
+            if (exceedsMaxSize(processedFile, maxSizeMB)) {
+                reportError(`Imagem demasiado grande. Selecione uma foto menor.`);
+                clearSelection();
+                return;
+            }
+
+            selectedFile = processedFile;
+            hasChanges = true;
+
+            const reader = new FileReader();
+            reader.onload = () => {
+                previewUrl = reader.result as string;
+            };
+            reader.readAsDataURL(processedFile);
+
+            onFileSelected?.(processedFile);
+        } catch (error: any) {
+            reportError(error?.message || "Erro ao processar imagem");
+            clearSelection();
+        } finally {
+            processing = false;
+        }
+    }
+
+    async function confirmUpload() {
+        if (!selectedFile) {
+            reportError("Nenhum ficheiro selecionado.");
+            return;
+        }
+        if (!onUpload) return;
+
+        uploading = true;
+        try {
+            const url = await onUpload(selectedFile, { folder });
+            hasChanges = false;
+            if (url) {
+                previewUrl = url;
+            }
+            onUploaded?.(url ?? null);
+        } catch (error: any) {
+            reportError(error?.message || "Erro ao enviar imagem");
+        } finally {
+            uploading = false;
+        }
+    }
+
+    async function removePhoto() {
+        uploading = true;
+        try {
+            if (onRemove) {
+                await onRemove();
+            }
+            clearSelection();
+            previewUrl = null;
+            onRemoved?.();
+        } catch (error: any) {
+            reportError(error?.message || "Erro ao remover imagem");
+        } finally {
+            uploading = false;
+        }
+    }
+
+    function clearSelection() {
+        selectedFile = null;
+        hasChanges = false;
+        previewUrl = effectiveCurrentPhotoUrl;
+
+        if (galleryInput) {
+            galleryInput.value = "";
+        }
+        if (cameraInput) {
+            cameraInput.value = "";
+        }
+    }
+</script>
+
+{#snippet photoUploaderContent() }
+        <div class="photo-upload-content">
+            <!-- Photo Preview -->
+            {#if previewUrl}
+                <div class="mb-3 text-center">
+                    <img
+                        src={previewUrl}
+                        alt="Preview"
+                        class="img-thumbnail"
+                        style="max-height: 250px;"
+                    />
+                    {#if hasChanges}
+                        <div class="mt-2">
+                            <small class="text-muted">Nova foto selecionada - confirme para enviar</small>
+                        </div>
+                    {/if}
+                </div>
+            {/if}
+
+            <!-- Photo source tiles (camera + gallery) -->
+            <div class="mb-3">
+                <input
+                    id="photo-file-input"
+                    type="file"
+                    class="visually-hidden"
+                    accept={acceptedTypes.join(",")}
+                    onchange={onFileSelect}
+                    disabled={dropzoneDisabled}
+                    bind:this={galleryInput}
+                />
+                {#if capture}
+                    <input
+                        type="file"
+                        class="visually-hidden"
+                        accept={acceptedTypes.join(",")}
+                        capture={capture}
+                        onchange={onFileSelect}
+                        disabled={dropzoneDisabled}
+                        bind:this={cameraInput}
+                    />
+                {/if}
+
+                {#if layout === "dropzone"}
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
+                    <div
+                        class="photo-dropzone"
+                        class:dragover={dragOver}
+                        class:disabled={dropzoneDisabled}
+                        role="button"
+                        tabindex={dropzoneDisabled ? -1 : 0}
+                        aria-label="Selecionar ou arrastar uma foto"
+                        onclick={openGallery}
+                        onkeydown={onDropzoneKeydown}
+                        ondragover={onDragOver}
+                        ondragleave={onDragLeave}
+                        ondrop={onDrop}
+                    >
+                        <i class="bi bi-cloud-arrow-up dz-icon" aria-hidden="true"></i>
+                        <div class="dz-text">
+                            {#if processing}
+                                A processar...
+                            {:else}
+                                <strong>Arraste uma foto para aqui</strong>
+                                <span>ou carregue para escolher</span>
+                            {/if}
+                        </div>
+                        <small class="dz-hint">
+                            {acceptedTypes.map((t:any) => t.split("/")[1].toUpperCase()).join("/")} · máx {maxSizeMB}MB
+                        </small>
+                    </div>
+                {:else}
+                <div class="photo-tiles">
+                    {#if capture}
+                        <!-- Camera tile: shown only on touch devices (see CSS) -->
+                        <button
+                            type="button"
+                            class="photo-tile photo-tile--camera"
+                            disabled={dropzoneDisabled}
+                            onclick={openCamera}
+                        >
+                            <i class="bi bi-camera dz-icon" aria-hidden="true"></i>
+                            <span class="tile-label">Tirar foto</span>
+                        </button>
+                    {/if}
+
+                    <!-- Gallery / import tile (also the drag & drop target) -->
+                    <!-- svelte-ignore a11y_no_static_element_interactions -->
+                    <div
+                        class="photo-tile"
+                        class:dragover={dragOver}
+                        class:disabled={dropzoneDisabled}
+                        role="button"
+                        tabindex={dropzoneDisabled ? -1 : 0}
+                        aria-label={capture ? "Importar foto da galeria" : "Adicionar foto"}
+                        onclick={openGallery}
+                        onkeydown={onDropzoneKeydown}
+                        ondragover={onDragOver}
+                        ondragleave={onDragLeave}
+                        ondrop={onDrop}
+                    >
+                        {#if processing}
+                            <span class="spinner-border spinner-border-sm dz-icon" aria-hidden="true"></span>
+                            <span class="tile-label">A processar...</span>
+                        {:else}
+                            <i class="bi bi-plus-lg dz-icon" aria-hidden="true"></i>
+                            <span class="tile-label">{capture ? "Importar" : "Adicionar foto"}</span>
+                        {/if}
+                    </div>
+                </div>
+
+                <small class="dz-hint d-block mt-2">
+                    {acceptedTypes.map((t:any) => t.split("/")[1].toUpperCase()).join("/")} · máx {maxSizeMB}MB
+                </small>
+                {/if}
+            </div>
+
+            <!-- Action Buttons -->
+            <div class="d-flex gap-2 flex-wrap">
+                {#if hasChanges && selectedFile}
+                    <button
+                        type="button"
+                        class="btn btn-success"
+                        onclick={confirmUpload}
+                        disabled={uploading || disabled}
+                    >
+                        {uploading ? "A enviar..." : "Confirmar Upload"}
+                    </button>
+
+                    <button
+                        type="button"
+                        class="btn btn-outline-secondary"
+                        onclick={clearSelection}
+                        disabled={uploading || disabled}
+                    >
+                        Voltar
+                    </button>
+                {/if}
+
+                {#if previewUrl && !hasChanges}
+                    <button
+                        type="button"
+                        class="btn btn-outline-danger"
+                        onclick={removePhoto}
+                        disabled={uploading || disabled}
+                    >
+                        {uploading ? "A remover..." : "Remover Foto"}
+                    </button>
+                {/if}
+            </div>
+        </div>
+{/snippet}
+
+{#if uiCardWrapped}
+    <div class="card">
+        <div class="card-header">
+            <h6 class="mb-0">
+                <i class="bi bi-camera-fill" aria-hidden="true"></i> Foto
+            </h6>
+        </div>
+        <div class="card-body">
+            {@render photoUploaderContent() }
+        </div>
+    </div>
+{:else}
+    {@render photoUploaderContent() }
+{/if}
+
+<style>
+    .photo-dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.35rem;
+        width: 100%;
+        padding: 1.5rem 1rem;
+        border: 2px dashed var(--border-color, #cfcfe1);
+        border-radius: 12px;
+        background: var(--bs-tertiary-bg, #fafafa);
+        color: #555;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
+    }
+
+    .photo-dropzone:hover:not(.disabled),
+    .photo-dropzone:focus-visible {
+        border-color: #7b3ff2;
+        background: #f6f1ff;
+        outline: none;
+    }
+
+    .photo-dropzone.dragover {
+        border-color: #7b3ff2;
+        background: #efe6ff;
+        transform: scale(1.01);
+    }
+
+    .photo-dropzone.disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    .dz-text {
+        display: flex;
+        flex-direction: column;
+        line-height: 1.25;
+    }
+
+    .dz-text strong {
+        font-weight: 600;
+        color: #333;
+    }
+
+    .dz-text span {
+        font-size: 0.85rem;
+        color: #777;
+    }
+
+    .photo-tiles {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+    }
+
+    .photo-tile {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 0.4rem;
+        width: 120px;
+        aspect-ratio: 1 / 1;
+        padding: 0.75rem;
+        margin: 0;
+        font: inherit;
+        border: 2px dashed var(--border-color, #cfcfe1);
+        border-radius: 14px;
+        background: var(--bs-tertiary-bg, #fafafa);
+        color: #555;
+        text-align: center;
+        cursor: pointer;
+        transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.05s ease;
+    }
+
+    .photo-tile:hover:not(.disabled):not(:disabled),
+    .photo-tile:focus-visible {
+        border-color: #7b3ff2;
+        background: #f6f1ff;
+        outline: none;
+    }
+
+    .photo-tile.dragover {
+        border-color: #7b3ff2;
+        background: #efe6ff;
+        transform: scale(1.02);
+    }
+
+    .photo-tile.disabled,
+    .photo-tile:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    /* Camera tile only makes sense on touch devices; capture is ignored on desktop. */
+    .photo-tile--camera {
+        display: none;
+    }
+
+    @media (pointer: coarse) {
+        .photo-tile--camera {
+            display: flex;
+        }
+    }
+
+    .dz-icon {
+        font-size: 2rem;
+        color: #7b3ff2;
+        line-height: 1;
+    }
+
+    .tile-label {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: #444;
+    }
+
+    .dz-hint {
+        color: #999;
+        font-size: 0.75rem;
+    }
+</style>

package/dist/components/PhotoUpload.svelte.d.ts

@@ -0,0 +1,46 @@
+interface PhotoUploadProps {
+    /** Folder/bucket hint passed back to the upload callback. */
+    folder?: string;
+    /** Current photo URL to preview (alias: currentPhoto). */
+    currentPhotoUrl?: string | null;
+    /** Current photo URL to preview (alias of currentPhotoUrl). */
+    currentPhoto?: string | null;
+    /** Max accepted size in MB (validated after optional compression). */
+    maxSizeMB?: number;
+    /** Accepted MIME types. */
+    acceptedTypes?: string[];
+    /** Disable the whole control. */
+    disabled?: boolean;
+    /** Wrap the content in a Bootstrap card with a header. */
+    uiCardWrapped?: boolean;
+    /** Upload-in-progress flag (bindable). */
+    uploading?: boolean;
+    /** Longest edge passed to the compress callback. */
+    maxDimension?: number;
+    /** Mobile camera capture mode; false disables the camera tile. */
+    capture?: "environment" | "user" | false;
+    /** Presentation: wide dropzone or square tiles. */
+    layout?: "dropzone" | "tiles";
+    /** Perform the actual upload and return the resulting URL (or null). */
+    onUpload?: (file: File, opts: {
+        folder: string;
+    }) => Promise<string | null>;
+    /** Perform the actual removal of the current photo. */
+    onRemove?: () => Promise<void>;
+    /** Optional image compression hook applied before preview/upload. */
+    compress?: (file: File, opts: {
+        maxSizeMB: number;
+        maxDimension: number;
+    }) => Promise<File>;
+    /** Called with a validation/processing/upload error message. */
+    onError?: (message: string) => void;
+    /** Called when a (valid, processed) file is selected. */
+    onFileSelected?: (file: File) => void;
+    /** Called after a successful upload with the resulting URL. */
+    onUploaded?: (url: string | null) => void;
+    /** Called after the current photo is removed. */
+    onRemoved?: () => void;
+}
+declare const PhotoUpload: import("svelte").Component<PhotoUploadProps, {}, "uploading">;
+type PhotoUpload = ReturnType<typeof PhotoUpload>;
+export default PhotoUpload;