@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/tab/theme.d.ts

@@ -0,0 +1,135 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type TabsVaraints = VariantProps<typeof tabs> & Classes<typeof tabs>;
+export type TabItemVariants = VariantProps<typeof tabItem> & Classes<typeof tabItem>;
+export declare const tabs: import("tailwind-variants").TVReturnType<{
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, undefined, {
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    tabStyle: {
+        full: {
+            active: string;
+            inactive: string;
+        };
+        pill: {
+            active: string;
+            inactive: string;
+        };
+        underline: {
+            base: string;
+            active: string;
+            inactive: string;
+        };
+        none: {
+            active: string;
+            inactive: string;
+        };
+    };
+    hasDivider: {
+        true: {};
+    };
+}, {
+    base: string;
+    content: string;
+    divider: string;
+    active: string;
+    inactive: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const tabItem: import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+}, undefined, {
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+}, import("tailwind-variants").TVReturnType<{
+    open: {
+        true: {
+            button: string;
+        };
+    };
+    disabled: {
+        true: {
+            button: string;
+        };
+    };
+}, {
+    base: string;
+    button: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/ui/tab/theme.js

@@ -0,0 +1,83 @@
+import { tv } from 'tailwind-variants';
+export const tabs = tv({
+    slots: {
+        base: 'flex space-x-2 rtl:space-x-reverse',
+        content: 'p-4 bg-gray-50 rounded-lg dark:bg-gray-800 mt-4',
+        divider: 'h-px bg-gray-200 dark:bg-gray-700',
+        active: 'p-4 text-primary-600 bg-gray-100 rounded-t-lg dark:bg-gray-800 dark:text-primary-500',
+        inactive: 'p-4 text-gray-500 rounded-t-lg hover:text-gray-600 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-300'
+    },
+    variants: {
+        tabStyle: {
+            full: {
+                active: 'p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-900 bg-gray-100 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:bg-gray-700 dark:text-white',
+                inactive: 'p-4 w-full rounded-none group-first:rounded-s-lg group-last:rounded-e-lg text-gray-500 dark:text-gray-400 bg-white hover:text-gray-700 hover:bg-gray-50 focus:ring-4 focus:ring-primary-300 focus:outline-hidden dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700'
+            },
+            pill: {
+                active: 'py-3 px-4 text-white bg-primary-600 rounded-lg',
+                inactive: 'py-3 px-4 text-gray-500 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white'
+            },
+            underline: {
+                base: '-mb-px',
+                active: 'p-4 text-primary-600 border-b-2 border-primary-600 dark:text-primary-500 dark:border-primary-500 bg-transparent',
+                inactive: 'p-4 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 text-gray-500 dark:text-gray-400 bg-transparent'
+            },
+            none: {
+                active: '',
+                inactive: ''
+            }
+        },
+        hasDivider: {
+            true: {}
+        }
+    },
+    compoundVariants: [
+        {
+            tabStyle: ['full', 'pill'],
+            hasDivider: true,
+            class: {
+                divider: 'hidden'
+            }
+        }
+    ],
+    defaultVariants: {
+        tabStyle: 'none',
+        hasDivider: true
+    }
+});
+export const tabItem = tv({
+    slots: {
+        base: 'group focus-within:z-10',
+        button: 'inline-block text-sm font-medium text-center disabled:cursor-not-allowed'
+    },
+    variants: {
+        open: {
+            true: {
+                button: 'active'
+            }
+        },
+        disabled: {
+            true: {
+                button: 'cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            open: true,
+            class: {
+                button: '' // We'll merge this with activeClasses from context
+            }
+        },
+        {
+            open: false,
+            class: {
+                button: '' // We'll merge this with inactiveClasses from context
+            }
+        }
+    ],
+    defaultVariants: {
+        open: false,
+        disabled: false
+    }
+});

package/dist/ui/table/Table.svelte

@@ -0,0 +1,385 @@
+<script lang="ts">
+	import { Dropdown, DropdownItem, type TableProps } from '../../index.js';
+	import { clickOutsideAction } from '../../utils/svelte-legos.js';
+	import { createTable, Render, Subscribe } from 'svelte-headless-table';
+	import {
+		addColumnOrder,
+		addHiddenColumns,
+		addResizedColumns,
+		addSelectedRows,
+		addSortBy
+	} from 'svelte-headless-table/plugins';
+	import { writable } from 'svelte/store';
+
+	let {
+		data = [],
+		headerColor = 'white',
+		height = 400,
+		bgWhite = false,
+		headerTextColor = 'black',
+		tableColumns = [],
+		showActions = false,
+		showCheckBox = false,
+		showViewDetails = true,
+		showEdit = false,
+		showMiniWidth = false,
+		rowClickable = false,
+		hideWhiteSpace = true,
+		hiddenColumns = $bindable([]),
+		sortedColumns = $bindable([]),
+		initialSortKeys = [],
+		actionLists = [],
+		showIndex = false,
+		selectedRows = $bindable([]),
+		selectAllChecked = $bindable(false),
+		showDelete = false,
+		handleCheckbox,
+		onActionClicked,
+		onDelete,
+		onEdit,
+		onView,
+		onRowClicked
+	}: TableProps = $props();
+
+	let dropdown = $state(-1);
+	let openDropDown = $state(false);
+	let tableData = writable(data);
+
+	$effect(() => {
+		tableData.set(data);
+	});
+
+	const table = createTable(tableData, {
+		sort: addSortBy({
+			disableMultiSort: false,
+			serverSide: true,
+			initialSortKeys: initialSortKeys
+		}),
+		colOrder: addColumnOrder(),
+		select: addSelectedRows(),
+		hideCols: addHiddenColumns({
+			initialHiddenColumnIds: hiddenColumns
+		}),
+		resize: addResizedColumns()
+	});
+	const columns = tableColumns.map((x: any) => table.column({ ...x }));
+	const { headerRows, flatColumns, rows, tableAttrs, tableBodyAttrs, pluginStates, pageRows } =
+		table.createViewModel(columns);
+	// $allColumns = flatColumns;
+	const { hiddenColumnIds } = pluginStates.hideCols;
+
+	$effect(() => hiddenColumnIds.set(hiddenColumns));
+
+	const { sortKeys } = pluginStates.sort;
+	$effect(() => {
+		sortedColumns = $sortKeys;
+	});
+
+	function handleRowCheckboxChange(checked: boolean, row: any) {
+		let updatedSelectedRows;
+
+		if (checked) {
+			updatedSelectedRows = [...selectedRows, row];
+		} else {
+			updatedSelectedRows = selectedRows.filter((item) => item !== row);
+		}
+
+		selectedRows = updatedSelectedRows;
+		if (handleCheckbox) handleCheckbox(updatedSelectedRows);
+	}
+
+	const handleSelectAllChange = () => {
+		if (selectAllChecked) {
+			selectedRows = [];
+			if (handleCheckbox) handleCheckbox([]);
+		} else {
+			const allRows = data.map((x) => x);
+			selectedRows = allRows;
+			if (handleCheckbox) handleCheckbox(allRows);
+		}
+		selectAllChecked = !selectAllChecked;
+	};
+
+	function toggleSubmenu(index: any) {
+		dropdown = dropdown === index ? -1 : index;
+	}
+
+	function closeDropDown() {
+		openDropDown = false;
+		dropdown = -1;
+	}
+	function getRow(row: any) {
+		const { original } = row;
+		return original;
+	}
+</script>
+
+<div class="h-full w-full flex-auto">
+	<div class="grid grid-cols-1 gap-2">
+		<div
+			class=" scrollbar-thumb-blue scrollbar-thumb-rounded scrollbar-track-blue-lighter scrollbar-w-2 scrolling-touch h-full w-full overflow-x-auto"
+		>
+			<table {...$tableAttrs} class="mb-6 w-full pb-6">
+				<thead
+					class=" sticky top-0"
+					class:bg-[#92cbdf]={headerColor === 'sky'}
+					class:bg-green-300={headerColor === 'green'}
+					class:bg-[#CF9B14]={headerColor === 'orange'}
+					class:bg-[#cbc3fa]={headerColor === 'purple'}
+					class:bg-blue-300={headerColor === 'blue'}
+					class:bg-white={headerColor === 'white'}
+					class:text-gray-700={headerTextColor === 'gray'}
+					class:text-white={headerTextColor === 'white'}
+					class:text-black={headerTextColor === 'black'}
+					class:border-b-2={headerColor === 'white'}
+				>
+					{#each $headerRows as headerRow (headerRow.id)}
+						<Subscribe rowAttrs={headerRow.attrs()}>
+							{#snippet children({ rowAttrs })}
+								<tr {...rowAttrs}>
+									{#if showCheckBox}
+										<th
+											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+										>
+											<input
+												class="cursor-pointer"
+												type="checkbox"
+												checked={selectAllChecked}
+												onchange={handleSelectAllChange}
+											/>
+										</th>
+									{/if}
+									{#if showActions}
+										<th
+											class="px-4 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+											>Actions</th
+										>
+									{/if}
+									{#if showIndex}
+										<th
+											class="px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+											>#</th
+										>
+									{/if}
+									{#each headerRow.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()} props={cell.props()}>
+											{#snippet children({ attrs, props })}
+												<!-- use:props.resize : apply to th -->
+												<th
+													{...attrs}
+													onclick={props.sort.toggle}
+													class="relative cursor-pointer px-6 py-2.5 text-left text-sm font-semibold whitespace-nowrap rtl:text-right"
+												>
+													<div class="flex items-center gap-1">
+														<Render of={cell.render()} />
+														{#if props.sort?.order === 'asc'}
+															<iconify-icon icon="ph:caret-up" class="text-gray-500"></iconify-icon>
+														{:else if props.sort?.order === 'desc'}
+															<iconify-icon icon="ph:caret-down" class="text-gray-500"
+															></iconify-icon>
+														{:else if props.sort?.disabled == false}
+															<iconify-icon icon="ph:caret-up-down" class="text-gray-500"
+															></iconify-icon>
+														{/if}
+														<!-- {#if !props.resize.disabled}
+															<div class="resizer" use:props.resize.drag />
+														{/if} -->
+													</div>
+												</th>
+											{/snippet}
+										</Subscribe>
+									{/each}
+								</tr>
+							{/snippet}
+						</Subscribe>
+					{/each}
+				</thead>
+				<tbody
+					{...$tableBodyAttrs}
+					class="divide-y"
+					class:bg-white={bgWhite}
+					use:clickOutsideAction
+					onclickoutside={closeDropDown}
+				>
+					{#each $pageRows as row, index (row.id)}
+						<Subscribe rowAttrs={row.attrs()}>
+							{#snippet children({ rowAttrs })}
+								<tr
+									{...rowAttrs}
+									class:bg-slate-100={index % 2 !== 0}
+									class:cursor-pointer={rowClickable}
+									class:hover:bg-gray-100={rowClickable}
+									class="dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
+									onclick={(e) => {
+										if (rowClickable) {
+											const target = e.target as HTMLElement | null;
+											if (
+												target &&
+												(target.localName === 'iconify-icon' || target.localName === 'button')
+											) {
+												return;
+											}
+											onRowClicked && onRowClicked(getRow(row));
+											closeDropDown();
+										}
+									}}
+								>
+									{#if showCheckBox}
+										<td class="px-6 py-2">
+											<input
+												type="checkbox"
+												class="cursor-pointer"
+												onchange={(e) => {
+													const checked = e?.target?.checked;
+													handleRowCheckboxChange(checked, getRow(row));
+												}}
+												checked={selectedRows.find((x) => x.id === getRow(row).id) ?? false}
+											/>
+										</td>
+									{/if}
+									{#if showActions}
+										<td class="px-5 py-2">
+											<!-- svelte-ignore a11y_consider_explicit_label -->
+											<button
+												class="dropdown-{row.id} grid h-7 w-7 place-content-center rounded-[5px] border border-gray-300 bg-gray-200 hover:bg-gray-300 dark:bg-gray-900 dark:hover:bg-gray-700"
+											>
+												<iconify-icon class="dots-menu dark:text-white" icon="tabler:dots-vertical"
+												></iconify-icon>
+											</button>
+											<!-- {#if dropdown === index && openDropDown} -->
+											<Dropdown
+												triggeredBy=".dropdown-{row.id}"
+												placement="right"
+												class="list-none"
+											>
+												{#each actionLists as { name, icon, otherClasses, visible }}
+													{#if visible}
+														{#if visible(getRow(row))}
+															<DropdownItem
+																data-dropdown-id={`dropdown-${row.id}`}
+																class="flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
+																onclick={(e) => {
+																	onActionClicked && onActionClicked({ name, row: getRow(row) });
+																	closeDropDown();
+																	e.stopPropagation();
+																}}
+															>
+																{#if icon}
+																	<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
+																{/if}
+																{name}
+															</DropdownItem>
+														{/if}
+													{:else}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class=" flex w-full items-center gap-1 px-4 py-2 text-sm whitespace-nowrap hover:bg-gray-100 {otherClasses}"
+															onclick={(e) => {
+																onActionClicked && onActionClicked({ name, row: getRow(row) });
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															{#if icon}
+																<iconify-icon {icon} style="font-size: 18px;"></iconify-icon>
+															{/if}
+															{name}
+														</DropdownItem>
+													{/if}
+												{:else}
+													{#if showViewDetails}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
+															onclick={(e) => {
+																onView && onView(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="ion:eye" style="font-size: 18px;"
+															></iconify-icon>View Details
+														</DropdownItem>
+													{/if}
+
+													{#if showEdit}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 hover:bg-gray-100 w-full text-sm"
+															onclick={(e) => {
+																onEdit && onEdit(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="ri:edit-2-fill" style="font-size: 18px;"
+															></iconify-icon>Edit Details
+														</DropdownItem>
+													{/if}
+													{#if showDelete}
+														<DropdownItem
+															data-dropdown-id={`dropdown-${row.id}`}
+															class="flex items-center px-4 py-2 gap-1 text-red-600 hover:bg-red-100 w-full text-sm"
+															onclick={(e) => {
+																onDelete && onDelete(getRow(row));
+																closeDropDown();
+																e.stopPropagation();
+															}}
+														>
+															<iconify-icon icon="mdi:trash" style="font-size: 18px;"
+															></iconify-icon>Delete Details
+														</DropdownItem>
+													{/if}
+												{/each}
+											</Dropdown>
+
+											<!-- {/if} -->
+										</td>
+									{/if}
+									{#if showIndex}
+										<td class="px-6 py-2">
+											{index + 1}
+										</td>
+									{/if}
+									{#each row.cells as cell (cell.id)}
+										<Subscribe attrs={cell.attrs()}>
+											{#snippet children({ attrs })}
+												<td
+													{...attrs}
+													class="px-6 py-2 text-left text-sm rtl:text-right"
+													class:whitespace-nowrap={hideWhiteSpace}
+												>
+													<Render of={cell.render()} />
+												</td>
+											{/snippet}
+										</Subscribe>
+									{/each}
+								</tr>
+							{/snippet}
+						</Subscribe>
+					{/each}
+				</tbody>
+			</table>
+			<div class="h-48"></div>
+
+			{#if !$pageRows.length}
+				<div class="flex h-72 w-full items-center justify-center">
+					<div class="rounded-md bg-yellow-200 px-6 py-4">No records found</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.resizer {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: -4px;
+		width: 8px;
+		background: #6194d9;
+		cursor: col-resize;
+		z-index: 1;
+	}
+</style>

package/dist/ui/table/Table.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type TableProps } from '../../index.js';
+declare const Table: import("svelte").Component<TableProps, {}, "hiddenColumns" | "sortedColumns" | "selectedRows" | "selectAllChecked">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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

@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte";

package/dist/ui/table/index.js

@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte";

package/dist/ui/tableLoader/TableLoader.svelte

@@ -0,0 +1,24 @@
+<script>
+	let { bodySize = 10, headerSize = 6 } = $props();
+</script>
+
+<table class="w-full animate-pulse">
+	<thead>
+		{#each Array(headerSize) as _}
+			<th class="whitespace-nowrap px-6 py-2">
+				<div class=" h-7 rounded-md bg-gray-300"></div>
+			</th>
+		{/each}
+	</thead>
+	<tbody class="divide-y border-t border-gray-400">
+		{#each Array(bodySize) as _}
+			<tr>
+				{#each Array(headerSize) as _}
+					<td class="whitespace-nowrap px-6 py-2">
+						<div class=" h-7 rounded-md bg-gray-300"></div>
+					</td>
+				{/each}
+			</tr>
+		{/each}
+	</tbody>
+</table>

package/dist/ui/tableLoader/TableLoader.svelte.d.ts

@@ -0,0 +1,13 @@
+export default TableLoader;
+type TableLoader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TableLoader: import("svelte").Component<{
+    bodySize?: number;
+    headerSize?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    bodySize?: number;
+    headerSize?: number;
+};

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

@@ -0,0 +1 @@
+export { default as TableLoader } from "./TableLoader.svelte";

package/dist/ui/tableLoader/index.js

@@ -0,0 +1 @@
+export { default as TableLoader } from "./TableLoader.svelte";