@rkosafo/cai.components 0.0.37 → 0.0.39

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export * from './ui/icons/index.js';
 export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
+export * from './ui/toast/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';
@@ -44,6 +45,7 @@ export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';
+export * from './utils/svelte-legos.js';
 import 'iconify-icon';
 export * from './keycloak/index.js';
 export { YouTube, BaseEditor };

package/dist/index.js

@@ -27,6 +27,7 @@ export * from './ui/icons/index.js';
 export * from './ui/box/index.js';
 export * from './ui/breadcrumb/index.js';
 export * from './layout/ComponentCanvas/index.js';
+export * from './ui/toast/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';
@@ -45,6 +46,7 @@ export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';
+export * from './utils/svelte-legos.js';
 import 'iconify-icon';
 export * from './keycloak/index.js';
 export { YouTube, BaseEditor };

package/dist/layout/TF/Header/Header.svelte

@@ -17,6 +17,8 @@
 		showNotifications?: boolean;
 		// readNotifications?: () => Promise<any[]> | any[];
 		notificationList?: Snippet;
+		rightSideComponent?: Snippet;
+		leftSideComponent?: Snippet;
 	}
 </script>
 
@@ -37,7 +39,9 @@
 		onsignout,
 		notificationCount = 0,
 		showNotifications = true,
-		notificationList
+		notificationList,
+		rightSideComponent,
+		leftSideComponent
 	}: TFHeaderProps = $props();
 	let showUser = $state(false);
 	let openNotification = $state(false);
@@ -59,7 +63,10 @@
 			{title}
 		</div>
 	</div>
+	{@render leftSideComponent?.()}
 	<div class="flex flex-grow sm:hidden"></div>
+	{@render rightSideComponent?.()}
+
 	{#if showNotifications}
 		<div
 			class="flex items-center gap-4"
@@ -139,7 +146,7 @@
 						<div class="grid">
 							<Button
 								ripple={false}
-								class="mx-0.5 flex gap-1  justify-start border bg-red-50 text-red-600 hover:bg-red-100"
+								class="mx-0.5 flex justify-start  gap-1 border bg-red-50 text-red-600 hover:bg-red-100"
 								onclick={() => {
 									showUser = false;
 									onsignout?.();

package/dist/layout/TF/Header/Header.svelte.d.ts

@@ -14,6 +14,8 @@ export interface TFHeaderProps {
     notificationCount?: number;
     showNotifications?: boolean;
     notificationList?: Snippet;
+    rightSideComponent?: Snippet;
+    leftSideComponent?: Snippet;
 }
 import type { Snippet } from 'svelte';
 declare const Header: import("svelte").Component<TFHeaderProps, {}, "hideSidebar">;

package/dist/ui/datatable/Datatable.svelte

@@ -272,6 +272,7 @@
 
 	async function handleAction({ action, data }: { action: string; data: FormData }) {
 		let formData = data;
+		console.log({ formData });
 		try {
 			isLoading = true;
 			const ret = editing

package/dist/ui/toast/Toast.svelte

@@ -0,0 +1,337 @@
+<script lang="ts" module>
+	export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
+	export type ToastPosition =
+		| 'top-left'
+		| 'top-center'
+		| 'top-right'
+		| 'bottom-left'
+		| 'bottom-center'
+		| 'bottom-right';
+
+	export interface CustomToastOptions extends ToastOptions {
+		icon?: string;
+		showProgress?: boolean;
+		progressColor?: string;
+		borderColor?: string;
+		backgroundColor?: string;
+		textColor?: string;
+		iconColor?: string;
+		style?: any;
+		action?: {
+			label: string;
+			onClick: () => void;
+			buttonStyle?: string;
+		};
+	}
+
+	export interface ToastTheme {
+		success?: Partial<CustomToastOptions>;
+		error?: Partial<CustomToastOptions>;
+		warning?: Partial<CustomToastOptions>;
+		info?: Partial<CustomToastOptions>;
+		loading?: Partial<CustomToastOptions>;
+		custom?: Partial<CustomToastOptions>;
+	}
+
+	export interface ToasterProps {
+		position?: ToastPosition;
+		duration?: number;
+		theme?: ToastTheme;
+		className?: string;
+		toastOptions?: ToastOptions;
+		richColors?: boolean;
+		customIcons?: boolean;
+		closeButton?: boolean;
+		pauseOnHover?: boolean;
+		reverseOrder?: boolean;
+		visibleToasts?: number;
+		expand?: boolean;
+		gap?: number;
+		offset?: number | string;
+	}
+	// Default theme configuration
+	const defaultTheme: ToastTheme = {
+		success: {
+			icon: '✅',
+			borderColor: '#22c55e',
+			backgroundColor: '#f0fdf4',
+			textColor: '#166534',
+			iconColor: '#16a34a',
+			progressColor: '#22c55e'
+		},
+		error: {
+			icon: '❌',
+			borderColor: '#ef4444',
+			backgroundColor: '#fef2f2',
+			textColor: '#991b1b',
+			iconColor: '#dc2626',
+			progressColor: '#ef4444'
+		},
+		warning: {
+			icon: '⚠️',
+			borderColor: '#f59e0b',
+			backgroundColor: '#fffbeb',
+			textColor: '#92400e',
+			iconColor: '#d97706',
+			progressColor: '#f59e0b'
+		},
+		info: {
+			icon: 'ℹ️',
+			borderColor: '#3b82f6',
+			backgroundColor: '#eff6ff',
+			textColor: '#1e40af',
+			iconColor: '#2563eb',
+			progressColor: '#3b82f6'
+		},
+		loading: {
+			icon: '⏳',
+			borderColor: '#6b7280',
+			backgroundColor: '#f9fafb',
+			textColor: '#374151',
+			iconColor: '#6b7280',
+			progressColor: '#6b7280'
+		}
+	};
+
+	let currentDuration = 4000;
+	let currentTheme: ToastTheme = {};
+	let currentRichColors = false;
+
+	function buildToastStyle(
+		theme: Partial<CustomToastOptions>,
+		options?: CustomToastOptions,
+		type?: ToastType,
+		richColors?: boolean
+	): string {
+		if (options?.style) return options.style;
+
+		const baseStyle = `
+			border: 1px solid ${options?.borderColor || theme.borderColor || '#e5e7eb'};
+			background: ${options?.backgroundColor || theme.backgroundColor || '#ffffff'};
+			color: ${options?.textColor || theme.textColor || '#1f2937'};
+			padding: 12px 16px;
+			border-radius: 8px;
+			font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+			font-size: 14px;
+			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+			display: flex;
+			align-items: center;
+			gap: 8px;
+		`;
+
+		if (richColors && type && defaultTheme[type]) {
+			const richTheme = defaultTheme[type]!;
+			return `
+				${baseStyle}
+				border-color: ${options?.borderColor || richTheme.borderColor}!important;
+				background: ${options?.backgroundColor || richTheme.backgroundColor}!important;
+				color: ${options?.textColor || richTheme.textColor}!important;
+			`;
+		}
+
+		return baseStyle;
+	}
+
+	export const toast = {
+		success: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.success || defaultTheme.success || {};
+			const style = buildToastStyle(themeOptions, options, 'success');
+
+			return originalToast.success(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		error: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.error || defaultTheme.error || {};
+			const style = buildToastStyle(themeOptions, options, 'error');
+
+			return originalToast.error(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		warning: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.warning || defaultTheme.warning || {};
+			const style = buildToastStyle(themeOptions, options, 'warning');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		info: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.info || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, 'info');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		loading: (message: string, options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.loading || defaultTheme.loading || {};
+			const style = buildToastStyle(themeOptions, options, 'loading');
+
+			return originalToast.loading(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		promise: <T,>(
+			promise: Promise<T>,
+			messages: { loading: string; success: string; error: string },
+			options?: {
+				loading?: CustomToastOptions;
+				success?: CustomToastOptions;
+				error?: CustomToastOptions;
+			}
+		) => {
+			const loadingTheme = currentTheme?.loading || defaultTheme.loading || {};
+			const successTheme = currentTheme?.success || defaultTheme.success || {};
+			const errorTheme = currentTheme?.error || defaultTheme.error || {};
+
+			return originalToast.promise(promise, messages, {
+				loading: {
+					...loadingTheme,
+					...options?.loading,
+					style: buildToastStyle(loadingTheme, options?.loading, 'loading'),
+					icon: options?.loading?.icon || loadingTheme.icon
+				},
+				success: {
+					...successTheme,
+					...options?.success,
+					style: buildToastStyle(successTheme, options?.success, 'success'),
+					icon: options?.success?.icon || successTheme.icon
+				},
+				error: {
+					...errorTheme,
+					...options?.error,
+					style: buildToastStyle(errorTheme, options?.error, 'error'),
+					icon: options?.error?.icon || errorTheme.icon
+				}
+			});
+		},
+
+		// Custom toast with complete control
+		custom: (message: string, type: ToastType = 'info', options?: CustomToastOptions) => {
+			const themeOptions = currentTheme?.[type] || defaultTheme[type] || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, type);
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon
+			});
+		},
+
+		// Action toast with button
+		action: (
+			message: string,
+			action: { label: string; onClick: () => void },
+			options?: CustomToastOptions
+		) => {
+			const themeOptions = currentTheme?.info || defaultTheme.info || {};
+			const style = buildToastStyle(themeOptions, options, 'info');
+
+			return originalToast(message, {
+				duration: currentDuration,
+				...themeOptions,
+				...options,
+				style,
+				icon: options?.icon || themeOptions.icon,
+				action: {
+					label: action.label,
+					onClick: action.onClick,
+					buttonStyle:
+						options?.action?.buttonStyle ||
+						'background: #3b82f6; color: white; border: none; padding: 4px 12px; border-radius: 4px; cursor: pointer;'
+				}
+			});
+		},
+
+		// Dismiss specific toast or all toasts
+		dismiss: (toastId?: string) => {
+			return originalToast.dismiss(toastId);
+		},
+
+		// Remove specific toast
+		remove: (toastId?: string) => {
+			return originalToast.remove(toastId);
+		}
+	};
+
+	export function updateToastConfig(config: {
+		duration?: number;
+		theme?: ToastTheme;
+		richColors?: boolean;
+	}) {
+		if (config.duration !== undefined) currentDuration = config.duration;
+		if (config.theme !== undefined) currentTheme = config.theme;
+		if (config.richColors !== undefined) currentRichColors = config.richColors;
+	}
+
+	export { originalToast };
+	export type { ToastOptions };
+</script>
+
+<script lang="ts">
+	import { Toaster, toast as originalToast, type ToastOptions } from 'svelte-french-toast';
+
+	let {
+		position = 'top-center',
+		duration = 4000,
+		theme = {},
+		className = '',
+		toastOptions = {},
+		richColors = false,
+		customIcons = true,
+		closeButton = true,
+		pauseOnHover = true,
+		reverseOrder = false,
+		visibleToasts = 3,
+		expand = false,
+		gap = 8,
+		offset = '32px'
+	}: ToasterProps = $props();
+
+	$effect(() => {
+		updateToastConfig({ duration, theme, richColors });
+	});
+</script>
+
+<Toaster
+	{position}
+	{duration}
+	{className}
+	{toastOptions}
+	{closeButton}
+	{pauseOnHover}
+	{reverseOrder}
+	{visibleToasts}
+	{expand}
+	{gap}
+	{offset}
+/>

package/dist/ui/toast/Toast.svelte.d.ts

@@ -0,0 +1,75 @@
+export type ToastType = 'success' | 'error' | 'warning' | 'info' | 'loading' | 'custom';
+export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface CustomToastOptions extends ToastOptions {
+    icon?: string;
+    showProgress?: boolean;
+    progressColor?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    iconColor?: string;
+    style?: any;
+    action?: {
+        label: string;
+        onClick: () => void;
+        buttonStyle?: string;
+    };
+}
+export interface ToastTheme {
+    success?: Partial<CustomToastOptions>;
+    error?: Partial<CustomToastOptions>;
+    warning?: Partial<CustomToastOptions>;
+    info?: Partial<CustomToastOptions>;
+    loading?: Partial<CustomToastOptions>;
+    custom?: Partial<CustomToastOptions>;
+}
+export interface ToasterProps {
+    position?: ToastPosition;
+    duration?: number;
+    theme?: ToastTheme;
+    className?: string;
+    toastOptions?: ToastOptions;
+    richColors?: boolean;
+    customIcons?: boolean;
+    closeButton?: boolean;
+    pauseOnHover?: boolean;
+    reverseOrder?: boolean;
+    visibleToasts?: number;
+    expand?: boolean;
+    gap?: number;
+    offset?: number | string;
+}
+export declare const toast: {
+    success: (message: string, options?: CustomToastOptions) => string;
+    error: (message: string, options?: CustomToastOptions) => string;
+    warning: (message: string, options?: CustomToastOptions) => string;
+    info: (message: string, options?: CustomToastOptions) => string;
+    loading: (message: string, options?: CustomToastOptions) => string;
+    promise: <T>(promise: Promise<T>, messages: {
+        loading: string;
+        success: string;
+        error: string;
+    }, options?: {
+        loading?: CustomToastOptions;
+        success?: CustomToastOptions;
+        error?: CustomToastOptions;
+    }) => Promise<T>;
+    custom: (message: string, type?: ToastType, options?: CustomToastOptions) => string;
+    action: (message: string, action: {
+        label: string;
+        onClick: () => void;
+    }, options?: CustomToastOptions) => string;
+    dismiss: (toastId?: string) => void;
+    remove: (toastId?: string) => void;
+};
+export declare function updateToastConfig(config: {
+    duration?: number;
+    theme?: ToastTheme;
+    richColors?: boolean;
+}): void;
+export { originalToast };
+export type { ToastOptions };
+import { toast as originalToast, type ToastOptions } from 'svelte-french-toast';
+declare const Toast: import("svelte").Component<ToasterProps, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/ui/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toaster, toast } from './Toast.svelte';
+export type { ToasterProps, ToastType, CustomToastOptions, ToastTheme } from './Toast.svelte';

package/dist/ui/toast/index.js

@@ -0,0 +1 @@
+export { default as Toaster, toast } from './Toast.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.37",
+  "version": "0.0.39",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -64,6 +64,7 @@
     "mdsvex": "^0.12.6",
     "nanoid": "^5.1.5",
     "svelecte": "^5.3.0",
+    "svelte-french-toast": "^1.2.0",
     "svelte-headless-table": "^0.18.3",
     "svelte-meta-tags": "^4.4.0",
     "tailwind-merge": "^3.3.1",