@cloudparker/moldex.js 0.0.65 → 0.0.67

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

@@ -1,73 +1,60 @@
-<script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon';
-	import Icon from '../../../icon/components/icon/icon.svelte';
-	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
-
-	let {
-		type = 'password',
-		size,
-		appearance,
-		buttonClassName,
-		iconClassName,
-		name,
-		id,
-		value = $bindable(),
-		...props
-	}: InputFieldPropsType & {
-		buttonClassName?: string;
-		iconClassName?: string;
-	} = $props();
-
-	let btnRoundedClassName = $state('');
-	let btnIconSizeClassName = $state('');
-
-	let inputFieldRef: any | null = $state(null);
-
-	export function focus() {
-		inputFieldRef?.focus();
-	}
-
-	export function getElement(){
-		return inputFieldRef;
-	}
-
-	export function select(){
-		  inputFieldRef && inputFieldRef.select();
-	}
-
-	function handleTogglePassword() {
-		if (type == 'password') {
-			type = 'text';
-		} else {
-			type = 'password';
-		}
-	}
-
-	$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 lang="ts">import { ripple } from "../../../../../actions";
+import { mdiEyeOffOutline, mdiEyeOutline } from "../../../icon";
+import Icon from "../../../icon/components/icon/icon.svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+let {
+  type = "password",
+  size,
+  appearance,
+  buttonClassName,
+  iconClassName,
+  name,
+  id,
+  value = $bindable(),
+  ...props
+} = $props();
+let btnRoundedClassName = $state("");
+let btnIconSizeClassName = $state("");
+let inputFieldRef = $state(null);
+export function focus() {
+  inputFieldRef?.focus();
+}
+export function getElement() {
+  return inputFieldRef;
+}
+export function select() {
+  inputFieldRef && inputFieldRef.select();
+}
+function handleTogglePassword() {
+  if (type == "password") {
+    type = "text";
+  } else {
+    type = "password";
+  }
+}
+$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()}

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

@@ -1,4 +1,4 @@
-import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+import { type InputFieldProps } from '../input-field/input-field.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 PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+declare const PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
     buttonClassName?: string;
     iconClassName?: string;
 }, {

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

@@ -1,175 +1,121 @@
-<script module lang="ts">
-	export type LibPhoneNumberParseType = {
-		isValid: () => boolean;
-		nationalNumber: string;
-		countryCallingCode: string;
-	};
-
-	export type LibPhoneNumberType = {
-		parsePhoneNumber: (phoneNumber: string, dialCode?: string) => LibPhoneNumberParseType;
-	};
-
-	export type CountryType = {
-		name: string;
-		dialCode: string;
-		isoCode: string;
-	};
-
-	export type EasyCountryDataType = {
-		getCountries: () => CountryType[];
-		getCountry: (params: { name?: string; dialCode?: string; isoCode?: string }) => CountryType;
-	};
-</script>
-
-<script lang="ts">
-	import { ripple } from '../../../../../actions';
-	import EasyScriptLoader from '@cloudparker/easy-script-loader-svelte';
-	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
-	import { isMobileScreen, openListPickerDialog } from '../../../../../services';
-	import type { DialogSizeType } from '../../../dialog';
-
-	let {
-		id,
-		name,
-		value = $bindable(''),
-		size,
-		appearance,
-		buttonClassName,
-		className,
-		dialCode = $bindable('+1'),
-		floatingLabel,
-		labelClassName,
-		...props
-	}: InputFieldPropsType & {
-		buttonClassName?: string;
-		dialCode?: string;
-	} = $props();
-
-	let EasyCountryData: EasyCountryDataType;
-	let LibPhonenumber: LibPhoneNumberType | null = $state(null);
-	let inputFieldRef: any | null = $state(null);
-
-	let _dailCode: string = $state('');
-	let _phoneNumber: string = $state('');
-
-	$effect(() => {
-		if (!_dailCode && !_phoneNumber && LibPhonenumber) {
-			try {
-				if (dialCode) {
-					_dailCode = formatDialCode(dialCode);
-				}
-				if (value) {
-					let parsed = LibPhonenumber?.parsePhoneNumber(value as string);
-					if (parsed && parsed.isValid()) {
-						_phoneNumber = parsed.nationalNumber || '';
-						_dailCode = formatDialCode(parsed.countryCallingCode);
-					}
-				}
-			} catch (error) {}
-		}
-	});
-
-	let btnRoundedClassName = $derived.by(() => {
-		if (!appearance || appearance == 'normal') {
-			return 'rounded-tl-lg rounded-bl-lg';
-		}
-	});
-
-	export function focus() {
-		inputFieldRef?.focus();
-	}
-
-	export function getElement(){
-		return inputFieldRef;
-	}
-
-	export function select(){
-		  inputFieldRef && inputFieldRef.select();
-	}
-
-	function formatDialCode(dialcode: string) {
-		dialcode = `${dialCode}`.trim();
-		if (!dialCode.startsWith('+')) {
-			dialcode = `+${dialCode}`;
-		}
-		return dialcode;
-	}
-
-	async function hanleDialCodePicker() {
-		if (EasyCountryData) {
-			let items = EasyCountryData.getCountries();
-			// console.log('Countries', items);
-			let size: DialogSizeType = isMobileScreen() ? 'full' : 'sm';
-			let res: string = await openListPickerDialog<string>({
-				items,
-				itemTitle: 'dialCode',
-				itemSubtitle: 'name',
-				size,
-				hasCheck: true,
-				identity: 'dialCode',
-				search: ['name', 'dialCode', 'isoCode']
-			});
-
-			console.log(res);
-			if (res) {
-				_dailCode = res;
-				dialCode = _dailCode;
-				updatePhonenumber(_dailCode, _phoneNumber);
-				inputFieldRef && inputFieldRef.focus();
-			}
-		}
-	}
-
-	function handleEasyCountryDataScriptLoad(lib: EasyCountryDataType) {
-		EasyCountryData = lib;
-	}
-
-	function handleLibphonenumberScriptLoad(lib: LibPhoneNumberType) {
-		LibPhonenumber = lib;
-	}
-
-	function handleNumberInput(ev: InputEvent) {
-		let target: HTMLInputElement = ev.target as HTMLInputElement;
-		let _phoneNumber: string = target?.value || '';
-		updatePhonenumber(_dailCode, _phoneNumber);
-	}
-
-	function updatePhonenumber(_dialCode: string, _phoneNumber: string) {
-		if (LibPhonenumber) {
-			if (_phoneNumber) {
-				_dialCode = formatDialCode(_dialCode);
-				try {
-					// console.log('updatePhonenumber', { dialCode, phoneNumber });
-					let parsed = LibPhonenumber.parsePhoneNumber(_dialCode + _phoneNumber);
-					if (parsed && parsed.isValid()) {
-						dialCode = _dialCode;
-						value = _dialCode + _phoneNumber;
-					} else {
-						value = '';
-					}
-				} catch (error) {
-					value = '';
-				}
-			}
-		}
-	}
-
-	function handleNumberKeyDown(ev: KeyboardEvent) {
-		if (
-			!(
-				(ev.key >= '0' && ev.key <= '9') ||
-				ev.key === 'Backspace' ||
-				ev.key === 'Delete' ||
-				ev.key === 'ArrowLeft' ||
-				ev.key === 'ArrowRight' ||
-				ev.key === 'ArrowUp' ||
-				ev.key === 'ArrowDown'||
-				ev.key === 'Tab'
-			)
-		) {
-			ev.preventDefault();
-		}
-	}
+<script module lang="ts"></script>
+
+<script lang="ts">import { ripple } from "../../../../../actions";
+import EasyScriptLoader from "@cloudparker/easy-script-loader-svelte";
+import InputField, {} from "../input-field/input-field.svelte";
+import { isMobileScreen, openListPickerDialog } from "../../../../../services";
+let {
+  id,
+  name,
+  value = $bindable(""),
+  size,
+  appearance,
+  buttonClassName,
+  className,
+  dialCode = $bindable("+1"),
+  floatingLabel,
+  labelClassName,
+  ...props
+} = $props();
+let EasyCountryData;
+let LibPhonenumber = $state(null);
+let inputFieldRef = $state(null);
+let _dailCode = $state("");
+let _phoneNumber = $state("");
+$effect(() => {
+  if (!_dailCode && !_phoneNumber && LibPhonenumber) {
+    try {
+      if (dialCode) {
+        _dailCode = formatDialCode(dialCode);
+      }
+      if (value) {
+        let parsed = LibPhonenumber?.parsePhoneNumber(value);
+        if (parsed && parsed.isValid()) {
+          _phoneNumber = parsed.nationalNumber || "";
+          _dailCode = formatDialCode(parsed.countryCallingCode);
+        }
+      }
+    } catch (error) {
+    }
+  }
+});
+let btnRoundedClassName = $derived.by(() => {
+  if (!appearance || appearance == "normal") {
+    return "rounded-tl-lg rounded-bl-lg";
+  }
+});
+export function focus() {
+  inputFieldRef?.focus();
+}
+export function getElement() {
+  return inputFieldRef;
+}
+export function select() {
+  inputFieldRef && inputFieldRef.select();
+}
+function formatDialCode(dialcode) {
+  dialcode = `${dialCode}`.trim();
+  if (!dialCode.startsWith("+")) {
+    dialcode = `+${dialCode}`;
+  }
+  return dialcode;
+}
+async function hanleDialCodePicker() {
+  if (EasyCountryData) {
+    let items = EasyCountryData.getCountries();
+    let size2 = isMobileScreen() ? "full" : "sm";
+    let res = await openListPickerDialog({
+      items,
+      itemTitle: "dialCode",
+      itemSubtitle: "name",
+      size: size2,
+      hasCheck: true,
+      identity: "dialCode",
+      search: ["name", "dialCode", "isoCode"]
+    });
+    console.log(res);
+    if (res) {
+      _dailCode = res;
+      dialCode = _dailCode;
+      updatePhonenumber(_dailCode, _phoneNumber);
+      inputFieldRef && inputFieldRef.focus();
+    }
+  }
+}
+function handleEasyCountryDataScriptLoad(lib) {
+  EasyCountryData = lib;
+}
+function handleLibphonenumberScriptLoad(lib) {
+  LibPhonenumber = lib;
+}
+function handleNumberInput(ev) {
+  let target = ev.target;
+  let _phoneNumber2 = target?.value || "";
+  updatePhonenumber(_dailCode, _phoneNumber2);
+}
+function updatePhonenumber(_dialCode, _phoneNumber2) {
+  if (LibPhonenumber) {
+    if (_phoneNumber2) {
+      _dialCode = formatDialCode(_dialCode);
+      try {
+        let parsed = LibPhonenumber.parsePhoneNumber(_dialCode + _phoneNumber2);
+        if (parsed && parsed.isValid()) {
+          dialCode = _dialCode;
+          value = _dialCode + _phoneNumber2;
+        } else {
+          value = "";
+        }
+      } catch (error) {
+        value = "";
+      }
+    }
+  }
+}
+function handleNumberKeyDown(ev) {
+  if (!(ev.key >= "0" && ev.key <= "9" || ev.key === "Backspace" || ev.key === "Delete" || ev.key === "ArrowLeft" || ev.key === "ArrowRight" || ev.key === "ArrowUp" || ev.key === "ArrowDown" || ev.key === "Tab")) {
+    ev.preventDefault();
+  }
+}
 </script>
 
 {#snippet showPasswordButton()}

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

@@ -19,7 +19,7 @@ export type EasyCountryDataType = {
         isoCode?: string;
     }) => CountryType;
 };
-import { type InputFieldPropsType } from '../input-field/input-field.svelte';
+import { type InputFieldProps } from '../input-field/input-field.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;
@@ -33,7 +33,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+declare const PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldProps & {
     buttonClassName?: string;
     dialCode?: string;
 }, {

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

@@ -1,90 +1,59 @@
-<script lang="ts" module>
-	export type RadioValuetype = string | boolean | number | Date;
-	export type RadioItemType = { value: any; label: string; desc?: string };
-	export type RadioItemsType = (RadioValuetype | RadioItemType)[];
-	export type RadioPositionType = 'left' | 'right';
-	export type RadioDirationType = 'vertical' | 'horizontal';
-	export type RadioPropsType = {
-		className?: string;
-		groupContainerClassName?: string;
-		hasPrimitiveItemsData?: boolean;
-		id?: string;
-		items?: RadioItemsType;
-		labelClassName?: string;
-		name?: string;
-		position?: RadioPositionType;
-		direction?: RadioDirationType;
-		radioContainerClassName?: string;
-		required?: boolean;
-		subtitle?: string;
-		subtitleClassName?: string;
-		title?: string;
-		titleClassName?: string;
-		value?: RadioValuetype;
-		descClassName?: string;
-		onChange?: (value: RadioValuetype) => void;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		direction = 'vertical',
-		className,
-		groupContainerClassName,
-		id,
-		items = [],
-		labelClassName,
-		name,
-		position = 'left',
-		radioContainerClassName,
-		required,
-		subtitle,
-		subtitleClassName,
-		title,
-		titleClassName,
-		value = $bindable(),
-		descClassName,
-		onChange
-	}: RadioPropsType = $props();
-
-	let hasPrimitiveItemsData = $derived.by(() => {
-		if (items?.length) {
-			let item = items[0];
-			if (typeof item === 'object' && item !== null) {
-				return false;
-			}
-		}
-		return true;
-	});
+<script lang="ts" module></script>
 
-	let fieldsetId = $derived.by(() => {
-		if (id) {
-			return id;
-		} else {
-			return name;
-		}
-	});
-
-	let preparedItems: RadioItemType[] = $derived.by(() => {
-		if (items?.length) {
-			if (hasPrimitiveItemsData) {
-				return items.map((item) => ({ label: item, value: item }) as RadioItemType);
-			} else {
-				return items as RadioItemType[];
-			}
-		}
-		return [];
-	});
-
-	function handleChange(ev: Event, item: RadioItemType) {
-		value = item.value;
-		if (onChange && value) {
-			onChange(value);
-		}
-	}
+<script lang="ts">let {
+  direction = "vertical",
+  className,
+  groupContainerClassName,
+  id,
+  items = [],
+  labelClassName,
+  name,
+  position = "left",
+  radioContainerClassName,
+  required,
+  subtitle,
+  subtitleClassName,
+  title,
+  titleClassName,
+  value = $bindable(),
+  descClassName,
+  onChange
+} = $props();
+let hasPrimitiveItemsData = $derived.by(() => {
+  if (items?.length) {
+    let item = items[0];
+    if (typeof item === "object" && item !== null) {
+      return false;
+    }
+  }
+  return true;
+});
+let fieldsetId = $derived.by(() => {
+  if (id) {
+    return id;
+  } else {
+    return name;
+  }
+});
+let preparedItems = $derived.by(() => {
+  if (items?.length) {
+    if (hasPrimitiveItemsData) {
+      return items.map((item) => ({ label: item, value: item }));
+    } else {
+      return items;
+    }
+  }
+  return [];
+});
+function handleChange(ev, item) {
+  value = item.value;
+  if (onChange && value) {
+    onChange(value);
+  }
+}
 </script>
 
-{#snippet labelSnippet(item: RadioItemType, index: number)}
+{#snippet labelSnippet(item: RadioItem, index: number)}
 	<div class="leading-6">
 		<div class="ml-4 block text-sm font-medium text-gray-900 flex-grow {labelClassName}">
 			{item.label || ''}

package/dist/views/core/input/components/radio-field/radio-field.svelte.d.ts

@@ -1,22 +1,22 @@
 export type RadioValuetype = string | boolean | number | Date;
-export type RadioItemType = {
+export type RadioItem = {
     value: any;
     label: string;
     desc?: string;
 };
-export type RadioItemsType = (RadioValuetype | RadioItemType)[];
-export type RadioPositionType = 'left' | 'right';
-export type RadioDirationType = 'vertical' | 'horizontal';
+export type RadioItems = (RadioValuetype | RadioItem)[];
+export type RadioPosition = 'left' | 'right';
+export type RadioDiration = 'vertical' | 'horizontal';
 export type RadioPropsType = {
     className?: string;
     groupContainerClassName?: string;
     hasPrimitiveItemsData?: boolean;
     id?: string;
-    items?: RadioItemsType;
+    items?: RadioItems;
     labelClassName?: string;
     name?: string;
-    position?: RadioPositionType;
-    direction?: RadioDirationType;
+    position?: RadioPosition;
+    direction?: RadioDiration;
     radioContainerClassName?: string;
     required?: boolean;
     subtitle?: string;