@rocketsearch/nuxt-uappi 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/nuxt-uappi",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Rocket Search para storefronts Uappi (Nuxt 2): busca, autocomplete, vitrines, banners e eventos",
   "main": "module.js",
   "files": [

package/runtime/components/RocketBanner.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="rocket-search rocket-search__banner-slot" :data-rocket-banner-position="position">
+  <div
+    :class="['rocket-search', 'rocket-search__banner-slot', { 'rocket-search--empty': !waiting && !banners.length }]"
+    :data-rocket-banner-position="position"
+  >
     <!-- Skeleton só com proporção declarada: sem saber a altura, ele é que causaria o pulo. -->
     <div v-if="waiting && ratio" class="rocket-search__banner-skeleton" :style="{ aspectRatio: ratioCss }" aria-hidden="true" />
 

package/runtime/components/RocketShowcase.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="showcase || loading" class="rocket-search" :data-rocket-showcase-position="position">
+  <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">
@@ -13,7 +17,7 @@
     <RocketBannerItem v-else-if="bannerOnly" :item="showcase" :position="position" />
 
     <section
-      v-else
+      v-else-if="showcase"
       ref="root"
       class="rocket-search__showcase"
       :data-rocket-showcase-id="showcase.id"
@@ -62,7 +66,7 @@ export default {
     mediaSize: { type: String, default: 'medium' }
   },
   data () {
-    return { showcase: null, products: [], loading: false };
+    return { showcase: null, products: [], loading: false, debug: false };
   },
   computed: {
     columns () {
@@ -88,6 +92,9 @@ export default {
     }
   },
   mounted () {
+    // ?rocket-search-debug=true: o slot aparece mesmo vazio. Lido no mounted (não no data)
+    // para o HTML do SSR bater com a hidratação.
+    this.debug = document.body.classList.contains('rocket-search-debug');
     if (this.pageType || this.$rocket.getPage().section) this.load();
   },
   beforeDestroy () {

package/runtime/css/common.css

@@ -93,63 +93,116 @@
   }
 }
 
-/* DEBUG: ?rocket-search-debug=true contorna e rotula cada slot de vitrine/banner. */
+/* DEBUG: ?rocket-search-debug=true contorna e rotula toda posição de vitrine e de banner —
+   inclusive as vazias (o RocketShowcase só as renderiza no debug; o slot do RocketBanner
+   existe sempre e sem altura). Mesmo layout da Linx 2.0.0. */
 body.rocket-search-debug {
-  & [data-rocket-showcase-position] {
+  & [data-rocket-showcase-position],
+  & [data-rocket-banner-position] {
+    --color: #64748b;
+    --content: attr(data-rocket-showcase-position);
     position: relative;
-    border: 2px solid var(--color);
-    padding: 60px 15px;
-
-    &::before,
-    &::after {
+    min-height: 140px;
+    padding: 52px 16px 16px;
+    border: 2px dashed var(--color);
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: color-mix(in srgb, var(--color) 6%, transparent);
+
+    /* Selo com o nome da posição */
+    &::before {
       content: var(--content);
       position: absolute;
-      left: 50%;
-      width: fit-content;
-      margin: 0 auto;
-      padding: 0 5px;
+      top: 12px;
+      left: 12px;
+      padding: 5px 12px;
+      border-radius: 999px;
+      color: #fff;
+      background-color: var(--color);
+      font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      z-index: 2;
+    }
+
+    /* Atributo do slot, para quem vai mexer no template */
+    &::after {
+      content: "data-rocket-showcase-position=\"" attr(data-rocket-showcase-position) "\"";
+      position: absolute;
+      top: 16px;
+      right: 14px;
       color: var(--color);
-      display: block;
-      font-size: 18px;
-      font-weight: 700;
-      text-align: center;
-      background-color: #f6f6f6;
-      z-index: 1;
+      font: 500 11px/1.2 ui-monospace, Consolas, monospace;
+      opacity: 0.8;
+      z-index: 2;
     }
 
-    &::before {
-      top: 0;
-      transform: translate(-50%, -50%);
+    /* Posição sem vitrine/banner */
+    &.rocket-search--empty::before {
+      content: var(--content) " · vazia";
     }
 
-    &::after {
-      bottom: 0;
-      transform: translate(-50%, 50%);
+    &[data-rocket-banner-position] {
+      --content: attr(data-rocket-banner-position);
+
+      &::after {
+        content: "data-rocket-banner-position=\"" attr(data-rocket-banner-position) "\"";
+      }
     }
 
     &[data-rocket-showcase-position="hero"] {
-      --color: lab(52.0183% 66.11 -78.2316);
+      --color: #7c3aed;
       --content: "Hero";
     }
 
     &[data-rocket-showcase-position="top"] {
-      --color: lab(70.5521% -66.5147 45.8073);
+      --color: #059669;
       --content: "Topo";
     }
 
     &[data-rocket-showcase-position="middle"] {
-      --color: lab(64.272% 57.1788 90.3583);
+      --color: #d97706;
       --content: "Meio";
     }
 
     &[data-rocket-showcase-position="bottom"] {
-      --color: lab(55.4814% 75.0732 48.8528);
-      --content: "Rodape";
+      --color: #dc2626;
+      --content: "Rodapé";
     }
 
     &[data-rocket-showcase-position="prefooter"] {
-      --color: lab(48.295% 38.3129 -81.9673);
-      --content: "Antes do Footer";
+      --color: #2563eb;
+      --content: "Antes do footer";
+    }
+
+    &[data-rocket-banner-position="fullbanner"] {
+      --color: #db2777;
+      --content: "Fullbanner";
+    }
+
+    &[data-rocket-banner-position="menu"] {
+      --color: #0891b2;
+      --content: "Menu";
+    }
+
+    &[data-rocket-banner-position="category"] {
+      --color: #65a30d;
+      --content: "Categoria";
+    }
+
+    &[data-rocket-banner-position="mosaic"] {
+      --color: #9333ea;
+      --content: "Grade";
+    }
+
+    &[data-rocket-banner-position="strip"] {
+      --color: #ea580c;
+      --content: "Faixa";
+    }
+
+    &[data-rocket-banner-position="footer"] {
+      --color: #4f46e5;
+      --content: "Antes do rodapé";
     }
   }
 }