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
@@ -1,103 +1,103 @@
|
|
1
|
-
<script lang="ts" setup>
|
2
|
-
import { computed, ref, watch } from "vue";
|
3
|
-
|
4
|
-
interface Props {
|
5
|
-
id?: string;
|
6
|
-
label?: string;
|
7
|
-
value?: string | number | boolean;
|
8
|
-
modelValue?: string | number | boolean;
|
9
|
-
isRequired?: boolean;
|
10
|
-
isDisabled?: boolean;
|
11
|
-
}
|
12
|
-
|
13
|
-
const props = withDefaults(defineProps<Props>(), {
|
14
|
-
id: "",
|
15
|
-
label: "default",
|
16
|
-
value: "",
|
17
|
-
modelValue: "",
|
18
|
-
isRequired: false,
|
19
|
-
isDisabled: false,
|
20
|
-
});
|
21
|
-
|
22
|
-
const emit = defineEmits<{
|
23
|
-
"update:modelValue": [value: string];
|
24
|
-
}>();
|
25
|
-
|
26
|
-
const lauEcomRadioButtonClasses = computed(() => {
|
27
|
-
return {
|
28
|
-
"lau-ecom-radio-button lau-ecom-radio-button--upc": true,
|
29
|
-
"lau-ecom-radio-button--disabled": props.isDisabled,
|
30
|
-
"lau-ecom-radio-button--required": props.isRequired,
|
31
|
-
};
|
32
|
-
});
|
33
|
-
|
34
|
-
const radioGroupValue = ref(props.modelValue);
|
35
|
-
|
36
|
-
const handleChange = () => {
|
37
|
-
emit("update:modelValue", String(props.value));
|
38
|
-
};
|
39
|
-
|
40
|
-
watch(
|
41
|
-
() => props.modelValue,
|
42
|
-
(newValue) => {
|
43
|
-
radioGroupValue.value = newValue;
|
44
|
-
},
|
45
|
-
);
|
46
|
-
</script>
|
47
|
-
|
48
|
-
<template>
|
49
|
-
<label>
|
50
|
-
<input
|
51
|
-
:id="id"
|
52
|
-
v-model="radioGroupValue"
|
53
|
-
:class="lauEcomRadioButtonClasses"
|
54
|
-
type="radio"
|
55
|
-
:disabled="isDisabled"
|
56
|
-
:value="value"
|
57
|
-
@change="handleChange"
|
58
|
-
/>
|
59
|
-
<span :for="id">{{ label }}</span>
|
60
|
-
</label>
|
61
|
-
</template>
|
62
|
-
|
63
|
-
<style scoped>
|
64
|
-
.lau-ecom-radio-button {
|
65
|
-
@apply dsEcom-relative
|
66
|
-
dsEcom-float-left
|
67
|
-
dsEcom-mr-2
|
68
|
-
dsEcom-h-5
|
69
|
-
dsEcom-w-5
|
70
|
-
dsEcom-appearance-none
|
71
|
-
dsEcom-rounded-full
|
72
|
-
dsEcom-border-[1px]
|
73
|
-
dsEcom-border-solid
|
74
|
-
dsEcom-border-neutral-90
|
75
|
-
checked:before:dsEcom-opacity-[0.16]
|
76
|
-
checked:after:dsEcom-content-['']
|
77
|
-
checked:after:dsEcom-absolute
|
78
|
-
checked:after:dsEcom-left-1/2
|
79
|
-
checked:after:dsEcom-top-1/2
|
80
|
-
checked:after:dsEcom-h-3
|
81
|
-
checked:after:dsEcom-w-3
|
82
|
-
checked:after:dsEcom-rounded-full
|
83
|
-
checked:after:[transform:translate(-50%,-50%)]
|
84
|
-
checked:focus:before:dsEcom-scale-100;
|
85
|
-
}
|
86
|
-
|
87
|
-
.lau-ecom-radio-button--upc {
|
88
|
-
@apply hover:dsEcom-border-primary-60
|
89
|
-
checked:dsEcom-border-primary-60
|
90
|
-
checked:after:dsEcom-bg-primary-60
|
91
|
-
checked:focus:dsEcom-border-primary-60;
|
92
|
-
}
|
93
|
-
|
94
|
-
.lau-ecom-radio-button--disabled {
|
95
|
-
@apply !dsEcom-border-neutral-50
|
96
|
-
checked:after:dsEcom-bg-neutral-50
|
97
|
-
disabled:dsEcom-cursor-not-allowed;
|
98
|
-
}
|
99
|
-
|
100
|
-
.lau-ecom-radio-button--required {
|
101
|
-
@apply dsEcom-border-primary-60;
|
102
|
-
}
|
103
|
-
</style>
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { computed, ref, watch } from "vue";
|
3
|
+
|
4
|
+
interface Props {
|
5
|
+
id?: string;
|
6
|
+
label?: string;
|
7
|
+
value?: string | number | boolean;
|
8
|
+
modelValue?: string | number | boolean;
|
9
|
+
isRequired?: boolean;
|
10
|
+
isDisabled?: boolean;
|
11
|
+
}
|
12
|
+
|
13
|
+
const props = withDefaults(defineProps<Props>(), {
|
14
|
+
id: "",
|
15
|
+
label: "default",
|
16
|
+
value: "",
|
17
|
+
modelValue: "",
|
18
|
+
isRequired: false,
|
19
|
+
isDisabled: false,
|
20
|
+
});
|
21
|
+
|
22
|
+
const emit = defineEmits<{
|
23
|
+
"update:modelValue": [value: string];
|
24
|
+
}>();
|
25
|
+
|
26
|
+
const lauEcomRadioButtonClasses = computed(() => {
|
27
|
+
return {
|
28
|
+
"lau-ecom-radio-button lau-ecom-radio-button--upc": true,
|
29
|
+
"lau-ecom-radio-button--disabled": props.isDisabled,
|
30
|
+
"lau-ecom-radio-button--required": props.isRequired,
|
31
|
+
};
|
32
|
+
});
|
33
|
+
|
34
|
+
const radioGroupValue = ref(props.modelValue);
|
35
|
+
|
36
|
+
const handleChange = () => {
|
37
|
+
emit("update:modelValue", String(props.value));
|
38
|
+
};
|
39
|
+
|
40
|
+
watch(
|
41
|
+
() => props.modelValue,
|
42
|
+
(newValue) => {
|
43
|
+
radioGroupValue.value = newValue;
|
44
|
+
},
|
45
|
+
);
|
46
|
+
</script>
|
47
|
+
|
48
|
+
<template>
|
49
|
+
<label>
|
50
|
+
<input
|
51
|
+
:id="id"
|
52
|
+
v-model="radioGroupValue"
|
53
|
+
:class="lauEcomRadioButtonClasses"
|
54
|
+
type="radio"
|
55
|
+
:disabled="isDisabled"
|
56
|
+
:value="value"
|
57
|
+
@change="handleChange"
|
58
|
+
/>
|
59
|
+
<span :for="id">{{ label }}</span>
|
60
|
+
</label>
|
61
|
+
</template>
|
62
|
+
|
63
|
+
<style scoped>
|
64
|
+
.lau-ecom-radio-button {
|
65
|
+
@apply dsEcom-relative
|
66
|
+
dsEcom-float-left
|
67
|
+
dsEcom-mr-2
|
68
|
+
dsEcom-h-5
|
69
|
+
dsEcom-w-5
|
70
|
+
dsEcom-appearance-none
|
71
|
+
dsEcom-rounded-full
|
72
|
+
dsEcom-border-[1px]
|
73
|
+
dsEcom-border-solid
|
74
|
+
dsEcom-border-neutral-90
|
75
|
+
checked:before:dsEcom-opacity-[0.16]
|
76
|
+
checked:after:dsEcom-content-['']
|
77
|
+
checked:after:dsEcom-absolute
|
78
|
+
checked:after:dsEcom-left-1/2
|
79
|
+
checked:after:dsEcom-top-1/2
|
80
|
+
checked:after:dsEcom-h-3
|
81
|
+
checked:after:dsEcom-w-3
|
82
|
+
checked:after:dsEcom-rounded-full
|
83
|
+
checked:after:[transform:translate(-50%,-50%)]
|
84
|
+
checked:focus:before:dsEcom-scale-100;
|
85
|
+
}
|
86
|
+
|
87
|
+
.lau-ecom-radio-button--upc {
|
88
|
+
@apply hover:dsEcom-border-primary-60
|
89
|
+
checked:dsEcom-border-primary-60
|
90
|
+
checked:after:dsEcom-bg-primary-60
|
91
|
+
checked:focus:dsEcom-border-primary-60;
|
92
|
+
}
|
93
|
+
|
94
|
+
.lau-ecom-radio-button--disabled {
|
95
|
+
@apply !dsEcom-border-neutral-50
|
96
|
+
checked:after:dsEcom-bg-neutral-50
|
97
|
+
disabled:dsEcom-cursor-not-allowed;
|
98
|
+
}
|
99
|
+
|
100
|
+
.lau-ecom-radio-button--required {
|
101
|
+
@apply dsEcom-border-primary-60;
|
102
|
+
}
|
103
|
+
</style>
|
@@ -1,71 +1,71 @@
|
|
1
|
-
<script lang="ts" setup>
|
2
|
-
import { computed } from "vue";
|
3
|
-
import {
|
4
|
-
LauEcomUpcIconCertificate,
|
5
|
-
LauEcomUpcIconCreditCard,
|
6
|
-
LauEcomUpcIconVirtualClass,
|
7
|
-
} from "../LauEcomIcon";
|
8
|
-
import { RtbType } from "./types";
|
9
|
-
|
10
|
-
interface Props {
|
11
|
-
type?: RtbType;
|
12
|
-
title?: string;
|
13
|
-
text?: string;
|
14
|
-
}
|
15
|
-
|
16
|
-
const props = withDefaults(defineProps<Props>(), {
|
17
|
-
type: RtbType.modalidad,
|
18
|
-
title: "Aprenderas Haciendo",
|
19
|
-
text: "Resolverás casos reales, a través de clases prácticas. Obtendrás conocimiento para aplicarla en tu trabajo o proyecto personal.",
|
20
|
-
});
|
21
|
-
|
22
|
-
const isModalidadType = computed(() => {
|
23
|
-
return props.type === RtbType.modalidad;
|
24
|
-
});
|
25
|
-
|
26
|
-
const isCertificacionType = computed(() => {
|
27
|
-
return props.type === RtbType.certificacion;
|
28
|
-
});
|
29
|
-
|
30
|
-
const isMetodopagoType = computed(() => {
|
31
|
-
return props.type === RtbType.metodopago;
|
32
|
-
});
|
33
|
-
</script>
|
34
|
-
|
35
|
-
<template>
|
36
|
-
<div
|
37
|
-
v-if="isModalidadType"
|
38
|
-
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
39
|
-
>
|
40
|
-
<LauEcomUpcIconVirtualClass
|
41
|
-
class="dsEcom-fill-secondary-60"
|
42
|
-
width="32"
|
43
|
-
height="32"
|
44
|
-
/>
|
45
|
-
Virtual en vivo
|
46
|
-
</div>
|
47
|
-
<div
|
48
|
-
v-if="isCertificacionType"
|
49
|
-
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
50
|
-
>
|
51
|
-
<LauEcomUpcIconCertificate
|
52
|
-
class="dsEcom-fill-secondary-60"
|
53
|
-
width="32"
|
54
|
-
height="32"
|
55
|
-
/>
|
56
|
-
Certificado de EPG | UPC
|
57
|
-
</div>
|
58
|
-
<div
|
59
|
-
v-if="isMetodopagoType"
|
60
|
-
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
61
|
-
>
|
62
|
-
<LauEcomUpcIconCreditCard
|
63
|
-
class="dsEcom-fill-secondary-60"
|
64
|
-
width="32"
|
65
|
-
height="32"
|
66
|
-
/>
|
67
|
-
Hasta 12 cuotas sin intereses en TC Dinners y BBVA
|
68
|
-
</div>
|
69
|
-
</template>
|
70
|
-
|
71
|
-
<style scoped></style>
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { computed } from "vue";
|
3
|
+
import {
|
4
|
+
LauEcomUpcIconCertificate,
|
5
|
+
LauEcomUpcIconCreditCard,
|
6
|
+
LauEcomUpcIconVirtualClass,
|
7
|
+
} from "../LauEcomIcon";
|
8
|
+
import { RtbType } from "./types";
|
9
|
+
|
10
|
+
interface Props {
|
11
|
+
type?: RtbType;
|
12
|
+
title?: string;
|
13
|
+
text?: string;
|
14
|
+
}
|
15
|
+
|
16
|
+
const props = withDefaults(defineProps<Props>(), {
|
17
|
+
type: RtbType.modalidad,
|
18
|
+
title: "Aprenderas Haciendo",
|
19
|
+
text: "Resolverás casos reales, a través de clases prácticas. Obtendrás conocimiento para aplicarla en tu trabajo o proyecto personal.",
|
20
|
+
});
|
21
|
+
|
22
|
+
const isModalidadType = computed(() => {
|
23
|
+
return props.type === RtbType.modalidad;
|
24
|
+
});
|
25
|
+
|
26
|
+
const isCertificacionType = computed(() => {
|
27
|
+
return props.type === RtbType.certificacion;
|
28
|
+
});
|
29
|
+
|
30
|
+
const isMetodopagoType = computed(() => {
|
31
|
+
return props.type === RtbType.metodopago;
|
32
|
+
});
|
33
|
+
</script>
|
34
|
+
|
35
|
+
<template>
|
36
|
+
<div
|
37
|
+
v-if="isModalidadType"
|
38
|
+
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
39
|
+
>
|
40
|
+
<LauEcomUpcIconVirtualClass
|
41
|
+
class="dsEcom-fill-secondary-60"
|
42
|
+
width="32"
|
43
|
+
height="32"
|
44
|
+
/>
|
45
|
+
Virtual en vivo
|
46
|
+
</div>
|
47
|
+
<div
|
48
|
+
v-if="isCertificacionType"
|
49
|
+
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
50
|
+
>
|
51
|
+
<LauEcomUpcIconCertificate
|
52
|
+
class="dsEcom-fill-secondary-60"
|
53
|
+
width="32"
|
54
|
+
height="32"
|
55
|
+
/>
|
56
|
+
Certificado de EPG | UPC
|
57
|
+
</div>
|
58
|
+
<div
|
59
|
+
v-if="isMetodopagoType"
|
60
|
+
class="core-font-body-reg-05-14px dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
61
|
+
>
|
62
|
+
<LauEcomUpcIconCreditCard
|
63
|
+
class="dsEcom-fill-secondary-60"
|
64
|
+
width="32"
|
65
|
+
height="32"
|
66
|
+
/>
|
67
|
+
Hasta 12 cuotas sin intereses en TC Dinners y BBVA
|
68
|
+
</div>
|
69
|
+
</template>
|
70
|
+
|
71
|
+
<style scoped></style>
|
@@ -1,43 +1,43 @@
|
|
1
|
-
<script lang="ts" setup>
|
2
|
-
import { Step } from "./types";
|
3
|
-
import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
|
4
|
-
interface Props {
|
5
|
-
steps: Step[];
|
6
|
-
currentStep: number;
|
7
|
-
}
|
8
|
-
withDefaults(defineProps<Props>(), {
|
9
|
-
steps: () => [
|
10
|
-
{
|
11
|
-
numberStep: 1,
|
12
|
-
label: "Step",
|
13
|
-
},
|
14
|
-
{
|
15
|
-
numberStep: 2,
|
16
|
-
label: "Step",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
numberStep: 3,
|
20
|
-
label: "Step",
|
21
|
-
},
|
22
|
-
{
|
23
|
-
numberStep: 4,
|
24
|
-
label: "Step",
|
25
|
-
},
|
26
|
-
],
|
27
|
-
currentStep: 1,
|
28
|
-
});
|
29
|
-
</script>
|
30
|
-
|
31
|
-
<template>
|
32
|
-
<div class="dsEcom-flex dsEcom-w-full">
|
33
|
-
<LauEcomStepbarItem
|
34
|
-
v-for="(step, index) in steps"
|
35
|
-
:key="`lau-ecom-stepbar-item-${index + 1}`"
|
36
|
-
:step="step"
|
37
|
-
:is-completed="currentStep > index + 1"
|
38
|
-
:is-current-step="currentStep === index + 1"
|
39
|
-
:is-last-item="index === steps.length - 1"
|
40
|
-
:total-steps="steps.length"
|
41
|
-
/>
|
42
|
-
</div>
|
43
|
-
</template>
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { Step } from "./types";
|
3
|
+
import LauEcomStepbarItem from "./LauEcomStepbarItem.vue";
|
4
|
+
interface Props {
|
5
|
+
steps: Step[];
|
6
|
+
currentStep: number;
|
7
|
+
}
|
8
|
+
withDefaults(defineProps<Props>(), {
|
9
|
+
steps: () => [
|
10
|
+
{
|
11
|
+
numberStep: 1,
|
12
|
+
label: "Step",
|
13
|
+
},
|
14
|
+
{
|
15
|
+
numberStep: 2,
|
16
|
+
label: "Step",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
numberStep: 3,
|
20
|
+
label: "Step",
|
21
|
+
},
|
22
|
+
{
|
23
|
+
numberStep: 4,
|
24
|
+
label: "Step",
|
25
|
+
},
|
26
|
+
],
|
27
|
+
currentStep: 1,
|
28
|
+
});
|
29
|
+
</script>
|
30
|
+
|
31
|
+
<template>
|
32
|
+
<div class="dsEcom-flex dsEcom-w-full">
|
33
|
+
<LauEcomStepbarItem
|
34
|
+
v-for="(step, index) in steps"
|
35
|
+
:key="`lau-ecom-stepbar-item-${index + 1}`"
|
36
|
+
:step="step"
|
37
|
+
:is-completed="currentStep > index + 1"
|
38
|
+
:is-current-step="currentStep === index + 1"
|
39
|
+
:is-last-item="index === steps.length - 1"
|
40
|
+
:total-steps="steps.length"
|
41
|
+
/>
|
42
|
+
</div>
|
43
|
+
</template>
|