From 2e861d4af4a46fac86427f9def551e5fdc9895e1 Mon Sep 17 00:00:00 2001 From: Arturo Corro Date: Mon, 15 Sep 2025 12:02:05 -0600 Subject: [PATCH] =?UTF-8?q?Actualizaci=C3=B3n=20de=20componente=20Porto=20?= =?UTF-8?q?Header?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../header/background-clean.blade.php | 15 - .../header/background-fixed.blade.php | 16 - .../header/background-overlay.blade.php | 16 - .../header/background-parallax.blade.php | 15 - .../header/background-pattern.blade.php | 15 - .../background-transparent-header.blade.php | 15 - .../header/background-video.blade.php | 15 - .../components/header/classic-large.blade.php | 18 - .../header/classic-medium.blade.php | 18 - .../components/header/classic-small.blade.php | 15 - .../header/extra-breadcrumb-dark.blade.php | 15 - .../header/extra-breadcrumb-outside.blade.php | 22 -- .../header/extra-mouse-hover-split.blade.php | 11 - .../components/header/extra-product.blade.php | 31 -- .../header/extra-scroll-to-content.blade.php | 18 - .../header/header-background.blade.php | 333 ++++++++++++++++++ .../components/header/modern-large.blade.php | 40 --- .../components/header/modern-small.blade.php | 15 - .../views/components/header/modern.blade.php | 15 - .../components/header/overview.blade.php | 15 - .../components/header/page-header.blade.php | 248 +++++++++++++ .../header/title-position.blade.php | 189 ---------- 22 files changed, 581 insertions(+), 529 deletions(-) delete mode 100644 resources/views/components/header/background-clean.blade.php delete mode 100644 resources/views/components/header/background-fixed.blade.php delete mode 100644 resources/views/components/header/background-overlay.blade.php delete mode 100644 resources/views/components/header/background-parallax.blade.php delete mode 100644 resources/views/components/header/background-pattern.blade.php delete mode 100644 resources/views/components/header/background-transparent-header.blade.php delete mode 100644 resources/views/components/header/background-video.blade.php delete mode 100644 resources/views/components/header/classic-large.blade.php delete mode 100644 resources/views/components/header/classic-medium.blade.php delete mode 100644 resources/views/components/header/classic-small.blade.php delete mode 100644 resources/views/components/header/extra-breadcrumb-dark.blade.php delete mode 100644 resources/views/components/header/extra-breadcrumb-outside.blade.php delete mode 100644 resources/views/components/header/extra-mouse-hover-split.blade.php delete mode 100644 resources/views/components/header/extra-product.blade.php delete mode 100644 resources/views/components/header/extra-scroll-to-content.blade.php create mode 100644 resources/views/components/header/header-background.blade.php delete mode 100644 resources/views/components/header/modern-large.blade.php delete mode 100644 resources/views/components/header/modern-small.blade.php delete mode 100644 resources/views/components/header/modern.blade.php delete mode 100644 resources/views/components/header/overview.blade.php create mode 100644 resources/views/components/header/page-header.blade.php delete mode 100644 resources/views/components/header/title-position.blade.php diff --git a/resources/views/components/header/background-clean.blade.php b/resources/views/components/header/background-clean.blade.php deleted file mode 100644 index 280ad11..0000000 --- a/resources/views/components/header/background-clean.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Background Clean

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-fixed.blade.php b/resources/views/components/header/background-fixed.blade.php deleted file mode 100644 index 6c2a859..0000000 --- a/resources/views/components/header/background-fixed.blade.php +++ /dev/null @@ -1,16 +0,0 @@ -
-
-
-
-

Background Fixed

- This is a subtitle example. -
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-overlay.blade.php b/resources/views/components/header/background-overlay.blade.php deleted file mode 100644 index ef32e2c..0000000 --- a/resources/views/components/header/background-overlay.blade.php +++ /dev/null @@ -1,16 +0,0 @@ -
-
-
-
-

Background Overlay

- This is a subtitle example. -
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-parallax.blade.php b/resources/views/components/header/background-parallax.blade.php deleted file mode 100644 index d3159b4..0000000 --- a/resources/views/components/header/background-parallax.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Background Parallax

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-pattern.blade.php b/resources/views/components/header/background-pattern.blade.php deleted file mode 100644 index ac02ad2..0000000 --- a/resources/views/components/header/background-pattern.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Background Pattern

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-transparent-header.blade.php b/resources/views/components/header/background-transparent-header.blade.php deleted file mode 100644 index 7c0c61b..0000000 --- a/resources/views/components/header/background-transparent-header.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Background Transparent

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/background-video.blade.php b/resources/views/components/header/background-video.blade.php deleted file mode 100644 index 6d7c0e9..0000000 --- a/resources/views/components/header/background-video.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Background Video

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/classic-large.blade.php b/resources/views/components/header/classic-large.blade.php deleted file mode 100644 index 7183565..0000000 --- a/resources/views/components/header/classic-large.blade.php +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
-

Classic Large

- -
-
-
-
diff --git a/resources/views/components/header/classic-medium.blade.php b/resources/views/components/header/classic-medium.blade.php deleted file mode 100644 index 348f7ec..0000000 --- a/resources/views/components/header/classic-medium.blade.php +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
-

Classic Medium

- -
-
-
-
diff --git a/resources/views/components/header/classic-small.blade.php b/resources/views/components/header/classic-small.blade.php deleted file mode 100644 index 9dcdd9a..0000000 --- a/resources/views/components/header/classic-small.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Classic Small

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/extra-breadcrumb-dark.blade.php b/resources/views/components/header/extra-breadcrumb-dark.blade.php deleted file mode 100644 index 1d08b39..0000000 --- a/resources/views/components/header/extra-breadcrumb-dark.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Extra Breadcrumb Dark

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/extra-breadcrumb-outside.blade.php b/resources/views/components/header/extra-breadcrumb-outside.blade.php deleted file mode 100644 index 2f3d112..0000000 --- a/resources/views/components/header/extra-breadcrumb-outside.blade.php +++ /dev/null @@ -1,22 +0,0 @@ -
-
-
-
-

Extra Breadcrumb Outside

- This is a subtitle example. -
-
-
-
-
-
-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/extra-mouse-hover-split.blade.php b/resources/views/components/header/extra-mouse-hover-split.blade.php deleted file mode 100644 index e60beb6..0000000 --- a/resources/views/components/header/extra-mouse-hover-split.blade.php +++ /dev/null @@ -1,11 +0,0 @@ -
-
-

Porto - Multipurpose Website Template

-
-
-

Porto - Multipurpose Website Template

-
-
- - - diff --git a/resources/views/components/header/extra-product.blade.php b/resources/views/components/header/extra-product.blade.php deleted file mode 100644 index a3a3b6e..0000000 --- a/resources/views/components/header/extra-product.blade.php +++ /dev/null @@ -1,31 +0,0 @@ -
-
-
-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-

Introducing the new Product

-
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere. -
-
- Buy Now -
-
- -
-
-
-
- -
-
-
-
-
diff --git a/resources/views/components/header/extra-scroll-to-content.blade.php b/resources/views/components/header/extra-scroll-to-content.blade.php deleted file mode 100644 index 1cc0016..0000000 --- a/resources/views/components/header/extra-scroll-to-content.blade.php +++ /dev/null @@ -1,18 +0,0 @@ -
-
-
-
-

Extra Scroll to Content

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
- -
-
diff --git a/resources/views/components/header/header-background.blade.php b/resources/views/components/header/header-background.blade.php new file mode 100644 index 0000000..e5ccd78 --- /dev/null +++ b/resources/views/components/header/header-background.blade.php @@ -0,0 +1,333 @@ +@props([ + /** + * ============================================================================= + * header-background.blade.php — Porto v12 + * Componente de Header con imagen/patrón/parallax/video + overlay y animaciones + * ============================================================================= + * + * ➤ Props principales + * - title : string | Título principal (permite HTML). + * - subtitle : string | Subtítulo opcional (permite HTML). + * - breadcrumbs : array | [ ['name'=>..., 'href|route|params'=>..., 'active'=>bool], ... ] + * - align : string | left | center | right (layout de columnas) + * - size : string | sm | md | lg (alto del header) + * - container : string | container | container-fluid + * + * ➤ Fondo / Modo + * - mode : string | image | fixed | parallax | video | pattern + * - bgImage : string | URL (img, patrón o poster de video) + * - bgPosition : string | CSS background-position (ej: '50% 50%') + * - bgPatternClass : string | Clase extra p/ patrones (opcional) + * - parallaxSpeed : float | Velocidad (default 1.2) — sólo mode=parallax + * - videoPath : string | Ruta del video — sólo mode=video + * - videoPosterType : string | 'jpg' | 'png' (default 'jpg') — mode=video + * + * ➤ Overlay + * - overlayColor : string | primary | secondary | tertiary | quaternary | dark | light + * - overlayOpacity : string | '0-10' | '0-9' → se mapea a 'overlay-op-X' (string por compat) + * - showOverlay : bool | Mostrar/cargar overlay + * + * ➤ Tipografía y color + * - titleColor : string | auto | primary | secondary | tertiary | quaternary | dark | light | + * - titleSize : string | sm | md | lg + * - uppercaseTitle : bool | TRUE = text-uppercase + * - breadcrumbLight : bool | fuerza breadcrumb-light + * + * ➤ Animaciones (Porto appear-animation) + * - titleAnimation : ?string | nombre de animación o null + * - titleDelay : int | ms + * - titleDuration : ?string | ej: '1s' + * - subtitleAnimation: ?string | idem + * - subtitleDelay : int | ms + * - subtitleDuration : ?string + * - crumbAnimation : ?string | idem + * - crumbDelay : int | ms + * - crumbDuration : ?string + * - mediaAnimation : ?string | idem + * - mediaDelay : int | ms + * - mediaDuration : ?string + * - overflowTitle : bool | envuelve

en .overflow-hidden + * - overflowSubtitle : bool | idem para subtítulo + * - overflowBreadcrumb: bool | idem para breadcrumb + * + * ➤ Slots + * - media : Columna derecha (imágenes, mockups, etc.) + * - cta : Botones/acciones bajo el título + * + * ──────────────────────────────────────────────────────────────────────────── + * USO (ejemplos) + * --------------------------------------------------------------------------- + * 1) Imagen + overlay + * + * + * 2) Parallax + media + CTA + * + * + * Buy Now + * + * + * + * + * + * + * 3) Video de fondo + * + */ + + // ── Texto y breadcrumbs + 'title' => '', + 'subtitle' => '', + 'breadcrumbs' => [['name' => 'Inicio', 'href' => '/', 'active' => true]], + + // ── Layout + 'align' => 'center', // left | center | right + 'size' => 'md', // sm | md | lg + 'container' => 'container', // container | container-fluid + + // ── Fondo / Modo + 'mode' => 'image', // image | fixed | parallax | video | pattern + 'bgImage' => null, // URL + 'bgPosition' => '50% 50%', + 'bgPatternClass' => 'page-header-background-pattern', + 'parallaxSpeed' => 1.2, + 'videoPath' => null, + 'videoPosterType' => 'jpg', + + // ── Overlay + 'overlayColor' => 'dark', // primary|secondary|tertiary|quaternary|dark|light + 'overlayOpacity' => '7', // '0'..'10' (string por compat con Porto) + 'showOverlay' => true, + + // ── Tipografía + 'titleColor' => 'auto', // auto|primary|secondary|tertiary|quaternary|dark|light| + 'titleSize' => 'lg', // sm|md|lg (aplica a clase text-*) + 'uppercaseTitle' => false, + 'breadcrumbLight' => null, // null => auto; true/false fuerza + + // ── Animaciones + 'titleAnimation' => null, + 'titleDelay' => 0, + 'titleDuration' => null, + 'subtitleAnimation' => null, + 'subtitleDelay' => 0, + 'subtitleDuration' => null, + 'crumbAnimation' => null, + 'crumbDelay' => 0, + 'crumbDuration' => null, + 'mediaAnimation' => null, + 'mediaDelay' => 0, + 'mediaDuration' => null, + 'overflowTitle' => false, + 'overflowSubtitle' => false, + 'overflowBreadcrumb'=> false, +]) + +@php + // ===== Normalizaciones ===== + $align = in_array($align, ['left','center','right'], true) ? $align : 'center'; + $sizeMap = ['sm' => 'page-header-sm', 'md' => 'page-header-md', 'lg' => 'page-header-lg']; + $sizeClass = $sizeMap[$size] ?? $sizeMap['md']; + + // ===== Clases base del header ===== + $classes = ['page-header','page-header-modern', $sizeClass]; + + // Modo de fondo + $hasBackground = in_array($mode, ['image','fixed','parallax','video','pattern'], true); + if ($hasBackground) { + $classes[] = 'page-header-background'; + if ($mode === 'pattern') { + $classes[] = $bgPatternClass; // ej: page-header-background-pattern + } + } + + // Overlay + $overlayClasses = []; + if ($showOverlay) { + $overlayClasses = ['overlay', 'overlay-show', "overlay-color-{$overlayColor}", "overlay-op-{$overlayOpacity}"]; + } + + // Color de título + $semanticMap = [ + 'primary' => 'text-color-primary', + 'secondary' => 'text-color-secondary', + 'tertiary' => 'text-color-tertiary', + 'quaternary' => 'text-color-quaternary', + 'dark' => 'text-dark', + 'light' => 'text-light', + ]; + + $titleClasses = ['font-weight-bold']; + $titleSizeMap = ['sm' => 'text-6', 'md' => 'text-9', 'lg' => 'text-10']; + $titleClasses[] = $titleSizeMap[$titleSize] ?? $titleSizeMap['lg']; + + if ($titleColor === 'auto') { + // Heurística: si hay overlay dark -> texto claro; si overlay light -> texto oscuro + $titleClasses[] = (in_array($overlayColor, ['dark','primary','secondary','tertiary','quaternary'], true)) ? 'text-light' : 'text-dark'; + } elseif (isset($semanticMap[$titleColor])) { + $titleClasses[] = $semanticMap[$titleColor]; + } elseif (is_string($titleColor) && $titleColor !== '') { + $titleClasses[] = $titleColor; // acepta clases crudas + } + + if ($uppercaseTitle) $titleClasses[] = 'text-uppercase'; + + // Breadcrumbs + $ulClasses = ['breadcrumb','d-block']; + $ulClasses[] = match ($align) { + 'left' => 'text-md-start', + 'right' => 'text-md-end', + default => 'text-center', + }; + + // Breadcrumb light/dark: auto si null + if ($breadcrumbLight === null) { + $isDarkishOverlay = in_array($overlayColor, ['dark','primary','secondary','tertiary','quaternary'], true); + if ($isDarkishOverlay && $showOverlay) $ulClasses[] = 'breadcrumb-light'; + } elseif ($breadcrumbLight === true) { + $ulClasses[] = 'breadcrumb-light'; + } + + // Columnas + $titleCol = 'col-sm-12 col-md-'.($slot('media')->isNotEmpty() ? '5' : '12'); + $mediaCol = 'col-sm-12 col-md-7 d-flex align-items-end justify-content-end'; + + if ($align === 'left') { + $titleWrap = 'order-2 order-sm-1 align-self-center p-static'; + $crumbWrap = 'order-1'; + } elseif ($align === 'right') { + $titleWrap = 'order-2 order-sm-2 align-self-center p-static text-end'; + $crumbWrap = 'order-1 text-md-start'; + } else { // center + $titleWrap = 'align-self-center p-static order-2 text-center'; + $crumbWrap = 'order-1'; + } + + // Helpers de animación -> atributos data-* + $animAttrs = function (?string $name, int $delay = 0, ?string $duration = null) { + if (!$name) return ''; + $out = 'appear-animation'; + $out .= '" data-appear-animation="'.$name.'"'; + if ($delay > 0) $out .= ' data-appear-animation-delay="'.$delay.'"'; + if ($duration) $out .= ' data-appear-animation-duration="'.$duration.'"'; + return $out; + }; +@endphp + +
+
+
+ {{-- Breadcrumbs fila superior (centrado/izq/der según align) --}} +
+ @if($overflowBreadcrumb)
@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 +
  • + @if (!$active && $url) + {{ $name }} + @else + {{ $name }} + @endif +
    • + @endforeach +
+ @if($overflowBreadcrumb)
@endif +
+
+
+ {{-- Columna de título + subtítulo + CTA --}} +
+ @if($overflowTitle)
@endif +

{!! $title !!}

+ @if($overflowTitle)
@endif + + @if(!empty($subtitle)) + @if($overflowSubtitle)
@endif + {!! $subtitle !!} + @if($overflowSubtitle)
@endif + @endif + + @if(trim($slot('cta'))) +
{{ $slot('cta') }}
+ @endif +
+ + {{-- Columna media opcional --}} + @if(trim($slot('media'))) +
+
+
+ {{ $slot('media') }} +
+
+
+ @endif +
+
+
diff --git a/resources/views/components/header/modern-large.blade.php b/resources/views/components/header/modern-large.blade.php deleted file mode 100644 index db155eb..0000000 --- a/resources/views/components/header/modern-large.blade.php +++ /dev/null @@ -1,40 +0,0 @@ -@props([ - 'title' => '', - 'breadcrumbs' => [ - ['name' => 'Inicio', 'href' => '/', 'active' => true], - ], -]) - -
-
-
-
-

{!! $title !!}

-
-
-
    - @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 - -
  • - @if (!$active && $url) - {{ $name }} - @else - {{ $name }} - @endif -
    • - @endforeach -
-
-
-
-
diff --git a/resources/views/components/header/modern-small.blade.php b/resources/views/components/header/modern-small.blade.php deleted file mode 100644 index 7b840b7..0000000 --- a/resources/views/components/header/modern-small.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Modern Small

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/modern.blade.php b/resources/views/components/header/modern.blade.php deleted file mode 100644 index 22d7766..0000000 --- a/resources/views/components/header/modern.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Modern Medium

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/overview.blade.php b/resources/views/components/header/overview.blade.php deleted file mode 100644 index 3709440..0000000 --- a/resources/views/components/header/overview.blade.php +++ /dev/null @@ -1,15 +0,0 @@ -
-
-
-
-

Page Headers Overview

-
-
-
    -
  • Home
    • -
  • Features
    • -
-
-
-
-
diff --git a/resources/views/components/header/page-header.blade.php b/resources/views/components/header/page-header.blade.php new file mode 100644 index 0000000..86ba1df --- /dev/null +++ b/resources/views/components/header/page-header.blade.php @@ -0,0 +1,248 @@ +{{-- +============================================================================= + page-header.blade.php — Porto v12 (v3 DX + DOC + UI) + Encabezado clásico/moderno con props semánticos, colores, tamaños, animación + y control explícito del color de breadcrumbs. +============================================================================= + +USO BÁSICO +----------------------------------------------------------------------------- + + +COLORES Y ANIMACIONES +----------------------------------------------------------------------------- + + +ALINEACIÓN Y TAMAÑOS +----------------------------------------------------------------------------- + + +FULL WIDTH Y CLASES CRUDAS +----------------------------------------------------------------------------- + + +NOTAS +----------------------------------------------------------------------------- +- title permite HTML controlado por el autor. +- titleColor = "auto" calcula contraste según fondo (light/grey → dark; otros → light). +- crumbColor controla el color de las migas: default|dark|light. +- breadcrumb acepta href o bien route+params. +- Este componente no gestiona background-image/overlay (usa para eso). +--}} + +@props([ + // ---------------------------------------------------------------------------- + // CONTENIDO + // ---------------------------------------------------------------------------- + '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, // container-fluid si true + + // ---------------------------------------------------------------------------- + // TIPOGRAFÍA + // ---------------------------------------------------------------------------- + 'titileSize' => 'md', // sm | md | lg (compat typo) + 'breadcrumbSize' => 'md', // sm | md | lg + 'uppercase' => false, + + /** + * Color de migas. + * - default => usa utilitario de Porto "text-color-default" + * - dark => usa utilitario "text-color-dark" + * - light => usa estilo Porto "breadcrumb-light" (invertido para fondos oscuros) + */ + 'crumbColor' => 'default', // default | dark | light + + /** + * Color del

. + * auto | primary | secondary | tertiary | quaternary | dark | light | + */ + 'titleColor' => 'auto', + + // ---------------------------------------------------------------------------- + // ANIMACIONES (Porto appear-animation) + // ---------------------------------------------------------------------------- + 'titleAnimation' => null, + 'titleDelay' => 0, + 'titleDuration' => null, + 'crumbAnimation' => null, + 'crumbDelay' => 0, + 'crumbDuration' => null, + 'overflowTitle' => false, + 'overflowBreadcrumb'=> false, + + // ---------------------------------------------------------------------------- + // EXTRAS / COMPAT + // ---------------------------------------------------------------------------- + 'customHeader' => false, +]) + +@php + // ===== Normalizaciones ===== + $allowedColors = ['light','grey','gray','dark','primary','secondary','tertiary','quaternary']; + if ($color === 'gray') $color = 'grey'; + $color = in_array($color, $allowedColors, true) ? $color : 'grey'; + + $align = in_array($align, ['left','center','right'], true) ? $align : 'center'; + + $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 ===== + $h1SizeMap = ['sm' => 'text-6', 'md' => '', 'lg' => 'text-10']; + $semanticMap = [ + 'primary' => 'text-color-primary', + 'secondary' => 'text-color-secondary', + 'tertiary' => 'text-color-tertiary', + 'quaternary' => 'text-color-quaternary', + 'dark' => 'text-dark', + 'light' => 'text-light', + ]; + + $h1Class = 'font-weight-bold ' . ($h1SizeMap[$titileSize] ?? $h1SizeMap['md']); + if ($titleColor === 'auto') { + $h1Class .= in_array($color, ['light','grey']) ? ' text-dark' : ' text-light'; + } elseif (isset($semanticMap[$titleColor])) { + $h1Class .= ' ' . $semanticMap[$titleColor]; + } elseif (is_string($titleColor) && $titleColor !== '') { + $h1Class .= ' ' . $titleColor; // clases crudas + } + if ($uppercase) $h1Class .= ' text-uppercase'; + + // ===== Breadcrumb ===== + $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 => '', + }; + + // Color explícito del breadcrumb + if ($crumbColor === 'light') { + $ulClasses[] = 'breadcrumb-light'; + } elseif ($crumbColor === 'dark') { + $ulClasses[] = 'text-color-dark'; + } else { // default + $ulClasses[] = 'text-color-default'; + } + + // ===== 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'; +@endphp + +
+
+
+
+ @if($overflowTitle)
@endif +

{!! $title !!}

+ @if($overflowTitle)
@endif +
+
+ @if($overflowBreadcrumb)
@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 + +
  • + @if (!$active && $url) + {{ $name }} + @else + {{ $name }} + @endif +
    • + @endforeach +
+ @if($overflowBreadcrumb)
@endif +
+
+
+
diff --git a/resources/views/components/header/title-position.blade.php b/resources/views/components/header/title-position.blade.php deleted file mode 100644 index 18c4975..0000000 --- a/resources/views/components/header/title-position.blade.php +++ /dev/null @@ -1,189 +0,0 @@ -@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

- // 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 - // ---- 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 - -
-
-
-
- @if($overflowTitle)
@endif -

{!! $title !!}

- @if($overflowTitle)
@endif -
-
- @if($overflowBreadcrumb)
@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 - -
  • - @if (!$active && $url) - {{ $name }} - @else - {{ $name }} - @endif -
    • - @endforeach -
- @if($overflowBreadcrumb)
@endif -
-
-
-