Laravel color picker using vanilla-colorful and skypack

color-picker.blade.php

@props([
    'id' => null,
    'value' => null,
    'text' => null,
    'name' => null,
    'default' => null,

])

<div
    {{ $attributes->merge(['title' => $value]) }}
>
    <h4 id="{{ $id }}-text" style="color: {{ $default }}">
        @if($text)
            {{ $text }}
        @endif
    </h4>

    <hex-color-picker @if(!empty($value))color="{{ $value }}"@elseif(!empty($default))color="{{ $default }}"@endif></hex-color-picker>

    <input
        id="{{ $id }}-input"
        name="{{ $name }}"
        type="hidden"
        @if(!empty($value))value="{{ $value }}"@elseif(!empty($default))value="{{ $default }}"@endif
    />
</div>

@push('scripts')
    @once
        <script type="module">
            import 'https://cdn.skypack.dev/vanilla-colorful';

            const picker = document.querySelector('hex-color-picker');
            picker.addEventListener('color-changed', (event) => {
                let input = document.getElementById('{{ $id }}-input')
                let preview = document.getElementById('{{ $id }}-text')
                const newColor = event.detail.value;

                preview.style.color = newColor;

                input.setAttribute('value', newColor);

                input.dispatchEvent(new Event('input', {bubbles: true}))
            });
        </script>
    @endonce
@endpush