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.
133 lines
3.7 KiB
PHP
133 lines
3.7 KiB
PHP
{{--
|
|
Copyable Text Component - AdminLTE style
|
|
Text field with copy to clipboard functionality
|
|
|
|
Usage:
|
|
<x-proxmox::ui.copyable label="IPv4 Address" value="192.168.1.1" />
|
|
--}}
|
|
|
|
@props([
|
|
'label' => null,
|
|
'value',
|
|
'masked' => false,
|
|
])
|
|
|
|
<style>
|
|
.copyable-lte-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
.copyable-lte-label {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
color: #495057;
|
|
}
|
|
.copyable-lte-field {
|
|
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;
|
|
transition: border-color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.copyable-lte-value {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
|
color: #212529;
|
|
}
|
|
.copyable-lte-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
flex-shrink: 0;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: #adb5bd;
|
|
cursor: pointer;
|
|
transition: color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.copyable-lte-btn:hover {
|
|
color: var(--lte-primary, #0d6efd);
|
|
}
|
|
.copyable-lte-btn svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
position: absolute;
|
|
}
|
|
.copyable-lte-btn-success {
|
|
color: var(--lte-success, #198754);
|
|
}
|
|
/* Dark mode */
|
|
.dark .copyable-lte-label {
|
|
color: #d1d5db;
|
|
}
|
|
.dark .copyable-lte-field {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
}
|
|
.dark .copyable-lte-value {
|
|
color: #e5e7eb;
|
|
}
|
|
.dark .copyable-lte-btn {
|
|
color: #6b7280;
|
|
}
|
|
.dark .copyable-lte-btn:hover {
|
|
color: var(--lte-primary, #0d6efd);
|
|
}
|
|
</style>
|
|
|
|
<div class="copyable-lte-group">
|
|
@if($label)
|
|
<label class="copyable-lte-label">{{ $label }}</label>
|
|
@endif
|
|
<div
|
|
x-data="{
|
|
copied: false,
|
|
showValue: @js(!$masked),
|
|
copyText: @js($value),
|
|
copyToClipboard() {
|
|
navigator.clipboard.writeText(this.copyText);
|
|
this.copied = true;
|
|
setTimeout(() => this.copied = false, 2000);
|
|
}
|
|
}"
|
|
class="copyable-lte-field"
|
|
>
|
|
@if($masked)
|
|
<span class="copyable-lte-value" x-text="showValue ? copyText : '••••••••••••'"></span>
|
|
<button
|
|
@click="showValue = !showValue"
|
|
type="button"
|
|
class="copyable-lte-btn"
|
|
:aria-label="showValue ? 'Hide value' : 'Show value'"
|
|
>
|
|
<x-ri-eye-line x-show="!showValue" />
|
|
<x-ri-eye-off-line x-show="showValue" x-cloak />
|
|
</button>
|
|
@else
|
|
<span class="copyable-lte-value">{{ $value }}</span>
|
|
@endif
|
|
<button
|
|
@click="copyToClipboard()"
|
|
type="button"
|
|
class="copyable-lte-btn"
|
|
:class="copied ? 'copyable-lte-btn-success' : ''"
|
|
aria-label="Copy to clipboard"
|
|
>
|
|
<x-ri-check-fill x-show="copied" x-transition x-cloak />
|
|
<x-ri-file-copy-line x-show="!copied" x-transition />
|
|
</button>
|
|
</div>
|
|
</div>
|