lau-ecom-design-system 1.0.2 → 1.0.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (11) hide show
  1. package/dist/lau-ecom-design-system.esm.js +510 -340
  2. package/dist/lau-ecom-design-system.min.js +1 -1
  3. package/dist/lau-ecom-design-system.ssr.js +463 -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>