@rocketsearch/vue-uappi 0.0.0-stage → 0.1.0

package/runtime/components/RocketShowcase.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    v-if="showcase || loading || debug"
+    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading }]"
+    :data-rocket-showcase-position="position"
+  >
+    <div v-if="loading" class="rocket-search__showcase rocket-search__showcase--skeleton" :style="columnsStyle">
+      <div class="rocket-search__showcase__title rocket-search__product-placeholder__item" />
+      <div class="rocket-search__product-placeholder">
+        <div v-for="n in columns" :key="n" class="rocket-search__product-placeholder__product-line">
+          <div v-for="i in 6" :key="i" :class="['rocket-search__product-placeholder__item', 'item-' + i]" />
+        </div>
+      </div>
+    </div>
+
+    <!-- Banner autônomo na posição de vitrine: só o criativo, sem título nem produtos. -->
+    <RocketBannerItem v-else-if="bannerOnly" :item="showcase" :position="position" />
+
+    <section
+      v-else-if="showcase"
+      ref="root"
+      class="rocket-search__showcase"
+      :data-rocket-showcase-id="showcase.id"
+      :style="columnsStyle"
+      @click.capture="trackClick"
+    >
+      <!-- Banner vinculado (linked_banner_id): acima dos produtos, medido com showcaseId + bannerId. -->
+      <div v-if="linkedBanner" class="rocket-search__showcase__banner">
+        <RocketBannerItem :item="showcase" :position="position" />
+      </div>
+      <!-- Slot default: o tema pode usar o carrossel dele (recebe showcase + produtos Uappi). -->
+      <slot v-if="products.length" :showcase="showcase" :products="products">
+        <div v-if="showcase.name" class="rocket-search__showcase__title" v-text="showcase.name" />
+        <div v-if="showcase.description" class="rocket-search__showcase__description" v-text="showcase.description" />
+        <ul ref="track" class="rocket-search__showcase__track">
+          <li v-for="(product, index) in products" :key="product.id" class="rocket-search__showcase__slide">
+            <slot name="product" :product="product" :position="index">
+              <RouterLink :to="productPath(product)" class="rocket-search__card">
+                <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
+                <span class="rocket-search__card-name" v-text="product.nome" />
+                <span v-if="productPrice(product) !== null" class="rocket-search__card-price" v-text="formatCurrency(productPrice(product))" />
+              </RouterLink>
+            </slot>
+          </li>
+        </ul>
+        <button type="button" class="rocket-search__swiper-button-prev" aria-label="Anteriores" @click="slide(-1)" />
+        <button type="button" class="rocket-search__swiper-button-next" aria-label="Próximos" @click="slide(1)" />
+      </slot>
+    </section>
+  </div>
+</template>
+
+<script>
+// CSS pelo script e não por <style src>: o plugin-vue registra o dono de um src pelo caminho
+// do arquivo, e o mesmo .css em dois SFCs (com índices diferentes) quebra o build.
+import '../css/common.css';
+import '../css/showcase.css';
+import '../css/banner.css';
+import RocketBannerItem from './banner/RocketBannerItem.vue';
+import { productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
+import { isBannerItem } from '../banner.js';
+
+export default {
+  name: 'RocketShowcase',
+  components: { RocketBannerItem },
+  emits: ['products-loaded'],
+  props: {
+    // Posição cadastrada no painel (placement.position): top, middle, bottom...
+    position: { type: String, required: true },
+    // Força o pageType; sem ele vem da página atual (currentPageData do tema).
+    pageType: { type: String, default: '' },
+    mediaSize: { type: String, default: 'medium' }
+  },
+  data () {
+    return { showcase: null, products: [], loading: false, debug: false };
+  },
+  computed: {
+    columns () {
+      const layout = (this.showcase && this.showcase.layout) || {};
+      const mobile = typeof window !== 'undefined' && window.innerWidth < 1024;
+      return Number(mobile ? layout.mobileColumns : layout.desktopColumns) || (mobile ? 2 : 4);
+    },
+    columnsStyle () {
+      return { '--product-columns': this.columns };
+    },
+    bannerOnly () {
+      return isBannerItem(this.showcase);
+    },
+    linkedBanner () {
+      const content = this.showcase.banner || {};
+      return this.showcase.bannerId != null && !!(content.imageUrl || content.mobileImageUrl);
+    }
+  },
+  watch: {
+    // O contexto da página chega pelo currentPageData do tema (o plugin traduz para $rocket.setPage).
+    '$rocket.currentPage.value' () {
+      if (this.pageType || this.$rocket.getPage().section) this.load();
+    }
+  },
+  mounted () {
+    // ?rocket-search-debug=true: o slot aparece mesmo vazio.
+    this.debug = document.body.classList.contains('rocket-search-debug');
+    if (this.pageType || this.$rocket.getPage().section) this.load();
+  },
+  beforeUnmount () {
+    if (this.observer) this.observer.disconnect();
+  },
+  methods: {
+    productImage (product) {
+      return productImage(product, this.mediaSize);
+    },
+    productPath,
+    productPrice,
+    formatCurrency,
+
+    async load () {
+      if (this.started) return;
+      this.started = true;
+      try {
+        const showcases = await this.$rocket.getPageShowcases(this.pageType || undefined);
+        const showcase = showcases.find(s => ((s.placement && s.placement.position) || s.position) === this.position);
+        if (!showcase) return;
+        // Banner autônomo: render direto, sem produtos, skeleton nem impressão de vitrine
+        // (o RocketBannerItem mede o criativo).
+        if (isBannerItem(showcase)) {
+          this.showcase = showcase;
+          return;
+        }
+        const ids = (showcase.products || []).map(p => p.id);
+        const hasBanner = showcase.bannerId != null && showcase.banner;
+        if (!ids.length && !hasBanner) return;
+        // Esqueleto só quando há vitrine na posição — slot vazio não pisca.
+        this.loading = true;
+        const products = ids.length ? await this.$rocket.fetchProducts(ids) : [];
+        // Sem produto ativo na Uappi, o banner vinculado ainda entra.
+        if (!products.length && !hasBanner) return;
+        this.showcase = showcase;
+        this.products = products;
+        this.$emit('products-loaded', { showcase, products });
+      }
+      catch (e) {
+        // Vitrine é complementar: falha não pode quebrar a página.
+      }
+      finally {
+        this.loading = false;
+      }
+      this.$nextTick(this.observeImpression);
+    },
+
+    experimentData (data) {
+      const exp = this.showcase.experiment;
+      if (exp) {
+        data.experimentId = exp.experimentId;
+        data.variantId = exp.variantId;
+      }
+      return data;
+    },
+
+    observeImpression () {
+      const el = this.$refs.root;
+      if (!el) return;
+      const send = () => this.$rocket.dispatchEvent('view', this.experimentData({
+        vitrine: this.showcase.id,
+        showcaseId: this.showcase.id,
+        meta: { type: 'showcase_impression', source: 'showcase:' + this.showcase.id }
+      })).catch(() => {});
+      if (!('IntersectionObserver' in window)) return send();
+      this.observer = new IntersectionObserver((entries) => {
+        if (!entries.some(e => e.isIntersecting)) return;
+        this.observer.disconnect();
+        send();
+      });
+      this.observer.observe(el);
+    },
+
+    // Casa o link clicado com o produto pela rota — funciona com o card padrão e com o
+    // carrossel do tema no slot. SPA não descarrega a página: o evento sai sem segurar a navegação.
+    trackClick (event) {
+      const link = event.target && event.target.closest ? event.target.closest('a[href]') : null;
+      if (!link) return;
+      const path = new URL(link.href, window.location.href).pathname;
+      const position = this.products.findIndex(p => productPath(p) === path);
+      if (position < 0) return;
+      this.$rocket.dispatchEvent('click', this.experimentData({
+        vitrine: this.showcase.id,
+        productId: String(this.products[position].id),
+        position,
+        meta: { source: 'showcase:' + this.showcase.id }
+      })).catch(() => {});
+    },
+
+    slide (direction) {
+      const track = this.$refs.track;
+      if (track) track.scrollBy({ left: direction * track.clientWidth, behavior: 'smooth' });
+    }
+  }
+};
+</script>

package/runtime/components/banner/RocketBannerItem.vue

@@ -0,0 +1,218 @@
+<template>
+  <component
+    :is="href ? 'a' : 'div'"
+    :href="href || null"
+    :rel="href && external ? 'noopener' : null"
+    class="rocket-search rocket-search__banner"
+    :style="rootStyle"
+    :data-rocket-banner-id="ownId"
+    :data-rocket-showcase-id="item.id"
+    @click="onClick"
+  >
+    <picture class="rocket-search__banner__media" :style="{ aspectRatio: naturalRatio || ratio }">
+      <source v-if="mobileUrl && mobileUrl !== desktopUrl" :media="mobileMedia" :srcset="mobileSrcset" :sizes="width ? null : sizes">
+      <img
+        ref="img"
+        class="rocket-search__banner__image"
+        :src="src"
+        :srcset="width ? null : desktopSrcset || null"
+        :sizes="width || !desktopSrcset ? null : sizes"
+        :alt="content.alt || content.title || item.name || ''"
+        :loading="loading"
+        :fetchpriority="fetchPriority || null"
+        decoding="async"
+        :style="imgStyle"
+        @load="syncRatio"
+        @error="onImageError"
+      >
+    </picture>
+    <!-- Texto só quando o lojista marcou showStoreText no dashboard. -->
+    <div v-if="content.showStoreText && (content.title || content.subtitle || content.ctaText)" class="rocket-search__banner__caption" :style="captionStyle">
+      <strong v-if="content.title" class="rocket-search__banner__title" v-text="content.title" />
+      <span v-if="content.subtitle" class="rocket-search__banner__subtitle" v-text="content.subtitle" />
+      <span v-if="content.ctaText" class="rocket-search__banner__cta" v-text="content.ctaText" />
+    </div>
+  </component>
+</template>
+
+<script>
+import {
+  MOBILE_MEDIA, cdnResize, buildSrcset, resolveAspectRatio, hasExplicitAspectRatio, pickStyles,
+  highestMilestone, bannerTracking, bannerViewData, bannerClickData
+} from '../../banner.js';
+
+const VIEW_THRESHOLD = 0.5;
+const MIN_VISIBLE_MS = 1000;
+
+export default {
+  name: 'RocketBannerItem',
+  props: {
+    // Item de /banners/context ou de /showcases/context (autônomo ou vitrine com bannerId).
+    item: { type: Object, required: true },
+    // Posição do slot (placement.position do item tem precedência).
+    position: { type: String, default: '' },
+    slideIndex: { type: Number, default: null },
+    // Hero é candidato a LCP: eager. Demais, lazy.
+    loading: { type: String, default: 'lazy' },
+    fetchPriority: { type: String, default: '' },
+    sizes: { type: String, default: '100vw' },
+    // Largura exata (px) medida do slot; 0 = usa srcset.
+    width: { type: Number, default: 0 },
+    imageResizing: { type: Boolean, default: true },
+    aspectRatio: { type: String, default: '' }
+  },
+  data () {
+    return { naturalRatio: null, resizeFailed: false, mobileMedia: MOBILE_MEDIA };
+  },
+  computed: {
+    content () {
+      return this.item.banner || {};
+    },
+    styles () {
+      return this.content.styles || {};
+    },
+    desktopUrl () {
+      return this.content.imageUrl || this.content.mobileImageUrl || '';
+    },
+    mobileUrl () {
+      return this.content.mobileImageUrl || '';
+    },
+    // Resize da CF desligado por prop ou porque falhou nesta imagem (origem sem o recurso).
+    resize () {
+      return this.imageResizing && !this.resizeFailed;
+    },
+    src () {
+      if (!this.resize) return this.desktopUrl;
+      return cdnResize(this.desktopUrl, this.width || 1920);
+    },
+    desktopSrcset () {
+      return buildSrcset(this.desktopUrl, this.resize);
+    },
+    mobileSrcset () {
+      if (!this.resize) return this.mobileUrl;
+      return this.width ? cdnResize(this.mobileUrl, this.width) : buildSrcset(this.mobileUrl);
+    },
+    href () {
+      return this.content.link || '';
+    },
+    external () {
+      return !this.internalPath(this.href);
+    },
+    ownId () {
+      return this.item.bannerId != null ? this.item.bannerId : this.item.id;
+    },
+    ratio () {
+      return resolveAspectRatio(this.styles, this.aspectRatio);
+    },
+    rootStyle () {
+      return pickStyles(this.styles, ['backgroundColor', 'borderRadius', 'maxWidth', 'margin', 'padding']);
+    },
+    imgStyle () {
+      return pickStyles(this.styles, ['objectFit', 'objectPosition', 'borderRadius']);
+    },
+    captionStyle () {
+      return pickStyles(this.styles, ['textColor']);
+    },
+    tracking () {
+      return bannerTracking(this.item, { slot: this.position, slideIndex: this.slideIndex });
+    }
+  },
+  mounted () {
+    // Imagem do cache pode completar antes do mount e não disparar @load.
+    const img = this.$refs.img;
+    if (img && img.complete) {
+      if (img.naturalWidth) this.syncRatio();
+      else this.onImageError(); // falhou antes do mount
+    }
+    this.observeImpression();
+  },
+  beforeUnmount () {
+    if (this.observer) this.observer.disconnect();
+    clearTimeout(this.dwellTimer);
+  },
+  methods: {
+    // Sem proporção cadastrada, a caixa reservada é um chute (3:1): corrige para a
+    // proporção real do arquivo assim que carrega — senão o cover cortaria o banner.
+    syncRatio () {
+      const img = this.$refs.img;
+      if (hasExplicitAspectRatio(this.styles, this.aspectRatio) || !img || !img.naturalWidth) return;
+      this.naturalRatio = img.naturalWidth + ' / ' + img.naturalHeight;
+    },
+
+    // /cdn-cgi/image/ responde 404 em origem sem o Image Resizing (ex.: upload da Uappi).
+    // Na Linx o banner sumia; aqui cai para a URL original.
+    onImageError () {
+      if (this.resize) this.resizeFailed = true;
+    },
+
+    imageVariant () {
+      const narrow = window.matchMedia && window.matchMedia(MOBILE_MEDIA).matches;
+      if (narrow && this.content.mobileImageUrl) return 'mobile';
+      if (this.content.imageUrl) return 'desktop';
+      return this.content.mobileImageUrl ? 'mobile' : undefined;
+    },
+
+    trackingNow () {
+      return Object.assign({}, this.tracking, { imageVariant: this.imageVariant() });
+    },
+
+    // Impressão viewable: ≥50% visível por ≥1s; meta leva o maior marco 25/50/75.
+    observeImpression () {
+      let lastRatio = 0;
+      let peak = 0;
+      const fire = () => {
+        if (this.observer) this.observer.disconnect();
+        this.$rocket.dispatchEvent('view', bannerViewData(this.trackingNow(), lastRatio, peak || highestMilestone(lastRatio))).catch(() => {});
+      };
+      if (!('IntersectionObserver' in window)) {
+        lastRatio = 1;
+        peak = 0.75;
+        return fire();
+      }
+      this.observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          lastRatio = entry.intersectionRatio || 0;
+          peak = Math.max(peak, highestMilestone(lastRatio));
+          if (entry.isIntersecting && lastRatio >= VIEW_THRESHOLD) {
+            if (!this.dwellTimer) this.dwellTimer = setTimeout(fire, MIN_VISIBLE_MS);
+          }
+          else {
+            clearTimeout(this.dwellTimer);
+            this.dwellTimer = null;
+          }
+        });
+      }, { threshold: [0, 0.25, 0.5, 0.75, 1] });
+      this.observer.observe(this.$el);
+    },
+
+    internalPath (href) {
+      try {
+        const origin = window.location.origin;
+        const url = new URL(href, origin);
+        return url.origin === origin ? url.pathname + url.search + url.hash : null;
+      }
+      catch (e) {
+        return null;
+      }
+    },
+
+    // Clique com clickX/clickY relativos (0–1). Destino interno vai pelo router (SPA não
+    // descarrega, o evento sai sem segurar); externo segura até 600ms (trackThenNavigate).
+    onClick (event) {
+      if (!this.href) return;
+      const rect = this.$el.getBoundingClientRect();
+      const x = rect.width > 0 ? (event.clientX - rect.left) / rect.width : undefined;
+      const y = rect.height > 0 ? (event.clientY - rect.top) / rect.height : undefined;
+      const send = () => this.$rocket.dispatchEvent('click', bannerClickData(this.trackingNow(), x, y)).catch(() => {});
+      const path = this.internalPath(this.href);
+      if (path && !this.$rocket.isModifiedClick(event, this.$el)) {
+        event.preventDefault();
+        send();
+        this.$router.push(path).catch(() => {});
+        return;
+      }
+      this.$rocket.trackThenNavigate(event, this.$el, this.href, send);
+    }
+  }
+};
+</script>

package/runtime/components/search/RocketSearchFacets.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="rocket-search__facets" :class="[{ opened: fixedFacetsOpened }, { 'rocket-search__facets--fixed': facetsMode === 'fixed' }]">
+    <div class="rocket-search__facets__header">
+      <strong>Filtrar</strong>
+      <button v-if="facetsMode === 'fixed'" class="rocket-search__close" aria-label="Fechar filtros" @click="$emit('close')">
+        X
+      </button>
+    </div>
+
+    <div v-if="appliedFilters.length > 0 && isMobile" class="rocket-search__facets__selected">
+      <span>Filtros aplicados:</span>
+      <ul>
+        <template v-for="(facet, i) in appliedFilters" :key="'af-' + i">
+          <li v-for="(value, j) in facet.values || []" :key="'f-' + j" :data-alias="facet.alias">
+            <span class="option-title" :data-alias="facet.alias">
+              <span class="name" v-text="facet.alias + ':'" />
+              <span class="label" v-text="value" />
+            </span>
+            <button class="rocket-search__facets__selected__clear-filter" @click="$emit('clear-facet', value, facet)">
+              x
+            </button>
+          </li>
+          <li v-if="facet.type === 'range'" :data-alias="facet.alias">
+            <span class="option-title" :data-alias="facet.alias">
+              <span class="name" v-text="facet.alias + ':'" />
+              <span class="label">De {{ formatCurrency(facet.min) }} até {{ formatCurrency(facet.max) }}</span>
+            </span>
+            <button class="rocket-search__facets__selected__clear-filter" @click="$emit('clear-price')">
+              x
+            </button>
+          </li>
+          <li v-if="facet.type === 'boolean'" :data-alias="facet.alias" :data-type="facet.type">
+            <span class="option-title" :data-alias="facet.alias">
+              <span class="name" v-text="facet.alias + ':'" />
+              <span class="label" v-text="facet.value ? 'Sim' : 'Não'" />
+            </span>
+            <button class="rocket-search__facets__selected__clear-filter" @click="$emit('clear-boolean', facet)">
+              x
+            </button>
+          </li>
+        </template>
+        <li class="rocket-search__clear-all-filters">
+          <button @click="$emit('clear-all')">
+            Limpar filtros
+          </button>
+        </li>
+      </ul>
+    </div>
+
+    <div class="rocket-search__facets__group">
+      <div
+        v-for="(facet, key, index) in facets"
+        :key="key"
+        class="rocket-search__facets-type"
+        :facet-alias="key"
+        :facet-type="facet.type"
+        :class="{ closed: closedFacets.includes(facet.field), last: index === facetCount - 1, first: index === 0 }"
+      >
+        <div class="rocket-search__facets-title" @click="$emit('toggle-facet', facet)">
+          <strong v-text="facet.label" />
+          <span class="icon">
+            <svg xmlns="http://www.w3.org/2000/svg" width="9.44" height="6.195" viewBox="0 0 9.44 6.195">
+              <g transform="translate(-2 26.995) rotate(-90)">
+                <path d="M25.51,2.5a.91.91,0,0,1,.631.258.9.9,0,0,1,0,1.261l-2.691,2.7,2.7,2.7a.892.892,0,0,1-1.261,1.261L21.558,7.349a.879.879,0,0,1-.258-.631.917.917,0,0,1,.258-.631l3.322-3.331A.926.926,0,0,1,25.51,2.5Z" fill="#000" stroke="#000" stroke-width="1" />
+              </g>
+            </svg>
+          </span>
+        </div>
+        <div class="rocket-search__facets-content">
+          <RocketSearchRange
+            v-if="facet.type === 'range'"
+            :key="rangeKey"
+            :facet="facet"
+            @apply="$emit('apply-price', $event)"
+          />
+          <!-- terms e boolean usam a mesma lista (na Linx o boolean reaproveitava o template de terms). -->
+          <ul v-else>
+            <li
+              v-for="(value, i) in facet.values || []"
+              :key="i"
+              :data-selected="isSelected(value.value, facet)"
+              :class="{ selected: isSelected(value.value, facet) }"
+              :style="facet.label.includes('Tamanho') ? ('order: ' + (String(value.value).split('/')[0] || '')) : ''"
+            >
+              <a role="button" tabindex="0" @click="$emit('click-facet', value, facet)" @keyup.enter="$emit('click-facet', value, facet)">
+                <div class="icon">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="11.999" height="11.999" viewBox="0 0 11.999 11.999">
+                    <path d="M6,12a6,6,0,1,1,6-6A6.006,6.006,0,0,1,6,12ZM3.106,5.349l-.045,0a.639.639,0,0,0-.447.226.642.642,0,0,0,.09.915L4.843,8.31a.646.646,0,0,0,.416.151h.025a.646.646,0,0,0,.428-.188c.544-.546,1.138-1.139,1.735-1.735l.059-.059c.631-.63,1.263-1.262,1.84-1.841a.635.635,0,0,0,.193-.459.654.654,0,0,0-.195-.459A.643.643,0,0,0,8.9,3.538H8.878a.638.638,0,0,0-.442.195C7.9,4.275,7.311,4.859,6.723,5.446l-1.5,1.5L3.532,5.514A.637.637,0,0,0,3.106,5.349Z" fill="#ff495d" />
+                  </svg>
+                </div>
+                <strong class="option-title" v-text="valueLabel(value.value)" />
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="facetsMode === 'fixed'" class="rocket-search__facets__buttons">
+      <button class="apply" @click="$emit('close')">
+        Aplicar filtros
+      </button>
+      <button class="clear-all" @click="$emit('clear-all')">
+        Remover filtros
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import RocketSearchRange from './RocketSearchRange.vue';
+import { formatCurrency } from '../../uappi.js';
+
+export default {
+  name: 'RocketSearchFacets',
+  components: { RocketSearchRange },
+  emits: ['close', 'toggle-facet', 'click-facet', 'apply-price', 'clear-facet', 'clear-price', 'clear-boolean', 'clear-all'],
+  props: {
+    facets: { type: Object, default: () => ({}) },
+    appliedFilters: { type: Array, default: () => [] },
+    closedFacets: { type: Array, default: () => [] },
+    fixedFacetsOpened: { type: Boolean, default: false },
+    facetsMode: { type: String, default: 'side' },
+    isMobile: { type: Boolean, default: false },
+    isSelected: { type: Function, required: true },
+    rangeKey: { type: Number, default: 0 }
+  },
+  computed: {
+    facetCount () {
+      return Object.keys(this.facets || {}).length;
+    }
+  },
+  methods: {
+    formatCurrency,
+    // Facet booleano (ex.: Disponibilidade/hasStock) vem como 0/1 — mesmo texto do chip aplicado.
+    valueLabel (value) {
+      if (value === 0) return 'Não';
+      if (value === 1) return 'Sim';
+      return value;
+    }
+  }
+};
+</script>

package/runtime/components/search/RocketSearchPagination.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="rocket-search__pager">
+    <div class="rocket-search__pager__page-numbers">
+      <span v-if="hasPrevPage" class="rocket-search__pager__prev">
+        <a rel="prev" :data-index="page - 1" aria-label="Página anterior" @click="$emit('change', page - 1)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="7.428" height="12.155" viewBox="0 0 7.428 12.155">
+            <path d="M213.673,195.338l-1.351,1.351-4.727-4.727-4.727,4.727-1.351-1.351,6.078-6.078Z" transform="translate(196.688 -201.518) rotate(90)" fill="#828282" />
+          </svg>
+        </a>
+      </span>
+
+      <template v-for="p in pages" :key="'p' + p">
+        <span v-if="p === page" class="rocket-search__pager__page-selected" :title="p" v-text="p" />
+        <span v-else class="rocket-search__pager__page-number" @click="$emit('change', p)">
+          <a class="rocket-search__pager__page-index" :title="p" :data-index="p" v-text="p" />
+        </span>
+      </template>
+
+      <span v-if="hasNextPage" class="rocket-search__pager__next">
+        <a rel="next" :data-index="page + 1" aria-label="Próxima página" @click="$emit('change', page + 1)">
+          <svg xmlns="http://www.w3.org/2000/svg" width="7.428" height="12.155" viewBox="0 0 7.428 12.155">
+            <path d="M213.673,195.338l-1.351,1.351-4.727-4.727-4.727,4.727-1.351-1.351,6.078-6.078Z" transform="translate(196.688 -201.518) rotate(90)" fill="#828282" />
+          </svg>
+        </a>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+// Janela de 5 páginas centrada na atual (mesma regra da Linx).
+const WINDOW_SIZE = 5;
+
+export default {
+  name: 'RocketSearchPagination',
+  emits: ['change'],
+  props: {
+    page: { type: Number, required: true },
+    totalPages: { type: Number, required: true },
+    hasPrevPage: { type: Boolean, default: false },
+    hasNextPage: { type: Boolean, default: false }
+  },
+  computed: {
+    pages () {
+      const half = Math.floor(WINDOW_SIZE / 2);
+      let start = this.page - half;
+      let end = this.page + half;
+      if (start < 1) {
+        start = 1;
+        end = Math.min(WINDOW_SIZE, this.totalPages);
+      }
+      if (end > this.totalPages) {
+        end = this.totalPages;
+        start = Math.max(1, this.totalPages - WINDOW_SIZE + 1);
+      }
+      const pages = [];
+      for (let i = start; i <= end; i++) pages.push(i);
+      return pages;
+    }
+  }
+};
+</script>