190 lines
7.8 KiB
PHP
190 lines
7.8 KiB
PHP
@props([
|
|
'title' => '',
|
|
'breadcrumbs' => [
|
|
['name' => 'Inicio', 'href' => '/', 'active' => true],
|
|
],
|
|
|
|
// ====== Layout
|
|
'align' => 'center', // left | center | right
|
|
'size' => 'default', // sm | md | lg | modern | default
|
|
'color' => 'grey', // light | grey/gray | dark | primary | secondary | tertiary | quaternary
|
|
'fullWidth' => false,
|
|
|
|
// ====== Tipografía
|
|
'titileSize' => 'md', // sm | md | lg (mantengo el typo para compat)
|
|
'breadcrumbSize' => 'md', // sm | md | lg
|
|
'uppercase' => false,
|
|
'textDark' => false,
|
|
// NUEVO: color semántico para el <h1>
|
|
// auto => deduce según fondo (light/grey -> dark, otros -> light)
|
|
// semantic => text-color-{primary|secondary|tertiary|quaternary}
|
|
// raw class => cualquier clase CSS (ej: 'text-dark', 'text-9 text-color-secondary')
|
|
'titleColor' => 'auto', // auto | primary | secondary | tertiary | quaternary | dark | light | <raw class>
|
|
|
|
// ====== Animaciones (Porto appear-animation)
|
|
// Ejemplos: fadeInRightShorter, fadeInLeftShorter, fadeInUpShorter, slideInUp, rotateInUpRight
|
|
'titleAnimation' => null, // string|null
|
|
'titleDelay' => 0, // ms
|
|
'titleDuration' => null, // ej: '1s'
|
|
'crumbAnimation' => null, // string|null
|
|
'crumbDelay' => 0, // ms
|
|
'crumbDuration' => null,
|
|
'overflowTitle' => false, // envuelve <h1> en .overflow-hidden para reveals más limpios
|
|
'overflowBreadcrumb'=> false, // idem para breadcrumb
|
|
|
|
// ====== Extra
|
|
'customHeader' => false, // mantiene compat
|
|
])
|
|
|
|
@php
|
|
// ---- Normalización color de fondo
|
|
$allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary'];
|
|
if ($color === 'gray') { $color = 'grey'; }
|
|
$color = in_array($color, $allowedColors, true) ? $color : 'grey';
|
|
|
|
// ---- Alineación
|
|
$align = in_array($align, ['left','center','right'], true) ? $align : 'center';
|
|
|
|
// ---- Tamaños
|
|
$sizeMap = [
|
|
'sm' => 'page-header-sm',
|
|
'md' => 'page-header-md',
|
|
'lg' => 'page-header-lg',
|
|
'modern' => 'page-header-modern',
|
|
'default' => ''
|
|
];
|
|
$sizeClass = $sizeMap[$size] ?? $sizeMap['md'];
|
|
|
|
// ---- Clases base
|
|
$pageHeaderClass = 'page-header page-header-modern custom-page-header';
|
|
$bgColorClass = "bg-color-{$color}";
|
|
|
|
// ---- H1: tamaño
|
|
$h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10'];
|
|
$h1Class = '';
|
|
|
|
// ---- H1: color semántico
|
|
$titleColorClass = '';
|
|
$semanticMap = [
|
|
'primary' => 'text-color-primary',
|
|
'secondary' => 'text-color-secondary',
|
|
'tertiary' => 'text-color-tertiary',
|
|
'quaternary' => 'text-color-quaternary',
|
|
'dark' => 'text-dark',
|
|
'light' => 'text-light',
|
|
];
|
|
|
|
if ($titleColor === 'auto') {
|
|
// auto: si el fondo es claro, texto oscuro; si es oscuro/brand, texto claro
|
|
$titleColorClass = in_array($color, ['light','grey']) || $textDark ? 'text-dark' : 'text-light';
|
|
} elseif (isset($semanticMap[$titleColor])) {
|
|
$titleColorClass = $semanticMap[$titleColor];
|
|
} elseif (is_string($titleColor) && $titleColor !== '') {
|
|
// raw class
|
|
$titleColorClass = $titleColor;
|
|
}
|
|
|
|
// fallback por compatibilidad: texto oscuro si se especificó textDark
|
|
if ($textDark && $titleColorClass === '') {
|
|
$titleColorClass = 'text-dark';
|
|
}
|
|
|
|
// compone clases H1
|
|
$h1Class .= $titleColorClass ? ($titleColorClass.' ') : '';
|
|
$h1Class .= $h1SizeMap[$titileSize] ?? $h1SizeMap['md'];
|
|
$h1Class .= $uppercase ? ' text-uppercase' : '';
|
|
|
|
// ---- Breadcrumbs
|
|
$ulClasses = ['breadcrumb','d-block'];
|
|
$ulClasses[] = match ($align) {
|
|
'left' => 'text-md-end',
|
|
'right' => 'text-md-start',
|
|
default => 'text-center',
|
|
};
|
|
$ulClasses[] = match ($breadcrumbSize) {
|
|
'sm' => 'text-2',
|
|
'lg' => 'text-3-5',
|
|
default => '',
|
|
};
|
|
if (!in_array($color, ['light','grey']) && $textDark === false) $ulClasses[] = 'breadcrumb-light';
|
|
|
|
// ---- Grid
|
|
$containerClass = $fullWidth ? 'container-fluid' : 'container';
|
|
$rowClass = $size === 'modern' ? 'row py-5' : 'row';
|
|
|
|
$titleColClass = 'order-2 ';
|
|
$crumbColClass = 'order-1 ';
|
|
if ($align === 'center') {
|
|
$titleColClass .= 'col-md-12 text-center';
|
|
$crumbColClass .= 'col-md-12';
|
|
} elseif ($align === 'right') {
|
|
$titleColClass .= 'col-md-8 text-end';
|
|
$crumbColClass .= 'col-md-4';
|
|
} else { // left
|
|
$titleColClass .= 'col-md-8 order-md-1';
|
|
$crumbColClass .= 'col-md-4 order-md-2';
|
|
}
|
|
$titleColClass .= ' align-self-center p-static';
|
|
$crumbColClass .= ' align-self-center';
|
|
|
|
// ---- Helpers animación: devuelve atributos data-* si hay animación
|
|
$animAttrs = function (?string $name, int $delay = 0, ?string $duration = null) {
|
|
if (!$name) return '';
|
|
$attrs = 'appear-animation';
|
|
$attrs .= "\" data-appear-animation=\"{$name}\"";
|
|
if ($delay > 0) { $attrs .= " data-appear-animation-delay=\"{$delay}\""; }
|
|
if ($duration) { $attrs .= " data-appear-animation-duration=\"{$duration}\""; }
|
|
return $attrs;
|
|
};
|
|
@endphp
|
|
|
|
<section class="{{ $pageHeaderClass }} {{ $bgColorClass }} {{ $sizeClass }} m-0">
|
|
<div class="{{ $containerClass }}">
|
|
<div class="{{ $rowClass }}">
|
|
<div class="{{ $titleColClass }}">
|
|
@if($overflowTitle)<div class="overflow-hidden">@endif
|
|
<h1 class="font-weight-bold {{ $h1Class }} {{ $titleAnimation ? 'appear-animation' : '' }}"
|
|
@if($titleAnimation)
|
|
data-appear-animation="{{ $titleAnimation }}"
|
|
@if($titleDelay) data-appear-animation-delay="{{ $titleDelay }}" @endif
|
|
@if($titleDuration) data-appear-animation-duration="{{ $titleDuration }}" @endif
|
|
@endif
|
|
>{!! $title !!}</h1>
|
|
@if($overflowTitle)</div>@endif
|
|
</div>
|
|
<div class="{{ $crumbColClass }}">
|
|
@if($overflowBreadcrumb)<div class="overflow-hidden">@endif
|
|
<ul class="{{ implode(' ', $ulClasses) }} {{ $crumbAnimation ? 'appear-animation' : '' }}"
|
|
@if($crumbAnimation)
|
|
data-appear-animation="{{ $crumbAnimation }}"
|
|
@if($crumbDelay) data-appear-animation-delay="{{ $crumbDelay }}" @endif
|
|
@if($crumbDuration) data-appear-animation-duration="{{ $crumbDuration }}" @endif
|
|
@endif
|
|
>
|
|
@foreach ($breadcrumbs as $breadcrumb)
|
|
@php
|
|
$name = $breadcrumb['name'] ?? '';
|
|
$active = (bool)($breadcrumb['active'] ?? false);
|
|
$route = $breadcrumb['route'] ?? null;
|
|
$params = $breadcrumb['params'] ?? [];
|
|
$href = $breadcrumb['href'] ?? null;
|
|
|
|
$routeExists = $route && \Illuminate\Support\Facades\Route::has($route);
|
|
$url = $routeExists ? route($route, $params) : ($href ?: null);
|
|
@endphp
|
|
|
|
<li class="{{ $active ? 'active' : '' }}" @if($active) aria-current="page" @endif>
|
|
@if (!$active && $url)
|
|
<a href="{{ $url }}">{{ $name }}</a>
|
|
@else
|
|
<span>{{ $name }}</span>
|
|
@endif
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
@if($overflowBreadcrumb)</div>@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|