@rocketsearch/vue-uappi 0.0.0-stage → 0.1.1

package/runtime/components/RocketAutocomplete.vue

@@ -0,0 +1,309 @@
+<template>
+  <div
+    class="rocket-search rocket-search--autocomplete"
+    :data-button-type-mode="searchButtonType"
+    data-search-mode="autocomplete"
+  >
+    <div class="rocket-search__content">
+      <form class="rocket-search__form" @submit.prevent="handleSubmit">
+        <input
+          ref="inputSearch"
+          v-model="term"
+          :name="searchPageParam"
+          autocomplete="off"
+          type="text"
+          :placeholder="inputPlaceholder"
+          aria-label="Buscar produtos"
+          class="rocket-search__form__input"
+          @keyup="handleKeyup"
+          @focus="openAutocomplete"
+        >
+        <button type="submit" class="rocket-search__form__button" aria-label="Buscar produtos">
+          <span v-if="searchButtonType === 'text'" class="rocket-search__form__button-text" v-text="searchButtonText" />
+          <svg v-else xmlns="http://www.w3.org/2000/svg" width="20.35" height="20.35">
+            <path
+              d="M14.355 15.383a8.727 8.727 0 111.028-1.028l4.759 4.758a.728.728 0 11-1.029 1.029zm0-2.06a7.271 7.271 0 10-1.032 1.027 7.536 7.536 0 001.027-1.027z"
+              fill="#29282e"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </form>
+
+      <div class="rocket-search__autocomplete-panel" :class="{ opened: suggestionTermsVisible || isOpened }">
+        <div v-if="suggestionTerms.length > 0 && term === ''" class="rocket-search__autocomplete-section">
+          <strong class="rocket-search__terms-suggestions__title" v-text="suggestionsTitle" />
+          <ul class="rocket-search__autocomplete-terms">
+            <li v-for="(t, index) in suggestionTerms" :key="'term-' + index">
+              <a :href="searchUrl(t)" @click="handleClickTerm(t, $event)">
+                <i><span v-text="index + 1" />º</i>
+                <span v-text="t" />
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div
+          v-if="didYouMean && term.length >= minChars"
+          class="rocket-search__autocomplete-section rocket-search__autocomplete-did-you-mean"
+        >
+          Você quis dizer <a :href="didYouMeanUrl" @click="handleClickDidYouMean" v-text="didYouMean" />?
+        </div>
+
+        <div v-if="autocompleteProducts.length > 0" class="rocket-search__autocomplete-section">
+          <strong class="rocket-search__terms-suggestions__title" v-text="productsTitle" />
+          <ul class="rocket-search__autocomplete-products">
+            <li
+              v-for="(product, index) in autocompleteProducts"
+              :key="'product-' + product.id"
+              :data-product-id="product.id"
+            >
+              <a :href="productPath(product)" @click="handleClickProduct(product, index, $event)">
+                <span class="rocket-search__autocomplete-thumb">
+                  <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
+                  <span v-else class="rocket-search__autocomplete-thumb-placeholder" />
+                </span>
+                <span class="rocket-search__autocomplete-info">
+                  <strong
+                    v-if="product.marca && product.marca.nome"
+                    class="rocket-search__autocomplete-brand"
+                    v-text="product.marca.nome"
+                  />
+                  <span class="rocket-search__autocomplete-name" v-text="product.nome" />
+                  <span
+                    v-if="productPrice(product) !== null"
+                    class="rocket-search__autocomplete-price"
+                    v-text="formatCurrency(productPrice(product))"
+                  />
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div
+          v-if="term.length >= minChars && suggestionTerms.length === 0 && autocompleteProducts.length === 0 && !isLoading"
+          class="rocket-search__autocomplete-empty"
+        >
+          Nenhum resultado encontrado.
+        </div>
+      </div>
+
+      <div
+        v-show="suggestionTermsVisible || isOpened"
+        class="rocket-search__autocomplete-overlay"
+        @mousedown.prevent="closeSearch"
+      />
+    </div>
+  </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/autocomplete.css';
+import { productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
+import { didYouMeanQuery, dispatchDidYouMeanClick } from '../listing.js';
+
+// Limite opcional: null = exibe tudo que o backend mandou (quem manda é o maxSuggestions
+// do admin). Só um valor explícito na prop volta a cortar.
+function limitList (list, limit) {
+  const arr = list || [];
+  return limit === null || limit === undefined || limit === '' ? arr : arr.slice(0, Number(limit));
+}
+
+function normalizeTerm (item) {
+  if (item && typeof item === 'object') return String(item.term || item.label || item.value || '');
+  return String(item || '');
+}
+
+export default {
+  name: 'RocketAutocomplete',
+  props: {
+    minChars: { type: Number, default: 2 },
+    productsLimit: { type: Number, default: null },
+    termsLimit: { type: Number, default: null },
+    mediaSize: { type: String, default: 'small' },
+    inputPlaceholder: { type: String, default: 'O que você procura?' },
+    searchButtonType: { type: String, default: 'icon' },
+    searchButtonText: { type: String, default: 'Buscar' },
+    suggestionsTitle: { type: String, default: 'Termos mais buscados:' },
+    productsTitle: { type: String, default: 'Produtos' }
+  },
+  data () {
+    return {
+      term: '',
+      isOpened: false,
+      isLoading: false,
+      suggestionTerms: [],
+      suggestionTermsVisible: false,
+      autocompleteProducts: [],
+      // "Você quis dizer?" (flag `didYouMean` da loja): com sugestão, os produtos já são do termo sugerido.
+      didYouMean: ''
+    };
+  },
+  computed: {
+    searchPagePath () {
+      return this.$rocket.config.searchPagePath;
+    },
+    searchPageParam () {
+      return this.$rocket.config.searchPageParam;
+    },
+    didYouMeanLocation () {
+      const { busca, ...origin } = didYouMeanQuery(this.didYouMean, this.term);
+      return { path: this.searchPagePath, query: { [this.searchPageParam]: busca, ...origin } };
+    },
+    didYouMeanUrl () {
+      return this.didYouMean ? this.$router.resolve(this.didYouMeanLocation).href : '';
+    }
+  },
+  watch: {
+    term () {
+      if (!this.term) {
+        this.didYouMean = '';
+        this.autocompleteProducts = [];
+        this.isOpened = false;
+      }
+    }
+  },
+  mounted () {
+    this.onDocumentClick = (event) => {
+      if (!this.$el.contains(event.target)) {
+        this.suggestionTermsVisible = false;
+        this.isOpened = false;
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === 'Escape') this.closeSearch();
+    };
+    document.addEventListener('click', this.onDocumentClick);
+    document.addEventListener('keyup', this.onKeyup);
+  },
+  beforeUnmount () {
+    clearTimeout(this.timeout);
+    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('keyup', this.onKeyup);
+  },
+  methods: {
+    productImage (product) {
+      return productImage(product, this.mediaSize);
+    },
+    productPath,
+    productPrice,
+    formatCurrency,
+    searchUrl (term) {
+      return this.$router.resolve({ path: this.searchPagePath, query: { [this.searchPageParam]: term || '' } }).href;
+    },
+    goToSearch (term) {
+      this.closeSearch();
+      this.$router.push({ path: this.searchPagePath, query: { [this.searchPageParam]: term || '' } });
+    },
+    openAutocomplete () {
+      if (this.term && this.term.length >= this.minChars) {
+        this.fetchResult();
+        return;
+      }
+      this.fetchTerms();
+    },
+    handleKeyup (event) {
+      // Enter é tratado pelo submit do form.
+      if (event && event.key === 'Enter') return;
+      clearTimeout(this.timeout);
+      if (this.term.length < this.minChars) {
+        this.isOpened = false;
+        this.autocompleteProducts = [];
+        this.fetchTerms();
+        return;
+      }
+      this.timeout = setTimeout(() => this.fetchResult(), 250);
+    },
+    // Submit (botão ou Enter) é submissão explícita: mesmo com o campo vazio vai para a
+    // página de busca, que lista o catálogo. O dropdown abre pelo foco.
+    handleSubmit () {
+      this.goToSearch(this.term);
+    },
+    closeSearch () {
+      this.isOpened = false;
+      this.suggestionTermsVisible = false;
+      if (this.$refs.inputSearch) this.$refs.inputSearch.blur();
+    },
+    async fetchTerms () {
+      try {
+        const response = await this.$rocket.autocomplete('');
+        this.suggestionTerms = limitList((response.terms || []).map(normalizeTerm), this.termsLimit);
+      }
+      catch (e) {
+        this.suggestionTerms = [];
+      }
+      this.autocompleteProducts = [];
+      this.suggestionTermsVisible = this.suggestionTerms.length > 0;
+      this.isOpened = false;
+      this.isLoading = false;
+    },
+    async fetchResult () {
+      if (!this.term || this.term.length < this.minChars) {
+        this.autocompleteProducts = [];
+        this.isOpened = false;
+        this.suggestionTermsVisible = this.suggestionTerms.length > 0;
+        return;
+      }
+
+      this.isLoading = true;
+      const searchedTerm = this.term;
+      try {
+        const response = await this.$rocket.autocomplete(searchedTerm);
+        // Digitou de novo enquanto a resposta vinha: descarta a resposta velha.
+        if (searchedTerm !== this.term) return;
+        this.suggestionTerms = limitList((response.terms || []).map(normalizeTerm), this.termsLimit);
+        this.didYouMean = (response.didYouMean && response.didYouMean.query) || '';
+        const ids = limitList(response.products || [], this.productsLimit).map(p => p && p.id);
+        const products = await this.$rocket.fetchProducts(ids);
+        if (searchedTerm !== this.term) return;
+        this.autocompleteProducts = products;
+      }
+      catch (e) {
+        if (searchedTerm !== this.term) return;
+        this.suggestionTerms = [];
+        this.autocompleteProducts = [];
+        this.didYouMean = '';
+      }
+      finally {
+        if (searchedTerm === this.term) this.isLoading = false;
+      }
+      this.suggestionTermsVisible = false;
+      this.isOpened = true;
+    },
+    handleClickTerm (term, event) {
+      // Ctrl/cmd/meio: o browser abre pelo href em nova aba. Não mexe no painel.
+      if (this.$rocket.isModifiedClick(event)) return;
+      if (event && event.preventDefault) event.preventDefault();
+      this.term = term;
+      this.goToSearch(term);
+    },
+    handleClickDidYouMean (event) {
+      dispatchDidYouMeanClick(this.$rocket, { from: this.term, suggestion: this.didYouMean, source: 'autocomplete' });
+      if (this.$rocket.isModifiedClick(event)) return;
+      if (event && event.preventDefault) event.preventDefault();
+      const location = this.didYouMeanLocation;
+      this.term = this.didYouMean;
+      this.closeSearch();
+      this.$router.push(location);
+    },
+    handleClickProduct (product, index, event) {
+      const href = productPath(product);
+      const send = () => this.$rocket.dispatchEvent('click', {
+        productId: String(product.id),
+        position: index,
+        meta: { source: 'autocomplete', query: this.term || '' }
+      });
+      const el = event && event.currentTarget;
+      const took = this.$rocket.trackThenNavigate(event, el, href, send, (path) => {
+        this.closeSearch();
+        this.$router.push(path);
+      });
+      if (!took && !this.$rocket.isModifiedClick(event, el)) this.closeSearch();
+    }
+  }
+};
+</script>

package/runtime/components/RocketBanner.vue

@@ -0,0 +1,128 @@
+<template>
+  <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" />
+
+    <div v-else-if="carousel && banners.length > 1" class="rocket-search__banner-swiper">
+      <ul ref="track" class="rocket-search__banner-swiper__track">
+        <li v-for="(banner, index) in banners" :key="banner.id" class="rocket-search__banner-swiper__slide">
+          <RocketBannerItem v-bind="itemProps(index)" :item="banner" />
+        </li>
+      </ul>
+      <button type="button" class="rocket-search__swiper-button-prev" aria-label="Anterior" @click="slide(-1)" />
+      <button type="button" class="rocket-search__swiper-button-next" aria-label="Próximo" @click="slide(1)" />
+    </div>
+
+    <template v-else>
+      <RocketBannerItem v-for="(banner, index) in banners" :key="banner.id" v-bind="itemProps(index)" :item="banner" />
+    </template>
+  </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/banner.css';
+import RocketBannerItem from './banner/RocketBannerItem.vue';
+import { exactWidth, isHeroSlot } from '../banner.js';
+
+export default {
+  name: 'RocketBanner',
+  components: { RocketBannerItem },
+  props: {
+    // placement.position cadastrada no painel (hero, top, middle...).
+    position: { type: String, required: true },
+    // eager: busca assim que a página tem contexto (hero/LCP). ondemand: só quando o slot
+    // chega perto da viewport.
+    loading: {
+      type: String,
+      default: 'ondemand',
+      validator: v => ['eager', 'ondemand'].includes(v)
+    },
+    // Força o pageType; sem ele vem da página atual (currentPageData do tema).
+    pageType: { type: String, default: '' },
+    limit: { type: Number, default: 0 },
+    // Proporção do slot ("16/9", "3:1") — reserva a caixa e liga o skeleton.
+    ratio: { type: String, default: '' },
+    // Mais de um banner na posição: carrossel (senão empilham na ordem do BE).
+    carousel: { type: Boolean, default: false },
+    sizes: { type: String, default: '100vw' },
+    rootMargin: { type: String, default: '200px' },
+    imageResizing: { type: Boolean, default: true }
+  },
+  data () {
+    return {
+      banners: [],
+      requested: false,
+      waiting: true,
+      width: 0
+    };
+  },
+  computed: {
+    ratioCss () {
+      return String(this.ratio).trim().replace(':', ' / ');
+    }
+  },
+  watch: {
+    // O contexto da página chega pelo currentPageData do tema (o plugin traduz para $rocket.setPage).
+    '$rocket.currentPage.value' () {
+      if (this.loading === 'eager' || this.visible) this.tryLoad();
+    }
+  },
+  mounted () {
+    if (this.loading === 'eager') return this.tryLoad();
+    if (!('IntersectionObserver' in window)) {
+      this.visible = true;
+      return this.tryLoad();
+    }
+    this.observer = new IntersectionObserver((entries) => {
+      if (!entries.some(e => e.isIntersecting)) return;
+      this.observer.disconnect();
+      this.visible = true;
+      this.tryLoad();
+    }, { rootMargin: this.rootMargin });
+    this.observer.observe(this.$el);
+  },
+  beforeUnmount () {
+    if (this.observer) this.observer.disconnect();
+  },
+  methods: {
+    async tryLoad () {
+      if (this.requested) return;
+      if (!this.pageType && !this.$rocket.getPage().section) return;
+      this.requested = true;
+      // Largura exata do slot; sem medida a imagem sai com srcset.
+      if (this.$el && this.$el.clientWidth) {
+        this.width = exactWidth(this.$el.clientWidth, window.devicePixelRatio);
+      }
+      const list = await this.$rocket.getBannersByContext(this.pageType || undefined, { position: this.position });
+      const mine = list.filter(b => ((b.placement && b.placement.position) || b.position) === this.position);
+      this.banners = this.limit > 0 ? mine.slice(0, this.limit) : mine;
+      this.waiting = false;
+    },
+
+    itemProps (index) {
+      const hero = isHeroSlot(this.position) && index === 0;
+      return {
+        position: this.position,
+        slideIndex: index,
+        loading: hero ? 'eager' : 'lazy',
+        fetchPriority: hero ? 'high' : '',
+        sizes: this.sizes,
+        width: this.width,
+        imageResizing: this.imageResizing,
+        aspectRatio: this.ratio ? this.ratioCss : ''
+      };
+    },
+
+    slide (direction) {
+      const track = this.$refs.track;
+      if (track) track.scrollBy({ left: direction * track.clientWidth, behavior: 'smooth' });
+    }
+  }
+};
+</script>