lau-ecom-design-system 1.0.2 → 1.0.3

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 (11) hide show
  1. package/dist/lau-ecom-design-system.esm.js +514 -340
  2. package/dist/lau-ecom-design-system.min.js +1 -1
  3. package/dist/lau-ecom-design-system.ssr.js +465 -298
  4. package/dist/style.css +36 -6
  5. package/package.json +1 -1
  6. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +199 -105
  7. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +197 -191
  8. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +87 -80
  9. package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue +42 -0
  10. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +119 -113
  11. package/src/components/LauEcomTextButton/LauEcomTextButton.vue +133 -139
package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue CHANGED
@@ -1,191 +1,197 @@
1
- <script lang="ts" setup>
2
- import { computed, reactive } from "vue";
3
- import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
4
- import { LauEcomButtonType } from "../LauEcomButton/types";
5
- import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
6
- import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
7
- import { CookieItem } from "./types";
8
- import { LauEcomInstance } from "../../enums";
9
-
10
- interface Props {
11
- cookiesItems?: CookieItem[];
12
- instance?: LauEcomInstance;
13
- }
14
-
15
- const props = withDefaults(defineProps<Props>(), {
16
- cookiesItems: () => {
17
- return [
18
- {
19
- title: "Esenciales",
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
- isChecked: false,
22
- isDisabled: false,
23
- },
24
- {
25
- title: "Preferencias",
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.",
27
- isChecked: false,
28
- isDisabled: false,
29
- },
30
- {
31
- title: "Estadisticas",
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.",
33
- isChecked: true,
34
- isDisabled: false,
35
- },
36
- {
37
- title: "Marketing",
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.",
39
- isChecked: true,
40
- isDisabled: false,
41
- },
42
- ];
43
- },
44
- instance: LauEcomInstance.Upc,
45
- });
46
-
47
- const items = reactive(props.cookiesItems);
48
-
49
- const emit = defineEmits(["onClose", "onReject", "onRejectAll", "onAccept"]);
50
-
51
- const bannerCookiesConfigClasses = computed(() => {
52
- return {
53
- "lau-ecom-banner-cookies-config": true,
54
- "lau-ecom-banner-cookies-config--upc":
55
- props.instance === LauEcomInstance.Upc,
56
- "lau-ecom-banner-cookies-config--cib":
57
- props.instance === LauEcomInstance.Cibertec,
58
- };
59
- });
60
-
61
- const configCookiesTitleClasses = computed(() => {
62
- return {
63
- "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
64
- "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
65
- };
66
- });
67
-
68
- const configHeadClasses = computed(() => {
69
- return {
70
- "lau-ecom-config-head": true,
71
- "lau-ecom-config-head--upc": props.instance === LauEcomInstance.Upc,
72
- "lau-ecom-config-head--cbt": props.instance === LauEcomInstance.Cibertec,
73
- };
74
- });
75
-
76
- const handleCloseConfig = () => {
77
- emit("onClose");
78
- };
79
-
80
- const handleReject = () => {
81
- emit("onReject");
82
- };
83
-
84
- const handleRejectAll = () => {
85
- emit("onRejectAll");
86
- };
87
-
88
- const handleAccept = () => {
89
- const itemsConfig = items.map((item) => item.isChecked);
90
- console.log(itemsConfig);
91
- emit("onAccept");
92
- };
93
- //
94
- </script>
95
-
96
- <template>
97
- <div :class="bannerCookiesConfigClasses">
98
- <div :class="configHeadClasses">
99
- <p :class="configCookiesTitleClasses">Configuracion de cookies</p>
100
- <button @click="handleCloseConfig">
101
- <span><LauEcomCoreIconNavClose /></span>
102
- </button>
103
- </div>
104
- <div>
105
- <LauEcomBannerCookiesConfigAccordion
106
- v-for="(item, index) in items"
107
- :key="`cookie-config-${index + 1}`"
108
- v-model="item.isChecked"
109
- :cookie-item="item"
110
- :instance="instance!"
111
- />
112
- </div>
113
- <div class="lau-ecom-banner-cookies-buttons">
114
- <LauEcomButton
115
- :instance="instance"
116
- class="!dsEcom-w-full mobiles:dsEcom-order-last"
117
- :type="LauEcomButtonType.Secondary"
118
- @on-click="handleReject"
119
- >
120
- Rechazar
121
- </LauEcomButton>
122
- <LauEcomButton
123
- :instance="instance"
124
- class="!dsEcom-w-full"
125
- :type="LauEcomButtonType.Secondary"
126
- @on-click="handleRejectAll"
127
- >
128
- Aceptar seleccionadas
129
- </LauEcomButton>
130
- <LauEcomButton
131
- :instance="instance"
132
- class="!dsEcom-w-full mobiles:dsEcom-order-first"
133
- @on-click="handleAccept"
134
- >
135
- Aceptar todas
136
- </LauEcomButton>
137
- </div>
138
- </div>
139
- </template>
140
-
141
- <style scoped>
142
- .lau-ecom-banner-cookies-config {
143
- @apply dsEcom-flex
144
- dsEcom-flex-col
145
- dsEcom-gap-10
146
- dsEcom-absolute
147
- dsEcom-top-1/2
148
- dsEcom-left-1/2
149
- dsEcom-transform
150
- -dsEcom-translate-x-1/2
151
- -dsEcom-translate-y-1/2
152
- dsEcom-pt-6
153
- dsEcom-pb-8
154
- dsEcom-px-6
155
- dsEcom-w-[584px]
156
- dsEcom-h-auto
157
- dsEcom-shadow-upc-shadow-prominent
158
- mobiles:dsEcom-gap-8
159
- mobiles:dsEcom-w-[360px];
160
- }
161
-
162
- .lau-ecom-banner-cookies-config--upc {
163
- @apply dsEcom-text-upc-color-neutral-100;
164
- }
165
-
166
- .lau-ecom-banner-cookies-config--cib {
167
- @apply dsEcom-text-color-cbt-color-neutral-100;
168
- }
169
-
170
- .lau-ecom-config-head {
171
- @apply dsEcom-flex
172
- dsEcom-justify-between
173
- dsEcom-items-center;
174
- }
175
-
176
- .lau-ecom-config-head--upc {
177
- @apply dsEcom-text-upc-epg-color-purple-60-base;
178
- }
179
-
180
- .lau-ecom-config-head--cbt {
181
- @apply dsEcom-text-cbt-astro-blue-80;
182
- }
183
-
184
- .lau-ecom-banner-cookies-buttons {
185
- @apply dsEcom-flex
186
- dsEcom-justify-between
187
- dsEcom-items-center
188
- dsEcom-gap-4
189
- mobiles:dsEcom-flex-col;
190
- }
191
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from "vue";
3
+ import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
4
+ import { LauEcomButtonType } from "../LauEcomButton/types";
5
+ import { LauEcomCoreIconNavClose } from "../LauEcomIcon";
6
+ import LauEcomBannerCookiesConfigAccordion from "./LauEcomBannerCookiesConfigAccordion.vue";
7
+ import { CategoryCookie } from "./types";
8
+ import { LauEcomInstance } from "../../enums";
9
+ import {
10
+ acceptAllCookies,
11
+ acceptCookiesSelected,
12
+ CookieItemKey,
13
+ CookieOption,
14
+ rejectCookies,
15
+ } from "../../utils";
16
+
17
+ interface Props {
18
+ categoryCookies?: CategoryCookie[] | null;
19
+ instance?: LauEcomInstance;
20
+ }
21
+
22
+ const props = withDefaults(defineProps<Props>(), {
23
+ categoryCookies: null,
24
+ instance: LauEcomInstance.Upc,
25
+ });
26
+
27
+ const items = ref(props.categoryCookies);
28
+
29
+ const emit = defineEmits([
30
+ "onClose",
31
+ "onReject",
32
+ "onAcceptSelected",
33
+ "onAcceptAll",
34
+ ]);
35
+
36
+ const bannerCookiesConfigClasses = computed(() => {
37
+ return {
38
+ "lau-ecom-banner-cookies-config": true,
39
+ "lau-ecom-banner-cookies-config--upc":
40
+ props.instance === LauEcomInstance.Upc,
41
+ "lau-ecom-banner-cookies-config--cib":
42
+ props.instance === LauEcomInstance.Cibertec,
43
+ };
44
+ });
45
+
46
+ const configCookiesTitleClasses = computed(() => {
47
+ return {
48
+ "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
49
+ "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
50
+ };
51
+ });
52
+
53
+ const configHeadClasses = computed(() => {
54
+ return {
55
+ "lau-ecom-config-head": true,
56
+ "lau-ecom-config-head--upc": props.instance === LauEcomInstance.Upc,
57
+ "lau-ecom-config-head--cbt": props.instance === LauEcomInstance.Cibertec,
58
+ };
59
+ });
60
+
61
+ const handleCloseConfig = () => {
62
+ emit("onClose");
63
+ };
64
+
65
+ const handleReject = () => {
66
+ rejectCookies();
67
+ emit("onReject");
68
+ };
69
+
70
+ const handleAcceptSelected = () => {
71
+ let analyticsStorageOption;
72
+ let adStorageOption;
73
+
74
+ const analyticsStorageIndex = items.value?.findIndex(
75
+ (item) => item.id === CookieItemKey.statistics,
76
+ );
77
+ if (analyticsStorageIndex) {
78
+ analyticsStorageOption = items.value![analyticsStorageIndex].isChecked
79
+ ? CookieOption.granted
80
+ : CookieOption.denied;
81
+ }
82
+
83
+ const adStorageIndex = items.value?.findIndex(
84
+ (item) => item.id === CookieItemKey.marketing,
85
+ );
86
+ if (adStorageIndex) {
87
+ adStorageOption = items.value![adStorageIndex].isChecked
88
+ ? CookieOption.granted
89
+ : CookieOption.denied;
90
+ }
91
+
92
+ acceptCookiesSelected(analyticsStorageOption!, adStorageOption!);
93
+ emit("onAcceptSelected");
94
+ };
95
+
96
+ const handleAcceptAll = () => {
97
+ acceptAllCookies();
98
+ emit("onAcceptAll");
99
+ };
100
+ </script>
101
+
102
+ <template>
103
+ <div :class="bannerCookiesConfigClasses">
104
+ <div :class="configHeadClasses">
105
+ <p :class="configCookiesTitleClasses">Configuracion de cookies</p>
106
+ <button @click="handleCloseConfig">
107
+ <span><LauEcomCoreIconNavClose /></span>
108
+ </button>
109
+ </div>
110
+ <div>
111
+ <LauEcomBannerCookiesConfigAccordion
112
+ v-for="(item, index) in items"
113
+ :key="`cookie-config-${index + 1}`"
114
+ v-model="item.isChecked"
115
+ :category-cookie="item"
116
+ :instance="instance!"
117
+ />
118
+ </div>
119
+ <div class="lau-ecom-banner-cookies-buttons">
120
+ <LauEcomButton
121
+ :instance="instance"
122
+ class="!dsEcom-w-full mobiles:dsEcom-order-last"
123
+ :type="LauEcomButtonType.Secondary"
124
+ @on-click="handleReject"
125
+ >
126
+ Rechazar
127
+ </LauEcomButton>
128
+ <LauEcomButton
129
+ :instance="instance"
130
+ class="!dsEcom-w-full"
131
+ :type="LauEcomButtonType.Secondary"
132
+ @on-click="handleAcceptSelected"
133
+ >
134
+ Aceptar seleccionadas
135
+ </LauEcomButton>
136
+ <LauEcomButton
137
+ :instance="instance"
138
+ class="!dsEcom-w-full mobiles:dsEcom-order-first"
139
+ @on-click="handleAcceptAll"
140
+ >
141
+ Aceptar todas
142
+ </LauEcomButton>
143
+ </div>
144
+ </div>
145
+ </template>
146
+
147
+ <style scoped>
148
+ .lau-ecom-banner-cookies-config {
149
+ @apply dsEcom-flex
150
+ dsEcom-flex-col
151
+ dsEcom-gap-10
152
+ dsEcom-absolute
153
+ dsEcom-top-1/2
154
+ dsEcom-left-1/2
155
+ dsEcom-transform
156
+ -dsEcom-translate-x-1/2
157
+ -dsEcom-translate-y-1/2
158
+ dsEcom-pt-6
159
+ dsEcom-pb-8
160
+ dsEcom-px-6
161
+ dsEcom-w-[584px]
162
+ dsEcom-h-auto
163
+ dsEcom-shadow-upc-shadow-prominent
164
+ mobiles:dsEcom-gap-8
165
+ mobiles:dsEcom-w-[360px];
166
+ }
167
+
168
+ .lau-ecom-banner-cookies-config--upc {
169
+ @apply dsEcom-text-upc-color-neutral-100;
170
+ }
171
+
172
+ .lau-ecom-banner-cookies-config--cib {
173
+ @apply dsEcom-text-color-cbt-color-neutral-100;
174
+ }
175
+
176
+ .lau-ecom-config-head {
177
+ @apply dsEcom-flex
178
+ dsEcom-justify-between
179
+ dsEcom-items-center;
180
+ }
181
+
182
+ .lau-ecom-config-head--upc {
183
+ @apply dsEcom-text-upc-epg-color-purple-60-base;
184
+ }
185
+
186
+ .lau-ecom-config-head--cbt {
187
+ @apply dsEcom-text-cbt-astro-blue-80;
188
+ }
189
+
190
+ .lau-ecom-banner-cookies-buttons {
191
+ @apply dsEcom-flex
192
+ dsEcom-justify-between
193
+ dsEcom-items-center
194
+ dsEcom-gap-4
195
+ mobiles:dsEcom-flex-col;
196
+ }
197
+ </style>
package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue CHANGED
@@ -1,80 +1,87 @@
1
- <script lang="ts" setup>
2
- import { computed, ref } from "vue";
3
- import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
4
- import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
5
- import { CookieItem } from "./types";
6
- import { LauEcomInstance } from "../../enums";
7
-
8
- interface Props {
9
- instance: LauEcomInstance;
10
- cookieItem: CookieItem;
11
- }
12
-
13
- const props = withDefaults(defineProps<Props>(), {
14
- instance: LauEcomInstance.Upc,
15
- cookieItem: () => {
16
- return {
17
- title: "Cookie",
18
- text: "lorem ipsum dolor sit amet, consectetur",
19
- };
20
- },
21
- });
22
-
23
- const isOpen = ref(false);
24
- const isChecked = defineModel<boolean>();
25
-
26
- const handleClickAccordion = () => {
27
- isOpen.value = !isOpen.value;
28
- };
29
-
30
- const iconClass = computed(() => {
31
- return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
32
- });
33
-
34
- const titleClasses = computed(() => {
35
- return {
36
- "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
37
- "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
38
- };
39
- });
40
- </script>
41
-
42
- <template>
43
- <div class="dsEcom-mb-4">
44
- <div class="lau-ecom-config-accordion-head">
45
- <div
46
- class="dsEcom-flex dsEcom-items-center dsEcom-gap-2"
47
- @click="handleClickAccordion"
48
- >
49
- <span :class="iconClass"><LauEcomUpcIconNavArrow /></span>
50
- <p :class="titleClasses">
51
- {{ cookieItem.title }}
52
- </p>
53
- </div>
54
- <LauEcomSwitch
55
- v-model="isChecked"
56
- :instance="instance"
57
- :isDisabled="cookieItem.isDisabled"
58
- />
59
- </div>
60
- <div v-show="isOpen" class="lau-ecom-config-accordion-content">
61
- <p class="core-font-body-reg-05-14px">
62
- {{ cookieItem.text }}
63
- </p>
64
- </div>
65
- </div>
66
- </template>
67
-
68
- <style scoped>
69
- .lau-ecom-config-accordion-head {
70
- @apply dsEcom-flex
71
- dsEcom-justify-between
72
- dsEcom-pb-4
73
- dsEcom-border-b-2;
74
- }
75
-
76
- .lau-ecom-config-accordion-content {
77
- @apply dsEcom-py-2
78
- dsEcom-px-8;
79
- }
80
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from "vue";
3
+ import LauEcomUpcIconNavArrow from "../LauEcomIcon/LauEcomUpcIconNavArrow.vue";
4
+ import LauEcomSwitch from "../LauEcomSwitch/LauEcomSwitch.vue";
5
+ import { CategoryCookie } from "./types";
6
+ import { LauEcomInstance } from "../../enums";
7
+
8
+ interface Props {
9
+ instance: LauEcomInstance;
10
+ categoryCookie: CategoryCookie;
11
+ }
12
+
13
+ const props = withDefaults(defineProps<Props>(), {
14
+ instance: LauEcomInstance.Upc,
15
+ categoryCookie: () => {
16
+ return {
17
+ title: "Cookie",
18
+ description: "lorem ipsum dolor sit amet, consectetur",
19
+ };
20
+ },
21
+ });
22
+
23
+ const isOpen = ref(false);
24
+ const isChecked = defineModel<boolean>();
25
+
26
+ const emit = defineEmits(["onToggle"]);
27
+
28
+ const handleClickAccordion = () => {
29
+ isOpen.value = !isOpen.value;
30
+ };
31
+
32
+ const handleToggle = () => {
33
+ emit("onToggle");
34
+ };
35
+
36
+ const iconClass = computed(() => {
37
+ return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
38
+ });
39
+
40
+ const titleClasses = computed(() => {
41
+ return {
42
+ "upc-font-subtitle-03-20px": props.instance === LauEcomInstance.Upc,
43
+ "cbt-font-subtitle-03-20px": props.instance === LauEcomInstance.Cibertec,
44
+ };
45
+ });
46
+ </script>
47
+
48
+ <template>
49
+ <div class="dsEcom-mb-4">
50
+ <div class="lau-ecom-config-accordion-head">
51
+ <div
52
+ class="dsEcom-flex dsEcom-items-center dsEcom-gap-2"
53
+ @click="handleClickAccordion"
54
+ >
55
+ <span :class="iconClass"><LauEcomUpcIconNavArrow /></span>
56
+ <p :class="titleClasses">
57
+ {{ categoryCookie.title }}
58
+ </p>
59
+ </div>
60
+ <LauEcomSwitch
61
+ v-model="isChecked"
62
+ :instance="instance"
63
+ :isDisabled="categoryCookie.isDisabled"
64
+ @on-toggle="handleToggle"
65
+ />
66
+ </div>
67
+ <div v-show="isOpen" class="lau-ecom-config-accordion-content">
68
+ <p class="core-font-body-reg-05-14px">
69
+ {{ categoryCookie.description }}
70
+ </p>
71
+ </div>
72
+ </div>
73
+ </template>
74
+
75
+ <style scoped>
76
+ .lau-ecom-config-accordion-head {
77
+ @apply dsEcom-flex
78
+ dsEcom-justify-between
79
+ dsEcom-pb-4
80
+ dsEcom-border-b-2;
81
+ }
82
+
83
+ .lau-ecom-config-accordion-content {
84
+ @apply dsEcom-py-2
85
+ dsEcom-px-8;
86
+ }
87
+ </style>
package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue ADDED
@@ -0,0 +1,42 @@
1
+ <script setup lang="ts">
2
+ import { computed } from "vue";
3
+ import { LauEcomInstance } from "../../enums";
4
+
5
+ interface Props {
6
+ instance?: LauEcomInstance;
7
+ }
8
+
9
+ const props = withDefaults(defineProps<Props>(), {
10
+ instance: LauEcomInstance.Upc,
11
+ });
12
+
13
+ const isUpcInstance = computed(() => {
14
+ return props.instance === LauEcomInstance.Upc;
15
+ });
16
+
17
+ const isCbtInstance = computed(() => {
18
+ return props.instance === LauEcomInstance.Cibertec;
19
+ });
20
+
21
+ const getBackgroundClassColor = computed(() => {
22
+ if (isUpcInstance.value) return "dsEcom-bg-upc-color-neutral-80";
23
+ if (isCbtInstance.value) return "dsEcom-bg-cbt-astro-blue-90";
24
+ return "";
25
+ });
26
+ </script>
27
+
28
+ <template>
29
+ <div
30
+ class="dsEcom-bg-opacity-70 dsEcom-flex dsEcom-justify-center dsEcom-items-center dsEcom-absolute dsEcom-inset-0 dsEcom-z-50"
31
+ :class="getBackgroundClassColor"
32
+ >
33
+ <div
34
+ class="dsEcom-flex dsEcom-flex-col dsEcom-gap-4 dsEcom-text-white dsEcom-items-center"
35
+ >
36
+ <p class="upc-epg-font-heading-04-32px">Procesando los datos...</p>
37
+ <p class="core-font-body-reg-02-20px">Espere un momento por favor</p>
38
+ </div>
39
+ </div>
40
+ </template>
41
+
42
+ <style scoped></style>