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.
71 lines
1.6 KiB
PHP
71 lines
1.6 KiB
PHP
{{--
|
|
Copy Button Component - AdminLTE style
|
|
Small inline button to copy text to clipboard
|
|
|
|
Usage:
|
|
<x-proxmox::ui.copy-button :value="$text" />
|
|
--}}
|
|
|
|
@props([
|
|
'value',
|
|
])
|
|
|
|
<style>
|
|
.copy-btn-lte {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
color: #adb5bd;
|
|
cursor: pointer;
|
|
transition: color var(--lte-transition-speed, 0.3s) ease;
|
|
}
|
|
.copy-btn-lte:hover {
|
|
color: var(--lte-primary, #0d6efd);
|
|
}
|
|
.copy-btn-lte svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
position: absolute;
|
|
}
|
|
.copy-btn-lte-success {
|
|
color: var(--lte-success, #198754);
|
|
}
|
|
.dark .copy-btn-lte {
|
|
color: #6b7280;
|
|
}
|
|
.dark .copy-btn-lte:hover {
|
|
color: var(--lte-primary, #0d6efd);
|
|
}
|
|
</style>
|
|
|
|
<div
|
|
x-data="{
|
|
copied: false,
|
|
copyText: @js($value),
|
|
copyToClipboard() {
|
|
navigator.clipboard.writeText(this.copyText);
|
|
this.copied = true;
|
|
setTimeout(() => this.copied = false, 2000);
|
|
}
|
|
}"
|
|
style="display: inline-flex; align-items: center;"
|
|
{{ $attributes }}
|
|
>
|
|
<button
|
|
@click="copyToClipboard()"
|
|
type="button"
|
|
class="copy-btn-lte"
|
|
:class="copied ? 'copy-btn-lte-success' : ''"
|
|
title="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>
|