@makolabs/ripple 0.0.1-dev.21 → 0.0.1-dev.23

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

@@ -8,11 +8,8 @@
 		maxSize,
 		class: className = '',
 		dropzoneClass = '',
-		previewClass = '',
 		id = 'file-upload',
-		onfiles = undefined,
-		ondelete = undefined,
-		files = []
+		onfiles = undefined
 	}: FileUploadProps = $props();
 
 	const disabled = $derived(maxFiles <= 0);
@@ -25,10 +22,6 @@
 		if (onfiles) onfiles(newFiles);
 	}
 
-	function handleDeleteFile(fileId: string, index: number) {
-		if (ondelete) ondelete(fileId, index);
-	}
-
 	function handleDragEnter(e: DragEvent) {
 		e.preventDefault();
 		e.stopPropagation();
@@ -130,84 +123,4 @@
 			</div>
 		</div>
 	</label>
-
-	<!-- File List -->
-	{#if files.length > 0}
-		<ul class={cn('mt-6 space-y-3', previewClass)}>
-			{#each files as file, i (i)}
-				<li
-					class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
-						'bg-danger-50 ring-danger-100': file.status === 'error',
-						'bg-success-50 ring-success-100': file.status === 'success',
-						'ring-primary-100/30 bg-white': file.status === 'uploading'
-					})}
-				>
-					<div class="flex flex-1 items-center gap-3">
-						<!-- File Icon -->
-						<div
-							class={cn('flex size-10 items-center justify-center rounded-full', {
-								'bg-danger-100 text-danger-500': file.status === 'error',
-								'bg-success-100 text-success-500': file.status === 'success',
-								'bg-primary-100 text-primary-500': file.status === 'uploading'
-							})}
-						>
-							<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
-								<path
-									fill="currentColor"
-									d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
-								/>
-							</svg>
-						</div>
-
-						<div class="flex-1">
-							<!-- Filename and Size -->
-							<div class="mb-1 flex items-center justify-between">
-								<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
-								<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
-							</div>
-
-							<!-- Status Information -->
-							{#if file.status === 'uploading'}
-								<div class="bg-default-100 h-1.5 w-full rounded-full">
-									<div
-										class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
-										style="width: {file.progress || 0}%"
-									></div>
-								</div>
-								<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
-							{:else if file.status === 'error'}
-								<div class="flex items-center justify-between">
-									<span class="text-danger-500 text-sm">Upload failed!</span>
-									<span class="text-danger-600 cursor-help text-sm font-medium"
-										>Please try again!</span
-									>
-								</div>
-							{:else if file.status === 'success'}
-								<p class="text-success-500 text-sm">Upload Successful!</p>
-							{/if}
-						</div>
-					</div>
-
-					<button
-						type="button"
-						aria-label="Delete file"
-						class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
-							'bg-danger-100 text-danger-500': file.status === 'error',
-							'bg-success-100 text-success-500': file.status === 'success',
-							'bg-default-100 text-default-500': file.status === 'uploading'
-						})}
-						onclick={() => (file.FileID ? handleDeleteFile(file.FileID, i) : ondelete?.('', i))}
-						disabled={file.status === 'uploading'}
-					>
-						<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
-							<path
-								fill="currentColor"
-								d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
-							/>
-						</svg>
-					</button>
-				</li>
-			{/each}
-		</ul>
-	{/if}
 </div>

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import type { FilePreviewProps } from '../../index.js';
+
+	let { files = [], ondelete, class: className = '' }: FilePreviewProps = $props();
+
+	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]}`;
+	}
+</script>
+
+{#if files.length > 0}
+	<ul class={cn('mt-6 space-y-3', className)}>
+		{#each files as file, i (i)}
+			<li
+				class={cn('flex items-center justify-between rounded-xl p-4 ring-4', {
+					'bg-danger-50 ring-danger-100': file.status === 'error',
+					'bg-success-50 ring-success-100': file.status === 'success',
+					'ring-primary-100/30 bg-white': file.status === 'uploading'
+				})}
+			>
+				<div class="flex flex-1 items-center gap-3">
+					<!-- File Icon -->
+					<div
+						class={cn('flex size-10 items-center justify-center rounded-full', {
+							'bg-danger-100 text-danger-500': file.status === 'error',
+							'bg-success-100 text-success-500': file.status === 'success',
+							'bg-primary-100 text-primary-500': file.status === 'uploading'
+						})}
+					>
+						<svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24">
+							<path
+								fill="currentColor"
+								d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6z"
+							/>
+						</svg>
+					</div>
+
+					<div class="flex-1">
+						<!-- Filename and Size -->
+						<div class="mb-1 flex items-center justify-between">
+							<span class="text-default-700 font-medium">{file.OriginalFilename}</span>
+							<span class="text-default-500 text-sm">{formatFileSize(file.Size)}</span>
+						</div>
+
+						<!-- Status Information -->
+						{#if file.status === 'uploading'}
+							<div class="bg-default-100 h-1.5 w-full rounded-full">
+								<div
+									class="bg-primary-500 h-1.5 rounded-full transition-all duration-300"
+									style="width: {file.progress || 0}%"
+								></div>
+							</div>
+							<span class="text-default-500 mt-1 text-sm">{file.progress || 0}%</span>
+						{:else if file.status === 'error'}
+							<div class="flex items-center justify-between">
+								<span class="text-danger-500 text-sm">Upload failed!</span>
+								<span class="text-danger-600 cursor-help text-sm font-medium"
+									>Please try again!</span
+								>
+							</div>
+						{:else if file.status === 'success'}
+							<p class="text-success-500 text-sm">Upload Successful!</p>
+						{/if}
+					</div>
+				</div>
+
+				<button
+					type="button"
+					aria-label="Delete file"
+					class={cn('ml-4 flex size-6 cursor-pointer items-center justify-center rounded-lg', {
+						'bg-danger-100 text-danger-500': file.status === 'error',
+						'bg-success-100 text-success-500': file.status === 'success',
+						'bg-default-100 text-default-500': file.status === 'uploading'
+					})}
+					onclick={() => (file.FileID ? ondelete?.(file.FileID, i) : ondelete?.('', i))}
+					disabled={file.status === 'uploading'}
+				>
+					<svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24">
+						<path
+							fill="currentColor"
+							d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41z"
+						/>
+					</svg>
+				</button>
+			</li>
+		{/each}
+	</ul>
+{/if}

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

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

package/dist/index.d.ts

@@ -459,7 +459,7 @@ export interface FileUploadProps {
      */
     allowedMimeTypes?: string[];
     /**
-     * Maximum file size in bytes;
+     * Maximum file size in bytes
      */
     maxSize?: number;
     /**
@@ -475,10 +475,6 @@ export interface FileUploadProps {
      * CSS class for the dropzone
      */
     dropzoneClass?: string;
-    /**
-     * CSS class for the preview area
-     */
-    previewClass?: string;
     /**
      * ID for the file input element
      * @default 'file-upload'
@@ -488,34 +484,11 @@ export interface FileUploadProps {
      * Callback when files are selected or dropped
      */
     onfiles?: (files: FileList | File[]) => void;
-    /**
-     * Callback when a file is deleted
-     */
+}
+export interface FilePreviewProps {
+    files: UploadedFile[];
     ondelete?: (fileId: string, index: number) => void;
-    /**
-     * Current files array to display
-     */
-    files?: UploadedFile[];
-    /**
-     * API URL for file upload
-     */
-    apiUrl?: string;
-    /**
-     * Authorization token for API requests
-     */
-    apiToken?: string;
-    /**
-     * Handler for unsuccessful file uploads
-     */
-    onerror?: (error: string) => void;
-    /**
-     * Expired time in days
-     */
-    expiry?: `${string}d`;
-    /**
-     * Additional metadata to be sent with the file
-     */
-    metadata?: Record<string, string>;
+    class?: string;
 }
 export interface UploadedFile {
     FileID: string;
@@ -540,6 +513,7 @@ export interface UploadedFile {
     error?: string;
 }
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
+export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 export { default as Toaster } from './sonner/sonner.svelte';
 export interface FormProps<T extends Record<string, unknown>> {
     form: SuperForm<any>;

package/dist/index.js

@@ -48,6 +48,7 @@ export { selectTV } from './elements/dropdown/select.js';
 export { breadcrumbs } from './header/breadcrumbs.js';
 export { default as Chart } from './charts/Chart.svelte';
 export { default as FileUpload } from './elements/file-upload/FileUpload.svelte';
+export { default as FilesPreview } from './elements/file-upload/FilesPreview.svelte';
 // Toaster: Should be registered in +layout.svelte
 export { default as Toaster } from './sonner/sonner.svelte';
 // Form Component Exports

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "0.0.1-dev.21",
+	"version": "0.0.1-dev.23",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"repository": {
 		"type": "git",