@rkosafo/cai.components 0.0.66 → 0.0.67

package/dist/layout/mailing/MailingModule.svelte

@@ -0,0 +1,415 @@
+<script lang="ts">
+	import { PageLoader } from '../../ui/pageLoader/index.js';
+	import { scale, slide } from 'svelte/transition';
+	import {
+		MailSidebar,
+		MailToolBar,
+		type MailingModuleProps,
+		type MailMenu,
+		type MailingMessage,
+		type MailMarkReadToggleType,
+		type MailFavariteToggleType,
+		type MailPageInfo
+	} from './index.js';
+	import MailingMessageCard from './MailingMessageCard.svelte';
+	import { toast, type CrudResult, type TableFilter } from '../../index.js';
+	import { PageInfo } from '../../utils/paginate.svelte.js';
+	import AlertDialog from '../../ui/alertDialog/AlertDialog.svelte';
+	import MailingMessageViewer from './MailingMessageViewer.svelte';
+
+	let {
+		showSidePanel = true,
+		showPagination = true,
+		showComposeButton = true,
+		showSearch = true,
+		customFilterComponent,
+		showArchiveButton = true,
+		showDeleteButton = true,
+		showMarkReadButton = true,
+		showFavoriteButton = true,
+		showMarkAsSpamButton = true,
+		readInbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		readOutbox = $bindable((skip?: number, take?: number, filter?: TableFilter<any>) => {
+			return null;
+		}),
+		deleteEntry = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleArchieve = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleAsRead = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleFavourite = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggleSpam = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		toggelImportant = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		},
+		readAMessage = async (id: string | number) => {
+			return { success: false, data: null, error: null } as any;
+		}
+	}: MailingModuleProps = $props();
+
+	type ActiveBox = 'inbox' | 'outbox';
+
+	let activeBox = $state<ActiveBox>('inbox');
+	let pageInfo = new PageInfo();
+	let menutItems = $state([
+		{ icon: 'bx:bxs-inbox', title: 'Inbox', count: 3, path: '' },
+		{ icon: 'bx:bxs-send', title: 'Sent', count: 0, path: '' }
+	]);
+	let openDeleteAlert = $state(false);
+	let busy = $state(true);
+	let messages = $state<MailingMessage[]>([]);
+	let pageNumber = $derived(pageInfo.currentPage);
+	let query = $state('');
+	let selectedMessages = $state<number[]>([]);
+	let messageSelected = $state<number>(0);
+
+	function toggleSideBar(val: MailMenu) {
+		const { title } = val;
+		if (title === 'Inbox') activeBox = 'inbox';
+		else activeBox = 'outbox';
+	}
+
+	function setActiveMenu(val: MailMenu): boolean {
+		if (activeBox === 'inbox' && val.title === 'Inbox') return true;
+		else if (activeBox === 'outbox' && val.title === 'Sent') return true;
+		else return false;
+	}
+
+	async function fetchData(page: number, params: TableFilter, activeBox: ActiveBox = 'inbox') {
+		try {
+			let currentPage = 0;
+			if (params.search) {
+				pageInfo.setCurrentPage(1);
+				currentPage = pageInfo.currentPage;
+			} else {
+				currentPage = page || pageInfo.currentPage;
+			}
+			let newParams: any = {
+				page: currentPage,
+				pageSize: pageInfo.pageSize,
+				search: params.search ?? '',
+				filter: params.filter ?? {},
+				order: params.order ?? []
+			};
+			let read = activeBox === activeBox ? readInbox : readOutbox;
+			const ret = await read(newParams.page, newParams.pageSize, {
+				...params,
+				filter: {},
+				search: newParams.search ?? ''
+			});
+			if (!ret?.success) {
+				// showError(ret?.message || 'Failed to load data');
+				toast.error(ret?.message || 'Failed to load data');
+				return true;
+			}
+			const xs = ret.data;
+			// console.log({ xs });
+			pageInfo.totalItems = xs.totalCount;
+			pageInfo.setHasNextPage(xs.pageInfo.hasNextPage);
+			pageInfo.setHasPrevPage(xs.pageInfo.hasPreviousPage);
+			// tableData = xs.items;
+			messages = xs.items.map((a) => ({ ...a, isChecked: false }));
+		} catch (e: any) {
+			toast.error(e.message || e);
+		} finally {
+			busy = false;
+		}
+	}
+
+	function handleRefreshClick() {
+		busy = true;
+		fetchData(pageNumber, { search: query }, activeBox);
+	}
+
+	async function handleArchiveClick() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleArchieve(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) archived successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Archiving message(s)...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to archive messages'
+			}
+		);
+	}
+
+	async function handleMarkAsSpam() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleSpam(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as spam successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as spam...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to archive messages'
+			}
+		);
+	}
+
+	async function handleMarkAsRead(val: MailMarkReadToggleType) {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleAsRead(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'read' ? 'read' : 'unread'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'read' ? 'read' : 'unread'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message || `Failed to ${val === 'read' ? 'read' : 'unread'} messages`
+			}
+		);
+	}
+
+	async function handleMarkAsFavorite(val: MailFavariteToggleType) {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggleFavourite(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'favorite' ? 'favorite' : 'unfavorite'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'favorite' ? 'favorite' : 'unfavorite'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message || `Failed to ${val === 'favorite' ? 'favorite' : 'unfavorite'} messages`
+			}
+		);
+	}
+
+	async function handleMarkAsImportant(val: 'isImportant' | 'notImportant') {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await toggelImportant(msg);
+					results.push(res);
+				}
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) marked as ${val === 'isImportant' ? 'important' : 'not important'} successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Marking message(s) as ${val === 'isImportant' ? 'important' : 'not important'}...`,
+				success: (data: any) => data?.message,
+				error: (err: any) =>
+					err?.message ||
+					`Failed to ${val === 'isImportant' ? 'important' : 'not important'} messages`
+			}
+		);
+	}
+
+	async function handleDeleteMessages() {
+		if (selectedMessages.length === 0) return;
+
+		toast.promise(
+			(async () => {
+				const results = [];
+
+				for (const msg of selectedMessages) {
+					const res = await deleteEntry(msg);
+					results.push(res);
+				}
+
+				openDeleteAlert = false;
+				selectedMessages = [];
+				fetchData(pageNumber, { search: query }, activeBox);
+
+				return {
+					message: `${results.length} message(s) deleted successfully`,
+					results
+				};
+			})(),
+			{
+				loading: `Deleting message(s)...`,
+				success: (data: any) => data?.message,
+				error: (err: any) => err?.message || 'Failed to delete messages'
+			}
+		);
+	}
+
+	function handleItemChecked({ checked, id }: any) {
+		if (checked) {
+			selectedMessages = [...selectedMessages, id];
+		} else {
+			selectedMessages = selectedMessages.filter((a) => a !== id);
+		}
+	}
+
+	function handleMessageSelected(id: number) {
+		messageSelected = id;
+		selectedMessages = [id];
+	}
+
+	function updatePageInfo(val: MailPageInfo) {
+		console.log({ val });
+		pageInfo.totalItems = 1;
+		pageInfo.setHasNextPage(val.hasNextPage);
+		pageInfo.setHasPrevPage(val.hasPreviousPage);
+		pageInfo.setTotalPages(1);
+		pageInfo.setPageSize(1);
+	}
+
+	$effect(() => {
+		fetchData(pageNumber, { search: query }, activeBox);
+	});
+</script>
+
+<div class="h-full w-full">
+	<div class="flex h-full w-full gap-2">
+		<div class:hidden={!showSidePanel} class="loginbox h-full w-20 rounded-md bg-white">
+			<MailSidebar onClick={toggleSideBar} menus={menutItems} {setActiveMenu} />
+		</div>
+		<div class="flex w-full flex-grow flex-col gap-1">
+			<div class="loginbox h-14 rounded bg-white px-4">
+				<MailToolBar
+					isFavoriteActive={false}
+					isReadActive={false}
+					showBackButton={Boolean(messageSelected)}
+					{showPagination}
+					{showComposeButton}
+					{showSearch}
+					{showArchiveButton}
+					{showDeleteButton}
+					{showMarkReadButton}
+					{showFavoriteButton}
+					{showMarkAsSpamButton}
+					{customFilterComponent}
+					onRefreshClick={handleRefreshClick}
+					onArchiveClick={handleArchiveClick}
+					onMarkAsSpamClick={handleMarkAsSpam}
+					onToggleMarkReadClick={handleMarkAsRead}
+					onToggleFavoriteClick={handleMarkAsFavorite}
+					onBackClick={() => {
+						messageSelected = 0;
+						selectedMessages = [];
+					}}
+					onDeleteClick={() => {
+						if (selectedMessages.length === 0) return;
+						openDeleteAlert = true;
+					}}
+					selectedMails={selectedMessages}
+					pageInfo={{
+						currentPage: pageInfo.currentPage,
+						pageSize: pageInfo.pageSize,
+						totalCount: pageInfo.totalItems,
+						hasNextPage: pageInfo.hasNextPage,
+						hasPreviousPage: pageInfo.hasPrevPage
+					}}
+				/>
+			</div>
+
+			<div class="loginbox h-full w-full flex-grow rounded bg-gray-100 p-2">
+				{#if busy}
+					<PageLoader size={50} />
+				{:else if messageSelected}
+					<MailingMessageViewer
+						recordId={messageSelected}
+						readMessage={readAMessage}
+						{updatePageInfo}
+					/>
+				{:else if messages.length}
+					<div class="custom-scrollbar h-full w-full overflow-auto" in:slide>
+						{#each messages as message}
+							<MailingMessageCard
+								{...message}
+								onItemChecked={handleItemChecked}
+								toggleFavorited={() => {
+									selectedMessages = [message.id];
+									handleMarkAsFavorite(message.isStared ? 'unfavorite' : 'favorite');
+								}}
+								toggelImportant={() => {
+									selectedMessages = [message.id];
+									handleMarkAsImportant(message.isImportant ? 'notImportant' : 'isImportant');
+								}}
+								onItemSelected={handleMessageSelected}
+							/>
+						{/each}
+					</div>
+				{:else}
+					<div class="grid h-full w-full items-center justify-center p-20" in:scale>
+						<div class="rounded-[5px] bg-yellow-300 px-10 py-5 text-center">No Records Found</div>
+					</div>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<AlertDialog
+	open={openDeleteAlert}
+	message={`Are you sure you want to delete ${selectedMessages?.length > 1 ? 'these messages' : 'this message'}`}
+	onCancel={() => (openDeleteAlert = false)}
+	onYes={handleDeleteMessages}
+/>

package/dist/layout/mailing/MailingModule.svelte.d.ts

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

package/dist/layout/mailing/index.d.ts

@@ -0,0 +1,7 @@
+export * from './types.js';
+export { default as MailPaginator } from './MailPaginator.svelte';
+export { default as MailSidebar } from './MailSidebar.svelte';
+export { default as MailToolBar } from './MailToolBar.svelte';
+export { default as MailingModule } from './MailingModule.svelte';
+export { default as MailingHeader } from './MailingHeader.svelte';
+export { default as MailingMessageViewer } from './MailingMessageViewer.svelte';

package/dist/layout/mailing/index.js

@@ -0,0 +1,7 @@
+export * from './types.js';
+export { default as MailPaginator } from './MailPaginator.svelte';
+export { default as MailSidebar } from './MailSidebar.svelte';
+export { default as MailToolBar } from './MailToolBar.svelte';
+export { default as MailingModule } from './MailingModule.svelte';
+export { default as MailingHeader } from './MailingHeader.svelte';
+export { default as MailingMessageViewer } from './MailingMessageViewer.svelte';

package/dist/layout/mailing/types.d.ts

@@ -0,0 +1,126 @@
+import type { CrudResult, PaginatedResult, TableFilter } from '../../index.js';
+import type { Snippet } from 'svelte';
+export interface MailPageInfo {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    hasNextPage: boolean;
+    hasPreviousPage: boolean;
+}
+export interface MailPaginatorProps extends MailPageInfo {
+    onNextClick: () => void;
+    onPreviousClick: () => void;
+}
+export type MailFavariteToggleType = 'favorite' | 'unfavorite';
+export type MailMarkReadToggleType = 'read' | 'unread';
+export interface MailToolBarProps {
+    onBackClick: () => void;
+    onRefreshClick: () => void;
+    onComposeClick?: () => void;
+    selectedMails?: number[];
+    showComposeButton?: boolean;
+    showBackButton?: boolean;
+    pageInfo?: MailPageInfo;
+    showPagination?: boolean;
+    showSearch?: boolean;
+    customFilterComponent?: Snippet;
+    onsearchChange?: (searchTerm: string) => void;
+    onNextPageClick?: () => void;
+    onPrevPageClick?: () => void;
+    showArchiveButton?: boolean;
+    onArchiveClick?: () => void;
+    showDeleteButton?: boolean;
+    onDeleteClick?: () => void;
+    showMarkReadButton?: boolean;
+    onToggleMarkReadClick?: (val: MailMarkReadToggleType) => void;
+    showFavoriteButton?: boolean;
+    isReadActive?: boolean;
+    onToggleFavoriteClick?: (val: MailFavariteToggleType) => void;
+    showMarkAsSpamButton?: boolean;
+    onMarkAsSpamClick?: () => void;
+    isFavoriteActive?: boolean;
+}
+export interface MailMenu {
+    icon: string;
+    title: string;
+    count: number;
+    path: string;
+}
+export interface MailSidebar {
+    menus: MailMenu[];
+    setActiveMenu?: (val: MailMenu) => boolean;
+    onClick?: (val: MailMenu) => void;
+}
+export interface MailingModuleProps {
+    showSidePanel?: boolean;
+    showPagination?: boolean;
+    showComposeButton?: boolean;
+    showSearch?: boolean;
+    customFilterComponent?: Snippet;
+    showArchiveButton?: boolean;
+    showDeleteButton?: boolean;
+    showMarkReadButton?: boolean;
+    showFavoriteButton?: boolean;
+    showMarkAsSpamButton?: boolean;
+    readInbox: (skip?: number, take?: number, filter?: TableFilter<any>) => Promise<PaginatedResult<MailingMessage>> | PaginatedResult<MailingMessage> | null;
+    readOutbox?: (skip?: number, take?: number, filter?: TableFilter<any>) => Promise<PaginatedResult<MailingMessage>> | PaginatedResult<MailingMessage> | null;
+    toggleArchieve?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    toggleSpam?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    deleteEntry?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    toggleAsRead?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    toggleFavourite?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    toggelImportant?: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+    readAMessage: (id: string | number) => Promise<CrudResult<any>> | CrudResult<any> | null;
+}
+export interface MailingMessageCardChecked {
+    id: number;
+    checked: boolean;
+}
+export interface MailingMessage {
+    id: number;
+    sender: string;
+    subject: string;
+    date: Date;
+    message: string;
+    notes?: string;
+    isStared: boolean;
+    isImportant: boolean;
+    isRead: boolean;
+    isChecked?: boolean;
+    isSent?: boolean;
+    isHtml?: boolean;
+    refEntityId?: number;
+    receiver: string;
+    user?: {
+        id: number;
+        firstName: string;
+        surname: string;
+        staffNumber?: string;
+    };
+}
+export interface MailingMessageCardProps extends MailingMessage {
+    onItemSelected?: (id: number) => void;
+    onItemChecked?: (val: MailingMessageCardChecked) => void;
+    toggelImportant?: (id: number) => void;
+    toggleFavorited?: (id: number) => void;
+}
+export interface MailingMessageViewerProps {
+    readMessage: (id: number) => Promise<CrudResult<MailingMessage>> | CrudResult<MailingMessage> | null;
+    recordId: number;
+    updatePageInfo?: (val: MailPageInfo) => void;
+}
+export interface MailingHeaderData {
+    subject: string;
+    user: {
+        firstName: string;
+        surname: string;
+        staffNumber: string;
+        initials: string;
+    };
+    to: string;
+}
+export type MailingReplyType = 'reply' | 'reply-all' | 'forward';
+export interface MailingHeaderProps {
+    data: MailingHeaderData;
+    replyType: MailingReplyType | undefined;
+}

package/dist/layout/mailing/types.js

@@ -0,0 +1 @@
+export {};

package/dist/themes/themes.d.ts

@@ -16,3 +16,4 @@ export { radio, radioButton } from '../forms/radio/index.js';
 export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
+export { tooltip } from '../ui/tooltip/index.js';

package/dist/themes/themes.js

@@ -16,3 +16,4 @@ export { radio, radioButton } from '../forms/radio/index.js';
 export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
+export { tooltip } from '../ui/tooltip/index.js';

package/dist/types/index.d.ts

@@ -23,6 +23,7 @@ import type { CheckboxVariants } from '../forms/checkbox/theme.js';
 import type { AccordionItemVariants, AccordionVariants } from '../ui/accordion/theme.js';
 import type { TabsVaraints } from '../ui/tab/theme.js';
 import type { ACTION_BUTTON_KINDS } from '../ui/buttons/ActionButton.svelte';
+import type { TooltipVariants } from '../ui/tooltip/theme.js';
 export interface TFSidebarProps {
     homeUrl: string;
     logoUrl: string;
@@ -616,6 +617,7 @@ export interface PaginateProps {
     hiddenColumns?: string[];
     tableColumns?: any[];
     recordCount?: number;
+    pageSize?: number;
 }
 export interface PageInfo {
     hasNextPage: boolean;
@@ -877,3 +879,5 @@ export interface FormFileUploadProps {
     contextKey?: any;
     onChange?: (val: any) => void;
 }
+export interface TooltipProps extends TooltipVariants, PopperProps {
+}

package/dist/ui/pageLoader/PageLoader.svelte

@@ -1,10 +1,14 @@
 <script lang="ts">
 	import type { PageLoaderProps } from '../../index.js';
+	import IconifyIcon from '../icons/IconifyIcon.svelte';
 
 	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>
+	<IconifyIcon
+		class={iconColor}
+		icon="svg-spinners:blocks-shuffle-3"
+		style="font-size: {size}px;"
+	/>
 </div>

package/dist/ui/toast/Toast.svelte

@@ -18,7 +18,7 @@
 		iconColor?: string;
 		style?: any;
 		action?: {
-			label: string;
+			label: string | boolean;
 			onClick: () => void;
 			buttonStyle?: string;
 		};

package/dist/ui/toast/Toast.svelte.d.ts

@@ -10,7 +10,7 @@ export interface CustomToastOptions extends ToastOptions {
     iconColor?: string;
     style?: any;
     action?: {
-        label: string;
+        label: string | boolean;
         onClick: () => void;
         buttonStyle?: string;
     };

package/dist/ui/tooltip/Tooltip.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { Popper, type TooltipProps, type TriggeredToggleEvent } from '../../index.js';
+	import clsx from 'clsx';
+	import { tooltip } from './theme.js';
+
+	let {
+		type = 'dark',
+		color = undefined,
+		trigger = 'hover',
+		arrow = true,
+		children,
+		placement = 'top',
+		onbeforetoggle: _onbeforetoggle,
+		class: className,
+		isOpen = $bindable(false),
+		...restProps
+	}: TooltipProps = $props();
+
+	const base = $derived(tooltip({ color, type, class: clsx(className) }));
+	function onbeforetoggle(ev: TriggeredToggleEvent) {
+		// block all focusable elements inside the tooltip
+		if (ev.target instanceof HTMLElement) {
+			ev.target
+				.querySelectorAll(
+					'a, button, input, textarea, select, details, [tabindex], [contenteditable="true"]'
+				)
+				.forEach((element) => element.setAttribute('tabindex', '-1'));
+		}
+		// bubble event to parent
+		_onbeforetoggle?.(ev);
+	}
+</script>
+
+<Popper {...restProps} bind:isOpen {placement} {trigger} {arrow} class={base} {onbeforetoggle}>
+	<div class="pointer-events-none">{@render children()}</div>
+</Popper>
+
+<!--
+@component
+## Props
+@prop type = "dark"
+@prop color = undefined
+@prop trigger = "hover"
+@prop arrow = true
+@prop children
+@prop placement = "top"
+@prop onbeforetoggle: _onbeforetoggle
+@prop class: className
+@prop isOpen = $bindable(false)
+@prop ...restProps
+-->