@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/dynect/TagsInput.vue

@@ -0,0 +1,388 @@
+<template>
+	<div>
+		<!-- Label -->
+		<DynectFormLabel :label="label" :for="resolvedId" :required="required" :tooltip="tooltip" :class="labelClass" />
+
+		<!-- Tags Input with Optional Dropdown -->
+		<div ref="dropdownRef" class="relative">
+			<TagsInput
+				v-slot="slotProps"
+				v-model="value"
+				:name="name"
+				:disabled="disabled"
+				:required="required"
+				:class="cn(wrapperCls, paddingCls, props.inputWrapperClass)"
+				:aria-invalid="!!errorMessage"
+				:aria-describedby="errorMessage ? `${resolvedId}-error` : description ? `${resolvedId}-description` : undefined"
+			>
+				<slot name="icon" />
+
+				<!-- Tag Badges -->
+				<TagsInputItem
+					v-for="item in slotProps.modelValue"
+					:key="item.toString()"
+					:value="item.toString()"
+					:class="
+						cn(
+							'bg-bg-white border-border-base text-text-heading inline-flex items-center gap-1 rounded-md border font-medium select-none',
+							'data-[state=active]:border-grey-dark',
+							size === 'sm' && 'h-5 gap-1 px-1 py-0.5 text-xs',
+							size === 'base' && 'h-5 gap-1 px-1 py-0.5 text-xs',
+							size === 'lg' && 'h-6.5 gap-1.5 px-1.5 py-1 text-sm',
+							size === 'xl' && 'h-6.5 gap-1.5 px-1.5 py-1 text-sm',
+							tagClass
+						)
+					"
+				>
+					<slot name="tag-prefix" :item="item" />
+					<TagsInputItemText :class="cn('bg-transparent', tagTextClass)" />
+					<TagsInputItemDelete :class="cn('flex items-center justify-center rounded bg-transparent', size === 'sm' && 'size-3', size === 'base' && 'size-3', size === 'lg' && 'size-3.5', size === 'xl' && 'size-3.5', tagDeleteClass)">
+						<slot name="delete-icon">
+							<Icon name="lucide:x" class="size-full" />
+						</slot>
+					</TagsInputItemDelete>
+				</TagsInputItem>
+
+				<!-- Input Field -->
+				<TagsInputInput :id="resolvedId" :placeholder="placeholder" :class="cn(textCls, props.inputClass)" @input="handleInputChange" @focus="handleInputFocus" @keydown.down.prevent="handleArrowDown" @keydown.up.prevent="handleArrowUp" @keydown.enter="handleEnter" />
+
+				<!-- Dropdown Trigger Button -->
+				<button v-if="showTrigger && hasOptions" type="button" :class="cn('order-last ml-auto flex shrink-0 items-center transition-opacity hover:opacity-70', iconCls, props.triggerClass)" @click="toggleDropdown">
+					<slot name="trigger-icon">
+						<Icon name="lucide:chevron-down" :class="cn('h-4 w-4 transition-transform', isOpen && 'rotate-180')" />
+					</slot>
+				</button>
+			</TagsInput>
+
+			<!-- Dropdown Menu (only shown when options exist and dropdown is open) -->
+			<div v-if="hasOptions && isOpen && filteredOptions.length > 0" :class="cn('bg-popover text-popover-foreground border-border-base absolute z-50 mt-1 max-h-72 w-full overflow-hidden rounded-xl border p-1 shadow-md', side === 'top' && 'bottom-full mt-0 mb-1', contentClass)">
+				<div :class="cn('max-h-64 overflow-y-auto', viewportClass)">
+					<button
+						v-for="(item, index) in filteredOptions"
+						:key="getOptionValue(item)"
+						type="button"
+						:disabled="item.disabled"
+						:class="
+							cn(
+								'text-text-body relative flex w-full cursor-default items-center gap-2 rounded-lg px-2 py-1.5 text-left text-sm outline-none select-none',
+								'hover:bg-bg-tertiary focus:bg-bg-tertiary',
+								highlightedIndex === index && 'bg-bg-tertiary',
+								isSelected(getOptionLabel(item)) && 'font-semibold',
+								item.disabled && 'pointer-events-none opacity-50',
+								itemClass
+							)
+						"
+						@click="selectOption(getOptionLabel(item))"
+						@mouseenter="highlightedIndex = index"
+					>
+						<slot name="option" :option="item">
+							<span>{{ getOptionLabel(item) }}</span>
+						</slot>
+
+						<Icon v-if="isSelected(getOptionLabel(item))" name="lucide:check" :class="cn('text-text-body ml-auto size-4', indicatorClass)" />
+					</button>
+				</div>
+			</div>
+
+			<!-- Empty State -->
+			<div v-if="hasOptions && isOpen && filteredOptions.length === 0 && searchQuery" :class="cn('bg-popover text-text-body-subtle border-border-base absolute z-50 mt-1 w-full rounded-xl border p-4 text-center text-sm shadow-md', side === 'top' && 'bottom-full mt-0 mb-1', emptyStateClass)">
+				<slot name="empty">
+					{{ emptyText }}
+				</slot>
+			</div>
+		</div>
+
+		<!-- Description -->
+		<DynectFormDescription v-if="!errorMessage" :id="`${resolvedId}-description`" :description="description" :class="descriptionClass" />
+
+		<!-- Error Message -->
+		<DynectFormError :id="`${resolvedId}-error`" :error="errorMessage" :class="errorClass" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core';
+import { cva } from 'class-variance-authority';
+import { cn, inputSizeClasses } from '@/lib/utils';
+
+export interface TagsInputOption {
+	label: string;
+	value: string | number;
+	disabled?: boolean;
+	[key: string]: any;
+}
+
+type InputSize = 'sm' | 'base' | 'lg' | 'xl';
+type InputState = 'default' | 'success' | 'danger';
+type VariantState = 'default' | 'success' | 'danger' | 'disabled' | 'readonly';
+
+// ── Variants ─────────────────────────────────────────────────────────────────
+const inputWrapperVariants = cva('flex items-center w-full rounded-xl border flex-wrap gap-2', {
+	variants: {
+		state: {
+			default: 'bg-bg-secondary-medium border-border-base-medium focus-within:border-border-brand',
+			success: 'bg-bg-success-soft border-border-success-subtle focus-within:border-border-success',
+			danger: 'bg-bg-danger-soft border-border-danger-subtle focus-within:border-border-danger',
+			disabled: 'bg-bg-disabled border-border-base-medium cursor-not-allowed opacity-60',
+			readonly: 'bg-bg-tertiary border-border-base-medium',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputTextVariants = cva('min-w-20 flex-1 bg-transparent outline-none disabled:cursor-not-allowed', {
+	variants: {
+		state: {
+			default: 'text-text-heading placeholder:text-text-body-subtle',
+			success: 'text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled placeholder:text-text-fg-disabled',
+			readonly: 'text-text-body placeholder:text-text-body-subtle',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+const inputIconVariants = cva('', {
+	variants: {
+		state: {
+			default: 'text-text-body-subtle',
+			success: 'text-text-fg-success-strong',
+			danger: 'text-text-fg-danger-strong',
+			disabled: 'text-text-fg-disabled',
+			readonly: 'text-text-body',
+		},
+	},
+	defaultVariants: { state: 'default' },
+});
+
+export interface AppTagsInputProps {
+	// Core Props
+	options?: TagsInputOption[] | string[] | number[];
+	placeholder?: string;
+	label?: string;
+	name?: string;
+	id?: string;
+	tooltip?: string;
+
+	// Validation Props
+	required?: boolean;
+	disabled?: boolean;
+	readonly?: boolean;
+	description?: string;
+
+	// Appearance Props
+	size?: InputSize;
+	state?: InputState;
+	inputWrapperClass?: string;
+	errorClass?: string;
+	inputClass?: string;
+	tagClass?: string;
+	tagTextClass?: string;
+	tagDeleteClass?: string;
+	contentClass?: string;
+	viewportClass?: string;
+	itemClass?: string;
+	indicatorClass?: string;
+	labelClass?: string;
+	descriptionClass?: string;
+	emptyStateClass?: string;
+	triggerClass?: string;
+
+	// Search/Filter Props
+	emptyText?: string;
+	filterSensitivity?: 'base' | 'accent' | 'case' | 'variant';
+
+	// Position Props
+	side?: 'top' | 'bottom';
+
+	// Feature Props
+	showTrigger?: boolean;
+
+	// Custom Props
+	valueKey?: string;
+	labelKey?: string;
+}
+
+const fallbackId = useId();
+const resolvedId = computed(() => props.id ?? `tags-${fallbackId}`);
+
+const props = withDefaults(defineProps<AppTagsInputProps>(), {
+	placeholder: 'Type and press Enter',
+	size: 'base',
+	emptyText: 'No results found',
+	side: 'bottom',
+	valueKey: 'value',
+	labelKey: 'label',
+	options: () => [],
+	showTrigger: true,
+	filterSensitivity: 'base',
+});
+
+const emit = defineEmits<{
+	change: [value: string[]];
+	'update:open': [value: boolean];
+	search: [value: string];
+}>();
+
+const searchQuery = ref('');
+const isOpen = ref(false);
+const highlightedIndex = ref(0);
+const dropdownRef = ref<HTMLElement | null>(null);
+
+const modelValue = defineModel<string[]>('modelValue', {
+	default: () => [],
+});
+
+// Sync model value to internal value for form field validation
+const { value, errorMessage } = useField(() => props.name || props.id || 'tags-input', undefined, {
+	initialValue: modelValue.value,
+	syncVModel: true,
+});
+
+// Resolve priority: disabled > readonly > explicit state > vee-validate error
+const variantState = computed<VariantState>(() => {
+	if (props.disabled) return 'disabled';
+	if (props.readonly) return 'readonly';
+	if (props.state && props.state !== 'default') return props.state;
+	return errorMessage.value ? 'danger' : 'default';
+});
+
+const sz = computed(() => props.size ?? 'base');
+
+// Precomputed class strings — Vue caches these, zero CVA calls during render
+const wrapperCls = computed(() => inputWrapperVariants({ state: variantState.value }));
+const iconCls = computed(() => inputIconVariants({ state: variantState.value }));
+const textCls = computed(() => inputTextVariants({ state: variantState.value }));
+const paddingCls = computed(() => inputSizeClasses[sz.value]);
+
+// Check if options are provided
+const hasOptions = computed(() => props.options && props.options.length > 0);
+
+// Normalize options to TagsInputOption format
+const normalizedOptions = computed<TagsInputOption[]>(() => {
+	if (!hasOptions.value) return [];
+
+	return props.options!.map((option: TagsInputOption | string | number) => {
+		if (typeof option === 'string' || typeof option === 'number') {
+			return { label: String(option), value: option };
+		}
+		return option as TagsInputOption;
+	});
+});
+
+// Filter options based on search query
+const filteredOptions = computed(() => {
+	if (!searchQuery.value) return normalizedOptions.value;
+	const query = searchQuery.value.toLowerCase();
+	return normalizedOptions.value.filter((option: TagsInputOption) => getOptionLabel(option).toLowerCase().includes(query));
+});
+
+// Helper functions
+const getOptionValue = (option: TagsInputOption): string | number => {
+	return props.valueKey && option[props.valueKey] !== undefined ? option[props.valueKey] : option.value;
+};
+
+const getOptionLabel = (option: TagsInputOption): string => {
+	return props.labelKey && option[props.labelKey] !== undefined ? String(option[props.labelKey]) : option.label;
+};
+
+const isSelected = (label: string): boolean => {
+	return value.value.includes(label);
+};
+
+// Dropdown handlers
+const toggleDropdown = () => {
+	if (hasOptions.value) {
+		isOpen.value = !isOpen.value;
+		emit('update:open', isOpen.value);
+	}
+};
+
+const closeDropdown = () => {
+	isOpen.value = false;
+	highlightedIndex.value = 0;
+	emit('update:open', false);
+};
+
+const handleInputFocus = () => {
+	if (hasOptions.value && searchQuery.value) {
+		isOpen.value = true;
+		emit('update:open', true);
+	}
+};
+
+const handleInputChange = (event: Event) => {
+	const target = event.target as HTMLInputElement;
+	searchQuery.value = target.value;
+};
+
+const selectOption = (label: string) => {
+	if (!isSelected(label)) {
+		value.value = [...value.value, label];
+		emit('change', value.value);
+	}
+	searchQuery.value = '';
+	closeDropdown();
+};
+
+// Keyboard navigation
+const handleArrowDown = () => {
+	if (!isOpen.value && hasOptions.value) {
+		isOpen.value = true;
+		emit('update:open', true);
+		return;
+	}
+
+	if (filteredOptions.value.length > 0) {
+		highlightedIndex.value = (highlightedIndex.value + 1) % filteredOptions.value.length;
+	}
+};
+
+const handleArrowUp = () => {
+	if (filteredOptions.value.length > 0) {
+		highlightedIndex.value = highlightedIndex.value <= 0 ? filteredOptions.value.length - 1 : highlightedIndex.value - 1;
+	}
+};
+
+const handleEnter = (event: KeyboardEvent) => {
+	// If dropdown is open with options, select the highlighted option
+	if (isOpen.value && filteredOptions.value.length > 0 && highlightedIndex.value >= 0) {
+		event.preventDefault();
+		const option = filteredOptions.value[highlightedIndex.value];
+		if (option && !option.disabled) {
+			selectOption(getOptionLabel(option));
+		}
+	}
+	// Otherwise, let TagsInput handle it natively (adds the typed text as a tag)
+};
+
+// Watch search query
+watch(searchQuery, (value: string) => {
+	emit('search', value);
+	if (value && hasOptions.value) {
+		isOpen.value = true;
+		highlightedIndex.value = 0;
+		emit('update:open', true);
+	}
+});
+
+// Watch model value changes
+watch(
+	() => value.value,
+	(newValue: string[], oldValue: string[]) => {
+		modelValue.value = newValue;
+		// Clear search query when a tag is added
+		if (newValue.length > (oldValue?.length || 0)) {
+			searchQuery.value = '';
+		}
+	}
+);
+
+// Close dropdown when clicking outside
+onClickOutside(dropdownRef, () => {
+	if (isOpen.value) {
+		closeDropdown();
+	}
+});
+</script>