@cloudparker/moldex.js 4.1.7 → 4.1.8

package/dist/views/core/button/components/switch/switch.svelte

@@ -0,0 +1,62 @@
+ 
+<script lang="ts">
+	import type { SwitchProps } from "../../types";
+
+	let {
+		id = '',
+		checked = false,
+		disabled = false,
+		className = '',
+		size = 'md',
+		onChange
+	}: SwitchProps = $props();
+
+	function toggle() {
+		if (disabled) return;
+		checked = !checked;
+		onChange?.(checked);
+	}
+
+	// Size mapping
+	let sizeClass = $derived.by(() => {
+		switch (size) {
+			case 'sm':
+				return {
+					wrapper: 'h-4 w-8',
+					circle: 'h-3 w-3 translate-x-1',
+					circleChecked: 'translate-x-5'
+				};
+			case 'lg':
+				return {
+					wrapper: 'h-8 w-16',
+					circle: 'h-6 w-6 translate-x-1',
+					circleChecked: 'translate-x-8'
+				};
+			case 'md':
+			default:
+				return {
+					wrapper: 'h-6 w-11',
+					circle: 'h-4 w-4 translate-x-1',
+					circleChecked: 'translate-x-6'
+				};
+		}
+	});
+</script>
+
+<button
+	{id}
+	type="button"
+	{disabled}
+	onclick={toggle}
+	aria-label="Switch"
+	class="relative inline-flex items-center rounded-full transition-colors duration-300
+		{checked ? 'bg-primary-600' : 'bg-neutral-300'} 
+		{disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'} 
+		{sizeClass.wrapper} {className}"
+>
+	<span
+		class="inline-block rounded-full bg-white shadow transform transition-transform duration-300
+			{sizeClass.circle} {checked ? sizeClass.circleChecked : ''}"
+	>
+	</span>
+</button>

package/dist/views/core/button/components/switch/switch.svelte.d.ts

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

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

@@ -0,0 +1,12 @@
+export * from './types';
+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 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 ButtonBack from './components/button-back/button-back.svelte';
+import ButtonSearch from './components/button-search/button-search.svelte';
+import ButtonMenu from './components/button-menu/button-menu.svelte';
+import Switch from './components/switch/switch.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, Switch };

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

@@ -0,0 +1,12 @@
+export * from './types';
+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 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 ButtonBack from './components/button-back/button-back.svelte';
+import ButtonSearch from './components/button-search/button-search.svelte';
+import ButtonMenu from './components/button-menu/button-menu.svelte';
+import Switch from './components/switch/switch.svelte';
+export { Button, ButtonBack, ButtonClose, ButtonCloseIcon, ButtonListItem, ButtonDropdown, ButtonOk, ButtonSearch, ButtonMenu, Switch };

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

@@ -0,0 +1,100 @@
+import type { Snippet } from "svelte";
+export type ButtonAppearance = 'none' | 'primary' | 'neutral' | 'border' | 'border-neutral' | 'border-primary';
+export type ButtonSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ButtonProps = {
+    title?: string;
+    id?: string;
+    type?: ButtonType;
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    form?: string | null;
+    className?: string;
+    iconPath?: string;
+    iconClassName?: string;
+    label?: string;
+    rightIconPath?: string;
+    rightIconClassName?: string;
+    spinner?: boolean;
+    disabled?: boolean;
+    spinnerClassName?: string;
+    onlySpinner?: boolean;
+    children?: Snippet;
+    hasRipple?: boolean;
+    rippleColor?: string | 'light' | 'dark';
+    url?: string;
+    target?: string;
+    hasOpenInNew?: boolean;
+    openInNewIconClassName?: string;
+    openInNewIcon?: string;
+    onClick?: (ev: MouseEvent) => void;
+    onDblClick?: (ev: MouseEvent) => void;
+    onContextMenu?: (ev: MouseEvent) => void;
+    onDrop?: (ev: DragEvent) => void;
+    onDragStart?: (ev: DragEvent) => void;
+    onDragEnd?: (ev: DragEvent) => void;
+    onDragEnter?: (ev: DragEvent) => void;
+    onDragLeave?: (ev: DragEvent) => void;
+    onDragOver?: (ev: DragEvent) => void;
+};
+export type ButtonListItemProps = {
+    appearance?: ButtonAppearance;
+    size?: ButtonSize;
+    index?: number;
+    id?: string;
+    className?: string;
+    checkboxIconPath?: string;
+    uncheckboxIconPath?: string;
+    checkboxIconClassName?: string;
+    uncheckboxIconClassName?: string;
+    hasIcon?: boolean;
+    iconClassName?: string;
+    hasImg?: boolean;
+    imgClassName?: string;
+    hasArrow?: boolean;
+    arrowIconPath?: string;
+    arrowClassName?: string;
+    title?: string;
+    subtitle?: string;
+    titleClassName?: string;
+    subtitleClassName?: string;
+    url?: string;
+    disabled?: boolean;
+    iconPath?: string;
+    isCircularIcon?: boolean;
+    circularIconClassName?: string;
+    imgSrc?: string;
+    hasCheckbox?: boolean;
+    checkboxClassName?: string;
+    isChecked?: boolean;
+    hasMenu?: boolean;
+    menus?: Menu[] | string[];
+    menuIconPath?: string;
+    menuIconClassName?: string;
+    menuButtonClassName?: string;
+    menuButtonLabel?: string;
+    hasDivider?: boolean;
+    dividerClassName?: string;
+    onMenu?: (ev: Event, menu: Menu | string) => void;
+    onClick?: (ev: MouseEvent) => void;
+    children?: Snippet;
+};
+export type Menu = {
+    _id?: string;
+    title?: string;
+    subtitle?: string;
+    hasIcon?: boolean;
+    iconPath?: string;
+    iconClassName?: string;
+    hasCheckbox?: boolean;
+    checkboxClassName?: string;
+    isChecked?: boolean;
+};
+export type SwitchProps = {
+    id?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    className?: string;
+    size?: 'sm' | 'md' | 'lg';
+    onChange?: (checked: boolean) => void;
+};

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

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

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

@@ -0,0 +1,47 @@
+<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>
+
+<div {id} class="{responsiveClassName} {className}">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>

package/dist/views/core/common/components/content-area/content-area.svelte.d.ts

@@ -0,0 +1,12 @@
+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';
+};
+declare const ContentArea: import("svelte").Component<PropsType, {}, "">;
+type ContentArea = ReturnType<typeof ContentArea>;
+export default ContentArea;

package/dist/views/core/common/components/loading/loading.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Spinner from '../../../spinner/components/spinner/spinner.svelte';
+
+	type Props = {
+		spinnerClassName?: string;
+		className?: string;
+	};
+
+	let { className = '', spinnerClassName = 'text-primary' }: Props = $props();
+</script>
+
+<div class="flex items-center justify-center p-6 {className}">
+	<Spinner className={spinnerClassName} />
+</div>

package/dist/views/core/common/components/loading/loading.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    spinnerClassName?: string;
+    className?: string;
+};
+declare const Loading: import("svelte").Component<Props, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/dist/views/core/common/components/virtual-scrolling/virtual-scrolling-list.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: any[];
+		itemHeight: number;
+		containerHeight: number;
+		itemSnippet: Snippet<[item: any, index: number]>;
+		buffer?: number;
+	};
+
+	let {
+		items = [],
+		itemHeight,
+		containerHeight,
+		buffer = 2,
+		itemSnippet,
+		...rest
+	}: Props = $props();
+
+	let scrollTop = $state(0);
+
+	let totalHeight = $derived.by(() => items.length * itemHeight);
+
+	let visibleStart = $derived.by(() => Math.max(Math.floor(scrollTop / itemHeight) - buffer, 0));
+	let visibleEnd = $derived.by(() =>
+		Math.min(Math.ceil((scrollTop + containerHeight) / itemHeight) + buffer, items.length)
+	);
+
+	let paddingTop = $derived.by(() => visibleStart * itemHeight);
+	let paddingBottom = $derived.by(() => (items.length - visibleEnd) * itemHeight);
+
+	let visibleItems = $derived.by(() => items.slice(visibleStart, visibleEnd));
+
+	function handleScroll(event: Event) {
+		scrollTop = (event.currentTarget as HTMLElement).scrollTop;
+	}
+</script>
+
+<div
+	{...rest}
+	class="virtual-list"
+	style="height: {containerHeight}px; overflow-y: auto; position: relative;"
+	onscroll={handleScroll}
+>
+	<div style="padding-top: {paddingTop}px; padding-bottom: {paddingBottom}px;">
+		{#each visibleItems as item, idx (visibleStart + idx)}
+			<div class="virtual-item" style="height: {itemHeight}px;">
+				{@render itemSnippet?.(item, visibleStart + idx)}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.virtual-item {
+		width: 100%;
+		box-sizing: border-box;
+	}
+</style>

package/dist/views/core/common/components/virtual-scrolling/virtual-scrolling-list.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    items: any[];
+    itemHeight: number;
+    containerHeight: number;
+    itemSnippet: Snippet<[item: any, index: number]>;
+    buffer?: number;
+};
+declare const VirtualScrollingList: import("svelte").Component<Props, {}, "">;
+type VirtualScrollingList = ReturnType<typeof VirtualScrollingList>;
+export default VirtualScrollingList;

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

@@ -0,0 +1,9 @@
+import ContentArea from './components/content-area/content-area.svelte'
+import Loading from './components/loading/loading.svelte';
+import VirtualScrolling from './components/virtual-scrolling/virtual-scrolling-list.svelte';
+
+export {
+    ContentArea,
+    Loading,
+    VirtualScrolling
+}

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import EasyCropperjs from '@cloudparker/easy-cropperjs-svelte';
+	import { OutputImageFormatEnum } from '../../../../../services/index.js';
+	import type { CropperDialogProps, DialogExports } from '../../types';
+
+	let {
+		outputWidth,
+		outputFormat = OutputImageFormatEnum.WEBP,
+		outputQuality = 0.8,
+		outputType = 'file',
+		inputImageFile,
+		outputAspectRatio,
+		className,
+		setOnOkClick,
+		setResult,
+		closeDialog,
+		setOnData,
+		...props
+	}: CropperDialogProps & DialogExports = $props();
+
+	let easyCropperjsRef: EasyCropperjs | null = $state(null);
+
+	setOnOkClick(async () => {
+		console.log('setOnOkClick', easyCropperjsRef);
+		if (easyCropperjsRef) {
+			let targetOutoutImageFormat: any = outputFormat.split('/')[1] || 'webp';
+			let res = await easyCropperjsRef.crop({
+				outputWidth,
+				outputFormat: targetOutoutImageFormat,
+				outputQuality,
+				outputType
+			});
+			console.log('res', res);
+		}
+	});
+
+	function handleCropped(result: any) {
+		console.log('handleCropped', result);
+		setResult(result);
+		closeDialog();
+	}
+</script>
+
+<div class="h-full w-full overflow-hidden {className}">
+	<EasyCropperjs
+		bind:this={easyCropperjsRef}
+		{inputImageFile}
+		onCrop={handleCropped}
+		{outputAspectRatio}
+	/>
+</div>

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

@@ -0,0 +1,5 @@
+import type { CropperDialogProps, DialogExports } from '../../types';
+type $$ComponentProps = CropperDialogProps & DialogExports;
+declare const CropperDialog: import("svelte").Component<$$ComponentProps, {}, "">;
+type CropperDialog = ReturnType<typeof CropperDialog>;
+export default CropperDialog;