68 lines
2.2 KiB
PHP
Executable File
68 lines
2.2 KiB
PHP
Executable File
@props([
|
|
'label' => 'Badge colour',
|
|
'model',
|
|
'options' => [],
|
|
])
|
|
|
|
@php
|
|
$currentValue = data_get($this, $model, 'gray');
|
|
$currentHex = \Modules\Helpdesk\Support\Color::css($currentValue);
|
|
$currentText = \Modules\Helpdesk\Support\Color::text($currentValue);
|
|
$currentLabel = \Modules\Helpdesk\Support\Color::label($currentValue);
|
|
@endphp
|
|
|
|
<div {{ $attributes->class('hd-colour-control') }}>
|
|
<div class="hd-colour-control__label">{{ $label }}</div>
|
|
|
|
<div class="hd-colour-control__row">
|
|
<select
|
|
wire:model.live="{{ $model }}"
|
|
class="hd-colour-control__select"
|
|
aria-label="{{ $label }}"
|
|
>
|
|
@foreach ($options as $key => $option)
|
|
<option value="{{ $key }}" style="color: {{ $option['hex'] }};">
|
|
● {{ $option['name'] }} — {{ $option['hex'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<span
|
|
class="hd-colour-control__badge"
|
|
style="background-color: {{ $currentHex }}; color: {{ $currentText }};"
|
|
>
|
|
{{ $currentLabel }}
|
|
</span>
|
|
|
|
<div class="hd-colour-control__swatches" aria-label="Available Helpdesk colours">
|
|
@foreach ($options as $key => $option)
|
|
<button
|
|
type="button"
|
|
wire:click="$set('{{ $model }}', '{{ $key }}')"
|
|
title="{{ $option['name'] }} {{ $option['hex'] }}"
|
|
class="hd-colour-control__swatch"
|
|
style="background-color: {{ $option['hex'] }}"
|
|
>
|
|
<span class="sr-only">Use {{ $option['name'] }}</span>
|
|
</button>
|
|
@endforeach
|
|
</div>
|
|
|
|
<input
|
|
type="color"
|
|
value="{{ $currentHex }}"
|
|
wire:change="$set('{{ $model }}', $event.target.value)"
|
|
class="hd-colour-control__picker"
|
|
aria-label="Choose a custom hex colour"
|
|
/>
|
|
|
|
<input
|
|
type="text"
|
|
wire:model.live.debounce.500ms="{{ $model }}"
|
|
class="hd-colour-control__value"
|
|
placeholder="#ffffff"
|
|
aria-label="Custom hex colour"
|
|
/>
|
|
</div>
|
|
</div>
|