@rocketsearch/vue-uappi 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Rocket Search para storefronts Uappi em Vue 3 + Vite + Pinia: busca, autocomplete, vitrines, banners e eventos",
   "type": "module",
   "main": "index.js",

package/runtime/components/RocketLanding.vue

@@ -50,7 +50,10 @@ export default {
   },
   methods: {
     async load () {
-      this.showcases = this.key ? await this.$rocket.getPageShowcases('custom', this.key) : [];
+      const key = this.key;
+      const showcases = key ? await this.$rocket.getPageShowcases('custom', key, true) : [];
+      // Troca rápida de rota: a resposta da landing anterior não sobrescreve a atual.
+      if (key === this.key) this.showcases = showcases;
     }
   }
 };

package/runtime/components/RocketShowcase.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    v-if="showcase || loading || debug"
-    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading }]"
-    :data-rocket-showcase-position="position"
+    v-if="showcase || loading || debug || restIds.length"
+    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading && !restIds.length, 'rocket-search--stacked': stacked }]"
+    :data-rocket-showcase-position="stacked ? null : 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" />
@@ -47,6 +47,26 @@
         <button type="button" class="rocket-search__swiper-button-next" aria-label="Próximos" @click="slide(1)" />
       </slot>
     </section>
+
+    <!-- Demais vitrines da mesma posição, na ordem da API: cada uma medida por conta própria. -->
+    <RocketShowcase
+      v-for="id in restIds"
+      :key="id"
+      :position="position"
+      :page-type="pageType"
+      :custom-key="customKey"
+      :showcase-id="id"
+      :media-size="mediaSize"
+      stacked
+      @products-loaded="$emit('products-loaded', $event)"
+    >
+      <template v-if="$slots.default" #default="scope">
+        <slot v-bind="scope" />
+      </template>
+      <template v-if="$slots.product" #product="scope">
+        <slot name="product" v-bind="scope" />
+      </template>
+    </RocketShowcase>
   </div>
 </template>
 
@@ -71,12 +91,15 @@ export default {
     pageType: { type: String, default: '' },
     // Landing (page-type="custom"): identificador cadastrado no painel em "Personalizado".
     customKey: { type: String, default: '' },
-    // Vitrine específica (a landing tem várias na mesma posição); sem ele, a primeira da posição.
+    // Vitrine específica (a landing tem várias na mesma posição); sem ele, todas as da posição.
     showcaseId: { type: [String, Number], default: null },
-    mediaSize: { type: String, default: 'medium' }
+    mediaSize: { type: String, default: 'medium' },
+    // Uso interno: vitrine empilhada abaixo da primeira da posição. Sem o atributo de posição,
+    // o debug contorna a posição uma vez só.
+    stacked: { type: Boolean, default: false }
   },
   data () {
-    return { showcase: null, products: [], loading: false, debug: false };
+    return { showcase: null, products: [], restIds: [], loading: false, debug: false };
   },
   computed: {
     columns () {
@@ -122,10 +145,13 @@ export default {
       this.started = true;
       try {
         const showcases = await this.$rocket.getPageShowcases(this.pageType || undefined, this.customKey || undefined);
-        const showcase = showcases.find(s => this.showcaseId != null
-          ? String(s.id) === String(this.showcaseId)
-          : ((s.placement && s.placement.position) || s.position) === this.position);
+        const inPosition = showcases.filter(s => ((s.placement && s.placement.position) || s.position) === this.position);
+        const showcase = this.showcaseId != null
+          ? showcases.find(s => String(s.id) === String(this.showcaseId))
+          : inPosition[0];
         if (!showcase) return;
+        // Posição sem showcaseId: este slot mostra a primeira e empilha as demais logo abaixo.
+        if (this.showcaseId == null) this.restIds = inPosition.slice(1).map(s => s.id);
         // Banner autônomo: render direto, sem produtos, skeleton nem impressão de vitrine
         // (o RocketBannerItem mede o criativo).
         if (isBannerItem(showcase)) {

package/runtime/css/showcase.css

@@ -6,6 +6,11 @@
   margin-bottom: 60px;
 }
 
+/* Segunda vitrine em diante na mesma posição: o mesmo respiro entre elas. */
+.rocket-search--stacked {
+  margin-top: 60px;
+}
+
 .rocket-search__showcase {
   --showcase-gap: 16px;
   position: relative;

package/runtime/rocket.js

@@ -122,7 +122,10 @@ export function createRocket (config) {
 
   rocket.setPage = function (next) {
     page = Object.assign({ section: null, productId: null, categoryId: null, product: null }, next);
-    pageShowcases = {};
+    // A landing (custom) não depende do contexto da página e fica: senão, um setPage entre a busca
+    // do RocketLanding e a montagem das vitrines dele dispararia uma segunda chamada. Ela se
+    // renova quando o RocketLanding monta (refresh).
+    Object.keys(pageShowcases).forEach((k) => { if (k.indexOf('custom|') !== 0) delete pageShowcases[k]; });
   };
   rocket.getPage = () => page;
 
@@ -320,11 +323,11 @@ export function createRocket (config) {
 
   // Uma chamada por página, repartida entre os slots (<RocketShowcase position>) — na Linx
   // era o fetchShowCases único distribuindo por data-rocket-showcase-position. Por pageType +
-  // customKey: a landing e o contexto da página são chamadas distintas. Zera no setPage.
+  // customKey: a landing e o contexto da página são chamadas distintas. O setPage zera só o contexto.
   let pageShowcases = {};
-  rocket.getPageShowcases = function (type, customKey) {
+  rocket.getPageShowcases = function (type, customKey, refresh) {
     const key = (type || '') + '|' + (customKey || '');
-    if (!pageShowcases[key]) pageShowcases[key] = rocket.getShowcasesByContext(type, customKey).catch(() => []);
+    if (refresh || !pageShowcases[key]) pageShowcases[key] = rocket.getShowcasesByContext(type, customKey).catch(() => []);
     return pageShowcases[key];
   };