@cloudparker/moldex.js 4.1.3 → 4.1.5

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

@@ -4,7 +4,7 @@
 		| 'primary'
 		| 'base'
 		| 'border'
-		| 'border-base'
+		| 'border-neutral'
 		| 'border-primary';
 
 	export type ButtonSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -99,7 +99,7 @@
 			case 'primary':
 				return 'text-primary-100 hover:text-primary-50 bg-primary-600 hover:bg-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 disabled:bg-neutral-200 dark:disabled:bg-neutral-700 disabled:hover:bg-neutral-200 dark:disabled:hover:bg-neutral-700  ';
 			case 'border':
-			case 'border-base':
+			case 'border-neutral':
 				return 'border-2 text-neutral-800 dark:text-neutral-300 hover:text-neutral-900 disabled:text-neutral-400 dark:disabled:text-neutral-500 dark:hover:text-neutral-200 border-neutral-200 hover:border-neutral-300 dark:border-neutral-700 dark:hover:border-neutral-600 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-700  ';
 			case 'border-primary':
 				return 'border-2 text-primary hover:text-primary-500 disabled:text-neutral-400 dark:disabled:text-neutral-500 border-primary hover:border-primary-500 dark:border-primary-600 dark:hover:border-primary-500 dark:disabled:border-neutral-200 dark:disabled:hover:border-neutral-200 dark:disabled:border-neutral-700 dark:disabled:hover:border-neutral-700  ';

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

@@ -1,4 +1,4 @@
-export type ButtonAppearance = 'none' | 'primary' | 'base' | 'border' | 'border-base' | 'border-primary';
+export type ButtonAppearance = 'none' | 'primary' | 'base' | 'border' | 'border-neutral' | 'border-primary';
 export type ButtonSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type ButtonType = 'button' | 'submit' | 'reset';
 export type ButtonProps = {

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft } from '../../../icon';
+	import { isSmallScreen } from '../../../../../services/index.js';
+	import { mdiArrowLeft } from '../../../icon/index.js';
+
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
@@ -21,11 +22,7 @@
 		onClick
 	}: PropsType = $props();
 
-	let isMobileScreen = $state(false);
-
-	$effect(() => {
-		isMobileScreen = isSmallScreen();
-	});
+	let isMobileScreen = $derived(isSmallScreen() || false);
 </script>
 
 {#snippet button()}

package/dist/views/core/button/components/button-close-icon/button-close-icon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
-	import { isSmallScreen } from '../../../../../services';
-	import { mdiArrowLeft, mdiChevronRight, mdiClose } from '../../../icon';
+	import { isSmallScreen } from '../../../../../services/index.js';
+	import { mdiClose } from '../../../icon/index.js';
+
+ 
 	import Button from '../button/button.svelte';
 
 	type PropsType = {
@@ -22,11 +24,8 @@
 		onClick
 	}: PropsType = $props();
 
-	let isMobileScreen = $state(false);
+	let isMobileScreen = $state(isSmallScreen() || false);
 
-	$effect(() => {
-		isMobileScreen = isSmallScreen();
-	});
 </script>
 
 {#snippet button()}

package/dist/views/core/icon/components/icon/icon.svelte

@@ -19,11 +19,9 @@
 		sizeClassName = 'w-6 h-6'
 	}: IconPropsType = $props();
 
-	$effect(() => {
-		viewBox = viewBox || `0 0 ${size} ${size}`;
-	});
+	let viewBoxDerived = $derived(viewBox || `0 0 ${size} ${size}`);
 </script>
 
-<svg class="align-middle {sizeClassName} {className}" {viewBox} fill={color || fill}>
+<svg class="align-middle {sizeClassName} {className}" viewBox={viewBoxDerived} fill={color || fill}>
 	<path d={path} />
 </svg>

package/dist/views/core/input/components/color-field/color-field.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { colorToHex, isValidHexColor } from '../../../../../services';
-	import { mdiSquare } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+	import { colorToHex, isValidHexColor } from '../../../../../services/index.js';
+
+ 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiSquare } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -15,9 +17,41 @@
 	}: InputFieldProps & { value?: string } = $props();
 
 	let colorRef: HTMLInputElement;
-	let btnIconSizeClassName: string = $state('');
-	let btnRoundedClassName: string = $state('');
-	let colorValue: string = $state('#000000');
+
+	let btnIconSizeClassName: string = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
+
+	let btnRoundedClassName: string = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let colorValue: string = $derived.by(() => {
+		if (isValidHexColor(value)) {
+			colorValue = value;
+		}
+		return '#000000';
+	});
 
 	let inputRef: any | null = $state(null);
 
@@ -48,44 +82,18 @@
 
 	$effect(() => {
 		if (isValidHexColor(value)) {
-			colorValue = value;
 			if (colorRef) {
 				colorRef.value = colorToHex(value);
 			}
 		}
 	});
-
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
 </script>
 
 {#snippet colorButton()}
 	<button
 		id="btn-color-picker-{name || id}"
 		type="button"
-		class="px-2 h-full hover:bg-neutral-100 dark:hover:bg-neutral-900 focus:outline-primary {btnRoundedClassName}"
+		class="h-full px-2 hover:bg-neutral-100 focus:outline-primary dark:hover:bg-neutral-900 {btnRoundedClassName}"
 		use:ripple
 		onclick={handleColorBtnClick}
 	>

package/dist/views/core/input/components/date-field/date-field.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { dateFormat, toDate } from '../../../../../services';
+	import { dateFormat, toDate } from '../../../../../services/index.js';
+
+ 
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -7,15 +9,14 @@
 		...props
 	}: InputFieldProps & { value?: Date | string | number | null | undefined } = $props();
 
-	let _value: string | undefined = $state(undefined);
-
-	$effect(() => {
+	let _value: string | undefined = $derived.by(() => {
 		if (value) {
-			_value = dateFormat(toDate(value)!, 'YYYY-MM-DD') as string;
-			console.log('_value', _value);
+			return dateFormat(toDate(value)!, 'YYYY-MM-DD') as string;
 		}
 	});
 
+ 
+
 	let inputFieldRef: any | null = $state(null);
 
 	export function focus() {

package/dist/views/core/input/components/file-field/file-field.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { openFilePickerDialog } from '../../../../../services';
-	import { mdiAttachment } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+	import { openFilePickerDialog } from '../../../../../services/index.js';
+
+	 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiAttachment } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -19,8 +21,33 @@
 		value?: File | File[] | null;
 	} = $props();
 
-	let btnRoundedClassName = $state('');
-	let btnIconSizeClassName = $state('');
+	let btnRoundedClassName = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let btnIconSizeClassName = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
 	let fileNameDisplay = $state('');
 
 	let inputFieldRef: any | null = $state(null);
@@ -51,38 +78,13 @@
 			}
 		}
 	}
-
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
 </script>
 
 {#snippet fileButton()}
 	<button
 		id="btn-file-picker"
 		type="button"
-		class="px-3 h-full hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} "
+		class="h-full px-3 hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} "
 		use:ripple
 		onclick={handleFileAttachment}
 	>

package/dist/views/core/input/components/input-field/input-field.svelte

@@ -156,7 +156,7 @@
 		if (size) {
 			switch (size) {
 				case 'lg':
-					sizeClassName = 'p-4 text-base';
+					sizeClassName = 'p-4 text-neutral';
 					break;
 				case 'md':
 					sizeClassName = 'p-2.5 text-sm';
@@ -202,7 +202,7 @@
 			if (size) {
 				switch (size) {
 					case 'lg':
-						className = 'text-base';
+						className = 'text-neutral';
 						break;
 					case 'md':
 						className = 'text-sm';

package/dist/views/core/input/components/password-field/password-field.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon';
+	import { ripple } from '../../../../../actions/ripple.js';
+
+ 
 	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon/index.js';
 	import InputField, { type InputFieldProps } from '../input-field/input-field.svelte';
 
 	let {
@@ -19,8 +21,33 @@
 		iconClassName?: string;
 	} = $props();
 
-	let btnRoundedClassName = $state('');
-	let btnIconSizeClassName = $state('');
+	let btnRoundedClassName = $derived.by(() => {
+		if (!appearance || appearance == 'normal') {
+			return 'rounded-tr-lg rounded-br-lg';
+		}
+		return '';
+	});
+
+	let btnIconSizeClassName = $derived.by(() => {
+		let className = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					className = '!h-7 !w-7';
+					break;
+				case 'md':
+					className = '!h-6 !w-6';
+					break;
+				case 'sm':
+					className = '!h-5 !w-5';
+					break;
+				case 'xs':
+					className = '!h-4 !w-4';
+					break;
+			}
+		}
+		return className;
+	});
 
 	let inputFieldRef: any | null = $state(null);
 
@@ -44,37 +71,14 @@
 		}
 	}
 
-	$effect(() => {
-		if (size) {
-			switch (size) {
-				case 'lg':
-					btnIconSizeClassName = '!h-7 !w-7';
-					break;
-				case 'md':
-					btnIconSizeClassName = '!h-6 !w-6';
-					break;
-				case 'sm':
-					btnIconSizeClassName = '!h-5 !w-5';
-					break;
-				case 'xs':
-					btnIconSizeClassName = '!h-4 !w-4';
-					break;
-			}
-		}
-	});
-
-	$effect(() => {
-		if (!appearance || appearance == 'normal') {
-			btnRoundedClassName = 'rounded-tr-lg rounded-br-lg';
-		}
-	});
+ 
 </script>
 
 {#snippet showPasswordButton()}
 	<button
 		id="btn-eye-{name || id}"
 		type="button"
-		class="px-3 h-full hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		class="h-full px-3 hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
 		use:ripple
 		onclick={handleTogglePassword}
 	>

package/dist/views/core/input/components/phone-field/phone-field.svelte

@@ -156,7 +156,7 @@
 </script>
 
 {#snippet dialCodePickerItemTile(item: any, index: number)}
-	<div class="w-14 text-sm font-bold text-base">
+	<div class="w-14 text-sm font-bold text-neutral">
 		{item.dialCode}
 	</div>
 	<div class="flex-grow">

package/dist/views/core/input/components/range-field/range-field.svelte

@@ -32,23 +32,23 @@
 		onfocus
 	}: RangeFieldPropsType = $props();
 
-	let rangeSizeClassName = $state('');
-
-	$effect(() => {
+	let rangeSizeClassName = $derived.by(() => {
+		let className = '';
 		switch (size) {
 			case 'lg':
-				rangeSizeClassName = 'h-3 ';
+				className = 'h-3 ';
 				break;
 			case 'md':
-				rangeSizeClassName = 'h-2 ';
+				className = 'h-2 ';
 				break;
 			case 'sm':
-				rangeSizeClassName = 'h-1 ';
+				className = 'h-1 ';
 				break;
 			case 'xs':
-				rangeSizeClassName = 'h-2-px ';
+				className = 'h-2-px ';
 				break;
 		}
+		return className;
 	});
 
 	let inputRef: HTMLInputElement | null = $state(null);
@@ -72,7 +72,7 @@
 	{id}
 	{name}
 	type="range"
-	class="range-slider w-full bg-gray-200 appearance-none cursor-pointer dark:bg-gray-700 rounded-lg range-lg outline-none focus:outline-none {rangeSizeClassName} {className}"
+	class="range-slider range-lg w-full cursor-pointer appearance-none rounded-lg bg-gray-200 outline-none focus:outline-none dark:bg-gray-700 {rangeSizeClassName} {className}"
 	{min}
 	{max}
 	{step}

package/dist/views/core/no-data/components/no-data/no-data.svelte

@@ -29,11 +29,8 @@
 		right: 'flex-row-reverse'
 	};
 
-	let iconPlacementClassName: string = $state('');
-
-	$effect(() => {
-		iconPlacementClassName = iconPlacementClassNameMap[iconPlacement];
-	});
+	let iconPlacementClassName: string = $derived(iconPlacementClassNameMap[iconPlacement]);
+ 
 </script>
 
 <div

package/dist/views/core/progressbar/components/progressbar/progressbar.svelte

@@ -17,28 +17,23 @@
 		children
 	}: PropsType = $props();
 
-	let progressValue: number = $state(0);
-
-	$effect(() => {
-		if (!className) {
-			className = 'h-4';
-		}
-	});
-
-	$effect(() => {
+	let progressValue: number = $derived.by(() => {
+		let v = value;
 		if (value < 0) {
-			progressValue = 0;
+			v = 0;
 		} else if (value >= 100) {
-			progressValue = 100;
+			v = 100;
 		} else {
-			progressValue = value;
+			v = value;
 		}
+		return v;
 	});
+
 </script>
 
-<div class="w-full bg-gray-200 rounded-full progressbar-container {backgroundClassName}" style="">
+<div class="progressbar-container w-full rounded-full bg-gray-200 {backgroundClassName}" style="">
 	<div
-		class="bg-indigo-600 rounded-full transition-all ease-in-out text-center text-xs text-white progressbar {className}"
+		class="progressbar rounded-full bg-indigo-600 text-center text-xs text-white transition-all ease-in-out {className}"
 		style="--progressWidth:{progressValue}%;"
 	>
 		{#if children}

package/dist/views/core/screen-detector/components/screen-detector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { handleScreenSizeUpdate } from '../../../../services';
-	import { BROWSER } from 'esm-env';
+	import { handleScreenSizeUpdate } from '../../../../services/index.js';
+
+	import { onMount } from 'svelte';
 
 	let innerWidth: number = $state(0);
 
@@ -8,8 +9,8 @@
 		handleScreenSizeUpdate(size);
 	}
 
-	$effect(() => {
-		BROWSER && screenSizeChanged(innerWidth);
+	onMount(() => {
+		screenSizeChanged(innerWidth);
 	});
 </script>
 

package/dist/views/core/text/components/text-date/text-date.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
-	import { dateFormat, dateToAgo, toDate } from '../../../../../services';
+	import { dateFormat, dateToAgo, toDate } from '../../../../../services/index.js';
+
+ 
 
 	import { BROWSER } from 'esm-env';
+	import { onMount } from 'svelte';
 
 	type PropsType = {
 		input: Date | number | string | { seconds: number; nanoseconds: number };
@@ -27,8 +30,8 @@
 		}
 	}
 
-	$effect(() => {
-		BROWSER && prepareDate(input);
+	onMount(() => {
+		prepareDate(input);
 	});
 </script>
 

package/dist/views/extra/texts/text-country-state.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
 	import { BROWSER } from 'esm-env';
+	import { mount, onMount } from 'svelte';
 
 	let { input }: { input: string } = $props();
 
@@ -31,8 +32,8 @@
 		init();
 	}
 
-	$effect(() => {
-		BROWSER && prepare(input, states);
+	onMount(() => {
+		prepare(input, states);
 	});
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cloudparker/moldex.js",
-    "version": "4.1.3",
+    "version": "4.1.5",
     "keywords": [
         "svelte"
     ],