lau-ecom-design-system 1.0.19 → 1.0.20

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 (48) hide show
  1. package/README.md +49 -0
  2. package/dist/316236bc7a52233c.png +0 -0
  3. package/dist/lau-ecom-design-system.esm.css +6 -1
  4. package/dist/lau-ecom-design-system.esm.js +900 -327
  5. package/dist/lau-ecom-design-system.min.css +6 -1
  6. package/dist/lau-ecom-design-system.min.js +1 -1
  7. package/dist/lau-ecom-design-system.ssr.css +6 -1
  8. package/dist/lau-ecom-design-system.ssr.js +787 -256
  9. package/dist/style.css +120 -12
  10. package/package.json +80 -80
  11. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +178 -168
  12. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +160 -159
  13. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +80 -76
  14. package/src/components/LauEcomButton/LauEcomButton.vue +137 -137
  15. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +143 -143
  16. package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue +79 -79
  17. package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -203
  18. package/src/components/LauEcomFooter/LauEcomFooter.vue +24 -73
  19. package/src/components/LauEcomFooter/LauEcomSubFooter.vue +5 -31
  20. package/src/components/LauEcomFooter/LauEcomSubFooterCategory.vue +9 -48
  21. package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue +26 -26
  22. package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue +28 -28
  23. package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +0 -7
  24. package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue +28 -28
  25. package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +26 -26
  26. package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue +28 -28
  27. package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue +28 -28
  28. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue +28 -28
  29. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +28 -28
  30. package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue +26 -26
  31. package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +26 -26
  32. package/src/components/LauEcomIcon/LauEcomUpcIconNavBack.vue +25 -0
  33. package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +26 -26
  34. package/src/components/LauEcomInput/LauEcomInput.vue +207 -207
  35. package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue +16 -16
  36. package/src/components/LauEcomPaginator/LauEcomPaginator.vue +57 -0
  37. package/src/components/LauEcomPaginator/LauEcomPaginatorButton.vue +68 -0
  38. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +103 -103
  39. package/src/components/LauEcomRtb/LauEcomRtb.vue +71 -71
  40. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +43 -43
  41. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +128 -128
  42. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +110 -108
  43. package/src/components/LauEcomTab/LauEcomTab.vue +82 -82
  44. package/src/components/LauEcomTag/LauEcomTag.vue +56 -0
  45. package/src/components/LauEcomTextButton/LauEcomTextButton.vue +71 -71
  46. package/src/components/LauEcomTyPage/LauEcomSummary.vue +14 -0
  47. package/src/components/LauEcomTyPage/LauEcomSummaryItem.vue +22 -0
  48. package/src/components/LauEcomTyPage/LauEcomTyPage.vue +149 -0
@@ -0,0 +1,56 @@
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomTagType, LauEcomTagSize } from "./types";
4
+
5
+ interface Props {
6
+ size?: LauEcomTagSize;
7
+ type?: LauEcomTagType;
8
+ }
9
+
10
+ const props = withDefaults(defineProps<Props>(), {
11
+ size: LauEcomTagSize.Big,
12
+ type: LauEcomTagType.Intense,
13
+ });
14
+
15
+ const tagClasses = computed(() => {
16
+ return {
17
+ "lau-ecom-tag": true,
18
+ "lau-ecom-tag--intense": props.type === LauEcomTagType.Intense,
19
+ "lau-ecom-tag--soft-secondary": props.type === LauEcomTagType.SoftSecondary,
20
+ "lau-ecom-tag--soft-tertiary": props.type === LauEcomTagType.SoftTertiary,
21
+ "core-font-body-bold-05-14px": props.size === LauEcomTagSize.Big,
22
+ "core-font-body-bold-07-10px": props.size === LauEcomTagSize.Small,
23
+ };
24
+ });
25
+ </script>
26
+
27
+ <template>
28
+ <div :class="tagClasses">
29
+ <slot></slot>
30
+ </div>
31
+ </template>
32
+
33
+ <style scoped>
34
+ .lau-ecom-tag {
35
+ @apply dsEcom-uppercase
36
+ dsEcom-w-fit
37
+ dsEcom-px-2
38
+ dsEcom-py-1
39
+ dsEcom-rounded-core-border-radius-4px;
40
+ }
41
+
42
+ .lau-ecom-tag--soft-secondary {
43
+ @apply dsEcom-text-secondary-60
44
+ dsEcom-bg-secondary-10;
45
+ }
46
+
47
+ .lau-ecom-tag--soft-tertiary {
48
+ @apply dsEcom-text-tertiary-80
49
+ dsEcom-bg-tertiary-10;
50
+ }
51
+
52
+ .lau-ecom-tag--intense {
53
+ @apply dsEcom-text-neutral-10
54
+ dsEcom-bg-social-pink-70;
55
+ }
56
+ </style>
@@ -1,71 +1,71 @@
1
- <script lang="ts" setup>
2
- import { computed } from "vue";
3
- import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
4
-
5
- interface Props {
6
- size?: string;
7
- isDisabled?: boolean;
8
- type?: string;
9
- hasArrow?: boolean;
10
- }
11
-
12
- const props = withDefaults(defineProps<Props>(), {
13
- size: "medium",
14
- isDisabled: false,
15
- type: "button",
16
- hasArrow: false,
17
- });
18
-
19
- const emit = defineEmits(["onClick"]);
20
-
21
- const handleClick = () => {
22
- emit("onClick");
23
- };
24
-
25
- const lauEcomButtonTextClasses = computed(() => {
26
- return {
27
- "lau-ecom-text-button lau-ecom-text-button--upc upc-font-button-16px": true,
28
- "lau-ecom-text-button--disabled": props.isDisabled,
29
- };
30
- });
31
- </script>
32
-
33
- <template>
34
- <button
35
- :class="lauEcomButtonTextClasses"
36
- :disabled="isDisabled"
37
- @click="handleClick"
38
- >
39
- <slot></slot>
40
- <LauEcomUpcIconNavArrow
41
- v-if="hasArrow"
42
- class="dsEcom-rotate-90 lau-ecom-icon-text-button"
43
- width="16"
44
- height="16"
45
- />
46
- </button>
47
- </template>
48
-
49
- <style scoped>
50
- .lau-ecom-text-button {
51
- @apply dsEcom-flex
52
- dsEcom-items-center
53
- dsEcom-gap-2;
54
- }
55
-
56
- .lau-ecom-text-button--upc {
57
- @apply dsEcom-text-primary-60
58
- hover:dsEcom-text-primary-70
59
- active:dsEcom-text-primary-80;
60
- }
61
-
62
- .lau-ecom-text-button--disabled {
63
- @apply dsEcom-text-neutral-70;
64
- }
65
-
66
- .lau-ecom-icon-text-button {
67
- @apply dsEcom-fill-primary-60
68
- hover:dsEcom-fill-primary-70
69
- active:dsEcom-fill-primary-80;
70
- }
71
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
4
+
5
+ interface Props {
6
+ size?: string;
7
+ isDisabled?: boolean;
8
+ type?: string;
9
+ hasArrow?: boolean;
10
+ }
11
+
12
+ const props = withDefaults(defineProps<Props>(), {
13
+ size: "medium",
14
+ isDisabled: false,
15
+ type: "button",
16
+ hasArrow: false,
17
+ });
18
+
19
+ const emit = defineEmits(["onClick"]);
20
+
21
+ const handleClick = () => {
22
+ emit("onClick");
23
+ };
24
+
25
+ const lauEcomButtonTextClasses = computed(() => {
26
+ return {
27
+ "lau-ecom-text-button lau-ecom-text-button--upc upc-font-button-16px": true,
28
+ "lau-ecom-text-button--disabled": props.isDisabled,
29
+ };
30
+ });
31
+ </script>
32
+
33
+ <template>
34
+ <button
35
+ :class="lauEcomButtonTextClasses"
36
+ :disabled="isDisabled"
37
+ @click="handleClick"
38
+ >
39
+ <slot></slot>
40
+ <LauEcomUpcIconNavArrow
41
+ v-if="hasArrow"
42
+ class="dsEcom-rotate-90 lau-ecom-icon-text-button"
43
+ width="16"
44
+ height="16"
45
+ />
46
+ </button>
47
+ </template>
48
+
49
+ <style scoped>
50
+ .lau-ecom-text-button {
51
+ @apply dsEcom-flex
52
+ dsEcom-items-center
53
+ dsEcom-gap-2;
54
+ }
55
+
56
+ .lau-ecom-text-button--upc {
57
+ @apply dsEcom-text-primary-60
58
+ hover:dsEcom-text-primary-70
59
+ active:dsEcom-text-primary-80;
60
+ }
61
+
62
+ .lau-ecom-text-button--disabled {
63
+ @apply dsEcom-text-neutral-70;
64
+ }
65
+
66
+ .lau-ecom-icon-text-button {
67
+ @apply dsEcom-fill-primary-60
68
+ hover:dsEcom-fill-primary-70
69
+ active:dsEcom-fill-primary-80;
70
+ }
71
+ </style>
@@ -0,0 +1,14 @@
1
+ <script setup lang="ts">
2
+ import LauEcomSummaryItem from "./LauEcomSummaryItem.vue";
3
+ </script>
4
+
5
+ <template>
6
+ <div>
7
+ <p class="button-bold-05-20px dsEcom-text-secondary-60">
8
+ Detalles del curso
9
+ </p>
10
+ <ul>
11
+ <LauEcomSummaryItem />
12
+ </ul>
13
+ </div>
14
+ </template>
@@ -0,0 +1,22 @@
1
+ <script setup lang="ts">
2
+ interface Props {
3
+ title?: string;
4
+ content?: string;
5
+ }
6
+
7
+ withDefaults(defineProps<Props>(), {
8
+ title: "",
9
+ content: "", // Default values for title and content
10
+ });
11
+ </script>
12
+
13
+ <template>
14
+ <li class="dsEcom-grid dsEcom-grid-cols-4 dsEcom-mb-4">
15
+ <span class="button-bold-06-16px dsEcom-text-secondary-60 dsEcom-col-span-2"
16
+ >{{ title }}:</span
17
+ >
18
+ <p class="core-font-body-reg-04-16px dsEcom-text-neutral-100">
19
+ {{ content }}
20
+ </p>
21
+ </li>
22
+ </template>
@@ -0,0 +1,149 @@
1
+ <script setup lang="ts">
2
+ import { computed } from "vue";
3
+ import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
4
+ import LauEcomSummaryItem from "./LauEcomSummaryItem.vue";
5
+ import { SummaryData } from "./types";
6
+
7
+ interface Props {
8
+ summaryData: SummaryData;
9
+ }
10
+
11
+ const props = withDefaults(defineProps<Props>(), {
12
+ summaryData: () => {
13
+ return {
14
+ nroTransaccion: "1231233",
15
+ detallesCurso: {
16
+ inicio: "25 de Noviembre",
17
+ duracion: "6 semanas",
18
+ horario: "Lunes y Jueves",
19
+ },
20
+ resumenCompra: {
21
+ fechaCompra: "12/23",
22
+ nroTransaccion: "1231233",
23
+ nroOperacion: "1231233",
24
+ metodoPago: "tarjeta de credito",
25
+ nroTarjeta: "xxxxxxxxxxxx1234",
26
+ cuotas: "1",
27
+ },
28
+ subtotal: 1400,
29
+ dsct: 30,
30
+ total: 1380,
31
+ };
32
+ },
33
+ });
34
+
35
+ const dsctoMount = computed(() => {
36
+ return (props.summaryData.subtotal! * props.summaryData.dsct!) / 100;
37
+ });
38
+
39
+ const emit = defineEmits(["onGoHomePage"]);
40
+
41
+ const handleGoHomePage = () => {
42
+ emit("onGoHomePage");
43
+ };
44
+ </script>
45
+
46
+ <template>
47
+ <div class="dsEcom-flex dsEcom-flex-col dsEcom-w-fit">
48
+ <p
49
+ class="core-font-body-reg-04-16px dsEcom-text-secondary-60 dsEcom-text-center"
50
+ >
51
+ Nro de transacción: {{ summaryData.nroTransaccion }}
52
+ </p>
53
+ <br />
54
+ <p class="button-bold-03-28px dsEcom-text-secondary-60 dsEcom-text-center">
55
+ ¡Excelente decisión!
56
+ </p>
57
+ <p
58
+ class="core-font-body-reg-04-16px dsEcom-text-neutral-100 dsEcom-text-center"
59
+ >
60
+ Hemos registrado tu solicitud.
61
+ </p>
62
+ <p class="body-reg-05-14px dsEcom-text-neutral-100 dsEcom-my-4">
63
+ En breve recibirás un correo con el comprobante de compra y los próximos
64
+ pasos.
65
+ </p>
66
+ <hr class="dsEcom-bg-neutral-40 dsEcom-mb-6" />
67
+ <img src="../../assets/images/blockhain.png" />
68
+ <p
69
+ class="upc-epg-font-heading-06-24px dsEcom-text-secondary-60 dsEcom-mt-6 dsEcom-mb-5"
70
+ >
71
+ Legislacion Laboral
72
+ </p>
73
+ <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
74
+ <p class="button-bold-05-20px dsEcom-text-secondary-60 dsEcom-mb-4">
75
+ Detalles del curso
76
+ </p>
77
+ <ul>
78
+ <LauEcomSummaryItem
79
+ v-if="summaryData.detallesCurso?.inicio"
80
+ title="Inicio"
81
+ :content="summaryData.detallesCurso.inicio"
82
+ />
83
+ <LauEcomSummaryItem
84
+ title="Duracion"
85
+ :content="summaryData.detallesCurso?.duracion"
86
+ />
87
+ <LauEcomSummaryItem
88
+ v-if="summaryData.detallesCurso?.horario"
89
+ title="Horario"
90
+ :content="summaryData.detallesCurso.horario"
91
+ />
92
+ </ul>
93
+ <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
94
+ <p class="button-bold-05-20px dsEcom-text-secondary-60 dsEcom-mb-4">
95
+ Resumen de compra
96
+ </p>
97
+ <ul>
98
+ <LauEcomSummaryItem
99
+ title="Fecha de compra"
100
+ :content="summaryData.resumenCompra?.fechaCompra"
101
+ />
102
+ <LauEcomSummaryItem
103
+ title="Nro. de transacción"
104
+ :content="summaryData.resumenCompra?.nroTransaccion"
105
+ />
106
+ <LauEcomSummaryItem
107
+ title="Nro. de operación Niubiz"
108
+ :content="summaryData.resumenCompra?.nroOperacion"
109
+ />
110
+ <LauEcomSummaryItem
111
+ title="Método de pago"
112
+ :content="summaryData.resumenCompra?.metodoPago"
113
+ />
114
+ <LauEcomSummaryItem
115
+ title="Nro. de Tarjeta"
116
+ :content="summaryData.resumenCompra?.nroTarjeta"
117
+ />
118
+ <LauEcomSummaryItem
119
+ title="Cuotas"
120
+ :content="summaryData.resumenCompra?.cuotas"
121
+ />
122
+ </ul>
123
+ <hr class="dsEcom-bg-neutral-40 dsEcom-my-4" />
124
+ <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-4">
125
+ <p>Subtotal</p>
126
+ <p class="button-bold-06-16px dsEcom-text-neutral-100">
127
+ S/{{ summaryData.subtotal }}
128
+ </p>
129
+ </div>
130
+ <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-4">
131
+ <p>Cupon (-%{{ summaryData.dsct }})</p>
132
+ <p class="button-bold-06-16px dsEcom-text-primary-60">
133
+ S/{{ dsctoMount }}
134
+ </p>
135
+ </div>
136
+ <hr class="dsEcom-bg-neutral-40 dsEcom-mb-4" />
137
+ <div class="dsEcom-flex dsEcom-justify-between dsEcom-mb-10">
138
+ <p class="button-bold-05-20px">Total</p>
139
+ <p class="button-bold-06-16px dsEcom-text-neutral-100">
140
+ S/{{ summaryData.total }}
141
+ </p>
142
+ </div>
143
+ <LauEcomButton @on-click="handleGoHomePage">
144
+ Ir a la pagina de inicio
145
+ </LauEcomButton>
146
+ </div>
147
+ </template>
148
+
149
+ <style scoped></style>