lau-ecom-design-system 1.0.0
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 +16 -0
- package/dist/lau-ecom-design-system.esm.js +1486 -0
- package/dist/lau-ecom-design-system.min.js +1 -0
- package/dist/lau-ecom-design-system.ssr.js +1456 -0
- package/dist/style.css +2001 -0
- package/package.json +78 -0
- package/src/assets/Grotesk/SharpGrotesk-Bold15.otf +0 -0
- package/src/assets/Grotesque/Brandon_bld.otf +0 -0
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +106 -0
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +159 -0
- package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +66 -0
- package/src/components/LauEcomButton/LauEcomButton.vue +160 -0
- package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +133 -0
- package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -0
- package/src/components/LauEcomIcon/LauEcomCoreIconNavClose.vue +29 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +49 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +29 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +31 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +29 -0
- package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +29 -0
- package/src/components/LauEcomInput/LauEcomInput.vue +208 -0
- package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +87 -0
- package/src/components/LauEcomStepbar/LauEcomStepbar.vue +45 -0
- package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +129 -0
- package/src/components/LauEcomSwitch/LauEcomSwitch.vue +94 -0
- package/src/enums/index.ts +2 -0
- package/src/enums/instance.ts +5 -0
- package/src/enums/size.ts +6 -0
package/package.json
ADDED
@@ -0,0 +1,78 @@
|
|
1
|
+
{
|
2
|
+
"name": "lau-ecom-design-system",
|
3
|
+
"private": false,
|
4
|
+
"version": "1.0.0",
|
5
|
+
"sourceType": "module",
|
6
|
+
"sideEffects": false,
|
7
|
+
"main": "dist/lau-ecom-design-system.ssr.js",
|
8
|
+
"module": "dist/lau-ecom-design-system.esm.js",
|
9
|
+
"browser": "dist/lau-ecom-design-system.esm.js",
|
10
|
+
"unpkg": "dist/pe-lau-ecom-design-system.min.js",
|
11
|
+
"files": [
|
12
|
+
"dist/*",
|
13
|
+
"dist/types/",
|
14
|
+
"src/**/*.vue",
|
15
|
+
"src/**/*.otf",
|
16
|
+
"src/enums/*.ts"
|
17
|
+
],
|
18
|
+
"scripts": {
|
19
|
+
"dev": "vite",
|
20
|
+
"build": "rollup --bundleConfigAsCjs --config ./rollup.config.js && npm run start ",
|
21
|
+
"build:ssr": "rollup --config ./rollup.config.js --format cjs",
|
22
|
+
"build:es": "rollup --config ./rollup.config.js --format es",
|
23
|
+
"build:unpkg": "rollup --config ./rollup.config.js --format iife",
|
24
|
+
"start": "npx tailwindcss -i ./src/main.css -o ./dist/style.css",
|
25
|
+
"preview": "vite preview",
|
26
|
+
"storybook": "storybook dev -p 6006",
|
27
|
+
"build-storybook": "storybook build",
|
28
|
+
"prepare": "husky"
|
29
|
+
},
|
30
|
+
"dependencies": {
|
31
|
+
"vue": "^3.5.12"
|
32
|
+
},
|
33
|
+
"devDependencies": {
|
34
|
+
"@babel/core": "^7.25.9",
|
35
|
+
"@babel/preset-env": "^7.25.9",
|
36
|
+
"@babel/preset-typescript": "^7.25.9",
|
37
|
+
"@chromatic-com/storybook": "1.9.0",
|
38
|
+
"@eslint/js": "^9.13.0",
|
39
|
+
"@rollup/plugin-alias": "^5.1.1",
|
40
|
+
"@rollup/plugin-babel": "^6.0.4",
|
41
|
+
"@rollup/plugin-commonjs": "^28.0.1",
|
42
|
+
"@rollup/plugin-node-resolve": "^15.3.0",
|
43
|
+
"@rollup/plugin-replace": "^6.0.1",
|
44
|
+
"@rollup/plugin-typescript": "^12.1.1",
|
45
|
+
"@rollup/plugin-url": "^8.0.2",
|
46
|
+
"@storybook/addon-essentials": "8.3.6",
|
47
|
+
"@storybook/addon-interactions": "8.3.6",
|
48
|
+
"@storybook/addon-links": "8.3.6",
|
49
|
+
"@storybook/addon-onboarding": "8.3.6",
|
50
|
+
"@storybook/addon-styling-webpack": "1.0.0",
|
51
|
+
"@storybook/blocks": "8.3.6",
|
52
|
+
"@storybook/test": "8.3.6",
|
53
|
+
"@storybook/vue3": "8.3.6",
|
54
|
+
"@storybook/vue3-vite": "8.3.6",
|
55
|
+
"@vitejs/plugin-vue": "^5.1.4",
|
56
|
+
"autoprefixer": "^10.4.20",
|
57
|
+
"eslint": "^8.45.0",
|
58
|
+
"eslint-config-prettier": "^9.1.0",
|
59
|
+
"eslint-plugin-prettier": "^5.2.1",
|
60
|
+
"eslint-plugin-vue": "^9.15.1",
|
61
|
+
"globals": "^15.11.0",
|
62
|
+
"husky": "^9.1.6",
|
63
|
+
"lint-staged": "^15.2.10",
|
64
|
+
"minimist": "^1.2.8",
|
65
|
+
"postcss": "^8.4.47",
|
66
|
+
"prettier": "^3.3.3",
|
67
|
+
"pretty-quick": "^4.0.0",
|
68
|
+
"rollup-plugin-postcss": "^4.0.2",
|
69
|
+
"rollup-plugin-terser": "^7.0.2",
|
70
|
+
"rollup-plugin-vue": "^6.0.0",
|
71
|
+
"storybook": "8.3.6",
|
72
|
+
"tailwindcss": "^3.4.14",
|
73
|
+
"typescript": "~5.6.2",
|
74
|
+
"typescript-eslint": "^8.11.0",
|
75
|
+
"vite": "^5.4.9",
|
76
|
+
"vue-tsc": "^2.1.6"
|
77
|
+
}
|
78
|
+
}
|
Binary file
|
Binary file
|
@@ -0,0 +1,106 @@
|
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { computed } from "vue";
|
3
|
+
import LauEcomButton from "../LauEcomButton/LauEcomButton.vue";
|
4
|
+
import { LauEcomButtonType } from "../LauEcomButton/types";
|
5
|
+
import { LauEcomInstance } from "../../enums";
|
6
|
+
|
7
|
+
interface Props {
|
8
|
+
instance?: LauEcomInstance;
|
9
|
+
}
|
10
|
+
|
11
|
+
const props = withDefaults(defineProps<Props>(), {
|
12
|
+
instance: LauEcomInstance.Upc,
|
13
|
+
});
|
14
|
+
|
15
|
+
const emit = defineEmits(["onConfigCookies", "onAccept"]);
|
16
|
+
|
17
|
+
const handleConfigCookies = () => {
|
18
|
+
emit("onConfigCookies");
|
19
|
+
};
|
20
|
+
|
21
|
+
const handleAccept = () => {
|
22
|
+
emit("onAccept");
|
23
|
+
};
|
24
|
+
|
25
|
+
const lauEcomBannerCookiesClasses = computed(() => {
|
26
|
+
return {
|
27
|
+
"lau-ecom-cookies": true,
|
28
|
+
"lau-ecom-cookies--upc": props.instance === LauEcomInstance.Upc,
|
29
|
+
"lau-ecom-cookies--cib": props.instance === LauEcomInstance.Cibertec,
|
30
|
+
};
|
31
|
+
});
|
32
|
+
|
33
|
+
const lauEcomBannerCookiesTextClasses = computed(() => {
|
34
|
+
return {
|
35
|
+
"lau-ecom-text": true,
|
36
|
+
"core-font-body-reg-04-16px": true,
|
37
|
+
"lau-ecom-text--upc": props.instance === LauEcomInstance.Upc,
|
38
|
+
"lau-ecom-text--cib": props.instance === LauEcomInstance.Cibertec,
|
39
|
+
};
|
40
|
+
});
|
41
|
+
</script>
|
42
|
+
|
43
|
+
<template>
|
44
|
+
<div :class="lauEcomBannerCookiesClasses">
|
45
|
+
<p :class="lauEcomBannerCookiesTextClasses">
|
46
|
+
Este sitio web utiliza cookies gracias a esto podemos personalizar los
|
47
|
+
ingresos a la web en futuras visitas y brindarte una mejor experiencia
|
48
|
+
dentro de nuestro sitio. <a>Conoce más</a>
|
49
|
+
</p>
|
50
|
+
<div class="lau-ecom-buttons">
|
51
|
+
<LauEcomButton
|
52
|
+
:instance="instance"
|
53
|
+
:type="LauEcomButtonType.Secondary"
|
54
|
+
@on-click="handleConfigCookies"
|
55
|
+
>
|
56
|
+
Configurar cookies
|
57
|
+
</LauEcomButton>
|
58
|
+
<LauEcomButton :instance="instance" @on-click="handleAccept">
|
59
|
+
Aceptar
|
60
|
+
</LauEcomButton>
|
61
|
+
</div>
|
62
|
+
</div>
|
63
|
+
</template>
|
64
|
+
|
65
|
+
<style scoped>
|
66
|
+
.lau-ecom-cookies {
|
67
|
+
@apply dsEcom-w-full
|
68
|
+
dsEcom-py-[32px]
|
69
|
+
dsEcom-px-[64px]
|
70
|
+
dsEcom-flex
|
71
|
+
dsEcom-justify-between
|
72
|
+
dsEcom-items-center
|
73
|
+
dsEcom-gap-20
|
74
|
+
dsEcom-shadow-upc-shadow-prominent
|
75
|
+
mobiles:dsEcom-flex-col
|
76
|
+
mobiles:dsEcom-px-[24px];
|
77
|
+
}
|
78
|
+
|
79
|
+
.lau-ecom-cookies--upc {
|
80
|
+
@apply dsEcom-text-upc-color-neutral-20;
|
81
|
+
}
|
82
|
+
|
83
|
+
.lau-ecom-cookies--cib {
|
84
|
+
@apply dsEcom-text-color-cbt-color-neutral-20;
|
85
|
+
}
|
86
|
+
|
87
|
+
.lau-ecom-text {
|
88
|
+
@apply dsEcom-block
|
89
|
+
dsEcom-w-[883px]
|
90
|
+
mobiles:dsEcom-w-full;
|
91
|
+
}
|
92
|
+
|
93
|
+
.lau-ecom-text--upc {
|
94
|
+
@apply dsEcom-text-upc-color-neutral-90;
|
95
|
+
}
|
96
|
+
|
97
|
+
.lau-ecom-text--cib {
|
98
|
+
@apply dsEcom-text-color-cbt-color-neutral-80;
|
99
|
+
}
|
100
|
+
|
101
|
+
.lau-ecom-buttons {
|
102
|
+
@apply dsEcom-flex
|
103
|
+
dsEcom-gap-8
|
104
|
+
mobiles:dsEcom-self-end;
|
105
|
+
}
|
106
|
+
</style>
|
@@ -0,0 +1,159 @@
|
|
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
|
+
},
|
23
|
+
{
|
24
|
+
title: "Preferencias",
|
25
|
+
text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
|
26
|
+
isChecked: false,
|
27
|
+
},
|
28
|
+
{
|
29
|
+
title: "Estadisticas",
|
30
|
+
text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
|
31
|
+
isChecked: true,
|
32
|
+
},
|
33
|
+
{
|
34
|
+
title: "Marketing",
|
35
|
+
text: "Este sitio web utiliza cookies gracias a esto podemos personalizar los ingresos a la web en futuras visitas y brindarte una mejor experiencia.",
|
36
|
+
isChecked: false,
|
37
|
+
},
|
38
|
+
];
|
39
|
+
},
|
40
|
+
instance: LauEcomInstance.Upc,
|
41
|
+
});
|
42
|
+
|
43
|
+
const items = reactive(props.cookiesItems);
|
44
|
+
|
45
|
+
const emit = defineEmits(["onClose", "onReject", "onRejectAll", "onAccept"]);
|
46
|
+
|
47
|
+
const bannerCookiesConfigClasses = computed(() => {
|
48
|
+
return {
|
49
|
+
"lau-ecom-banner-cookies-config": true,
|
50
|
+
"lau-ecom-banner-cookies-config--upc":
|
51
|
+
props.instance === LauEcomInstance.Upc,
|
52
|
+
"lau-ecom-banner-cookies-config--cib":
|
53
|
+
props.instance === LauEcomInstance.Cibertec,
|
54
|
+
};
|
55
|
+
});
|
56
|
+
|
57
|
+
const handleCloseConfig = () => {
|
58
|
+
emit("onClose");
|
59
|
+
};
|
60
|
+
|
61
|
+
const handleReject = () => {
|
62
|
+
emit("onReject");
|
63
|
+
};
|
64
|
+
|
65
|
+
const handleRejectAll = () => {
|
66
|
+
emit("onRejectAll");
|
67
|
+
};
|
68
|
+
|
69
|
+
const handleAccept = () => {
|
70
|
+
const itemsConfig = items.map((item) => item.isChecked);
|
71
|
+
console.log(itemsConfig);
|
72
|
+
emit("onAccept");
|
73
|
+
};
|
74
|
+
</script>
|
75
|
+
|
76
|
+
<template>
|
77
|
+
<div :class="bannerCookiesConfigClasses">
|
78
|
+
<div class="lau-ecom-banner-cookies-config-head">
|
79
|
+
<p class="upc-font-subtitle-03-20px">Configuracion de cookies</p>
|
80
|
+
<button @click="handleCloseConfig">
|
81
|
+
<span><LauEcomCoreIconNavClose /></span>
|
82
|
+
</button>
|
83
|
+
</div>
|
84
|
+
<div>
|
85
|
+
<LauEcomBannerCookiesConfigAccordion
|
86
|
+
v-for="(item, index) in items"
|
87
|
+
:key="`cookie-config-${index + 1}`"
|
88
|
+
v-model="item.isChecked"
|
89
|
+
:cookie-item="item"
|
90
|
+
/>
|
91
|
+
</div>
|
92
|
+
<div class="lau-ecom-banner-cookies-buttons">
|
93
|
+
<LauEcomButton
|
94
|
+
class="!dsEcom-w-full mobiles:dsEcom-order-last"
|
95
|
+
:type="LauEcomButtonType.Secondary"
|
96
|
+
@on-click="handleReject"
|
97
|
+
>
|
98
|
+
Rechazar
|
99
|
+
</LauEcomButton>
|
100
|
+
<LauEcomButton
|
101
|
+
class="!dsEcom-w-full"
|
102
|
+
:type="LauEcomButtonType.Secondary"
|
103
|
+
@on-click="handleRejectAll"
|
104
|
+
>
|
105
|
+
Aceptar seleccionadas
|
106
|
+
</LauEcomButton>
|
107
|
+
<LauEcomButton
|
108
|
+
class="!dsEcom-w-full mobiles:dsEcom-order-first"
|
109
|
+
@on-click="handleAccept"
|
110
|
+
>
|
111
|
+
Aceptar todas
|
112
|
+
</LauEcomButton>
|
113
|
+
</div>
|
114
|
+
</div>
|
115
|
+
</template>
|
116
|
+
|
117
|
+
<style scoped>
|
118
|
+
.lau-ecom-banner-cookies-config {
|
119
|
+
@apply dsEcom-flex
|
120
|
+
dsEcom-flex-col
|
121
|
+
dsEcom-gap-10
|
122
|
+
dsEcom-absolute
|
123
|
+
dsEcom-top-1/2
|
124
|
+
dsEcom-left-1/2
|
125
|
+
dsEcom-transform
|
126
|
+
-dsEcom-translate-x-1/2
|
127
|
+
-dsEcom-translate-y-1/2
|
128
|
+
dsEcom-pt-6
|
129
|
+
dsEcom-pb-8
|
130
|
+
dsEcom-px-6
|
131
|
+
dsEcom-w-[584px]
|
132
|
+
dsEcom-h-auto
|
133
|
+
dsEcom-shadow-upc-shadow-prominent
|
134
|
+
mobiles:dsEcom-gap-8
|
135
|
+
mobiles:dsEcom-w-[360px];
|
136
|
+
}
|
137
|
+
|
138
|
+
.lau-ecom-banner-cookies-config--upc {
|
139
|
+
@apply dsEcom-text-upc-color-neutral-100;
|
140
|
+
}
|
141
|
+
|
142
|
+
.lau-ecom-banner-cookies-config--cib {
|
143
|
+
@apply dsEcom-text-color-cbt-color-neutral-100;
|
144
|
+
}
|
145
|
+
|
146
|
+
.lau-ecom-banner-cookies-config-head {
|
147
|
+
@apply dsEcom-flex
|
148
|
+
dsEcom-justify-between
|
149
|
+
dsEcom-items-center;
|
150
|
+
}
|
151
|
+
|
152
|
+
.lau-ecom-banner-cookies-buttons {
|
153
|
+
@apply dsEcom-flex
|
154
|
+
dsEcom-justify-between
|
155
|
+
dsEcom-items-center
|
156
|
+
dsEcom-gap-4
|
157
|
+
mobiles:dsEcom-flex-col;
|
158
|
+
}
|
159
|
+
</style>
|
@@ -0,0 +1,66 @@
|
|
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
|
+
|
7
|
+
interface Props {
|
8
|
+
cookieItem: CookieItem;
|
9
|
+
}
|
10
|
+
|
11
|
+
withDefaults(defineProps<Props>(), {
|
12
|
+
cookieItem: () => {
|
13
|
+
return {
|
14
|
+
title: "Cookie",
|
15
|
+
text: "lorem ipsum dolor sit amet, consectetur",
|
16
|
+
};
|
17
|
+
},
|
18
|
+
});
|
19
|
+
|
20
|
+
const isOpen = ref(false);
|
21
|
+
const isChecked = defineModel<boolean>();
|
22
|
+
|
23
|
+
const handleClickAccordion = () => {
|
24
|
+
isOpen.value = !isOpen.value;
|
25
|
+
};
|
26
|
+
|
27
|
+
const iconClass = computed(() => {
|
28
|
+
return isOpen.value ? "dsEcom-rotate-0" : "dsEcom-rotate-180";
|
29
|
+
});
|
30
|
+
</script>
|
31
|
+
|
32
|
+
<template>
|
33
|
+
<div class="dsEcom-mb-4">
|
34
|
+
<div class="lau-ecom-config-accordion-head">
|
35
|
+
<div
|
36
|
+
class="dsEcom-flex dsEcom-items-center dsEcom-gap-2"
|
37
|
+
@click="handleClickAccordion"
|
38
|
+
>
|
39
|
+
<span :class="iconClass"><LauEcomUpcIconNavArrow /></span>
|
40
|
+
<p class="upc-font-subtitle-03-20px">
|
41
|
+
{{ cookieItem.title }}
|
42
|
+
</p>
|
43
|
+
</div>
|
44
|
+
<LauEcomSwitch v-model="isChecked" />
|
45
|
+
</div>
|
46
|
+
<div v-show="isOpen" class="lau-ecom-config-accordion-content">
|
47
|
+
<p class="core-font-body-reg-05-14px">
|
48
|
+
{{ cookieItem.text }}
|
49
|
+
</p>
|
50
|
+
</div>
|
51
|
+
</div>
|
52
|
+
</template>
|
53
|
+
|
54
|
+
<style scoped>
|
55
|
+
.lau-ecom-config-accordion-head {
|
56
|
+
@apply dsEcom-flex
|
57
|
+
dsEcom-justify-between
|
58
|
+
dsEcom-pb-4
|
59
|
+
dsEcom-border-b-2;
|
60
|
+
}
|
61
|
+
|
62
|
+
.lau-ecom-config-accordion-content {
|
63
|
+
@apply dsEcom-py-2
|
64
|
+
dsEcom-px-8;
|
65
|
+
}
|
66
|
+
</style>
|
@@ -0,0 +1,160 @@
|
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { computed, ref } from "vue";
|
3
|
+
import { LauEcomUpcIconNavArrow } from "../LauEcomIcon";
|
4
|
+
import { Colors } from "../../utils";
|
5
|
+
import { LauEcomButtonSize, LauEcomButtonType } from "./types";
|
6
|
+
import { LauEcomInstance } from "../../enums";
|
7
|
+
|
8
|
+
const props = withDefaults(
|
9
|
+
defineProps<{
|
10
|
+
instance?: LauEcomInstance;
|
11
|
+
type?: LauEcomButtonType;
|
12
|
+
size?: LauEcomButtonSize;
|
13
|
+
isDisabled?: boolean;
|
14
|
+
hasArrow?: boolean;
|
15
|
+
}>(),
|
16
|
+
{
|
17
|
+
instance: LauEcomInstance.Upc,
|
18
|
+
text: "Button Text",
|
19
|
+
type: LauEcomButtonType.Primary,
|
20
|
+
size: LauEcomButtonSize.Large,
|
21
|
+
isDisabled: false,
|
22
|
+
hasArrow: false,
|
23
|
+
},
|
24
|
+
);
|
25
|
+
|
26
|
+
const emit = defineEmits(["onClick"]);
|
27
|
+
|
28
|
+
const isMouseOver = ref(false);
|
29
|
+
|
30
|
+
const lauEcomButtonClasses = computed(() => {
|
31
|
+
return {
|
32
|
+
"lau-ecom-button": true,
|
33
|
+
"lau-ecom-button-upc": props.instance === LauEcomInstance.Upc,
|
34
|
+
"lau-ecom-button-upc--secondary":
|
35
|
+
props.instance === LauEcomInstance.Upc &&
|
36
|
+
props.type === LauEcomButtonType.Secondary,
|
37
|
+
"lau-ecom-button-upc--large":
|
38
|
+
props.instance === LauEcomInstance.Upc &&
|
39
|
+
props.size === LauEcomButtonSize.Large,
|
40
|
+
"lau-ecom-button-upc--medium":
|
41
|
+
props.instance === LauEcomInstance.Upc &&
|
42
|
+
props.size === LauEcomButtonSize.Medium,
|
43
|
+
"lau-ecom-button-upc--disabled":
|
44
|
+
props.instance === "UPC" &&
|
45
|
+
props.type === LauEcomButtonType.Primary &&
|
46
|
+
props.isDisabled,
|
47
|
+
"lau-ecom-button-upc--secondary-disabled":
|
48
|
+
props.instance === LauEcomInstance.Upc &&
|
49
|
+
props.type === LauEcomButtonType.Secondary &&
|
50
|
+
props.isDisabled,
|
51
|
+
};
|
52
|
+
});
|
53
|
+
|
54
|
+
const getIconColor = computed(() => {
|
55
|
+
if (props.instance === "UPC") {
|
56
|
+
switch (props.type) {
|
57
|
+
case LauEcomButtonType.Primary:
|
58
|
+
return Colors["upc-color-neutral-10"];
|
59
|
+
|
60
|
+
case LauEcomButtonType.Secondary:
|
61
|
+
if (props.isDisabled) {
|
62
|
+
return Colors["upc-color-neutral-70"];
|
63
|
+
}
|
64
|
+
return isMouseOver.value
|
65
|
+
? Colors["upc-color-red-80"]
|
66
|
+
: Colors["upc-color-red-60-base"];
|
67
|
+
|
68
|
+
default:
|
69
|
+
return "";
|
70
|
+
}
|
71
|
+
}
|
72
|
+
return "";
|
73
|
+
});
|
74
|
+
|
75
|
+
const handleClick = () => {
|
76
|
+
emit("onClick");
|
77
|
+
};
|
78
|
+
|
79
|
+
const handleMouseOver = () => {
|
80
|
+
isMouseOver.value = true;
|
81
|
+
};
|
82
|
+
|
83
|
+
const handleMouseOut = () => {
|
84
|
+
isMouseOver.value = false;
|
85
|
+
};
|
86
|
+
</script>
|
87
|
+
|
88
|
+
<template>
|
89
|
+
<button
|
90
|
+
class="upc-font-button-bold-16px"
|
91
|
+
:class="lauEcomButtonClasses"
|
92
|
+
:disabled="isDisabled"
|
93
|
+
@mouseover="handleMouseOver"
|
94
|
+
@mouseout="handleMouseOut"
|
95
|
+
@click="handleClick"
|
96
|
+
>
|
97
|
+
<LauEcomUpcIconNavArrow v-if="hasArrow" :color="getIconColor" />
|
98
|
+
<slot></slot>
|
99
|
+
</button>
|
100
|
+
</template>
|
101
|
+
|
102
|
+
<style scoped>
|
103
|
+
.lau-ecom-button {
|
104
|
+
@apply dsEcom-text-upc-color-neutral-10 dsEcom-flex dsEcom-items-center dsEcom-justify-center dsEcom-gap-2;
|
105
|
+
}
|
106
|
+
|
107
|
+
.lau-ecom-button-upc {
|
108
|
+
@apply dsEcom-bg-upc-color-red-60-base
|
109
|
+
dsEcom-rounded-core-border-radius-32px
|
110
|
+
dsEcom-border-[1px]
|
111
|
+
dsEcom-border-upc-color-red-60-base
|
112
|
+
dsEcom-text-center
|
113
|
+
dsEcom-py-[14px]
|
114
|
+
dsEcom-px-[16px]
|
115
|
+
hover:dsEcom-bg-upc-color-red-80
|
116
|
+
hover:dsEcom-border-upc-color-red-80
|
117
|
+
active:dsEcom-bg-upc-color-red-80
|
118
|
+
active:dsEcom-border-upc-color-red-80;
|
119
|
+
}
|
120
|
+
|
121
|
+
.lau-ecom-button-upc--large {
|
122
|
+
@apply dsEcom-w-auto
|
123
|
+
dsEcom-h-[48px];
|
124
|
+
}
|
125
|
+
|
126
|
+
.lau-ecom-button-upc--medium {
|
127
|
+
@apply dsEcom-w-auto
|
128
|
+
dsEcom-h-[44px];
|
129
|
+
}
|
130
|
+
|
131
|
+
.lau-ecom-button-upc--disabled {
|
132
|
+
@apply dsEcom-border-upc-color-neutral-70
|
133
|
+
dsEcom-bg-upc-color-neutral-70
|
134
|
+
hover:dsEcom-bg-upc-color-neutral-70
|
135
|
+
hover:dsEcom-border-upc-color-neutral-70
|
136
|
+
active:dsEcom-bg-upc-color-neutral-70
|
137
|
+
active:dsEcom-border-upc-color-neutral-70;
|
138
|
+
}
|
139
|
+
|
140
|
+
.lau-ecom-button-upc--secondary {
|
141
|
+
@apply dsEcom-bg-upc-color-neutral-10
|
142
|
+
dsEcom-border-upc-color-red-60-base
|
143
|
+
dsEcom-text-upc-color-red-60-base
|
144
|
+
hover:dsEcom-text-upc-color-red-80
|
145
|
+
hover:dsEcom-border-upc-color-red-80
|
146
|
+
hover:dsEcom-bg-upc-color-neutral-10
|
147
|
+
active:dsEcom-text-upc-color-red-80
|
148
|
+
active:dsEcom-border-upc-color-red-80
|
149
|
+
active:dsEcom-bg-upc-color-neutral-10;
|
150
|
+
}
|
151
|
+
|
152
|
+
.lau-ecom-button-upc--secondary-disabled {
|
153
|
+
@apply dsEcom-border-upc-color-neutral-70
|
154
|
+
dsEcom-text-upc-color-neutral-70
|
155
|
+
hover:dsEcom-border-upc-color-neutral-70
|
156
|
+
hover:dsEcom-text-upc-color-neutral-70
|
157
|
+
active:dsEcom-border-upc-color-neutral-70
|
158
|
+
active:dsEcom-text-upc-color-neutral-70;
|
159
|
+
}
|
160
|
+
</style>
|
@@ -0,0 +1,133 @@
|
|
1
|
+
<script lang="ts" setup>
|
2
|
+
import { computed, ref } from "vue";
|
3
|
+
import { LauEcomUpcIconNavCheckmark } from "../LauEcomIcon";
|
4
|
+
|
5
|
+
interface Props {
|
6
|
+
id?: string;
|
7
|
+
label?: string;
|
8
|
+
value?: string | number | boolean;
|
9
|
+
modelValue?: string | number | boolean | [];
|
10
|
+
isRequired?: boolean;
|
11
|
+
isDisabled?: boolean;
|
12
|
+
}
|
13
|
+
|
14
|
+
const props = withDefaults(defineProps<Props>(), {
|
15
|
+
id: "",
|
16
|
+
label: "text label",
|
17
|
+
value: "",
|
18
|
+
modelValue: () => false,
|
19
|
+
isRequired: false,
|
20
|
+
isDisabled: false,
|
21
|
+
});
|
22
|
+
|
23
|
+
const emit = defineEmits<{
|
24
|
+
"update:modelValue": [value: string | number | boolean];
|
25
|
+
}>();
|
26
|
+
|
27
|
+
const isChecked = ref(
|
28
|
+
typeof props.modelValue === "boolean"
|
29
|
+
? props.modelValue
|
30
|
+
: //@ts-ignore
|
31
|
+
props.modelValue.includes(props.value),
|
32
|
+
);
|
33
|
+
|
34
|
+
const handleChange = () => {
|
35
|
+
if (typeof props.modelValue !== "boolean") {
|
36
|
+
isChecked.value = !isChecked.value;
|
37
|
+
//@ts-ignore
|
38
|
+
const newValue = isChecked.value
|
39
|
+
? [...props.modelValue, props.value]
|
40
|
+
: props.modelValue.filter((val) => val !== props.value);
|
41
|
+
emit("update:modelValue", newValue);
|
42
|
+
} else {
|
43
|
+
isChecked.value = !isChecked.value;
|
44
|
+
emit("update:modelValue", isChecked.value);
|
45
|
+
}
|
46
|
+
};
|
47
|
+
|
48
|
+
const lauEcomCheckboxClasses = computed(() => {
|
49
|
+
return {
|
50
|
+
"lau-ecom-checkbox dsEcom-peer": true,
|
51
|
+
"lau-ecom-checkbox--disabled": props.isDisabled,
|
52
|
+
"dsEcom-cursor-pointer checked:!dsEcom-border-upc-color-red-60-base group-hover:dsEcom-border-upc-color-red-60-base":
|
53
|
+
!props.isDisabled,
|
54
|
+
"!dsEcom-border-upc-color-red-60-base":
|
55
|
+
props.isRequired && !props.isDisabled,
|
56
|
+
};
|
57
|
+
});
|
58
|
+
|
59
|
+
const textLabelClass = computed(() => {
|
60
|
+
if (props.isDisabled) return "!dsEcom-text-upc-color-neutral-70";
|
61
|
+
return "";
|
62
|
+
});
|
63
|
+
</script>
|
64
|
+
|
65
|
+
<template>
|
66
|
+
<div class="dsEcom-flex">
|
67
|
+
<label class="lau-ecom-label group upc-font-body-reg-05-14px">
|
68
|
+
<input
|
69
|
+
:class="lauEcomCheckboxClasses"
|
70
|
+
type="checkbox"
|
71
|
+
:required="isRequired"
|
72
|
+
:disabled="isDisabled"
|
73
|
+
:checked="isChecked"
|
74
|
+
@change="handleChange"
|
75
|
+
/>
|
76
|
+
<LauEcomUpcIconNavCheckmark
|
77
|
+
class="icon-checkmark"
|
78
|
+
color="#fff"
|
79
|
+
width="16"
|
80
|
+
height="16"
|
81
|
+
/>
|
82
|
+
<span
|
83
|
+
v-if="!$slots.default"
|
84
|
+
class="upc-font-link-03-14px"
|
85
|
+
:class="textLabelClass"
|
86
|
+
>{{ label }}</span
|
87
|
+
>
|
88
|
+
</label>
|
89
|
+
<div :class="textLabelClass">
|
90
|
+
<slot :text="`upc-font-link-03-14px ${textLabelClass}`" />
|
91
|
+
</div>
|
92
|
+
</div>
|
93
|
+
</template>
|
94
|
+
|
95
|
+
<style scoped>
|
96
|
+
.lau-ecom-checkbox {
|
97
|
+
@apply dsEcom-w-5
|
98
|
+
dsEcom-h-5
|
99
|
+
dsEcom-mr-2
|
100
|
+
dsEcom-rounded
|
101
|
+
dsEcom-appearance-none
|
102
|
+
dsEcom-border
|
103
|
+
dsEcom-border-upc-color-neutral-90
|
104
|
+
hover:dsEcom-border-upc-color-red-80
|
105
|
+
dsEcom-transition
|
106
|
+
dsEcom-duration-200
|
107
|
+
after:dsEcom-absolute
|
108
|
+
after:dsEcom-left-0
|
109
|
+
after:dsEcom-top-0
|
110
|
+
after:dsEcom-h-full
|
111
|
+
after:dsEcom-w-full
|
112
|
+
checked:dsEcom-bg-upc-color-red-60-base
|
113
|
+
checked:!dsEcom-border-upc-color-red-60-base
|
114
|
+
focus:dsEcom-outline-none;
|
115
|
+
}
|
116
|
+
|
117
|
+
.lau-ecom-checkbox--disabled {
|
118
|
+
@apply !dsEcom-border-upc-color-neutral-60
|
119
|
+
checked:!dsEcom-border-upc-color-neutral-60
|
120
|
+
checked:!dsEcom-bg-upc-color-neutral-60;
|
121
|
+
}
|
122
|
+
|
123
|
+
.lau-ecom-label {
|
124
|
+
@apply dsEcom-flex dsEcom-items-center dsEcom-text-upc-color-neutral-90 dsEcom-relative;
|
125
|
+
}
|
126
|
+
|
127
|
+
.icon-checkmark {
|
128
|
+
@apply dsEcom-absolute
|
129
|
+
dsEcom-left-[2px]
|
130
|
+
dsEcom-hidden
|
131
|
+
peer-checked:!dsEcom-block;
|
132
|
+
}
|
133
|
+
</style>
|