@finsweet/webflow-apps-utils 1.0.2 → 1.0.4

package/dist/ui/components/input/Input.stories.js

@@ -69,6 +69,26 @@ const meta = {
         minLength: {
             control: 'number',
             description: 'Minimum input length'
+        },
+        showSteppers: {
+            control: 'boolean',
+            description: 'Shows increment/decrement buttons for number inputs (requires type="number")'
+        },
+        step: {
+            control: 'number',
+            description: 'Step value for increment/decrement (default: 1)'
+        },
+        min: {
+            control: 'number',
+            description: 'Minimum value for number input'
+        },
+        max: {
+            control: 'number',
+            description: 'Maximum value for number input'
+        },
+        debounce: {
+            control: 'number',
+            description: 'Debounce delay in milliseconds for input events (0 = no debounce)'
         }
     }
 };
@@ -109,6 +129,88 @@ export const NumberInput = {
         placeholder: 'Enter a number...'
     }
 };
+// Stepper functionality
+export const NumberWithSteppers = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '10',
+        placeholder: 'Enter a number...'
+    }
+};
+export const SteppersWithCustomStep = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '5',
+        step: 5,
+        placeholder: 'Increments by 5...'
+    }
+};
+export const SteppersWithMinMax = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '50',
+        min: 0,
+        max: 100,
+        step: 10,
+        placeholder: 'Range: 0-100, Step: 10'
+    }
+};
+export const SteppersWithDecimals = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '1.5',
+        step: 0.5,
+        min: 0,
+        max: 10,
+        placeholder: 'Decimal steps...'
+    }
+};
+export const SteppersAtMinValue = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '0',
+        min: 0,
+        max: 100,
+        step: 1,
+        placeholder: 'At minimum value'
+    }
+};
+export const SteppersAtMaxValue = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '100',
+        min: 0,
+        max: 100,
+        step: 1,
+        placeholder: 'At maximum value'
+    }
+};
+export const SteppersDisabled = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '25',
+        disabled: true,
+        step: 5,
+        placeholder: 'Disabled with steppers'
+    }
+};
+export const SteppersReadonly = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '75',
+        readonly: true,
+        step: 5,
+        placeholder: 'Readonly with steppers'
+    }
+};
 // States
 export const Disabled = {
     args: {
@@ -335,3 +437,77 @@ export const FormFieldExample = {
         invalid: true
     }
 };
+// Debounce examples
+export const WithDebounce = {
+    args: {
+        placeholder: 'Type fast to see debouncing...',
+        debounce: 300,
+        oninput: (value) => console.log('Debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with 300ms debounce. The oninput event will only fire after you stop typing for 300ms. Check the console to see the difference.'
+            }
+        }
+    }
+};
+export const FastDebounce = {
+    args: {
+        placeholder: 'Fast debounce (100ms)',
+        debounce: 100,
+        oninput: (value) => console.log('Fast debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with a faster 100ms debounce for more responsive but still controlled input handling.'
+            }
+        }
+    }
+};
+export const SlowDebounce = {
+    args: {
+        placeholder: 'Slow debounce (1000ms)',
+        debounce: 1000,
+        oninput: (value) => console.log('Slow debounced input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with a slower 1000ms debounce for heavy operations that should only run after the user has finished typing.'
+            }
+        }
+    }
+};
+export const NoDebounce = {
+    args: {
+        placeholder: 'No debounce (immediate)',
+        debounce: 0,
+        oninput: (value) => console.log('Immediate input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Input with no debouncing (debounce: 0). Events fire immediately on every keystroke.'
+            }
+        }
+    }
+};
+export const DebounceWithSteppers = {
+    args: {
+        type: 'number',
+        showSteppers: true,
+        value: '10',
+        debounce: 500,
+        placeholder: 'Debounced number input',
+        oninput: (value) => console.log('Debounced stepper input:', value)
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Number input with steppers and debouncing. Both typing and stepper clicks are debounced.'
+            }
+        }
+    }
+};

package/dist/ui/components/input/Input.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import { onMount } from 'svelte';
 
+	import { ChevronIcon } from '../../icons';
 	import { Text, Tooltip } from '..';
 	import type { InputProps } from './types.js';
 
@@ -23,33 +24,84 @@
 		type = 'text',
 		alert = null,
 		pill = null,
+		showSteppers = false,
+		step = 1,
+		min = undefined,
+		max = undefined,
+		debounce = 0,
 		oninput,
 		onblur,
 		onfocus,
 		onkeydown,
+		onValueChange,
 		class: className = '',
 		children,
 		...restProps
 	}: InputProps = $props();
 
+	// Validation: showSteppers can only be used with type="number"
+	if (showSteppers && type !== 'number') {
+		throw new Error('showSteppers can only be used when type="number"');
+	}
+
+	// Validation: showSteppers and units cannot be used together
+	if (showSteppers && units) {
+		throw new Error('showSteppers and units cannot be used together');
+	}
+
 	// Component state using Svelte 5 runes
 	let inputElement: HTMLInputElement | undefined = $state();
 	let pillElement: HTMLSpanElement | undefined = $state();
 	let pillWidth = $state(0);
 
-	// Use writable derived for reactive state management
-	let currInputValue = $derived.by(() => value);
+	// Internal reactive state for input value that updates with steppers
+	let internalValue = $derived(value);
+
+	// Track HTML5 validation state
+	let isValidationInvalid = $state(false);
+
+	// Debounce timer for input events
+	let debounceTimer: ReturnType<typeof setTimeout> | null = $state(null);
+
+	// Use internal value for reactive state management
+	let currInputValue = $derived(internalValue);
 	let computedColor = $derived(currInputValue ? 'var(--actionPrimaryText)' : 'var(--text3)');
 
 	let hasPill = $derived(currInputValue && pill);
 	let hasAlert = $derived(alert?.message);
 
+	// Parse numeric value for stepper operations
+	let numericValue = $derived.by(() => {
+		if (!showSteppers || !currInputValue) return 0;
+		const parsed = parseFloat(currInputValue);
+		return isNaN(parsed) ? 0 : parsed;
+	});
+
+	// Check if increment/decrement buttons should be disabled
+	let canIncrement = $derived.by(() => {
+		if (!showSteppers || disabled || readonly) return false;
+		if (max !== undefined) return numericValue < max;
+		return true;
+	});
+
+	let canDecrement = $derived.by(() => {
+		if (!showSteppers || disabled || readonly) return false;
+		if (min !== undefined) return numericValue > min;
+		return true;
+	});
+
+	// Sync external value prop changes to internal state
+	$effect(() => {
+		internalValue = value;
+	});
+
 	let wrapperClasses = $derived(
 		`
 		webflow-input-wrapper
 		${units ? 'units' : ''}
+		${showSteppers ? 'steppers' : ''}
 		${disabled ? 'disabled' : ''}
-		${invalid || hasAlert ? 'invalid' : ''}
+		${invalid || hasAlert || isValidationInvalid ? 'invalid' : ''}
 		${className}
 	`
 			.trim()
@@ -134,6 +186,82 @@
 		}
 	});
 
+	/**
+	 * Updates validation state based on HTML5 input validity
+	 */
+	const updateValidationState = () => {
+		if (inputElement && type === 'number') {
+			// Check if the input has any validation errors
+			isValidationInvalid = !inputElement.validity.valid;
+		} else {
+			isValidationInvalid = false;
+		}
+	};
+
+	// Update validation state when input value changes
+	$effect(() => {
+		if (inputElement) {
+			// Use setTimeout to ensure the input element has been updated
+			setTimeout(updateValidationState, 0);
+		}
+	});
+
+	// Listen for form reset events to update internal state
+	$effect(() => {
+		if (inputElement) {
+			const form = inputElement.closest('form');
+			if (form) {
+				const handleFormReset = () => {
+					// Use setTimeout to allow the form reset to complete first
+					setTimeout(() => {
+						if (inputElement) {
+							const resetValue = inputElement.value;
+							internalValue = resetValue;
+							updateValidationState();
+						}
+					}, 0);
+				};
+
+				form.addEventListener('reset', handleFormReset);
+
+				return () => {
+					form.removeEventListener('reset', handleFormReset);
+				};
+			}
+		}
+	});
+
+	// Cleanup debounce timer on component destruction
+	$effect(() => {
+		return () => {
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+				debounceTimer = null;
+			}
+		};
+	});
+
+	/**
+	 * Debounced oninput handler
+	 */
+	const debouncedOninput = (inputValue: string) => {
+		if (debounce > 0) {
+			// Clear existing timer
+			if (debounceTimer) {
+				clearTimeout(debounceTimer);
+			}
+
+			// Set new timer
+			debounceTimer = setTimeout(() => {
+				oninput?.(inputValue);
+				debounceTimer = null;
+			}, debounce);
+		} else {
+			// No debouncing, call immediately
+			oninput?.(inputValue);
+		}
+	};
+
 	/**
 	 * Handles input events
 	 */
@@ -141,11 +269,26 @@
 		const target = event.target as HTMLInputElement;
 		const inputValue = target?.value?.trim() || '';
 
+		// Update internal state for reactivity
+		internalValue = inputValue;
+
 		if (pill) {
 			setTimeout(updatePillPosition, 0);
 		}
 
-		oninput?.(inputValue);
+		// Call numeric value change handler for any number input when value is numeric
+		if (type === 'number' && inputValue) {
+			const parsed = parseFloat(inputValue);
+			if (!isNaN(parsed)) {
+				onValueChange?.(parsed);
+			}
+		}
+
+		// Update validation state for real-time feedback
+		updateValidationState();
+
+		// Call debounced oninput handler
+		debouncedOninput(inputValue);
 	};
 
 	/**
@@ -169,9 +312,78 @@
 	 * Handles keydown events
 	 */
 	const handleKeydown = (event: KeyboardEvent) => {
+		// Handle arrow key increments/decrements when steppers are enabled
+		if (showSteppers && !disabled && !readonly) {
+			if (event.key === 'ArrowUp') {
+				event.preventDefault();
+				handleIncrement();
+			} else if (event.key === 'ArrowDown') {
+				event.preventDefault();
+				handleDecrement();
+			}
+		}
+
 		onkeydown?.(event);
 	};
 
+	/**
+	 * Handles increment button click
+	 */
+	const handleIncrement = () => {
+		if (!canIncrement) return;
+
+		const currentNum = numericValue;
+		let newValue = currentNum + step;
+
+		// Apply max constraint
+		if (max !== undefined && newValue > max) {
+			newValue = max;
+		}
+
+		const newStringValue = newValue.toString();
+
+		// Update internal state for reactivity
+		internalValue = newStringValue;
+
+		// Update the input element value directly
+		if (inputElement) {
+			inputElement.value = newStringValue;
+		}
+
+		// Trigger change events
+		onValueChange?.(newValue);
+		debouncedOninput(newStringValue);
+	};
+
+	/**
+	 * Handles decrement button click
+	 */
+	const handleDecrement = () => {
+		if (!canDecrement) return;
+
+		const currentNum = numericValue;
+		let newValue = currentNum - step;
+
+		// Apply min constraint
+		if (min !== undefined && newValue < min) {
+			newValue = min;
+		}
+
+		const newStringValue = newValue.toString();
+
+		// Update internal state for reactivity
+		internalValue = newStringValue;
+
+		// Update the input element value directly
+		if (inputElement) {
+			inputElement.value = newStringValue;
+		}
+
+		// Trigger change events
+		onValueChange?.(newValue);
+		debouncedOninput(newStringValue);
+	};
+
 	/**
 	 * Gets the tooltip background color based on alert type
 	 */
@@ -190,6 +402,78 @@
 	};
 </script>
 
+{#snippet inputField()}
+	<input
+		bind:this={inputElement}
+		{id}
+		class={inputClasses}
+		{placeholder}
+		{readonly}
+		{disabled}
+		{type}
+		{min}
+		{max}
+		{step}
+		maxlength={maxLength}
+		minlength={minLength}
+		value={currInputValue}
+		defaultValue={value}
+		oninput={handleInput}
+		onfocus={handleFocus}
+		onkeydown={handleKeydown}
+		onblur={handleBlur}
+		style="font-size: {fontSize}; color: {computedColor};"
+		{...restProps}
+	/>
+{/snippet}
+
+{#snippet inputWrapper()}
+	<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
+		{#if currInputValue && pill}
+			<span
+				class="pill"
+				class:blue={pill === 'blue'}
+				class:gray={pill === 'gray'}
+				bind:this={pillElement}
+				style="width: {pillWidth}px;"
+			></span>
+		{/if}
+
+		{@render inputField()}
+
+		{#if units && !showSteppers}
+			<div class="input-units-steppers">{units}</div>
+		{/if}
+
+		{#if showSteppers && !units}
+			<div class="input-units-steppers steppers">
+				<button
+					type="button"
+					class="stepper-button stepper-up"
+					disabled={!canIncrement}
+					onclick={handleIncrement}
+					aria-label="Increment value"
+				>
+					<span class="stepper-button-icon">&#8963;</span>
+				</button>
+				<button
+					type="button"
+					class="stepper-button stepper-down"
+					disabled={!canDecrement}
+					onclick={handleDecrement}
+					aria-label="Decrement value"
+				>
+					<span class="stepper-button-icon">&#8963;</span>
+				</button>
+			</div>
+		{/if}
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/snippet}
+
 {#if hasAlert}
 	<Tooltip
 		message={alert?.message || ''}
@@ -206,85 +490,11 @@
 		class="input-tooltip"
 	>
 		{#snippet target()}
-			<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
-				{#if currInputValue && pill}
-					<span
-						class="pill"
-						class:blue={pill === 'blue'}
-						class:gray={pill === 'gray'}
-						bind:this={pillElement}
-						style="width: {pillWidth}px;"
-					></span>
-				{/if}
-
-				<input
-					bind:this={inputElement}
-					{id}
-					class={inputClasses}
-					{placeholder}
-					{readonly}
-					{disabled}
-					{type}
-					maxlength={maxLength}
-					minlength={minLength}
-					value={currInputValue}
-					oninput={handleInput}
-					onfocus={handleFocus}
-					onkeydown={handleKeydown}
-					onblur={handleBlur}
-					style="font-size: {fontSize}; color: {computedColor};"
-					{...restProps}
-				/>
-
-				{#if units}
-					<div class="input-units">{units}</div>
-				{/if}
-
-				{#if children}
-					{@render children()}
-				{/if}
-			</div>
+			{@render inputWrapper()}
 		{/snippet}
 	</Tooltip>
 {:else}
-	<div class={wrapperClasses} style="height: {height}; width: {width};" role="group">
-		{#if currInputValue && pill}
-			<span
-				class="pill"
-				class:blue={pill === 'blue'}
-				class:gray={pill === 'gray'}
-				bind:this={pillElement}
-				style="width: {pillWidth}px;"
-			></span>
-		{/if}
-
-		<input
-			bind:this={inputElement}
-			{id}
-			class={inputClasses}
-			{placeholder}
-			{readonly}
-			{disabled}
-			{type}
-			maxlength={maxLength}
-			minlength={minLength}
-			value={currInputValue}
-			oninput={handleInput}
-			onfocus={handleFocus}
-			onkeydown={handleKeydown}
-			onblur={handleBlur}
-			style="font-size: {fontSize}; color: {computedColor};"
-			{...restProps}
-		/>
-
-		{#if units}
-			<div class="input-units">{units}</div>
-		{/if}
-
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
+	{@render inputWrapper()}
 {/if}
 
 <style>
@@ -324,10 +534,21 @@
 		grid-template-columns: 1fr auto;
 		padding: 0 0 0 4px;
 	}
+
+	.webflow-input-wrapper.steppers {
+		grid-template-columns: 1fr auto;
+		padding: 0 0 0 4px;
+	}
+
 	.webflow-input-wrapper.units .webflow-input {
 		padding-right: 4px;
 	}
-	.input-units {
+
+	.webflow-input-wrapper.steppers .webflow-input {
+		padding-right: 4px;
+	}
+
+	.input-units-steppers {
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -346,6 +567,62 @@
 		text-align: center;
 		opacity: 0.75;
 	}
+
+	.input-units-steppers.steppers {
+		justify-content: center;
+		flex-direction: column;
+		width: 16px;
+		gap: 1px;
+		background-color: var(--border1);
+		margin-top: -2px;
+		margin-bottom: -2px;
+	}
+
+	.stepper-button {
+		border: none;
+		width: 16px;
+		background-color: var(--actionSecondaryBackground);
+		color: var(--text2);
+		font-size: 0.8em;
+		line-height: 1;
+		height: 48%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0;
+		cursor: pointer;
+		transition: background-color 0.2s ease;
+	}
+
+	.stepper-button-icon {
+		width: 8px;
+		height: 5px;
+	}
+
+	.stepper-button:hover:not(:disabled) {
+		background-color: var(--hoverColor);
+	}
+
+	.stepper-button:disabled {
+		opacity: 0.75;
+		cursor: not-allowed;
+	}
+
+	.stepper-up {
+		transform: rotate(0deg);
+		border-radius: 0 1px 0 0;
+	}
+
+	.stepper-down {
+		transform: rotate(180deg);
+		border-radius: 1px 0 0 0;
+	}
+
+	.stepper-button :global(svg) {
+		width: 16px;
+		height: 16px;
+	}
+
 	.webflow-input {
 		padding: 0;
 		margin: 0;