@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/layout/TF/Sidebar/Sidebar.svelte

@@ -1,148 +1,148 @@
-<script lang="ts">
-	import { cn } from '../../../utils/index.js';
-	import { page } from '$app/state';
-	import { IconifyIcon, type IMenuItem, type TFSidebarProps } from '../../../index.js';
-	import { slide } from 'svelte/transition';
-
-	let {
-		homeUrl,
-		logoUrl,
-		appName,
-		appShortName,
-		hideSidebar = false,
-		menuItems = [],
-		logo,
-		isActiveFunction
-	}: TFSidebarProps = $props();
-
-	let activeUrl = $state('');
-	let openNestedIndexes = $state<Set<number>>(new Set());
-
-	$effect(() => {
-		activeUrl = page.url.pathname;
-	});
-
-	// Function to toggle nested menu by index
-	function toggleNestedMenu(index: number) {
-		handleMenuItemClick();
-		const newOpenIndexes = new Set(openNestedIndexes);
-
-		if (newOpenIndexes.has(index)) {
-			// If already open, close it
-			newOpenIndexes.delete(index);
-		} else {
-			// If opening new one, just add it (don't clear others)
-			newOpenIndexes.add(index);
-		}
-		openNestedIndexes = newOpenIndexes;
-	}
-
-	// Function to handle regular menu item clicks (non-nested)
-	function handleMenuItemClick() {
-		// Close all nested menus when clicking a regular menu item
-		openNestedIndexes = new Set();
-	}
-
-	// Function to check if a menu item or any of its children is active
-	function isItemOrChildActive(item: IMenuItem): boolean {
-		if (isActiveFunction) {
-			return isActiveFunction(item);
-		}
-
-		if (item.path === activeUrl) {
-			return true;
-		}
-
-		// Check if any child is active
-		if (item.items) {
-			return item.items.some((child) => child.path === activeUrl);
-		}
-
-		return false;
-	}
-</script>
-
-{#snippet menuItemSnippet(item: IMenuItem, active: boolean)}
-	<li class:active class="relative">
-		<a
-			class="space-x-3 pl-3 {active ? 'text-[#3C91E6]' : ''}"
-			href={item.path}
-			onclick={() => handleMenuItemClick()}
-		>
-			<IconifyIcon icon={item.icon} class={active ? 'text-[#3C91E6]' : ''} />
-			<span class="text hidden md:block {active ? 'text-[#3C91E6]' : ''}">{item.title}</span>
-		</a>
-	</li>
-{/snippet}
-
-{#snippet nestedItemSnippet(item: IMenuItem, index: number)}
-	{@const isActive = isItemOrChildActive(item)}
-	{@const isOpen = openNestedIndexes.has(index)}
-
-	<div class="mx-1 rounded-[5px] px-1.5 py-2 {isActive ? 'bg-[#cfe8ff79] text-[#3C91E6]' : ''}">
-		<button
-			class="flex w-full items-center space-x-3 pl-3"
-			onclick={() => toggleNestedMenu(index)}
-			type="button"
-		>
-			<IconifyIcon icon={item.icon} class={isActive ? 'text-[#3C91E6]' : ''} />
-			<span class="text hidden md:block {isActive ? 'text-[#3C91E6]' : ''}">{item.title}</span>
-			<IconifyIcon
-				icon="ri:arrow-down-s-line"
-				class="ml-auto transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
-			/>
-		</button>
-		{#if isOpen}
-			<ul transition:slide class="sub-menu space-y-0 py-1">
-				{#each item.items! as child}
-					{@const isChildActive = isActiveFunction
-						? isActiveFunction(child)
-						: activeUrl === child.path}
-					<div class="pl-4">
-						<li class="relative">
-							<a
-								class="flex items-center space-x-3 rounded transition-colors hover:bg-[#cfe8ff] {isChildActive
-									? 'bg-[#cfe8ff] text-[#3C91E6]'
-									: ''}"
-								href={child.path}
-							>
-								{#if child.icon}
-									<IconifyIcon icon={child.icon} class={isChildActive ? 'text-[#3C91E6]' : ''} />
-								{/if}
-								<span class="text hidden md:block {isChildActive ? 'text-[#3C91E6]' : ''}"
-									>{child.title}</span
-								>
-							</a>
-						</li>
-					</div>
-				{/each}
-			</ul>
-		{/if}
-	</div>
-{/snippet}
-
-<section id="tf-sidebar" class={cn('relative')} class:hide={hideSidebar}>
-	<a href={homeUrl} class="brand flex flex-col pt-4" onclick={() => handleMenuItemClick()}>
-		{#if logo}
-			{@render logo()}
-		{:else}
-			<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
-		{/if}
-		<span class="text-base font-thin {hideSidebar ? 'block' : 'md:hidden'}">{appShortName}</span>
-		<p class="text-center text-lg font-medium {hideSidebar ? 'hidden' : 'hidden md:block'}">
-			{appName}
-		</p>
-	</a>
-	{#if menuItems.length > 0}
-		<ul class="side-menu top relative pt-4">
-			{#each menuItems as item, index}
-				{@const active = isActiveFunction ? isActiveFunction(item) : activeUrl === item.path}
-				{#if item.items}
-					{@render nestedItemSnippet(item, index)}
-				{:else}
-					{@render menuItemSnippet(item, active)}
-				{/if}
-			{/each}
-		</ul>
-	{/if}
-</section>
+<script lang="ts">
+	import { cn } from '../../../utils/index.js';
+	import { page } from '$app/state';
+	import { IconifyIcon, type IMenuItem, type TFSidebarProps } from '../../../index.js';
+	import { slide } from 'svelte/transition';
+
+	let {
+		homeUrl,
+		logoUrl,
+		appName,
+		appShortName,
+		hideSidebar = false,
+		menuItems = [],
+		logo,
+		isActiveFunction
+	}: TFSidebarProps = $props();
+
+	let activeUrl = $state('');
+	let openNestedIndexes = $state<Set<number>>(new Set());
+
+	$effect(() => {
+		activeUrl = page.url.pathname;
+	});
+
+	// Function to toggle nested menu by index
+	function toggleNestedMenu(index: number) {
+		handleMenuItemClick();
+		const newOpenIndexes = new Set(openNestedIndexes);
+
+		if (newOpenIndexes.has(index)) {
+			// If already open, close it
+			newOpenIndexes.delete(index);
+		} else {
+			// If opening new one, just add it (don't clear others)
+			newOpenIndexes.add(index);
+		}
+		openNestedIndexes = newOpenIndexes;
+	}
+
+	// Function to handle regular menu item clicks (non-nested)
+	function handleMenuItemClick() {
+		// Close all nested menus when clicking a regular menu item
+		openNestedIndexes = new Set();
+	}
+
+	// Function to check if a menu item or any of its children is active
+	function isItemOrChildActive(item: IMenuItem): boolean {
+		if (isActiveFunction) {
+			return isActiveFunction(item);
+		}
+
+		if (item.path === activeUrl) {
+			return true;
+		}
+
+		// Check if any child is active
+		if (item.items) {
+			return item.items.some((child) => child.path === activeUrl);
+		}
+
+		return false;
+	}
+</script>
+
+{#snippet menuItemSnippet(item: IMenuItem, active: boolean)}
+	<li class:active class="relative">
+		<a
+			class="space-x-3 pl-3 {active ? 'text-[#3C91E6]' : ''}"
+			href={item.path}
+			onclick={() => handleMenuItemClick()}
+		>
+			<IconifyIcon icon={item.icon} class={active ? 'text-[#3C91E6]' : ''} />
+			<span class="text hidden md:block {active ? 'text-[#3C91E6]' : ''}">{item.title}</span>
+		</a>
+	</li>
+{/snippet}
+
+{#snippet nestedItemSnippet(item: IMenuItem, index: number)}
+	{@const isActive = isItemOrChildActive(item)}
+	{@const isOpen = openNestedIndexes.has(index)}
+
+	<div class="mx-1 rounded-[5px] px-1.5 py-2 {isActive ? 'bg-[#cfe8ff79] text-[#3C91E6]' : ''}">
+		<button
+			class="flex w-full items-center space-x-3 pl-3"
+			onclick={() => toggleNestedMenu(index)}
+			type="button"
+		>
+			<IconifyIcon icon={item.icon} class={isActive ? 'text-[#3C91E6]' : ''} />
+			<span class="text hidden md:block {isActive ? 'text-[#3C91E6]' : ''}">{item.title}</span>
+			<IconifyIcon
+				icon="ri:arrow-down-s-line"
+				class="ml-auto transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
+			/>
+		</button>
+		{#if isOpen}
+			<ul transition:slide class="sub-menu space-y-0 py-1">
+				{#each item.items! as child}
+					{@const isChildActive = isActiveFunction
+						? isActiveFunction(child)
+						: activeUrl === child.path}
+					<div class="pl-4">
+						<li class="relative">
+							<a
+								class="flex items-center space-x-3 rounded transition-colors hover:bg-[#cfe8ff] {isChildActive
+									? 'bg-[#cfe8ff] text-[#3C91E6]'
+									: ''}"
+								href={child.path}
+							>
+								{#if child.icon}
+									<IconifyIcon icon={child.icon} class={isChildActive ? 'text-[#3C91E6]' : ''} />
+								{/if}
+								<span class="text hidden md:block {isChildActive ? 'text-[#3C91E6]' : ''}"
+									>{child.title}</span
+								>
+							</a>
+						</li>
+					</div>
+				{/each}
+			</ul>
+		{/if}
+	</div>
+{/snippet}
+
+<section id="tf-sidebar" class={cn('relative')} class:hide={hideSidebar}>
+	<a href={homeUrl} class="brand flex flex-col pt-4" onclick={() => handleMenuItemClick()}>
+		{#if logo}
+			{@render logo()}
+		{:else}
+			<img src={logoUrl} alt="Logo" class={hideSidebar ? 'w-12' : 'w-12 md:w-24'} loading="lazy" />
+		{/if}
+		<span class="text-base font-thin {hideSidebar ? 'block' : 'md:hidden'}">{appShortName}</span>
+		<p class="text-center text-lg font-medium {hideSidebar ? 'hidden' : 'hidden md:block'}">
+			{appName}
+		</p>
+	</a>
+	{#if menuItems.length > 0}
+		<ul class="side-menu top relative pt-4">
+			{#each menuItems as item, index}
+				{@const active = isActiveFunction ? isActiveFunction(item) : activeUrl === item.path}
+				{#if item.items}
+					{@render nestedItemSnippet(item, index)}
+				{:else}
+					{@render menuItemSnippet(item, active)}
+				{/if}
+			{/each}
+		</ul>
+	{/if}
+</section>

package/dist/layout/TF/Wrapper/Wrapper.svelte

@@ -1,17 +1,17 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface TFLayoutWrapperProps {
-		sidebar: Snippet;
-		content: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	let { sidebar, content }: TFLayoutWrapperProps = $props();
-</script>
-
-<div class="h-full w-full overflow-hidden">
-	{@render sidebar()}
-	{@render content()}
-</div>
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface TFLayoutWrapperProps {
+		sidebar: Snippet;
+		content: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	let { sidebar, content }: TFLayoutWrapperProps = $props();
+</script>
+
+<div class="h-full w-full overflow-hidden">
+	{@render sidebar()}
+	{@render content()}
+</div>

package/dist/layout/mailing/MailPaginator.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
-	import type { MailPaginatorProps } from './types.js';
-
-	let {
-		hasNextPage = false,
-		hasPreviousPage = false,
-		currentPage = 0,
-		pageSize = 0,
-		totalCount = 0,
-		onNextClick,
-		onPreviousClick
-	}: MailPaginatorProps = $props();
-</script>
-
-<div class="flex items-center space-x-4 px-2">
-	<span class="text-sm text-gray-500">{currentPage}-{pageSize} of {totalCount}</span>
-	<div class="flex items-center space-x-2">
-		<button
-			disabled={!hasPreviousPage}
-			onclick={onPreviousClick}
-			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
-			title="Older"
-		>
-			<IconifyIcon icon="material-symbols:arrow-back" class="flex h-5 w-5 justify-center" />
-		</button>
-		<button
-			disabled={!hasNextPage}
-			onclick={onNextClick}
-			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 transition duration-150 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
-			title="Newer"
-		>
-			<IconifyIcon icon="material-symbols:arrow-forward" class="flex h-5 w-5 justify-center" />
-		</button>
-	</div>
-</div>
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import type { MailPaginatorProps } from './types.js';
+
+	let {
+		hasNextPage = false,
+		hasPreviousPage = false,
+		currentPage = 0,
+		pageSize = 0,
+		totalCount = 0,
+		onNextClick,
+		onPreviousClick
+	}: MailPaginatorProps = $props();
+</script>
+
+<div class="flex items-center space-x-4 px-2">
+	<span class="text-sm text-gray-500">{currentPage}-{pageSize} of {totalCount}</span>
+	<div class="flex items-center space-x-2">
+		<button
+			disabled={!hasPreviousPage}
+			onclick={onPreviousClick}
+			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
+			title="Older"
+		>
+			<IconifyIcon icon="material-symbols:arrow-back" class="flex h-5 w-5 justify-center" />
+		</button>
+		<button
+			disabled={!hasNextPage}
+			onclick={onNextClick}
+			class="rounded-lg bg-gray-200 p-1.5 text-gray-700 transition duration-150 hover:bg-gray-300 disabled:bg-gray-200 disabled:text-gray-400"
+			title="Newer"
+		>
+			<IconifyIcon icon="material-symbols:arrow-forward" class="flex h-5 w-5 justify-center" />
+		</button>
+	</div>
+</div>

package/dist/layout/mailing/MailSidebar.svelte

@@ -1,39 +1,39 @@
-<script lang="ts">
-	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
-	import { Tooltip } from '../../ui/tooltip/index.js';
-	import type { MailSidebar } from './types.js';
-
-	let { setActiveMenu, menus = [], onClick }: MailSidebar = $props();
-</script>
-
-<div class="h-full w-full">
-	<ul class="flex h-full w-full flex-col gap-2 pt-4 pb-8">
-		{#each menus as menu, i}
-			{@const active = setActiveMenu?.(menu)}
-			<li class="grid w-full place-content-center">
-				<a
-					onclick={() => onClick?.(menu)}
-					href={menu.path}
-					class:text-primary-500={active}
-					class:bg-primary-100={active}
-					class:bg-opacity-10={active}
-					class:hover:bg-primary-100={!active}
-					class:hover:bg-opacity-10={!active}
-					class:text-gray-500={!active}
-					class:hover:text-gray-700={!active}
-					class="relative grid cursor-pointer place-content-center rounded px-3 py-3 transition-colors"
-				>
-					<IconifyIcon icon={menu.icon} style="font-size: 18px;" />
-					<div class="absolute -top-1 right-0">
-						<span
-							class:hidden={!Boolean(menu.count > 0)}
-							class="rounded-lg bg-sky-500 px-1.5 py-0.5 text-xs font-bold text-gray-100"
-							>{menu.count}</span
-						>
-					</div>
-				</a>
-				<Tooltip placement="right">{menu.title}</Tooltip>
-			</li>
-		{/each}
-	</ul>
-</div>
+<script lang="ts">
+	import IconifyIcon from '../../ui/icons/IconifyIcon.svelte';
+	import { Tooltip } from '../../ui/tooltip/index.js';
+	import type { MailSidebar } from './types.js';
+
+	let { setActiveMenu, menus = [], onClick }: MailSidebar = $props();
+</script>
+
+<div class="h-full w-full">
+	<ul class="flex h-full w-full flex-col gap-2 pt-4 pb-8">
+		{#each menus as menu, i}
+			{@const active = setActiveMenu?.(menu)}
+			<li class="grid w-full place-content-center">
+				<a
+					onclick={() => onClick?.(menu)}
+					href={menu.path}
+					class:text-primary-500={active}
+					class:bg-primary-100={active}
+					class:bg-opacity-10={active}
+					class:hover:bg-primary-100={!active}
+					class:hover:bg-opacity-10={!active}
+					class:text-gray-500={!active}
+					class:hover:text-gray-700={!active}
+					class="relative grid cursor-pointer place-content-center rounded px-3 py-3 transition-colors"
+				>
+					<IconifyIcon icon={menu.icon} style="font-size: 18px;" />
+					<div class="absolute -top-1 right-0">
+						<span
+							class:hidden={!Boolean(menu.count > 0)}
+							class="rounded-lg bg-sky-500 px-1.5 py-0.5 text-xs font-bold text-gray-100"
+							>{menu.count}</span
+						>
+					</div>
+				</a>
+				<Tooltip placement="right">{menu.title}</Tooltip>
+			</li>
+		{/each}
+	</ul>
+</div>