lucent-laravel/front/js/svelte/records/elements/UUID.svelte

<script>
    import { getContext } from "svelte";
    import Icon from "../../common/Icon.svelte";
    import { getErrorMessage } from "./errorMessage";
    const channelurl = getContext("channelurl");
    export let validationErrors;
    $: errorMessage = getErrorMessage(validationErrors, field.name);
    export let field;
    export let value;
    export let id;
    export let isCreateMode;
    let readonly = field.readonly && !isCreateMode;

    function generateId(e) {
        e.preventDefault();
        value = self.crypto.randomUUID();
    }
</script>

<div class="mb-0">
    <div class="d-flex justify-content-between">
        <input
            type="text"
            {id}
            class="form-control"
            class:is-invalid={errorMessage}
            bind:value
            autocomplete="off"
            {readonly}
        />
        {#if !readonly}
            <button
                class="btn btn-primary ms-2"
                title="Generate a new UUIDv4"
                on:click={generateId}
            >
                <Icon icon="dice" />
            </button>
        {/if}
    </div>

    {#if errorMessage}
        <div class="invalid-feedback d-block">
            {errorMessage}
        </div>
    {/if}
</div>