mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-06 00:02:13 +00:00
87 lines
2.1 KiB
Svelte
87 lines
2.1 KiB
Svelte
<script lang="ts">
|
|
import { ArrowRight } from 'lucide-svelte'
|
|
import { Button } from './common'
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { forbiddenIds } from './flows/idUtils'
|
|
import { slide } from 'svelte/transition'
|
|
|
|
export let initialId: string
|
|
export let reservedIds: string[] = []
|
|
export let label: string = 'Component ID'
|
|
export let value = initialId
|
|
export let buttonText = ''
|
|
export let btnClasses = '!p-1 !w-[34px] !ml-1'
|
|
export let acceptUnderScores = false
|
|
|
|
let error = ''
|
|
const dispatch = createEventDispatcher()
|
|
const regex = acceptUnderScores ? /^[a-zA-Z][a-zA-Z0-9_]*$/ : /^[a-zA-Z][a-zA-Z0-9]*$/
|
|
|
|
$: validateId(value, reservedIds)
|
|
|
|
function validateId(id: string, reservedIds: string[]) {
|
|
if (id == initialId) {
|
|
error = ''
|
|
return
|
|
}
|
|
if (!regex.test(value)) {
|
|
error = 'The ID must include only letters and numbers and start with a letter'
|
|
} else if (forbiddenIds.includes(value)) {
|
|
error = 'This ID is reserved'
|
|
} else if (reservedIds.some((rid) => rid === value)) {
|
|
error = 'This ID is already in use'
|
|
} else {
|
|
error = ''
|
|
}
|
|
}
|
|
|
|
let inputDiv: HTMLInputElement | undefined = undefined
|
|
|
|
$: inputDiv?.focus()
|
|
</script>
|
|
|
|
<label class="block text-primary">
|
|
{#if label != ''}
|
|
<div class="pb-1 text-sm text-secondary">{label}</div>
|
|
{/if}
|
|
<div class="flex w-full">
|
|
<input
|
|
bind:this={inputDiv}
|
|
autofocus
|
|
type="text"
|
|
bind:value
|
|
class="!w-auto grow"
|
|
on:click|stopPropagation={() => {}}
|
|
on:keydown|stopPropagation={({ key }) => {
|
|
if (key === 'Enter' && error === '' && value !== initialId) {
|
|
dispatch('save', value)
|
|
} else if (key == 'Escape') {
|
|
dispatch('close')
|
|
}
|
|
}}
|
|
on:keypress|stopPropagation
|
|
/>
|
|
<Button
|
|
size="xs"
|
|
color="blue"
|
|
buttonType="button"
|
|
{btnClasses}
|
|
aria-label="Save ID"
|
|
disabled={error != '' || value === initialId}
|
|
on:click={() => {
|
|
dispatch('save', value)
|
|
}}
|
|
>
|
|
{buttonText}<ArrowRight size={18} />
|
|
</Button>
|
|
</div>
|
|
{#if error != ''}
|
|
<div
|
|
transition:slide|local={{ duration: 100 }}
|
|
class="w-full text-sm text-red-600 whitespace-pre-wrap pt-1"
|
|
>
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
</label>
|