@cloudparker/moldex.js 4.1.7 → 4.1.8

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

@@ -0,0 +1,106 @@
+<script lang="ts">
+	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 type { InputFieldProps } from '../../types';
+	import InputField  from '../input-field/input-field.svelte';
+
+	let {
+		appearance,
+		size,
+		className,
+		accepts = '',
+		multiple = false,
+		value = $bindable(null),
+		...props
+	}: InputFieldProps & {
+		accepts?: string;
+		multiple?: boolean;
+		value?: File | File[] | null;
+	} = $props();
+
+	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);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+
+	async function handleFileAttachment<T extends File | File[]>() {
+		let res: File | File[] | null = null;
+		res = await openFilePickerDialog<T>(accepts, { multiple: multiple || false });
+		if (res) {
+			value = res;
+			if (multiple) {
+				let files: File[] = value as File[];
+				fileNameDisplay = files.map((file) => file.name).join(', ');
+			} else {
+				let file: File = value as File;
+				fileNameDisplay = file.name;
+			}
+		}
+	}
+</script>
+
+{#snippet fileButton()}
+	<button
+		id="btn-file-picker"
+		type="button"
+		class="h-full px-3 hover:bg-gray-100 focus:outline-primary {btnRoundedClassName} "
+		use:ripple
+		onclick={handleFileAttachment}
+	>
+		<Icon path={mdiAttachment} className=" {btnIconSizeClassName}"></Icon>
+	</button>
+{/snippet}
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	{appearance}
+	{size}
+	value={fileNameDisplay}
+	className="pr-14 {className}"
+	type="text"
+	readonly
+	rightSnippet={fileButton}
+/>

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

@@ -0,0 +1,13 @@
+import type { InputFieldProps } from '../../types';
+type $$ComponentProps = InputFieldProps & {
+    accepts?: string;
+    multiple?: boolean;
+    value?: File | File[] | null;
+};
+declare const FileField: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => void;
+}, "value">;
+type FileField = ReturnType<typeof FileField>;
+export default FileField;

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

@@ -0,0 +1,336 @@
+<script lang="ts">
+	import type { InputFieldProps } from '../../types';
+
+ 
+	import Label from '../label/label.svelte';
+
+	let {
+		appearance = 'normal',
+		ariaControls,
+		ariaExpanded,
+		autofocus = false,
+		className = '',
+		cols,
+		containerClassName = '',
+		contentSnippet,
+		contentSnippetClassName,
+		disabled = false,
+		floatingLabel = false,
+		hasRequiredSymbol = true,
+		id = '',
+		label = '',
+		labelClassName = '',
+		leftSnippet,
+		leftSnippetContainerClassName = '',
+		max,
+		maxlength,
+		min,
+		minlength,
+		multiple = false,
+		name = '',
+		title,
+		onBlur,
+		onChange,
+		onClick,
+		onDblClick,
+		onDrag,
+		onDragOver,
+		onDrop,
+		onFocus,
+		onInput,
+		onKeyDown,
+		onKeyPress,
+		onKeyUp,
+		onMouseDown,
+		onMouseUp,
+		pattern,
+		placeholder = '',
+		readonly = false,
+		required = false,
+		requiredSymbol = '*',
+		requiredSymbolColor = 'red',
+		rightSnippet,
+		rightSnippetContainerClassName = '',
+		role,
+		rows = 5,
+		size = 'md',
+		step,
+		type = 'text',
+		value = $bindable()
+	}: InputFieldProps = $props();
+
+	let inputRef: HTMLInputElement | HTMLTextAreaElement | null = $state(null);
+
+	let nameDerived = $derived(name || id);
+	let idDerived = $derived(id || name);
+
+	let containerClassNameDerived = $derived.by(() => {
+		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+			return (containerClassName || '') + ' relative';
+		}
+		return containerClassName;
+	});
+
+	let sizeClassName = $derived.by(() => {
+		let sizeClassName = '';
+		if (size) {
+			switch (size) {
+				case 'lg':
+					sizeClassName = 'p-4 text-neutral';
+					break;
+				case 'md':
+					sizeClassName = 'p-2.5 text-sm';
+					break;
+				case 'sm':
+					sizeClassName = 'p-2 text-xs';
+					break;
+				case 'xs':
+					sizeClassName = 'p-1 text-xs';
+					break;
+			}
+		}
+		return sizeClassName;
+	});
+
+	let floatingLabelPaddingClassName = $derived.by(() => {
+		if (floatingLabel) {
+			if (size) {
+				let floatingClassName = '';
+				switch (size) {
+					case 'lg':
+						floatingClassName = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
+						break;
+					case 'md':
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
+						break;
+					case 'sm':
+						floatingClassName = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
+						break;
+					case 'xs':
+						floatingClassName = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
+						break;
+				}
+				return floatingClassName;
+			}
+		}
+		return '';
+	});
+
+	let floatingLabelTextClassName = $derived.by(() => {
+		let className = '';
+		if (floatingLabel) {
+			if (size) {
+				switch (size) {
+					case 'lg':
+						className = 'text-neutral';
+						break;
+					case 'md':
+						className = 'text-sm';
+						break;
+					case 'sm':
+						className = 'text-xs';
+						break;
+					case 'xs':
+						className = 'text-xs';
+						break;
+				}
+			}
+		}
+		return className;
+	});
+
+	let floatingLabelClassName = $derived.by(() => {
+		if (floatingLabel) {
+			return `absolute duration-300 transform top-0 rounded -translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-0 peer-placeholder-shown:start-0 peer-focus:start-1 bg-white peer-focus:bg-white dark:bg-neutral-700 peer-focus:bg-neutral-800 peer-placeholder-shown:bg-transparent  start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+		}
+		return '';
+	});
+
+	let appearanceClassName = $derived.by(() => {
+		let className = '';
+		if (appearance) {
+			switch (appearance) {
+				case 'normal':
+					className =
+						'border rounded-lg bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
+					break;
+				case 'box':
+					className =
+						'border bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 text-neutral-950 dark:text-neutral-50 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
+					break;
+				case 'fill':
+					className =
+						' border-0 appearance-none  focus:ring-0 bg-neutral-100 dark:bg-neutral-700 text-neutral-950 dark:text-neutral-50 focus:bg-neutral-50 dark:focus:bg-neutral-800 ';
+					break;
+				case 'underline':
+					className =
+						'bg-transparent border-0 border-b-2 appearance-none focus:ring-0 text-neutral-950 dark:text-neutral-50 border-neutral-300 dark:border-neutral-700 focus:border-primary-500 dark:focus:border-primary-500';
+					break;
+				case 'fill-underline':
+					className =
+						'border-0 border-b-2 appearance-none ring-0 text-neutral-950 dark:text-neutral-50 bg-neutral-100 dark:bg-neutral-700 border-neutral-300 dark:border-neutral-500 focus:border-primary-500 dark:focus:border-primary-500 ';
+					break;
+				case 'none':
+					className =
+						'border-0 focus:ring-0 appearance-none text-neutral-950 dark:text-neutral-50 bg-transparent dark:bg-transparent focus:bg-neutral-100 dark:focus:bg-neutral-800 hover:bg-neutral-100 dark:hover:bg-neutral-800';
+					break;
+			}
+		}
+		return className;
+	});
+
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
+
+	export function getElement() {
+		return inputRef;
+	}
+
+	export function select() {
+		return inputRef && (inputRef as HTMLInputElement).select();
+	}
+
+	export function getBoundingClientRect() {
+		if (inputRef) {
+			return inputRef.getBoundingClientRect();
+		}
+	}
+
+	$effect(() => {
+		setTimeout(() => {
+			if (inputRef && autofocus) {
+				inputRef.focus();
+			}
+		}, 10);
+	});
+</script>
+
+{#snippet labelSnippet()}
+	<Label
+		forName={idDerived}
+		{label}
+		className=" {floatingLabel ? '' : 'mb-1 '} {floatingLabelClassName}  {labelClassName}"
+		{required}
+		{requiredSymbolColor}
+		{requiredSymbol}
+		{hasRequiredSymbol}
+	/>
+{/snippet}
+
+{#if !floatingLabel && label}
+	{@render labelSnippet()}
+{/if}
+
+<div class="w-full {containerClassNameDerived}">
+	{#if leftSnippet}
+		<div
+			class="left-children absolute flex items-center justify-center {leftSnippetContainerClassName}"
+		>
+			{@render leftSnippet()}
+		</div>
+	{/if}
+
+	{#if type == 'textarea'}
+		<textarea
+			bind:this={inputRef}
+			bind:value
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			id={idDerived}
+			name={nameDerived}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{rows}
+			{cols}
+			onchange={onChange}
+			oninput={onInput}
+			onfocus={onFocus}
+			onblur={onBlur}
+			ondblclick={onDblClick}
+			onclick={onClick}
+			onmousedown={onMouseDown}
+			onmouseup={onMouseUp}
+			onkeydown={onKeyDown}
+			onkeyup={onKeyUp}
+			onkeypress={onKeyPress}
+			ondrop={onDrop}
+			ondrag={onDrag}
+			ondragover={onDragOver}
+		></textarea>
+	{:else}
+		<input
+			bind:this={inputRef}
+			bind:value
+			class="peer block w-full outline-none {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			{type}
+			id={idDerived}
+			name={nameDerived}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{min}
+			{max}
+			{step}
+			{pattern}
+			{multiple}
+			{role}
+			onchange={onChange}
+			oninput={onInput}
+			onfocus={onFocus}
+			onblur={onBlur}
+			ondblclick={onDblClick}
+			onclick={onClick}
+			onmousedown={onMouseDown}
+			onmouseup={onMouseUp}
+			onkeydown={onKeyDown}
+			onkeyup={onKeyUp}
+			onkeypress={onKeyPress}
+			ondrop={onDrop}
+			ondrag={onDrag}
+			ondragover={onDragOver}
+			aria-controls={ariaControls}
+			aria-expanded={ariaExpanded}
+		/>
+	{/if}
+	{#if contentSnippet}
+		<div
+			class="pointer-events-none absolute inset-0 block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
+		>
+			{@render contentSnippet()}
+		</div>
+	{/if}
+	{#if rightSnippet}
+		<div
+			class="right-children absolute flex items-center justify-center {rightSnippetContainerClassName}"
+		>
+			{@render rightSnippet()}
+		</div>
+	{/if}
+
+	{#if label && floatingLabel}
+		{@render labelSnippet()}
+	{/if}
+</div>
+
+<style>
+	.left-children {
+		left: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
+
+	.right-children {
+		right: 2px;
+		top: 2px;
+		bottom: 2px;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { InputFieldProps } from '../../types';
+declare const InputField: import("svelte").Component<InputFieldProps, {
+    focus: () => void;
+    getElement: () => HTMLInputElement | HTMLTextAreaElement;
+    select: () => void;
+    getBoundingClientRect: () => DOMRect;
+}, "value">;
+type InputField = ReturnType<typeof InputField>;
+export default InputField;

package/dist/views/core/input/components/label/label.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type PropsType = {
+		forName?: string;
+		label?: string;
+		className?: string;
+		required?: boolean;
+		children?: Snippet;
+		requiredSymbolColor?: string;
+		requiredSymbol?: string;
+		hasRequiredSymbol?: boolean;
+	};
+
+	let {
+		forName,
+		label = '',
+		className = '',
+		required = false,
+		requiredSymbolColor = 'red',
+		requiredSymbol = '*',
+		hasRequiredSymbol = true,
+		children
+	}: PropsType = $props();
+</script>
+
+<label
+	for={forName || ''}
+	class="block text-sm text-neutral-500 dark:text-neutral-400 {hasRequiredSymbol && required
+		? 'required'
+		: ''} {className}"
+	style="--requiredSymbolColor:{requiredSymbolColor}; --requiredSymbol: '{requiredSymbol}'; "
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		{label || ''}
+	{/if}
+</label>
+
+<style>
+	.required::after {
+		content: var(--requiredSymbol);
+		color: var(--requiredSymbolColor);
+		font-weight: bold;
+		margin-left: 4px;
+	}
+</style>

package/dist/views/core/input/components/label/label.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type PropsType = {
+    forName?: string;
+    label?: string;
+    className?: string;
+    required?: boolean;
+    children?: Snippet;
+    requiredSymbolColor?: string;
+    requiredSymbol?: string;
+    hasRequiredSymbol?: boolean;
+};
+declare const Label: import("svelte").Component<PropsType, {}, "">;
+type Label = ReturnType<typeof Label>;
+export default Label;

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
+
+	let { value = $bindable(), ...props }: InputFieldProps = $props();
+
+	let inputFieldRef: any | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	export function getElement() {
+		return inputFieldRef;
+	}
+
+	export function select() {
+		inputFieldRef && inputFieldRef.select();
+	}
+</script>
+
+<InputField bind:this={inputFieldRef} {...props} type="number" bind:value />

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

@@ -0,0 +1,8 @@
+import type { InputFieldProps } from '../../types';
+declare const NumberField: import("svelte").Component<InputFieldProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => void;
+}, "value">;
+type NumberField = ReturnType<typeof NumberField>;
+export default NumberField;

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

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { ripple } from '../../../../../actions/ripple.js';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import { mdiEyeOffOutline, mdiEyeOutline } from '../../../icon/index.js';
+	import type { InputFieldProps } from '../../types';
+	import InputField from '../input-field/input-field.svelte';
+
+	let {
+		type = 'password',
+		size,
+		appearance,
+		buttonClassName,
+		iconClassName,
+		name,
+		id,
+		value = $bindable(),
+		...props
+	}: InputFieldProps & {
+		buttonClassName?: string;
+		iconClassName?: string;
+	} = $props();
+
+	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);
+
+	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';
+		}
+	}
+</script>
+
+{#snippet showPasswordButton()}
+	<button
+		id="btn-eye-{name || id}"
+		type="button"
+		class="h-full px-3 hover:bg-neutral-100 focus:outline-primary {btnRoundedClassName} {buttonClassName}"
+		use:ripple
+		onclick={handleTogglePassword}
+	>
+		<Icon
+			path={type == 'password' ? mdiEyeOffOutline : mdiEyeOutline}
+			className=" {btnIconSizeClassName} {iconClassName}"
+		/>
+	</button>
+{/snippet}
+
+<InputField
+	bind:this={inputFieldRef}
+	{...props}
+	{type}
+	{id}
+	{name}
+	maxlength={props?.maxlength || 200}
+	rightSnippet={showPasswordButton}
+	{size}
+	{appearance}
+	bind:value
+/>

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

@@ -0,0 +1,12 @@
+import type { InputFieldProps } from '../../types';
+type $$ComponentProps = InputFieldProps & {
+    buttonClassName?: string;
+    iconClassName?: string;
+};
+declare const PasswordField: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+    getElement: () => any;
+    select: () => void;
+}, "value">;
+type PasswordField = ReturnType<typeof PasswordField>;
+export default PasswordField;