@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/ui/notificationList/NotificationList.svelte

@@ -1,123 +1,123 @@
-
-
-<script lang="ts" generics="T extends NotificationItem">
-	import { Dropdown, DropdownItem } from '../dropdown/index.js';
-	import { Avatar } from '../avatar/index.js';
-	import { PageLoader, type NotificationItem, type NotificationListProps } from '../../index.js';
-	import { onDestroy, onMount } from 'svelte';
-
-	let {
-		open = $bindable(false),
-		onClearNotifications,
-		header,
-		busy = false,
-		data: initialData = [],
-		onclick,
-		footer,
-		read
-	}: NotificationListProps<T> = $props();
-
-	let data = $state(initialData);
-	let internalOpen = $state(false);
-
-	$effect(() => {
-		if (open !== undefined) {
-			internalOpen = open;
-		}
-	});
-
-	async function fetchData() {
-		if (!read) return;
-
-		try {
-			busy = true;
-			const result = await read();
-			data = result;
-		} finally {
-			busy = false;
-		}
-	}
-
-	$effect(() => {
-		if (internalOpen) {
-			data = [];
-			fetchData();
-		}
-	});
-
-	onMount(() => {
-		if (initialData && initialData.length > 0) {
-			data = initialData;
-		}
-	});
-
-	onDestroy(() => {
-		data = [];
-	});
-</script>
-
-<Dropdown
-	bind:isOpen={internalOpen}
-	class="w-full max-w-sm divide-gray-100 rounded shadow dark:divide-gray-700 dark:bg-gray-800"
->
-	{#if header}
-		{@render header()}
-	{:else}
-		<div class="py-2 text-center font-bold">Notifications</div>
-	{/if}
-	<div
-		class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch flex max-h-80 flex-col divide-y overflow-y-auto"
-	>
-		{#if busy}
-			<div class="flex h-52 w-96 items-center justify-center">
-				<PageLoader size={40} />
-			</div>
-		{:else if data.length}
-			{#each data as item, index}
-				<DropdownItem class="flex w-full space-x-4" onclick={() => onclick?.(item)}>
-					<Avatar cornerStyle="rounded">
-						<iconify-icon icon={item.icon} style="font-size: 20px;"></iconify-icon>
-					</Avatar>
-					<div class="w-full pl-3 text-start">
-						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
-							<span class="font-semibold text-gray-900 dark:text-white">{item.sender}</span>: "{item.content}"
-						</div>
-						<div class="flex items-center justify-between">
-							<div class="text-xs text-primary-600 dark:text-primary-500">{item.time}</div>
-							<div class="flex items-center gap-1">
-								{#if item.isRead}
-									<span class="text-xs font-light text-gray-400">Read</span>
-								{/if}
-								<iconify-icon
-									icon={item.isRead ? 'ri:check-double-line' : 'uim:check'}
-									class={item.isRead ? 'text-blue-700' : 'text-gray-500'}
-									style="font-size: 18px;"
-								></iconify-icon>
-							</div>
-						</div>
-					</div>
-				</DropdownItem>
-			{/each}
-		{:else}
-			<div class="flex h-32 w-80 items-center justify-center space-x-4">
-				<p>No Notifications</p>
-			</div>
-		{/if}
-	</div>
-	{#if footer}
-		{@render footer()}
-	{:else}
-		<div
-			class="-my-1 block bg-gray-50 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
-		>
-			{#if data.length}
-				<button class="w-full" onclick={onClearNotifications}>
-					<div class="inline-flex items-center gap-2">
-						<iconify-icon icon="ic:round-close"></iconify-icon>
-						Clear all
-					</div>
-				</button>
-			{/if}
-		</div>
-	{/if}
-</Dropdown>
+
+
+<script lang="ts" generics="T extends NotificationItem">
+	import { Dropdown, DropdownItem } from '../dropdown/index.js';
+	import { Avatar } from '../avatar/index.js';
+	import { PageLoader, type NotificationItem, type NotificationListProps } from '../../index.js';
+	import { onDestroy, onMount } from 'svelte';
+
+	let {
+		open = $bindable(false),
+		onClearNotifications,
+		header,
+		busy = false,
+		data: initialData = [],
+		onclick,
+		footer,
+		read
+	}: NotificationListProps<T> = $props();
+
+	let data = $state(initialData);
+	let internalOpen = $state(false);
+
+	$effect(() => {
+		if (open !== undefined) {
+			internalOpen = open;
+		}
+	});
+
+	async function fetchData() {
+		if (!read) return;
+
+		try {
+			busy = true;
+			const result = await read();
+			data = result;
+		} finally {
+			busy = false;
+		}
+	}
+
+	$effect(() => {
+		if (internalOpen) {
+			data = [];
+			fetchData();
+		}
+	});
+
+	onMount(() => {
+		if (initialData && initialData.length > 0) {
+			data = initialData;
+		}
+	});
+
+	onDestroy(() => {
+		data = [];
+	});
+</script>
+
+<Dropdown
+	bind:isOpen={internalOpen}
+	class="w-full max-w-sm divide-gray-100 rounded shadow dark:divide-gray-700 dark:bg-gray-800"
+>
+	{#if header}
+		{@render header()}
+	{:else}
+		<div class="py-2 text-center font-bold">Notifications</div>
+	{/if}
+	<div
+		class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch flex max-h-80 flex-col divide-y overflow-y-auto"
+	>
+		{#if busy}
+			<div class="flex h-52 w-96 items-center justify-center">
+				<PageLoader size={40} />
+			</div>
+		{:else if data.length}
+			{#each data as item, index}
+				<DropdownItem class="flex w-full space-x-4" onclick={() => onclick?.(item)}>
+					<Avatar cornerStyle="rounded">
+						<iconify-icon icon={item.icon} style="font-size: 20px;"></iconify-icon>
+					</Avatar>
+					<div class="w-full pl-3 text-start">
+						<div class="mb-1.5 text-sm text-gray-500 dark:text-gray-400">
+							<span class="font-semibold text-gray-900 dark:text-white">{item.sender}</span>: "{item.content}"
+						</div>
+						<div class="flex items-center justify-between">
+							<div class="text-xs text-primary-600 dark:text-primary-500">{item.time}</div>
+							<div class="flex items-center gap-1">
+								{#if item.isRead}
+									<span class="text-xs font-light text-gray-400">Read</span>
+								{/if}
+								<iconify-icon
+									icon={item.isRead ? 'ri:check-double-line' : 'uim:check'}
+									class={item.isRead ? 'text-blue-700' : 'text-gray-500'}
+									style="font-size: 18px;"
+								></iconify-icon>
+							</div>
+						</div>
+					</div>
+				</DropdownItem>
+			{/each}
+		{:else}
+			<div class="flex h-32 w-80 items-center justify-center space-x-4">
+				<p>No Notifications</p>
+			</div>
+		{/if}
+	</div>
+	{#if footer}
+		{@render footer()}
+	{:else}
+		<div
+			class="-my-1 block bg-gray-50 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700"
+		>
+			{#if data.length}
+				<button class="w-full" onclick={onClearNotifications}>
+					<div class="inline-flex items-center gap-2">
+						<iconify-icon icon="ic:round-close"></iconify-icon>
+						Clear all
+					</div>
+				</button>
+			{/if}
+		</div>
+	{/if}
+</Dropdown>

package/dist/ui/pageLoader/PageLoader.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-	import type { PageLoaderProps } from '../../index.js';
-
-	let { size = 70, iconColor = 'text-blue-400' }: PageLoaderProps = $props();
-</script>
-
-<div class="grid h-full w-full items-center justify-center">
-	<iconify-icon class={iconColor} icon="svg-spinners:blocks-shuffle-3" style="font-size: {size}px;"
-	></iconify-icon>
-</div>
+<script lang="ts">
+	import type { PageLoaderProps } from '../../index.js';
+
+	let { size = 70, iconColor = 'text-blue-400' }: PageLoaderProps = $props();
+</script>
+
+<div class="grid h-full w-full items-center justify-center">
+	<iconify-icon class={iconColor} icon="svg-spinners:blocks-shuffle-3" style="font-size: {size}px;"
+	></iconify-icon>
+</div>

package/dist/ui/paginate/Paginate.svelte

@@ -1,96 +1,96 @@
-<script lang="ts">
-	import { Dropdown, type PaginateProps } from '../../index.js';
-
-	let {
-		currentPage,
-		hasNextPage,
-		hasPreviousPage,
-		onNextPage,
-		onPreviousPage,
-		refresh = null,
-		totalPages,
-		hiddenColumns = $bindable([]),
-		tableColumns = [],
-		textSmall = false,
-		hideLabel = true,
-		recordCount = 0
-	}: PaginateProps = $props();
-
-	// let hideState = tableColumns.map(x => )
-	let hideState = $state<Record<string, boolean>>({});
-	hiddenColumns.forEach((x) => (hideState[x] = true));
-	// $: hiddenColumns = Object.keys(hideState).filter((x) => hideState[x]);
-	// let hiddenColumns
-
-	let open = $state(false);
-</script>
-
-<div class:text-sm={textSmall} class="flex w-full items-center justify-between gap-2 text-gray-600">
-	<button
-		class=" items-center justify-center gap-1 p-2 text-sm font-semibold"
-		class:hidden={!totalPages}
-		class:flex={totalPages}
-		onclick={onPreviousPage}
-		disabled={!hasPreviousPage}
-		class:active={hasPreviousPage}
-		class:hover:bg-gray-200={hasPreviousPage}
-		class:rounded-md={hasPreviousPage}
-		class:text-gray-300={!hasPreviousPage}
-	>
-		<iconify-icon icon="material-symbols:arrow-back" style="font-size: 18px"></iconify-icon>
-		{#if !hideLabel}
-			<span>PREV</span>
-		{/if}
-	</button>
-	<div class="text-sm font-semibold">
-		{#if !hideLabel}
-			<span>Page</span>
-		{/if}
-		<span class:hidden={!totalPages} class:flex={totalPages}>{currentPage}/{totalPages}</span>
-	</div>
-	<span class:hidden={!recordCount} class:flex={recordCount}>({recordCount})</span>
-
-	<button
-		class="flex items-center justify-center gap-1 p-2 text-sm font-semibold"
-		class:hidden={!totalPages}
-		class:flex={totalPages}
-		onclick={onNextPage}
-		disabled={!hasNextPage}
-		class:active={hasNextPage}
-		class:hover:bg-gray-200={hasNextPage}
-		class:rounded-md={hasNextPage}
-		class:text-gray-300={!hasNextPage}
-	>
-		{#if !hideLabel}
-			<span>NEXT</span>
-		{/if}
-		<iconify-icon icon="material-symbols:arrow-forward" style="font-size: 18px"></iconify-icon>
-	</button>
-	<button
-		type="button"
-		aria-label="arrows-clockwise"
-		class="rotate-2 font-bold hover:text-gray-600"
-		class:hidden={!refresh}
-		onclick={refresh}
-	>
-		<iconify-icon icon="ph:arrows-clockwise" class="hover:animate-spin hover:text-gray-400"
-		></iconify-icon>
-	</button>
-	<div class:hidden={!tableColumns.length} class:flex={tableColumns}>
-		<button onclick={() => (open = !open)}>
-			<iconify-icon icon="ph:columns" class="text-red-500 hover:text-red-800"></iconify-icon>
-			<!-- <Tooltip>Toggle Columns</Tooltip> -->
-		</button>
-		<Dropdown
-			bind:isOpen={open}
-			class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2  scrolling-touch h-56 min-w-40 overflow-y-auto px-3 pb-3 text-sm"
-		>
-			{#each tableColumns as column}
-				<li class="flex w-full px-2 py-1.5 whitespace-nowrap">
-					<!-- <Toggle bind:checked={hideState[column.id]} class="cursor-pointer" /> -->
-					{column.header}
-				</li>
-			{/each}
-		</Dropdown>
-	</div>
-</div>
+<script lang="ts">
+	import { Dropdown, type PaginateProps } from '../../index.js';
+
+	let {
+		currentPage,
+		hasNextPage,
+		hasPreviousPage,
+		onNextPage,
+		onPreviousPage,
+		refresh = null,
+		totalPages,
+		hiddenColumns = $bindable([]),
+		tableColumns = [],
+		textSmall = false,
+		hideLabel = true,
+		recordCount = 0
+	}: PaginateProps = $props();
+
+	// let hideState = tableColumns.map(x => )
+	let hideState = $state<Record<string, boolean>>({});
+	hiddenColumns.forEach((x) => (hideState[x] = true));
+	// $: hiddenColumns = Object.keys(hideState).filter((x) => hideState[x]);
+	// let hiddenColumns
+
+	let open = $state(false);
+</script>
+
+<div class:text-sm={textSmall} class="flex w-full items-center justify-between gap-2 text-gray-600">
+	<button
+		class=" items-center justify-center gap-1 p-2 text-sm font-semibold"
+		class:hidden={!totalPages}
+		class:flex={totalPages}
+		onclick={onPreviousPage}
+		disabled={!hasPreviousPage}
+		class:active={hasPreviousPage}
+		class:hover:bg-gray-200={hasPreviousPage}
+		class:rounded-md={hasPreviousPage}
+		class:text-gray-300={!hasPreviousPage}
+	>
+		<iconify-icon icon="material-symbols:arrow-back" style="font-size: 18px"></iconify-icon>
+		{#if !hideLabel}
+			<span>PREV</span>
+		{/if}
+	</button>
+	<div class="text-sm font-semibold">
+		{#if !hideLabel}
+			<span>Page</span>
+		{/if}
+		<span class:hidden={!totalPages} class:flex={totalPages}>{currentPage}/{totalPages}</span>
+	</div>
+	<span class:hidden={!recordCount} class:flex={recordCount}>({recordCount})</span>
+
+	<button
+		class="flex items-center justify-center gap-1 p-2 text-sm font-semibold"
+		class:hidden={!totalPages}
+		class:flex={totalPages}
+		onclick={onNextPage}
+		disabled={!hasNextPage}
+		class:active={hasNextPage}
+		class:hover:bg-gray-200={hasNextPage}
+		class:rounded-md={hasNextPage}
+		class:text-gray-300={!hasNextPage}
+	>
+		{#if !hideLabel}
+			<span>NEXT</span>
+		{/if}
+		<iconify-icon icon="material-symbols:arrow-forward" style="font-size: 18px"></iconify-icon>
+	</button>
+	<button
+		type="button"
+		aria-label="arrows-clockwise"
+		class="rotate-2 font-bold hover:text-gray-600"
+		class:hidden={!refresh}
+		onclick={refresh}
+	>
+		<iconify-icon icon="ph:arrows-clockwise" class="hover:animate-spin hover:text-gray-400"
+		></iconify-icon>
+	</button>
+	<div class:hidden={!tableColumns.length} class:flex={tableColumns}>
+		<button onclick={() => (open = !open)}>
+			<iconify-icon icon="ph:columns" class="text-red-500 hover:text-red-800"></iconify-icon>
+			<!-- <Tooltip>Toggle Columns</Tooltip> -->
+		</button>
+		<Dropdown
+			bind:isOpen={open}
+			class="scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2  scrolling-touch h-56 min-w-40 overflow-y-auto px-3 pb-3 text-sm"
+		>
+			{#each tableColumns as column}
+				<li class="flex w-full px-2 py-1.5 whitespace-nowrap">
+					<!-- <Toggle bind:checked={hideState[column.id]} class="cursor-pointer" /> -->
+					{column.header}
+				</li>
+			{/each}
+		</Dropdown>
+	</div>
+</div>

package/dist/ui/tab/Tab.svelte

@@ -1,65 +1,65 @@
-<script lang="ts">
-	import { CloseButton, type TabProps } from '../../index.js';
-
-	let {
-		activeTab = $bindable(0),
-		tabs = [],
-		onTabChange,
-		onRemoveTab,
-		onTabAdd
-	}: TabProps = $props();
-
-	function changeTab(id: number | string) {
-		activeTab = id;
-		onTabChange?.(id);
-	}
-</script>
-
-<div class="relative flex h-full w-full flex-col">
-	<div class="mb-4 flex flex-wrap space-x-3 border-b-2">
-		{#each tabs as tab}
-			<button
-				class="rounded-t-md border-b-2 px-4 py-2"
-				class:bg-primary-500={activeTab === tab.id}
-				class:text-white={activeTab === tab.id}
-				class:text-gray-600={activeTab !== tab.id}
-				class:hover:bg-gray-100={activeTab !== tab.id}
-				class:border-transparent={activeTab !== tab.id}
-				class:border-white={activeTab === tab.id}
-				onclick={() => changeTab(tab.id)}
-			>
-				<div class="flex items-center gap-2">
-					<span class="text-sm">
-						{tab.title}
-					</span>
-					<iconify-icon icon={tab.icon} style="font-size: 15px;"></iconify-icon>
-					{#if tab.isClosable}
-						<CloseButton
-							size="sm"
-							class=" {activeTab === tab.id
-								? 'text-white hover:bg-white/20'
-								: 'text-gray-600 hover:bg-gray-200'}"
-							onclick={(e: any) => {
-								onRemoveTab?.({ tabId: tab.id });
-								e.stopPropagation();
-							}}
-						/>
-					{/if}
-				</div>
-			</button>
-		{/each}
-	</div>
-
-	<div class=" h-full w-full">
-		{#each tabs as tab (tab.id)}
-			<div class:hidden={activeTab !== tab.id} class="h-full w-full">
-				<!-- {@render tab.children({
-					...tab,
-					onTabAdd,
-					onRemoveTab
-				})} -->
-				<tab.children {...tab} {onTabAdd} {onRemoveTab} />
-			</div>
-		{/each}
-	</div>
-</div>
+<script lang="ts">
+	import { CloseButton, type TabProps } from '../../index.js';
+
+	let {
+		activeTab = $bindable(0),
+		tabs = [],
+		onTabChange,
+		onRemoveTab,
+		onTabAdd
+	}: TabProps = $props();
+
+	function changeTab(id: number | string) {
+		activeTab = id;
+		onTabChange?.(id);
+	}
+</script>
+
+<div class="relative flex h-full w-full flex-col">
+	<div class="mb-4 flex flex-wrap space-x-3 border-b-2">
+		{#each tabs as tab}
+			<button
+				class="rounded-t-md border-b-2 px-4 py-2"
+				class:bg-primary-500={activeTab === tab.id}
+				class:text-white={activeTab === tab.id}
+				class:text-gray-600={activeTab !== tab.id}
+				class:hover:bg-gray-100={activeTab !== tab.id}
+				class:border-transparent={activeTab !== tab.id}
+				class:border-white={activeTab === tab.id}
+				onclick={() => changeTab(tab.id)}
+			>
+				<div class="flex items-center gap-2">
+					<span class="text-sm">
+						{tab.title}
+					</span>
+					<iconify-icon icon={tab.icon} style="font-size: 15px;"></iconify-icon>
+					{#if tab.isClosable}
+						<CloseButton
+							size="sm"
+							class=" {activeTab === tab.id
+								? 'text-white hover:bg-white/20'
+								: 'text-gray-600 hover:bg-gray-200'}"
+							onclick={(e: any) => {
+								onRemoveTab?.({ tabId: tab.id });
+								e.stopPropagation();
+							}}
+						/>
+					{/if}
+				</div>
+			</button>
+		{/each}
+	</div>
+
+	<div class=" h-full w-full">
+		{#each tabs as tab (tab.id)}
+			<div class:hidden={activeTab !== tab.id} class="h-full w-full">
+				<!-- {@render tab.children({
+					...tab,
+					onTabAdd,
+					onRemoveTab
+				})} -->
+				<tab.children {...tab} {onTabAdd} {onRemoveTab} />
+			</div>
+		{/each}
+	</div>
+</div>