Joseph.Rawlings
e7b33a2f6c
- Updated server card component to use new UI elements and improved layout. - Enhanced status display with badges and better status indicators. - Refined quick info row for server details with consistent styling. - Reorganized server configuration statistics into stat cards for clarity. - Improved help modals for statistics and storage management sections. - Streamlined alerts and warnings for better user experience. - Updated storage management view to utilize new UI components and improve readability.
204 lines
7.6 KiB
PHP
204 lines
7.6 KiB
PHP
{{--
|
|
Proxmox UI Components - Index File
|
|
|
|
This file documents all available reusable components in the Proxmox views.
|
|
Import components using: <x-proxmox::component-name />
|
|
|
|
============================================
|
|
LAYOUT & STRUCTURE
|
|
============================================
|
|
|
|
card.blade.php
|
|
---------------
|
|
Generic card wrapper with consistent styling
|
|
Props: title, subtitle, icon, iconClass, actions, padding, flush, collapsible, collapsed, storageKey
|
|
Slots: default, header, actions, footer
|
|
|
|
Example:
|
|
<x-proxmox::card title="Server Info" icon="ri-server-line" collapsible>
|
|
Content here
|
|
</x-proxmox::card>
|
|
|
|
section-header.blade.php
|
|
------------------------
|
|
Page section headers with title, subtitle, actions
|
|
Props: title, subtitle, icon, iconClass, helpIcon, helpTitle, helpContent, border
|
|
Slots: default, actions, help
|
|
|
|
Example:
|
|
<x-proxmox::section-header title="Network Configuration" subtitle="Manage network settings" icon="ri-global-line">
|
|
<x-slot:actions>
|
|
<x-proxmox::button>Add Network</x-proxmox::button>
|
|
</x-slot:actions>
|
|
</x-proxmox::section-header>
|
|
|
|
============================================
|
|
DATA DISPLAY
|
|
============================================
|
|
|
|
stat-card.blade.php
|
|
-------------------
|
|
Statistics display card with icon, value, label
|
|
Props: label, value, icon, iconClass, iconBg, iconColor, trend, trendUp, trendLabel, suffix, prefix, loading, compact, href, clickable
|
|
|
|
Example:
|
|
<x-proxmox::stat-card
|
|
label="CPU Usage"
|
|
value="45"
|
|
suffix="%"
|
|
icon="ri-cpu-line"
|
|
:trendUp="true"
|
|
trend="+5%"
|
|
trendLabel="vs last hour"
|
|
/>
|
|
|
|
table.blade.php + table-th.blade.php + table-td.blade.php + table-row.blade.php
|
|
--------------------------------------------------------------------------------
|
|
Styled table components
|
|
|
|
Example:
|
|
<x-proxmox::table>
|
|
<x-slot:head>
|
|
<x-proxmox::table-th>Name</x-proxmox::table-th>
|
|
<x-proxmox::table-th align="right">Value</x-proxmox::table-th>
|
|
</x-slot:head>
|
|
<x-slot:body>
|
|
<x-proxmox::table-row>
|
|
<x-proxmox::table-td>Item 1</x-proxmox::table-td>
|
|
<x-proxmox::table-td align="right">100</x-proxmox::table-td>
|
|
</x-proxmox::table-row>
|
|
</x-slot:body>
|
|
</x-proxmox::table>
|
|
|
|
info-list.blade.php + info-row.blade.php
|
|
----------------------------------------
|
|
Key-value information display
|
|
|
|
Example:
|
|
<x-proxmox::info-list title="Server Details">
|
|
<x-proxmox::info-row label="IP Address" value="192.168.1.100" copyable mono />
|
|
<x-proxmox::info-row label="Status" icon="ri-checkbox-circle-line">
|
|
<x-proxmox::badge variant="success">Running</x-proxmox::badge>
|
|
</x-proxmox::info-row>
|
|
</x-proxmox::info-list>
|
|
|
|
progress.blade.php
|
|
------------------
|
|
Progress bar component
|
|
Props: value, max, size, variant, label, showValue, animated, striped
|
|
|
|
Example:
|
|
<x-proxmox::progress :value="75" :max="100" variant="auto" label="Disk Usage" showValue />
|
|
|
|
empty-state.blade.php
|
|
---------------------
|
|
Empty state placeholder
|
|
Props: icon, iconClass, title, description
|
|
|
|
Example:
|
|
<x-proxmox::empty-state
|
|
title="No backups found"
|
|
description="Create your first backup to get started"
|
|
icon="ri-hard-drive-2-line"
|
|
>
|
|
<x-proxmox::button icon="ri-add-line">Create Backup</x-proxmox::button>
|
|
</x-proxmox::empty-state>
|
|
|
|
============================================
|
|
INTERACTIVE ELEMENTS
|
|
============================================
|
|
|
|
button.blade.php
|
|
----------------
|
|
Consistent button styling
|
|
Props: type, variant (primary|secondary|success|danger|warning|info|ghost|link|neutral), size (xs|sm|md|lg|xl), icon, iconPosition, iconClass, loading, disabled, fullWidth, href, outline, rounded
|
|
|
|
Example:
|
|
<x-proxmox::button variant="primary" icon="ri-play-line">Start Server</x-proxmox::button>
|
|
<x-proxmox::button variant="danger" outline icon="ri-stop-line">Stop</x-proxmox::button>
|
|
|
|
badge.blade.php
|
|
---------------
|
|
Status badges
|
|
Props: variant (success|danger|warning|info|primary|secondary|neutral), size, rounded, dot, pulse, icon, iconPosition, removable, outline
|
|
|
|
Example:
|
|
<x-proxmox::badge variant="success" dot pulse>Running</x-proxmox::badge>
|
|
<x-proxmox::badge variant="danger" icon="ri-error-warning-line">Error</x-proxmox::badge>
|
|
|
|
modal.blade.php
|
|
---------------
|
|
Modal dialog component
|
|
Props: name, show, maxWidth, closeable, title, subtitle, icon, iconClass, iconBg, iconColor, blur, centered
|
|
Slots: default, header, footer
|
|
|
|
Example:
|
|
<x-proxmox::modal name="confirm-delete" title="Confirm Delete" icon="ri-delete-bin-line" iconBg="bg-danger/10" iconColor="text-danger">
|
|
<p>Are you sure you want to delete this item?</p>
|
|
<x-slot:footer>
|
|
<x-proxmox::button variant="neutral" @click="$dispatch('close-modal', 'confirm-delete')">Cancel</x-proxmox::button>
|
|
<x-proxmox::button variant="danger">Delete</x-proxmox::button>
|
|
</x-slot:footer>
|
|
</x-proxmox::modal>
|
|
|
|
dropdown.blade.php + dropdown-item.blade.php + dropdown-divider.blade.php
|
|
-------------------------------------------------------------------------
|
|
Dropdown menu components
|
|
|
|
Example:
|
|
<x-proxmox::dropdown align="right">
|
|
<x-slot:trigger>
|
|
<x-proxmox::button variant="neutral" icon="ri-more-2-fill" />
|
|
</x-slot:trigger>
|
|
<x-proxmox::dropdown-item icon="ri-edit-line">Edit</x-proxmox::dropdown-item>
|
|
<x-proxmox::dropdown-item icon="ri-file-copy-line">Duplicate</x-proxmox::dropdown-item>
|
|
<x-proxmox::dropdown-divider />
|
|
<x-proxmox::dropdown-item icon="ri-delete-bin-line" danger>Delete</x-proxmox::dropdown-item>
|
|
</x-proxmox::dropdown>
|
|
|
|
tabs.blade.php + tab-panel.blade.php
|
|
------------------------------------
|
|
Tab navigation component
|
|
|
|
Example:
|
|
<x-proxmox::tabs :items="[
|
|
['id' => 'general', 'label' => 'General', 'icon' => 'ri-settings-line'],
|
|
['id' => 'advanced', 'label' => 'Advanced', 'icon' => 'ri-tools-line'],
|
|
]">
|
|
<x-proxmox::tab-panel id="general">General content</x-proxmox::tab-panel>
|
|
<x-proxmox::tab-panel id="advanced">Advanced content</x-proxmox::tab-panel>
|
|
</x-proxmox::tabs>
|
|
|
|
input.blade.php
|
|
---------------
|
|
Form input component
|
|
Props: label, id, name, type, placeholder, hint, error, required, disabled, readonly, prefix, suffix, icon, iconPosition, size
|
|
|
|
Example:
|
|
<x-proxmox::input label="Hostname" name="hostname" placeholder="Enter hostname" required icon="ri-server-line" />
|
|
|
|
============================================
|
|
FEEDBACK
|
|
============================================
|
|
|
|
alert.blade.php
|
|
---------------
|
|
Alert/notification component
|
|
Props: variant (success|danger|warning|info|neutral), title, icon, dismissible, collapsible, collapsed, storageKey, border
|
|
Slots: default, actions
|
|
|
|
Example:
|
|
<x-proxmox::alert variant="warning" title="Maintenance Notice" collapsible storageKey="maintenance-alert">
|
|
Scheduled maintenance will occur on Sunday at 2:00 AM.
|
|
</x-proxmox::alert>
|
|
|
|
spinner.blade.php
|
|
-----------------
|
|
Loading spinner
|
|
Props: size, variant
|
|
|
|
Example:
|
|
<x-proxmox::spinner size="lg" variant="primary" />
|
|
|
|
--}}
|