@finsweet/webflow-apps-utils 1.0.50 → 1.0.52

package/dist/ui/components/tags/TagsInput.svelte

@@ -0,0 +1,492 @@
+<script lang="ts">
+	import { TimesIcon } from '../../icons';
+
+	import Loader from '../Loader.svelte';
+	import { Tooltip } from '../tooltip';
+	import type { TagsInputProps } from './types.js';
+
+	let {
+		value = $bindable([]),
+		placeholder = 'Add tag...',
+		id = 'tags-input',
+		disabled = false,
+		loading = false,
+		invalid = false,
+		readonly = false,
+		alert = null,
+		maxTags = null,
+		minTags = null,
+		maxTagLength = null,
+		separatorKeys = ['Enter', ','],
+		allowDuplicates = false,
+		validateTag,
+		trimTags = true,
+		width = '100%',
+		height = 'auto',
+		class: className = '',
+		onValueChange,
+		onTagAdd,
+		onTagRemove,
+		onInvalidTag,
+		onfocus,
+		onblur,
+		onkeydown,
+		children,
+		...restProps
+	}: TagsInputProps = $props();
+
+	// Component state
+	let inputElement: HTMLInputElement | undefined = $state();
+	let inputValue = $state('');
+	let isFocused = $state(false);
+
+	// Derived states
+	let isDisabled = $derived(disabled || loading);
+	let canAddMore = $derived(maxTags === null || value.length < maxTags);
+	let showPlaceholder = $derived(value.length === 0 && !inputValue);
+	let hasAlert = $derived(alert?.message);
+
+	// Validation state
+	let isMinTagsInvalid = $derived.by(() => {
+		if (minTags === null) return false;
+		return value.length < minTags;
+	});
+
+	// Derived alert state for styling
+	let alertType = $derived(alert?.type || null);
+	let isErrorAlert = $derived(alertType === 'error' || alertType === 'warning');
+	let isSuccessAlert = $derived(alertType === 'success');
+
+	// CSS classes
+	let wrapperClasses = $derived(
+		`
+		tags-input-wrapper
+		${isDisabled ? 'disabled' : ''}
+		${readonly ? 'readonly' : ''}
+		${invalid || isErrorAlert || isMinTagsInvalid ? 'invalid' : ''}
+		${isSuccessAlert ? 'success' : ''}
+		${isFocused ? 'focused' : ''}
+		${loading ? 'loading' : ''}
+		${className}
+	`
+			.trim()
+			.replace(/\s+/g, ' ')
+	);
+
+	/**
+	 * Focus the input element
+	 */
+	const focusInput = () => {
+		if (inputElement && !readonly && !isDisabled) {
+			inputElement.focus();
+		}
+	};
+
+	/**
+	 * Validates a tag before adding
+	 */
+	const validateTagValue = (tag: string): { valid: boolean; reason?: string } => {
+		const trimmedTag = trimTags ? tag.trim() : tag;
+
+		if (!trimmedTag) {
+			return { valid: false, reason: 'Tag cannot be empty' };
+		}
+
+		if (maxTagLength !== null && trimmedTag.length > maxTagLength) {
+			return { valid: false, reason: `Tag exceeds maximum length of ${maxTagLength}` };
+		}
+
+		if (!allowDuplicates && value.includes(trimmedTag)) {
+			return { valid: false, reason: 'Duplicate tag' };
+		}
+
+		if (!canAddMore) {
+			return { valid: false, reason: `Maximum of ${maxTags} tags allowed` };
+		}
+
+		if (validateTag) {
+			const customValidation = validateTag(trimmedTag);
+			if (customValidation === false) {
+				return { valid: false, reason: 'Invalid tag' };
+			}
+			if (typeof customValidation === 'string') {
+				return { valid: false, reason: customValidation };
+			}
+		}
+
+		return { valid: true };
+	};
+
+	/**
+	 * Adds a new tag
+	 */
+	const addTag = (rawTag: string) => {
+		if (readonly || isDisabled) return;
+
+		const tag = trimTags ? rawTag.trim() : rawTag;
+		const validation = validateTagValue(tag);
+
+		if (!validation.valid) {
+			onInvalidTag?.(tag, validation.reason || 'Invalid tag');
+			return false;
+		}
+
+		inputValue = '';
+		value = [...value, tag];
+
+		onTagAdd?.(tag);
+		onValueChange?.(value);
+
+		return true;
+	};
+
+	/**
+	 * Removes a tag at the specified index
+	 */
+	const removeTag = (index: number) => {
+		if (readonly || isDisabled) return;
+
+		const removedTag = value[index];
+		value = value.filter((_, i) => i !== index);
+
+		onTagRemove?.(removedTag, index);
+		onValueChange?.(value);
+
+		// Focus back to input after removal
+		focusInput();
+	};
+
+	/**
+	 * Handles input changes
+	 */
+	const handleInput = (event: Event) => {
+		const target = event.target as HTMLInputElement;
+		const newValue = target.value;
+
+		// Check if a separator key was typed (e.g., comma)
+		for (const separator of separatorKeys) {
+			if (separator.length === 1 && newValue.includes(separator)) {
+				const parts = newValue.split(separator);
+				for (let i = 0; i < parts.length - 1; i++) {
+					if (parts[i].trim()) {
+						addTag(parts[i]);
+					}
+				}
+				inputValue = parts[parts.length - 1];
+				return;
+			}
+		}
+
+		inputValue = newValue;
+	};
+
+	/**
+	 * Handles keydown events
+	 */
+	const handleKeydown = (event: KeyboardEvent) => {
+		// Check for separator keys (e.g., Enter)
+		if (separatorKeys.includes(event.key)) {
+			event.preventDefault();
+			if (inputValue.trim()) {
+				addTag(inputValue);
+			}
+			return;
+		}
+
+		// Handle Backspace to remove last tag when input is empty
+		if (event.key === 'Backspace' && inputValue === '' && value.length > 0) {
+			removeTag(value.length - 1);
+			return;
+		}
+
+		// Handle Tab to add tag if there's input
+		if (event.key === 'Tab' && inputValue.trim()) {
+			event.preventDefault();
+			addTag(inputValue);
+			return;
+		}
+
+		onkeydown?.(event);
+	};
+
+	/**
+	 * Handles focus events
+	 */
+	const handleFocus = (event: FocusEvent) => {
+		isFocused = true;
+		onfocus?.(event);
+	};
+
+	/**
+	 * Handles blur events
+	 */
+	const handleBlur = (event: FocusEvent) => {
+		isFocused = false;
+
+		// Add any remaining input as a tag on blur
+		if (inputValue.trim()) {
+			addTag(inputValue);
+		}
+
+		onblur?.(event);
+	};
+
+	/**
+	 * Handles wrapper click to focus input
+	 */
+	const handleWrapperClick = () => {
+		focusInput();
+	};
+
+	/**
+	 * Gets the tooltip background color based on alert type
+	 */
+	const getTooltipColor = (alertType: string) => {
+		switch (alertType) {
+			case 'error':
+				return 'var(--redBackground)';
+			case 'warning':
+				return 'var(--orangeBackground)';
+			case 'success':
+				return 'var(--greenBackground)';
+			case 'info':
+			default:
+				return 'var(--actionPrimaryBackground)';
+		}
+	};
+</script>
+
+{#snippet tagsInputContent()}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		class={wrapperClasses}
+		style="width: {width}; min-height: {height};"
+		role="group"
+		aria-labelledby="{id}-label"
+		onclick={handleWrapperClick}
+		onkeydown={(e) => e.key === 'Enter' && handleWrapperClick()}
+	>
+		<div class="tags-input-content">
+			{#each value as tag, index (`${index}-${tag}`)}
+				<span class="tag" role="listitem">
+					<span class="tag-text">{tag}</span>
+					{#if !readonly && !isDisabled}
+						<button
+							type="button"
+							class="tag-remove"
+							onclick={(e) => {
+								e.stopPropagation();
+								removeTag(index);
+							}}
+							aria-label="Remove tag {tag}"
+							tabindex={-1}
+						>
+							<TimesIcon />
+						</button>
+					{/if}
+				</span>
+			{/each}
+
+			{#if !readonly}
+				<input
+					bind:this={inputElement}
+					{id}
+					type="text"
+					class="tags-input-field"
+					placeholder={showPlaceholder ? placeholder : ''}
+					value={inputValue}
+					disabled={isDisabled || !canAddMore}
+					oninput={handleInput}
+					onkeydown={handleKeydown}
+					onfocus={handleFocus}
+					onblur={handleBlur}
+					aria-label="Add new tag"
+					{...restProps}
+				/>
+			{/if}
+
+			{#if loading}
+				<div class="tags-input-loader">
+					<Loader size={14} color="var(--text2)" />
+				</div>
+			{/if}
+		</div>
+
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+{/snippet}
+
+<Tooltip
+	message={hasAlert ? alert?.message || '' : ''}
+	placement="top"
+	listener="hover"
+	listenerout="hover"
+	showArrow={true}
+	hidden={!hasAlert}
+	disabled={!hasAlert || !alert?.message}
+	fontColor="var(--actionPrimaryText)"
+	width="max-content"
+	padding="6px"
+	bgColor={getTooltipColor(alert?.type || 'info')}
+	class="tags-input-tooltip"
+>
+	{#snippet target()}
+		{@render tagsInputContent()}
+	{/snippet}
+</Tooltip>
+
+<style>
+	:global(.tags-input-tooltip) {
+		padding: 0;
+	}
+
+	.tags-input-wrapper {
+		position: relative;
+		border: 1px solid var(--border3);
+		border-radius: var(--border-radius);
+		padding: 4px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+		background: var(--background1);
+		min-height: 32px;
+		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;
+		cursor: text;
+	}
+
+	.tags-input-wrapper.focused {
+		border-color: var(--blueBorder);
+	}
+
+	.tags-input-wrapper.invalid {
+		border-color: var(--redBorder);
+	}
+
+	.tags-input-wrapper.success {
+		border-color: var(--greenBorder);
+	}
+
+	.tags-input-wrapper.disabled,
+	.tags-input-wrapper.readonly {
+		cursor: not-allowed;
+		opacity: 0.7;
+		border-color: var(--border1);
+	}
+
+	.tags-input-wrapper.loading {
+		cursor: wait;
+	}
+
+	.tags-input-content {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-start;
+		align-content: flex-start;
+		gap: 4px;
+		width: 100%;
+	}
+
+	.tag {
+		position: relative;
+		display: flex;
+		padding: 4px 8px;
+		justify-content: center;
+		align-items: center;
+		border-radius: var(--border-radius);
+		background: var(--actionSecondaryBackground);
+		color: var(--text1);
+		font-size: var(--font-size-small);
+		font-weight: var(--font-weight-normal);
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		box-shadow:
+			0 0.5px 1px 0 #000,
+			0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
+		user-select: none;
+		max-width: 100%;
+		min-width: 0;
+	}
+
+	.tag-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+
+	.tag-remove {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: max-content;
+		padding: 4px;
+		border: none;
+		background: #464646;
+		color: var(--text2);
+		cursor: pointer;
+		border-radius: 0 var(--border-radius) var(--border-radius) 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	.tags-input-wrapper:not(.disabled) .tag:hover .tag-remove {
+		opacity: 1;
+		pointer-events: auto;
+	}
+
+	.tag-remove:not(:disabled) {
+		color: var(--text1);
+	}
+
+	.tag-remove:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.tag-remove :global(svg) {
+		width: 10px;
+		height: 10px;
+	}
+
+	.tags-input-field {
+		flex: 1;
+		min-width: 60px;
+		padding: 4px 8px;
+		border: none;
+		background: transparent;
+		color: var(--text1);
+		font-size: var(--font-size-small);
+		font-family: inherit;
+		line-height: 16px;
+		letter-spacing: -0.115px;
+		outline: none;
+	}
+
+	.tags-input-field::placeholder {
+		color: var(--text3);
+	}
+
+	.tags-input-field:disabled {
+		cursor: not-allowed;
+	}
+
+	.tags-input-loader {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0 4px;
+	}
+</style>

package/dist/ui/components/tags/TagsInput.svelte.d.ts

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

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

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

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

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

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

@@ -0,0 +1,123 @@
+import type { Snippet } from 'svelte';
+import type { AlertConfig } from '../input/types.js';
+export interface TagsInputProps {
+    /**
+     * Array of tag values
+     */
+    value?: string[];
+    /**
+     * Placeholder text when no tags and input is empty
+     */
+    placeholder?: string;
+    /**
+     * Input field id
+     */
+    id?: string;
+    /**
+     * If true, the input field will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the component will show loading state
+     */
+    loading?: boolean;
+    /**
+     * If true, the input field will be invalid
+     */
+    invalid?: boolean;
+    /**
+     * If true, the input field will be readonly (no adding/removing tags)
+     */
+    readonly?: boolean;
+    /**
+     * Defines the alert message to show
+     */
+    alert?: AlertConfig | null;
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number | null;
+    /**
+     * Minimum number of tags required (for validation display)
+     */
+    minTags?: number | null;
+    /**
+     * Maximum length of each tag
+     */
+    maxTagLength?: number | null;
+    /**
+     * Separator keys to trigger tag creation (default: ['Enter', ','])
+     */
+    separatorKeys?: string[];
+    /**
+     * Whether to allow duplicate tags (default: false)
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Custom validation function for tags
+     * Return true if valid, false or error message string if invalid
+     */
+    validateTag?: (tag: string) => boolean | string;
+    /**
+     * Whether to trim whitespace from tags (default: true)
+     */
+    trimTags?: boolean;
+    /**
+     * Custom width for the component
+     */
+    width?: string;
+    /**
+     * Custom height for the component
+     */
+    height?: string;
+    /**
+     * Additional CSS classes
+     */
+    class?: string;
+    /**
+     * Event handler for value changes
+     */
+    onValueChange?: (tags: string[]) => void;
+    /**
+     * Event handler for individual tag addition
+     */
+    onTagAdd?: (tag: string) => void;
+    /**
+     * Event handler for individual tag removal
+     */
+    onTagRemove?: (tag: string, index: number) => void;
+    /**
+     * Event handler for invalid tag attempt
+     */
+    onInvalidTag?: (tag: string, reason: string) => void;
+    /**
+     * Event handler for focus events
+     */
+    onfocus?: (event: FocusEvent) => void;
+    /**
+     * Event handler for blur events
+     */
+    onblur?: (event: FocusEvent) => void;
+    /**
+     * Event handler for keydown events
+     */
+    onkeydown?: (event: KeyboardEvent) => void;
+    /**
+     * Children content (if any)
+     */
+    children?: Snippet;
+}
+export interface TagAddEvent {
+    tag: string;
+}
+export interface TagRemoveEvent {
+    tag: string;
+    index: number;
+}
+export interface InvalidTagEvent {
+    tag: string;
+    reason: string;
+}
+export interface TagsValueChangeEvent {
+    tags: string[];
+}

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

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

package/dist/ui/icons/CheckCircleIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 12 12" fill="none">
 	<path
 		fill-rule="evenodd"
 		clip-rule="evenodd"

package/dist/ui/icons/CheckCircleOutlinedIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 14 14" fill="none">
 	<path
 		opacity="0.4"
 		fill-rule="evenodd"

package/dist/ui/icons/CloseCircleIcon.svelte

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16" fill="none">
 	<path
 		d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM11.53 10.47L10.47 11.53L8 9.06L5.53 11.53L4.47 10.47L6.94 8L4.47 5.53L5.53 4.47L8 6.94L10.47 4.47L11.53 5.53L9.06 8L11.53 10.47Z"
 		fill="currentColor"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {