@makolabs/ripple 1.14.0 → 2.1.0

package/dist/elements/file-upload/MultiFileUpload.svelte

@@ -1,274 +0,0 @@
-<script lang="ts">
-	import { cn } from '../../helper/cls.js';
-	import { buildTestId } from '../../helper/testid.js';
-	import FileUpload from './FileUpload.svelte';
-	import Button from '../../button/Button.svelte';
-	import Spinner from '../spinner/Spinner.svelte';
-	import { Size, Color } from '../../variants.js';
-	import type { MultiFileUploadProps, StagedFile } from '../../index.js';
-
-	let {
-		files = $bindable<StagedFile[]>([]),
-		allowedMimeTypes = [],
-		maxFiles = 10,
-		maxSize,
-		size = 'md',
-		id = 'multi-file-upload',
-		class: className = '',
-		dropzoneClass = '',
-		onfiles,
-		clearAfterUpload = true,
-		uploadButtonLabel = 'Upload All',
-		clearButtonLabel = 'Clear All',
-		filesListLabel = 'Selected files',
-		listMaxHeight = 'max-h-64',
-		header,
-		testId
-	}: MultiFileUploadProps = $props();
-
-	function makeId(): string {
-		if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
-			return crypto.randomUUID();
-		}
-		return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
-	}
-
-	function handleAdd(newFiles: FileList | File[]) {
-		const arr = Array.from(newFiles);
-		const room = Math.max(0, maxFiles - files.length);
-		const accepted = arr.slice(0, room);
-		const toAdd: StagedFile[] = accepted.map((file) => ({
-			id: makeId(),
-			file,
-			status: 'ready' as const
-		}));
-		files = [...files, ...toAdd];
-	}
-
-	function handleRemove(fileId: string) {
-		files = files.filter((f) => f.id !== fileId);
-	}
-
-	function handleClearAll() {
-		files = [];
-	}
-
-	const readyCount = $derived(files.filter((f) => !f.status || f.status === 'ready').length);
-	const hasAnyFile = $derived(files.length > 0);
-	const anyUploading = $derived(files.some((f) => f.status === 'uploading'));
-	const canUpload = $derived(readyCount > 0 && !anyUploading && !!onfiles);
-
-	function handleUploadAll() {
-		if (!onfiles) return;
-		const rawFiles = files.filter((f) => !f.status || f.status === 'ready').map((f) => f.file);
-		if (rawFiles.length === 0) return;
-		onfiles(rawFiles);
-		if (clearAfterUpload) {
-			files = [];
-		}
-	}
-
-	function handleRetry(fileId: string) {
-		const target = files.find((f) => f.id === fileId);
-		if (!target || !onfiles) return;
-		// Reset the row to 'ready' so the caller's upload handler picks it up.
-		files = files.map((f) =>
-			f.id === fileId
-				? { ...f, status: 'ready' as const, error: undefined, progress: undefined }
-				: f
-		);
-		onfiles([target.file]);
-	}
-
-	function formatFileSize(bytes: number): string {
-		if (bytes === 0) return '0 B';
-		const k = 1024;
-		const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))}${sizes[i]}`;
-	}
-
-	// Internal FileUpload should only accept files up to the remaining room.
-	// This caps input but the dropzone still renders.
-	const remainingFiles = $derived(Math.max(0, maxFiles - files.length));
-</script>
-
-<div
-	class={cn('flex flex-col gap-4', className)}
-	data-testid={buildTestId('multi-file-upload', undefined, testId)}
->
-	{#if header}
-		{@render header()}
-	{/if}
-
-	<FileUpload
-		{allowedMimeTypes}
-		maxFiles={remainingFiles}
-		{maxSize}
-		{size}
-		{dropzoneClass}
-		{id}
-		onfiles={handleAdd}
-	/>
-
-	{#if hasAnyFile}
-		<div class="flex flex-col gap-2">
-			<div class="flex items-center justify-between">
-				<span class="text-default-700 text-sm font-medium">
-					{filesListLabel} ({files.length})
-				</span>
-				<div class="flex gap-2">
-					<Button
-						size={Size.XS}
-						variant="outline"
-						color={Color.DEFAULT}
-						onclick={handleClearAll}
-						disabled={anyUploading}
-					>
-						{clearButtonLabel}
-					</Button>
-					<Button
-						size={Size.XS}
-						color={Color.PRIMARY}
-						onclick={handleUploadAll}
-						disabled={!canUpload}
-					>
-						{uploadButtonLabel}{readyCount > 0 ? ` (${readyCount})` : ''}
-					</Button>
-				</div>
-			</div>
-
-			<ul
-				class={cn(
-					'border-default-200 divide-default-100 divide-y overflow-y-auto rounded-lg border',
-					listMaxHeight
-				)}
-			>
-				{#each files as stagedFile (stagedFile.id)}
-					{@const status = stagedFile.status ?? 'ready'}
-					<li
-						class={cn('flex items-center gap-3 px-3 py-2', status === 'success' && 'opacity-60')}
-						data-multi-file-row=""
-						data-status={status}
-					>
-						<!-- Status icon -->
-						{#if status === 'ready'}
-							<span
-								class="bg-default-100 text-default-500 flex size-7 shrink-0 items-center justify-center rounded-full"
-								aria-hidden="true"
-							>
-								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-									/>
-								</svg>
-							</span>
-						{:else if status === 'uploading'}
-							<div class="flex size-7 shrink-0 items-center justify-center">
-								<Spinner size={Size.SM} color={Color.PRIMARY} />
-							</div>
-						{:else if status === 'success'}
-							<span
-								class="bg-success-100 text-success-600 flex size-7 shrink-0 items-center justify-center rounded-full"
-								aria-hidden="true"
-							>
-								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="3"
-										d="M5 13l4 4L19 7"
-									/>
-								</svg>
-							</span>
-						{:else if status === 'error'}
-							<span
-								class="bg-danger-100 text-danger-600 flex size-7 shrink-0 items-center justify-center rounded-full"
-								aria-hidden="true"
-							>
-								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="3"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
-							</span>
-						{/if}
-
-						<!-- File info -->
-						<div class="flex min-w-0 flex-1 flex-col gap-0.5">
-							<span class="text-default-900 truncate text-sm font-medium">
-								{stagedFile.file.name}
-							</span>
-							<span class="text-default-500 text-xs">
-								{formatFileSize(stagedFile.file.size)}
-								{#if stagedFile.error}
-									<span class="text-danger-600"> · {stagedFile.error}</span>
-								{/if}
-							</span>
-							{#if status === 'uploading' && stagedFile.progress !== undefined}
-								<div class="bg-default-100 mt-1 h-1 w-full overflow-hidden rounded-full">
-									<div
-										data-multi-file-progress=""
-										class="bg-primary-500 h-full transition-all duration-200"
-										style="width: {Math.max(0, Math.min(100, stagedFile.progress))}%"
-									></div>
-								</div>
-							{/if}
-						</div>
-
-						<!-- Retry button — only for error rows (re-runs upload for this one file) -->
-						{#if status === 'error'}
-							<button
-								type="button"
-								onclick={() => handleRetry(stagedFile.id)}
-								class="text-default-500 hover:bg-primary-50 hover:text-primary-600 shrink-0 cursor-pointer rounded p-1 transition-colors"
-								aria-label="Retry upload for {stagedFile.file.name}"
-								title="Retry"
-							>
-								<svg
-									class="size-4"
-									fill="none"
-									viewBox="0 0 24 24"
-									stroke="currentColor"
-									stroke-width="2"
-									stroke-linecap="round"
-									stroke-linejoin="round"
-								>
-									<polyline points="23 4 23 10 17 10" />
-									<polyline points="1 20 1 14 7 14" />
-									<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-								</svg>
-							</button>
-						{/if}
-
-						<!-- Remove button — hidden for in-flight or successful rows -->
-						{#if status !== 'uploading' && status !== 'success'}
-							<button
-								type="button"
-								onclick={() => handleRemove(stagedFile.id)}
-								class="text-default-400 hover:bg-default-100 hover:text-danger-500 shrink-0 cursor-pointer rounded p-1 transition-colors"
-								aria-label="Remove {stagedFile.file.name}"
-								title="Remove"
-							>
-								<svg class="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M6 18L18 6M6 6l12 12"
-									/>
-								</svg>
-							</button>
-						{/if}
-					</li>
-				{/each}
-			</ul>
-		</div>
-	{/if}
-</div>

package/dist/elements/file-upload/MultiFileUpload.svelte.d.ts

@@ -1,4 +0,0 @@
-import type { MultiFileUploadProps } from '../../index.js';
-declare const MultiFileUpload: import("svelte").Component<MultiFileUploadProps, {}, "files">;
-type MultiFileUpload = ReturnType<typeof MultiFileUpload>;
-export default MultiFileUpload;