@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/layout/ComponentCanvas/ComponentRenderer.svelte

@@ -1,85 +1,85 @@
-<script lang="ts" module>
-	let mappers: ((name: string) => ConstructorOfATypedSvelteComponent)[] = [];
-	function componentNameToType(name: string) {
-		for (let i = 0; i < mappers.length; i++) {
-			let cmp = mappers[i](name);
-			if (cmp != null) return cmp;
-		}
-		return null;
-	}
-
-	export function addMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
-		mappers = [f, ...mappers];
-	}
-
-	export function removeMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
-		mappers = mappers.filter((x) => x != f);
-	}
-</script>
-
-<script lang="ts">
-	import {
-		IconifyIcon,
-		type IComponentDescriptor,
-		type IDocumentRendererProps
-	} from '../../index.js';
-
-	let {
-		descriptor,
-		showTitle = true,
-		contextKey,
-		toggleCollapse,
-		close
-	}: IDocumentRendererProps = $props();
-
-	function decode(descriptor: IComponentDescriptor) {
-		return {
-			compoent: componentNameToType(descriptor.type),
-			props: descriptor.props || {}
-		};
-	}
-
-	let data = $derived(decode(descriptor));
-</script>
-
-{#if data.compoent}
-	<div class="flex-grow">
-		{#if descriptor.title && showTitle}
-			<div class="flex items-center justify-between border-b border-dotted pb-1">
-				<h3 class="font-bold text-teal-500">
-					{descriptor.title || ''}
-				</h3>
-				<div class="flex items-center gap-2">
-					<button
-						aria-label="collapse"
-						onclick={(_) => toggleCollapse(descriptor.id!)}
-						class="grid place-content-center rounded-full p-1 hover:bg-gray-200"
-						class:hidden={!descriptor.collapsible}
-					>
-						<IconifyIcon
-							icon={descriptor.collapsed
-								? 'iconamoon:arrow-down-2-duotone'
-								: 'iconamoon:arrow-up-2-duotone'}
-							style="font-size: 20px;"
-						/>
-					</button>
-					<button
-						aria-label="close"
-						onclick={(e) => close({ id: descriptor.id!, data: e.detail })}
-						class="grid place-content-center rounded-full p-1 hover:bg-red-200 hover:text-red-400"
-						class:hidden={!descriptor.closable}
-					>
-						<iconify-icon icon="ic:round-close" style="font-size: 20px;"></iconify-icon>
-					</button>
-				</div>
-			</div>
-		{/if}
-		<div class:hidden={descriptor.collapsed}>
-			<data.compoent
-				{...data.props}
-				{contextKey}
-				close={(e: any) => close({ id: descriptor.id!, data: e.detail })}
-			/>
-		</div>
-	</div>
-{/if}
+<script lang="ts" module>
+	let mappers: ((name: string) => ConstructorOfATypedSvelteComponent)[] = [];
+	function componentNameToType(name: string) {
+		for (let i = 0; i < mappers.length; i++) {
+			let cmp = mappers[i](name);
+			if (cmp != null) return cmp;
+		}
+		return null;
+	}
+
+	export function addMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
+		mappers = [f, ...mappers];
+	}
+
+	export function removeMapper(f: (name: string) => ConstructorOfATypedSvelteComponent) {
+		mappers = mappers.filter((x) => x != f);
+	}
+</script>
+
+<script lang="ts">
+	import {
+		IconifyIcon,
+		type IComponentDescriptor,
+		type IDocumentRendererProps
+	} from '../../index.js';
+
+	let {
+		descriptor,
+		showTitle = true,
+		contextKey,
+		toggleCollapse,
+		close
+	}: IDocumentRendererProps = $props();
+
+	function decode(descriptor: IComponentDescriptor) {
+		return {
+			compoent: componentNameToType(descriptor.type),
+			props: descriptor.props || {}
+		};
+	}
+
+	let data = $derived(decode(descriptor));
+</script>
+
+{#if data.compoent}
+	<div class="flex-grow">
+		{#if descriptor.title && showTitle}
+			<div class="flex items-center justify-between border-b border-dotted pb-1">
+				<h3 class="font-bold text-teal-500">
+					{descriptor.title || ''}
+				</h3>
+				<div class="flex items-center gap-2">
+					<button
+						aria-label="collapse"
+						onclick={(_) => toggleCollapse(descriptor.id!)}
+						class="grid place-content-center rounded-full p-1 hover:bg-gray-200"
+						class:hidden={!descriptor.collapsible}
+					>
+						<IconifyIcon
+							icon={descriptor.collapsed
+								? 'iconamoon:arrow-down-2-duotone'
+								: 'iconamoon:arrow-up-2-duotone'}
+							style="font-size: 20px;"
+						/>
+					</button>
+					<button
+						aria-label="close"
+						onclick={(e) => close({ id: descriptor.id!, data: e.detail })}
+						class="grid place-content-center rounded-full p-1 hover:bg-red-200 hover:text-red-400"
+						class:hidden={!descriptor.closable}
+					>
+						<iconify-icon icon="ic:round-close" style="font-size: 20px;"></iconify-icon>
+					</button>
+				</div>
+			</div>
+		{/if}
+		<div class:hidden={descriptor.collapsed}>
+			<data.compoent
+				{...data.props}
+				{contextKey}
+				close={(e: any) => close({ id: descriptor.id!, data: e.detail })}
+			/>
+		</div>
+	</div>
+{/if}

package/dist/layout/TF/Content/Content.svelte

@@ -1,21 +1,21 @@
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface TFContentWrapperProps {
-		topBar?: Snippet;
-		children: any;
-	}
-</script>
-
-<script lang="ts">
-	let { topBar, children }: TFContentWrapperProps = $props();
-</script>
-
-<section id="tf-content" class="flex h-full w-full flex-col">
-	<div>
-		{@render topBar?.()}
-	</div>
-	<section class="flex h-full w-full flex-grow rounded-tl-lg bg-[#f4f3ef]">
-		{@render children()}
-	</section>
-</section>
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface TFContentWrapperProps {
+		topBar?: Snippet;
+		children: any;
+	}
+</script>
+
+<script lang="ts">
+	let { topBar, children }: TFContentWrapperProps = $props();
+</script>
+
+<section id="tf-content" class="flex h-full w-full flex-col">
+	<div>
+		{@render topBar?.()}
+	</div>
+	<section class="flex h-full w-full flex-grow rounded-tl-lg bg-[#f4f3ef]">
+		{@render children()}
+	</section>
+</section>

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

@@ -1,166 +1,166 @@
-<script lang="ts" module>
-	interface UserData {
-		firstName?: string;
-		lastName?: string;
-		fullName?: string;
-		role?: string;
-		username?: string;
-		initials?: string;
-	}
-
-	export interface TFHeaderProps {
-		user?: UserData;
-		hideSidebar?: boolean;
-		title?: string;
-		onsignout?: () => void;
-		notificationCount?: number;
-		showNotifications?: boolean;
-		// readNotifications?: () => Promise<any[]> | any[];
-		notificationList?: Snippet;
-		rightSideComponent?: Snippet;
-		leftSideComponent?: Snippet;
-	}
-</script>
-
-<script lang="ts">
-	import { Avatar } from '../../../ui/avatar/index.js';
-	import Button from '../../../ui/buttons/Button.svelte';
-	import { slide } from 'svelte/transition';
-
-	import { clickOutsideAction } from '../../../utils/svelte-legos.js';
-	import { DropdownDivider } from '../../../ui/dropdown/index.js';
-	import { Indicator } from '../../../ui/indicator/index.js';
-	// import NotificationList from '../../../ui/notificationList/NotificationList.svelte';
-	import type { Snippet } from 'svelte';
-	let {
-		user,
-		hideSidebar = $bindable(false),
-		title,
-		onsignout,
-		notificationCount = 0,
-		showNotifications = true,
-		notificationList,
-		rightSideComponent,
-		leftSideComponent
-	}: TFHeaderProps = $props();
-	let showUser = $state(false);
-	let openNotification = $state(false);
-</script>
-
-<nav class="flex items-center">
-	<button
-		class="grid place-content-center rounded-full p-2 hover:bg-gray-200"
-		onclick={() => (hideSidebar = !hideSidebar)}
-		aria-label="toggle"
-	>
-		<iconify-icon
-			icon={hideSidebar ? 'mdi:menu-close' : 'ic:round-menu-open'}
-			style="font-size: 20px;"
-		></iconify-icon>
-	</button>
-	<div class="hidden flex-grow items-center gap-4 sm:flex">
-		<div class="font-semibold text-teal-800">
-			{title}
-		</div>
-	</div>
-	{@render leftSideComponent?.()}
-	<div class="flex flex-grow sm:hidden"></div>
-	{@render rightSideComponent?.()}
-
-	{#if showNotifications}
-		<div
-			class="flex items-center gap-4"
-			use:clickOutsideAction
-			onclickoutside={() => (openNotification = false)}
-		>
-			<button
-				class="notifications relative grid cursor-pointer place-content-center hover:text-teal-400"
-				use:clickOutsideAction
-				onclick={() => (openNotification = !openNotification)}
-			>
-				<iconify-icon icon="charm:bell" class="blue-red-600 text-2xl"></iconify-icon>
-				<Indicator
-					color="red"
-					border
-					size="xl"
-					placement="top-right"
-					class="font- text-xs text-white {!notificationCount && 'hidden'}"
-					>{notificationCount && notificationCount > 10 ? '10+' : notificationCount}</Indicator
-				>
-			</button>
-
-			{@render notificationList?.()}
-		</div>
-	{/if}
-
-	<div class="flex items-center gap-4">
-		<div
-			class="user grid place-content-center"
-			use:clickOutsideAction
-			onclickoutside={() => (showUser = false)}
-		>
-			<Button
-				color="light"
-				pill
-				class="h-10 max-w-[150px] border-gray-300 !p-0 sm:!p-1"
-				ripple={false}
-				onclick={() => (showUser = !showUser)}
-			>
-				<Avatar class="h-9 w-9 bg-sky-300 text-sm sm:mr-2">
-					{user?.initials}
-				</Avatar>
-				<div class="hidden text-left text-xs sm:block sm:pr-2">
-					<div class="w-20 truncate">
-						<span class="font-semibold text-black">{user?.firstName}</span>
-					</div>
-					{#if user?.role}
-						<div class="w-20 truncate text-gray-500">
-							<span>{user.role}</span>
-						</div>
-					{:else}
-						<p class="flex w-20 truncate text-gray-500">{user?.username}</p>
-					{/if}
-				</div>
-			</Button>
-			{#if showUser}
-				<div class="relative">
-					<div
-						class="absolute right-0 z-10 mt-2 rounded-md bg-white
-					py-2 shadow-md shadow-gray-300
-					"
-						transition:slide
-						use:clickOutsideAction
-					>
-						<div class="space-y-2 px-4 py-2">
-							<span class="block truncate text-sm font-bold">{user?.fullName}</span>
-							<div class="block truncate text-sm">
-								<span class="font-light text-gray-500">Role:</span>
-								<span class="font-bold">{user?.role}</span>
-							</div>
-							<div class="block truncate text-sm">
-								<span class="font-light text-gray-500">Username:</span>
-								<span class="font-bold">{user?.username}</span>
-							</div>
-						</div>
-						<DropdownDivider />
-						<div class="grid">
-							<Button
-								ripple={false}
-								class="mx-0.5 flex justify-start  gap-1 border bg-red-50 text-red-600 hover:bg-red-100"
-								onclick={() => {
-									showUser = false;
-									onsignout?.();
-								}}
-							>
-								{#snippet leadingIcon()}
-									<iconify-icon icon="stash:signout" style="font-size: 20px;"></iconify-icon>
-								{/snippet}
-								Sign Out
-							</Button>
-						</div>
-					</div>
-				</div>
-			{/if}
-		</div>
-	</div>
-</nav>
+<script lang="ts" module>
+	interface UserData {
+		firstName?: string;
+		lastName?: string;
+		fullName?: string;
+		role?: string;
+		username?: string;
+		initials?: string;
+	}
+
+	export interface TFHeaderProps {
+		user?: UserData;
+		hideSidebar?: boolean;
+		title?: string;
+		onsignout?: () => void;
+		notificationCount?: number;
+		showNotifications?: boolean;
+		// readNotifications?: () => Promise<any[]> | any[];
+		notificationList?: Snippet;
+		rightSideComponent?: Snippet;
+		leftSideComponent?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	import { Avatar } from '../../../ui/avatar/index.js';
+	import Button from '../../../ui/buttons/Button.svelte';
+	import { slide } from 'svelte/transition';
+
+	import { clickOutsideAction } from '../../../utils/svelte-legos.js';
+	import { DropdownDivider } from '../../../ui/dropdown/index.js';
+	import { Indicator } from '../../../ui/indicator/index.js';
+	// import NotificationList from '../../../ui/notificationList/NotificationList.svelte';
+	import type { Snippet } from 'svelte';
+	let {
+		user,
+		hideSidebar = $bindable(false),
+		title,
+		onsignout,
+		notificationCount = 0,
+		showNotifications = true,
+		notificationList,
+		rightSideComponent,
+		leftSideComponent
+	}: TFHeaderProps = $props();
+	let showUser = $state(false);
+	let openNotification = $state(false);
+</script>
+
+<nav class="flex items-center">
+	<button
+		class="grid place-content-center rounded-full p-2 hover:bg-gray-200"
+		onclick={() => (hideSidebar = !hideSidebar)}
+		aria-label="toggle"
+	>
+		<iconify-icon
+			icon={hideSidebar ? 'mdi:menu-close' : 'ic:round-menu-open'}
+			style="font-size: 20px;"
+		></iconify-icon>
+	</button>
+	<div class="hidden flex-grow items-center gap-4 sm:flex">
+		<div class="font-semibold text-teal-800">
+			{title}
+		</div>
+	</div>
+	{@render leftSideComponent?.()}
+	<div class="flex flex-grow sm:hidden"></div>
+	{@render rightSideComponent?.()}
+
+	{#if showNotifications}
+		<div
+			class="flex items-center gap-4"
+			use:clickOutsideAction
+			onclickoutside={() => (openNotification = false)}
+		>
+			<button
+				class="notifications relative grid cursor-pointer place-content-center hover:text-teal-400"
+				use:clickOutsideAction
+				onclick={() => (openNotification = !openNotification)}
+			>
+				<iconify-icon icon="charm:bell" class="blue-red-600 text-2xl"></iconify-icon>
+				<Indicator
+					color="red"
+					border
+					size="xl"
+					placement="top-right"
+					class="font- text-xs text-white {!notificationCount && 'hidden'}"
+					>{notificationCount && notificationCount > 10 ? '10+' : notificationCount}</Indicator
+				>
+			</button>
+
+			{@render notificationList?.()}
+		</div>
+	{/if}
+
+	<div class="flex items-center gap-4">
+		<div
+			class="user grid place-content-center"
+			use:clickOutsideAction
+			onclickoutside={() => (showUser = false)}
+		>
+			<Button
+				color="light"
+				pill
+				class="h-10 max-w-[150px] border-gray-300 !p-0 sm:!p-1"
+				ripple={false}
+				onclick={() => (showUser = !showUser)}
+			>
+				<Avatar class="h-9 w-9 bg-sky-300 text-sm sm:mr-2">
+					{user?.initials}
+				</Avatar>
+				<div class="hidden text-left text-xs sm:block sm:pr-2">
+					<div class="w-20 truncate">
+						<span class="font-semibold text-black">{user?.firstName}</span>
+					</div>
+					{#if user?.role}
+						<div class="w-20 truncate text-gray-500">
+							<span>{user.role}</span>
+						</div>
+					{:else}
+						<p class="flex w-20 truncate text-gray-500">{user?.username}</p>
+					{/if}
+				</div>
+			</Button>
+			{#if showUser}
+				<div class="relative">
+					<div
+						class="absolute right-0 z-10 mt-2 rounded-md bg-white
+					py-2 shadow-md shadow-gray-300
+					"
+						transition:slide
+						use:clickOutsideAction
+					>
+						<div class="space-y-2 px-4 py-2">
+							<span class="block truncate text-sm font-bold">{user?.fullName}</span>
+							<div class="block truncate text-sm">
+								<span class="font-light text-gray-500">Role:</span>
+								<span class="font-bold">{user?.role}</span>
+							</div>
+							<div class="block truncate text-sm">
+								<span class="font-light text-gray-500">Username:</span>
+								<span class="font-bold">{user?.username}</span>
+							</div>
+						</div>
+						<DropdownDivider />
+						<div class="grid">
+							<Button
+								ripple={false}
+								class="mx-0.5 flex justify-start  gap-1 border bg-red-50 text-red-600 hover:bg-red-100"
+								onclick={() => {
+									showUser = false;
+									onsignout?.();
+								}}
+							>
+								{#snippet leadingIcon()}
+									<iconify-icon icon="stash:signout" style="font-size: 20px;"></iconify-icon>
+								{/snippet}
+								Sign Out
+							</Button>
+						</div>
+					</div>
+				</div>
+			{/if}
+		</div>
+	</div>
+</nav>