@rkosafo/cai.components 0.0.73 → 0.0.75

package/dist/layout/mailing/MailingMessageCard.svelte

@@ -17,7 +17,10 @@
 		onItemChecked,
 		toggelImportant,
 		toggleFavorited,
-		onItemSelected
+		onItemSelected,
+		showCheckbox = true,
+		showMarkAsFavorite = true,
+		showMarkAsImportant = true
 	}: MailingMessageCardProps = $props();
 
 	function handleClik(e: any) {
@@ -41,31 +44,29 @@
 </script>
 
 <div
-	class:bg-blue-100={isChecked}
 	class:hover:bg-gray-200={!isChecked}
-	class:bg-white={!isRead && !isChecked}
-	class:shadow={!isRead && !isChecked}
-	class:border={!isRead && !isChecked}
-	class:border-gray-300={!isRead && !isChecked}
-	class="flex items-center border-y px-2"
+	class="flex items-center border border-gray-300 bg-white px-2 shadow"
 	role="button"
 	tabindex="0"
 	onkeydown={handleClik}
 	onclick={handleClik}
 >
-	<Checkbox
-		checked={isChecked}
-		class="cursor-pointer border-2 border-gray-400 transition-colors hover:ring-4 hover:ring-gray-400 focus:ring-0"
-		onchange={(e) => {
-			const target = e.target;
-			onItemChecked?.({ checked: target.checked, id });
-		}}
-	/>
+	{#if showCheckbox}
+		<Checkbox
+			checked={isChecked}
+			class="cursor-pointer border-2 border-gray-400 transition-colors hover:ring-4 hover:ring-gray-400 focus:ring-0"
+			onchange={(e) => {
+				const target = e.target;
+				onItemChecked?.({ checked: target.checked, id });
+			}}
+		/>
+	{/if}
 	<div class="my-1 flex w-full cursor-pointer items-center justify-between p-1">
 		<div class="flex w-full items-center">
 			<div class="flex">
 				<div class="mr-4 flex items-center gap-1 space-x-1">
 					<button
+						class:hidden={!showMarkAsFavorite}
 						onclick={(e) => {
 							toggleFavorited?.(id);
 						}}
@@ -80,6 +81,7 @@
 						/>
 					</button>
 					<button
+						class:hidden={!showMarkAsImportant}
 						onclick={(e) => {
 							toggelImportant?.(id);
 						}}

package/dist/layout/mailing/MailingModule.svelte

@@ -31,6 +31,7 @@
 		showFavoriteButton = true,
 		showMarkAsSpamButton = true,
 		showReplies = true,
+		showMarkAsImportantButton = true,
 		readInbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
 			return null;
 		}),
@@ -415,6 +416,8 @@
 							<MailingMessageCard
 								{...message}
 								onItemChecked={handleItemChecked}
+								showMarkAsFavorite={showFavoriteButton}
+								showMarkAsImportant={showMarkAsImportantButton}
 								toggleFavorited={() => {
 									selectedMessages = [message.id];
 									handleMarkAsFavorite(message.isStared ? 'unfavorite' : 'favorite');

package/dist/layout/mailing/types.d.ts

@@ -62,6 +62,7 @@ export interface MailingModuleProps {
     showMarkReadButton?: boolean;
     showFavoriteButton?: boolean;
     showMarkAsSpamButton?: boolean;
+    showMarkAsImportantButton?: boolean;
     readInbox: (skip?: number, take?: number, filter?: TableFilter<any>) => Promise<PaginatedResult<MailingMessage>> | PaginatedResult<MailingMessage> | null;
     readOutbox?: (skip?: number, take?: number, filter?: TableFilter<any>) => Promise<PaginatedResult<MailingMessage>> | PaginatedResult<MailingMessage> | null;
     toggleArchieve?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
@@ -104,6 +105,9 @@ export interface MailingMessageCardProps extends MailingMessage {
     onItemChecked?: (val: MailingMessageCardChecked) => void;
     toggelImportant?: (id: number) => void;
     toggleFavorited?: (id: number) => void;
+    showMarkAsImportant?: boolean;
+    showMarkAsFavorite?: boolean;
+    showCheckbox?: boolean;
 }
 export type MailingActiveBox = 'inbox' | 'outbox';
 export interface MailingMessageViewerProps {

package/dist/types/index.d.ts

@@ -568,7 +568,7 @@ export interface TableSortInfo {
     id: string;
     order: 'asc' | 'desc';
 }
-export type TableColor = 'green' | 'orange' | 'white' | 'purple' | 'sky' | 'blue';
+export type TableColor = 'green' | 'orange' | 'white' | 'purple' | 'sky' | 'blue' | 'red' | 'pink';
 export type HeaderTextColor = 'black' | 'white' | 'gray';
 export interface TableProps {
     data?: any[];
@@ -810,6 +810,7 @@ export interface BreadcrumbProps {
     options: IBreadcrumb[];
     activeBreadCrumb: string;
     onclik?: (val: IBreadcrumbClick) => void;
+    activeClass?: 'pink' | 'blue' | 'red' | 'indigo' | 'purple' | 'black' | 'amber' | 'orange';
 }
 export interface IBreadcrumbClick {
     title: string;

package/dist/ui/breadcrumb/Breadcrumb.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
 	import { IconifyIcon, type BreadcrumbProps } from '../../index.js';
 
-	let { options = [], activeBreadCrumb = '', onclik }: BreadcrumbProps = $props();
+	let {
+		options = [],
+		activeBreadCrumb = '',
+		onclik,
+		activeClass = 'blue'
+	}: BreadcrumbProps = $props();
 </script>
 
 <ul class="flex items-center gap-1">
@@ -10,8 +15,14 @@
 			<button
 				onclick={() => onclik?.({ title, path, index })}
 				class="capitalize"
-				class:text-blue-500={activeBreadCrumb === title}
-				class:text-gray-500={activeBreadCrumb !== title}
+				class:text-blue-500={activeBreadCrumb === title && activeClass === 'blue'}
+				class:text-red-500={activeBreadCrumb === title && activeClass === 'red'}
+				class:text-pink-500={activeBreadCrumb === title && activeClass === 'pink'}
+				class:text-indigo-500={activeBreadCrumb === title && activeClass === 'indigo'}
+				class:text-purple-500={activeBreadCrumb === title && activeClass === 'purple'}
+				class:text-black={activeBreadCrumb === title && activeClass === 'black'}
+				class:text-amber-500={activeBreadCrumb === title && activeClass === 'amber'}
+				class:text-orange-500={activeBreadCrumb === title && activeClass === 'orange'}
 				class:hover:text-gray-400={activeBreadCrumb !== title}
 				class:cursor-default={activeBreadCrumb === title}>{title}</button
 			>

package/dist/ui/table/Table.svelte

@@ -130,6 +130,8 @@
 					class:bg-[#CF9B14]={headerColor === 'orange'}
 					class:bg-[#cbc3fa]={headerColor === 'purple'}
 					class:bg-blue-300={headerColor === 'blue'}
+					class:bg-red-300={headerColor === 'red'}
+					class:bg-pink-300={headerColor === 'pink'}
 					class:bg-white={headerColor === 'white'}
 					class:text-gray-700={headerTextColor === 'gray'}
 					class:text-white={headerTextColor === 'white'}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.73",
+  "version": "0.0.75",
   "files": [
     "dist",
     "!dist/**/*.test.*",