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
@@ -1,207 +1,207 @@
1
- <script lang="ts" setup>
2
- import { computed, ref } from "vue";
3
- import { LauEcomSize } from "../../enums";
4
- import {
5
- LauEcomUpcIconExclamationTriangle,
6
- LauEcomUpcIconNavCheckmark,
7
- } from "../LauEcomIcon";
8
-
9
- interface Props {
10
- id?: string;
11
- type?: string;
12
- placeholder?: string;
13
- isDisabled?: boolean;
14
- label?: string;
15
- size?: LauEcomSize;
16
- name?: string;
17
- modelValue?: string | number;
18
- inputContainerClass?: string;
19
- inputClass?: string;
20
- errorMessage?: string;
21
- hasSuccess?: boolean;
22
- limit?: number;
23
- }
24
-
25
- const props = withDefaults(defineProps<Props>(), {
26
- id: "lauEcomInput",
27
- type: "text",
28
- placeholder: "Placeholder",
29
- isDisabled: false,
30
- label: "Text label",
31
- size: LauEcomSize.md,
32
- name: "input",
33
- modelValue: "",
34
- inputContainerClass: "",
35
- inputClass: "",
36
- errorMessage: "",
37
- hasSuccess: false,
38
- limit: 50,
39
- });
40
-
41
- const emit = defineEmits<{
42
- "update:modelValue": [value: string];
43
- }>();
44
-
45
- const inputValue = ref(props.modelValue);
46
- const errorMessageValue = ref(props.errorMessage);
47
-
48
- const handleInput = (event: Event) => {
49
- const newValue = (event.target as HTMLInputElement).value;
50
-
51
- if (newValue.length === props.limit) {
52
- errorMessageValue.value = "Excediste el numero de caracteres";
53
- inputValue.value = newValue;
54
- emit("update:modelValue", newValue);
55
- return;
56
- } else {
57
- errorMessageValue.value = props.errorMessage;
58
- }
59
-
60
- inputValue.value = newValue;
61
- emit("update:modelValue", newValue);
62
- };
63
-
64
- const labelClasses = computed(() => {
65
- return {
66
- "lau-ecom-label": true,
67
- "lau-ecom-label--disabled": props.isDisabled,
68
- };
69
- });
70
-
71
- const inputContainerClasses = computed(() => {
72
- return [
73
- "dsEcom-relative",
74
- props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
75
- props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
76
- ];
77
- });
78
-
79
- const inputClasses = computed(() => {
80
- return [
81
- "lau-ecom-input core-font-body-reg-04-16px",
82
- props.inputClass,
83
- props.size === LauEcomSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
84
- { "lau-ecom-input--disabled": props.isDisabled },
85
- { "lau-ecom-input--error": errorMessageValue.value },
86
- { "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value },
87
- props.hasSuccess || errorMessageValue.value
88
- ? "placeholder:!dsEcom-text-neutral-100"
89
- : "placeholder:!dsEcom-text-neutral-80",
90
- ];
91
- });
92
-
93
- const successClasses = computed(() => {
94
- return [
95
- "lau-ecom-success",
96
- props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
97
- ];
98
- });
99
- </script>
100
-
101
- <template>
102
- <div class="dsEcom-flex dsEcom-flex-col">
103
- <label v-if="label" :class="labelClasses">
104
- {{ label }}
105
- </label>
106
- <div :class="inputContainerClasses">
107
- <input
108
- :id="id"
109
- :class="inputClasses"
110
- :type="type"
111
- :placeholder="placeholder"
112
- :name="name"
113
- :disabled="isDisabled"
114
- :value="inputValue"
115
- :maxlength="limit"
116
- @input="handleInput"
117
- />
118
- <div v-if="hasSuccess && !errorMessageValue" :class="successClasses">
119
- <LauEcomUpcIconNavCheckmark
120
- class="dsEcom-fill-feedback-success-60"
121
- width="24"
122
- height="24"
123
- />
124
- </div>
125
- <div
126
- v-if="errorMessageValue"
127
- class="lau-ecom-error-message core-font-body-reg-06-12px"
128
- >
129
- <div class="dsEcom-flex">
130
- <LauEcomUpcIconExclamationTriangle
131
- class="dsEcom-fill-primary-60"
132
- width="16"
133
- height="16"
134
- />
135
- <p class="dsEcom-ml-1">
136
- {{ errorMessageValue }}
137
- </p>
138
- </div>
139
-
140
- <span v-if="inputValue.toString().length === limit">
141
- {{ `${inputValue.toString().length}/${limit}` }}
142
- </span>
143
- </div>
144
- </div>
145
- </div>
146
- </template>
147
-
148
- <style scoped>
149
- input[type="number"]::-webkit-inner-spin-button,
150
- input[type="number"]::-webkit-outer-spin-button {
151
- -webkit-appearance: none;
152
- margin: 0;
153
- }
154
-
155
- .lau-ecom-label {
156
- @apply dsEcom-block
157
- dsEcom-text-neutral-100
158
- dsEcom-font-core-font-family-public-sans
159
- dsEcom-text-[12px]
160
- dsEcom-font-core-font-weight-extrabold
161
- dsEcom-leading-[18px];
162
- }
163
-
164
- .lau-ecom-label--disabled {
165
- @apply !dsEcom-text-neutral-70;
166
- }
167
-
168
- .lau-ecom-input {
169
- @apply dsEcom-w-full
170
- dsEcom-pl-3
171
- dsEcom-pr-[44px]
172
- dsEcom-rounded-sm
173
- dsEcom-border
174
- dsEcom-border-neutral-80
175
- hover:dsEcom-border-stroke-secondary-60
176
- focus:dsEcom-border-stroke-secondary-60 focus:!dsEcom-text-neutral-100
177
- focus-visible:dsEcom-outline-none
178
- disabled:placeholder:dsEcom-text-neutral-70 disabled:dsEcom-bg-neutral-20
179
- disabled:!dsEcom-border-neutral-70;
180
- }
181
-
182
- .lau-ecom-input--disabled {
183
- @apply !dsEcom-text-neutral-70;
184
- }
185
-
186
- .lau-ecom-input--error {
187
- @apply !dsEcom-border-feedback-error-60;
188
- }
189
-
190
- .lau-ecom-input-success {
191
- @apply !dsEcom-border-feedback-success-60
192
- placeholder:!dsEcom-text-neutral-100;
193
- }
194
-
195
- .lau-ecom-error-message {
196
- @apply dsEcom-flex
197
- dsEcom-items-center
198
- dsEcom-mt-[2px]
199
- dsEcom-justify-between
200
- dsEcom-text-primary-60;
201
- }
202
-
203
- .lau-ecom-success {
204
- @apply dsEcom-absolute
205
- dsEcom-right-3;
206
- }
207
- </style>
1
+ <script lang="ts" setup>
2
+ import { computed, ref } from "vue";
3
+ import { LauEcomSize } from "../../enums";
4
+ import {
5
+ LauEcomUpcIconExclamationTriangle,
6
+ LauEcomUpcIconNavCheckmark,
7
+ } from "../LauEcomIcon";
8
+
9
+ interface Props {
10
+ id?: string;
11
+ type?: string;
12
+ placeholder?: string;
13
+ isDisabled?: boolean;
14
+ label?: string;
15
+ size?: LauEcomSize;
16
+ name?: string;
17
+ modelValue?: string | number;
18
+ inputContainerClass?: string;
19
+ inputClass?: string;
20
+ errorMessage?: string;
21
+ hasSuccess?: boolean;
22
+ limit?: number;
23
+ }
24
+
25
+ const props = withDefaults(defineProps<Props>(), {
26
+ id: "lauEcomInput",
27
+ type: "text",
28
+ placeholder: "Placeholder",
29
+ isDisabled: false,
30
+ label: "label",
31
+ size: LauEcomSize.md,
32
+ name: "input",
33
+ modelValue: "",
34
+ inputContainerClass: "",
35
+ inputClass: "",
36
+ errorMessage: "",
37
+ hasSuccess: false,
38
+ limit: 50,
39
+ });
40
+
41
+ const emit = defineEmits<{
42
+ "update:modelValue": [value: string];
43
+ }>();
44
+
45
+ const inputValue = ref(props.modelValue);
46
+ const errorMessageValue = ref(props.errorMessage);
47
+
48
+ const handleInput = (event: Event) => {
49
+ const newValue = (event.target as HTMLInputElement).value;
50
+
51
+ if (newValue.length === props.limit) {
52
+ errorMessageValue.value = "Excediste el numero de caracteres";
53
+ inputValue.value = newValue;
54
+ emit("update:modelValue", newValue);
55
+ return;
56
+ } else {
57
+ errorMessageValue.value = props.errorMessage;
58
+ }
59
+
60
+ inputValue.value = newValue;
61
+ emit("update:modelValue", newValue);
62
+ };
63
+
64
+ const labelClasses = computed(() => {
65
+ return {
66
+ "lau-ecom-label": true,
67
+ "lau-ecom-label--disabled": props.isDisabled,
68
+ };
69
+ });
70
+
71
+ const inputContainerClasses = computed(() => {
72
+ return [
73
+ "dsEcom-relative",
74
+ props.inputContainerClass ? props.inputContainerClass : "dsEcom-w-[284px]",
75
+ props.size === LauEcomSize.md ? "dsEcom-h-[42px]" : "dsEcom-h-[46px]",
76
+ ];
77
+ });
78
+
79
+ const inputClasses = computed(() => {
80
+ return [
81
+ "lau-ecom-input core-font-body-reg-04-16px",
82
+ props.inputClass,
83
+ props.size === LauEcomSize.md ? "dsEcom-py-[9px]" : "dsEcom-py-[11px]",
84
+ { "lau-ecom-input--disabled": props.isDisabled },
85
+ { "lau-ecom-input--error": errorMessageValue.value },
86
+ { "lau-ecom-input-success": props.hasSuccess && !errorMessageValue.value },
87
+ props.hasSuccess || errorMessageValue.value
88
+ ? "placeholder:!dsEcom-text-neutral-100"
89
+ : "placeholder:!dsEcom-text-neutral-80",
90
+ ];
91
+ });
92
+
93
+ const successClasses = computed(() => {
94
+ return [
95
+ "lau-ecom-success",
96
+ props.size === LauEcomSize.md ? "dsEcom-top-[10px]" : "dsEcom-top-3",
97
+ ];
98
+ });
99
+ </script>
100
+
101
+ <template>
102
+ <div class="dsEcom-flex dsEcom-flex-col">
103
+ <label v-if="label" :class="labelClasses">
104
+ {{ label }}
105
+ </label>
106
+ <div :class="inputContainerClasses">
107
+ <input
108
+ :id="id"
109
+ :class="inputClasses"
110
+ :type="type"
111
+ :placeholder="placeholder"
112
+ :name="name"
113
+ :disabled="isDisabled"
114
+ :value="inputValue"
115
+ :maxlength="limit"
116
+ @input="handleInput"
117
+ />
118
+ <div v-if="hasSuccess && !errorMessageValue" :class="successClasses">
119
+ <LauEcomUpcIconNavCheckmark
120
+ class="dsEcom-fill-feedback-success-60"
121
+ width="24"
122
+ height="24"
123
+ />
124
+ </div>
125
+ <div
126
+ v-if="errorMessageValue"
127
+ class="lau-ecom-error-message core-font-body-reg-06-12px"
128
+ >
129
+ <div class="dsEcom-flex">
130
+ <LauEcomUpcIconExclamationTriangle
131
+ class="dsEcom-fill-primary-60"
132
+ width="16"
133
+ height="16"
134
+ />
135
+ <p class="dsEcom-ml-1">
136
+ {{ errorMessageValue }}
137
+ </p>
138
+ </div>
139
+
140
+ <span v-if="inputValue.toString().length === limit">
141
+ {{ `${inputValue.toString().length}/${limit}` }}
142
+ </span>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </template>
147
+
148
+ <style scoped>
149
+ input[type="number"]::-webkit-inner-spin-button,
150
+ input[type="number"]::-webkit-outer-spin-button {
151
+ -webkit-appearance: none;
152
+ margin: 0;
153
+ }
154
+
155
+ .lau-ecom-label {
156
+ @apply dsEcom-block
157
+ dsEcom-text-neutral-100
158
+ dsEcom-font-core-font-family-public-sans
159
+ dsEcom-text-[12px]
160
+ dsEcom-font-core-font-weight-extrabold
161
+ dsEcom-leading-[18px];
162
+ }
163
+
164
+ .lau-ecom-label--disabled {
165
+ @apply !dsEcom-text-neutral-70;
166
+ }
167
+
168
+ .lau-ecom-input {
169
+ @apply dsEcom-w-full
170
+ dsEcom-pl-3
171
+ dsEcom-pr-[44px]
172
+ dsEcom-rounded-sm
173
+ dsEcom-border
174
+ dsEcom-border-neutral-80
175
+ hover:dsEcom-border-stroke-secondary-60
176
+ focus:dsEcom-border-stroke-secondary-60 focus:!dsEcom-text-neutral-100
177
+ focus-visible:dsEcom-outline-none
178
+ disabled:placeholder:dsEcom-text-neutral-70 disabled:dsEcom-bg-neutral-20
179
+ disabled:!dsEcom-border-neutral-70;
180
+ }
181
+
182
+ .lau-ecom-input--disabled {
183
+ @apply !dsEcom-text-neutral-70;
184
+ }
185
+
186
+ .lau-ecom-input--error {
187
+ @apply !dsEcom-border-feedback-error-60;
188
+ }
189
+
190
+ .lau-ecom-input-success {
191
+ @apply !dsEcom-border-feedback-success-60
192
+ placeholder:!dsEcom-text-neutral-100;
193
+ }
194
+
195
+ .lau-ecom-error-message {
196
+ @apply dsEcom-flex
197
+ dsEcom-items-center
198
+ dsEcom-mt-[2px]
199
+ dsEcom-justify-between
200
+ dsEcom-text-primary-60;
201
+ }
202
+
203
+ .lau-ecom-success {
204
+ @apply dsEcom-absolute
205
+ dsEcom-right-3;
206
+ }
207
+ </style>
@@ -1,16 +1,16 @@
1
- <script setup lang="ts"></script>
2
-
3
- <template>
4
- <div
5
- class="dsEcom-bg-opacity-70 dsEcom-flex dsEcom-justify-center dsEcom-items-center dsEcom-absolute dsEcom-inset-0 dsEcom-z-50 dsEcom-bg-neutral-80"
6
- >
7
- <div
8
- class="dsEcom-flex dsEcom-flex-col dsEcom-gap-4 dsEcom-text-white dsEcom-items-center"
9
- >
10
- <p class="upc-epg-font-heading-04-32px">Procesando los datos...</p>
11
- <p class="core-font-body-reg-02-20px">Espere un momento por favor</p>
12
- </div>
13
- </div>
14
- </template>
15
-
16
- <style scoped></style>
1
+ <script setup lang="ts"></script>
2
+
3
+ <template>
4
+ <div
5
+ class="dsEcom-bg-opacity-70 dsEcom-flex dsEcom-justify-center dsEcom-items-center dsEcom-absolute dsEcom-inset-0 dsEcom-z-50 dsEcom-bg-neutral-80"
6
+ >
7
+ <div
8
+ class="dsEcom-flex dsEcom-flex-col dsEcom-gap-4 dsEcom-text-white dsEcom-items-center"
9
+ >
10
+ <p class="upc-epg-font-heading-04-32px">Procesando los datos...</p>
11
+ <p class="core-font-body-reg-02-20px">Espere un momento por favor</p>
12
+ </div>
13
+ </div>
14
+ </template>
15
+
16
+ <style scoped></style>
@@ -0,0 +1,57 @@
1
+ <script setup lang="ts">
2
+ import { computed } from "vue";
3
+ import LauEcomPaginatorButton from "./LauEcomPaginatorButton.vue";
4
+
5
+ interface Props {
6
+ currentPage?: number;
7
+ totalPages?: number;
8
+ }
9
+
10
+ const props = withDefaults(defineProps<Props>(), {
11
+ currentPage: 6,
12
+ totalPages: 6,
13
+ });
14
+
15
+ const emit = defineEmits(["onPrevPage", "onNextPage"]);
16
+
17
+ const handlePrevPage = () => {
18
+ emit("onPrevPage");
19
+ };
20
+
21
+ const handleNextPage = () => {
22
+ emit("onNextPage");
23
+ };
24
+
25
+ const isPrevPageDisabled = computed(() => {
26
+ return props.currentPage === 1;
27
+ });
28
+
29
+ const isNextPageDisabled = computed(() => {
30
+ return props.currentPage === props.totalPages;
31
+ });
32
+ </script>
33
+
34
+ <template>
35
+ <div class="dsEcom-flex dsEcom-gap-6 dsEcom-items-center">
36
+ <LauEcomPaginatorButton
37
+ :is-disabled="isPrevPageDisabled"
38
+ @on-click="handlePrevPage"
39
+ />
40
+ <p class="pagination button-bold-05-20px">
41
+ {{ currentPage }}/{{ totalPages }}
42
+ </p>
43
+ <LauEcomPaginatorButton
44
+ class="dsEcom-rotate-180"
45
+ :is-disabled="isNextPageDisabled"
46
+ @on-click="handleNextPage"
47
+ />
48
+ </div>
49
+ </template>
50
+
51
+ <style scoped>
52
+ .pagination {
53
+ @apply dsEcom-text-primary-60
54
+ dsEcom-cursor-default
55
+ hover:dsEcom-text-primary-70;
56
+ }
57
+ </style>
@@ -0,0 +1,68 @@
1
+ <script lang="ts" setup>
2
+ import { computed } from "vue";
3
+ import { LauEcomUpcIconNavBack } from "../LauEcomIcon";
4
+
5
+ interface Props {
6
+ isDisabled?: boolean;
7
+ }
8
+
9
+ const props = withDefaults(defineProps<Props>(), {
10
+ isDisabled: false,
11
+ });
12
+
13
+ const emit = defineEmits(["onClick"]);
14
+
15
+ const buttonClasses = computed(() => {
16
+ return {
17
+ "paginator-button": true,
18
+ "paginator-button--disabled": props.isDisabled,
19
+ };
20
+ });
21
+
22
+ const iconClasses = computed(() => {
23
+ return {
24
+ "paginator-button__icon": true,
25
+ "paginator-button__icon--disabled": props.isDisabled,
26
+ };
27
+ });
28
+
29
+ const handleClick = () => {
30
+ emit("onClick");
31
+ };
32
+ </script>
33
+
34
+ <template>
35
+ <button :class="buttonClasses" :disabled="isDisabled" @click="handleClick">
36
+ <LauEcomUpcIconNavBack :class="iconClasses" />
37
+ </button>
38
+ </template>
39
+
40
+ <style scoped>
41
+ .paginator-button {
42
+ @apply dsEcom-border-[1px]
43
+ dsEcom-w-fit
44
+ dsEcom-p-[10px]
45
+ dsEcom-rounded-full
46
+ dsEcom-border-secondary-60
47
+ hover:dsEcom-border-secondary-70
48
+ active:dsEcom-border-secondary-80;
49
+ }
50
+
51
+ .paginator-button--disabled {
52
+ @apply dsEcom-border-neutral-70
53
+ hover:dsEcom-border-neutral-70
54
+ active:dsEcom-border-neutral-70;
55
+ }
56
+
57
+ .paginator-button__icon {
58
+ @apply dsEcom-fill-secondary-60
59
+ hover:dsEcom-fill-secondary-70
60
+ active:dsEcom-fill-secondary-80;
61
+ }
62
+
63
+ .paginator-button__icon--disabled {
64
+ @apply dsEcom-fill-neutral-70
65
+ hover:dsEcom-fill-neutral-70
66
+ active:dsEcom-fill-neutral-70;
67
+ }
68
+ </style>