@rocketsearch/nuxt-uappi 0.2.2 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/nuxt-uappi",
-  "version": "0.2.2",
+  "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/css/common.css

@@ -93,10 +93,12 @@
   }
 }
 
-/* DEBUG: ?rocket-search-debug=true contorna e rotula toda posição de vitrine — inclusive as
-   vazias, que o RocketShowcase só renderiza no debug. Mesmo layout da Linx 2.0.0. */
+/* 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;
@@ -135,11 +137,19 @@ body.rocket-search-debug {
       z-index: 2;
     }
 
-    /* Posição sem vitrine (o RocketShowcase só a renderiza no debug) */
+    /* Posição sem vitrine/banner */
     &.rocket-search--empty::before {
       content: var(--content) " · vazia";
     }
 
+    &[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: #7c3aed;
       --content: "Hero";
@@ -164,6 +174,36 @@ body.rocket-search-debug {
       --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é";
+    }
   }
 }