@cloudparker/moldex.js 0.0.65 → 0.0.67

package/dist/views/core/button/components/button-menu/button-menu.svelte

@@ -1,242 +1,79 @@
-<script lang="ts" module>
-	export type ButtonMenuProps = {
-		innerClassName?: string;
-		backgropClassName?: string;
-		buttonSnippet?: Snippet;
-		checkClassName?: string;
-		checkIconClassName?: string;
-		checkIconPath?: string;
-		children?: Snippet;
-		className?: string;
-		containerClassName?: string;
-		disabled?: boolean | undefined | null;
-		dividerClassName?: string;
-		dropdownClassName?: string;
-		dropdownCloseClassName?: string;
-		dropdownOpenClassName?: string;
-		dropdownStyle?: string;
-		dropIconClassName?: string;
-		dropIconPath?: string;
-		hasCheckbox?: boolean;
-		id?: string;
-		imgAlt?: string;
-		imgClassName?: string;
-		imgSrc?: string;
-		leftIconClassName?: string;
-		leftIconPath?: string;
-		listIconClassName?: string;
-		listImgClassName?: string;
-		listSubtitleClassName?: string;
-		listTitleClassName?: string;
-		menuItemClassName?: string;
-		menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
-		menuItemSnippet?: Snippet<[ListItemType, number]>;
-		menus?: string[] | ListItemType[];
-		onMenu?: (ev: MouseEvent, menu: string | ListItemType, index?: number) => void;
-		rightIconClassName?: string;
-		rightIconPath?: string;
-		screenOnlyDesc?: string;
+<script lang="ts" module></script>
 
-		title?: string | any;
-		titleClassName?: string;
-		uncheckIconClassName?: string;
-		uncheckIconPath?: string;
-	};
+<script lang="ts">import { mdiDotsHorizontal } from "../../../../..";
+import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import ButtonListItem from "../button-list-item/button-list-item.svelte";
+let {
+  label,
+  className,
+  appearance,
+  size,
+  children,
+  iconPath = mdiDotsHorizontal,
+  iconClassName,
+  menus,
+  onMenu,
+  dropdownClassName,
+  menuIconClassName
+} = $props();
+let buttonDropdownRef;
+let items = $derived.by(() => {
+  if (menus && typeof menus[0] == "string") {
+    let array = menus.map((name) => {
+      return {
+        _id: name,
+        title: name
+      };
+    });
+    return array;
+  }
+  return menus || [];
+});
+function handleItemClick(ev, menuItem, index) {
+  let menu = (menus || [])[index];
+  if (menu) {
+    onMenu && onMenu(ev, menu);
+    buttonDropdownRef && buttonDropdownRef.toggleDropdown(ev);
+  }
+}
 </script>
 
-<script lang="ts">
-	import '../../../../../tailwind.css';
-
-	import { ripple } from '../../../../../actions/ripple.js';
-
-	import {
-		Icon,
-		mdiCheckCircle,
-		mdiCheckCircleOutline,
-		mdiChevronDown
-	} from '../../../icon';
-	import type { Snippet } from 'svelte';
-	import type { ListItemType } from '../button-list-item/button-list-item.svelte';
-	import ButtonListItem from '../button-list-item/button-list-item.svelte';
-	import Button from '../button/button.svelte';
-	import { stopPropagation } from 'svelte/legacy';
-
-	class MenuStateEnum {
-		static OPENED = 'OPENED';
-		static CLOSED = 'CLOSED';
-	}
-
-	let {
-		backgropClassName = '',
-		buttonSnippet,
-		checkClassName = '',
-		checkIconClassName = '',
-		checkIconPath = mdiCheckCircle,
-		children,
-		className = '',
-		innerClassName = '',
-		containerClassName = '',
-		dividerClassName = '',
-		dropdownClassName = '',
-		dropdownCloseClassName = '',
-		dropdownOpenClassName = '',
-		dropdownStyle = '',
-		dropIconClassName = '',
-		dropIconPath = mdiChevronDown,
-		hasCheckbox = false,
-		id = 'menu',
-		imgAlt = 'Menu',
-		imgClassName = '',
-		imgSrc = '',
-		leftIconClassName = '',
-		leftIconPath = '',
-		listIconClassName = '',
-		listImgClassName = '',
-		listSubtitleClassName = '',
-		listTitleClassName = '',
-		menuItemClassName = '',
-		menuItemInnerSnippet,
-		menuItemSnippet,
-		menus = [],
-		onMenu = (ev: MouseEvent, menu: string | ListItemType, index?: number) => {},
-		rightIconClassName = '',
-		rightIconPath = '',
-		screenOnlyDesc = 'Menu',
-
-		title = '',
-		titleClassName = '',
-		uncheckIconClassName = '',
-		uncheckIconPath = mdiCheckCircleOutline
-	}: ButtonMenuProps = $props();
-
-	let expanded = $state(false);
-	let dropdownState: MenuStateEnum = $state(MenuStateEnum.CLOSED);
-
-	let selectedMenu: ListItemType | null | undefined = $state(null);
-
-	let options: ListItemType[] = $derived.by(() => {
-		if (menus?.length) {
-			let item = menus[0];
-			if (typeof item == 'string') {
-				return menus.map((str) => {
-					if (str == '-' || str == '') {
-						return { divider: true } as ListItemType;
-					} else {
-						return { title: str } as ListItemType;
-					}
-				});
-			} else {
-				return [...menus] as ListItemType[];
-			}
-		}
-		return [];
-	});
-
-	function handleToggleDropdown(ev: MouseEvent) {
-		ev && ev.stopPropagation();
-		if (dropdownState == MenuStateEnum.CLOSED) {
-			dropdownState = MenuStateEnum.OPENED;
-		} else {
-			dropdownState = MenuStateEnum.CLOSED;
-		}
-	}
-
-	function handlemenuItemClick(ev: MouseEvent, menu: ListItemType, index: number) {
-		handleToggleDropdown(ev);
-		if (onMenu) {
-			let item = menus[index];
-
-			if (item) {
-				onMenu(ev, item, index);
-			}
-			selectedMenu = menu;
-		}
-	}
-</script>
-
-<div class="relative min-h-max {containerClassName}">
-	<Button
-		type="button"
-		className="flex items-center justify-center flex-nowrap text-start {className}"
-		{id}
-		onClick={handleToggleDropdown}
-	>
-		<span class="sr-only">{screenOnlyDesc}</span>
-		<div class="flex items-center flex-nowrap {innerClassName}">
-			{#if buttonSnippet}
-				{@render buttonSnippet()}
+{#snippet dropdownSearch()}
+	<div class="py-2">
+		{#each items as item, index}
+			{#if item.title == '-'}
+				<hr />
 			{:else}
-				{#if imgSrc}
-					<img class="h-8 w-8 rounded-full bg-gray-50 {imgClassName}" src={imgSrc} alt={imgAlt} />
-				{/if}
-				{#if leftIconPath}
-					<Icon path={leftIconPath} className={leftIconClassName} />
-				{/if}
-				{#if title}
-					<span class="text-nowrap {titleClassName}">
-						{@html title}
-					</span>
-				{/if}
-				{#if rightIconPath}
-					<Icon path={rightIconPath} className=" {rightIconClassName}" />
-				{/if}
-				{#if dropIconPath}
-					<Icon path={dropIconPath} className="w-5 h-5 text-gray-400 {dropIconClassName}" />
-				{/if}
+				<ButtonListItem
+					{...item}
+					className="hover:bg-base-50 "
+					iconClassName={menuIconClassName}
+					onClick={(ev) => handleItemClick(ev, item, index)}
+				/>
 			{/if}
+		{/each}
+	</div>
+{/snippet}
+
+<ButtonDropdown
+	bind:this={buttonDropdownRef}
+	dropdownSnippet={dropdownSearch}
+	{className}
+	{appearance}
+	{size}
+	{dropdownClassName}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{#if label}
+			<div>
+				{label || ''}
+			</div>
+		{/if}
+		<div>
+			<Icon path={iconPath} className={iconClassName} />
 		</div>
-	</Button>
-	{#if dropdownState == MenuStateEnum.OPENED}
-		<button
-			aria-label="backdrop"
-			type="button"
-			id="{id}-menu-backdrop"
-			class="cursor-auto fixed inset-0 z-10 {backgropClassName}"
-			use:ripple
-			onclick={handleToggleDropdown}
-			tabindex="-1"
-		></button>
 	{/if}
-	<div
-		class="absolute mt-1 z-10 min-w-40 max-h-1/2vh overflow-y-auto origin-top-right right-0 rounded-md bg-base-50 dark:bg-base-800 py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none transition ease-out duration-100 {dropdownClassName} {dropdownState ==
-		MenuStateEnum.CLOSED
-			? `invisible transform opacity-0 scale-95 ${dropdownOpenClassName}`
-			: `transform opacity-100 scale-100 ${dropdownCloseClassName}`}"
-		style={dropdownStyle}
-		role="menu"
-		aria-orientation="vertical"
-		aria-labelledby={id}
-		tabindex="-1"
-	>
-		{#if children}
-			{@render children()}
-		{:else}
-			{#each options as menu, index (menu.id || index)}
-				{#if menu?.divider}
-					<div class="border-t border-gray-200 dark:border-gray-700 {dividerClassName}"></div>
-				{:else if menuItemSnippet}
-					{@render menuItemSnippet(menu, index)}
-				{:else}
-					<ButtonListItem
-						item={menu}
-						{index}
-						{hasCheckbox}
-						{id}
-						className={menuItemClassName}
-						{uncheckIconPath}
-						{checkIconPath}
-						{checkIconClassName}
-						{uncheckIconClassName}
-						{checkClassName}
-						iconClassName={listIconClassName}
-						imgClassName={listImgClassName}
-						titleClassName={listTitleClassName}
-						subtitleClassName={listSubtitleClassName}
-						children={menuItemInnerSnippet}
-						onClick={handlemenuItemClick}
-					/>
-				{/if}
-			{/each}
-		{/if}
-	</div>
-</div>
+</ButtonDropdown>

package/dist/views/core/button/components/button-menu/button-menu.svelte.d.ts

@@ -1,48 +1,16 @@
-export type ButtonMenuProps = {
-    innerClassName?: string;
-    backgropClassName?: string;
-    buttonSnippet?: Snippet;
-    checkClassName?: string;
-    checkIconClassName?: string;
-    checkIconPath?: string;
-    children?: Snippet;
-    className?: string;
-    containerClassName?: string;
-    disabled?: boolean | undefined | null;
-    dividerClassName?: string;
-    dropdownClassName?: string;
-    dropdownCloseClassName?: string;
-    dropdownOpenClassName?: string;
-    dropdownStyle?: string;
-    dropIconClassName?: string;
-    dropIconPath?: string;
+export type Menu = {
+    _id?: string;
+    title?: string;
+    subtitle?: string;
+    hasIcon?: boolean;
+    iconPath?: string;
+    iconClassName?: string;
     hasCheckbox?: boolean;
-    id?: string;
-    imgAlt?: string;
-    imgClassName?: string;
-    imgSrc?: string;
-    leftIconClassName?: string;
-    leftIconPath?: string;
-    listIconClassName?: string;
-    listImgClassName?: string;
-    listSubtitleClassName?: string;
-    listTitleClassName?: string;
-    menuItemClassName?: string;
-    menuItemInnerSnippet?: Snippet<[ListItemType, number]>;
-    menuItemSnippet?: Snippet<[ListItemType, number]>;
-    menus?: string[] | ListItemType[];
-    onMenu?: (ev: MouseEvent, menu: string | ListItemType, index?: number) => void;
-    rightIconClassName?: string;
-    rightIconPath?: string;
-    screenOnlyDesc?: string;
-    title?: string | any;
-    titleClassName?: string;
-    uncheckIconClassName?: string;
-    uncheckIconPath?: string;
+    checkboxClassName?: string;
+    isChecked?: boolean;
 };
-import '../../../../../tailwind.css';
+import { type ButtonAppearance, type ButtonSize } from '../../../../..';
 import type { Snippet } from 'svelte';
-import type { ListItemType } from '../button-list-item/button-list-item.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -56,7 +24,19 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<ButtonMenuProps, {
+declare const ButtonMenu: $$__sveltets_2_IsomorphicComponent<{
+    label?: string;
+    className?: string;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    children?: Snippet;
+    iconPath?: string;
+    iconClassName?: string;
+    menus?: string[] | Menu[];
+    onMenu?: (ev: MouseEvent, menu: string | Menu) => void;
+    dropdownClassName?: string;
+    menuIconClassName?: string;
+}, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type ButtonMenu = InstanceType<typeof ButtonMenu>;

package/dist/views/core/button/components/button-ok/button-ok.svelte

@@ -1,7 +1,5 @@
-<script lang="ts">
-	import Button, { type ButtonPropsType } from '../button/button.svelte';
-
-	let { className, ...props }: ButtonPropsType = $props();
+<script lang="ts">import Button, {} from "../button/button.svelte";
+let { className, ...props } = $props();
 </script>
 
 <Button {...props} className="bg-indigo-600 focus:bg-indigo-700 text-white p-2 px-4 {className}" />

package/dist/views/core/button/components/button-ok/button-ok.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type ButtonPropsType } from '../button/button.svelte';
+import { type ButtonProps } from '../button/button.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const ButtonOk: $$__sveltets_2_IsomorphicComponent<ButtonPropsType, {
+declare const ButtonOk: $$__sveltets_2_IsomorphicComponent<ButtonProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "">;
 type ButtonOk = InstanceType<typeof ButtonOk>;

package/dist/views/core/button/components/button-search/button-search.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">import {
+  mdiMagnify
+} from "../../../../..";
+import ButtonDropdown from "../button-dropdown/button-dropdown.svelte";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import SearchField from "../../../input/components/search-field/search-field.svelte";
+let {
+  searchClassName,
+  searchAppearance,
+  searchSize,
+  onSearch,
+  className,
+  appearance,
+  size,
+  children,
+  iconClassName,
+  dropdownClassName
+} = $props();
+</script>
+
+{#snippet dropdownSearch()}
+	<div class="p-4">
+		<SearchField
+			{onSearch}
+			autofocus
+			className="min-w-52 {searchClassName}"
+			appearance={searchAppearance}
+			size={searchSize}
+		/>
+	</div>
+{/snippet}
+
+<ButtonDropdown dropdownSnippet={dropdownSearch} {className} {appearance} {size} {dropdownClassName}>
+	{#if children}
+		{@render children()}
+	{:else}
+		<Icon path={mdiMagnify} className={iconClassName} />
+	{/if}
+</ButtonDropdown>

package/dist/views/core/button/components/button-search/button-search.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type ButtonAppearance, type ButtonSize, type InputFieldAppearance, type InputFieldSize } from '../../../../..';
+import type { Snippet } from 'svelte';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ButtonSearch: $$__sveltets_2_IsomorphicComponent<{
+    searchAppearance?: InputFieldAppearance;
+    searchClassName?: string;
+    searchSize?: InputFieldSize;
+    onSearch?: (searchText: string) => void;
+    className?: string;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    children?: Snippet;
+    iconClassName?: string;
+    dropdownClassName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "">;
+type ButtonSearch = InstanceType<typeof ButtonSearch>;
+export default ButtonSearch;

package/dist/views/core/button/index.d.ts

@@ -2,10 +2,13 @@ import ButtonBack from './components/button-back/button-back.svelte';
 import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
 import ButtonClose from './components/button-close/button-close.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
-import ButtonMenu from './components/button-menu/button-menu.svelte';
+import ButtonDropdown from './components/button-dropdown/button-dropdown.svelte';
 import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
-import type { ListItemType } from './components/button-list-item/button-list-item.svelte';
-import type { ButtonMenuProps } from './components/button-menu/button-menu.svelte';
-export type { ListItemType, ButtonMenuProps };
-export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };
+import ButtonSearch from './components/button-search/button-search.svelte';
+import ButtonMenu from './components/button-menu/button-menu.svelte';
+import type { ButtonListItemProps } from './components/button-list-item/button-list-item.svelte';
+import type { ButtonDropdownProps } from './components/button-dropdown/button-dropdown.svelte';
+import type { ButtonAppearance, ButtonProps, ButtonSize } from './components/button/button.svelte';
+export type { ButtonDropdownProps, ButtonListItemProps, ButtonAppearance, ButtonProps, ButtonSize };
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, };

package/dist/views/core/button/index.js

@@ -2,7 +2,9 @@ import ButtonBack from './components/button-back/button-back.svelte';
 import ButtonCloseIcon from './components/button-close-icon/button-close-icon.svelte';
 import ButtonClose from './components/button-close/button-close.svelte';
 import ButtonListItem from './components/button-list-item/button-list-item.svelte';
-import ButtonMenu from './components/button-menu/button-menu.svelte';
+import ButtonDropdown from './components/button-dropdown/button-dropdown.svelte';
 import ButtonOk from './components/button-ok/button-ok.svelte';
 import Button from './components/button/button.svelte';
-export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonMenu, ButtonOk };
+import ButtonSearch from './components/button-search/button-search.svelte';
+import ButtonMenu from './components/button-menu/button-menu.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, };

package/dist/views/core/content-area/components/content-area.svelte

@@ -1,43 +1,30 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	type BreakpointType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-	type PropsType = {
-		children?: Snippet;
-		className?: string;
-		id?: string;
-		responsiveBreakpoint?: BreakpointType;
-		sidebarPosition?: 'none' | 'left' | 'right';
-	};
-	let {
-		children,
-		className,
-		id,
-		responsiveBreakpoint = 'md',
-		sidebarPosition = 'none'
-	}: PropsType = $props();
-
-	let responsiveClassName = $derived.by(() => {
-		if (sidebarPosition === 'none') {
-			return '';
-		} else {
-			switch (responsiveBreakpoint) {
-				case 'xs':
-					return sidebarPosition === 'left' ? 'xs:pl-72' : 'xs:pr-72';
-				case 'sm':
-					return sidebarPosition === 'left' ? 'sm:pl-72' : 'sm:pr-72';
-				case 'md':
-					return sidebarPosition === 'left' ? 'md:pl-72' : 'md:pr-72';
-				case 'lg':
-					return sidebarPosition === 'left' ? 'lg:pl-72' : 'lg:pr-72';
-				case 'xl':
-					return sidebarPosition === 'left' ? 'xl:pl-72' : 'xl:pr-72';
-				case '2xl':
-					return sidebarPosition === 'left' ? '2xl:pl-72' : '2xl:pr-72';
-			}
-		}
-	});
+<script lang="ts">let {
+  children,
+  className,
+  id,
+  responsiveBreakpoint = "md",
+  sidebarPosition = "none"
+} = $props();
+let responsiveClassName = $derived.by(() => {
+  if (sidebarPosition === "none") {
+    return "";
+  } else {
+    switch (responsiveBreakpoint) {
+      case "xs":
+        return sidebarPosition === "left" ? "xs:pl-72" : "xs:pr-72";
+      case "sm":
+        return sidebarPosition === "left" ? "sm:pl-72" : "sm:pr-72";
+      case "md":
+        return sidebarPosition === "left" ? "md:pl-72" : "md:pr-72";
+      case "lg":
+        return sidebarPosition === "left" ? "lg:pl-72" : "lg:pr-72";
+      case "xl":
+        return sidebarPosition === "left" ? "xl:pl-72" : "xl:pr-72";
+      case "2xl":
+        return sidebarPosition === "left" ? "2xl:pl-72" : "2xl:pr-72";
+    }
+  }
+});
 </script>
 
 <div {id} class="{responsiveClassName} {className}">

package/dist/views/core/dialog/components/cropper-dialog/cropper-dialog.svelte

@@ -1,53 +1,37 @@
-<script module lang="ts">
-	export type CropperDialogPropsType = {
-		outputAspectRatio?: number;
-		outputWidth?: number;
-		outputFormat?: 'png' | 'jpeg' | 'webp';
-		outputQuality?: number;
-		outputType?: 'file' | 'base64';
-		inputImageFile?: File | null;
-		className?: string;
-	};
-</script>
-
-<script lang="ts">
-	import EasyCropperjs from '@cloudparker/easy-cropperjs-svelte';
-	import type { DialogExportsType } from '../dialog/dialog.svelte';
-
-	let {
-		outputWidth,
-		outputFormat = 'webp',
-		outputQuality = 0.8,
-		outputType = 'file',
-		inputImageFile,
-		className,
-		setOnOkClick,
-		setResult,
-		closeDialog,
-		setOnData,
-		...props
-	}: CropperDialogPropsType & DialogExportsType = $props();
-
-	let easyCropperjsRef: EasyCropperjs | null = $state(null);
-
-	setOnOkClick(async () => {
-		console.log('setOnOkClick', easyCropperjsRef);
-		if (easyCropperjsRef) {
-			let res = await easyCropperjsRef.crop({
-				outputWidth,
-				outputFormat,
-				outputQuality,
-				outputType
-			});
-			console.log('res', res);
-		}
-	});
+<script module lang="ts"></script>
 
-	function handleCropped(result: any) {
-		console.log('handleCropped', result);
-		setResult(result);
-		closeDialog();
-	}
+<script lang="ts">import EasyCropperjs from "@cloudparker/easy-cropperjs-svelte";
+let {
+  outputWidth,
+  outputFormat = "webp",
+  outputQuality = 0.8,
+  outputType = "file",
+  inputImageFile,
+  className,
+  setOnOkClick,
+  setResult,
+  closeDialog,
+  setOnData,
+  ...props
+} = $props();
+let easyCropperjsRef = $state(null);
+setOnOkClick(async () => {
+  console.log("setOnOkClick", easyCropperjsRef);
+  if (easyCropperjsRef) {
+    let res = await easyCropperjsRef.crop({
+      outputWidth,
+      outputFormat,
+      outputQuality,
+      outputType
+    });
+    console.log("res", res);
+  }
+});
+function handleCropped(result) {
+  console.log("handleCropped", result);
+  setResult(result);
+  closeDialog();
+}
 </script>
 
 <div class="h-full w-full overflow-hidden {className}">