@cloudparker/moldex.js 0.0.28 → 0.0.30

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

@@ -0,0 +1,83 @@
+<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()}
+	<button
+		class="px-3 h-full hover:bg-gray-100 {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={handleTogglePassword}
+	>
+		<Icon
+			path={type == 'password' ? mdiEyeOffOutline : mdiEyeOutline}
+			className=" {btnIconSizeClassName} {iconClassName}"
+		/>
+	</button>
+{/snippet}
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	{type}
+	maxlength={props?.maxlength || 200}
+	rightSnippet={showPasswordButton}
+	{size}
+	{appearance}
+/>

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

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PasswordField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    buttonClassName?: string;
+    iconClassName?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type PasswordField = InstanceType<typeof PasswordField>;
+export default PasswordField;

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

@@ -0,0 +1,90 @@
+<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()}
+	<button
+		class="w-16 h-full hover:bg-gray-100 font-bold text-gray-400 {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={hanleDialCodePicker}
+	>
+		{dialCode}
+	</button>
+{/snippet}
+
+<EasyScriptLoader
+	scriptName="EasyCountryData"
+	scriptUrl="https://cdn.jsdelivr.net/gh/paramanandapradhan/easy-countrydata@main/dist/index.js"
+	onLoad={handleScriptLoad}
+/>
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	type="tel"
+	maxlength={props?.maxlength || 12}
+	leftSnippet={showPasswordButton}
+	{size}
+	{appearance}
+	className="pl-16 {className}"
+/>

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

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const PhoneField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    buttonClassName?: string;
+    dialCode?: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "dialCode">;
+type PhoneField = InstanceType<typeof PhoneField>;
+export default PhoneField;

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

@@ -0,0 +1,72 @@
+<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
+	{id}
+	{name}
+	type="range"
+	class=" w-full bg-gray-200 appearance-none cursor-pointer dark:bg-gray-700 rounded-lg range-lg outline-none focus:outline-none {rangeSizeClassName} {className}"
+	{min}
+	{max}
+	{step}
+	bind:value
+	{oninput} 
+	{onfocus}
+	{onblur}
+/>
+
+<style>
+	.h-2-px {
+		height: 2px;
+	}
+</style>

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

@@ -0,0 +1,31 @@
+import { type InputFieldSizeType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RangeField: $$__sveltets_2_IsomorphicComponent<{
+    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;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "value">;
+type RangeField = InstanceType<typeof RangeField>;
+export default RangeField;

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

@@ -0,0 +1,67 @@
+<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()}
+	<Icon path={mdiMagnify} className="mx-3 text-gray-400 {iconClassName}"></Icon>
+{/snippet}
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	type="search"
+	maxlength={props?.maxlength || 200}
+	leftSnippet={searchIcon}
+	className=" pl-12 {className}"
+	{placeholder}
+	oninput={handleInput}
+/>

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

@@ -0,0 +1,24 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const SearchField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    iconClassName?: string;
+    onSearch?: (value: string) => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type SearchField = InstanceType<typeof SearchField>;
+export default SearchField;

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

@@ -0,0 +1,12 @@
+<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/text-field/text-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type TextField = InstanceType<typeof TextField>;
+export default TextField;

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

@@ -0,0 +1,12 @@
+<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/textarea-field/textarea-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TextareaField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type TextareaField = InstanceType<typeof TextareaField>;
+export default TextareaField;

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

@@ -0,0 +1,12 @@
+<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/components/time-field/time-field.svelte.d.ts

@@ -0,0 +1,21 @@
+import { type InputFieldPropsType } 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;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const TimeField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type TimeField = InstanceType<typeof TimeField>;
+export default TimeField;

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

@@ -0,0 +1,19 @@
+import { type InputFieldAppearanceType, type InputFieldPropsType, type InputFieldSizeType } from "./components/input-field/input-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";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+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 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 };

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

@@ -0,0 +1,19 @@
+import {} from "./components/input-field/input-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";
+import DatetimeField from "./components/datetime-field/datetime-field.svelte";
+import EmailField from "./components/email-field/email-field.svelte";
+import FileField from "./components/file-field/file-field.svelte";
+import InputField from "./components/input-field/input-field.svelte";
+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 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 {};
+export { ColorField, ComboboxField, DateField, DatetimeField, EmailField, FileField, InputField, Label, NumberField, PasswordField, PhoneField, RangeField, SearchField, TextareaField, TextField, TimeField };