@lit-roa/custom-header 0.1.4 → 0.2.0

package/README.md

@@ -1,19 +1,75 @@
 # @lit-roa/custom-header
 
-TODO: describe el componente.
+Encabezado de la tienda: logo, ligas con submenús o mega menú, buscador,
+cuenta y carrito. En pantallas angostas cambia a menú lateral, y puede
+quedarse pegado arriba y hacerse más bajo al hacer scroll.
+
+Las ligas, el logo, la cuenta y el carrito no navegan solos: emiten eventos
+y el sitio decide qué hacer (ctrl/cmd + clic sí abre la liga en otra pestaña).
 
 ```bash
 npm install @lit-roa/custom-header
 ```
 
-```ts
-import '@lit-roa/custom-header';
+```html
+<lr-custom-header nombre="Café Roa" logo="/logo.svg" piezas="3" pegajoso ocultar-al-bajar>
+  <lr-barra-anuncio slot="anuncio" texto="Envío gratis desde $999"></lr-barra-anuncio>
+</lr-custom-header>
 ```
 
-```html
-<lr-custom-header></lr-custom-header>
+```ts
+header.ligas = [
+  { texto: 'Inicio', href: '/' },
+  {
+    texto: 'Café',
+    href: '/cafe',
+    columnas: [
+      { titulo: 'Por tipo', ligas: [{ texto: 'Grano entero', href: '/cafe/grano' }] },
+      { titulo: 'Por origen', ligas: [{ texto: 'Chiapas', href: '/cafe/chiapas' }] },
+    ],
+    promo: { titulo: 'Nueva cosecha', texto: 'Tueste medio', imagen: '/img/promo.jpg', href: '/cafe/chiapas' },
+  },
+  { texto: 'Accesorios', hijos: [{ texto: 'Molinos', href: '/accesorios/molinos' }] },
+];
+
+header.addEventListener('navegar', (e) => router.navigateByUrl(e.detail.liga.href));
+header.addEventListener('abrir-carrito', () => abrirCarrito());
+header.addEventListener('abrir-cuenta', () => router.navigateByUrl('/cuenta'));
+header.addEventListener('buscar-texto', async (e) => (header.sugerencias = await buscar(e.detail.texto)));
 ```
 
+Cada liga puede tener `hijos` (submenú sencillo) o `columnas` (mega menú, con
+`promo` opcional). En celular ambos se muestran como acordeón.
+
+| Atributo | Tipo | Por omisión |
+| --- | --- | --- |
+| `logo` · `nombre` | `string` | `''` |
+| `href-inicio` | `string` | `'/'` |
+| `ligas` | `LigaHeader[]` (JSON) | `[]` |
+| `piezas` | `number` (globito del carrito) | `0` |
+| `usuario` | `string` (vacío = "Entrar") | `''` |
+| `texto-entrar` · `texto-cuenta` | `string` | `'Entrar'` · `'Mi cuenta y pedidos'` |
+| `sin-buscador` | `boolean` | `false` |
+| `placeholder-buscador` | `string` | `'Buscar en la tienda'` |
+| `sugerencias` | `Sugerencia[]` (ver `lr-buscador`) | `[]` |
+| `buscando` | `boolean` | `false` |
+| `pegajoso` | `boolean` (pegado arriba; se hace más bajo al bajar) | `false` |
+| `ocultar-al-bajar` | `boolean` (con `pegajoso`) | `false` |
+| `ancho-celular` | `number` (px; debajo usa la vista de celular) | `900` |
+
+Eventos: `navegar` con `{ liga }`, `abrir-carrito`, `abrir-cuenta`, y los del
+buscador: `buscar-texto`, `buscar` y `elegir-sugerencia`.
+
+Métodos: `abrirMenu()` y `cerrarMenu()`.
+
+Slots: `anuncio` (arriba de todo), `carrito` (reemplaza el botón, por ejemplo
+con `<lr-mini-carrito>`) y `menu-pie` (abajo del menú de celular).
+
+Estilos: `--lr-header-fondo`, `--lr-header-texto`, `--lr-header-alto`,
+`--lr-header-alto-compacto`, `--lr-header-ancho`, `--lr-header-globo`,
+`--lr-header-avatar`, `--lr-header-promo-fondo`, `--lr-header-capa`,
+`::part(header)`, `::part(logo)`.
+
 ## Desarrollo
 
 ```bash

package/dist/custom-header.d.ts

@@ -1,11 +1,111 @@
 import { LitElement } from 'lit';
+import '@lit-roa/buscador';
+import type { Sugerencia } from '@lit-roa/buscador';
+export interface LigaHeader {
+    texto: string;
+    href?: string;
+    id?: string;
+    /** Submenú sencillo. */
+    hijos?: LigaHeader[];
+    /** Mega menú: columnas con título. Si hay `columnas` se ignoran `hijos`. */
+    columnas?: {
+        titulo: string;
+        ligas: LigaHeader[];
+    }[];
+    /** Tarjeta destacada a la derecha del mega menú. */
+    promo?: {
+        titulo: string;
+        texto?: string;
+        imagen?: string;
+        href?: string;
+        id?: string;
+    };
+}
+export interface DetalleNavegar {
+    liga: LigaHeader;
+}
 /**
- * TODO: describe el componente.
+ * Encabezado de la tienda: logo, ligas con submenús o mega menú, buscador,
+ * cuenta y carrito. En pantallas angostas muestra un menú lateral. Puede
+ * quedarse pegado arriba y hacerse más bajo al hacer scroll.
+ *
+ * Las ligas no navegan solas: el sitio escucha `navegar` y decide.
+ *
+ * @fires navegar - Al tocar una liga, el logo o una promoción. `detail`: `{ liga }`.
+ * @fires abrir-carrito - Al tocar el carrito.
+ * @fires abrir-cuenta - Al tocar "Entrar" o el nombre de la persona.
+ * @fires buscar-texto - (del buscador) Al escribir. `detail`: `{ texto }`.
+ * @fires buscar - (del buscador) Al presionar Enter. `detail`: `{ texto }`.
+ * @fires elegir-sugerencia - (del buscador) `detail`: `{ sugerencia }`.
+ * @slot anuncio - Arriba de todo, por ejemplo `<lr-barra-anuncio>`.
+ * @slot carrito - Reemplaza el botón del carrito (por ejemplo con `<lr-mini-carrito>`).
+ * @slot menu-pie - Contenido extra abajo del menú de celular.
  */
 export declare class LrCustomHeader extends LitElement {
     static styles: import("lit").CSSResult[];
-    titulo: string;
+    /** URL de la imagen del logo. */
+    logo: string;
+    /** Nombre de la tienda (texto junto al logo y texto alternativo). */
+    nombre: string;
+    /** Liga del logo. */
+    hrefInicio: string;
+    /** Ligas del menú. Como atributo, en JSON. */
+    ligas: LigaHeader[];
+    /** Piezas en el carrito (globito). */
+    piezas: number;
+    /** Nombre de la persona con sesión iniciada; vacío muestra "Entrar". */
+    usuario: string;
+    textoEntrar: string;
+    textoCuenta: string;
+    /** Oculta el buscador. */
+    sinBuscador: boolean;
+    placeholderBuscador: string;
+    /** Sugerencias para el buscador (ver `lr-buscador`). */
+    sugerencias: Sugerencia[];
+    buscando: boolean;
+    /** Se queda pegado arriba y se hace más bajo al hacer scroll. */
+    pegajoso: boolean;
+    /** Con `pegajoso`, se esconde al bajar y aparece al subir. */
+    ocultarAlBajar: boolean;
+    /** Ancho (px) del header debajo del cual se usa la vista de celular. */
+    anchoCelular: number;
+    compacto: boolean;
+    escondido: boolean;
+    private celular;
+    private abierta;
+    private abiertasMenu;
+    private conAnuncio;
+    private dialogo;
+    private observador?;
+    private ultimoScroll;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
+    /** Abre el menú de celular. */
+    abrirMenu(): void;
+    /** Cierra el menú de celular y los submenús. */
+    cerrarMenu(): void;
+    private vistaEscritorio;
+    private vistaCelular;
+    private logoTpl;
+    private buscadorTpl;
+    private cuentaTpl;
+    private carritoTpl;
+    private ligaEscritorio;
+    private megaTpl;
+    private ligaCelular;
+    private alternarMenu;
+    private iniciales;
+    private alNavegar;
+    private alCuenta;
+    private alCarrito;
+    private alClicLiga;
+    private alSalirLiga;
+    private alCambiarAnuncio;
+    private alClicDialogo;
+    private alClicFuera;
+    private alEscape;
+    private alScroll;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/custom-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"custom-header.d.ts","sourceRoot":"","sources":["../src/custom-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C;;GAEG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAoCpB;IAEU,MAAM,SAAsB;IAE/B,MAAM;CAehB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}
+{"version":3,"file":"custom-header.d.ts","sourceRoot":"","sources":["../src/custom-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAYrD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAEpD,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,wBAAwB;IACxB,KAAK,CAAC,EAAE,UAAU,EAAE,CAAC;IACrB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,UAAU,EAAE,CAAA;KAAE,EAAE,CAAC;IACrD,oDAAoD;IACpD,KAAK,CAAC,EAAE;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,EAAE,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACzF;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BA4ZpB;IAEF,iCAAiC;IACrB,IAAI,SAAM;IAEtB,qEAAqE;IACzD,MAAM,SAAM;IAExB,qBAAqB;IACmB,UAAU,SAAO;IAEzD,8CAA8C;IACnB,KAAK,EAAE,UAAU,EAAE,CAAM;IAEpD,sCAAsC;IACV,MAAM,SAAK;IAEvC,wEAAwE;IAC5D,OAAO,SAAM;IAEgB,WAAW,SAAY;IAEvB,WAAW,SAAyB;IAE7E,0BAA0B;IAC8B,WAAW,UAAS;IAE3B,mBAAmB,SAAyB;IAE7F,wDAAwD;IAC7B,WAAW,EAAE,UAAU,EAAE,CAAM;IAEN,QAAQ,UAAS;IAErE,iEAAiE;IACrB,QAAQ,UAAS;IAE7D,8DAA8D;IACF,cAAc,UAAS;IAEnF,wEAAwE;IAChB,YAAY,SAAO;IAE/B,QAAQ,UAAS;IACjB,SAAS,UAAS;IAErD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAM;IACrB,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,UAAU,CAAS;IAEnB,OAAO,CAAC,OAAO,CAAqB;IAErD,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB;IASjB,oBAAoB;IAQpB,MAAM;IASf,+BAA+B;IAC/B,SAAS;IAIT,gDAAgD;IAChD,UAAU;IAKV,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,cAAc;IAgBtB,OAAO,CAAC,OAAO;IA2Bf,OAAO,CAAC,WAAW;IAyBnB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,QAAQ,CAGd;IAEF,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,QAAQ,CAEd;IAEF,OAAO,CAAC,QAAQ,CAMd;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}