@rkosafo/cai.components 0.0.34 → 0.0.36

package/dist/forms/FormClEditor/ClEdito.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { IconifyIcon, key, Label } from '../../index.js';
+	import type { FormClEditorProps } from '../../types/index.js';
+	import Editor from 'cl-editor/src/Editor.svelte';
+	import { nanoid } from 'nanoid';
+	import { getContext, onMount } from 'svelte';
+
+	let {
+		name = '',
+		label = '',
+		required,
+		readonly,
+		contextKey = null,
+		type = 'text',
+		pattern = null,
+		placeholder,
+		value,
+		height,
+		...otherProps
+	}: FormClEditorProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
+	let editorValue = $derived($data[name] || value || '');
+	let id = nanoid();
+
+	function onChange({ detail: e }: CustomEvent) {
+		setData({ ...$data, [name]: e });
+	}
+
+	function onBlur({ detail: e }: CustomEvent) {
+		console.log({ e });
+		// setData({ ...$data, [name]: e });
+	}
+	// $effect(() => {
+	// 	if (value !== undefined && value !== $data[name]) {
+	// 		setData({ ...$data, [name]: value });
+	// 	}
+	// });
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Editor contentId={id} on:change={onChange} bind:html={editorValue} {height} />
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-9 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<IconifyIcon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			/>
+		</Label>
+	{/if}
+</div>

package/dist/forms/FormClEditor/ClEdito.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FormClEditorProps } from '../../types/index.js';
+declare const ClEdito: import("svelte").Component<FormClEditorProps, {}, "">;
+type ClEdito = ReturnType<typeof ClEdito>;
+export default ClEdito;

package/dist/forms/FormClEditor/index.d.ts

@@ -0,0 +1 @@
+export { default as FormClEditor } from './ClEdito.svelte';

package/dist/forms/FormClEditor/index.js

@@ -0,0 +1 @@
+export { default as FormClEditor } from './ClEdito.svelte';

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from './forms/FormSelect/index.js';
 export * from './forms/FormTextarea/index.js';
 export * from './forms/FormCheckbox/index.js';
 export * from './forms/FormRadio/index.js';
+export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './forms/FormSelect/index.js';
 export * from './forms/FormTextarea/index.js';
 export * from './forms/FormCheckbox/index.js';
 export * from './forms/FormRadio/index.js';
+export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';

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

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { cn } from '../../../utils/index.js';
 	import { page } from '$app/state';
-	import type { Snippet } from 'svelte';
-	import type { IMenuItem, TFSidebarProps } from '../../../index.js';
+	import { IconifyIcon, type IMenuItem, type TFSidebarProps } from '../../../index.js';
+	import { slide } from 'svelte/transition';
 
 	let {
 		homeUrl,
@@ -16,22 +16,113 @@
 	}: 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" href={item.path}>
-			<iconify-icon icon={item.icon}></iconify-icon>
-
-			<span class="text hidden md:block">{item.title}</span>
+		<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">
+	<a href={homeUrl} class="brand flex flex-col pt-4" onclick={() => handleMenuItemClick()}>
 		{#if logo}
 			{@render logo()}
 		{:else}
@@ -44,9 +135,13 @@
 	</a>
 	{#if menuItems.length > 0}
 		<ul class="side-menu top relative pt-4">
-			{#each menuItems as item}
+			{#each menuItems as item, index}
 				{@const active = isActiveFunction ? isActiveFunction(item) : activeUrl === item.path}
-				{@render menuItemSnippet(item, active)}
+				{#if item.items}
+					{@render nestedItemSnippet(item, index)}
+				{:else}
+					{@render menuItemSnippet(item, active)}
+				{/if}
 			{/each}
 		</ul>
 	{/if}

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

@@ -1,4 +1,4 @@
-import type { TFSidebarProps } from '../../../index.js';
+import { type TFSidebarProps } from '../../../index.js';
 declare const Sidebar: import("svelte").Component<TFSidebarProps, {}, "">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/types/index.d.ts

@@ -543,6 +543,9 @@ export interface FormTextareaProps extends Omit<TextareaProps, 'name'>, IFormPro
 }
 export interface FormRadioProps<T> extends Omit<RadioProps<T>, 'name'>, IFormProps {
 }
+export interface FormClEditorProps extends Omit<InputProps, 'name'>, IFormProps {
+    height?: string;
+}
 export interface FormCheckboxProps extends Omit<CheckboxProps, 'name'>, IFormProps {
     onChange?: (val: any) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.34",
+  "version": "0.0.36",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -54,6 +54,7 @@
     "@tiptap/extension-text-style": "^3.0.7",
     "@tiptap/pm": "^3.0.7",
     "@tiptap/starter-kit": "^3.0.7",
+    "cl-editor": "^2.3.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "felte": "^1.3.0",