Joseph.Rawlings
760cf84451
- Introduced AdminLTE CSS variables for color palette, body colors, card styles, and button styles. - Implemented card components with variants for primary, success, warning, danger, and info. - Added button styles including sizes and outline variants. - Created form controls, select inputs, and input groups with consistent styling. - Included utility classes for text and background colors, gradients, and shadows. - Developed components for badges, alerts, callouts, progress bars, tables, small boxes, and info boxes. - Integrated modal, dropdown, spinner, tooltip, and direct chat styles. - Established timeline and close button styles, with dark mode support for specific components.
383 lines
12 KiB
PHP
383 lines
12 KiB
PHP
{{--
|
|
Editable Field Component - AdminLTE style
|
|
A field with display value and edit button that opens a modal
|
|
|
|
Usage:
|
|
<x-proxmox::ui.editable-field
|
|
label="Hostname"
|
|
:value="$server->hostname"
|
|
:editing="$isEditingHostname"
|
|
wire:model="hostname"
|
|
edit-click="startEditingHostname"
|
|
cancel-click="cancelEditingHostname"
|
|
save-click="updateHostname"
|
|
>
|
|
<x-slot:hint>
|
|
Additional information about the field...
|
|
</x-slot:hint>
|
|
</x-proxmox::ui.editable-field>
|
|
--}}
|
|
|
|
@props([
|
|
'label',
|
|
'value',
|
|
'placeholder' => null,
|
|
'editing' => false,
|
|
'editClick' => null,
|
|
'cancelClick' => null,
|
|
'saveClick' => null,
|
|
'applyClick' => null,
|
|
'applyLabel' => 'Save & Apply',
|
|
'error' => null,
|
|
])
|
|
|
|
<style>
|
|
.editable-field-lte {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.editable-field-lte-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
.editable-field-lte-display {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
padding: 0.625rem 1rem;
|
|
background-color: #f8f9fa;
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
font-size: 0.875rem;
|
|
}
|
|
.editable-field-lte-value {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: #212529;
|
|
}
|
|
.editable-field-lte-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: #adb5bd;
|
|
cursor: pointer;
|
|
transition: color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.editable-field-lte-btn:hover {
|
|
color: var(--lte-primary, #0d6efd);
|
|
}
|
|
.editable-field-lte-btn svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
.editable-field-lte-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 99998;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
.editable-field-lte-modal-container {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 99999;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1rem;
|
|
}
|
|
.editable-field-lte-modal {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 36rem;
|
|
background-color: #fff;
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
padding: 1.5rem;
|
|
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
|
}
|
|
.editable-field-lte-modal-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
.editable-field-lte-modal-title {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: #212529;
|
|
}
|
|
.editable-field-lte-modal-close {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
color: var(--lte-secondary, #6c757d);
|
|
cursor: pointer;
|
|
transition: all var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.editable-field-lte-modal-close:hover {
|
|
background-color: #f8f9fa;
|
|
color: #212529;
|
|
}
|
|
.editable-field-lte-modal-close svg {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
}
|
|
.editable-field-lte-modal-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
.editable-field-lte-input-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.editable-field-lte-input-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: var(--lte-secondary, #6c757d);
|
|
}
|
|
.editable-field-lte-input {
|
|
width: 100%;
|
|
height: 2.75rem;
|
|
padding: 0 1rem;
|
|
font-size: 0.875rem;
|
|
color: #212529;
|
|
background-color: #fff;
|
|
border: 1px solid #ced4da;
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
.editable-field-lte-input:focus {
|
|
border-color: #86b7fe;
|
|
outline: 0;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
|
|
}
|
|
.editable-field-lte-input::placeholder {
|
|
color: #adb5bd;
|
|
}
|
|
.editable-field-lte-error {
|
|
font-size: 0.875rem;
|
|
color: var(--lte-danger, #dc3545);
|
|
}
|
|
.editable-field-lte-hint {
|
|
font-size: 0.8125rem;
|
|
color: var(--lte-secondary, #6c757d);
|
|
}
|
|
.editable-field-lte-modal-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 0.75rem;
|
|
padding-top: 1rem;
|
|
margin-top: 0.5rem;
|
|
border-top: 1px solid var(--lte-border-color, #dee2e6);
|
|
}
|
|
.editable-field-lte-modal-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0.625rem 1rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: var(--lte-border-radius, 0.375rem);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.editable-field-lte-modal-btn-cancel {
|
|
background-color: #fff;
|
|
color: #495057;
|
|
border: 1px solid var(--lte-border-color, #dee2e6);
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
.editable-field-lte-modal-btn-cancel:hover {
|
|
background-color: #f8f9fa;
|
|
border-color: #adb5bd;
|
|
}
|
|
.editable-field-lte-modal-btn-save {
|
|
background-color: var(--lte-primary, #0d6efd);
|
|
color: #fff;
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.editable-field-lte-modal-btn-save:hover {
|
|
background-color: #0b5ed7;
|
|
}
|
|
/* Dark mode */
|
|
.dark .editable-field-lte-label {
|
|
color: #d1d5db;
|
|
}
|
|
.dark .editable-field-lte-display {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
}
|
|
.dark .editable-field-lte-value {
|
|
color: #e5e7eb;
|
|
}
|
|
.dark .editable-field-lte-btn {
|
|
color: #6b7280;
|
|
}
|
|
.dark .editable-field-lte-modal {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
}
|
|
.dark .editable-field-lte-modal-title {
|
|
color: #f3f4f6;
|
|
}
|
|
.dark .editable-field-lte-modal-close {
|
|
color: #9ca3af;
|
|
}
|
|
.dark .editable-field-lte-modal-close:hover {
|
|
background-color: #374151;
|
|
color: #f3f4f6;
|
|
}
|
|
.dark .editable-field-lte-input {
|
|
background-color: #111827;
|
|
border-color: #374151;
|
|
color: #f3f4f6;
|
|
}
|
|
.dark .editable-field-lte-input:focus {
|
|
border-color: var(--lte-primary, #0d6efd);
|
|
}
|
|
.dark .editable-field-lte-input::placeholder {
|
|
color: #6b7280;
|
|
}
|
|
.dark .editable-field-lte-modal-footer {
|
|
border-top-color: #374151;
|
|
}
|
|
.dark .editable-field-lte-modal-btn-cancel {
|
|
background-color: #374151;
|
|
color: #d1d5db;
|
|
border-color: #4b5563;
|
|
}
|
|
.dark .editable-field-lte-modal-btn-cancel:hover {
|
|
background-color: #4b5563;
|
|
}
|
|
</style>
|
|
|
|
<div class="editable-field-lte" x-data="{ showEditModal: @entangle($attributes->wire('model')->value() ? 'isEditing' . ucfirst($label) : 'editing') }">
|
|
<label class="editable-field-lte-label">{{ $label }}</label>
|
|
<div class="editable-field-lte-display">
|
|
<span class="editable-field-lte-value">{{ $value ?? 'Not set' }}</span>
|
|
@if($editClick)
|
|
<button
|
|
wire:click="{{ $editClick }}"
|
|
type="button"
|
|
class="editable-field-lte-btn"
|
|
aria-label="Edit {{ $label }}"
|
|
>
|
|
<x-ri-edit-line />
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if($editing !== false)
|
|
<!-- Edit Modal Backdrop -->
|
|
<div
|
|
x-cloak
|
|
x-show="showEditModal"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
|
|
@keydown.escape.window="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
|
|
class="editable-field-lte-backdrop"
|
|
></div>
|
|
|
|
<!-- Edit Modal -->
|
|
<div
|
|
x-cloak
|
|
x-show="showEditModal"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 scale-95"
|
|
x-transition:enter-end="opacity-100 scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 scale-100"
|
|
x-transition:leave-end="opacity-0 scale-95"
|
|
@click.away="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
|
|
class="editable-field-lte-modal-container"
|
|
>
|
|
<div class="editable-field-lte-modal">
|
|
<div class="editable-field-lte-modal-header">
|
|
<h4 class="editable-field-lte-modal-title">Edit {{ $label }}</h4>
|
|
<button
|
|
type="button"
|
|
class="editable-field-lte-modal-close"
|
|
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
|
|
aria-label="Close"
|
|
>
|
|
<x-ri-close-line />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="editable-field-lte-modal-body">
|
|
<div class="editable-field-lte-input-group">
|
|
<label class="editable-field-lte-input-label">{{ $label }}</label>
|
|
<input
|
|
type="text"
|
|
{{ $attributes->whereStartsWith('wire:model') }}
|
|
class="editable-field-lte-input"
|
|
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
|
|
/>
|
|
</div>
|
|
|
|
@if($error)
|
|
<div class="editable-field-lte-error">{{ $error }}</div>
|
|
@endif
|
|
|
|
@if(isset($hint))
|
|
<div class="editable-field-lte-hint">{{ $hint }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="editable-field-lte-modal-footer">
|
|
@if($cancelClick)
|
|
<button
|
|
type="button"
|
|
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
|
|
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-cancel"
|
|
>
|
|
Cancel
|
|
</button>
|
|
@endif
|
|
@if($saveClick)
|
|
<button
|
|
type="button"
|
|
wire:click="{{ $saveClick }}"
|
|
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
|
|
>
|
|
Save
|
|
</button>
|
|
@endif
|
|
@if($applyClick)
|
|
<button
|
|
type="button"
|
|
wire:click="{{ $applyClick }}"
|
|
class="editable-field-lte-modal-btn editable-field-lte-modal-btn-save"
|
|
>
|
|
{{ $applyLabel }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|