@cloudparker/moldex.js 0.0.29 → 0.0.31

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

@@ -1,51 +1,62 @@
-<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,
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let btnIconSizeClassName = $state("");
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-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, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		type = 'password',
+		size,
+		appearance,
+		buttonClassName,
+		iconClassName,
+		...props
+	}: InputFieldPropsType & {
+		buttonClassName?: string;
+		iconClassName?: string;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	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/phone-field/phone-field.svelte

@@ -1,51 +1,65 @@
-<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";
-import { DialogSizeEnum } from "../../../dialog";
-let {
-  value,
-  size,
-  appearance,
-  buttonClassName,
-  className,
-  dialCode = $bindable("+1"),
-  ...props
-} = $props();
-let btnRoundedClassName = $state("");
-let EasyCountryData;
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-async function hanleDialCodePicker() {
-  if (EasyCountryData) {
-    let items = EasyCountryData.getCountries();
-    let size2 = isMobileScreen() ? DialogSizeEnum.FULL : DialogSizeEnum.SM;
-    let res = await openListPickerDialog({
-      items,
-      itemTitle: "dialCode",
-      itemSubtitle: "name",
-      size: size2,
-      hasCheck: true,
-      identity: "dialCode"
-    });
-    console.log(res);
-    if (res) {
-      dialCode = res;
-      inputFieldRef && inputFieldRef.focus();
-    }
-  }
-}
-function handleScriptLoad(lib) {
-  console.log(lib);
-  EasyCountryData = lib;
-}
-$effect(() => {
-  if (!appearance || appearance == "normal") {
-    btnRoundedClassName = "rounded-tl-lg rounded-bl-lg";
-  }
-});
+<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 {
+		value,
+		size,
+		appearance,
+		buttonClassName,
+		className,
+		dialCode = $bindable('+1'),
+		...props
+	}: InputFieldPropsType & {
+		buttonClassName?: string;
+		dialCode?: string;
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+
+	let EasyCountryData: any;
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	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'
+			});
+
+			console.log(res);
+			if (res) {
+				dialCode = res;
+				inputFieldRef && inputFieldRef.focus();
+			}
+		}
+	}
+
+	function handleScriptLoad(lib: any) {
+		console.log(lib);
+		EasyCountryData = lib;
+	}
+
+	$effect(() => {
+		if (!appearance || appearance == 'normal') {
+			btnRoundedClassName = 'rounded-tl-lg rounded-bl-lg';
+		}
+	});
 </script>
 
 {#snippet showPasswordButton()}

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

@@ -0,0 +1,120 @@
+<script lang="ts" module>
+	export type RadioValuetype = string | boolean | number | Date;
+	export type RadioItemType = { value: any; label: 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;
+		onChange?: (value: RadioValuetype) => void;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		direction = 'vertical',
+		className,
+		groupContainerClassName,
+		hasPrimitiveItemsData,
+		id,
+		items = [],
+		labelClassName,
+		name,
+		position = 'left',
+		radioContainerClassName,
+		required,
+		subtitle,
+		subtitleClassName,
+		title,
+		titleClassName,
+		value = $bindable(),
+		onChange
+	}: RadioPropsType = $props();
+
+	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>
+
+{#snippet labelSnippet(item: RadioItemType, index: number)}
+	<label
+		for="option-{index}"
+		class="ml-3 block text-sm font-medium leading-6 text-gray-900 flex-grow cursor-pointer select-none {required
+			? 'required'
+			: ''} {labelClassName}">{item.label || ''}</label
+	>
+{/snippet}
+
+<fieldset id={fieldsetId}>
+	{#if title}
+		<legend class="text-sm font-semibold leading-6 text-gray-900 {titleClassName}">{title}</legend>
+	{/if}
+	{#if subtitle}
+		<p class="mt-1 text-sm leading-6 text-gray-600 {subtitleClassName}">{subtitle}</p>
+	{/if}
+
+	<div
+		class="{title || subtitle ? 'mt-6' : ''} {direction == 'vertical'
+			? 'space-y-4'
+			: 'space-x-6 flex items-center'} {groupContainerClassName} "
+	>
+		{#each preparedItems || [] as item, index}
+			<div class="flex items-center {radioContainerClassName}">
+				{#if position == 'right'}
+					{@render labelSnippet(item, index)}
+				{/if}
+
+				<input
+					id="option-{index}"
+					{name}
+					type="radio"
+					value={item.value}
+					checked={value === item.value}
+					class="h-4 w-4 cursor-pointer select-none border-gray-300 text-indigo-600 focus:ring-indigo-600 {className}"
+					onchange={(ev) => handleChange(ev, item)}
+				/>
+
+				{#if position == 'left'}
+					{@render labelSnippet(item, index)}
+				{/if}
+			</div>
+		{/each}
+	</div>
+</fieldset>

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

@@ -0,0 +1,45 @@
+export type RadioValuetype = string | boolean | number | Date;
+export type RadioItemType = {
+    value: any;
+    label: 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;
+    onChange?: (value: RadioValuetype) => void;
+};
+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 RadioField: $$__sveltets_2_IsomorphicComponent<RadioPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type RadioField = InstanceType<typeof RadioField>;
+export default RadioField;

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

@@ -1,35 +1,54 @@
-<script lang="ts">import InputField, {
-} from "../input-field/input-field.svelte";
-let {
-  id,
-  value = $bindable(50),
-  size = "md",
-  min = 0,
-  max = 100,
-  name,
-  step,
-  className,
-  oninput,
-  onblur,
-  onfocus
-} = $props();
-let rangeSizeClassName = $state("");
-$effect(() => {
-  switch (size) {
-    case "lg":
-      rangeSizeClassName = "h-3 ";
-      break;
-    case "md":
-      rangeSizeClassName = "h-2 ";
-      break;
-    case "sm":
-      rangeSizeClassName = "h-1 ";
-      break;
-    case "xs":
-      rangeSizeClassName = "h-2-px ";
-      break;
-  }
-});
+<script lang="ts">
+	import InputField, {
+		type InputFieldSizeType
+	} from '../input-field/input-field.svelte';
+
+	type RangeFieldPropsType = {
+		id?: string;
+		name?: string;
+		className?: string;
+		size?: InputFieldSizeType;
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		oninput?: (ev: any) => void;
+		onfocus?: (ev: any) => void;
+		onblur?: (ev: any) => void;
+	};
+
+	let {
+		id,
+		value = $bindable(50),
+		size = 'md',
+		min = 0,
+		max = 100,
+		name,
+		step,
+		className,
+		oninput,
+		onblur,
+		onfocus
+	}: RangeFieldPropsType = $props();
+
+	let rangeSizeClassName = $state('');
+
+	 	$effect(() => {
+		switch (size) {
+			case 'lg':
+				rangeSizeClassName = 'h-3 ';
+				break;
+			case 'md':
+				rangeSizeClassName = 'h-2 ';
+				break;
+			case 'sm':
+				rangeSizeClassName = 'h-1 ';
+				break;
+			case 'xs':
+				rangeSizeClassName = 'h-2-px ';
+				break;
+		}
+	});
 </script>
 
 <input

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

@@ -1,41 +1,55 @@
-<script lang="ts">import { mdiMagnify } from "../../../icon";
-import Icon from "../../../icon/components/icon/icon.svelte";
-import InputField, {} from "../input-field/input-field.svelte";
-let {
-  className,
-  placeholder,
-  iconClassName,
-  onSearch,
-  ...props
-} = $props();
-const debouncedSearch = debounce(search, 300);
-let lastQuery;
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
-function handleInput(ev) {
-  let input = ev?.target;
-  if (input) {
-    let searchText = (input.value || "").toLowerCase().trim();
-    debouncedSearch(searchText);
-  }
-}
-function search(query) {
-  if (lastQuery != query) {
-    onSearch && onSearch(query);
-    lastQuery = query;
-  }
-}
-function debounce(func, wait) {
-  let timeout;
-  return function(...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => {
-      func(...args);
-    }, wait);
-  };
-}
+<script lang="ts">
+	import { mdiMagnify } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		className,
+		placeholder,
+		iconClassName,
+		onSearch,
+		...props
+	}: InputFieldPropsType & { iconClassName?: string; onSearch?: (value: string) => void } =
+		$props();
+
+	const debouncedSearch = debounce(search, 300);
+	let lastQuery: string;
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	function handleInput(ev: any) {
+		// console.log(ev);
+		let input: HTMLInputElement = ev?.target;
+		if (input) {
+			let searchText = (input.value || '').toLowerCase().trim();
+			debouncedSearch(searchText);
+		}
+	}
+
+	function search(query: string) {
+		if (lastQuery != query) {
+			onSearch && onSearch(query);
+			lastQuery = query;
+		}
+	}
+
+	function debounce<T extends (...args: any[]) => void>(
+		func: T,
+		wait: number
+	): (...args: Parameters<T>) => void {
+		let timeout: ReturnType<typeof setTimeout>;
+
+		return function (...args: Parameters<T>) {
+			clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				func(...args);
+			}, wait);
+		};
+	}
 </script>
 
 {#snippet searchIcon()}

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

@@ -1,9 +1,12 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let { maxlength, ...props } = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let { maxlength, ...props }: InputFieldPropsType = $props();
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="text" maxlength={maxlength || 200} />

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

@@ -1,9 +1,12 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let props = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let props: InputFieldPropsType = $props();
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="textarea" maxlength={props?.maxlength || 200} />

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

@@ -1,9 +1,12 @@
-<script lang="ts">import InputField, {} from "../input-field/input-field.svelte";
-let props = $props();
-let inputFieldRef = $state(null);
-export function focus() {
-  inputFieldRef?.focus();
-}
+<script lang="ts">
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let props: InputFieldPropsType = $props();
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
 </script>
 
 <InputField bind:this={inputFieldRef} {...props} type="time" />

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

@@ -1,4 +1,5 @@
 import { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType } from "./components/input-field/input-field.svelte";
+import type { RadioDirationType, RadioItemsType, RadioItemType, RadioPositionType, RadioPropsType, RadioValuetype } from "./components/radio-field/radio-field.svelte";
 import ColorField from "./components/color-field/color-field.svelte";
 import ComboboxField from "./components/combobox-field/combobox-field.svelte";
 import DateField from "./components/date-field/date-field.svelte";
@@ -10,10 +11,11 @@ import Label from "./components/label/label.svelte";
 import NumberField from "./components/number-field/number-field.svelte";
 import PasswordField from "./components/password-field/password-field.svelte";
 import PhoneField from "./components/phone-field/phone-field.svelte";
+import RadioField from "./components/radio-field/radio-field.svelte";
 import RangeField from "./components/range-field/range-field.svelte";
 import SearchField from "./components/search-field/search-field.svelte";
 import TextField from "./components/text-field/text-field.svelte";
 import TextareaField from "./components/textarea-field/textarea-field.svelte";
 import TimeField from "./components/time-field/time-field.svelte";
-export { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType };
-export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };
+export type { InputFieldAppearanceType, InputFieldPropsType, InputFieldSizeType, RadioDirationType, RadioItemsType, RadioItemType, RadioPositionType, RadioPropsType, RadioValuetype };
+export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RadioField, RangeField, SearchField, TextareaField, TextField, TimeField };