@cloudparker/moldex.js 0.0.28 → 0.0.30

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { ripple } from '../../../../../actions';
+	import { openFilePicker } from '../../../../../services';
+	import { mdiAttachment } from '../../../icon';
+	import Icon from '../../../icon/components/icon/icon.svelte';
+	import InputField, { type InputFieldPropsType } from '../input-field/input-field.svelte';
+
+	let {
+		appearance,
+		size,
+		className,
+		accept = '',
+		multiple = false,
+		value,
+		...props
+	}: InputFieldPropsType & {
+		accept?: string;
+		multiple?: boolean;
+		value?: File | File[];
+	} = $props();
+
+	let btnRoundedClassName = $state('');
+	let btnIconSizeClassName = $state('');
+	let fileNameDisplay = $state('');
+
+	let inputFieldRef: InputField | null = $state(null);
+
+	export function focus() {
+		inputFieldRef?.focus();
+	}
+
+	async function handleFileAttachment() {
+		let res: File | File[] = await openFilePicker({ accept, multiple });
+		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;
+			}
+		}
+	}
+
+	$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
+		class="px-3 h-full hover:bg-gray-100 {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,25 @@
+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 FileField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType & {
+    accept?: string;
+    multiple?: boolean;
+    value?: File | File[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type FileField = InstanceType<typeof FileField>;
+export default FileField;

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

@@ -0,0 +1,382 @@
+<script module lang="ts">
+	export type InputFieldSizeType = 'lg' | 'md' | 'sm' | 'xs';
+	export type InputFieldAppearanceType =
+		| 'normal'
+		| 'box'
+		| 'fill'
+		| 'underline'
+		| 'fill-underline'
+		| 'none';
+
+	export type InputValueType =
+		| string
+		| string[]
+		| number
+		| number[]
+		| Date
+		| Date[]
+		| File
+		| File[]
+		| null
+		| undefined;
+
+	export type InputFieldPropsType = {
+		appearance?: InputFieldAppearanceType;
+		ariaControls?: string;
+		ariaExpanded?: boolean;
+		autofocus?: boolean;
+		className?: string;
+		cols?: number;
+		containerClassName?: string;
+		contentSnippet?: Snippet;
+		contentSnippetClassName?: string;
+		disabled?: boolean;
+		floatingLabel?: boolean;
+		hasRequiredSymbol?: boolean;
+		iconClassName?: string;
+		iconPath?: string;
+		id?: string;
+		label?: string;
+		labelClassName?: string;
+		leftSnippet?: Snippet;
+		leftSnippetContainerClassName?: string;
+		max?: number;
+		maxlength?: number;
+		min?: number;
+		minlength?: number;
+		multiple?: boolean;
+		name?: string;
+		title?: string;
+		onblur?: (ev: any) => void;
+		onchange?: (ev: any) => void;
+		onclick?: (ev: MouseEvent) => void;
+		ondblclick?: (ev: MouseEvent) => void;
+		ondrag?: (ev: DragEvent) => void;
+		ondragover?: (ev: DragEvent) => void;
+		ondrop?: (ev: DragEvent) => void;
+		onfocus?: (ev: any) => void;
+		oninput?: (ev: any) => void;
+		onkeydown?: (ev: KeyboardEvent) => void;
+		onkeypress?: (ev: KeyboardEvent) => void;
+		onkeyup?: (ev: KeyboardEvent) => void;
+		onmousedown?: (ev: MouseEvent) => void;
+		onmouseup?: (ev: MouseEvent) => void;
+		pattern?: string;
+		placeholder?: string;
+		readonly?: boolean;
+		required?: boolean;
+		requiredSymbol?: string;
+		requiredSymbolColor?: string;
+		rightSnippet?: Snippet;
+		rightSnippetContainerClassName?: string;
+		role?: AriaRole;
+		rows?: number;
+		size?: InputFieldSizeType;
+		step?: number;
+		type?: HTMLInputTypeAttribute | 'textarea';
+		value?: InputValueType;
+	};
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
+	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('')
+	}: InputFieldPropsType = $props();
+
+	let inputRef: HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement | null = $state(null);
+
+	let sizeClassName = $state('');
+	let appearanceClassName = $state('');
+	let floatingLabelClassName = $state('');
+	let floatingLabelPaddingClassName = $state('');
+	let floatingLabelTextClassName = $state('');
+
+	export function focus() {
+		inputRef && inputRef.focus();
+	}
+
+	$effect(() => {
+		if (floatingLabel || leftSnippet != null || rightSnippet != null) {
+			containerClassName = (containerClassName || '') + ' relative';
+		}
+	});
+
+	$effect(() => {
+		if (floatingLabel) {
+			if (size) {
+				let flpcn = '';
+				switch (size) {
+					case 'lg':
+						flpcn = ` px-1 peer-focus:px-1 peer-placeholder-shown:px-4 `;
+						floatingLabelTextClassName = 'text-base';
+						break;
+					case 'md':
+						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2.5 ';
+						floatingLabelTextClassName = 'text-sm';
+
+						break;
+					case 'sm':
+						flpcn = ' px-1 peer-focus:px-1 peer-placeholder-shown:px-2';
+						floatingLabelTextClassName = 'text-xs';
+						break;
+					case 'xs':
+						flpcn = ' px-0 peer-focus:px-0 peer-placeholder-shown:px-1 ';
+						floatingLabelTextClassName = 'text-xs';
+						break;
+				}
+				floatingLabelPaddingClassName = flpcn;
+			}
+
+			floatingLabelClassName = `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-placeholder-shown:bg-transparent peer-focus:bg-white start-1 ${floatingLabelPaddingClassName} ${floatingLabelTextClassName}`;
+		}
+	});
+
+	$effect(() => {
+		if (appearance) {
+			switch (appearance) {
+				case 'normal':
+					appearanceClassName =
+						'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 ';
+					break;
+				case 'box':
+					appearanceClassName =
+						'bg-gray-50 border border-gray-300 text-gray-900 focus:ring-indigo-500 focus:border-indigo-500   ';
+					break;
+				case 'fill':
+					appearanceClassName =
+						'bg-gray-100 border-0 appearance-none focus:bg-gray-200 focus:outline-none focus:ring-0';
+					break;
+
+				case 'underline':
+					appearanceClassName =
+						'bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600';
+					break;
+				case 'fill-underline':
+					appearanceClassName =
+						'bg-gray-100 border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 focus:border-blue-600';
+					break;
+				case 'none':
+					appearanceClassName =
+						'hover:bg-gray-100 focus:bg-gray-100 border-0 focus:outline-none focus:ring-0 appearance-none';
+					break;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (size) {
+			switch (size) {
+				case 'lg':
+					sizeClassName = 'p-4 text-base';
+					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;
+			}
+		}
+	});
+
+	$effect(() => {
+		if (name && !id) {
+			id = name;
+		} else if (id && !name) {
+			name = id;
+		}
+	});
+
+	$effect(() => {
+		if (inputRef && autofocus) {
+			inputRef.focus();
+		}
+	});
+</script>
+
+{#snippet labelSnippet()}
+	<Label
+		forName={id}
+		{label}
+		className="{floatingLabelClassName} {labelClassName}"
+		{required}
+		{requiredSymbolColor}
+		{requiredSymbol}
+		{hasRequiredSymbol}
+	/>
+{/snippet}
+
+{#if !floatingLabel && label}
+	{@render labelSnippet()}
+{/if}
+
+<div class="w-full {containerClassName}">
+	{#if leftSnippet}
+		<div
+			class="absolute flex items-center justify-center left-children {leftSnippetContainerClassName}"
+		>
+			{@render leftSnippet()}
+		</div>
+	{/if}
+
+	{#if type == 'textarea'}
+		<textarea
+			bind:this={inputRef}
+			bind:value
+			class="block w-full peer {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			{id}
+			{name}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{rows}
+			{cols}
+			{onchange}
+			{oninput}
+			{onfocus}
+			{onblur}
+			{ondblclick}
+			{onclick}
+			{onmousedown}
+			{onmouseup}
+			{onkeydown}
+			{onkeyup}
+			{onkeypress}
+			{ondrop}
+			{ondrag}
+			{ondragover}
+		></textarea>
+	{:else}
+		<input
+			bind:this={inputRef}
+			bind:value
+			class="block w-full peer {appearanceClassName} {sizeClassName} {className}"
+			{title}
+			{type}
+			{id}
+			{name}
+			{placeholder}
+			{required}
+			{disabled}
+			{readonly}
+			{maxlength}
+			{minlength}
+			{min}
+			{max}
+			{step}
+			{pattern}
+			{multiple}
+			{role}
+			{onchange}
+			{oninput}
+			{onfocus}
+			{onblur}
+			{ondblclick}
+			{onclick}
+			{onmousedown}
+			{onmouseup}
+			{onkeydown}
+			{onkeyup}
+			{onkeypress}
+			{ondrop}
+			{ondrag}
+			{ondragover}
+			aria-controls={ariaControls}
+			aria-expanded={ariaExpanded}
+		/>
+	{/if}
+	{#if contentSnippet}
+		<div
+			class="absolute inset-0 pointer-events-none block w-full overflow-hidden {appearanceClassName} {sizeClassName}   {contentSnippetClassName}"
+		>
+			{@render contentSnippet()}
+		</div>
+	{/if}
+	{#if rightSnippet}
+		<div
+			class="absolute flex items-center justify-center right-children {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/{form → input}/components/input-field/input-field.svelte.d.ts

@@ -1,50 +1,64 @@
-export type InputFieldTypesType = 'text' | 'number' | 'date';
 export type InputFieldSizeType = 'lg' | 'md' | 'sm' | 'xs';
-export type InputFieldAppearanceType = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline';
+export type InputFieldAppearanceType = 'normal' | 'box' | 'fill' | 'underline' | 'fill-underline' | 'none';
+export type InputValueType = string | string[] | number | number[] | Date | Date[] | File | File[] | null | undefined;
 export type InputFieldPropsType = {
-    id?: string;
-    label?: string;
-    name?: string;
+    appearance?: InputFieldAppearanceType;
+    ariaControls?: string;
+    ariaExpanded?: boolean;
+    autofocus?: boolean;
     className?: string;
-    value?: string;
-    type?: InputFieldTypesType;
-    labelClassName?: string;
+    cols?: number;
     containerClassName?: string;
-    placeholder?: string;
-    required?: boolean;
+    contentSnippet?: Snippet;
+    contentSnippetClassName?: string;
     disabled?: boolean;
-    autofocus?: boolean;
-    readonly?: boolean;
+    floatingLabel?: boolean;
+    hasRequiredSymbol?: boolean;
+    iconClassName?: string;
+    iconPath?: string;
+    id?: string;
+    label?: string;
+    labelClassName?: string;
+    leftSnippet?: Snippet;
+    leftSnippetContainerClassName?: string;
+    max?: number;
     maxlength?: number;
-    minlength?: number;
     min?: number;
-    max?: number;
-    step?: number;
-    requiredSymbolColor?: string;
-    requiredSymbol?: string;
-    hasRequiredSymbol?: boolean;
-    size?: InputFieldSizeType;
-    appearance?: InputFieldAppearanceType;
-    floatingLabel?: boolean;
-    pattern?: string;
+    minlength?: number;
     multiple?: boolean;
-    iconPath?: string;
-    iconClassName?: string;
-    onchange?: (ev: any) => void;
-    oninput?: (ev: any) => void;
-    onfocus?: (ev: any) => void;
+    name?: string;
+    title?: string;
     onblur?: (ev: any) => void;
-    ondblclick?: (ev: MouseEvent) => void;
+    onchange?: (ev: any) => void;
     onclick?: (ev: MouseEvent) => void;
-    onmousedown?: (ev: MouseEvent) => void;
-    onmouseup?: (ev: MouseEvent) => void;
-    onkeydown?: (ev: KeyboardEvent) => void;
-    onkeyup?: (ev: KeyboardEvent) => void;
-    onkeypress?: (ev: KeyboardEvent) => void;
-    ondrop?: (ev: DragEvent) => void;
+    ondblclick?: (ev: MouseEvent) => void;
     ondrag?: (ev: DragEvent) => void;
     ondragover?: (ev: DragEvent) => void;
+    ondrop?: (ev: DragEvent) => void;
+    onfocus?: (ev: any) => void;
+    oninput?: (ev: any) => void;
+    onkeydown?: (ev: KeyboardEvent) => void;
+    onkeypress?: (ev: KeyboardEvent) => void;
+    onkeyup?: (ev: KeyboardEvent) => void;
+    onmousedown?: (ev: MouseEvent) => void;
+    onmouseup?: (ev: MouseEvent) => void;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    requiredSymbol?: string;
+    requiredSymbolColor?: string;
+    rightSnippet?: Snippet;
+    rightSnippetContainerClassName?: string;
+    role?: AriaRole;
+    rows?: number;
+    size?: InputFieldSizeType;
+    step?: number;
+    type?: HTMLInputTypeAttribute | 'textarea';
+    value?: InputValueType;
 };
+import type { Snippet } from 'svelte';
+import type { HTMLInputTypeAttribute, AriaRole } from 'svelte/elements';
 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;
@@ -60,6 +74,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const InputField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
     [evt: string]: CustomEvent<any>;
-}, {}, {}, "value">;
+}, {}, {
+    focus: () => void;
+}, "value">;
 type InputField = InstanceType<typeof InputField>;
 export default InputField;

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

@@ -0,0 +1,46 @@
+<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-gray-500 {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/number-field/number-field.svelte

@@ -0,0 +1,13 @@
+<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="number" />

package/dist/views/core/input/components/number-field/number-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 NumberField: $$__sveltets_2_IsomorphicComponent<InputFieldPropsType, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    focus: () => void;
+}, "">;
+type NumberField = InstanceType<typeof NumberField>;
+export default NumberField;