console/src/lib/elements/forms/inputCustomId.svelte

<script lang="ts">
    import { onMount, tick } from 'svelte';
    import { FormItem } from '.';
    export let id: string;
    export let label: string;
    export let value = '';
    export let placeholder = '';
    export let required = false;
    export let autofocus = false;

    let element: HTMLInputElement;
    let unique = true;
    let bench = '';

    const toggle = async () => {
        unique = !unique;
        if (unique) {
            bench = value;
            value = 'unique()';
        } else {
            value = bench;
            await tick();
            element.focus();
        }
    };
    onMount(() => {
        value = 'unique()';
        if (element && autofocus) {
            element.focus();
        }
    });
</script>

<FormItem>
    <label class="label" for={id}>{label}</label>
    <div class="input-text-wrapper is-with-end-button">
        <input
            {placeholder}
            {required}
            type="text"
            class="input-text"
            disabled={unique}
            bind:value
            bind:this={element} />
        <button class="input-button" aria-label="Switch" on:click={toggle} type="button">
            <span class:icon-edit={unique} class:icon-shuffle={!unique} aria-hidden="true" />
        </button>
    </div>
</FormItem>