lau-ecom-design-system 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/lau-ecom-design-system.esm.js +14 -8
  2. package/dist/lau-ecom-design-system.min.js +1 -1
  3. package/dist/lau-ecom-design-system.ssr.js +14 -8
  4. package/package.json +1 -1
  5. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +5 -1
  6. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +5 -1
  7. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +5 -0
package/dist/lau-ecom-design-system.ssr.js CHANGED
@@ -2038,7 +2038,8 @@ var script$8 = /*@__PURE__*/vue.defineComponent({
2038
2038
  });
2039
2039
  var lauEcomSwitchButtonClasses = vue.computed(function () {
2040
2040
  return {
2041
- "lau-ecom-switch-button": true
2041
+ "lau-ecom-switch-button": true,
2042
+ "lau-ecom-switch-button--disabled": props.isDisabled
2042
2043
  };
2043
2044
  });
2044
2045
  return function (_ctx, _cache) {
@@ -2056,7 +2057,7 @@ var script$8 = /*@__PURE__*/vue.defineComponent({
2056
2057
  }, null, 2 /* CLASS */)]);
2057
2058
  };
2058
2059
  }
2059
- });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";
2060
+ });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";
2060
2061
  styleInject(css_248z$7);script$8.__scopeId = "data-v-72ae33b1";
2061
2062
  script$8.__file = "src/components/LauEcomSwitch/LauEcomSwitch.vue";var _hoisted_1$6 = {
2062
2063
  class: "dsEcom-mb-4"
@@ -2124,8 +2125,9 @@ var script$7 = /*@__PURE__*/vue.defineComponent({
2124
2125
  "onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) {
2125
2126
  return isChecked.value = $event;
2126
2127
  }),
2127
- instance: _ctx.instance
2128
- }, 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]])]);
2128
+ instance: _ctx.instance,
2129
+ isDisabled: _ctx.cookieItem.isDisabled
2130
+ }, 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]])]);
2129
2131
  };
2130
2132
  }
2131
2133
  });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({
2143
2145
  return [{
2144
2146
  title: "Esenciales",
2145
2147
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
2146
- isChecked: false
2148
+ isChecked: false,
2149
+ isDisabled: false
2147
2150
  }, {
2148
2151
  title: "Preferencias",
2149
2152
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
2150
- isChecked: false
2153
+ isChecked: false,
2154
+ isDisabled: false
2151
2155
  }, {
2152
2156
  title: "Estadisticas",
2153
2157
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
2154
- isChecked: true
2158
+ isChecked: true,
2159
+ isDisabled: false
2155
2160
  }, {
2156
2161
  title: "Marketing",
2157
2162
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
2158
- isChecked: false
2163
+ isChecked: true,
2164
+ isDisabled: false
2159
2165
  }];
2160
2166
  }
2161
2167
  },
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "lau-ecom-design-system",
3
3
  "private": false,
4
- "version": "1.0.1",
4
+ "version": "1.0.2",
5
5
  "sourceType": "module",
6
6
  "sideEffects": false,
7
7
  "main": "dist/lau-ecom-design-system.ssr.js",
package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue CHANGED
@@ -19,21 +19,25 @@ const props = withDefaults(defineProps<Props>(), {
19
19
  title: "Esenciales",
20
20
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
21
21
  isChecked: false,
22
+ isDisabled: false,
22
23
  },
23
24
  {
24
25
  title: "Preferencias",
25
26
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
26
27
  isChecked: false,
28
+ isDisabled: false,
27
29
  },
28
30
  {
29
31
  title: "Estadisticas",
30
32
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
31
33
  isChecked: true,
34
+ isDisabled: false,
32
35
  },
33
36
  {
34
37
  title: "Marketing",
35
38
  text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
36
- isChecked: false,
39
+ isChecked: true,
40
+ isDisabled: false,
37
41
  },
38
42
  ];
39
43
  },
package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue CHANGED
@@ -51,7 +51,11 @@ const titleClasses = computed(() => {
51
51
  {{ cookieItem.title }}
52
52
  </p>
53
53
  </div>
54
- <LauEcomSwitch v-model="isChecked" :instance="instance" />
54
+ <LauEcomSwitch
55
+ v-model="isChecked"
56
+ :instance="instance"
57
+ :isDisabled="cookieItem.isDisabled"
58
+ />
55
59
  </div>
56
60
  <div v-show="isOpen" class="lau-ecom-config-accordion-content">
57
61
  <p class="core-font-body-reg-05-14px">
package/src/components/LauEcomSwitch/LauEcomSwitch.vue CHANGED
@@ -37,6 +37,7 @@ const lauEcomSwitchClasses = computed(() => {
37
37
  const lauEcomSwitchButtonClasses = computed(() => {
38
38
  return {
39
39
  "lau-ecom-switch-button": true,
40
+ "lau-ecom-switch-button--disabled": props.isDisabled,
40
41
  };
41
42
  });
42
43
  </script>
@@ -105,4 +106,8 @@ const lauEcomSwitchButtonClasses = computed(() => {
105
106
  peer-checked:dsEcom-ml-5
106
107
  peer-checked:dsEcom-bg-white;
107
108
  }
109
+
110
+ .lau-ecom-switch-button--disabled {
111
+ @apply dsEcom-bg-upc-color-neutral-60;
112
+ }
108
113
  </style>