Standardize global empty-state UI component

This commit is contained in:
2026-03-11 21:38:15 +01:00
parent 51e9a5c19a
commit a1c7c9cf7d
7 changed files with 147 additions and 18 deletions

View File

@@ -0,0 +1,58 @@
<?php
/**
* Shared empty-state component.
*
* @var array<string, mixed> $emptyState
*/
$emptyState = is_array($emptyState ?? null) ? $emptyState : [];
$emptyMessage = trim((string) ($emptyState['message'] ?? ''));
if ($emptyMessage === '') {
return;
}
$emptyHint = trim((string) ($emptyState['hint'] ?? ''));
$emptySize = strtolower(trim((string) ($emptyState['size'] ?? 'default')));
if (!in_array($emptySize, ['default', 'compact'], true)) {
$emptySize = 'default';
}
$emptyAlign = strtolower(trim((string) ($emptyState['align'] ?? 'center')));
if (!in_array($emptyAlign, ['center', 'left'], true)) {
$emptyAlign = 'center';
}
$emptyAction = is_array($emptyState['action'] ?? null) ? $emptyState['action'] : [];
$emptyActionLabel = trim((string) ($emptyAction['label'] ?? ''));
$emptyActionHref = trim((string) ($emptyAction['href'] ?? ''));
$emptyActionForm = trim((string) ($emptyAction['form'] ?? ''));
$emptyActionClass = trim((string) ($emptyAction['class'] ?? 'secondary outline small'));
$emptyActionTarget = trim((string) ($emptyAction['target'] ?? ''));
$emptyActionRel = trim((string) ($emptyAction['rel'] ?? ''));
$showAction = $emptyActionLabel !== '' && ($emptyActionHref !== '' || $emptyActionForm !== '');
?>
<div class="app-empty-state" data-size="<?php e($emptySize); ?>" data-align="<?php e($emptyAlign); ?>">
<p class="app-empty-state-message"><?php e($emptyMessage); ?></p>
<?php if ($emptyHint !== ''): ?>
<small class="app-empty-state-hint"><?php e($emptyHint); ?></small>
<?php endif; ?>
<?php if ($showAction): ?>
<?php if ($emptyActionHref !== ''): ?>
<a
role="button"
class="<?php e($emptyActionClass); ?> app-empty-state-action"
href="<?php e($emptyActionHref); ?>"
<?php if ($emptyActionTarget !== ''): ?>target="<?php e($emptyActionTarget); ?>"<?php endif; ?>
<?php if ($emptyActionRel !== ''): ?>rel="<?php e($emptyActionRel); ?>"<?php endif; ?>
>
<?php e($emptyActionLabel); ?>
</a>
<?php else: ?>
<button type="submit" class="<?php e($emptyActionClass); ?> app-empty-state-action" form="<?php e($emptyActionForm); ?>">
<?php e($emptyActionLabel); ?>
</button>
<?php endif; ?>
<?php endif; ?>
</div>