@finsweet/webflow-apps-utils 1.0.1

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

@@ -0,0 +1,422 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { onMount } from 'svelte';
+
+	import { Text, Tooltip } from '..';
+	import type { InputProps } from './types.js';
+
+	let {
+		value = '',
+		placeholder = '',
+		id = 'webflow-input',
+		fontSize = 'var(--font-size-small)',
+		color = '',
+		units = '',
+		height = '24px',
+		width = 'auto',
+		autofocus = false,
+		disabled = false,
+		invalid = false,
+		maxLength = null,
+		minLength = null,
+		readonly = false,
+		type = 'text',
+		alert = null,
+		pill = null,
+		oninput,
+		onblur,
+		onfocus,
+		onkeydown,
+		class: className = '',
+		children,
+		...restProps
+	}: InputProps = $props();
+
+	// 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);
+	let computedColor = $derived(currInputValue ? 'var(--actionPrimaryText)' : 'var(--text3)');
+
+	let hasPill = $derived(currInputValue && pill);
+	let hasAlert = $derived(alert?.message);
+
+	let wrapperClasses = $derived(
+		`
+		webflow-input-wrapper
+		${units ? 'units' : ''}
+		${disabled ? 'disabled' : ''}
+		${invalid || hasAlert ? 'invalid' : ''}
+		${className}
+	`
+			.trim()
+			.replace(/\s+/g, ' ')
+	);
+
+	let inputClasses = $derived(
+		`
+		webflow-input
+		${hasPill ? 'has-pill' : ''}
+	`
+			.trim()
+			.replace(/\s+/g, ' ')
+	);
+
+	// Update pill position when value changes
+	$effect(() => {
+		if (pill && currInputValue) {
+			updatePillPosition();
+		}
+	});
+
+	// Focus management
+	onMount(() => {
+		if (autofocus && inputElement) {
+			inputElement.focus();
+		}
+		updatePillPosition();
+	});
+
+	/**
+	 * Updates the pill position and width based on the current input value
+	 */
+	const updatePillPosition = () => {
+		if (inputElement && pillElement && currInputValue) {
+			// Create a temporary span to measure text width
+			const temp = document.createElement('span');
+			temp.style.display = 'inline-block';
+			temp.style.font = window.getComputedStyle(inputElement).font;
+			temp.style.visibility = 'hidden';
+			temp.style.position = 'absolute';
+			temp.textContent = currInputValue;
+			document.body.appendChild(temp);
+
+			const textWidth = temp.offsetWidth;
+			document.body.removeChild(temp);
+
+			const wrapperWidth = inputElement.parentElement?.clientWidth || 0;
+			const maxPillWidth = wrapperWidth - 8;
+
+			const calculatedWidth = Math.min(Math.max(textWidth, 4) + 8, maxPillWidth);
+			if (pillElement) {
+				pillElement.style.width = `${calculatedWidth}px`;
+			}
+		}
+	};
+
+	/**
+	 * Measures the pill width using canvas for more accurate text measurement
+	 */
+	const measurePillWidth = (text: string) => {
+		if (!text) return;
+
+		const canvas = document.createElement('canvas');
+		const context = canvas.getContext('2d');
+		if (!context) return;
+
+		if (inputElement) {
+			context.font = window.getComputedStyle(inputElement).font;
+		} else {
+			context.font = `normal ${fontSize} Inter`;
+		}
+
+		const metrics = context.measureText(text);
+		pillWidth = Math.max(metrics.width, 4) + 8;
+	};
+
+	// Update pill width when value changes
+	$effect(() => {
+		if (pill && currInputValue) {
+			measurePillWidth(currInputValue);
+		}
+	});
+
+	/**
+	 * Handles input events
+	 */
+	const handleInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		const inputValue = target?.value?.trim() || '';
+
+		if (pill) {
+			setTimeout(updatePillPosition, 0);
+		}
+
+		oninput?.(inputValue);
+	};
+
+	/**
+	 * Handles blur events
+	 */
+	const handleBlur = (event: FocusEvent) => {
+		const target = event.target as HTMLInputElement;
+		const inputValue = target?.value?.trim() || '';
+
+		onblur?.(inputValue);
+	};
+
+	/**
+	 * Handles focus events
+	 */
+	const handleFocus = (event: FocusEvent) => {
+		onfocus?.(event);
+	};
+
+	/**
+	 * Handles keydown events
+	 */
+	const handleKeydown = (event: KeyboardEvent) => {
+		onkeydown?.(event);
+	};
+
+	/**
+	 * Gets the tooltip background color based on alert type
+	 */
+	const getTooltipColor = (alertType: string) => {
+		switch (alertType) {
+			case 'error':
+				return 'var(--redBackground, #ff4d4d)';
+			case 'warning':
+				return 'var(--orangeBackground, #ff9933)';
+			case 'success':
+				return 'var(--greenBackground, #00cc66)';
+			case 'info':
+			default:
+				return 'var(--blueBackground, #4d9fff)';
+		}
+	};
+</script>
+
+{#if hasAlert}
+	<Tooltip
+		message={alert?.message || ''}
+		placement="top"
+		listener="hover"
+		listenerout="hover"
+		showArrow={true}
+		disabled={false}
+		hidden={false}
+		fontColor="var(--actionPrimaryText)"
+		width="max-content"
+		padding="6px"
+		bgColor={getTooltipColor(alert?.type || 'info')}
+		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>
+		{/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>
+{/if}
+
+<style>
+	:global(.input-tooltip) {
+		padding: 0;
+	}
+	input::placeholder {
+		color: var(--text2) !important;
+		opacity: 1; /* Firefox */
+	}
+
+	input::-ms-input-placeholder {
+		/* Edge 12 -18 */
+		color: var(--text2) !important;
+	}
+	.webflow-input-wrapper {
+		position: relative;
+		border: 1px solid var(--border1, #212121);
+		border-radius: 4px;
+		padding: 0 4px;
+		display: grid;
+		grid-template-columns: 1fr;
+		background-color: var(--background1);
+		height: 24px;
+		box-shadow:
+			0px 16px 16px -16px rgba(0, 0, 0, 0.13) inset,
+			0px 12px 12px -12px rgba(0, 0, 0, 0.13) inset,
+			0px 8px 8px -8px rgba(0, 0, 0, 0.17) inset,
+			0px 4px 4px -4px rgba(0, 0, 0, 0.17) inset,
+			0px 3px 3px -3px rgba(0, 0, 0, 0.17) inset,
+			0px 1px 1px -1px rgba(0, 0, 0, 0.13) inset;
+		background: var(--background1);
+		overflow: hidden;
+	}
+
+	.webflow-input-wrapper.units {
+		grid-template-columns: 1fr auto;
+		padding: 0 0 0 4px;
+	}
+	.webflow-input-wrapper.units .webflow-input {
+		padding-right: 4px;
+	}
+	.input-units {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-transform: uppercase;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		justify-self: start;
+		width: 100%;
+		min-width: 16px;
+		padding: 2px;
+		color: #ffffff;
+		font-size: 9px;
+		cursor: not-allowed;
+		user-select: none;
+		text-align: center;
+		opacity: 0.75;
+	}
+	.webflow-input {
+		padding: 0;
+		margin: 0;
+		display: flex;
+		align-items: center;
+		border: none;
+		gap: var(--border-radius, 2px);
+		flex: 1 0 0;
+		color: var(--text3);
+		font-family: Inter;
+		font-size: 11.5px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		width: 100%;
+		background-color: transparent;
+		position: relative;
+		z-index: 2;
+		padding-right: 4px;
+	}
+
+	.webflow-input.has-pill {
+		padding-left: 4px;
+		color: var(--text1);
+	}
+
+	.webflow-input-wrapper:has(.webflow-input:focus) {
+		border: 1px solid var(--blueBorder);
+	}
+	.webflow-input:focus {
+		outline: none;
+	}
+
+	.webflow-input-wrapper.invalid {
+		border: 1px solid var(--redBorder);
+	}
+
+	.webflow-input-wrapper.invalid:has(.webflow-input:focus) {
+		border: 1px solid var(--redBorder);
+	}
+
+	.webflow-input-wrapper.disabled {
+		cursor: not-allowed;
+		border: 1px solid var(--border1);
+	}
+
+	.pill {
+		position: absolute;
+		height: 18px;
+		border-radius: 3px;
+		z-index: 1;
+		top: 2px;
+		left: 4px;
+		max-width: calc(100% - 8px);
+	}
+
+	.pill.blue {
+		background: var(--actionPrimaryBackground);
+	}
+
+	.pill.gray {
+		background: var(--background5);
+	}
+
+	.alert-tooltip {
+		border-radius: 4px;
+		padding: 2px 4px;
+		white-space: nowrap;
+		box-shadow:
+			0px 0.5px 1px 0px #000,
+			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+	}
+</style>

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

@@ -0,0 +1,4 @@
+import type { InputProps } from './types.js';
+declare const Input: import("svelte").Component<InputProps, {}, "">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/ui/components/input/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Input } from './Input.svelte';
+export type * from './types.js';

package/dist/ui/components/input/index.js

@@ -0,0 +1 @@
+export { default as Input } from './Input.svelte';

package/dist/ui/components/input/types.d.ts

@@ -0,0 +1,109 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export type AlertType = 'error' | 'success' | 'info' | 'warning';
+export type PillVariant = 'blue' | 'gray' | null;
+export interface AlertConfig {
+    type: AlertType;
+    message: string;
+}
+export interface InputProps extends Omit<HTMLInputAttributes, 'onblur' | 'onfocus' | 'onkeydown' | 'oninput'> {
+    /**
+     * Input field value
+     */
+    value?: string;
+    /**
+     * Input field placeholder
+     */
+    placeholder?: string;
+    /**
+     * Input field id
+     */
+    id?: string;
+    /**
+     * Input field font size
+     */
+    fontSize?: string;
+    /**
+     * Input field font color
+     */
+    color?: string;
+    /**
+     * Optional: If set it will add an element to the right of the input field and show the unit
+     */
+    units?: string;
+    /**
+     * Input field height, default is auto
+     */
+    height?: string;
+    /**
+     * Input field width, default is auto
+     */
+    width?: string;
+    /**
+     * If true, the input field will be focused when the component is mounted
+     */
+    autofocus?: boolean;
+    /**
+     * If true, the input field will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input field will be invalid
+     */
+    invalid?: boolean;
+    /**
+     * Defines the maximum length of the input field
+     */
+    maxLength?: number | null;
+    /**
+     * Defines the minimum length of the input field
+     */
+    minLength?: number | null;
+    /**
+     * If true, the input field will be readonly
+     */
+    readonly?: boolean;
+    /**
+     * Defines the type of the input field
+     */
+    type?: string;
+    /**
+     * Defines the message to show
+     */
+    alert?: AlertConfig | null;
+    /**
+     * If set, wraps the input value with a pill background
+     * Possible values: 'blue', 'gray', or null/undefined for no pill
+     */
+    pill?: PillVariant;
+    /**
+     * Event handler for input changes - receives the trimmed string value
+     */
+    oninput?: (value: string) => void;
+    /**
+     * Event handler for blur events - receives the trimmed string value
+     */
+    onblur?: (value: string) => void;
+    /**
+     * Event handler for focus events - receives the standard FocusEvent
+     */
+    onfocus?: (event: FocusEvent) => void;
+    /**
+     * Event handler for keydown events - receives the standard KeyboardEvent
+     */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Children content (if any)
+     */
+    children?: Snippet;
+}
+export interface InputEvent {
+    value: string;
+}
+export interface BlurEvent {
+    value: string;
+}

package/dist/ui/components/input/types.js

@@ -0,0 +1 @@
+export {};