lau-ecom-design-system 1.0.1 → 1.0.2

package/dist/lau-ecom-design-system.ssr.js

@@ -2038,7 +2038,8 @@ var script$8 = /*@__PURE__*/vue.defineComponent({
     });
     var lauEcomSwitchButtonClasses = vue.computed(function () {
       return {
-        "lau-ecom-switch-button": true
+        "lau-ecom-switch-button": true,
+        "lau-ecom-switch-button--disabled": props.isDisabled
       };
     });
     return function (_ctx, _cache) {
@@ -2056,7 +2057,7 @@ var script$8 = /*@__PURE__*/vue.defineComponent({
       }, null, 2 /* CLASS */)]);
     };
   }
-});var css_248z$7 = "\n.lau-ecom-switch[data-v-72ae33b1] {\n    position: relative;\n    height: 1.5rem;\n    width: 2.5rem;\n    flex-shrink: 0;\n    cursor: pointer;\n    appearance: none;\n    border-radius: 9999px;\n    border-width: 1px;\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n    transition-duration: 0.3s\n}\n.lau-ecom-switch[data-v-72ae33b1]:checked {\n    cursor: pointer;\n    padding: 0.25rem\n}\n.lau-ecom-switch[data-v-72ae33b1]:disabled:checked {\n    border-color: var(--color-upc-color-neutral-60) !important;\n    background-color: var(--color-upc-color-neutral-60) !important\n}\n.lau-ecom-switch--upc[data-v-72ae33b1] {\n    border-color: var(--color-upc-color-red-90)\n}\n.lau-ecom-switch--upc[data-v-72ae33b1]:checked {\n    border-color: var(--color-upc-color-red-60-base);\n    background-color: var(--color-upc-color-red-60-base)\n}\n.lau-ecom-switch--cbt[data-v-72ae33b1] {\n    border-color: var(--color-cbt-color-apple-green-60-base)\n}\n.lau-ecom-switch--cbt[data-v-72ae33b1]:checked {\n    border-color: var(--color-cbt-color-apple-green-60-base);\n    background-color: var(--color-cbt-color-apple-green-60-base)\n}\n.lau-ecom-switch--disabled[data-v-72ae33b1] {\n    pointer-events: none;\n    border-color: var(--color-upc-color-neutral-60)\n}\n.lau-ecom-switch-button[data-v-72ae33b1] {\n    pointer-events: none;\n    position: absolute;\n    top: 0.25rem;\n    margin-left: 0.25rem;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 9999px;\n    background-color: var(--color-upc-color-neutral-90);\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n    transition-duration: 0.3s\n}\n.dsEcom-peer:checked ~ .lau-ecom-switch-button[data-v-72ae33b1] {\n    margin-left: 1.25rem;\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\r\n";
+});var css_248z$7 = "\n.lau-ecom-switch[data-v-72ae33b1] {\n    position: relative;\n    height: 1.5rem;\n    width: 2.5rem;\n    flex-shrink: 0;\n    cursor: pointer;\n    appearance: none;\n    border-radius: 9999px;\n    border-width: 1px;\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n    transition-duration: 0.3s\n}\n.lau-ecom-switch[data-v-72ae33b1]:checked {\n    cursor: pointer;\n    padding: 0.25rem\n}\n.lau-ecom-switch[data-v-72ae33b1]:disabled:checked {\n    border-color: var(--color-upc-color-neutral-60) !important;\n    background-color: var(--color-upc-color-neutral-60) !important\n}\n.lau-ecom-switch--upc[data-v-72ae33b1] {\n    border-color: var(--color-upc-color-red-90)\n}\n.lau-ecom-switch--upc[data-v-72ae33b1]:checked {\n    border-color: var(--color-upc-color-red-60-base);\n    background-color: var(--color-upc-color-red-60-base)\n}\n.lau-ecom-switch--cbt[data-v-72ae33b1] {\n    border-color: var(--color-cbt-color-apple-green-60-base)\n}\n.lau-ecom-switch--cbt[data-v-72ae33b1]:checked {\n    border-color: var(--color-cbt-color-apple-green-60-base);\n    background-color: var(--color-cbt-color-apple-green-60-base)\n}\n.lau-ecom-switch--disabled[data-v-72ae33b1] {\n    pointer-events: none;\n    border-color: var(--color-upc-color-neutral-60)\n}\n.lau-ecom-switch-button[data-v-72ae33b1] {\n    pointer-events: none;\n    position: absolute;\n    top: 0.25rem;\n    margin-left: 0.25rem;\n    height: 1rem;\n    width: 1rem;\n    border-radius: 9999px;\n    background-color: var(--color-upc-color-neutral-90);\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms;\n    transition-duration: 0.3s\n}\n.dsEcom-peer:checked ~ .lau-ecom-switch-button[data-v-72ae33b1] {\n    margin-left: 1.25rem;\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.lau-ecom-switch-button--disabled[data-v-72ae33b1] {\n    background-color: var(--color-upc-color-neutral-60)\n}\r\n";
 styleInject(css_248z$7);script$8.__scopeId = "data-v-72ae33b1";
 script$8.__file = "src/components/LauEcomSwitch/LauEcomSwitch.vue";var _hoisted_1$6 = {
   class: "dsEcom-mb-4"
@@ -2124,8 +2125,9 @@ var script$7 = /*@__PURE__*/vue.defineComponent({
         "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
           return isChecked.value = $event;
         }),
-        instance: _ctx.instance
-      }, null, 8 /* PROPS */, ["modelValue", "instance"])]), vue.withDirectives(vue.createElementVNode("div", _hoisted_3$3, [vue.createElementVNode("p", _hoisted_4$3, vue.toDisplayString(_ctx.cookieItem.text), 1 /* TEXT */)], 512 /* NEED_PATCH */), [[vue.vShow, isOpen.value]])]);
+        instance: _ctx.instance,
+        isDisabled: _ctx.cookieItem.isDisabled
+      }, null, 8 /* PROPS */, ["modelValue", "instance", "isDisabled"])]), vue.withDirectives(vue.createElementVNode("div", _hoisted_3$3, [vue.createElementVNode("p", _hoisted_4$3, vue.toDisplayString(_ctx.cookieItem.text), 1 /* TEXT */)], 512 /* NEED_PATCH */), [[vue.vShow, isOpen.value]])]);
     };
   }
 });var css_248z$6 = "\n.lau-ecom-config-accordion-head[data-v-7cc740b2] {\n    display: flex;\n    justify-content: space-between;\n    border-bottom-width: 2px;\n    padding-bottom: 1rem\n}\n.lau-ecom-config-accordion-content[data-v-7cc740b2] {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem;\n    padding-left: 2rem;\n    padding-right: 2rem\n}\r\n";
@@ -2143,19 +2145,23 @@ var script$6 = /*@__PURE__*/vue.defineComponent({
         return [{
           title: "Esenciales",
           text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-          isChecked: false
+          isChecked: false,
+          isDisabled: false
         }, {
           title: "Preferencias",
           text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-          isChecked: false
+          isChecked: false,
+          isDisabled: false
         }, {
           title: "Estadisticas",
           text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-          isChecked: true
+          isChecked: true,
+          isDisabled: false
         }, {
           title: "Marketing",
           text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-          isChecked: false
+          isChecked: true,
+          isDisabled: false
         }];
       }
     },

package/package.json

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

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue

@@ -19,21 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
         title: "Esenciales",
         text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
         isChecked: false,
+        isDisabled: false,
       },
       {
         title: "Preferencias",
         text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
         isChecked: false,
+        isDisabled: false,
       },
       {
         title: "Estadisticas",
         text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
         isChecked: true,
+        isDisabled: false,
       },
       {
         title: "Marketing",
         text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas  y brindarte una mejor experiencia.",
-        isChecked: false,
+        isChecked: true,
+        isDisabled: false,
       },
     ];
   },

package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue

@@ -51,7 +51,11 @@ const titleClasses = computed(() => {
           {{ cookieItem.title }}
         </p>
       </div>
-      <LauEcomSwitch v-model="isChecked" :instance="instance" />
+      <LauEcomSwitch
+        v-model="isChecked"
+        :instance="instance"
+        :isDisabled="cookieItem.isDisabled"
+      />
     </div>
     <div v-show="isOpen" class="lau-ecom-config-accordion-content">
       <p class="core-font-body-reg-05-14px">

package/src/components/LauEcomSwitch/LauEcomSwitch.vue

@@ -37,6 +37,7 @@ const lauEcomSwitchClasses = computed(() => {
 const lauEcomSwitchButtonClasses = computed(() => {
   return {
     "lau-ecom-switch-button": true,
+    "lau-ecom-switch-button--disabled": props.isDisabled,
   };
 });
 </script>
@@ -105,4 +106,8 @@ const lauEcomSwitchButtonClasses = computed(() => {
     peer-checked:dsEcom-ml-5
     peer-checked:dsEcom-bg-white;
 }
+
+.lau-ecom-switch-button--disabled {
+  @apply dsEcom-bg-upc-color-neutral-60;
+}
 </style>