@makolabs/ripple 2.3.0 → 2.4.1

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

@@ -40,6 +40,8 @@
 	const dropzoneEnabled = $derived(!disabled && !dropzoneFull);
 
 	let isDragging = $state(false);
+	let truncationMessage = $state('');
+	let truncationTimer: ReturnType<typeof setTimeout> | undefined;
 	let inputRef: HTMLInputElement;
 
 	function makeId(): string {
@@ -60,6 +62,18 @@
 		// Multi-file mode: cap and stage
 		const room = Math.max(0, maxFiles - files.length);
 		const accepted = arr.slice(0, room);
+		const dropped = arr.length - accepted.length;
+
+		if (dropped > 0) {
+			clearTimeout(truncationTimer);
+			truncationMessage = `${dropped} file${dropped > 1 ? 's' : ''} could not be added — maximum of ${maxFiles} reached.`;
+			truncationTimer = setTimeout(() => {
+				truncationMessage = '';
+			}, 5000);
+		} else {
+			truncationMessage = '';
+		}
+
 		const toAdd: StagedFile[] = accepted.map((file) => ({
 			id: makeId(),
 			file,
@@ -70,15 +84,21 @@
 
 	function handleRemove(fileId: string) {
 		files = files.filter((f) => f.id !== fileId);
+		truncationMessage = '';
 	}
 
 	function handleClearAll() {
 		files = [];
+		truncationMessage = '';
 	}
 
 	const readyCount = $derived(files.filter((f) => !f.status || f.status === 'ready').length);
+	const successCount = $derived(files.filter((f) => f.status === 'success').length);
+	const errorCount = $derived(files.filter((f) => f.status === 'error').length);
+	const uploadingCount = $derived(files.filter((f) => f.status === 'uploading').length);
+	const hasUploadActivity = $derived(successCount > 0 || errorCount > 0 || uploadingCount > 0);
 	const hasAnyFile = $derived(files.length > 0);
-	const anyUploading = $derived(files.some((f) => f.status === 'uploading'));
+	const anyUploading = $derived(uploadingCount > 0);
 	const canUpload = $derived(readyCount > 0 && !anyUploading && !!onfiles);
 
 	function handleUploadAll() {
@@ -167,6 +187,7 @@
 		ondragover={handleDragOver}
 		ondrop={handleDrop}
 		for={id}
+		data-dropzone-full={dropzoneFull ? 'true' : undefined}
 	>
 		<input
 			type="file"
@@ -190,34 +211,91 @@
 			</div>
 
 			<div class={slots.textBlock()}>
-				{#if !uploadContent}
+				{#if dropzoneFull}
+					<div class={slots.mainText()}>
+						<span class="text-default-500 font-medium">Maximum of {maxFiles} files reached.</span>
+					</div>
+					<div class={slots.hintText()}>Remove a file to add more.</div>
+				{:else if !uploadContent}
 					<div class={slots.mainText()}>
 						<span class="text-primary-500 font-medium">Click here</span>
 						<span class="text-default-600"> to upload your file or drag and drop.</span>
 					</div>
+					<div class={slots.hintText()}>
+						Supported Format: {allowedMimeTypes.length
+							? allowedMimeTypes.join(', ')
+							: 'SVG, JPG, PNG'}
+						{#if maxSize}
+							({formatFileSize(maxSize)} each)
+						{:else}
+							(10MB each)
+						{/if}
+					</div>
 				{:else}
 					{@render uploadContent()}
+					<div class={slots.hintText()}>
+						Supported Format: {allowedMimeTypes.length
+							? allowedMimeTypes.join(', ')
+							: 'SVG, JPG, PNG'}
+						{#if maxSize}
+							({formatFileSize(maxSize)} each)
+						{:else}
+							(10MB each)
+						{/if}
+					</div>
 				{/if}
-
-				<div class={slots.hintText()}>
-					Supported Format: {allowedMimeTypes.length
-						? allowedMimeTypes.join(', ')
-						: 'SVG, JPG, PNG'}
-					{#if maxSize}
-						({formatFileSize(maxSize)} each)
-					{:else}
-						(10MB each)
-					{/if}
-				</div>
 			</div>
 		</div>
 	</label>
 
+	{#if truncationMessage}
+		<div
+			class="text-warning-700 bg-warning-50 border-warning-200 flex items-center gap-2 rounded-lg border px-3 py-2 text-xs"
+			data-fileupload-truncation-warning=""
+		>
+			<svg
+				class="text-warning-500 size-4 shrink-0"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-2.694-.833-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+				/>
+			</svg>
+			{truncationMessage}
+		</div>
+	{/if}
+
 	{#if isMulti && 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
+					class={cn('text-sm font-medium', dropzoneFull ? 'text-warning-600' : 'text-default-700')}
+				>
+					{filesListLabel} ({files.length}/{maxFiles})
+					{#if dropzoneFull}
+						<span class="text-warning-500 ml-1 text-xs font-normal">— full</span>
+					{/if}
+					{#if hasUploadActivity}
+						<span class="text-default-500 ml-2 text-xs font-normal" data-fileupload-summary="">
+							—
+							{#if successCount > 0}
+								<span class="text-success-600">{successCount} uploaded</span>
+							{/if}
+							{#if errorCount > 0}
+								{#if successCount > 0},{/if}
+								<span class="text-danger-600">{errorCount} failed</span>
+							{/if}
+							{#if uploadingCount > 0}
+								{#if successCount > 0 || errorCount > 0},{/if}
+								<span class="text-primary-600">{uploadingCount} uploading</span>
+							{/if}
+						</span>
+					{/if}
 				</span>
 				<div class="flex gap-2">
 					<Button

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "2.3.0",
+	"version": "2.4.1",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {