lau-ecom-design-system 1.0.28 → 1.0.29

package/dist/style.css

@@ -1115,58 +1115,10 @@ video {
   display: none;
 }
 
-.dsEcom-container {
-  width: 100%;
-}
-
-@media (min-width: 320px) {
-  .dsEcom-container {
-    max-width: 320px;
-  }
-}
-
-@media (min-width: 640px) {
-  .dsEcom-container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-  .dsEcom-container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .dsEcom-container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-  .dsEcom-container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .dsEcom-container {
-    max-width: 1536px;
-  }
-}
-
 .dsEcom-pointer-events-none {
   pointer-events: none;
 }
 
-.dsEcom-static {
-  position: static;
-}
-
-.dsEcom-fixed {
-  position: fixed;
-}
-
 .dsEcom-absolute {
   position: absolute;
 }
@@ -1199,10 +1151,6 @@ video {
   right: 0px;
 }
 
-.dsEcom-right-12 {
-  right: 3rem;
-}
-
 .dsEcom-right-4 {
   right: 1rem;
 }
@@ -1227,10 +1175,6 @@ video {
   top: 0.75rem;
 }
 
-.dsEcom-top-4 {
-  top: 1rem;
-}
-
 .dsEcom-top-\[10px\] {
   top: 10px;
 }
@@ -1247,14 +1191,6 @@ video {
   z-index: 50;
 }
 
-.dsEcom-z-\[100\] {
-  z-index: 100;
-}
-
-.dsEcom-z-\[60\] {
-  z-index: 60;
-}
-
 .dsEcom-col-span-2 {
   grid-column: span 2 / span 2;
 }
@@ -1268,11 +1204,6 @@ video {
   margin-right: 91px;
 }
 
-.dsEcom-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
 .dsEcom-my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -1310,10 +1241,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.dsEcom-mt-8 {
-  margin-top: 2rem;
-}
-
 .dsEcom-mt-\[2px\] {
   margin-top: 2px;
 }
@@ -1330,10 +1257,6 @@ video {
   display: flex;
 }
 
-.dsEcom-inline-flex {
-  display: inline-flex;
-}
-
 .dsEcom-grid {
   display: grid;
 }
@@ -1351,22 +1274,10 @@ video {
   height: 1px !important;
 }
 
-.dsEcom-h-12 {
-  height: 3rem;
-}
-
-.dsEcom-h-16 {
-  height: 4rem;
-}
-
 .dsEcom-h-4 {
   height: 1rem;
 }
 
-.dsEcom-h-48 {
-  height: 12rem;
-}
-
 .dsEcom-h-5 {
   height: 1.25rem;
 }
@@ -1407,18 +1318,6 @@ video {
   height: auto;
 }
 
-.dsEcom-h-full {
-  height: 100%;
-}
-
-.dsEcom-h-screen {
-  height: 100vh;
-}
-
-.dsEcom-min-h-screen {
-  min-height: 100vh;
-}
-
 .\!dsEcom-w-full {
   width: 100% !important;
 }
@@ -1427,14 +1326,6 @@ video {
   width: 2.5rem;
 }
 
-.dsEcom-w-12 {
-  width: 3rem;
-}
-
-.dsEcom-w-32 {
-  width: 8rem;
-}
-
 .dsEcom-w-4 {
   width: 1rem;
 }
@@ -1463,10 +1354,6 @@ video {
   width: 883px;
 }
 
-.dsEcom-w-\[calc\(100\%-2rem\)\] {
-  width: calc(100% - 2rem);
-}
-
 .dsEcom-w-auto {
   width: auto;
 }
@@ -1479,18 +1366,6 @@ video {
   width: 100%;
 }
 
-.dsEcom-w-screen {
-  width: 100vw;
-}
-
-.dsEcom-max-w-\[500px\] {
-  max-width: 500px;
-}
-
-.dsEcom-flex-1 {
-  flex: 1 1 0%;
-}
-
 .dsEcom-shrink-0 {
   flex-shrink: 0;
 }
@@ -1514,11 +1389,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.dsEcom--rotate-90 {
-  --tw-rotate: -90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dsEcom-rotate-0 {
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1538,10 +1408,6 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
-.dsEcom-transform-gpu {
-  transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .dsEcom-cursor-default {
   cursor: default;
 }
@@ -1558,10 +1424,6 @@ video {
   appearance: none;
 }
 
-.dsEcom-grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
 .dsEcom-grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -1614,10 +1476,6 @@ video {
   gap: 2rem;
 }
 
-.dsEcom-overflow-hidden {
-  overflow: hidden;
-}
-
 .dsEcom-rounded {
   border-radius: 0.25rem;
 }
@@ -1715,11 +1573,6 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
-.dsEcom-border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-border-opacity, 1));
-}
-
 .dsEcom-border-neutral-60 {
   border-color: var(--neutral-60);
 }
@@ -1752,21 +1605,6 @@ video {
   background-color: var(--primary-60) !important;
 }
 
-.dsEcom-bg-\[\#00A19C\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 161 156 / var(--tw-bg-opacity, 1));
-}
-
-.dsEcom-bg-\[\#E8F3F3\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 243 243 / var(--tw-bg-opacity, 1));
-}
-
-.dsEcom-bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
-}
-
 .dsEcom-bg-blue-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
@@ -1786,19 +1624,10 @@ video {
   background-color: var(--neutral-10);
 }
 
-.dsEcom-bg-neutral-100 {
-  background-color: var(--neutral-100);
-}
-
 .dsEcom-bg-neutral-20 {
   background-color: var(--neutral-20);
 }
 
-.dsEcom-bg-neutral-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 229 229 / var(--tw-bg-opacity, 1));
-}
-
 .dsEcom-bg-neutral-40 {
   background-color: var(--neutral-40);
 }
@@ -1832,10 +1661,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
 }
 
-.dsEcom-bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .dsEcom-bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1888,10 +1713,6 @@ video {
   padding: 0.25rem;
 }
 
-.dsEcom-p-2 {
-  padding: 0.5rem;
-}
-
 .dsEcom-p-4 {
   padding: 1rem;
 }
@@ -2013,10 +1834,6 @@ video {
   padding-right: 3rem;
 }
 
-.dsEcom-pr-24 {
-  padding-right: 6rem;
-}
-
 .dsEcom-pr-\[44px\] {
   padding-right: 44px;
 }
@@ -2041,24 +1858,10 @@ video {
   font-family: core-font-family-public-sans;
 }
 
-.dsEcom-text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
 .dsEcom-text-\[12px\] {
   font-size: 12px;
 }
 
-.dsEcom-text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.dsEcom-font-bold {
-  font-weight: 700;
-}
-
 .dsEcom-font-core-font-weight-extrabold {
   font-weight: 800;
 }
@@ -2110,20 +1913,10 @@ video {
   color: var(--neutral-100);
 }
 
-.dsEcom-text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity, 1));
-}
-
 .dsEcom-text-neutral-60 {
   color: var(--neutral-60);
 }
 
-.dsEcom-text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
-}
-
 .dsEcom-text-neutral-70 {
   color: var(--neutral-70);
 }
@@ -2154,26 +1947,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.dsEcom-opacity-0 {
-  opacity: 0;
-}
-
-.dsEcom-opacity-100 {
-  opacity: 1;
-}
-
-.dsEcom-shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.dsEcom-shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .dsEcom-shadow-upc-shadow-prominent {
   --tw-shadow: 0px 8px 48px -6px rgba(89, 89, 89, 0.24);
   --tw-shadow-colored: 0px 8px 48px -6px var(--tw-shadow-color);
@@ -2204,18 +1977,6 @@ video {
   transition-duration: 150ms;
 }
 
-.dsEcom-transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.dsEcom-transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .dsEcom-duration-200 {
   transition-duration: 200ms;
 }
@@ -2228,10 +1989,6 @@ video {
   transition-duration: 0.3s;
 }
 
-.dsEcom-ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -2519,11 +2276,6 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity, 1));
 }
 
-.hover\:dsEcom-text-neutral-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity, 1));
-}
-
 .hover\:dsEcom-text-neutral-70:hover {
   color: var(--neutral-70);
 }
@@ -2622,12 +2374,6 @@ video {
   display: block !important;
 }
 
-@media (min-width: 768px) {
-  .md\:dsEcom-grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
 @media (min-width: 320px) and (max-width: 1024px) {
   .mobiles\:dsEcom-order-first {
     order: -9999;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lau-ecom-design-system",
   "private": false,
-  "version": "1.0.28",
+  "version": "1.0.29",
   "sourceType": "module",
   "sideEffects": false,
   "main": "dist/lau-ecom-design-system.ssr.js",

package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue

@@ -134,15 +134,21 @@ const handleAcceptAll = () => {
 
 <template>
   <div v-if="isBannerVisible">
-    <div v-if="!isConfigOpen" class="lau-ecom-cookies lau-ecom-cookies--upc">
+    <div 
+      v-if="!isConfigOpen" 
+      class="lau-ecom-cookies lau-ecom-cookies--upc"
+    >
       <p class="lau-ecom-text lau-ecom-text--upc core-font-body-reg-04-16px">
         Este sitio web utiliza cookies gracias a esto podemos personalizar los
         ingresos a la web en futuras visitas y brindarte una mejor experiencia
         dentro de nuestro sitio.
         <a class="core-font-link-02-16px dsEcom-text-link-60">Conoce más</a>
+        
       </p>
       <div class="lau-ecom-buttons">
-        <LauEcomTextButton @on-click="handleConfigCookies">
+        <LauEcomTextButton 
+          @on-click="handleConfigCookies"
+        >
           Configurar cookies
         </LauEcomTextButton>
         <LauEcomButton class="dsEcom-w-[212px]" @on-click="handleAccept">

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -99,7 +99,9 @@ const handleAcceptAll = () => {
     class="lau-ecom-banner-cookies-config lau-ecom-banner-cookies-config--upc"
   >
     <div class="lau-ecom-config-head lau-ecom-config-head--upc">
-      <p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
+      <p class="upc-font-subtitle-03-20px">
+        Configuracion de cookies
+      </p>
       <button @click="handleCloseConfig">
         <span><LauEcomCoreIconNavClose /></span>
       </button>

package/src/components/LauEcomIcon/LauEcomUpcIconClose.vue

@@ -23,7 +23,17 @@ withDefaults(
     stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <line x1="18" y1="6" x2="6" y2="18" />
-    <line x1="6" y1="6" x2="18" y2="18" />
+    <line 
+      x1="18" 
+      y1="6" 
+      x2="6" 
+      y2="18" 
+    />
+    <line 
+      x1="6" 
+      y1="6" 
+      x2="18" 
+      y2="18" 
+    />
   </svg>
 </template> 

package/src/components/LauEcomIcon/LauEcomUpcIconSearch.vue

@@ -23,7 +23,16 @@ withDefaults(
     stroke-linejoin="round"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <circle cx="11" cy="11" r="8" />
-    <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    <circle 
+      cx="11" 
+      cy="11" 
+      r="8" 
+    />
+    <line 
+      x1="21" 
+      y1="21" 
+      x2="16.65" 
+      y2="16.65" 
+    />
   </svg>
 </template> 

package/src/components/LauEcomInputSearch/LauEcomInputSearch.vue

@@ -85,6 +85,8 @@ const handleClear = () => {
 const handleKeyUp = (event: KeyboardEvent) => {
   if (event.key === 'Enter' && inputValue.value) {
     emit('search', inputValue.value);
+    inputValue.value = '';
+    emit('update:modelValue', '');
   }
 };
 </script>
@@ -95,8 +97,8 @@ const handleKeyUp = (event: KeyboardEvent) => {
     :style="{ width }"
   >
     <input
-      type="text"
       v-model="inputValue"
+      type="text"
       :placeholder="placeholder"
       :class="inputClasses"
       @input="handleInput"
@@ -108,14 +110,14 @@ const handleKeyUp = (event: KeyboardEvent) => {
     <!-- Botón de limpiar -->
     <button
       v-if="inputValue"
-      type="button"
-      @click="handleClear"
       :class="[
         'dsEcom-absolute dsEcom-right-8 dsEcom-top-1/2 dsEcom-transform dsEcom--translate-y-1/2',
         'dsEcom-p-1 dsEcom-rounded-full dsEcom-transition-colors dsEcom-duration-300',
         clearIconBgClass,
         'hover:dsEcom-opacity-80'
       ]"
+      type="button"
+      @click="handleClear"
     >
       <LauEcomUpcIconClose
         :width="clearIconSize.width"
@@ -136,7 +138,11 @@ const handleKeyUp = (event: KeyboardEvent) => {
         searchIconBgClass,
         'hover:dsEcom-opacity-80'
       ]"
-      @click="$emit('search', inputValue)"
+      @click="() => {
+        emit('search', inputValue.value);
+        inputValue.value = '';
+        emit('update:modelValue', '');
+      }"
     >
       <LauEcomUpcIconSearch
         :width="searchIconSize.width"