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.
270 lines
9.8 KiB
PHP
270 lines
9.8 KiB
PHP
{{--
|
|
Proxmox UI Component Library Index
|
|
===================================
|
|
|
|
This file documents all available UI components for the Proxmox server views.
|
|
All components styled using LucentUI Theme with Tailwind CSS.
|
|
Migrated from AdminLTE to pure Tailwind utility classes.
|
|
|
|
LucentUI Design Patterns:
|
|
- Card: bg-background border border-neutral rounded-xl shadow-sm
|
|
- Typography: text-sm (14px), font-sans
|
|
- Text Colors: text-primary (headings), text-secondary (muted)
|
|
- Layout: Tailwind flex/grid with gap utilities
|
|
- Transitions: duration-200 for interactions
|
|
- Shadows: shadow-xl for modals
|
|
- Borders: rounded-lg (0.5rem)
|
|
|
|
LucentUI Color System (Semantic):
|
|
- Primary: bg-primary, text-primary, border-primary
|
|
- Success: bg-success, text-success
|
|
- Error: bg-error, text-error
|
|
- Warning: bg-warning, text-warning
|
|
- Info: bg-info, text-info
|
|
- Neutral: border-neutral, bg-neutral
|
|
- Background: bg-background, bg-background-secondary
|
|
|
|
Tailwind Utility Patterns:
|
|
- Cards: bg-background border border-neutral rounded-xl shadow-sm
|
|
- Buttons: px-4 py-2 rounded-lg font-medium transition-all duration-200
|
|
- Alerts: p-4 rounded-lg border
|
|
- Badges: px-2 py-0.5 text-xs font-medium rounded-full
|
|
- Inputs: w-full px-4 py-2 border border-neutral rounded-lg focus:ring-2 focus:ring-primary/25
|
|
- Tables: w-full divide-y divide-neutral
|
|
- Tabs: flex gap-1 border-b border-neutral
|
|
- Dropdowns: absolute z-50 bg-background border border-neutral rounded-lg shadow-lg
|
|
- Modals: fixed inset-0 z-50 flex items-center justify-center
|
|
|
|
=== LAYOUT COMPONENTS ===
|
|
|
|
1. Card (ui.card)
|
|
@props(['title', 'subtitle', 'icon', 'collapsible', 'collapsed', 'padding', 'noPadding'])
|
|
Container component for grouping related content.
|
|
|
|
2. Section Header (ui.section-header)
|
|
@props(['title', 'subtitle', 'icon', 'help', 'helpTitle', 'helpContent'])
|
|
Page/section titles with optional help modal.
|
|
|
|
3. Modal (ui.modal)
|
|
@props(['name', 'title', 'maxWidth', 'closeable'])
|
|
Overlay dialog with Alpine.js transitions.
|
|
|
|
4. Tabs (ui.tabs)
|
|
@props(['tabs', 'active', 'variant'])
|
|
Tab navigation (default, pills, buttons variants).
|
|
|
|
5. Tab Panel (ui.tab-panel)
|
|
@props(['name', 'active'])
|
|
Tab content panel with transitions.
|
|
|
|
6. Help Modal (ui.help-modal)
|
|
@props(['title', 'icon'])
|
|
Question mark trigger that opens info modal with description and details slots.
|
|
|
|
=== DATA DISPLAY COMPONENTS ===
|
|
|
|
7. Stat Card (ui.stat-card)
|
|
@props(['label', 'value', 'icon', 'trend', 'progress', 'variant'])
|
|
Statistics display with progress bar support.
|
|
|
|
8. Badge (ui.badge)
|
|
@props(['variant', 'dot', 'icon', 'size', 'rounded'])
|
|
Status/label badges with icons.
|
|
|
|
9. Progress (ui.progress)
|
|
@props(['value', 'max', 'showLabel', 'size', 'variant', 'animated'])
|
|
Progress bars with auto-coloring thresholds.
|
|
|
|
10. Server Status (ui.server-status)
|
|
@props(['status', 'size', 'showLabel'])
|
|
VM status indicator (running, stopped, paused, etc).
|
|
|
|
11. Resource Gauge (ui.resource-gauge)
|
|
@props(['label', 'value', 'max', 'unit', 'icon', 'showPercentage', 'size'])
|
|
Resource usage display with progress bar.
|
|
|
|
12. Info Row (ui.info-row)
|
|
@props(['label', 'value', 'copyable', 'icon', 'muted'])
|
|
Key-value pair display with copy functionality.
|
|
|
|
13. Empty State (ui.empty-state)
|
|
@props(['title', 'description', 'icon'])
|
|
Placeholder for empty content areas.
|
|
|
|
14. Allocation Card (ui.allocation-card)
|
|
@props(['label', 'percent', 'usageSummary', 'entitlementLabel', 'description', 'gradient', 'badge'])
|
|
Resource allocation vs entitlement display with gradient progress bar.
|
|
|
|
15. Network Address Card (ui.network-address-card)
|
|
@props(['type', 'ip', 'gateway', 'netmask', 'cidr', 'isPublic', 'isIpv6', 'guestInterface', 'fromGuestAgent'])
|
|
IP address card with gateway, netmask, network tools, and guest agent details.
|
|
|
|
=== TABLE COMPONENTS ===
|
|
|
|
16. Table (ui.table)
|
|
@props(['striped', 'hoverable', 'compact', 'bordered'])
|
|
Table wrapper with styling options.
|
|
|
|
17. Table Row (ui.table-row)
|
|
@props(['hoverable', 'clickable', 'selected'])
|
|
Table row with interaction states.
|
|
|
|
18. Table Header Cell (ui.table-th)
|
|
@props(['sortable', 'sorted', 'direction', 'align'])
|
|
Table header with sorting support.
|
|
|
|
19. Table Data Cell (ui.table-td)
|
|
@props(['align', 'nowrap'])
|
|
Table cell with alignment options.
|
|
|
|
=== FORM COMPONENTS ===
|
|
|
|
20. Button (ui.button)
|
|
@props(['variant', 'size', 'icon', 'iconPosition', 'loading', 'disabled', 'full'])
|
|
Multi-variant buttons with loading states.
|
|
|
|
21. Input (ui.input)
|
|
@props(['label', 'error', 'icon', 'iconPosition', 'hint'])
|
|
Form text input with icon support.
|
|
|
|
22. Select (ui.select)
|
|
@props(['label', 'error', 'options', 'placeholder', 'icon', 'hint'])
|
|
Form select dropdown.
|
|
|
|
23. Toggle (ui.toggle)
|
|
@props(['label', 'description', 'disabled'])
|
|
Toggle/switch input.
|
|
|
|
24. Editable Field (ui.editable-field)
|
|
@props(['label', 'value', 'editing', 'editClick', 'cancelClick', 'saveClick', 'applyClick', 'error'])
|
|
Display field with edit button that opens a modal editor.
|
|
|
|
=== INTERACTIVE COMPONENTS ===
|
|
|
|
25. Dropdown (ui.dropdown)
|
|
@props(['align', 'width', 'contentClasses'])
|
|
Dropdown menu container.
|
|
|
|
26. Dropdown Item (ui.dropdown-item)
|
|
@props(['icon', 'danger', 'disabled'])
|
|
Dropdown menu item.
|
|
|
|
27. Dropdown Divider (ui.dropdown-divider)
|
|
Dropdown menu separator.
|
|
|
|
28. Action Toolbar (ui.action-toolbar)
|
|
@props(['centered'])
|
|
Container for VM action buttons.
|
|
|
|
29. Action Button (ui.action-button)
|
|
@props(['action', 'icon', 'label', 'variant', 'disabled', 'loading', 'confirm', 'size'])
|
|
VM control action button.
|
|
|
|
30. Icon Picker (ui.icon-picker)
|
|
@props(['icons', 'categories', 'selected'])
|
|
Modal-based icon selection.
|
|
|
|
31. Tooltip (ui.tooltip)
|
|
@props(['text', 'position'])
|
|
Hover tooltip.
|
|
|
|
32. Confirm Dialog (ui.confirm-dialog)
|
|
@props(['title', 'message', 'confirmLabel', 'cancelLabel', 'variant', 'open'])
|
|
Confirmation modal for dangerous actions.
|
|
|
|
33. Copy Button (ui.copy-button)
|
|
@props(['value'])
|
|
Small inline button to copy text to clipboard.
|
|
|
|
34. Copyable (ui.copyable)
|
|
@props(['label', 'value', 'masked'])
|
|
Text field with copy to clipboard and optional masking.
|
|
|
|
=== FEEDBACK COMPONENTS ===
|
|
|
|
35. Alert (ui.alert)
|
|
@props(['variant', 'title', 'dismissible', 'icon'])
|
|
Alert/notification messages.
|
|
|
|
36. Spinner (ui.spinner)
|
|
@props(['size', 'color'])
|
|
Loading spinner animation.
|
|
|
|
37. Notice Banner (ui.notice-banner)
|
|
@props(['title', 'variant', 'collapsible', 'storageKey', 'icon', 'showCondition'])
|
|
Collapsible notice/alert banner with localStorage persistence.
|
|
|
|
=== USAGE EXAMPLES ===
|
|
|
|
-- Server Status Badge --
|
|
<x-proxmox::ui.server-status status="running" showLabel />
|
|
|
|
-- Resource Usage --
|
|
<x-proxmox::ui.resource-gauge
|
|
label="Memory"
|
|
:value="2048"
|
|
:max="4096"
|
|
unit="MB"
|
|
icon="ri-ram-line"
|
|
/>
|
|
|
|
-- Allocation Card --
|
|
<x-proxmox::ui.allocation-card
|
|
label="CPU Allocation"
|
|
:percent="45"
|
|
usage-summary="1.8 / 4 vCPU"
|
|
entitlement-label="4 vCPU entitlement"
|
|
description="Live hypervisor usage."
|
|
:badge="['label' => 'Healthy', 'class' => 'text-success bg-success/15']"
|
|
/>
|
|
|
|
-- Action Toolbar --
|
|
<x-proxmox::ui.action-toolbar>
|
|
<x-proxmox::ui.action-button
|
|
wire:click="startServer"
|
|
icon="ri-play-fill"
|
|
label="Start"
|
|
variant="success"
|
|
/>
|
|
<x-proxmox::ui.action-button
|
|
wire:click="stopServer"
|
|
icon="ri-stop-fill"
|
|
label="Stop"
|
|
variant="danger"
|
|
confirm="Are you sure you want to stop this server?"
|
|
/>
|
|
</x-proxmox::ui.action-toolbar>
|
|
|
|
-- Card with Stats --
|
|
<x-proxmox::ui.card title="Server Resources" icon="ri-server-line">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<x-proxmox::ui.stat-card label="CPU Usage" value="45%" icon="ri-cpu-line" :progress="45" />
|
|
<x-proxmox::ui.stat-card label="Memory" value="2GB/4GB" icon="ri-ram-line" :progress="50" />
|
|
</div>
|
|
</x-proxmox::ui.card>
|
|
|
|
-- Notice Banner --
|
|
<x-proxmox::ui.notice-banner
|
|
title="Important Notice"
|
|
variant="warning"
|
|
:collapsible="true"
|
|
storage-key="my-notice-collapsed"
|
|
>
|
|
<p class="text-xs text-base/70">Your notice content here...</p>
|
|
</x-proxmox::ui.notice-banner>
|
|
|
|
-- Help Modal --
|
|
<x-proxmox::ui.help-modal title="Feature Help" icon="ri-server-line">
|
|
<x-slot:description>
|
|
Brief description of the feature.
|
|
</x-slot:description>
|
|
<x-slot:details>
|
|
<p><span class="font-semibold">Item:</span> Detailed explanation...</p>
|
|
</x-slot:details>
|
|
</x-proxmox::ui.help-modal>
|
|
|
|
-- Copyable Field --
|
|
<x-proxmox::ui.copyable label="IP Address" value="192.168.1.1" />
|
|
<x-proxmox::ui.copyable label="Password" value="secret123" :masked="true" />
|
|
--}}
|