cloudcommerce 2.0.8 → 2.0.9

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.vscode/settings.json

@@ -16,9 +16,14 @@
   "tailwindCSS.experimental.configFile": {
     "packages/storefront/tailwind.config.cjs": "packages/**",
     "store/functions/ssr/tailwind.config.cjs": "store/**",
-    "ecomplus-stores/tia-sonia/functions/ssr/tailwind.config.cjs": "ecomplus-stores/tia-sonia/**",
     "ecomplus-stores/barra-doce/functions/ssr/tailwind.config.cjs": "ecomplus-stores/barra-doce/**"
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.run": "onSave"
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "astro",
+    "typescript",
+    "typescriptreact"
+  ]
 }

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [2.0.9](https://github.com/ecomplus/cloud-commerce/compare/v2.0.8...v2.0.9) (2024-01-20)
+
+
+### Bug Fixes
+
+* **storefront:** Bump Astro to latest v4.2.1 ([dd6b65a](https://github.com/ecomplus/cloud-commerce/commit/dd6b65a62ae585870f4cdf00496df2f2392cf96a))
+* **storefront:** Bump Vue to latest v3.4.15 ([46fd6f5](https://github.com/ecomplus/cloud-commerce/commit/46fd6f59beb95e85ef2ed4b0479f912cf8eb4fd8))
+* **storefront:** Stop `click` event propagation and prevent default (a) on `<CarouselControl>` ([94defd8](https://github.com/ecomplus/cloud-commerce/commit/94defd8b6e03d1821f605325c23d9c9f42cd9881))
+* **storefront:** Stop `click` event propagation on `<CarouselControl>` by default ([b44ff85](https://github.com/ecomplus/cloud-commerce/commit/b44ff85c4382ef912c434bf1f251134697156098))
+
 ### [2.0.8](https://github.com/ecomplus/cloud-commerce/compare/v2.0.7...v2.0.8) (2024-01-17)
 
 

package/ecomplus-stores/barra-doce/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/ecomplus-stores/barra-doce/.vscode/settings.json

@@ -10,6 +10,5 @@
   },
   "css.lint.unknownAtRules": "ignore",
   "git.autofetch": true,
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.run": "onSave"
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

package/ecomplus-stores/barra-doce/functions/many/package.json

@@ -15,8 +15,8 @@
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/feeds": "^2.0.7",
-    "@cloudcommerce/firebase": "^2.0.7",
-    "@cloudcommerce/passport": "^2.0.7"
+    "@cloudcommerce/feeds": "^2.0.8",
+    "@cloudcommerce/firebase": "^2.0.8",
+    "@cloudcommerce/passport": "^2.0.8"
   }
 }

package/ecomplus-stores/barra-doce/functions/ssr/.staged.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '../../node_modules/@cloudcommerce/eslint/storefront.staged.eslintrc.cjs',
+  rules: {
+    'import/no-extraneous-dependencies': 'off',
+  },
+};

package/ecomplus-stores/barra-doce/functions/ssr/package.json

@@ -10,22 +10,23 @@
     "shell": "firebase functions:shell",
     "start": "npm run shell",
     "deploy": "firebase deploy --only functions",
-    "logs": "firebase functions:log"
+    "logs": "firebase functions:log",
+    "lint:fix": "eslint -c ./.staged.eslintrc.cjs src/**/*.{ts,vue,astro} --fix"
   },
   "engines": {
     "node": "18"
   },
   "main": "index.js",
   "dependencies": {
-    "@cloudcommerce/api": "^2.0.7",
-    "@cloudcommerce/firebase": "^2.0.7",
-    "@cloudcommerce/ssr": "^2.0.7",
+    "@cloudcommerce/api": "^2.0.8",
+    "@cloudcommerce/firebase": "^2.0.8",
+    "@cloudcommerce/ssr": "^2.0.8",
     "@headlessui/vue": "^1.7.17"
   },
   "devDependencies": {
-    "@cloudcommerce/i18n": "^2.0.7",
-    "@cloudcommerce/storefront": "^2.0.7",
-    "@cloudcommerce/types": "^2.0.7",
+    "@cloudcommerce/i18n": "^2.0.8",
+    "@cloudcommerce/storefront": "^2.0.8",
+    "@cloudcommerce/types": "^2.0.8",
     "@iconify-json/mingcute": "^1.1.15",
     "photoswipe": "^5.4.3"
   }

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountMenu.vue

@@ -62,7 +62,10 @@
           <MenuItem as="li">
             <div class="text-base-500 flex justify-center gap-2 p-2 text-base">
               <span v-for="(href, network) in socialNetworks" :key="network">
-                <SocialNetworkLink :network="network" class="hover:text-primary p-1" />
+                <SocialNetworkLink
+                  :network="network"
+                  class="hover:text-primary p-1"
+                />
               </span>
             </div>
           </MenuItem>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/AccountPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <article class="from-secondary-700 to-secondary-950 flex
-    min-h-screen w-full flex-col justify-center bg-gradient-to-br">
+  <article class="from-secondary-700 to-secondary-950 flex min-h-screen w-full
+    flex-col justify-center bg-gradient-to-br">
     <div class="mx-auto p-4">
       <section class="ui-section text-center">
         <a href="/" class="text-base-200 hover:text-white">
@@ -27,7 +27,10 @@
             v-for="({ title, href }, i) in $settings.serviceLinks"
             :key="`s-${i}`"
           >
-            <ALink :href="href" class="ui-link text-base-200 hover:text-white">
+            <ALink
+              :href="href"
+              class="text-base-200 ui-link hover:text-white"
+            >
               {{ title }}
             </ALink>
           </li>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Banner.vue

@@ -28,7 +28,8 @@
       </Component>
       <p
         v-if="parsedSubtitle"
-        class="text-base-800 mt-4 text-lg font-medium uppercase md:mt-6 lg:text-xl"
+        class="text-base-800 mt-4 text-lg font-medium uppercase
+        md:mt-6 lg:text-xl"
       >
         {{ parsedSubtitle }}
       </p>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/BlogPosts.vue

@@ -1,7 +1,10 @@
 <template>
   <article class="mb-9 mt-6 md:mb-12 md:mt-8">
     <section class="ui-section">
-      <article v-if="featured" class="mb-9 flex flex-wrap gap-x-8 lg:flex-nowrap">
+      <article
+        v-if="featured"
+        class="mb-9 flex flex-wrap gap-x-8 lg:flex-nowrap"
+      >
         <a :href="`/posts/${featured.slug}`" class="w-full max-w-[600px]">
           <AImg
             v-if="featured.thumbnail"
@@ -26,7 +29,10 @@
             --- {{ featured.author }}
           </em>
           <div class="not-prose mt-5">
-            <a :href="`/posts/${featured.slug}`" class="ui-btn-lg ui-btn-primary">
+            <a
+              :href="`/posts/${featured.slug}`"
+              class="ui-btn-lg ui-btn-primary"
+            >
               <i class="i-chevron-right mr-1"></i>
               {{ $t.i19seeMore }}
             </a>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Breadcrumbs.vue

@@ -1,6 +1,9 @@
 <template>
   <section v-if="breadcrumbs.length > 1" class="ui-section-slim">
-    <nav aria-label="Breadcrumb" class="w-full overflow-hidden text-lg md:text-sm">
+    <nav
+      aria-label="Breadcrumb"
+      class="w-full overflow-hidden text-lg md:text-sm"
+    >
       <ol class="text-base-600 flex items-center gap-1">
         <li>
           <a href="/" class="hover:text-primary">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartItem.vue

@@ -5,7 +5,7 @@
         v-if="image"
         :picture="image"
         :alt="title"
-        class="h-20 w-20 object-cover"
+        class="size-20 object-cover"
       />
       <p class="text-base-700 group-hover:text-base-900 flex-auto py-2
         text-sm group-hover:underline">
@@ -18,8 +18,9 @@
       class="absolute right-0 top-0 p-2 opacity-70 hover:opacity-100"
       :aria-label="$t.i19remove"
     >
-      <span class="border-3 text-danger-800 border-danger-700/30 flex h-5 w-5 flex-col
-        justify-center rounded-full text-sm leading-none">
+      <span class="border-3 border-danger-700/30 text-danger-800 flex size-5
+        flex-col justify-center
+        rounded-full text-sm leading-none">
         <i class="i-close mx-auto my-0"></i>
       </span>
     </button>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CartSidebar.vue

@@ -49,7 +49,7 @@
       <a
         href="#"
         @click.prevent="emit('close')"
-        class="ui-link text-base-500 hover:text-base-700 text-sm"
+        class="text-base-500 ui-link hover:text-base-700 text-sm"
       >
         <i class="i-arrow-right-line mr-1 rotate-180"></i>
         {{ $t.i19continueShopping }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/CheckoutPage.vue

@@ -7,7 +7,7 @@
           <slot name="logo" />
         </a>
         <div class="flex items-center gap-2">
-          <i class="i-shield-check-solid bg-success-400 m-0 text-3xl"></i>
+          <i class="bg-success-400 i-shield-check-solid m-0 text-3xl"></i>
           <span class="text-base-600 text-base">
             {{ $t.i19safeBuy }}
           </span>
@@ -24,7 +24,7 @@
             v-for="({ title, href }, i) in $settings.serviceLinks"
             :key="`s-${i}`"
           >
-            <ALink :href="href" target="blank" class="ui-link text-base-700">
+            <ALink :href="href" target="blank" class="text-base-700 ui-link">
               {{ title }}
               <i class="bg-base-300 i-arrow-top-right-on-square ml-0.5"></i>
             </ALink>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ContentEntry.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="ui-section">
     <article class="prose">
-      <h1 class="ui-title not-prose my-4">{{ title }}</h1>
+      <h1 class="not-prose ui-title my-4">{{ title }}</h1>
       <ContentClearfix :html="html" />
     </article>
   </section>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/FooterStamps.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="ui-section">
-    <div class="flex flex-wrap items-start justify-between gap-5 lg:flex-nowrap">
-      <ul class="mx-auto flex items-center gap-x-6 gap-y-3
-        overflow-x-auto md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
+    <div class="flex flex-wrap items-start justify-between
+      gap-5 lg:flex-nowrap">
+      <ul class="mx-auto flex items-center gap-x-6 gap-y-3 overflow-x-auto
+        md:mx-0 md:flex-wrap md:overflow-hidden lg:gap-x-8">
         <li v-for="(stamp, i) in stamps" :key="i">
           <ALink :href="stamp.href?.replace('{domain}', $settings.domain || '')">
             <slot :name="`picture-${i}`" />
             <span v-if="!stamp.img" class="flex items-center">
               <span
                 v-if="stamp.icon"
-                class="[&>*]:from-success-200 [&>*]:to-success-700
-                mr-2 text-4xl [&>*]:bg-gradient-to-br"
+                class="[&>*]:from-success-200 [&>*]:to-success-700 mr-2
+                text-4xl [&>*]:bg-gradient-to-br"
               >
                 <i v-if="stamp.icon === 'lock'" class="i-lock-closed"></i>
                 <i v-else-if="stamp.icon === 'check'" class="i-check-badge"></i>
@@ -28,7 +29,8 @@
         </li>
       </ul>
       <div class="mx-auto flex flex-wrap items-center justify-end
-        gap-4 overflow-x-auto text-2xl md:mx-0 md:flex-nowrap md:overflow-hidden">
+        gap-4 overflow-x-auto text-2xl
+        md:mx-0 md:flex-nowrap md:overflow-hidden">
         <PaymentMethodFlag
           v-for="paymentMethod in $settings.paymentMethods"
           :key="paymentMethod"

package/ecomplus-stores/barra-doce/functions/ssr/src/components/HeroSlider.vue

@@ -19,17 +19,21 @@
         <div
           v-show="slides.length > 1"
           class="absolute bottom-5 right-5 z-10 flex w-screen
-          items-center justify-end xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"
+          items-center justify-end
+          xl:left-1/2 xl:right-auto xl:-ms-[640px] xl:max-w-screen-xl"
         >
           <div
             class="text-primary relative h-10 w-20 rounded-full bg-white/50
             shadow-sm ring-1 ring-black/5 transition-opacity"
             :class="isMounted ? 'opacity-100' : 'opacity-20 [&>*]:cursor-wait'"
           >
-            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full" is-prev>
+            <CarouselControl
+              class="hover:bg-primary/10 size-10 rounded-full"
+              is-prev
+            >
               <i class="i-arrow-right-line rotate-180"></i>
             </CarouselControl>
-            <CarouselControl class="hover:bg-primary/10 h-10 w-10 rounded-full">
+            <CarouselControl class="hover:bg-primary/10 size-10 rounded-full">
               <i class="i-arrow-right-line"></i>
             </CarouselControl>
           </div>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ImagesGallery.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="-mx-4 flex w-screen gap-3 sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
+  <div class="-mx-4 flex w-screen gap-3
+    sm:mx-0 sm:w-full md:h-[525px] 2xl:gap-5">
     <Carousel
       v-if="pictures.length > 1"
       axis="y"
@@ -22,8 +23,8 @@
           >
             <AImg
               :picture="pictures[index]"
-              class="ring-secondary/10 h-full w-full rounded border-2
-              object-cover opacity-90 transition-colors"
+              class="ring-secondary/10 size-full rounded border-2 object-cover
+              opacity-90 transition-colors"
               :class="index === activeIndex
                 ? 'border-secondary/50 ring-4 cursor-auto'
                 : 'border-transparent hover:border-primary'
@@ -36,10 +37,10 @@
         <span>
           <CarouselControl
             v-if="pictures.length > 6"
-            class="hover:bg-primary-300/60 text-primary
-            !bottom-3 !left-1/2 -ml-5 h-10 w-10
-            rounded-full bg-white/60 text-xl
-            opacity-0 shadow-sm ring-1 ring-black/5 group-hover:opacity-90"
+            class="text-primary hover:bg-primary-300/60
+            !bottom-3 !left-1/2 -ml-5 size-10 rounded-full
+            bg-white/60 text-xl opacity-0 shadow-sm ring-1
+            ring-black/5 group-hover:opacity-90"
           />
           <span class="absolute bottom-0 block h-2 w-full
             bg-gradient-to-b from-transparent to-white"></span>
@@ -51,7 +52,8 @@
         as="div"
         v-model:index="activeIndex"
         class="text-base-600 [&_i]:i-arrow-right-line mx-auto
-        h-full w-full max-w-[525px] [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
+        size-full max-w-[525px]
+        [&>*]:h-full [&_i]:mx-2 [&_i]:text-2xl"
         :class="isLoadingLightbox && 'opacity-80'"
         :id="psId"
       >
@@ -71,7 +73,7 @@
           <AImg
             :picture="picture"
             preferred-size="big"
-            class="h-full w-full rounded object-cover"
+            class="size-full rounded object-cover"
             :fetchpriority="i === 0 ? 'high' : 'low'"
             :loading="i === 0 ? 'eager' : 'lazy'"
           />
@@ -79,8 +81,8 @@
       </Carousel>
       <i
         v-if="isLoadingLightbox"
-        class="i-arrow-path bg-base-200 absolute
-        left-1/2 top-1/2 -ml-7 -mt-7 h-14 w-14 animate-spin"
+        class="bg-base-200 i-arrow-path absolute
+        left-1/2 top-1/2 -ml-7 -mt-7 size-14 animate-spin"
         :aria-label="$t.i19loading"
       ></i>
       <ul

package/ecomplus-stores/barra-doce/functions/ssr/src/components/LoginForm.vue

@@ -36,7 +36,7 @@
         <a
           v-show="!isSignUp && !isLinkSignInBlocked"
           href="?password"
-          class="ui-link text-base-500 text-right text-sm lowercase"
+          class="text-base-500 ui-link text-right text-sm lowercase"
           @click.prevent="isLinkSignIn = !isLinkSignIn"
         >
           {{ isLinkSignIn ? $t.i19enterWithPassword : $t.i19iForgotMyPassword }}

package/ecomplus-stores/barra-doce/functions/ssr/src/components/PitchBar.vue

@@ -16,7 +16,7 @@
             <span
               v-if="parsedContents[i]"
               v-html="parsedContents[i]"
-              class="prose text-base-800 text-sm"
+              class="text-base-800 prose text-sm"
             ></span>
           </ALink>
         </li>
@@ -25,7 +25,10 @@
             v-show="countValidSlides > 1"
             class="text-base-400 text-xl leading-none"
           >
-            <CarouselControl class="bg-base-100 hover:text-base-700 pr-2" is-prev />
+            <CarouselControl
+              class="bg-base-100 hover:text-base-700 pr-2"
+              is-prev
+            />
             <CarouselControl class="bg-base-100 hover:text-base-700 pl-2" />
           </div>
         </template>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/Prices.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="text-base-600
-      [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
+    [&>div]:[font-size:90%] [&_small]:lowercase [&_small]:[font-size:92%]"
     :class="isBig ? 'text-lg' : null"
   >
     <span v-if="comparePrice" class="text-base-500 mr-1 text-[87%]">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductCard.vue

@@ -11,26 +11,26 @@
     >
       <div class="aspect-square p-2
         transition-transform motion-safe:group-hover:scale-110">
-        <div class="relative h-full w-full overflow-hidden rounded bg-white
-          group-hover:rounded-none">
+        <div class="relative size-full overflow-hidden
+          rounded bg-white group-hover:rounded-none">
           <span v-if="images?.length" class="text-xs text-opacity-70">
             <AImg
               :picture="images[0]"
               :alt="title"
-              class="absolute left-0 top-0 block h-full w-full object-cover"
+              class="absolute left-0 top-0 block size-full object-cover"
             />
             <AImg
               v-if="images[1] && wasHoveredOnce"
               :picture="images[1]"
               :alt="title"
-              class="absolute left-0 top-0 z-10 block h-full w-full
-              object-cover text-transparent opacity-0
-              transition-opacity group-hover:opacity-100 motion-safe:duration-300"
+              class="absolute left-0 top-0 z-10 block size-full
+              object-cover text-transparent opacity-0 transition-opacity
+              group-hover:opacity-100 motion-safe:duration-300"
             />
           </span>
           <div
             v-else
-            class="from-base-50/20 to-base-100 h-full w-full bg-gradient-to-br"
+            class="from-base-50/20 to-base-100 size-full bg-gradient-to-br"
           />
         </div>
       </div>
@@ -38,8 +38,8 @@
         v-if="discountPercentage"
         class=":uno: bg-secondary/70 text-on-secondary absolute
         right-2 top-9 py-0.5
-        pl-3 pr-1.5 text-xs
-        transition-transform [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
+        pl-3 pr-1.5 text-xs transition-transform
+        [clip-path:polygon(20%_0,100%_0,100%_100%,0_100%)]
         group-hover:translate-x-2 group-hover:scale-110"
       >
         -<strong>{{ discountPercentage }}</strong>%
@@ -49,7 +49,7 @@
           <div v-if="isActive">
             <Prices :product="product" />
           </div>
-          <span v-else class="ui-badge bg-warning-100 text-warning-700">
+          <span v-else class="bg-warning-100 text-warning-700 ui-badge">
             {{ !isInStock ? $t.i19outOfStock : $t.i19inactive }}
           </span>
         </div>
@@ -65,9 +65,9 @@
         </component>
         <button
           v-if="isActive && !hasVariations"
-          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10 -ml-7 h-14 w-14
-          rounded-full p-2 text-3xl
-          leading-none opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
+          class="lg:-top-13 primary absolute -top-12 left-1/2 z-10
+          -ml-7 size-14 rounded-full p-2 text-3xl leading-none
+          opacity-75 hover:opacity-100 lg:left-4 lg:ml-0"
           @click.stop.prevent="addProductToCart(product)"
           :aria-label="$t.i19addToCart"
         >

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductDetails.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="lg:sticky-header:translate-y-14 top-0 py-4
       transition-transform lg:sticky">
-      <h1 class="ui-text-brand text-secondary-900 text-lg">
+      <h1 class="text-secondary-900 ui-text-brand text-lg">
         {{ title }}
       </h1>
       <div v-if="isActive" class="mt-5">

package/ecomplus-stores/barra-doce/functions/ssr/src/components/ProductShelf.vue

@@ -2,7 +2,10 @@
   <section class="ui-section">
     <div v-if="title" class="mx-auto mb-4 max-w-prose text-center">
       <h2 class="ui-text-brand text-3xl">
-        <ALink :href="titleLink" :class="titleLink ? 'ui-link' : 'text-base-700'">
+        <ALink
+          :href="titleLink"
+          :class="titleLink ? 'ui-link' : 'text-base-700'"
+        >
           {{ title }}
         </ALink>
       </h2>
@@ -23,11 +26,11 @@
         <DefineCarouselControl v-slot="{ isPrev }">
           <CarouselControl
             v-show="products.length > 2"
-            class=":uno: text-primary lg:hover:bg-primary-200 !top-1/2 h-12
-            w-12 rounded-full bg-transparent text-3xl leading-none
-            ring-black/5 backdrop-blur-md
-            transition-opacity group-hover/shelf:opacity-90
-            lg:bg-white/80 lg:text-2xl lg:opacity-0 lg:shadow-sm lg:ring-1"
+            class=":uno: text-primary lg:hover:bg-primary-200 !top-1/2 size-12
+            rounded-full bg-transparent text-3xl leading-none ring-black/5
+            backdrop-blur-md transition-opacity
+            group-hover/shelf:opacity-90 lg:bg-white/80
+            lg:text-2xl lg:opacity-0 lg:shadow-sm lg:ring-1"
             :class="isPrev ? '!-left-4' : '!-right-4'"
             :is-prev="isPrev"
           />

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchModal.vue

@@ -65,7 +65,7 @@
               >
                 <a
                   :href="getSearchUrl(term)"
-                  class="ui-link text-base-700 text-sm font-normal"
+                  class="text-base-700 ui-link text-sm font-normal"
                 >
                   {{ term }}
                 </a>

package/ecomplus-stores/barra-doce/functions/ssr/src/components/SearchShowcase.vue

@@ -1,7 +1,7 @@
 <template>
   <section
     v-if="searchTerm"
-    class="ui-section-slim text-base-700 px-6 text-center text-xl lowercase"
+    class="text-base-700 ui-section-slim px-6 text-center text-xl lowercase"
     :class="hasFiltersBar ? 'relative z-[14] -mb-4' : 'mb-0'"
   >
     {{ $t.i19searchingFor }}
@@ -19,11 +19,10 @@
     <Fade>
       <section
         v-if="hasFiltersBar"
-        class="ui-section-slim
-        sticky-header:translate-y-16 lg:sticky-header:translate-y-14
-        to-base-100 sticky top-0 z-[12] flex items-center justify-between
-        rounded-b bg-white/80 px-6 py-4 shadow-sm backdrop-blur-sm
-        transition-transform"
+        class="to-base-100 ui-section-slim sticky-header:translate-y-16 lg:sticky-header:translate-y-14 sticky top-0
+        z-[12] flex items-center justify-between
+        rounded-b bg-white/80 px-6 py-4 shadow-sm
+        backdrop-blur-sm transition-transform"
       >
         <strong class="text-base-700 font-medium lowercase">
           <template v-if="resultMeta.count > 1">
@@ -34,7 +33,7 @@
         </strong>
         <div class="flex items-center gap-4">
           <span class="hidden text-xl leading-none md:block">
-            <i class="i-adjustments-horizontal text-base-600 m-0"></i>
+            <i class="text-base-600 i-adjustments-horizontal m-0"></i>
           </span>
           <button
             @click="isFiltersOpen = !isFiltersOpen"
@@ -49,7 +48,7 @@
             </span>
             <span
               v-if="filtersCount"
-              class="ui-badge-pill-sm outline-secondary/80 outline-3
+              class="outline-3 outline-secondary/80 ui-badge-pill-sm
               absolute -right-1.5 -top-1 outline"
             >
               {{ filtersCount }}
@@ -109,7 +108,7 @@
     <Fade>
       <div
         v-if="isFetching"
-        class="absolute left-0 top-0 z-[14] h-full w-full bg-white/40"
+        class="absolute left-0 top-0 z-[14] size-full bg-white/40"
       ></div>
     </Fade>
   </article>