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.
Files changed (28) hide show
  1. package/README.md +16 -0
  2. package/dist/lau-ecom-design-system.esm.js +1486 -0
  3. package/dist/lau-ecom-design-system.min.js +1 -0
  4. package/dist/lau-ecom-design-system.ssr.js +1456 -0
  5. package/dist/style.css +2001 -0
  6. package/package.json +78 -0
  7. package/src/assets/Grotesk/SharpGrotesk-Bold15.otf +0 -0
  8. package/src/assets/Grotesque/Brandon_bld.otf +0 -0
  9. package/src/components/LauEcomBannerCookies/LauEcomBannerCookies.vue +106 -0
  10. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfig.vue +159 -0
  11. package/src/components/LauEcomBannerCookies/LauEcomBannerCookiesConfigAccordion.vue +66 -0
  12. package/src/components/LauEcomButton/LauEcomButton.vue +160 -0
  13. package/src/components/LauEcomCheckbox/LauEcomCheckbox.vue +133 -0
  14. package/src/components/LauEcomDropdown/LauEcomDropdown.vue +203 -0
  15. package/src/components/LauEcomIcon/LauEcomCoreIconNavClose.vue +29 -0
  16. package/src/components/LauEcomIcon/LauEcomUpcIconArrowDown.vue +49 -0
  17. package/src/components/LauEcomIcon/LauEcomUpcIconCheck.vue +29 -0
  18. package/src/components/LauEcomIcon/LauEcomUpcIconExclamationTriangle.vue +31 -0
  19. package/src/components/LauEcomIcon/LauEcomUpcIconNavArrow.vue +29 -0
  20. package/src/components/LauEcomIcon/LauEcomUpcIconNavCheckmark.vue +29 -0
  21. package/src/components/LauEcomInput/LauEcomInput.vue +208 -0
  22. package/src/components/LauEcomRadioButton/LauEcomRadioButton.vue +87 -0
  23. package/src/components/LauEcomStepbar/LauEcomStepbar.vue +45 -0
  24. package/src/components/LauEcomStepbar/LauEcomStepbarItem.vue +129 -0
  25. package/src/components/LauEcomSwitch/LauEcomSwitch.vue +94 -0
  26. package/src/enums/index.ts +2 -0
  27. package/src/enums/instance.ts +5 -0
  28. 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
+ }
@@ -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>