@makolabs/ripple 0.0.1-dev.63 → 0.0.1-dev.65

package/dist/file-browser/FileBrowser.svelte

@@ -2,6 +2,7 @@
 	import { onMount } from 'svelte';
 	import { Button, Table, Color, Size } from '../index.js';
 	import type { TableColumn } from '../index.js';
+	import { formatDate } from '../utils/dateUtils.js';
 	import type {
 		StorageAdapter,
 		FileItem,
@@ -57,31 +58,6 @@
 		return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
 	}
 
-	// Format a date to a specific format
-	function formatDate(date: Date | string | number, formatStr = 'DD.MM.YYYY HH:mm'): string {
-		const d = new Date(date);
-		
-		if (isNaN(d.getTime())) {
-			return 'Invalid Date';
-		}
-
-		// Simple format implementation for common patterns
-		const day = d.getDate().toString().padStart(2, '0');
-		const month = (d.getMonth() + 1).toString().padStart(2, '0');
-		const year = d.getFullYear();
-		const hours = d.getHours().toString().padStart(2, '0');
-		const minutes = d.getMinutes().toString().padStart(2, '0');
-		const seconds = d.getSeconds().toString().padStart(2, '0');
-
-		return formatStr
-			.replace('DD', day)
-			.replace('MM', month)
-			.replace('YYYY', year.toString())
-			.replace('HH', hours)
-			.replace('mm', minutes)
-			.replace('ss', seconds);
-	}
-
 	// Function that determines if a batch action should be shown
 	function isBatchActionAllowed(action: FileAction): action is FileActionBatch {
 		if (isFetchingRecursively) return false;
@@ -298,7 +274,7 @@
 		if (sortState.column === 'default' && sortState.direction === 'default') {
 			// Sort folders alphabetically (A-Z)
 			const sortedFolders = [...folders].sort((a, b) => a.name.localeCompare(b.name));
-			
+
 			// Sort files by date (newest first)
 			const sortedFiles = [...files].sort((a, b) => {
 				// Use createdAt if available, otherwise fallback to lastModified
@@ -306,7 +282,7 @@
 				const bTime = b.createdAt ? b.createdAt.getTime() : b.lastModified.getTime();
 				return bTime - aTime; // Descending order (newest first)
 			});
-			
+
 			// Return folders first, then files
 			return [...sortedFolders, ...sortedFiles];
 		}
@@ -634,13 +610,30 @@
 {#snippet NameCell(file: FileItem)}
 	<div class="flex items-center gap-2">
 		{#if file.isFolder}
-			<svg class="text-amber-500" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M10 4H4C2.89543 4 2 4.89543 2 6V18C2 19.1046 2.89543 20 4 20H20C21.1046 20 22 19.1046 22 18V8C22 6.89543 21.1046 6 20 6H12L10 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				class="text-amber-500"
+			>
+				<path
+					fill="currentColor"
+					d="M3.5 6.25V8h4.629a.75.75 0 0 0 .53-.22l1.53-1.53l-1.53-1.53a.75.75 0 0 0-.53-.22H5.25A1.75 1.75 0 0 0 3.5 6.25m-1.5 0A3.25 3.25 0 0 1 5.25 3h2.879a2.25 2.25 0 0 1 1.59.659L11.562 5.5h7.189A3.25 3.25 0 0 1 22 8.75v9A3.25 3.25 0 0 1 18.75 21H5.25A3.25 3.25 0 0 1 2 17.75zM3.5 9.5v8.25c0 .966.784 1.75 1.75 1.75h13.5a1.75 1.75 0 0 0 1.75-1.75v-9A1.75 1.75 0 0 0 18.75 7h-7.19L9.72 8.841a2.25 2.25 0 0 1-1.591.659z"
+				/>
 			</svg>
 		{:else}
-			<svg class="text-blue-500" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-				<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				class="text-blue-500"
+			>
+				<path
+					fill="currentColor"
+					d="M6 2a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9.828a2 2 0 0 0-.586-1.414l-5.828-5.828A2 2 0 0 0 12.172 2zm-.5 2a.5.5 0 0 1 .5-.5h6V8a2 2 0 0 0 2 2h4.5v10a.5.5 0 0 1-.5.5H6a.5.5 0 0 1-.5-.5zm11.88 4.5H14a.5.5 0 0 1-.5-.5V4.62z"
+				/>
 			</svg>
 		{/if}
 		<span class="font-medium">{file.name}</span>
@@ -827,4 +820,4 @@
 			navToFileFolder
 		})}
 	{/if}
-</div> 
+</div>

package/dist/utils/dateUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Format a date to a specific format
+ * @param date - Date to format
+ * @param format - Format string (default: 'YYYY-MM-DD')
+ * @returns Formatted date string
+ */
+export declare function formatDate(date: Date | string | number, formatStr?: string): string;

package/dist/utils/dateUtils.js

@@ -0,0 +1,26 @@
+/**
+ * Format a date to a specific format
+ * @param date - Date to format
+ * @param format - Format string (default: 'YYYY-MM-DD')
+ * @returns Formatted date string
+ */
+export function formatDate(date, formatStr = 'DD.MM.YYYY HH:mm') {
+    const d = new Date(date);
+    if (isNaN(d.getTime())) {
+        return 'Invalid Date';
+    }
+    // Simple format implementation for common patterns
+    const day = d.getDate().toString().padStart(2, '0');
+    const month = (d.getMonth() + 1).toString().padStart(2, '0');
+    const year = d.getFullYear();
+    const hours = d.getHours().toString().padStart(2, '0');
+    const minutes = d.getMinutes().toString().padStart(2, '0');
+    const seconds = d.getSeconds().toString().padStart(2, '0');
+    return formatStr
+        .replace('DD', day)
+        .replace('MM', month)
+        .replace('YYYY', year.toString())
+        .replace('HH', hours)
+        .replace('mm', minutes)
+        .replace('ss', seconds);
+}

package/package.json

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