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.
- package/README.md +49 -0
- package/dist/316236bc7a52233c.png +0 -0
- package/dist/lau-ecom-design-system.esm.css +6 -1
- package/dist/lau-ecom-design-system.esm.js +900 -327
- package/dist/lau-ecom-design-system.min.css +6 -1
- package/dist/lau-ecom-design-system.min.js +1 -1
- package/dist/lau-ecom-design-system.ssr.css +6 -1
- package/dist/lau-ecom-design-system.ssr.js +787 -256
- package/dist/style.css +120 -12
- package/package.json +80 -80
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +178 -168
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +160 -159
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +80 -76
- package/src/components/LauEcomButton/LauEcomButton.vue +137 -137
- package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +143 -143
- package/src/components/LauEcomDisclamer/LauEcomDisclamer.vue +79 -79
- package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -203
- package/src/components/LauEcomFooter/LauEcomFooter.vue +24 -73
- package/src/components/LauEcomFooter/LauEcomSubFooter.vue +5 -31
- package/src/components/LauEcomFooter/LauEcomSubFooterCategory.vue +9 -48
- package/src/components/LauEcomIcon/LauEcomCoreIconBook.vue +26 -26
- package/src/components/LauEcomIcon/LauEcomCoreIconFileCode.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +0 -7
- package/src/components/LauEcomIcon/LauEcomUpcIconCertificate.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +26 -26
- package/src/components/LauEcomIcon/LauEcomUpcIconCheckCircle.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconCreditCard.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconExclamationCircle.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +28 -28
- package/src/components/LauEcomIcon/LauEcomUpcIconInfoCircle.vue +26 -26
- package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +26 -26
- package/src/components/LauEcomIcon/LauEcomUpcIconNavBack.vue +25 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +26 -26
- package/src/components/LauEcomInput/LauEcomInput.vue +207 -207
- package/src/components/LauEcomLoaderPage/LauEcomLoaderPage.vue +16 -16
- package/src/components/LauEcomPaginator/LauEcomPaginator.vue +57 -0
- package/src/components/LauEcomPaginator/LauEcomPaginatorButton.vue +68 -0
- package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +103 -103
- package/src/components/LauEcomRtb/LauEcomRtb.vue +71 -71
- package/src/components/LauEcomStepbar/LauEcomStepbar.vue +43 -43
- package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +128 -128
- package/src/components/LauEcomSwitch/LauEcomSwitch.vue +110 -108
- package/src/components/LauEcomTab/LauEcomTab.vue +82 -82
- package/src/components/LauEcomTag/LauEcomTag.vue +56 -0
- package/src/components/LauEcomTextButton/LauEcomTextButton.vue +71 -71
- package/src/components/LauEcomTyPage/LauEcomSummary.vue +14 -0
- package/src/components/LauEcomTyPage/LauEcomSummaryItem.vue +22 -0
- 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>
|