Joseph.Rawlings
abff5a381f
- Updated tab-panel component to use Tailwind for styling and transitions. - Refactored table-row component to implement Tailwind classes for hover effects and borders. - Converted table-td component to utilize Tailwind for alignment and text styles. - Changed table-th component to apply Tailwind for header styling and sorting indicators. - Revised table component to adopt Tailwind for layout, borders, and responsive design. - Enhanced tabs component with Tailwind for navigation styles and transitions. - Updated toggle component to use Tailwind for switch styles and accessibility. - Refactored tooltip component to implement Tailwind for positioning and styling. - Added visual enhancements to app.css for improved UI interactions and animations.
150 lines
7.3 KiB
PHP
150 lines
7.3 KiB
PHP
{{--
|
|
Editable Field Component - LucentUI Theme
|
|
Migrated from AdminLTE to Tailwind
|
|
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,
|
|
])
|
|
|
|
@php
|
|
$entangleProperty = $attributes->wire('model')->value() ? ('isEditing' . ucfirst($label)) : 'editing';
|
|
@endphp
|
|
|
|
<div class="flex flex-col gap-2" x-data="{ showEditModal: @entangle($entangleProperty) }">
|
|
<label class="text-sm font-medium text-secondary dark:text-gray-300">{{ $label }}</label>
|
|
<div class="flex items-center gap-2.5 px-4 py-2.5 bg-background-secondary dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg text-sm">
|
|
<span class="flex-1 truncate text-primary dark:text-gray-200">{{ $value ?? 'Not set' }}</span>
|
|
@if($editClick)
|
|
<button
|
|
wire:click="{{ $editClick }}"
|
|
type="button"
|
|
class="inline-flex items-center justify-center p-0 bg-transparent border-none text-secondary/60 dark:text-gray-500 hover:text-primary dark:hover:text-primary transition-colors duration-200 cursor-pointer"
|
|
aria-label="Edit {{ $label }}"
|
|
>
|
|
<x-ri-edit-line class="w-4 h-4" />
|
|
</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="fixed inset-0 z-[99998] bg-black/50 backdrop-blur-sm"
|
|
></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="fixed inset-0 z-[99999] flex items-center justify-center p-4"
|
|
>
|
|
<div class="relative w-full max-w-xl bg-background dark:bg-gray-800 border border-neutral dark:border-gray-700 rounded-lg p-6 shadow-xl">
|
|
<div class="flex items-center justify-between mb-5">
|
|
<h4 class="text-lg font-semibold text-primary dark:text-gray-100">Edit {{ $label }}</h4>
|
|
<button
|
|
type="button"
|
|
class="flex items-center justify-center w-9 h-9 p-0 bg-transparent border-none rounded-lg text-secondary dark:text-gray-400 hover:bg-background-secondary dark:hover:bg-gray-700 hover:text-primary dark:hover:text-gray-100 transition-all duration-200 cursor-pointer"
|
|
@click="showEditModal = false; @if($cancelClick) $wire.{{ $cancelClick }}() @endif"
|
|
aria-label="Close"
|
|
>
|
|
<x-ri-close-line class="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex flex-col gap-2">
|
|
<label class="text-sm font-medium text-secondary dark:text-gray-400">{{ $label }}</label>
|
|
<input
|
|
type="text"
|
|
{{ $attributes->whereStartsWith('wire:model') }}
|
|
class="w-full h-11 px-4 text-sm text-primary dark:text-gray-100 bg-background dark:bg-gray-900 border border-neutral dark:border-gray-600 rounded-lg shadow-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 placeholder:text-secondary/50 dark:placeholder:text-gray-500 transition-all duration-150"
|
|
placeholder="{{ $placeholder ?? 'Enter ' . strtolower($label) }}"
|
|
/>
|
|
</div>
|
|
|
|
@if($error)
|
|
<div class="text-sm text-error">{{ $error }}</div>
|
|
@endif
|
|
|
|
@if(isset($hint))
|
|
<div class="text-xs text-secondary dark:text-gray-400">{{ $hint }}</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3 pt-4 mt-2 border-t border-neutral dark:border-gray-700">
|
|
@if($cancelClick)
|
|
<button
|
|
type="button"
|
|
@click="showEditModal = false; $wire.{{ $cancelClick }}()"
|
|
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-background dark:bg-gray-700 text-secondary dark:text-gray-300 border border-neutral dark:border-gray-600 rounded-lg shadow-sm hover:bg-background-secondary dark:hover:bg-gray-600 transition-all duration-200 cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
@endif
|
|
@if($saveClick)
|
|
<button
|
|
type="button"
|
|
wire:click="{{ $saveClick }}"
|
|
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
|
|
>
|
|
Save
|
|
</button>
|
|
@endif
|
|
@if($applyClick)
|
|
<button
|
|
type="button"
|
|
wire:click="{{ $applyClick }}"
|
|
class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium bg-primary text-white rounded-lg shadow-sm hover:bg-primary-hover transition-all duration-200 cursor-pointer"
|
|
>
|
|
{{ $applyLabel }}
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|