From e6ecf7178780d23cab21a069320f62386c38a5d8 Mon Sep 17 00:00:00 2001 From: Arturo Corro Date: Mon, 15 Sep 2025 11:41:12 -0600 Subject: [PATCH] Hader porto actualizado --- .../header/title-position.blade.php | 147 +++++++++++++++--- 1 file changed, 123 insertions(+), 24 deletions(-) diff --git a/resources/views/components/header/title-position.blade.php b/resources/views/components/header/title-position.blade.php index 59ec2d2..18c4975 100644 --- a/resources/views/components/header/title-position.blade.php +++ b/resources/views/components/header/title-position.blade.php @@ -3,45 +3,117 @@ 'breadcrumbs' => [ ['name' => 'Inicio', 'href' => '/', 'active' => true], ], - // props clave - 'align' => 'center', // left | center | right - 'size' => 'md', // sm | md | lg - 'color' => 'grey', // light | grey/gray | dark | primary | secondary | tertiary | quaternary - // extras opcionales - 'fullWidth' => false, // true => container-fluid - 'uppercase' => false + // ====== 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

+ // 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 | + + // ====== 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

en .overflow-hidden para reveals más limpios + 'overflowBreadcrumb'=> false, // idem para breadcrumb + + // ====== Extra + 'customHeader' => false, // mantiene compat ]) @php - $allowedColors = ['light','grey','dark','primary','secondary','tertiary','quaternary']; + // ---- 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'; - $sizeMap = ['sm' => 'page-header-sm', 'md' => 'page-header-md', 'lg' => 'page-header-lg']; + // ---- 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']; - $bgColorClass = "bg-color-{$color}"; - $h1Class = in_array($color, ['light','grey']) ? 'text-dark' : ''; - $h1Class .= $uppercase ? ' text-uppercase' : ''; + // ---- 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']; - // alineación visual del breadcrumb $ulClasses[] = match ($align) { 'left' => 'text-md-end', 'right' => 'text-md-start', default => 'text-center', }; - if (!in_array($color, ['light','grey'])) $ulClasses[] = 'breadcrumb-light'; + $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'; - // Layout de columnas según alineación (titulo y breadcrumbs) - // Mantiene grid responsivo sin duplicar vistas - $titleColClass = 'align-self-center p-static order-2 '; - $crumbColClass = 'align-self-center order-1 '; - + $titleColClass = 'order-2 '; + $crumbColClass = 'order-1 '; if ($align === 'center') { $titleColClass .= 'col-md-12 text-center'; $crumbColClass .= 'col-md-12'; @@ -52,17 +124,43 @@ $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 -
+
-
+
-

{!! $title !!}

+ @if($overflowTitle)
@endif +

{!! $title !!}

+ @if($overflowTitle)
@endif
-
-
    + @if($overflowBreadcrumb)
    @endif +
      @foreach ($breadcrumbs as $breadcrumb) @php $name = $breadcrumb['name'] ?? ''; @@ -84,6 +182,7 @@ @endforeach
    + @if($overflowBreadcrumb)
    @endif