windmill/frontend/src/lib/components/ArgEnum.svelte

<script lang="ts">
	import type { EnumType } from '$lib/common'
	import AutoComplete from 'simple-svelte-autocomplete'
	import { createEventDispatcher } from 'svelte'
	import { twMerge } from 'tailwind-merge'

	export let disabled: boolean
	export let value: any
	export let enum_: EnumType
	export let autofocus: boolean | null
	export let defaultValue: string | undefined
	export let valid: boolean
	export let create: boolean
	export let required: boolean
	export let enumLabels: Record<string, string> | undefined = undefined

	const dispatch = createEventDispatcher()

	let customItems: string[] = []

	function onCreate(newItem: string) {
		console.log(newItem)
		customItems = [...customItems, newItem]

		return newItem
	}
</script>

<div class="w-full flex-col">
	<div class="w-full">
		<AutoComplete
			items={[...(required ? [] : ['']), ...(enum_ ? enum_ : []), ...customItems]}
			labelFunction={(val) => (enumLabels ? enumLabels[val] ?? val : val)}
			bind:selectedItem={value}
			inputClassName={twMerge(
				'bg-surface-secondary flex',
				valid
					? ''
					: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'
			)}
			value={value ?? defaultValue}
			hideArrow={true}
			dropdownClassName="!text-sm !py-2 !rounded-sm !border-gray-200 !border !shadow-md !bg-surface-primary"
			className="w-full"
			noInputStyles
			onFocus={() => {
				dispatch('focus')
			}}
			onBlur={() => {
				dispatch('blur')
			}}
			{create}
			{required}
			{onCreate}
			{disabled}
			{autofocus}
			createText="Press enter to use this non-predefined value"
		/>
	</div>
</div>